[css-grid] Content Alignment broken with indefinite sized grid container
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 21 Oct 2016 08:11:14 +0000 (08:11 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 21 Oct 2016 08:11:14 +0000 (08:11 +0000)
https://bugs.webkit.org/show_bug.cgi?id=163724

Reviewed by Manuel Rego Casasnovas.

Source/WebCore:

The Grid Tracks sizing algorithm receives as parameter the
available space to be used as space for tracks. We hold a variable
to store the remaining free space for each dimension.

When the grid container size is indefinite we can't compute the
available free space after computing track sizes until such
indefinite size is resolved.

No new tests, just added some additional test cases.

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutBlock): Compute freeSpace for Rows
after doing layout and resolving the indefinite height.

LayoutTests:

Added additional test cases to verify we compute properly the
available free space for content-alignment, handling correctly the
overflow when needed.

* fast/css-grid-layout/grid-content-alignment-overflow.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@207663 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow-expected.txt
LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp

index 364da43..6325438 100644 (file)
@@ -1,3 +1,16 @@
+2016-10-21  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-grid] Content Alignment broken with indefinite sized grid container
+        https://bugs.webkit.org/show_bug.cgi?id=163724
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        Added additional test cases to verify we compute properly the
+        available free space for content-alignment, handling correctly the
+        overflow when needed.
+
+        * fast/css-grid-layout/grid-content-alignment-overflow.html:
+
 2016-10-21  Jer Noble  <jer.noble@apple.com>
 
         [mac-wk2 release] LayoutTest media/media-source/media-source-seek-detach-crash.html is a flaky failure
index 727b92b..b4e79a5 100644 (file)
@@ -1,10 +1,59 @@
 This test checks that the 'overflow' keyword is applied correctly for Content Alignment properties.
 
 PASS
+Grid container width of 60px not enough for 2 column tracks of 50px.
+Content-Alignment: center and Overflow-Alignment: default
+
 PASS
+Grid container height of 150px not enough for 2 row tracks of 100px.
+Content-Alignment: center and Overflow-Alignment: unsafe
+
 PASS
+Grid container width of 60px not enough for 2 column tracks of 50px.
+Content-Alignment: center and Overflow-Alignment: safe
+
 PASS
+Grid container height of 150px not enough for 2 row tracks of 100px.
+Content-Alignment: center and Overflow-Alignment: safe
+
 PASS
+Grid container width of 60px not enough for 2 column tracks of 50px.
+Content-Alignment: end and Overflow-Alignment: default
+
 PASS
+Grid container height of 150px not enough for 2 row tracks of 100px.
+Content-Alignment: end and Overflow-Alignment: unsafe
+
 PASS
+Grid container width of 60px not enough for 2 column tracks of 50px.
+Content-Alignment: end and Overflow-Alignment: safe
+
+PASS
+Grid container height of 150px not enough for 2 row tracks of 100px.
+Content-Alignment: end and Overflow-Alignment: safe
+
+PASS
+Grid container indefinite size using fit-content, hence no possible overflow.
+Content-Alignment: end and Overflow-Alignment: unsafe
+
 PASS
+Grid container indefinite size using fit-content, hence no possible overflow.
+Content-Alignment: center and Overflow-Alignment: unsafe
+
+PASS
+Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.
+Content-Alignment: end and Overflow-Alignment: unsafe
+
+PASS
+Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.
+Content-Alignment: center and Overflow-Alignment: unsafe
+
+PASS
+Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.
+Content-Alignment: end and Overflow-Alignment: unsafe
+
+PASS
+Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.
+Content-Alignment: center and Overflow-Alignment: unsafe
+
+
index cd4b791..bc68177 100644 (file)
@@ -3,17 +3,26 @@
 <head>
 <link href="resources/grid.css" rel="stylesheet">
 <link href="resources/grid-alignment.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
     margin: 0;
 }
+.container {
+    position: relative;
+    float: left;
+}
 
 .grid {
     grid-template-columns: 50px 50px;
     grid-template-rows: 100px 100px;
 }
 
+.contentSizedTracks {
+    grid-template:  -webkit-max-content 100px / -webkit-max-content 50px;
+}
+
 .overflowWidth {
     width: 60px;
     height: 300px;
@@ -23,13 +32,31 @@ body {
     width: 200px;
     height: 150px;
 }
+
+.item1 {
+   width: 50px;
+   height: 150px;
+}
+.item2 {
+   width: 150px;
+   height: 100px;
+}
+
+.minSize {
+   min-width: 300px;
+   min-height: 400px;
+}
+.maxSize {
+   max-width: 100px;
+   max-height: 100px;
+}
 </style>
 </head>
 <body onload="checkLayout('.grid')">
 
 <p>This test checks that the 'overflow' keyword is applied correctly for Content Alignment properties.</p>
 
-<div style="position: relative">
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
     <div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300">
         <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
@@ -37,8 +64,11 @@ body {
         <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
     </div>
 </div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default</b></div>
 
-<div style="position: relative">
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
     <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150">
         <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
@@ -46,8 +76,11 @@ body {
         <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
     </div>
 </div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
 
-<div style="position: relative">
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
     <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300">
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
@@ -55,8 +88,11 @@ body {
         <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
     </div>
 </div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
 
-<div style="position: relative">
+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
     <div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150">
         <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
@@ -64,8 +100,11 @@ body {
         <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
     </div>
 </div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
 
-<div style="position: relative">
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
     <div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300">
         <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
@@ -73,8 +112,11 @@ body {
         <div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
     </div>
 </div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b></div>
+
+<br clear="all">
 
-<div style="position: relative">
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
     <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150">
         <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
@@ -82,8 +124,11 @@ body {
         <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
     </div>
 </div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
 
-<div style="position: relative">
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
     <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300">
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
@@ -91,8 +136,11 @@ body {
         <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
     </div>
 </div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
 
-<div style="position: relative">
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
     <div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150">
         <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
@@ -100,6 +148,73 @@ body {
         <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
     </div>
 </div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+    <div class="grid fit-content contentEndUnsafe" data-expected-width="100" data-expected-height="200">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    </div>
+</div>
+<div clas="title">Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 200px; margin-right: 25px;">
+    <div class="grid fit-content contentCenterUnsafe" data-expected-width="100" data-expected-height="200">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    </div>
+</div>
+<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 25px;">
+    <div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100">
+        <div class="item1 firstRowSecondColumn" data-offset-x="50" data-offset-y="-150" data-expected-width="50" data-expected-height="150"></div>
+        <div class="item2 secondRowFirstColumn" data-offset-x="-100" data-offset-y="0" data-expected-width="150" data-expected-height="100"></div>
+    </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 75px;">
+    <div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100">
+        <div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div>
+        <div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div>
+    </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+    <div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" data-expected-width="300" data-expected-height="400">
+        <div class="item1 firstRowSecondColumn" data-offset-x="250" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
+        <div class="item2 secondRowFirstColumn" data-offset-x="100" data-offset-y="300" data-expected-width="150" data-expected-height="100"></div>
+    </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-right: 25px;">
+    <div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe" data-expected-width="300" data-expected-height="400">
+        <div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-y="75" data-expected-width="50" data-expected-height="150"></div>
+        <div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y="225" data-expected-width="150" data-expected-height="100"></div>
+    </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
 
 </body>
 </html>
index 93d79e6..1584807 100644 (file)
@@ -1,3 +1,24 @@
+2016-10-21  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-grid] Content Alignment broken with indefinite sized grid container
+        https://bugs.webkit.org/show_bug.cgi?id=163724
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        The Grid Tracks sizing algorithm receives as parameter the
+        available space to be used as space for tracks. We hold a variable
+        to store the remaining free space for each dimension.
+
+        When the grid container size is indefinite we can't compute the
+        available free space after computing track sizes until such
+        indefinite size is resolved.
+
+        No new tests, just added some additional test cases.
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::layoutBlock): Compute freeSpace for Rows
+        after doing layout and resolving the indefinite height.
+
 2016-10-21  Jer Noble  <jer.noble@apple.com>
 
         CRASH in SourceBuffer::sourceBufferPrivateDidReceiveSample + 2169
index a51c487..5f0dd04 100644 (file)
@@ -494,11 +494,17 @@ void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
         computeIntrinsicLogicalHeight(sizingData);
     else
         computeTrackSizesForDirection(ForRows, sizingData, availableLogicalHeight(ExcludeMarginBorderPadding));
-    setLogicalHeight(computeTrackBasedLogicalHeight(sizingData) + borderAndPaddingLogicalHeight() + scrollbarLogicalHeight());
+    LayoutUnit trackBasedLogicalHeight = computeTrackBasedLogicalHeight(sizingData) + borderAndPaddingLogicalHeight() + scrollbarLogicalHeight();
+    setLogicalHeight(trackBasedLogicalHeight);
 
     LayoutUnit oldClientAfterEdge = clientLogicalBottom();
     updateLogicalHeight();
 
+    // Once grid's indefinite height is resolved, we can compute the
+    // available free space for Content Alignment.
+    if (!hasDefiniteLogicalHeight)
+        sizingData.setFreeSpace(ForRows, logicalHeight() - trackBasedLogicalHeight);
+
     // 3- If the min-content contribution of any grid items have changed based on the row
     // sizes calculated in step 2, steps 1 and 2 are repeated with the new min-content
     // contribution (once only).