[css-grid] Handle alignment with orthogonal flows

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 4c4a189f0483c11021b6e2d6e217cec0dcd07a52..f7bec2935cc8579052f5eecbde151c68ac09f0af 100644
--- a/Source/core/rendering/RenderGrid.cpp
+++ b/Source/core/rendering/RenderGrid.cpp
@@ -1286,14 +1286,15 @@ LayoutUnit RenderGrid::startOfColumnForChild(const RenderBox& child) const
 
 LayoutUnit RenderGrid::endOfColumnForChild(const RenderBox& child) const
 {
+    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
     const GridCoordinate& coordinate = cachedGridCoordinate(child);
     LayoutUnit startOfColumn = m_columnPositions[coordinate.columns.resolvedInitialPosition.toInt()];
     // The grid items should be inside the grid container's border box, that's why they need to be shifted.
     LayoutUnit columnPosition = startOfColumn + marginStartForChild(child);
 
     LayoutUnit endOfColumn = m_columnPositions[coordinate.columns.resolvedFinalPosition.next().toInt()];
-    // FIXME: This might not work as expected with orthogonal writing-modes.
-    LayoutUnit offsetFromColumnPosition = computeOverflowAlignmentOffset(child.style()->justifySelfOverflowAlignment(), startOfColumn, endOfColumn, child.logicalWidth() + child.marginLogicalWidth());
+    LayoutUnit childBreadth = hasOrthogonalWritingMode ? child.logicalHeight() + child.marginLogicalHeight() : child.logicalWidth() + child.marginLogicalWidth();
+    LayoutUnit offsetFromColumnPosition = computeOverflowAlignmentOffset(child.style()->justifySelfOverflowAlignment(), startOfColumn, endOfColumn, childBreadth);
 
     return columnPosition + offsetFromColumnPosition;
 }
@@ -1316,12 +1317,13 @@ LayoutUnit RenderGrid::columnPositionRight(const RenderBox& child) const
 
 LayoutUnit RenderGrid::centeredColumnPositionForChild(const RenderBox& child) const
 {
+    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
     const GridCoordinate& coordinate = cachedGridCoordinate(child);
     LayoutUnit startOfColumn = m_columnPositions[coordinate.columns.resolvedInitialPosition.toInt()];
     LayoutUnit endOfColumn = m_columnPositions[coordinate.columns.resolvedFinalPosition.next().toInt()];
     LayoutUnit columnPosition = startOfColumn + marginStartForChild(child);
-    // FIXME: This might not work as expected with orthogonal writing-modes.
-    LayoutUnit offsetFromColumnPosition = computeOverflowAlignmentOffset(child.style()->justifySelfOverflowAlignment(), startOfColumn, endOfColumn, child.logicalWidth() + child.marginLogicalWidth());
+    LayoutUnit childBreadth = hasOrthogonalWritingMode ? child.logicalHeight() + child.marginLogicalHeight() : child.logicalWidth() + child.marginLogicalWidth();
+    LayoutUnit offsetFromColumnPosition = computeOverflowAlignmentOffset(child.style()->justifySelfOverflowAlignment(), startOfColumn, endOfColumn, childBreadth);
 
     return columnPosition + offsetFromColumnPosition / 2;
 }
@@ -1332,10 +1334,20 @@ LayoutUnit RenderGrid::columnPositionForChild(const RenderBox& child) const
 
     switch (RenderStyle::resolveJustification(style(), child.style(), ItemPositionStretch)) {
     case ItemPositionSelfStart:
-        // For orthogonal writing-modes, this computes to 'start'
-        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
-        if (hasOrthogonalWritingMode)
-            return startOfColumnForChild(child);
+        // If orthogonal writing-modes, self-start will be based on the child's block-axis
+        // direction, because it's the one parallel to the alignment property's axis.
+        if (hasOrthogonalWritingMode) {
+            switch (child.style()->writingMode()) {
+            case TopToBottomWritingMode:
+                return style()->isLeftToRightDirection() ? startOfColumnForChild(child) : endOfColumnForChild(child);
+            case BottomToTopWritingMode:
+                return style()->isLeftToRightDirection() ? endOfColumnForChild(child) : startOfColumnForChild(child);
+            case LeftToRightWritingMode:
+                return style()->isLeftToRightDirection() ? startOfColumnForChild(child) : endOfColumnForChild(child);
+            case RightToLeftWritingMode:

[Julien - ping for review, 2015/01/26 10:42:07]

Seems like we could think of it in terms of isFlippedBlocksWritingMode():

if (isFlippedBlocksWritingMode(child.style()->writingMode())) {
   return style->isLeftToRightDirection() ? startOfColumnForChild(child) :
endOfColumnForChild(child);
} else {
   ....
}

[jfernandez, 2015/02/06 23:54:19]

Acknowledged.

+                return style()->isLeftToRightDirection() ? endOfColumnForChild(child) : startOfColumnForChild(child);
+            }
+        }
 
         // self-start is based on the child's direction. That's why we need to check against the grid container's direction.
         if (child.style()->direction() != style()->direction())
@@ -1343,10 +1355,18 @@ LayoutUnit RenderGrid::columnPositionForChild(const RenderBox& child) const
 
         return startOfColumnForChild(child);
     case ItemPositionSelfEnd:
-        // For orthogonal writing-modes, this computes to 'start'
-        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
-        if (hasOrthogonalWritingMode)
-            return endOfColumnForChild(child);
+        if (hasOrthogonalWritingMode) {

[Julien - ping for review, 2015/01/26 10:42:07]

// See comment above about the block-axis?

[jfernandez, 2015/02/06 23:54:19]

Done.

+            switch (child.style()->writingMode()) {
+            case TopToBottomWritingMode:
+                return style()->isLeftToRightDirection() ? endOfColumnForChild(child) : startOfColumnForChild(child);
+            case BottomToTopWritingMode:
+                return style()->isLeftToRightDirection() ? startOfColumnForChild(child) : endOfColumnForChild(child);
+            case LeftToRightWritingMode:
+                return style()->isLeftToRightDirection() ? endOfColumnForChild(child) : startOfColumnForChild(child);
+            case RightToLeftWritingMode:
+                return style()->isLeftToRightDirection() ? startOfColumnForChild(child) : endOfColumnForChild(child);
+            }
+        }
 
         // self-end is based on the child's direction. That's why we need to check against the grid container's direction.
         if (child.style()->direction() != style()->direction())
@@ -1385,6 +1405,7 @@ LayoutUnit RenderGrid::columnPositionForChild(const RenderBox& child) const
 
 LayoutUnit RenderGrid::endOfRowForChild(const RenderBox& child) const
 {
+    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
     const GridCoordinate& coordinate = cachedGridCoordinate(child);
 
     LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
@@ -1392,7 +1413,8 @@ LayoutUnit RenderGrid::endOfRowForChild(const RenderBox& child) const
     LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child);
 
     LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
-    LayoutUnit offsetFromRowPosition = computeOverflowAlignmentOffset(child.style()->alignSelfOverflowAlignment(), startOfRow, endOfRow, child.logicalHeight() + child.marginLogicalHeight());
+    LayoutUnit childBreadth = hasOrthogonalWritingMode ? child.logicalWidth() + child.marginLogicalWidth() : child.logicalHeight() + child.marginLogicalHeight();
+    LayoutUnit offsetFromRowPosition = computeOverflowAlignmentOffset(child.style()->alignSelfOverflowAlignment(), startOfRow, endOfRow, childBreadth);
 
     return rowPosition + offsetFromRowPosition;
 }
@@ -1410,13 +1432,15 @@ LayoutUnit RenderGrid::startOfRowForChild(const RenderBox& child) const
 
 LayoutUnit RenderGrid::centeredRowPositionForChild(const RenderBox& child) const
 {
+    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
     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 endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
     LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child);
-    LayoutUnit offsetFromRowPosition = computeOverflowAlignmentOffset(child.style()->alignSelfOverflowAlignment(), startOfRow, endOfRow, child.logicalHeight() + child.marginLogicalHeight());
+    LayoutUnit childBreadth = hasOrthogonalWritingMode ? child.logicalWidth() + child.marginLogicalWidth() : child.logicalHeight() + child.marginLogicalHeight();
+    LayoutUnit offsetFromRowPosition = computeOverflowAlignmentOffset(child.style()->alignSelfOverflowAlignment(), startOfRow, endOfRow, childBreadth);
 
     return rowPosition + offsetFromRowPosition / 2;
 }
@@ -1507,10 +1531,20 @@ LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const
     bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
     switch (RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch)) {
     case ItemPositionSelfStart:
-        // If orthogonal writing-modes, this computes to 'start'.
-        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
-        if (hasOrthogonalWritingMode)
-            return startOfRowForChild(child);
+        // If orthogonal writing-modes, self-start will be based on the child's inline-axis
+        // direction, because it's the one parallel to the alignment property's axis.
+        if (hasOrthogonalWritingMode) {
+            switch (style()->writingMode()) {
+            case TopToBottomWritingMode:
+                return child.style()->isLeftToRightDirection() ? startOfRowForChild(child) : endOfRowForChild(child);
+            case BottomToTopWritingMode:
+                return child.style()->isLeftToRightDirection() ? endOfRowForChild(child) : startOfRowForChild(child);
+            case LeftToRightWritingMode:
+                return child.style()->isLeftToRightDirection() ? startOfRowForChild(child) : endOfRowForChild(child);
+            case RightToLeftWritingMode:
+                return child.style()->isLeftToRightDirection() ? endOfRowForChild(child) : startOfRowForChild(child);
+            }
+        }
 
         // self-start is based on the child's block axis direction. That's why we need to check against the grid container's block flow.
         if (child.style()->writingMode() != style()->writingMode())
@@ -1518,10 +1552,20 @@ LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const
 
         return startOfRowForChild(child);
     case ItemPositionSelfEnd:
-        // If orthogonal writing-modes, this computes to 'end'.
-        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
-        if (hasOrthogonalWritingMode)
-            return endOfRowForChild(child);
+        // If orthogonal writing-modes, self-end will be based on the child's inline-axis
+        // direction, because it's the one parallel to the alignment property's axis.
+        if (hasOrthogonalWritingMode) {
+            switch (style()->writingMode()) {
+            case TopToBottomWritingMode:
+                return child.style()->isLeftToRightDirection() ? endOfRowForChild(child) : startOfRowForChild(child);
+            case BottomToTopWritingMode:
+                return child.style()->isLeftToRightDirection() ? startOfRowForChild(child) : endOfRowForChild(child);
+            case LeftToRightWritingMode:
+                return child.style()->isLeftToRightDirection() ? endOfRowForChild(child) : startOfRowForChild(child);
+            case RightToLeftWritingMode:
+                return child.style()->isLeftToRightDirection() ? startOfRowForChild(child) : endOfRowForChild(child);
+            }
+        }
 
         // self-end is based on the child's block axis direction. That's why we need to check against the grid container's block flow.
         if (child.style()->writingMode() != style()->writingMode())
@@ -1529,22 +1573,12 @@ LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const
 
         return endOfRowForChild(child);
     case ItemPositionLeft:
-        // The alignment axis (column axis) and the inline axis are parallell in
-        // orthogonal writing mode.
-        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
-        if (hasOrthogonalWritingMode)
-            return startOfRowForChild(child);
-
-        // Otherwise this this is equivalent to 'start’.
+        // The alignment axis (column axis) is orthogonal to the inline axis so this is
+        // equivalent to 'start'.
         return startOfRowForChild(child);
     case ItemPositionRight:
-        // The alignment axis (column axis) and the inline axis are parallell in
-        // orthogonal writing mode.
-        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
-        if (hasOrthogonalWritingMode)
-            return endOfRowForChild(child);
-
-        // Otherwise this this is equivalent to 'start’.
+        // The alignment axis (column axis) is orthogonal to the inline axis so this is
+        // equivalent to 'start'.
         return startOfRowForChild(child);
     case ItemPositionCenter:
         return centeredRowPositionForChild(child);
@@ -1688,8 +1722,10 @@ LayoutPoint RenderGrid::findChildLogicalPosition(const RenderBox& child, LayoutS
     LayoutUnit columnPosition = columnPositionForChild(child);
     // We stored m_columnPositions's data ignoring the direction, hence we might need now
     // to translate positions from RTL to LTR, as it's more convenient for painting.
-    if (!style()->isLeftToRightDirection())
-        columnPosition = (m_columnPositions[m_columnPositions.size() - 1] + borderAndPaddingLogicalLeft()) - columnPosition - child.logicalWidth();
+    if (!style()->isLeftToRightDirection()) {
+        LayoutUnit childBreadth = hasOrthogonalWritingMode ? child.logicalHeight(): child.logicalWidth();

[Julien - ping for review, 2015/01/26 10:42:06]

Style: Space before and after ':'.

[jfernandez, 2015/02/06 23:54:19]

Done.

+        columnPosition = (m_columnPositions[m_columnPositions.size() - 1] + borderAndPaddingLogicalLeft()) - columnPosition - childBreadth;
+    }
 
     // We stored column's and row's positions without considering orthogonal flows, so now we
     // need to flip the final LayoutPoint coordinates if that's the case.