Changeset 143397 in webkit

Timestamp:

Feb 19, 2013 3:34:33 PM (11 years ago)

Author:

jchaffraix@webkit.org

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.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution-expected.txt (added)
• LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html (added)
• LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html (modified) (1 diff)
• LayoutTests/fast/css-grid-layout/resources/grid.css (modified) (2 diffs)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/rendering/RenderGrid.cpp (modified) (4 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2013-02-19  Julien Chaffraix  <jchaffraix@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  <hyatt@apple.com>
 

trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html

@@ -10 +10 @@
     -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>

trunk/LayoutTests/fast/css-grid-layout/resources/grid.css

@@ -33 +33 @@
 }
 
+/* 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;
@@ -56 +100 @@
 }
 
+.sizedToGridArea {
+    font: 10px/1 Ahem;
+    /* Make us fit our grid area. */
+    width: 100%;
+    height: 100%;
+}
+
 .verticalRL {
     -webkit-writing-mode: vertical-rl;

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-02-19  Julien Chaffraix  <jchaffraix@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  <hyatt@apple.com>
 

trunk/Source/WebCore/rendering/RenderGrid.cpp

@@ -318 +318 @@
     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);
     }
@@ -487 +492 @@
         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);
     }
@@ -495 +508 @@
     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);
+    }
 }
 
@@ -567 +597 @@
         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;
     }