[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 0c343bf05560ca4605969c74b5ea390c9957caed..d4adce57203300a287c92de312875a790f828cf4 100644
--- a/Source/core/rendering/RenderGrid.cpp
+++ b/Source/core/rendering/RenderGrid.cpp
@@ -618,6 +618,8 @@ GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, size
 
 LayoutUnit RenderGrid::logicalHeightForChild(RenderBox& child, Vector<GridTrack>& columnTracks)
 {
+    child.clearOverrideLogicalContentHeight();

[Julien - ping for review, 2014/10/31 17:17:12]

If we don't need this call before everything else, we should put it next to the
call to setOverrideContainingBlockContentLogicalHeight below.

[jfernandez, 2014/10/31 22:55:59]

Acknowledged.

+
     SubtreeLayoutScope layoutScope(child);
     LayoutUnit oldOverrideContainingBlockContentLogicalWidth = child.hasOverrideContainingBlockLogicalWidth() ? child.overrideContainingBlockContentLogicalWidth() : LayoutUnit();
     LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(child, ForColumns, columnTracks);
@@ -1117,9 +1119,8 @@ void RenderGrid::layoutGridItems()
         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)
@@ -1220,20 +1221,11 @@ LayoutUnit RenderGrid::centeredColumnPositionForChild(const RenderBox& child) co
     return columnPosition + std::max<LayoutUnit>(0, endOfColumn - startOfColumn - child.logicalWidth()) / 2;
 }
 
-static ItemPosition resolveJustification(const RenderStyle* parentStyle, const RenderStyle* childStyle)
-{
-    ItemPosition justify = childStyle->justifySelf();
-    if (justify == ItemPositionAuto)
-        justify = (parentStyle->justifyItems() == ItemPositionAuto) ? ItemPositionStretch : parentStyle->justifyItems();
-
-    return justify;
-}
-
 LayoutUnit RenderGrid::columnPositionForChild(const RenderBox& child) const
 {
     bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
 
-    switch (resolveJustification(style(), child.style())) {
+    switch (RenderStyle::resolveJustification(style(), child.style())) {
     case ItemPositionSelfStart:
         // For orthogonal writing-modes, this computes to 'start'
         // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
@@ -1293,6 +1285,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.
@@ -1340,12 +1333,80 @@ LayoutUnit RenderGrid::centeredRowPositionForChild(const RenderBox& child) const
     return startOfRow + std::max<LayoutUnit>(0, endOfRow - startOfRow - child.logicalHeight()) / 2;
 }
 
-LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const
+static inline LayoutUnit constrainedChildIntrinsicContentLogicalHeight(const RenderBox& child)
+{
+    LayoutUnit childIntrinsicContentLogicalHeight = child.intrinsicContentLogicalHeight();
+    return child.constrainLogicalHeightByMinMax(childIntrinsicContentLogicalHeight + child.borderAndPaddingLogicalHeight(), childIntrinsicContentLogicalHeight);

[Julien - ping for review, 2014/10/31 17:17:12]

The min / max constraining logic is not tested :(

We should fix that before landing.

[jfernandez, 2014/10/31 22:55:59]

The grid-align-justify-stretch.html test contains some cases to check out the
min / max constraining logic:

<div class="maxHeight alignSelfStretch justifySelfStart firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="100"
data-expected-height="160"></div>

There is another one testing maxWidth in vertical mode; I think regarding the
'stretch' behavior the min / max constrain is tested. 

I think there are other Layout Tests for verifying the min / max constrain is
applied in the regular grid track sizing algorithm, so in my opinion the cases
defined for stretch are enough. 

+}
+
+bool RenderGrid::needToStretchChildLogicalHeight(const RenderBox& child) const
 {
+    if (RenderStyle::resolveAlignment(style(), child.style()) != ItemPositionStretch)
+        return false;
+
+    return isHorizontalWritingMode() && child.style()->height().isAuto();
+}
+
+LayoutUnit RenderGrid::childIntrinsicHeight(const RenderBox& child) const
+{
+    if (child.isHorizontalWritingMode() && needToStretchChildLogicalHeight(child))
+        return constrainedChildIntrinsicContentLogicalHeight(child);
+    return child.height();
+}
+
+LayoutUnit RenderGrid::childIntrinsicWidth(const RenderBox& child) const
+{
+    if (!child.isHorizontalWritingMode() && needToStretchChildLogicalHeight(child))
+        return constrainedChildIntrinsicContentLogicalHeight(child);
+    return child.width();
+}
+
+LayoutUnit RenderGrid::intrinsicLogicalHeightForChild(const RenderBox& child) const
+{
+    return isHorizontalWritingMode() ? childIntrinsicHeight(child) : childIntrinsicWidth(child);
+}
+
+LayoutUnit RenderGrid::marginLogicalHeightForChild(const RenderBox& child) const

[Julien - ping for review, 2014/10/31 17:17:13]

This doesn't look grid related so it should be moved to RenderBlock like the
similar helper functions.

[jfernandez, 2014/10/31 22:55:59]

I agree. As I commented before, I'll do a new patch to move this logic and the
one implemented in Flexbox to the RenderBlock class.

+{
+    return isHorizontalWritingMode() ? child.marginHeight() : child.marginWidth();
+}
+
+LayoutUnit RenderGrid::availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox& child) const
+{
+    ASSERT(!child.isOutOfFlowPositioned());
+    LayoutUnit childLogicalHeight = marginLogicalHeightForChild(child) + intrinsicLogicalHeightForChild(child);
+    return gridAreaBreadthForChild - childLogicalHeight;
+}
+
+void RenderGrid::applyStretchAlignmentToChildIfNeeded(RenderBox& child, LayoutUnit gridAreaBreadthForChild)
+{
+    if (RenderStyle::resolveAlignment(style(), child.style()) != ItemPositionStretch)
+        return;
+
     bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
-    ItemPosition alignSelf = RenderStyle::resolveAlignment(style(), child.style());
+    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();
+            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();
+            }
+        }
+    }

[Julien - ping for review, 2014/10/31 17:17:12]

A lot of this logic is similar to RenderFlexibleBox. It would be nice to share
code with them. At least a FIXME about it is important (to avoid someone copying
it again)

[jfernandez, 2014/10/31 22:55:59]

Acknowledged.

+}
 
-    switch (alignSelf) {
+LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const
+{
+    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
+    switch (RenderStyle::resolveAlignment(style(), child.style())) {
     case ItemPositionSelfStart:
         // If orthogonal writing-modes, this computes to 'Start'.
         // FIXME: grid track sizing and positioning does not support orthogonal modes yet.
@@ -1398,7 +1459,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: