- Revision
- 140045
- Author
- jchaffr...@webkit.org
- Date
- 2013-01-17 14:35:24 -0800 (Thu, 17 Jan 2013)
Log Message
[CSS Grid Layout] Updating -webkit-grid-rows or -webkit-grid-columns doesn't work as expected
https://bugs.webkit.org/show_bug.cgi?id=107062
Reviewed by Tony Chang.
Source/WebCore:
Tests: fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html
fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html
This change makes -webkit-grid-rows and -webkit-grid-columns dynamic change properly
relayout their children, thus making them work!
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutGridItems):
Fixed the logic to force a grid item relayout if the grid area size changes. This is the
safest approach as margins or paddings can also be a percent of the grid area's size.
* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::diff):
Fixed a dumb mistake.
LayoutTests:
* fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update-expected.txt: Added.
* fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html: Added.
* fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update-expected.txt: Added.
* fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (140044 => 140045)
--- trunk/LayoutTests/ChangeLog 2013-01-17 22:32:22 UTC (rev 140044)
+++ trunk/LayoutTests/ChangeLog 2013-01-17 22:35:24 UTC (rev 140045)
@@ -1,3 +1,15 @@
+2013-01-17 Julien Chaffraix <jchaffr...@webkit.org>
+
+ [CSS Grid Layout] Updating -webkit-grid-rows or -webkit-grid-columns doesn't work as expected
+ https://bugs.webkit.org/show_bug.cgi?id=107062
+
+ Reviewed by Tony Chang.
+
+ * fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update-expected.txt: Added.
+ * fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html: Added.
+ * fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update-expected.txt: Added.
+ * fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html: Added.
+
2013-01-17 Alpha Lam <hc...@chromium.org>
[chromium] Fix layout test expectations.
Added: trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update-expected.txt (0 => 140045)
--- trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update-expected.txt 2013-01-17 22:35:24 UTC (rev 140045)
@@ -0,0 +1,5 @@
+Test that changing percentage sized grid tracks make the grid items relayouts.
+
+PASS
+PASS
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html (0 => 140045)
--- trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html 2013-01-17 22:35:24 UTC (rev 140045)
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<style>
+.grid {
+ display: -webkit-grid;
+ -webkit-grid-columns: 70% 30%;
+ -webkit-grid-rows: 40% 60%;
+ background-color: grey;
+ width: 400px;
+ height: 300px;
+}
+
+#a {
+ background-color: blue;
+ -webkit-grid-column: 1;
+ -webkit-grid-row: 1;
+ width: 100%;
+ height: 15px;
+}
+#b {
+ background-color: green;
+ -webkit-grid-column: 2;
+ -webkit-grid-row: 1;
+ width: 15px;
+ height: 100%;
+}
+#c {
+ background-color: purple;
+ -webkit-grid-column: 1;
+ -webkit-grid-row: 2;
+ width: 50%;
+ height: 50%;
+}
+#d {
+ background-color: orange;
+ -webkit-grid-column: 2;
+ -webkit-grid-row: 2;
+ width: -webkit-calc(100%);
+ height: -webkit-calc(100%);
+}
+</style>
+<script src=""
+<script>
+function changeGridDefinitionsAndCheckValues()
+{
+ var grid0 = document.getElementsByClassName("grid")[0];
+ var grid1 = document.getElementsByClassName("grid")[1];
+ var grid2 = document.getElementsByClassName("grid")[2];
+ document.body.offsetLeft;
+ grid0.style.webkitGridColumns = "40% 60%";
+
+ grid1.style.webkitGridRows = "30% 70%";
+
+ grid2.style.webkitGridColumns = "40% 60%";
+ grid2.style.webkitGridRows = "30% 70%";
+
+ checkLayout('.grid');
+}
+window.addEventListener("load", changeGridDefinitionsAndCheckValues, false);
+</script>
+<body>
+
+<p>Test that changing percentage sized grid tracks make the grid items relayouts.</p>
+
+<div style="position: relative">
+<div class="grid" data-expected-width="400" data-expected-height="300">
+ <div id="a" data-expected-width="160" data-expected-height="15"></div>
+ <div id="b" data-expected-width="15" data-expected-height="120"></div>
+ <div id="c" data-expected-width="80" data-expected-height="90"></div>
+ <div id="d" data-expected-width="240" data-expected-height="180"></div>
+</div>
+</div>
+
+<div style="position: relative">
+<div class="grid" data-expected-width="400" data-expected-height="300">
+ <div id="a" data-expected-width="280" data-expected-height="15"></div>
+ <div id="b" data-expected-width="15" data-expected-height="90"></div>
+ <div id="c" data-expected-width="140" data-expected-height="105"></div>
+ <div id="d" data-expected-width="120" data-expected-height="210"></div>
+</div>
+</div>
+
+<div style="position: relative">
+<div class="grid" data-expected-width="400" data-expected-height="300">
+ <div id="a" data-expected-width="160" data-expected-height="15"></div>
+ <div id="b" data-expected-width="15" data-expected-height="90"></div>
+ <div id="c" data-expected-width="80" data-expected-height="105"></div>
+ <div id="d" data-expected-width="240" data-expected-height="210"></div>
+</div>
+</div>
+
+</body>
+</html>
Added: trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update-expected.txt (0 => 140045)
--- trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update-expected.txt 2013-01-17 22:35:24 UTC (rev 140045)
@@ -0,0 +1,3 @@
+Test that changing grid tracks size forces the grid items' to resolve percentage padding and margin
+
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html (0 => 140045)
--- trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html 2013-01-17 22:35:24 UTC (rev 140045)
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<style>
+.grid {
+ display: -webkit-grid;
+ background-color: grey;
+ -webkit-grid-columns: 200px 200px;
+ -webkit-grid-rows: 100px 100px;
+ height: 200px;
+ width: 400px;
+}
+
+#a {
+ background-color: blue;
+ -webkit-grid-column: 1;
+ -webkit-grid-row: 1;
+}
+
+#b {
+ background-color: lime;
+ -webkit-grid-column: 2;
+ -webkit-grid-row: 1;
+}
+
+#c {
+ background-color: purple;
+ -webkit-grid-column: 1;
+ -webkit-grid-row: 2;
+}
+
+#d {
+ background-color: orange;
+ -webkit-grid-column: 2;
+ -webkit-grid-row: 2;
+}
+
+.percentPadding {
+ width: 0px;
+ height: 0px;
+ padding: 50%;
+}
+
+.percentMargin {
+ width: 0px;
+ height: 0px;
+ margin: 50%;
+}
+
+.percentPaddingAndMargin {
+ width: 0px;
+ height: 0px;
+ padding: 10%;
+ margin: 20%;
+}
+
+.verticalRL {
+ -webkit-writing-mode: vertical-rl;
+}
+</style>
+<script src=""
+<script>
+function changeGridTrackSizesAndCheckLayout()
+{
+ var grid = document.getElementsByClassName("grid")[0];
+ grid.offsetLeft;
+ grid.style.webkitGridColumns = "100px 300px";
+ grid.style.webkitGridRows = "50px 150px";
+ checkLayout('.grid');
+}
+window.addEventListener("load", changeGridTrackSizesAndCheckLayout, false);
+</script>
+<body>
+
+<p>Test that changing grid tracks size forces the grid items' to resolve percentage padding and margin</p>
+
+<div class="grid">
+ <div id="a" class="percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
+ <div id="b" class="percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
+ <div id="c" class="percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
+ <div id="d" class="percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
+</div>
+
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (140044 => 140045)
--- trunk/Source/WebCore/ChangeLog 2013-01-17 22:32:22 UTC (rev 140044)
+++ trunk/Source/WebCore/ChangeLog 2013-01-17 22:35:24 UTC (rev 140045)
@@ -1,3 +1,25 @@
+2013-01-17 Julien Chaffraix <jchaffr...@webkit.org>
+
+ [CSS Grid Layout] Updating -webkit-grid-rows or -webkit-grid-columns doesn't work as expected
+ https://bugs.webkit.org/show_bug.cgi?id=107062
+
+ Reviewed by Tony Chang.
+
+ Tests: fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html
+ fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html
+
+ This change makes -webkit-grid-rows and -webkit-grid-columns dynamic change properly
+ relayout their children, thus making them work!
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::layoutGridItems):
+ Fixed the logic to force a grid item relayout if the grid area size changes. This is the
+ safest approach as margins or paddings can also be a percent of the grid area's size.
+
+ * rendering/style/RenderStyle.cpp:
+ (WebCore::RenderStyle::diff):
+ Fixed a dumb mistake.
+
2013-01-17 Timothy Hatcher <timo...@apple.com>
Make logging console messages to STDOUT work in WebKit2 via a new setting.
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (140044 => 140045)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2013-01-17 22:32:22 UTC (rev 140044)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2013-01-17 22:35:24 UTC (rev 140045)
@@ -230,8 +230,15 @@
if (columnTrack < columnTracks.size() && rowTrack < rowTracks.size()) {
// Because the grid area cannot be styled, we don't need to adjust
// the grid breadth to account for 'box-sizing'.
+ LayoutUnit oldOverrideContainingBlockContentLogicalWidth = child->hasOverrideContainingBlockLogicalWidth() ? child->overrideContainingBlockContentLogicalWidth() : LayoutUnit();
+ LayoutUnit oldOverrideContainingBlockContentLogicalHeight = child->hasOverrideContainingBlockLogicalHeight() ? child->overrideContainingBlockContentLogicalHeight() : LayoutUnit();
+
+ if (oldOverrideContainingBlockContentLogicalWidth != columnTracks[columnTrack].m_usedBreadth || oldOverrideContainingBlockContentLogicalHeight != rowTracks[rowTrack].m_usedBreadth)
+ child->setNeedsLayout(true, MarkOnlyThis);
+
child->setOverrideContainingBlockContentLogicalWidth(columnTracks[columnTrack].m_usedBreadth);
child->setOverrideContainingBlockContentLogicalHeight(rowTracks[rowTrack].m_usedBreadth);
+
}
// FIXME: Grid items should stretch to fill their cells. Once we
Modified: trunk/Source/WebCore/rendering/style/RenderStyle.cpp (140044 => 140045)
--- trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2013-01-17 22:32:22 UTC (rev 140044)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2013-01-17 22:35:24 UTC (rev 140045)
@@ -438,7 +438,7 @@
}
if (rareNonInheritedData->m_grid.get() != other->rareNonInheritedData->m_grid.get()
- && rareNonInheritedData->m_gridItem.get() != other->rareNonInheritedData->m_gridItem.get())
+ || rareNonInheritedData->m_gridItem.get() != other->rareNonInheritedData->m_gridItem.get())
return StyleDifferenceLayout;
#if !USE(ACCELERATED_COMPOSITING)
