[CSS Grid Layout] Add support to place items using named grid lines

Source/core/rendering/RenderGrid.cpp

 /*
  * Copyright (C) 2011 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
@@ skipping 201 matching lines @@
     RenderBlock::removeChild(child);
 
     if (gridIsDirty())
         return;
 
     ASSERT(child->isBox());
     // FIXME: We could avoid dirtying the grid in some cases (e.g. if it's an explicitly positioned element).
     dirtyGrid();
 }
 
+void RenderGrid::createGridLineNamesMapsForDirection(GridTrackSizingDirection direction)
+{
+    NamedGridLinesMap& gridLinesMap = (direction == ForColumns) ? m_namedGridColumnLines : m_namedGridRowLines;
+    const OrderedNamedGridLines& orderedLinesMap = (direction == ForColumns) ? style()->orderedNamedGridColumnLines() : style()->orderedNamedGridRowLines();
+
+    gridLinesMap.clear();
+    OrderedNamedGridLines::const_iterator orderedLinesEnd = orderedLinesMap.end();
+    for (OrderedNamedGridLines::const_iterator it = orderedLinesMap.begin(); it != orderedLinesEnd; ++it) {
+        const Vector<String> gridLineNames = it->value;
+        for (size_t i = 0; i < gridLineNames.size(); ++i) {
+            NamedGridLinesMap::AddResult result = gridLinesMap.add(gridLineNames[i], Vector<size_t>());
+            result.storedValue->value.append(it->key);
+        }
+    }
+
+    NamedGridAreaMap::const_iterator gridAreasEnd = style()->namedGridArea().end();
+    for (NamedGridAreaMap::const_iterator it = style()->namedGridArea().begin(); it != gridAreasEnd; ++it) {
+        GridSpan areaSpan = direction == ForRows ? it->value.rows : it->value.columns;
+
+        NamedGridLinesMap::AddResult startResult = gridLinesMap.add(it->key + "-start", Vector<size_t>());
+        startResult.storedValue->value.append(areaSpan.initialPositionIndex);
+        NamedGridLinesMap::AddResult endResult = gridLinesMap.add(it->key + "-end", Vector<size_t>());
+        endResult.storedValue->value.append(areaSpan.finalPositionIndex + 1);
+    }
+
+    NamedGridLinesMap::const_iterator namedLinesEnd = gridLinesMap.end();
+    for (NamedGridLinesMap::iterator it = gridLinesMap.begin(); it !=  namedLinesEnd; ++it)
+        std::sort(it->value.begin(), it->value.end());
+}

[Julien - ping for review, 2014/03/31 23:36:21]

I really don't understand what moving this code to RenderGrid buys us apart from
an extra iteration and sort. I am probably missing something though so an
explanation would be welcome.

[svillar, 2014/04/01 08:00:42]

So the idea would be to remove the map of grid lines from the style and build it
in the renderer, as it will become a kind of intermediate data structure used
only there. The ordered map will remain in the style as it'll be used to create
the output for getComputedStyle().

Note that, leaving the code in the StyleBuilder would be worst as we'd need to
recreate the whole map whenever one of the properties change (either that or
checking one by one the lines/areas that have changed, adding/removing implicit
lines, etc... which would be much more complicated).

[Julien - ping for review, 2014/04/08 16:47:28]

I see the point of splitting the 2 maps as only one is relevant to the computed
style but it seems artificial to so from my perspective.
I don't really see the issue with having to recompute this map: we have to
recompute the ordered map in these cases anyway.

Also until we have users of grid, it's difficult to make a performance case so I
would like to go with the more simple solution.

+
 void RenderGrid::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
 {
     RenderBlock::styleDidChange(diff, oldStyle);
+
+    bool gridLinesDefinitionChanged = namedGridLinesDefinitionDidChange(oldStyle);
+    if (gridLinesDefinitionChanged) {
+        createGridLineNamesMapsForDirection(ForColumns);
+        createGridLineNamesMapsForDirection(ForRows);
+    }
+
     if (!oldStyle)
         return;
 
     // FIXME: The following checks could be narrowed down if we kept track of which type of grid items we have:
     // - explicit grid size changes impact negative explicitely positioned and auto-placed grid items.
     // - named grid lines only impact grid items with named grid lines.
     // - auto-flow changes only impacts auto-placed children.
 
-    if (explicitGridDidResize(oldStyle)
-        || namedGridLinesDefinitionDidChange(oldStyle)
-        || oldStyle->gridAutoFlow() != style()->gridAutoFlow())
+    if (explicitGridDidResize(oldStyle) || gridLinesDefinitionChanged || oldStyle->gridAutoFlow() != style()->gridAutoFlow())
         dirtyGrid();
 }
 
 bool RenderGrid::explicitGridDidResize(const RenderStyle* oldStyle) const
 {
     return oldStyle->gridTemplateColumns().size() != style()->gridTemplateColumns().size()
         || oldStyle->gridTemplateRows().size() != style()->gridTemplateRows().size();
 }
 
 bool RenderGrid::namedGridLinesDefinitionDidChange(const RenderStyle* oldStyle) const
 {
-    return oldStyle->namedGridRowLines() != style()->namedGridRowLines()
-        || oldStyle->namedGridColumnLines() != style()->namedGridColumnLines();
+    if (!oldStyle)
+        return true;
+
+    return oldStyle->orderedNamedGridRowLines() != style()->orderedNamedGridRowLines()
+        || oldStyle->orderedNamedGridColumnLines() != style()->orderedNamedGridColumnLines()
+        || oldStyle->namedGridArea() != style()->namedGridArea();
 }
 
 void RenderGrid::layoutBlock(bool relayoutChildren)
 {
     ASSERT(needsLayout());
 
     if (!relayoutChildren && simplifiedLayout())
         return;
 
     // FIXME: Much of this method is boiler plate that matches RenderBox::layoutBlock and Render*FlexibleBox::layoutBlock.
@@ skipping 701 matching lines @@
     return m_gridItemCoordinate.get(gridItem);
 }
 
 GridSpan RenderGrid::resolveGridPositionsFromAutoPlacementPosition(const RenderBox*, GridTrackSizingDirection, size_t initialPosition) const
 {
     // FIXME: We don't support spanning with auto positions yet. Once we do, this is wrong. Also we should make
     // sure the grid can accomodate the new item as we only grow 1 position in a given direction.
     return GridSpan(initialPosition, initialPosition);
 }
 
+static bool isNonExistentNamedLineOrArea(GridPosition& position, RenderStyle& style, const NamedGridLinesMap& gridLinesMap)
+{
+    ASSERT(position.isNamedGridArea());
+    String lineName = position.namedGridLine();

[Julien - ping for review, 2014/04/08 16:47:28]

Wouldn't passing this String directly to isNonExistentNamedLineOrArea avoid the
redundant ASSERT above?

+
+    return !style.namedGridArea().contains(lineName) && !gridLinesMap.contains(lineName);
+}
+
 PassOwnPtr<GridSpan> RenderGrid::resolveGridPositionsFromStyle(const RenderBox* gridItem, GridTrackSizingDirection direction) const
 {
     GridPosition initialPosition = (direction == ForColumns) ? gridItem->style()->gridColumnStart() : gridItem->style()->gridRowStart();
     const GridPositionSide initialPositionSide = (direction == ForColumns) ? ColumnStartSide : RowStartSide;
     GridPosition finalPosition = (direction == ForColumns) ? gridItem->style()->gridColumnEnd() : gridItem->style()->gridRowEnd();
     const GridPositionSide finalPositionSide = (direction == ForColumns) ? ColumnEndSide : RowEndSide;
+    const NamedGridLinesMap& gridLines = (direction == ForColumns) ? m_namedGridColumnLines : m_namedGridRowLines;
 
     // We must handle the placement error handling code here instead of in the StyleAdjuster because we don't want to
     // overwrite the specified values.
     if (initialPosition.isSpan() && finalPosition.isSpan())
         finalPosition.setAutoPosition();
 
-    if (initialPosition.isNamedGridArea() && !style()->namedGridArea().contains(initialPosition.namedGridLine()))
+    if (initialPosition.isNamedGridArea() && isNonExistentNamedLineOrArea(initialPosition, *style(), gridLines))
         initialPosition.setAutoPosition();
 
-    if (finalPosition.isNamedGridArea() && !style()->namedGridArea().contains(finalPosition.namedGridLine()))
+    if (finalPosition.isNamedGridArea() && isNonExistentNamedLineOrArea(finalPosition, *style(), gridLines))
         finalPosition.setAutoPosition();
 
     if (initialPosition.shouldBeResolvedAgainstOppositePosition() && finalPosition.shouldBeResolvedAgainstOppositePosition()) {
         if (style()->gridAutoFlow() == AutoFlowNone)
             return adoptPtr(new GridSpan(0, 0));
 
         // We can't get our grid positions without running the auto placement algorithm.
         return nullptr;
     }
 
@@ skipping 16 matching lines @@
     if (resolvedFinalPosition < resolvedInitialPosition)
         resolvedFinalPosition = resolvedInitialPosition;
 
     return adoptPtr(new GridSpan(resolvedInitialPosition, resolvedFinalPosition));
 }
 
 size_t RenderGrid::resolveNamedGridLinePositionFromStyle(const GridPosition& position, GridPositionSide side) const
 {
     ASSERT(!position.namedGridLine().isNull());
 
-    const NamedGridLinesMap& gridLinesNames = (side == ColumnStartSide || side == ColumnEndSide) ? style()->namedGridColumnLines() : style()->namedGridRowLines();
+    const NamedGridLinesMap& gridLinesNames = gridLinesForSide(side);
     NamedGridLinesMap::const_iterator it = gridLinesNames.find(position.namedGridLine());
     if (it == gridLinesNames.end()) {
         if (position.isPositive())
             return 0;
         const size_t lastLine = explicitGridSizeForSide(side);
         return GridPosition::adjustGridPositionForSide(lastLine, side);
     }
 
     size_t namedGridLineIndex;
     if (position.isPositive())
         namedGridLineIndex = std::min<size_t>(position.integerPosition(), it->value.size()) - 1;
     else
         namedGridLineIndex = std::max<int>(it->value.size() - abs(position.integerPosition()), 0);
     return GridPosition::adjustGridPositionForSide(it->value[namedGridLineIndex], side);
 }
 
+size_t RenderGrid::resolveExplicitPositionFromStyle(const GridPosition& position, GridPositionSide side) const
+{
+    ASSERT(position.integerPosition());
+
+    if (!position.namedGridLine().isNull())
+        return resolveNamedGridLinePositionFromStyle(position, side);
+
+    if (position.isPositive())
+        return GridPosition::adjustGridPositionForSide(position.integerPosition() - 1, side);
+
+    size_t resolvedPosition = abs(position.integerPosition()) - 1;
+    const size_t endOfTrack = explicitGridSizeForSide(side);
+
+    // Per http://lists.w3.org/Archives/Public/www-style/2013Mar/0589.html, we clamp negative value to the first line.
+    if (endOfTrack < resolvedPosition)
+        return 0;
+
+    return GridPosition::adjustGridPositionForSide(endOfTrack - resolvedPosition, side);
+}
+
 size_t RenderGrid::resolveGridPositionFromStyle(const GridPosition& position, GridPositionSide side) const
 {
-    switch (position.type()) {
-    case ExplicitPosition: {
-        ASSERT(position.integerPosition());
+    // We shouldn't see any other type of position here because 'auto' and span depend on the opposite position for
+    // resolution (e.g. grid-row: auto / 1 or grid-column: span 3 / myHeader).
+    ASSERT(position.type() == NamedGridAreaPosition || position.type() == ExplicitPosition);
 
-        if (!position.namedGridLine().isNull())
-            return resolveNamedGridLinePositionFromStyle(position, side);
+    if (position.type() == NamedGridAreaPosition) {
+        // Four implicit named grid lines are created for each grid area (areaName-{start|end} for rows and
+        // columns). Authors can either use the area names or the implicit grid line names.
+        NamedGridAreaMap::const_iterator areaIter = style()->namedGridArea().find(position.namedGridLine());
+        if (areaIter != style()->namedGridArea().end()) {
+            String implicitNamedGridLine = position.namedGridLine() + ((side == ColumnStartSide || side == RowStartSide) ? "-start" : "-end");
+            const NamedGridLinesMap& gridLineNames = gridLinesForSide(side);
+            NamedGridLinesMap::const_iterator lineIter = gridLineNames.find(implicitNamedGridLine);
 
-        // Handle <integer> explicit position.
-        if (position.isPositive())
-            return GridPosition::adjustGridPositionForSide(position.integerPosition() - 1, side);
+            if (lineIter != gridLineNames.end())
+                return GridPosition::adjustGridPositionForSide(lineIter->value[0], side);
 
-        size_t resolvedPosition = abs(position.integerPosition()) - 1;
-        const size_t endOfTrack = explicitGridSizeForSide(side);
+            return areaIter->value.positionForSide(side);
+        }
+        // Fallback to a implicit grid line position if there is no grid area with that name.
+        GridPosition adjustedPosition;
+        adjustedPosition.setExplicitPosition(1, position.namedGridLine());
+        return resolveExplicitPositionFromStyle(adjustedPosition, side);
+    }
 
-        // Per http://lists.w3.org/Archives/Public/www-style/2013Mar/0589.html, we clamp negative value to the first line.
-        if (endOfTrack < resolvedPosition)
-            return 0;
-
-        return GridPosition::adjustGridPositionForSide(endOfTrack - resolvedPosition, side);
-    }
-    case NamedGridAreaPosition:
-    {
-        NamedGridAreaMap::const_iterator it = style()->namedGridArea().find(position.namedGridLine());
-        // Unknown grid area should have been computed to 'auto' by now.
-        ASSERT_WITH_SECURITY_IMPLICATION(it != style()->namedGridArea().end());
-        const GridCoordinate& gridAreaCoordinate = it->value;
-        switch (side) {
-        case ColumnStartSide:
-            return gridAreaCoordinate.columns.initialPositionIndex;
-        case ColumnEndSide:
-            return gridAreaCoordinate.columns.finalPositionIndex;
-        case RowStartSide:
-            return gridAreaCoordinate.rows.initialPositionIndex;
-        case RowEndSide:
-            return gridAreaCoordinate.rows.finalPositionIndex;
-        }
-        ASSERT_NOT_REACHED();
-        return 0;
-    }
-    case AutoPosition:
-    case SpanPosition:
-        // 'auto' and span depend on the opposite position for resolution (e.g. grid-row: auto / 1 or grid-column: span 3 / "myHeader").
-        ASSERT_NOT_REACHED();
-        return 0;
-    }
-    ASSERT_NOT_REACHED();
-    return 0;
+    return resolveExplicitPositionFromStyle(position, side);
 }
 
 PassOwnPtr<GridSpan> RenderGrid::resolveGridPositionAgainstOppositePosition(size_t resolvedOppositePosition, const GridPosition& position, GridPositionSide side) const
 {
     if (position.isAuto())
         return GridSpan::create(resolvedOppositePosition, resolvedOppositePosition);
 
     ASSERT(position.isSpan());
     ASSERT(position.spanPosition() > 0);
 
     if (!position.namedGridLine().isNull()) {
         // span 2 'c' -> we need to find the appropriate grid line before / after our opposite position.
         return resolveNamedGridLinePositionAgainstOppositePosition(resolvedOppositePosition, position, side);
     }
 
     return GridSpan::createWithSpanAgainstOpposite(resolvedOppositePosition, position, side);
 }
 
 PassOwnPtr<GridSpan> RenderGrid::resolveNamedGridLinePositionAgainstOppositePosition(size_t resolvedOppositePosition, const GridPosition& position, GridPositionSide side) const
 {
     ASSERT(position.isSpan());
     ASSERT(!position.namedGridLine().isNull());
     // Negative positions are not allowed per the specification and should have been handled during parsing.
     ASSERT(position.spanPosition() > 0);
 
-    const NamedGridLinesMap& gridLinesNames = (side == ColumnStartSide || side == ColumnEndSide) ? style()->namedGridColumnLines() : style()->namedGridRowLines();
+    const NamedGridLinesMap& gridLinesNames = gridLinesForSide(side);
     NamedGridLinesMap::const_iterator it = gridLinesNames.find(position.namedGridLine());
 
     // If there is no named grid line of that name, we resolve the position to 'auto' (which is equivalent to 'span 1' in this case).
     // See http://lists.w3.org/Archives/Public/www-style/2013Jun/0394.html.
     if (it == gridLinesNames.end())
         return GridSpan::create(resolvedOppositePosition, resolvedOppositePosition);
 
     return GridSpan::createWithNamedSpanAgainstOpposite(resolvedOppositePosition, position, side, it->value);
 }
 
@@ skipping 257 matching lines @@
     if (isOutOfFlowPositioned())
         return "RenderGrid (positioned)";
     if (isAnonymous())
         return "RenderGrid (generated)";
     if (isRelPositioned())
         return "RenderGrid (relative positioned)";
     return "RenderGrid";
 }
 
 } // namespace WebCore