- Revision
- 146697
- Author
- [email protected]
- Date
- 2013-03-22 18:07:17 -0700 (Fri, 22 Mar 2013)
Log Message
[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.
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.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (146696 => 146697)
--- trunk/LayoutTests/ChangeLog 2013-03-23 01:03:26 UTC (rev 146696)
+++ trunk/LayoutTests/ChangeLog 2013-03-23 01:07:17 UTC (rev 146697)
@@ -1,3 +1,19 @@
+2013-03-22 Julien Chaffraix <[email protected]>
+
+ [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 <[email protected]>
[Chromium] Test expectations after Skia changes
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution-expected.txt (146696 => 146697)
--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution-expected.txt 2013-03-23 01:03:26 UTC (rev 146696)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution-expected.txt 2013-03-23 01:07:17 UTC (rev 146697)
@@ -18,20 +18,8 @@
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>
+PASS
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
Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt (0 => 146697)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt 2013-03-23 01:07:17 UTC (rev 146697)
@@ -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
Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html (0 => 146697)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html 2013-03-23 01:07:17 UTC (rev 146697)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="" rel="stylesheet">
+<style>
+.gridMinMaxAutoWithColumnMinMaxAuto {
+ -webkit-grid-columns: minmax(50px, 180px) auto;
+ -webkit-grid-rows: auto minmax(50px, 100px);
+}
+</style>
+<script src=""
+<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>
Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt (0 => 146697)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt 2013-03-23 01:07:17 UTC (rev 146697)
@@ -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
Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html (0 => 146697)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html 2013-03-23 01:07:17 UTC (rev 146697)
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="" 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=""
+<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>
Modified: trunk/Source/WebCore/ChangeLog (146696 => 146697)
--- trunk/Source/WebCore/ChangeLog 2013-03-23 01:03:26 UTC (rev 146696)
+++ trunk/Source/WebCore/ChangeLog 2013-03-23 01:07:17 UTC (rev 146697)
@@ -1,3 +1,23 @@
+2013-03-22 Julien Chaffraix <[email protected]>
+
+ [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 <[email protected]>
Check WEBGL_draw_buffers requirements before exposing the extension
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (146696 => 146697)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2013-03-23 01:03:26 UTC (rev 146696)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2013-03-23 01:07:17 UTC (rev 146697)
@@ -372,7 +372,9 @@
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();
}
