[css-grid] Handle alignment with orthogonal flows

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 1268 matching lines @@
 LayoutUnit RenderGrid::startOfColumnForChild(const RenderBox& child) const
 {
     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.
     return startOfColumn + marginStartForChild(child);
 }
 
 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;
 }
 
 LayoutUnit RenderGrid::columnPositionLeft(const RenderBox& child) const
 {
     if (style()->isLeftToRightDirection())
         return startOfColumnForChild(child);
 
     return endOfColumnForChild(child);
 }
 
 LayoutUnit RenderGrid::columnPositionRight(const RenderBox& child) const
 {
     if (!style()->isLeftToRightDirection())
         return startOfColumnForChild(child);
 
     return endOfColumnForChild(child);
 }
 
 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;
 }
 
 LayoutUnit RenderGrid::columnPositionForChild(const RenderBox& child) const
 {
     bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
 
     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())
             return endOfColumnForChild(child);
 
         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())
             return startOfColumnForChild(child);
 
         return endOfColumnForChild(child);
     case ItemPositionFlexStart:
         // Only used in flex layout, for other layout, it's equivalent to 'start'.
         return startOfColumnForChild(child);
     case ItemPositionFlexEnd:
@@ skipping 18 matching lines @@
         // FIXME: Implement the previous values. For now, we always 'start' align the child.
         return startOfColumnForChild(child);
     }
 
     ASSERT_NOT_REACHED();
     return 0;
 }
 
 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()];
     // The grid items should be inside the grid container's border box, that's why they need to be shifted.
     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;
 }
 
 LayoutUnit RenderGrid::startOfRowForChild(const RenderBox& child) const
 {
     const GridCoordinate& coordinate = cachedGridCoordinate(child);
 
     LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
     // The grid items should be inside the grid container's border box, that's why they need to be shifted.
     LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child);
 
     return rowPosition;
 }
 
 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;
 }
 
 static inline LayoutUnit constrainedChildIntrinsicContentLogicalHeight(const RenderBox& child)
 {
     LayoutUnit childIntrinsicContentLogicalHeight = child.intrinsicContentLogicalHeight();
     return child.constrainLogicalHeightByMinMax(childIntrinsicContentLogicalHeight + child.borderAndPaddingLogicalHeight(), childIntrinsicContentLogicalHeight);
 }
 
@@ skipping 70 matching lines @@
             }
         }
     }
 }
 
 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())
             return endOfRowForChild(child);
 
         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())
             return startOfRowForChild(child);
 
         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);
         // 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:
@@ skipping 123 matching lines @@
     return 0;
 }
 
 LayoutPoint RenderGrid::findChildLogicalPosition(const RenderBox& child, LayoutSize contentAlignmentOffset) const
 {
     bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
     LayoutUnit rowPosition = rowPositionForChild(child);
     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.
     LayoutPoint childLocation = hasOrthogonalWritingMode ? LayoutPoint(rowPosition, columnPosition) : LayoutPoint(columnPosition, rowPosition);
 
     // The Content Alignment offset accounts for the RTL to LTR flip.
     childLocation.move(contentAlignmentOffset);
 
     return childLocation;
 }
@@ skipping 10 matching lines @@
     if (isOutOfFlowPositioned())
         return "RenderGrid (positioned)";
     if (isAnonymous())
         return "RenderGrid (generated)";
     if (isRelPositioned())
         return "RenderGrid (relative positioned)";
     return "RenderGrid";
 }
 
 } // namespace blink