[CSS Grid Layout] content-sized row tracks with percentage logical height grid items...
authorjchaffraix@webkit.org <jchaffraix@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 23 Mar 2013 01:07:17 +0000 (01:07 +0000)
committerjchaffraix@webkit.org <jchaffraix@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 23 Mar 2013 01:07:17 +0000 (01:07 +0000)
https://bugs.webkit.org/show_bug.cgi?id=113085

Reviewed by Tony Chang.

Source/WebCore:

The core issue is that because overrideContainingBlockLogicalHeight() is unset in
logicalContentHeightForChild, RenderBox::computePercentageLogicalHeight would try to
resolve percentage logical height against the grid element (wrong containing block
as a grid item's containing block is the grid area).

Tests: fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html
       fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::logicalContentHeightForChild):
Set our override logical height to -1, so that we don't try to constrain a grid item's logical height
based on resolving (badly) its percentage.

LayoutTests:

* fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution-expected.txt:
Updated the result to pass.

* fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt: Added.
* fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html: Added.
* fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt: Added.
* fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html: Added.
Added more testing to ensure that we properly do the resolution.

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

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution-expected.txt
LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp

index 55d4551..9a0f38c 100644 (file)
@@ -1,3 +1,19 @@
+2013-03-22  Julien Chaffraix  <jchaffraix@webkit.org>
+
+        [CSS Grid Layout] content-sized row tracks with percentage logical height grid items don't resolve properly
+        https://bugs.webkit.org/show_bug.cgi?id=113085
+
+        Reviewed by Tony Chang.
+
+        * fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution-expected.txt:
+        Updated the result to pass.
+
+        * fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html: Added.
+        * fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html: Added.
+        Added more testing to ensure that we properly do the resolution.
+
 2013-03-22  Stephen Chenney  <schenney@chromium.org>
 
         [Chromium] Test expectations after Skia changes
index 843b739..06aa765 100644 (file)
@@ -18,20 +18,8 @@ PASS
 XXXXX XXXXXX
 PASS
 XXXXX XXXXXX
-FAIL:
-Expected 20 for height, but got 1000. 
-
-<div class="grid gridAutoMinMaxContent gridAutoFlowColumn">
-        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div>
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
-    </div>
-XXXXX XXXXXX
-FAIL:
-Expected 20 for height, but got 1000. 
-
-<div class="grid gridAutoMinMaxContent gridAutoFlowRow">
-        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div>
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
-    </div>
+PASS
+XXXXX XXXXXX
+PASS
 XXXXX XXXXXX
 PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt
new file mode 100644 (file)
index 0000000..1163fc7
--- /dev/null
@@ -0,0 +1,17 @@
+Test that several different grid items along with several minmax tracks are properly sized.
+
+XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX XXXXX
+XXXXX XXXXX
+PASS
+XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX
+XXXXX XXXXX XXXXX XXXXX
+PASS
+XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX
+XXXXX XXXXX XXXXX XXXXX
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html b/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html
new file mode 100644 (file)
index 0000000..67a86e3
--- /dev/null
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.gridMinMaxAutoWithColumnMinMaxAuto {
+    -webkit-grid-columns: minmax(50px, 180px) auto;
+    -webkit-grid-rows: auto minmax(50px, 100px);
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>Test that several different grid items along with several minmax tracks are properly sized.</p>
+
+<div class="unconstrainedContainer" style="position: relative;">
+<div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
+    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="180" data-expected-height="10">XXXXX XXXXX</div>
+    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="170" data-expected-height="10">XXXXX XXXXX XXXXX</div>
+    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="180" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
+    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="170" data-expected-height="100">XXXXX XXXXX</div>
+</div>
+</div>
+
+<div class="constrainedContainer" style="position: relative;">
+<div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
+    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX</div>
+    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
+    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX</div>
+    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX</div>
+</div>
+</div>
+
+<div style="height: 100px; width: 220px; position: relative;">
+<div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
+    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="110" data-expected-height="20">XXXXX XXXXX</div>
+    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="110" data-expected-height="20">XXXXX XXXXX XXXXX</div>
+    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="110" data-expected-height="80">XXXXX XXXXX</div>
+    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="110" data-expected-height="80">XXXXX XXXXX XXXXX XXXXX</div>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt
new file mode 100644 (file)
index 0000000..079562c
--- /dev/null
@@ -0,0 +1,17 @@
+Test that grid items with a percentage logical height inside a grid without explicit sizes resolve their size properly.
+
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+PASS
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+PASS
+XXXXX XXXXXX
+XXXXX XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXX XXXXX XXXXXX
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html b/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html
new file mode 100644 (file)
index 0000000..43879ea
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.gridMinMaxMinMax {
+    -webkit-grid-columns: 50px 100px;
+    -webkit-grid-rows: minmax(10px, -webkit-min-content) minmax(50px, 100px);
+}
+
+.gridAutoAuto {
+    -webkit-grid-columns: 50px 100px;
+    -webkit-grid-rows: auto auto;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>Test that grid items with a percentage logical height inside a grid without explicit sizes resolve their size properly.</p>
+
+<div class="unconstrainedContainer" style="position: relative">
+<div class="grid gridMinMaxMinMax">
+    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
+    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
+    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
+    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
+</div>
+</div>
+
+<div style="position: relative; height: 100px;">
+<div class="grid gridMinMaxMinMax">
+    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
+    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
+    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div>
+    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div>
+</div>
+</div>
+
+<div class="unconstrainedContainer" style="position: relative">
+<div class="grid gridAutoAuto">
+    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
+    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div>
+    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXXX</div>
+    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div>
+</div>
+</div>
+
+</body>
+</html>
index 332d8cf..09fd002 100644 (file)
@@ -1,3 +1,23 @@
+2013-03-22  Julien Chaffraix  <jchaffraix@webkit.org>
+
+        [CSS Grid Layout] content-sized row tracks with percentage logical height grid items don't resolve properly
+        https://bugs.webkit.org/show_bug.cgi?id=113085
+
+        Reviewed by Tony Chang.
+
+        The core issue is that because overrideContainingBlockLogicalHeight() is unset in
+        logicalContentHeightForChild, RenderBox::computePercentageLogicalHeight would try to
+        resolve percentage logical height against the grid element (wrong containing block
+        as a grid item's containing block is the grid area).
+
+        Tests: fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html
+               fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::logicalContentHeightForChild):
+        Set our override logical height to -1, so that we don't try to constrain a grid item's logical height
+        based on resolving (badly) its percentage.
+
 2013-03-19  Zhenyao Mo  <zmo@google.com>
 
         Check WEBGL_draw_buffers requirements before exposing the extension
index 26f4c5e..7769ed1 100644 (file)
@@ -372,7 +372,9 @@ LayoutUnit RenderGrid::logicalContentHeightForChild(RenderBox* child, Vector<Gri
         child->setNeedsLayout(true, MarkOnlyThis);
 
     child->setOverrideContainingBlockContentLogicalWidth(gridAreaBreadthForChild(child, ForColumns, columnTracks));
-    child->clearOverrideContainingBlockContentLogicalHeight();
+    // If |child| has a percentage logical height, we shouldn't let it override its intrinsic height, which is
+    // what we are interested in here. Thus we need to set the override logical height to -1 (no possible resolution).
+    child->setOverrideContainingBlockContentLogicalHeight(-1);
     child->layout();
     return child->logicalHeight();
 }