- Revision
- 143397
- Author
- jchaffr...@webkit.org
- Date
- 2013-02-19 15:34:33 -0800 (Tue, 19 Feb 2013)
Log Message
[CSS Grid Layout] Refactor the code in preparation of auto placement support
https://bugs.webkit.org/show_bug.cgi?id=110244
Reviewed by Ojan Vafai.
Source/WebCore:
Test: fast/css-grid-layout/grid-auto-flow-resolution.html
In order to support auto placement, we need to iterate over the grid items with
auto row / column several times. This changes makes us do that in a very simple,
not-yet-conformant way. While touching this code, the distinction between grid-auto-flow
none and row / column was better drawn (and enforced).
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::resolveGridPositionFromStyle):
Made it illegal to call resolveGridPositionFromStyle if the grid track is auto and
grid-auto-flow is not none. This would catch bad use of the function.
(WebCore::RenderGrid::maximumIndexInDirection):
Updated to bail out if the grid track is auto. Also improved the comment.
(WebCore::RenderGrid::placeItemsOnGrid):
Updated the function to do several iterations. Also handled the grid-auto-flow: none
case differently as it shouldn't need the extra iteration(s).
LayoutTests:
* fast/css-grid-layout/grid-auto-flow-resolution-expected.txt: Added.
* fast/css-grid-layout/grid-auto-flow-resolution.html: Added.
* fast/css-grid-layout/implicit-position-dynamic-change.html:
* fast/css-grid-layout/resources/grid.css:
(.autoRowAutoColumn):
(.firstRowAutoColumn):
(.secondRowAutoColumn):
(.thirdRowAutoColumn):
(.autoRowFirstColumn):
(.autoRowSecondColumn):
(.autoRowThirdColumn):
Added these helper classes, some will be used in a follow-up patch.
(.sizedToGridArea):
Hoisted this class into the common style.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (143396 => 143397)
--- trunk/LayoutTests/ChangeLog 2013-02-19 23:31:58 UTC (rev 143396)
+++ trunk/LayoutTests/ChangeLog 2013-02-19 23:34:33 UTC (rev 143397)
@@ -1,3 +1,26 @@
+2013-02-19 Julien Chaffraix <jchaffr...@webkit.org>
+
+ [CSS Grid Layout] Refactor the code in preparation of auto placement support
+ https://bugs.webkit.org/show_bug.cgi?id=110244
+
+ Reviewed by Ojan Vafai.
+
+ * fast/css-grid-layout/grid-auto-flow-resolution-expected.txt: Added.
+ * fast/css-grid-layout/grid-auto-flow-resolution.html: Added.
+ * fast/css-grid-layout/implicit-position-dynamic-change.html:
+ * fast/css-grid-layout/resources/grid.css:
+ (.autoRowAutoColumn):
+ (.firstRowAutoColumn):
+ (.secondRowAutoColumn):
+ (.thirdRowAutoColumn):
+ (.autoRowFirstColumn):
+ (.autoRowSecondColumn):
+ (.autoRowThirdColumn):
+ Added these helper classes, some will be used in a follow-up patch.
+
+ (.sizedToGridArea):
+ Hoisted this class into the common style.
+
2013-02-19 David Hyatt <hy...@apple.com>
[New Multicolumn] REGRESSION: RenderMultiColumnSets broken by the RenderRegion -> RenderBlock subclassing.
Added: trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution-expected.txt (0 => 143397)
--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution-expected.txt 2013-02-19 23:34:33 UTC (rev 143397)
@@ -0,0 +1,9 @@
+This test checks that the tracks' auto position are properly resolved on a static grid.
+
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html (0 => 143397)
--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html 2013-02-19 23:34:33 UTC (rev 143397)
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="" rel="stylesheet">
+<style>
+.smallGrid {
+ -webkit-grid-columns: 50px 100px;
+ -webkit-grid-rows: 50px 100px;
+}
+
+.unconstrainedContainer {
+ /* For accurate x / y offset. */
+ position: relative;
+}
+</style>
+<script src=""
+<body _onload_="checkLayout('.grid')">
+
+<p>This test checks that the tracks' auto position are properly resolved on a static grid.</p>
+
+<div class="unconstrainedContainer">
+ <div class="grid smallGrid gridAutoFlowNone" id="gridAutoFlowNone">
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="0" data-expected-width="170" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+ </div>
+</div>
+
+</body>
+</html>
Modified: trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html (143396 => 143397)
--- trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html 2013-02-19 23:31:58 UTC (rev 143396)
+++ trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html 2013-02-19 23:34:33 UTC (rev 143397)
@@ -10,13 +10,6 @@
-webkit-grid-columns: 50px minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 50px) minmax(50px, -webkit-min-content);
-webkit-grid-rows: 70px minmax(-webkit-max-content, 70px) minmax(50px, -webkit-min-content) minmax(65px, -webkit-max-content);
}
-
-.sizedToGridArea {
- font: 10px/1 Ahem;
- /* Make us fit our grid area. */
- width: 100%;
- height: 100%;
-}
</style>
<script src=""
<script>
Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid.css (143396 => 143397)
--- trunk/LayoutTests/fast/css-grid-layout/resources/grid.css 2013-02-19 23:31:58 UTC (rev 143396)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid.css 2013-02-19 23:34:33 UTC (rev 143397)
@@ -32,6 +32,50 @@
-webkit-grid-row: 2;
}
+/* Auto column / row. */
+.autoRowAutoColumn {
+ background-color: pink;
+ -webkit-grid-column: auto;
+ -webkit-grid-row: auto;
+}
+
+.firstRowAutoColumn {
+ background-color: blue;
+ -webkit-grid-column: auto;
+ -webkit-grid-row: 1;
+}
+
+.secondRowAutoColumn {
+ background-color: purple;
+ -webkit-grid-column: auto;
+ -webkit-grid-row: 2;
+}
+
+.thirdRowAutoColumn {
+ background-color: navy;
+ -webkit-grid-column: auto;
+ -webkit-grid-row: 3;
+}
+
+.autoRowFirstColumn {
+ background-color: lime;
+ -webkit-grid-column: 1;
+ -webkit-grid-row: auto;
+}
+
+.autoRowSecondColumn {
+ background-color: orange;
+ -webkit-grid-column: 2;
+ -webkit-grid-row: auto;
+}
+
+.autoRowThirdColumn {
+ background-color: magenta;
+ -webkit-grid-column: 3;
+ -webkit-grid-row: auto;
+}
+
+/* Grid element flow. */
.gridAutoFlowNone {
-webkit-grid-auto-flow: none;
}
@@ -55,6 +99,13 @@
height: 1000px;
}
+.sizedToGridArea {
+ font: 10px/1 Ahem;
+ /* Make us fit our grid area. */
+ width: 100%;
+ height: 100%;
+}
+
.verticalRL {
-webkit-writing-mode: vertical-rl;
}
Modified: trunk/Source/WebCore/ChangeLog (143396 => 143397)
--- trunk/Source/WebCore/ChangeLog 2013-02-19 23:31:58 UTC (rev 143396)
+++ trunk/Source/WebCore/ChangeLog 2013-02-19 23:34:33 UTC (rev 143397)
@@ -1,3 +1,29 @@
+2013-02-19 Julien Chaffraix <jchaffr...@webkit.org>
+
+ [CSS Grid Layout] Refactor the code in preparation of auto placement support
+ https://bugs.webkit.org/show_bug.cgi?id=110244
+
+ Reviewed by Ojan Vafai.
+
+ Test: fast/css-grid-layout/grid-auto-flow-resolution.html
+
+ In order to support auto placement, we need to iterate over the grid items with
+ auto row / column several times. This changes makes us do that in a very simple,
+ not-yet-conformant way. While touching this code, the distinction between grid-auto-flow
+ none and row / column was better drawn (and enforced).
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::resolveGridPositionFromStyle):
+ Made it illegal to call resolveGridPositionFromStyle if the grid track is auto and
+ grid-auto-flow is not none. This would catch bad use of the function.
+
+ (WebCore::RenderGrid::maximumIndexInDirection):
+ Updated to bail out if the grid track is auto. Also improved the comment.
+
+ (WebCore::RenderGrid::placeItemsOnGrid):
+ Updated the function to do several iterations. Also handled the grid-auto-flow: none
+ case differently as it shouldn't need the extra iteration(s).
+
2013-02-19 David Hyatt <hy...@apple.com>
[New Multicolumn] REGRESSION: RenderMultiColumnSets broken by the RenderRegion -> RenderBlock subclassing.
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (143396 => 143397)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2013-02-19 23:31:58 UTC (rev 143396)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2013-02-19 23:34:33 UTC (rev 143397)
@@ -317,7 +317,12 @@
for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
const GridPosition& position = (direction == ForColumns) ? child->style()->gridItemColumn() : child->style()->gridItemRow();
- // This function bypasses the cache as it is used to build it. Also 'auto' items will need to be resolved in seperate phases anyway.
+ // 'auto' items will need to be resolved in seperate phases anyway. Note that because maximumIndex is at least 1,
+ // the grid-auto-flow == none case is automatically handled.
+ if (position.isAuto())
+ continue;
+
+ // This function bypasses the cache (cachedGridCoordinate()) as it is used to build it.
maximumIndex = std::max(maximumIndex, resolveGridPositionFromStyle(position) + 1);
}
@@ -486,14 +491,39 @@
for (size_t i = 0; i < m_grid.size(); ++i)
m_grid[i].grow(maximumColumnIndex);
+ Vector<RenderBox*> autoGridItems;
+ GridAutoFlow autoFlow = style()->gridAutoFlow();
for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
- size_t columnTrack = resolveGridPositionFromStyle(child->style()->gridItemColumn());
- size_t rowTrack = resolveGridPositionFromStyle(child->style()->gridItemRow());
+ const GridPosition& columnPosition = child->style()->gridItemColumn();
+ const GridPosition& rowPosition = child->style()->gridItemRow();
+ if (autoFlow != AutoFlowNone && (columnPosition.isAuto() || rowPosition.isAuto())) {
+ autoGridItems.append(child);
+ continue;
+ }
+ size_t columnTrack = resolveGridPositionFromStyle(columnPosition);
+ size_t rowTrack = resolveGridPositionFromStyle(rowPosition);
insertItemIntoGrid(child, rowTrack, columnTrack);
}
ASSERT(gridRowCount() >= style()->gridRows().size());
ASSERT(gridColumnCount() >= style()->gridColumns().size());
+
+ if (autoFlow == AutoFlowNone) {
+ // If we did collect some grid items, they won't be placed thus never laid out.
+ ASSERT(!autoGridItems.size());
+ return;
+ }
+
+ // FIXME: This should implement the auto flow algorithm (https://bugs.webkit.org/b/103316).
+ // To keep our tests passing, we just insert them in the grid as if grid-auto-flow was none.
+ for (size_t i = 0; i < autoGridItems.size(); ++i) {
+ const GridPosition& columnPosition = autoGridItems[i]->style()->gridItemColumn();
+ const GridPosition& rowPosition = autoGridItems[i]->style()->gridItemRow();
+ size_t columnTrack = columnPosition.isAuto() ? 0 : resolveGridPositionFromStyle(columnPosition);
+ size_t rowTrack = rowPosition.isAuto() ? 0 : resolveGridPositionFromStyle(rowPosition);
+
+ insertItemIntoGrid(autoGridItems[i], rowTrack, columnTrack);
+ }
}
void RenderGrid::clearGrid()
@@ -566,9 +596,8 @@
return position.integerPosition() - 1;
case AutoPosition:
- // FIXME: We should follow 'grid-auto-flow' for resolution.
- // Until then, we use the 'grid-auto-flow: none' behavior (which is the default)
- // and resolve 'auto' as the first row / column.
+ // We cannot resolve grid positions if grid-auto-flow != none as it requires several iterations.
+ ASSERT(style()->gridAutoFlow() == AutoFlowNone);
return 0;
}
ASSERT_NOT_REACHED();
