[CSS Grid Layout] Implementation of the align-self property in grid.

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 25760fdcf773452604f0bf301141ce6fe26144d6..a1a448743f8152fdca9d16f5957fad8aeb0dbad3 100644
--- a/Source/core/rendering/RenderGrid.cpp
+++ b/Source/core/rendering/RenderGrid.cpp
@@ -1090,7 +1090,7 @@ LayoutUnit RenderGrid::columnPositionForChild(const RenderBox* child) const
     return 0;
 }
 
-LayoutUnit RenderGrid::rowPositionForChild(const RenderBox* child) const
+LayoutUnit RenderGrid::endOfRowForChild(const RenderBox* child) const
 {
     const GridCoordinate& coordinate = cachedGridCoordinate(child);
 
@@ -1098,11 +1098,75 @@ LayoutUnit RenderGrid::rowPositionForChild(const RenderBox* child) const
     LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
     LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child);
 
-    // FIXME: This function should account for 'align-self'.
+    LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
+
+    // FIXME: This should account for the grid item's <overflow-position>.
+    return rowPosition + std::max<LayoutUnit>(0, endOfRow - startOfRow - child->logicalHeight());
+}
+
+LayoutUnit RenderGrid::startOfRowForChild(const RenderBox* child) const
+{
+    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()];
+    LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child);
 
     return rowPosition;
 }
 
+LayoutUnit RenderGrid::centeredRowPositionForChild(const RenderBox* child) const
+{
+    const GridCoordinate& coordinate = cachedGridCoordinate(child);
+    LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
+    LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
+    LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child);

[Julien - ping for review, 2014/05/21 14:41:38]

We should repeat the comment about shifting the grid item into the grid
container's border box.

[jfernandez, 2014/05/23 14:06:48]

Done.

+    return rowPosition + std::max<LayoutUnit>(0, endOfRow - startOfRow - child->logicalHeight()) / 2;
+}
+
+LayoutUnit RenderGrid::rowPositionForChild(const RenderBox* child) const
+{
+    bool hasOrthogonalWritingMode = child->isHorizontalWritingMode() != isHorizontalWritingMode();
+    ItemPosition childAlignSelf = child->style()->alignSelf();
+    switch (childAlignSelf) {

[Julien - ping for review, 2014/05/21 14:41:38]

No need for the |childAlignSelf| variable.

[jfernandez, 2014/05/23 14:06:48]

Done.

+    case ItemPositionSelfStart:
+        return startOfRowForChild(child);

[Julien - ping for review, 2014/05/21 14:41:38]

I think this needs a bit more logic:
- orthogonal flow are also disallowed in this case too
(http://dev.w3.org/csswg/css-align/#valuedef-self-start).
- if both alignment container and alignment subject have parallel writing-modes
but different block-flow direction, this will be wrong as the rows are measured
in the alignment container's (aka grid container) block-flow direction.

[jfernandez, 2014/05/23 14:06:48]

right, although such change is still only in the editor's draft. I've added it
to the implementation, though, with a FIXME for properly implementing the
orthogonal modes. I've been playing with them a bit and I think they don't work
very well now in grid layout. I guess it's because it's not properly described
the behavior in the specs, as you told me some days ago in the IRC.
That's good point, thanks. I've implemented it and it should be working fine.
I've added new test cases to cover this situation. 

+    case ItemPositionSelfEnd:
+        return endOfRowForChild(child);

[Julien - ping for review, 2014/05/21 14:41:38]

Same comment.

[jfernandez, 2014/05/23 14:06:48]

Done.

+
+    case ItemPositionFlexStart:
+    case ItemPositionFlexEnd:
+        // Only used in flex layout, for other layout, it's equivalent to 'start'.
+        return startOfRowForChild(child);
+
+    case ItemPositionLeft:
+    case ItemPositionRight:
+        // self-align's axis is always orthogonal to the inline axis, except in orthogonal
+        // writing-mode, so this is equivalent to ‘start’.
+        // FIXME: Properly support orthogonal writing mode.
+        if (hasOrthogonalWritingMode)
+            return 0;
+
+        return startOfRowForChild(child);
+
+    case ItemPositionCenter:
+        return centeredRowPositionForChild(child);
+    case ItemPositionStart:
+        return startOfRowForChild(child);
+    case ItemPositionEnd:
+        return endOfRowForChild(child);
+
+    case ItemPositionAuto:
+    case ItemPositionStretch:
+    case ItemPositionBaseline:
+        // FIXME: Implement the previous values. For now, we always start align the child.
+        return startOfRowForChild(child);
+    }
+
+    ASSERT_NOT_REACHED();
+    return 0;
+}
+
 LayoutPoint RenderGrid::findChildLogicalPosition(const RenderBox* child) const
 {
     return LayoutPoint(columnPositionForChild(child), rowPositionForChild(child));