[CSS Grid Layout] min-content row does not always shrink
authorsvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 2 Nov 2015 09:02:50 +0000 (09:02 +0000)
committersvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 2 Nov 2015 09:02:50 +0000 (09:02 +0000)
https://bugs.webkit.org/show_bug.cgi?id=144581

Reviewed by Zalan Bujtas.

Source/WebCore:

Grid items height must be recomputed whenever the grid tracks
change if the items had been previously stretched. In those
cases we have to clear the override height and layout the item
with the new row size.

Tests: fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html
       fast/css-grid-layout/relayout-indefinite-heights.html

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

LayoutTests:

Based on Blink's r191001 by <jfernandez@igalia.com>.

* fast/css-grid-layout/min-content-row-must-shrink-when-column-grows-expected.txt: Added.
* fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html: Added.
* fast/css-grid-layout/relayout-indefinite-heights-expected.txt: Added.
* fast/css-grid-layout/relayout-indefinite-heights.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/relayout-indefinite-heights-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp

index cbe7439072b778d515fc4623927413f4bd6ee5bf..a267db6614ddcb9c064228afed127f65357ffe17 100644 (file)
@@ -1,3 +1,17 @@
+2015-10-29  Sergio Villar Senin  <svillar@igalia.com>
+
+        [CSS Grid Layout] min-content row does not always shrink
+        https://bugs.webkit.org/show_bug.cgi?id=144581
+
+        Reviewed by Zalan Bujtas.
+
+        Based on Blink's r191001 by <jfernandez@igalia.com>.
+
+        * fast/css-grid-layout/min-content-row-must-shrink-when-column-grows-expected.txt: Added.
+        * fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html: Added.
+        * fast/css-grid-layout/relayout-indefinite-heights-expected.txt: Added.
+        * fast/css-grid-layout/relayout-indefinite-heights.html: Added.
+
 2015-11-01  Brady Eidson  <beidson@apple.com>
 
         Modern IDB: IBDObjectStore.count() support.
diff --git a/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows-expected.txt b/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows-expected.txt
new file mode 100644 (file)
index 0000000..a981cab
--- /dev/null
@@ -0,0 +1,7 @@
+This test checks that a min-content sized row track grows when the container width is reduced and that it shrinks to fit its content when container is resized to its initial dimensions.
+
+#cell1 (min-content)
+#cell2 (1fr) xxx. xx xxx xxxxx xxx xxx ,x. xxxxx xx xx xxx. xxx xx xxxxx xxx xxxxx, . xx xx xxxxxxxxx. xxx xxxxxxxx xxx xx xx, . xxx x xxxxx x x. xxx xxxx xxxxxxx xxxxx,x. x x x xx xxxxxx. xxxxxx xx x xxx xx x,x. xxxxxxxx xx xxx. xxxx x xx x xxx xx xx,x. xxx x xxxxx xxx. xxxxxx xxx x xxx xx xx, . x xx xxxxx xxx. xxx xx x xxxxxxx x xxx, . xx xxxxx xxxx x. xxx xx xxxxx xxx xxxxx,x. x xxx xxxxx xxx. xxx xx xx xxxxxx xx xx, . x xx xxxx x x x. xxx xx xx xxxxxx xx xx, .
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html b/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html
new file mode 100644 (file)
index 0000000..6e815ee
--- /dev/null
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+ .grid {
+    -webkit-grid-template-columns: -webkit-min-content 1fr;
+    -webkit-grid-template-rows: -webkit-min-content;
+    width: 500px;
+    font: 10px/1 Ahem;
+ }
+</style>
+<script>
+function shrinkToFitTest()
+{
+   checkLayout('.grid');
+   reduceContainerWidthAndCheckLayout();
+   checkLayout('.grid');
+   restoreContainerWidthAndCheckLayout();
+   checkLayout('.grid');
+};
+
+function reduceContainerWidthAndCheckLayout()
+{
+   var grid = document.getElementById("grid")
+   grid.style.width = "250px";
+   grid.setAttribute("data-expected-width", "250");
+   grid.setAttribute("data-expected-height", "300");
+
+   var cell1 = document.getElementById("cell1")
+   cell1.setAttribute("data-expected-width", "80");
+   cell1.setAttribute("data-expected-height", "300");
+
+   var cell2 = document.getElementById("cell2")
+   cell2.setAttribute("data-expected-width", "170");
+   cell2.setAttribute("data-expected-height", "300");
+};
+
+function restoreContainerWidthAndCheckLayout()
+{
+   var grid = document.getElementById("grid")
+   grid.style.width = "500px";
+   grid.setAttribute("data-expected-width", "500");
+   grid.setAttribute("data-expected-height", "110");
+
+   var cell1 = document.getElementById("cell1")
+   cell1.setAttribute("data-expected-width", "80");
+   cell1.setAttribute("data-expected-height", "110");
+
+   var cell2 = document.getElementById("cell2")
+   cell2.setAttribute("data-expected-width", "420");
+   cell2.setAttribute("data-expected-height", "110");
+};
+</script>
+<body onload="shrinkToFitTest();">
+
+<p>This test checks that a min-content sized row track grows when the container width is reduced and that it shrinks to fit its content when container is resized to its initial dimensions.</p>
+
+<div id="grid" class="grid" data-expected-width="500" data-expected-height="110">
+    <div id="cell1" class="firstRowFirstColumn" data-expected-width="80" data-expected-height="110">
+       #cell1 (min-content)
+    </div>
+    <div id="cell2" class="firstRowSecondColumn" data-expected-width="420" data-expected-height="110">
+       <span>
+            #cell2 (1fr) xxx. xx xxx xxxxx xxx xxx ,x. xxxxx xx xx xxx. xxx xx xxxxx xxx xxxxx, . xx xx xxxxxxxxx. xxx xxxxxxxx xxx xx xx, . xxx x xxxxx x x. xxx xxxx xxxxxxx xxxxx,x. x x x xx xxxxxx. xxxxxx xx  x xxx xx  x,x. xxxxxxxx xx xxx. xxxx x xx  x xxx xx xx,x. xxx x xxxxx xxx. xxxxxx xxx x xxx xx xx, . x  xx xxxxx xxx. xxx xx x xxxxxxx x xxx, . xx xxxxx xxxx x. xxx xx xxxxx xxx xxxxx,x. x xxx xxxxx xxx. xxx xx xx xxxxxx xx xx, . x xx xxxx x x x. xxx xx xx xxxxxx xx xx, .</span>
+    </div>
+</div>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights-expected.txt b/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights-expected.txt
new file mode 100644 (file)
index 0000000..0c9b2b6
--- /dev/null
@@ -0,0 +1,8 @@
+Tests how a change in grid's height requires evaluating again whether the grid has indefinite or definite height.
+
+The grid bellow had initially 'height: auto' (indefinite) and has been changed to '90px' (definite).
+
+PASS
+The grid bellow had initially 'height: 90px' (definite) and has been changed to 'auto' (indefinite).
+
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html b/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html
new file mode 100644 (file)
index 0000000..4063b56
--- /dev/null
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+    -webkit-grid: 50px / minmax(5px, 1fr) minmax(5px, 2fr);
+}
+
+#fromIndefinite { height: auto; }
+#toIndefinite { height: 90px; }
+</style>
+<script src="../../resources/check-layout.js"></script>
+<p>Tests how a change in grid's height requires evaluating again whether the grid has indefinite or definite height.</p>
+
+<p>The grid bellow had initially 'height: auto' (indefinite) and has been changed to '90px' (definite).</p>
+<div class="constrainedContainer">
+    <div id="fromIndefinite"  class="grid">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
+        <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="60"></div>
+    </div>
+</div>
+
+<hr style="margin-top: 150px;">
+
+<p>The grid bellow had initially 'height: 90px' (definite) and has been changed to 'auto' (indefinite).</p>
+<div class="constrainedContainer">
+    <div id="toIndefinite" class="grid">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="5"></div>
+        <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+    </div>
+</div>
+
+<script>
+document.body.offsetLeft;
+document.getElementById("toIndefinite").style.height = "auto";
+document.getElementById("fromIndefinite").style.height = "90px";
+checkLayout(".grid");
+</script>
index 4e34d5c5da2776f66cefcf5ed1e88c42a0806f84..2a7104be2af3902bf8d1e2077181cdef5441817c 100644 (file)
@@ -1,3 +1,21 @@
+2015-10-29  Sergio Villar Senin  <svillar@igalia.com>
+
+        [CSS Grid Layout] min-content row does not always shrink
+        https://bugs.webkit.org/show_bug.cgi?id=144581
+
+        Reviewed by Zalan Bujtas.
+
+        Grid items height must be recomputed whenever the grid tracks
+        change if the items had been previously stretched. In those
+        cases we have to clear the override height and layout the item
+        with the new row size.
+
+        Tests: fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html
+               fast/css-grid-layout/relayout-indefinite-heights.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::logicalContentHeightForChild):
+
 2015-11-01  Brady Eidson  <beidson@apple.com>
 
         Modern IDB: IBDObjectStore.count() support.
index fad27d47b3350c39f7f76ec146f96dff56577a29..4bd8b3032f3e9b5eca0508f093f262316fffeb6e 100644 (file)
@@ -590,7 +590,7 @@ LayoutUnit RenderGrid::logicalContentHeightForChild(RenderBox& child, Vector<Gri
 {
     Optional<LayoutUnit> oldOverrideContainingBlockContentLogicalWidth = child.hasOverrideContainingBlockLogicalWidth() ? child.overrideContainingBlockContentLogicalWidth() : LayoutUnit();
     LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(child, ForColumns, columnTracks);
-    if (child.hasRelativeLogicalHeight() || !oldOverrideContainingBlockContentLogicalWidth || oldOverrideContainingBlockContentLogicalWidth.value() != overrideContainingBlockContentLogicalWidth)
+    if (child.hasOverrideLogicalContentHeight() || child.hasRelativeLogicalHeight() || !oldOverrideContainingBlockContentLogicalWidth || oldOverrideContainingBlockContentLogicalWidth.value() != overrideContainingBlockContentLogicalWidth)
         child.setNeedsLayout(MarkOnlyThis);
 
     // We need to clear the stretched height to properly compute logical height during layout.
@@ -602,6 +602,7 @@ LayoutUnit RenderGrid::logicalContentHeightForChild(RenderBox& child, Vector<Gri
     // what we are interested in here. Thus we need to set the override logical height to Nullopt (no possible resolution).
     if (child.hasRelativeLogicalHeight())
         child.setOverrideContainingBlockContentLogicalHeight(Nullopt);
+
     child.layoutIfNeeded();
     return child.logicalHeight() + child.marginLogicalHeight();
 }