[CSS Grid Layout] Fix positioned grid children position and size

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 1022 matching lines @@
 
 void RenderGrid::dirtyGrid()
 {
     m_grid.resize(0);
     m_gridItemCoordinate.clear();
     m_gridIsDirty = true;
     m_gridItemsOverflowingGridArea.resize(0);
     m_gridItemsIndexesMap.clear();
 }
 
+bool RenderGrid::isAbsolutelyPositionedGridItemWithContainingBlockThis(const RenderBox& child) const

[Julien - ping for review, 2014/11/11 17:27:35]

That's better in my book (feel free to adapt / disagree / improve):
isContainingBlockForAbsolutelyPositionedGridItem

+{
+    return (child.style()->position() == AbsolutePosition) && (child.containingBlock() == this);

[Julien - ping for review, 2014/11/11 17:27:35]

The parentheses are not required and we don't put them in Blink.

+}
+
 void RenderGrid::layoutGridItems()
 {
     placeItemsOnGrid();
 
     GridSizingData sizingData(gridColumnCount(), gridRowCount());
     computeUsedBreadthOfGridTracks(ForColumns, sizingData);
     ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData.columnTracks));
     computeUsedBreadthOfGridTracks(ForRows, sizingData);
     ASSERT(tracksAreWiderThanMinTrackBreadth(ForRows, sizingData.rowTracks));
 
     populateGridPositions(sizingData);
     m_gridItemsOverflowingGridArea.resize(0);
 
     for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
-        if (child->isOutOfFlowPositioned()) {
-            // FIXME: Absolute positioned grid items should have a special
-            // behavior as described in the spec (crbug.com/273898):
-            // http://www.w3.org/TR/css-grid-1/#abspos-items
-            child->containingBlock()->insertPositionedObject(child);
-        }
-
         // 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();
 
-        LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(*child, ForColumns, sizingData.columnTracks);
-        LayoutUnit overrideContainingBlockContentLogicalHeight = gridAreaBreadthForChild(*child, ForRows, sizingData.rowTracks);
+        LayoutUnit columnExtraOffset = 0;
+        LayoutUnit rowExtraOffset = 0;
+        LayoutUnit overrideContainingBlockContentLogicalWidth;
+        LayoutUnit overrideContainingBlockContentLogicalHeight;
+
+        if (isAbsolutelyPositionedGridItemWithContainingBlockThis(*child)) {

[Julien - ping for review, 2014/11/11 17:27:35]

I think the logic is off actually.

RenderBlock ignores absolutely / fixed positioned elements during layout and lay
them out after using the positioned map. I think we will want to do something
similar.

The reason is that grid items now can be descendants and not just direct
children (which means we will have to rethink this deep assumption in
RenderGrid).

[Manuel Rego, 2014/11/12 13:36:34]

I'm just focusing in this comment right now, as I'm not sure if I'm getting it
properly.

Do you mean that any absolutely positioned element under a grid, where the
containing block is the grid container, should be considered a grid item?

If I'm not wrong according to the spec grid items are direct children of the
grid container.
And placement properties like grid-row/column only apply to grid items.

For example:
<div id="grid" style="display: grid; position: relative;">
  <div id="item">
    <div id="abspos" style="position: absolute;"></div>
  </div>
</div>

In this case, despite "abspos" containing block is "grid", IMHO it's not a grid
item.
It seems to me that these modifications related to the position inside the grid
shouldn't be applied.
And "abspos" should behave almost the same than if "grid" was a regular block.
Following what is defined at:
http://dev.w3.org/csswg/css-grid/#static-position

However, for grid items we should do what is explained at:
http://dev.w3.org/csswg/css-grid/#abspos-items

Which is basically what this patch is trying to implement. The other part is
pending yet (I'm not sure if it's better to do it in the same patch or a
separated
one, but that's a different issue).

What do you think?

[Julien - ping for review, 2014/11/12 19:16:57]

That's a good question and something the specification is not clear on actually.
I would have called them grid items as their containing block is the grid
container but you're right that grid item is defined as direct children of the
grid container.

Whether we call them grid item or not doesn't change the fact that any
descendants should follow http://dev.w3.org/csswg/css-grid/#abspos-items (note
that the paragraph doesn't mention grid item at all, just what containing block
an element has).
I think we should get the specification clarified if you disagree with me. I
think the specification is pretty clear on what to do with absolutely positioned
elements though.

Also regardless of our disagreement over how to interpret the specification, the
absolutely positioned elements should be handled separately like other
containers, which should make the code clearer.

[Manuel Rego, 2014/11/18 14:24:06]

The title of the section was talking about grid items, but I've
clarified it in www-style and it seems that you were right (check the
following thread
http://lists.w3.org/Archives/Public/www-style/2014Nov/0099.html for more
details).
Yeah, it's clear that we need to separate this code, so I've overridden
RenderBlock::layoutPositionedObjects() to deal with all this logic for
both grit items (direct children) but also any other descendant.

+            overrideContainingBlockContentLogicalWidth = gridAreaBreadthForAbsolutelyPositionedChild(*child, ForColumns, sizingData.columnTracks, columnExtraOffset);
+            overrideContainingBlockContentLogicalHeight = gridAreaBreadthForAbsolutelyPositionedChild(*child, ForRows, sizingData.rowTracks, rowExtraOffset);
+        } else {
+            overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(*child, ForColumns, sizingData.columnTracks);
+            overrideContainingBlockContentLogicalHeight = gridAreaBreadthForChild(*child, ForRows, sizingData.rowTracks);
+        }
+
+        child->setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
+        child->setOverrideContainingBlockContentLogicalHeight(overrideContainingBlockContentLogicalHeight);
+
+        if (child->isOutOfFlowPositioned()) {
+            child->containingBlock()->insertPositionedObject(child);
+
+            if (isAbsolutelyPositionedGridItemWithContainingBlockThis(*child)) {
+                bool containerHasHorizontalWritingMode = isHorizontalWritingMode();
+                LayoutPoint position = LayoutPoint(startOfColumnForChild(*child), startOfRowForChild(*child));
+
+                RenderLayer* childLayer = child->layer();
+                // Set the layer position taking into account the extra size
+                // increased in RenderGrid::gridAreaBreadthForChild() due to the
+                // positioned items particularities.
+                childLayer->setStaticInlinePosition(containerHasHorizontalWritingMode ? position.x() - columnExtraOffset : position.y() - rowExtraOffset);
+                childLayer->setStaticBlockPosition(containerHasHorizontalWritingMode ? position.y() - rowExtraOffset : position.x() - columnExtraOffset);
+            }
+
+            continue;
+        }
 
         SubtreeLayoutScope layoutScope(*child);
         if (oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth || (oldOverrideContainingBlockContentLogicalHeight != overrideContainingBlockContentLogicalHeight && child->hasRelativeLogicalHeight()))
             layoutScope.setNeedsLayout(child);
 
-        child->setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
-        child->setOverrideContainingBlockContentLogicalHeight(overrideContainingBlockContentLogicalHeight);
-
         // FIXME: Grid items should stretch to fill their cells. Once we
         // implement grid-{column,row}-align, we can also shrink to fit. For
         // now, just size as if we were a regular child.
         child->layoutIfNeeded();
 
 #if ENABLE(ASSERT)
         const GridCoordinate& coordinate = cachedGridCoordinate(*child);
         ASSERT(coordinate.columns.resolvedInitialPosition.toInt() < sizingData.columnTracks.size());
         ASSERT(coordinate.rows.resolvedInitialPosition.toInt() < sizingData.rowTracks.size());
 #endif
@@ skipping 13 matching lines @@
 
     setLogicalHeight(logicalHeight() + borderAndPaddingLogicalHeight());
 }
 
 GridCoordinate RenderGrid::cachedGridCoordinate(const RenderBox& gridItem) const
 {
     ASSERT(m_gridItemCoordinate.contains(&gridItem));
     return m_gridItemCoordinate.get(&gridItem);
 }
 
+static LayoutUnit computeGridAreaBreadth(const GridSpan& span, const Vector<GridTrack>& tracks, LayoutUnit* extraInitialOffset = 0, bool startIsAuto = false, GridResolvedPosition* originalInitialPosition = 0)
+{
+    LayoutUnit gridAreaBreadth = 0;
+    for (GridSpan::iterator trackPosition = span.begin(); trackPosition != span.end(); ++trackPosition) {
+        LayoutUnit trackBreadth = tracks[trackPosition.toInt()].m_usedBreadth;
+        gridAreaBreadth += trackBreadth;
+        if (extraInitialOffset && startIsAuto && trackPosition < *originalInitialPosition)
+            *extraInitialOffset += trackBreadth;
+    }
+    return gridAreaBreadth;
+}
+
 LayoutUnit RenderGrid::gridAreaBreadthForChild(const RenderBox& child, GridTrackSizingDirection direction, const Vector<GridTrack>& tracks) const
 {
     const GridCoordinate& coordinate = cachedGridCoordinate(child);
     const GridSpan& span = (direction == ForColumns) ? coordinate.columns : coordinate.rows;
+    return computeGridAreaBreadth(span, tracks);
+}
+
+LayoutUnit RenderGrid::gridAreaBreadthForAbsolutelyPositionedChild(const RenderBox& child, GridTrackSizingDirection direction, const Vector<GridTrack>& tracks, LayoutUnit& extraInitialOffset) const
+{
+    ASSERT(isAbsolutelyPositionedGridItemWithContainingBlockThis(child));
+
     LayoutUnit gridAreaBreadth = 0;
-    for (GridSpan::iterator trackPosition = span.begin(); trackPosition != span.end(); ++trackPosition)
-        gridAreaBreadth += tracks[trackPosition.toInt()].m_usedBreadth;
+    bool startIsAuto = false;
+    bool endIsAuto = false;
+    // For absolutely positioned items the containing block corresponds to the
+    // padding edges of the grid. So, we need to increase the breadth if the
+    // positions are auto.
+    if (direction == ForColumns) {
+        if (child.style()->gridColumnStart().isAuto()) {
+            startIsAuto = true;
+            gridAreaBreadth += paddingLeft();
+            extraInitialOffset += paddingLeft();
+        }
+        if (child.style()->gridColumnEnd().isAuto()) {
+            endIsAuto = true;
+            gridAreaBreadth += paddingRight();
+        }
+    } else {
+        if (child.style()->gridRowStart().isAuto()) {
+            startIsAuto = true;
+            gridAreaBreadth += paddingTop();
+            extraInitialOffset += paddingTop();
+        }
+        if (child.style()->gridRowEnd().isAuto()) {
+            endIsAuto = true;
+            gridAreaBreadth += paddingBottom();
+        }
+    }
+
+    const GridCoordinate& coordinate = cachedGridCoordinate(child);
+    GridResolvedPosition initialPosition = (direction == ForColumns) ? coordinate.columns.resolvedInitialPosition : coordinate.rows.resolvedInitialPosition;
+    GridResolvedPosition originalInitialPosition = initialPosition;
+    GridResolvedPosition finalPosition = (direction == ForColumns) ? coordinate.columns.resolvedFinalPosition : coordinate.rows.resolvedFinalPosition;
+
+    if (startIsAuto)
+        initialPosition = GridResolvedPosition(0);
+    if (endIsAuto)
+        finalPosition = GridResolvedPosition((direction == ForColumns ? gridColumnCount() : gridRowCount()) - 1);
+
+    gridAreaBreadth += computeGridAreaBreadth(GridSpan(initialPosition, finalPosition), tracks, &extraInitialOffset, startIsAuto, &originalInitialPosition);
     return gridAreaBreadth;
 }
 
 void RenderGrid::populateGridPositions(const GridSizingData& sizingData)
 {
     m_columnPositions.resize(sizingData.columnTracks.size() + 1);
     m_columnPositions[0] = borderAndPaddingStart();
     for (size_t i = 0; i < m_columnPositions.size() - 1; ++i)
         m_columnPositions[i + 1] = m_columnPositions[i] + sizingData.columnTracks[i].m_usedBreadth;
 
@@ skipping 259 matching lines @@
     if (isOutOfFlowPositioned())
         return "RenderGrid (positioned)";
     if (isAnonymous())
         return "RenderGrid (generated)";
     if (isRelPositioned())
         return "RenderGrid (relative positioned)";
     return "RenderGrid";
 }
 
 } // namespace blink