[CSS Grid Layout] Tracks shrink sometimes with indefinite remaining space
authorsvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 19 Jan 2015 09:44:22 +0000 (09:44 +0000)
committersvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 19 Jan 2015 09:44:22 +0000 (09:44 +0000)
https://bugs.webkit.org/show_bug.cgi?id=139059

Reviewed by David Hyatt.

Source/WebCore:

Test: fast/css-grid-layout/grid-grow-tracks-to-their-max.html

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):

LayoutTests:

The third step of the grid track sizing algorithm (method
ComputeUsedBreadthOfGridTracks in the old specs version of the
algorithm) tries to grow all grid tracks until the remaining space
is exhausted. Should the remaining space is undefined we should fill
the tracks up to their limits. This is specified in pseudocode like
this:

    For each Grid track t in GridTracks
        t.UsedBreadth = t.MaxBreadth

That's correct for most of the cases, but it becomes
wrong whenever t.UsedBreadth > t.MaxBreadth something that is not
incorrect. What we actually want to do is to grow the track to its
maximum if and only if the used breadth is smaller than the maximum.

* TestExpectations: Added a test which is correct but starts to fail
due to another bug (wkb.ug/139058).
* fast/css-grid-layout/grid-auto-columns-rows-update.html:
* fast/css-grid-layout/grid-grow-tracks-to-their-max-expected.txt: Added.
* fast/css-grid-layout/grid-grow-tracks-to-their-max.html: Added.
* fast/css-grid-layout/grid-item-removal-track-breadth-update.html:
* fast/css-grid-layout/minmax-max-content-resolution-rows.html:
* fast/css-grid-layout/minmax-min-content-column-resolution-rows.html:
* fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html:
* fast/css-grid-layout/percent-of-indefinite-track-size.html:

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

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html
LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update.html
LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html
LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html
LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html
LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp

index 943cbcf..89ce571 100644 (file)
@@ -1,3 +1,36 @@
+2015-01-19  Sergio Villar Senin  <svillar@igalia.com>
+
+        [CSS Grid Layout] Tracks shrink sometimes with indefinite remaining space
+        https://bugs.webkit.org/show_bug.cgi?id=139059
+
+        Reviewed by David Hyatt.
+
+        The third step of the grid track sizing algorithm (method
+        ComputeUsedBreadthOfGridTracks in the old specs version of the
+        algorithm) tries to grow all grid tracks until the remaining space
+        is exhausted. Should the remaining space is undefined we should fill
+        the tracks up to their limits. This is specified in pseudocode like
+        this:
+
+            For each Grid track t in GridTracks
+                t.UsedBreadth = t.MaxBreadth
+
+        That's correct for most of the cases, but it becomes
+        wrong whenever t.UsedBreadth > t.MaxBreadth something that is not
+        incorrect. What we actually want to do is to grow the track to its
+        maximum if and only if the used breadth is smaller than the maximum.
+
+        * TestExpectations: Added a test which is correct but starts to fail
+        due to another bug (wkb.ug/139058).
+        * fast/css-grid-layout/grid-auto-columns-rows-update.html:
+        * fast/css-grid-layout/grid-grow-tracks-to-their-max-expected.txt: Added.
+        * fast/css-grid-layout/grid-grow-tracks-to-their-max.html: Added.
+        * fast/css-grid-layout/grid-item-removal-track-breadth-update.html:
+        * fast/css-grid-layout/minmax-max-content-resolution-rows.html:
+        * fast/css-grid-layout/minmax-min-content-column-resolution-rows.html:
+        * fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html:
+        * fast/css-grid-layout/percent-of-indefinite-track-size.html:
+
 2015-01-18  Alexey Proskuryakov  <ap@apple.com>
 
         http/tests/navigation/navigation-interrupted-by-fragment.html frequently times out
index 18643dd..64c695b 100644 (file)
@@ -43,7 +43,7 @@ function updateGridAutoRowsColumns()
 
     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '200px' });
-    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '15px' });
+    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '20px' });
     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, -webkit-max-content)' }, { 'width': '120px', 'height': '15px' });
     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, -webkit-max-content)' }, { 'width': '120px', 'height': '15px' });
     updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(10em, -webkit-max-content)' }, { 'width': '120px', 'height': '10px' });
@@ -52,7 +52,7 @@ function updateGridAutoRowsColumns()
 
     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '200px' });
-    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '15px' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '20px' });
     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'height': '15px' });
     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'height': '400px' });
     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '400px' });
diff --git a/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max-expected.txt b/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max-expected.txt
new file mode 100644 (file)
index 0000000..660423a
--- /dev/null
@@ -0,0 +1,24 @@
+Check that tracks are not shrinked if the available space is indefinite.
+PASS window.getComputedStyle(gridContentSizedColumn, '').getPropertyValue('-webkit-grid-template-columns') is "50px"
+PASS window.getComputedStyle(gridContentSizedColumn, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridContentSizedRow, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridContentSizedRow, '').getPropertyValue('-webkit-grid-template-rows') is "20px"
+
+Check that tracks use the available free space if available.
+PASS window.getComputedStyle(gridContentSizedColumnFreeSpace, '').getPropertyValue('-webkit-grid-template-columns') is "80px"
+PASS window.getComputedStyle(gridContentSizedColumnFreeSpace, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridContentSizedRowFreeSpace, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridContentSizedRowFreeSpace, '').getPropertyValue('-webkit-grid-template-rows') is "80px"
+PASS window.getComputedStyle(gridContentSizedColumnFreeSpaceParentDefinite, '').getPropertyValue('-webkit-grid-template-columns') is "80px"
+PASS window.getComputedStyle(gridContentSizedColumnFreeSpaceParentDefinite, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridContentSizedRowFreeSpaceParentDefinite, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridContentSizedRowFreeSpaceParentDefinite, '').getPropertyValue('-webkit-grid-template-rows') is "100px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+XXXXX
+XXXX XXXX
+XX XX
+XXXX XXXX
+XX XX
+XXXX XXXX
diff --git a/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max.html b/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max.html
new file mode 100644 (file)
index 0000000..4007322
--- /dev/null
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<head>
+<link href="resources/grid.css" rel="stylesheet"/>
+<style>
+.grid {
+    font: 10px/1 Ahem;
+}
+
+.gridContentSizedColumn {
+    -webkit-grid-template-columns: minmax(-webkit-min-content, 20px);
+    -webkit-grid-template-rows: 10px;
+}
+
+.gridContentSizedColumnFreeSpace {
+    -webkit-grid-template-columns: minmax(-webkit-min-content, 100px);
+    -webkit-grid-template-rows: 10px;
+}
+
+.gridContentSizedRow {
+    -webkit-grid-template-columns: 40px;
+    -webkit-grid-template-rows: minmax(-webkit-max-content, 10px);
+}
+
+.gridContentSizedRowFreeSpace {
+    -webkit-grid-template-columns: 40px;
+    -webkit-grid-template-rows: minmax(-webkit-max-content, 100px);
+}
+
+.definiteWidth { width: 80px; }
+.definiteHeight { height: 80px; }
+
+.indefiniteWidth { float: left; }
+.indefiniteHeight { height: auto; }
+
+</style>
+<script src="resources/grid-definitions-parsing-utils.js"></script>
+<script src="../../resources/js-test.js"></script>
+</head>
+<body>
+<!-- Grids with base-size > growth-limit  -->
+<div class="grid gridContentSizedColumn indefiniteWidth" id="gridContentSizedColumn">
+    <div class="firstRowFirstColumn">XXXXX</div>
+</div>
+
+<div class="grid gridContentSizedRow indefiniteHeight" id="gridContentSizedRow">
+    <div class="firstRowFirstColumn">XXXX XXXX</div>
+</div>
+
+<!-- Grids with base-size < growth-limit and some size constraints.  -->
+<div class="grid gridContentSizedColumnFreeSpace definiteWidth" id="gridContentSizedColumnFreeSpace">
+    <div class="firstRowFirstColumn">XX XX</div>
+</div>
+
+<div class="grid gridContentSizedRowFreeSpace definiteHeight" id="gridContentSizedRowFreeSpace">
+    <div class="firstRowFirstColumn">XXXX XXXX</div>
+</div>
+
+<div class="definiteWidth">
+    <div class="grid gridContentSizedColumnFreeSpace" id="gridContentSizedColumnFreeSpaceParentDefinite">
+       <div class="firstRowFirstColumn">XX XX</div>
+    </div>
+</div>
+
+<div class="definiteHeight">
+    <div class="grid gridContentSizedRowFreeSpace indefiniteHeight" id="gridContentSizedRowFreeSpaceParentDefinite">
+       <div class="firstRowFirstColumn">XXXX XXXX</div>
+    </div>
+</div>
+
+
+<script>
+debug("Check that tracks are not shrinked if the available space is indefinite.");
+testGridTemplatesValues(document.getElementById("gridContentSizedColumn"), "50px", "10px");
+testGridTemplatesValues(document.getElementById("gridContentSizedRow"), "40px", "20px");
+
+debug("");
+debug("Check that tracks use the available free space if available.");
+testGridTemplatesValues(document.getElementById("gridContentSizedColumnFreeSpace"), "80px", "10px");
+testGridTemplatesValues(document.getElementById("gridContentSizedRowFreeSpace"), "40px", "80px");
+testGridTemplatesValues(document.getElementById("gridContentSizedColumnFreeSpaceParentDefinite"), "80px", "10px");
+testGridTemplatesValues(document.getElementById("gridContentSizedRowFreeSpaceParentDefinite"), "40px", "100px");
+
+</script>
+</body>
index 5ec5b71..7c82547 100644 (file)
@@ -80,14 +80,14 @@ function testRemovals()
 
     testRemoval("unconstrainedAutoGrid", { 'width': '390', 'height': '10' }, { 'width': '350', 'height': '10' }, { 'width': '170', 'height': '10' });
     testRemoval("unconstrainedMinContentFixedGrid", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
-    testRemoval("unconstrainedMinContentFixedGridUndefinedHeight", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
+    testRemoval("unconstrainedMinContentFixedGridUndefinedHeight", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
     testRemoval("unconstrainedMaxContentFixedGrid", { 'width': '390', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
     testRemoval("unconstrainedFixedMinContentGrid", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
     testRemoval("unconstrainedFixedMaxContentGrid", { 'width': '390', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
 
     testRemoval("lessConstrainedAutoGrid", { 'width': '60', 'height': '90' }, { 'width': '60', 'height': '60' }, { 'width': '60', 'height': '30' });
     testRemoval("lessConstrainedMinContentFixedGrid", { 'width': '60', 'height': '90' }, { 'width': '60', 'height': '60' }, { 'width': '60', 'height': '30' });
-    testRemoval("lessConstrainedMinContentFixedGridUndefinedHeight", { 'width': '60', 'height': '40' }, { 'width': '60', 'height': '40' }, { 'width': '60', 'height': '40' });
+    testRemoval("lessConstrainedMinContentFixedGridUndefinedHeight", { 'width': '60', 'height': '90' }, { 'width': '60', 'height': '60' }, { 'width': '60', 'height': '40' });
     testRemoval("lessConstrainedMaxContentFixedGrid", { 'width': '350', 'height': '20' }, { 'width': '350', 'height': '20' }, { 'width': '170', 'height': '20' });
     testRemoval("lessConstrainedMaxContentFixedGridUndefinedHeight", { 'width': '350', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
     testRemoval("lessConstrainedFixedMinContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
index 5803ad2..8b64ed3 100644 (file)
@@ -55,7 +55,7 @@
 
 <div class="constrainedContainer">
     <div class="grid gridMinMaxContent">
-        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX XX XX</div>
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
     </div>
 </div>
 
@@ -76,7 +76,7 @@
 <div style="width: 10px; height: 100px;">
     <div class="grid gridMinMaxContent">
         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
-        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX XX XX</div>
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
     </div>
 </div>
 
index 145ad5d..b91303f 100644 (file)
@@ -50,7 +50,7 @@
 
 <div class="constrainedContainer">
     <div class="grid gridMinMinContent">
-        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XX XX XX XX XX XX</div>
+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
     </div>
 </div>
 
@@ -69,7 +69,7 @@
 
 <div style="width: 30px; height: 100px">
     <div class="grid gridMinMinContent">
-        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XX XX XX XX XX XX</div>
+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
     </div>
 </div>
 
index ae3979a..c843d73 100644 (file)
@@ -38,7 +38,7 @@
     </div>
 </div>
 <div style="position: relative;">
-    <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax" data-expected-width="30" data-expected-height="15">
+    <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax" data-expected-width="30" data-expected-height="20">
        <div class="firstRowFirstColumn">XXX</div>
        <div class="firstRowFirstColumn">XX XX</div>
     </div>
index 7910ccb..307a6c4 100644 (file)
@@ -38,7 +38,7 @@
     </div>
 </div>
 <div style="position: relative;">
-    <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax" data-expected-width="30" data-expected-height="15">
+    <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax" data-expected-width="30" data-expected-height="20">
        <div class="firstRowFirstColumn">XXX</div>
        <div class="firstRowFirstColumn">XX XX</div>
     </div>
index d647920..9f6d452 100644 (file)
@@ -1,3 +1,15 @@
+2015-01-19  Sergio Villar Senin  <svillar@igalia.com>
+
+        [CSS Grid Layout] Tracks shrink sometimes with indefinite remaining space
+        https://bugs.webkit.org/show_bug.cgi?id=139059
+
+        Reviewed by David Hyatt.
+
+        Test: fast/css-grid-layout/grid-grow-tracks-to-their-max.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
+
 2015-01-18  Alexey Proskuryakov  <ap@apple.com>
 
         Update bindings generation test results after <https://trac.webkit.org/changeset/178633>.
index 0b57de2..cddbb29 100644 (file)
@@ -345,7 +345,7 @@ void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection directi
         distributeSpaceToTracks(tracksForDistribution, 0, &GridTrack::usedBreadth, &GridTrack::growUsedBreadth, sizingData, availableLogicalSpace);
     } else {
         for (auto& track : tracks)
-            track.m_usedBreadth = track.m_maxBreadth;
+            track.m_usedBreadth = std::max(track.m_usedBreadth, track.m_maxBreadth);
     }
 
     if (flexibleSizedTracksIndex.isEmpty())