[CSS Grid Layout] Stretch value for align and justify properties.

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 598 matching lines @@
         const GridLength& oldMinTrackBreadth = trackSize.minTrackBreadth();
         const GridLength& oldMaxTrackBreadth = trackSize.maxTrackBreadth();
         return GridTrackSize(oldMinTrackBreadth.isPercentage() ? Length(MinContent) : oldMinTrackBreadth, oldMaxTrackBreadth.isPercentage() ? Length(MaxContent) : oldMaxTrackBreadth);
     }
 
     return trackSize;
 }
 
 LayoutUnit RenderGrid::logicalHeightForChild(RenderBox& child, Vector<GridTrack>& columnTracks)
 {
+    child.clearOverrideLogicalContentHeight();

[Julien - ping for review, 2014/10/08 15:21:47]

I don't understand the need for this as we do the following below (and there is
no early return):

child.setOverrideContainingBlockContentLogicalHeight(-1);

[jfernandez, 2014/10/12 22:40:27]

Well, if I understood it correctly, OverrideContainingBlockContentLogicalHeight
is different from OverrideLogicalContentHeight. Actually, the former seems Grid
specific which is something confused me. 

The OverrideLogicalContentHeight api handles some fields in the
RenderBoxRareData struct and it seems to be used to override the intrinsic
height/width of the box. The RenderFlexibleBox implementation uses such api to
implement the 'stretch' behavior, so that's why I used it.

Also, the RenderBox::computeLogicalHeight uses the OverrideLogicalContentHeight
api to compute the actual/computed height of the box. 

On the other hand, the  OverrideContainingBlockLogicalHeigh used in the
RenderGrid implementation is independent of the OverrideLogicalContentHeight and
is not used at all in the RenderBox::computeLogicalHeight. I don't really
understand why grid needs its own stuff for this; there is actually a FIXME to
move the logic to the RenderBoxRareData structure.

So, the reason why the clearOverrideLogicalContentHeight call is needed is that
etOverrideContainingBlockContentLogicalHeight(-1) does not do the job, so the
OverrideLogicalContentHeight flag is still there and it causes some repaint
tests to fail.

[Julien - ping for review, 2014/10/21 00:43:12]

You're right, I misread. RenderGrid needs to pretend that its children's sizes
are resolved against a different containing block's size (the grid cell's, not
the grid container's). We introduced OverrideContainingBlockContentLogicalHeight
to do this without having to introduce a synthetic grid cell's renderer.

Btw OverrideLogicalContentHeight is also used by table.
Yes, that's the right API to stretch / constrain a logical height.

[jfernandez, 2014/10/22 09:31:37]

Done.

+
     SubtreeLayoutScope layoutScope(child);
     LayoutUnit oldOverrideContainingBlockContentLogicalWidth = child.hasOverrideContainingBlockLogicalWidth() ? child.overrideContainingBlockContentLogicalWidth() : LayoutUnit();
     LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(child, ForColumns, columnTracks);
     if (child.style()->logicalHeight().isPercent() || oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth)
         layoutScope.setNeedsLayout(&child);
 
     child.setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
     // If |child| has a percentage logical height, we shouldn't let it override its intrinsic height, which is
     // what we are interested in here. Thus we need to set the override logical height to -1 (no possible resolution).
     child.setOverrideContainingBlockContentLogicalHeight(-1);
@@ skipping 437 matching lines @@
         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.
+        applyStretchAlignmentToChildIfNeeded(*child, overrideContainingBlockContentLogicalHeight);
+
         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
         child->setLogicalLocation(findChildLogicalPosition(*child));
 
         // Keep track of children overflowing their grid area as we might need to paint them even if the grid-area is
@@ skipping 10 matching lines @@
 
     setLogicalHeight(logicalHeight() + borderAndPaddingLogicalHeight());
 }
 
 GridCoordinate RenderGrid::cachedGridCoordinate(const RenderBox& gridItem) const
 {
     ASSERT(m_gridItemCoordinate.contains(&gridItem));
     return m_gridItemCoordinate.get(&gridItem);
 }
 
+// FIXME: We should move this logic to the StyleAdjuster or the StyleBuilder.
+static ItemPosition resolveAlignment(const RenderStyle* parentStyle, const RenderStyle* childStyle)
+{
+    ItemPosition align = childStyle->alignSelf();
+    // The auto keyword computes to the parent's align-items computed value, or to "stretch", if not set or "auto".
+    if (align == ItemPositionAuto)
+        align = (parentStyle->alignItems() == ItemPositionAuto) ? ItemPositionStretch : parentStyle->alignItems();
+    return align;
+}
+
+void RenderGrid::applyStretchAlignmentToChildIfNeeded(RenderBox& child, LayoutUnit overrideLogicalContentHeight)
+{
+    if (child.style()->logicalHeight().isAuto() && resolveAlignment(style(), child.style()) == ItemPositionStretch)
+        child.setOverrideLogicalContentHeight(overrideLogicalContentHeight);

[Julien - ping for review, 2014/10/08 15:21:47]

This is good for a first pass but it's not totally correct. You need to
constrain the overrideLogicalHeight by min-max.

We should match flexbox's implementation as much as possible in this case as
there is a lot of similarities. See
constrainedChildIntrinsicContentLogicalHeight.

[jfernandez, 2014/10/12 22:40:27]

Acknowledged.

+}
+
 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;
     LayoutUnit gridAreaBreadth = 0;
     for (GridSpan::iterator trackPosition = span.begin(); trackPosition != span.end(); ++trackPosition)
         gridAreaBreadth += tracks[trackPosition.toInt()].m_usedBreadth;
     return gridAreaBreadth;
 }
 
@@ skipping 123 matching lines @@
     case ItemPositionCenter:
         return centeredColumnPositionForChild(child);
     case ItemPositionStart:
         return columnPositionAlignedWithGridContainerStart(child);
     case ItemPositionEnd:
         return columnPositionAlignedWithGridContainerEnd(child);
 
     case ItemPositionAuto:
         break;
     case ItemPositionStretch:
+        return startOfColumnForChild(child);
     case ItemPositionBaseline:
     case ItemPositionLastBaseline:
         // FIXME: Implement the previous values. For now, we always start align the child.
         return startOfColumnForChild(child);
     }
 
     ASSERT_NOT_REACHED();
     return 0;
 }
 
@@ skipping 27 matching lines @@
     const GridCoordinate& coordinate = cachedGridCoordinate(child);
 
     // The grid items should be inside the grid container's border box, that's why they need to be shifted.
     LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()] + marginBeforeForChild(&child);
     LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
 
     // FIXME: This should account for the grid item's <overflow-position>.
     return startOfRow + std::max<LayoutUnit>(0, endOfRow - startOfRow - child.logicalHeight()) / 2;
 }
 
-// FIXME: We should move this logic to the StyleAdjuster or the StyleBuilder.
-static ItemPosition resolveAlignment(const RenderStyle* parentStyle, const RenderStyle* childStyle)
-{
-    ItemPosition align = childStyle->alignSelf();
-    // The auto keyword computes to the parent's align-items computed value, or to "stretch", if not set or "auto".
-    if (align == ItemPositionAuto)
-        align = (parentStyle->alignItems() == ItemPositionAuto) ? ItemPositionStretch : parentStyle->alignItems();
-    return align;
-}
-

[Julien - ping for review, 2014/10/08 15:21:47]

Instead of moving this code, can we just move
applyStretchAlignmentToChildIfNeeded below? (less history churn)

 LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const
 {
     bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
     ItemPosition alignSelf = resolveAlignment(style(), child.style());
 
     switch (alignSelf) {
     case ItemPositionSelfStart:
         // If orthogonal writing-modes, this computes to 'Start'.
         // FIXME: grid track sizing and positioning does not support orthogonal modes yet.
         if (hasOrthogonalWritingMode)
@@ skipping 38 matching lines @@
         return centeredRowPositionForChild(child);
         // Only used in flex layout, for other layout, it's equivalent to 'Start'.
     case ItemPositionFlexStart:
     case ItemPositionStart:
         return startOfRowForChild(child);
         // Only used in flex layout, for other layout, it's equivalent to 'End'.
     case ItemPositionFlexEnd:
     case ItemPositionEnd:
         return endOfRowForChild(child);
     case ItemPositionStretch:
-        // FIXME: Implement the Stretch value. For now, we always start align the child.
         return startOfRowForChild(child);
     case ItemPositionBaseline:
     case ItemPositionLastBaseline:
         // FIXME: Implement the ItemPositionBaseline value. For now, we always start align the child.
         return startOfRowForChild(child);
     case ItemPositionAuto:
         break;
     }
 
     ASSERT_NOT_REACHED();
@@ skipping 17 matching lines @@
     if (isOutOfFlowPositioned())
         return "RenderGrid (positioned)";
     if (isAnonymous())
         return "RenderGrid (generated)";
     if (isRelPositioned())
         return "RenderGrid (relative positioned)";
     return "RenderGrid";
 }
 
 } // namespace blink