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

Source/core/rendering/RenderGrid.cpp

Index: Source/core/rendering/RenderGrid.cpp
diff --git a/Source/core/rendering/RenderGrid.cpp b/Source/core/rendering/RenderGrid.cpp
index 40f2d1e2ac51956f535803cef84a2da8f2d36154..8aa9b73d90644fdd78d90f6da2306e180dc359ca 100644
--- a/Source/core/rendering/RenderGrid.cpp
+++ b/Source/core/rendering/RenderGrid.cpp
@@ -616,6 +616,8 @@ GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, size
 
 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);
@@ -1073,6 +1075,8 @@ void RenderGrid::layoutGridItems()
         // 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)
@@ -1246,6 +1250,7 @@ LayoutUnit RenderGrid::columnPositionForChild(const RenderBox& child) const
     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.
@@ -1303,6 +1308,76 @@ static ItemPosition resolveAlignment(const RenderStyle* parentStyle, const Rende
     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();
@@ -1361,7 +1436,6 @@ LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const
     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: