[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();
+
     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 434 matching lines @@
         LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(*child, ForColumns, sizingData.columnTracks);
         LayoutUnit overrideContainingBlockContentLogicalHeight = gridAreaBreadthForChild(*child, ForRows, sizingData.rowTracks);
 
         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

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

Let's narrow this FIXME as part of this change to reflect the state of the code.

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

Done.

         // 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 153 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 37 matching lines @@
 // 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;
 }
 
+static inline LayoutUnit constrainedChildIntrinsicContentLogicalHeight(RenderBox& child)
+{
+    LayoutUnit childIntrinsicContentLogicalHeight = child.intrinsicContentLogicalHeight();
+    return child.constrainLogicalHeightByMinMax(childIntrinsicContentLogicalHeight + child.borderAndPaddingLogicalHeight(), childIntrinsicContentLogicalHeight);
+}
+
+bool RenderGrid::needToStretchChildLogicalHeight(RenderBox& child) const

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

const RenderBox& child for most of the functions.

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

Done.

+{
+    if (resolveAlignment(style(), child.style()) != ItemPositionStretch)

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

resolveAlignment is now on RenderStyle so it seems like this function can be
static.

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

I'll send a new patch, rebased, to include this change. I reviewed the current
implementation at RenderStyle and it's not totally correct. Being now a shared
logic of any renderer, it should resolve "auto" to stretch only for flex/grid
elements and "start" otherwise. 

I'll include such change in the new patch.

+        return false;
+
+    return isHorizontalWritingMode() && child.style()->height().isAuto();
+}
+
+LayoutUnit RenderGrid::childIntrinsicHeight(RenderBox& child) const
+{
+    if (child.isHorizontalWritingMode() && needToStretchChildLogicalHeight(child))
+        return constrainedChildIntrinsicContentLogicalHeight(child);
+    return child.height();
+}
+
+LayoutUnit RenderGrid::childIntrinsicWidth(RenderBox& child) const
+{
+    if (!child.isHorizontalWritingMode() && needToStretchChildLogicalHeight(child))
+        return constrainedChildIntrinsicContentLogicalHeight(child);
+    return child.width();
+}
+
+LayoutUnit RenderGrid::intrinsicExtentForChild(RenderBox& child) const

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

We usually don't use Extent in the code. Instead let's stick to LogicalHeight
for consistency.

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

Done.

+{
+    return isHorizontalWritingMode() ? childIntrinsicHeight(child) : childIntrinsicWidth(child);
+}
+
+LayoutUnit RenderGrid::marginExtentForChild(RenderBox& child) const
+{
+    return isHorizontalWritingMode() ? child.marginHeight() : child.marginWidth();

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

It really seems like that this should be on RenderBox.

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

Agree, but perhaps in a different patch ? Otherwise it would touch
RenderFlexibleBox as well, so it would complicate the review, I think.

+}
+
+LayoutUnit RenderGrid::availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, RenderBox& child) const
+{
+    ASSERT(!child.isOutOfFlowPositioned());
+    LayoutUnit childExtent = marginExtentForChild(child) + intrinsicExtentForChild(child);
+    return gridAreaBreadthForChild - childExtent;
+}
+
+void RenderGrid::applyStretchAlignmentToChildIfNeeded(RenderBox& child, LayoutUnit gridAreaBreadthForChild)
+{
+    if (resolveAlignment(style(), child.style()) != ItemPositionStretch)
+        return;
+
+    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
+    if (child.style()->logicalHeight().isAuto()) {
+        // FIXME: If the child has orthogonal flow, then it already has an override height set, so use it.
+        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
+        if (!hasOrthogonalWritingMode) {
+            LayoutUnit heightBeforeStretching = needToStretchChildLogicalHeight(child) ? constrainedChildIntrinsicContentLogicalHeight(child) : child.logicalHeight();

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

It's bad smell that needToStretchChildLogicalHeight checks 2 attributes we have
already checked: the grid container's writing mode and the child's logical
height.

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

I've got the code from the flexbox implementation, but I agree is a bit weird
and I spend some time trying to understand the idea. I'm not totally sure
whether the orthogonal writing modes FIXME would apply as well to grid layout,
though. 

I think the idea behind this logic is that if vertical mode is being used, the
child must use it as well, so heightBeforeStretching is just the child's
logicalHeight, instead of constrainedChildIntrinsicContentLogicalHeight, since
needToStretchChildLogicalHeight would be false in that case.

+            LayoutUnit stretchedLogicalHeight = heightBeforeStretching + availableAlignmentSpaceForChildBeforeStretching(gridAreaBreadthForChild, child);
+            LayoutUnit desiredLogicalHeight = child.constrainLogicalHeightByMinMax(stretchedLogicalHeight, heightBeforeStretching - child.borderAndPaddingLogicalHeight());
+            LayoutUnit desiredLogicalContentHeight = desiredLogicalHeight - child.borderAndPaddingLogicalHeight();
+
+            // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.
+            if (desiredLogicalHeight != child.logicalHeight() || !child.hasOverrideHeight() || desiredLogicalContentHeight != child.overrideLogicalContentHeight()) {
+                child.setOverrideLogicalContentHeight(desiredLogicalContentHeight);
+                child.setLogicalHeight(0);
+                child.forceChildLayout();
+            }
+        }
+    }
+}
+
 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