[css-grid] Implementation of Baseline Self-Alignment

third_party/WebKit/Source/core/layout/LayoutGrid.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 124 matching lines @@
         , distributionOffset(distribution)
     {
     }
 
     bool isValid() { return positionOffset >= 0 && distributionOffset >= 0; }
 
     LayoutUnit positionOffset = -1;
     LayoutUnit distributionOffset = -1;
 };
 
+class BaselineGroup {

[cbiesinger, 2015/10/26 22:07:16]

For this class and BaselineContext, can you add a brief comment about what the
classes are for?

[jfernandez, 2015/10/27 09:47:56]

Done.

+public:
+    BaselineGroup(LayoutBox* child, LayoutUnit childAscent, ItemPosition preference)
+    {
+        ASSERT(preference == ItemPositionBaseline || preference == ItemPositionLastBaseline);
+        add(child, childAscent);
+        groupPreference = preference;
+        groupWritingMode = child->styleRef().writingMode();
+    }
+
+    static bool oppositeBlockDirection(WritingMode childBlockDirection, WritingMode groupBlockDirection)
+    {
+        return (childBlockDirection == TopToBottomWritingMode && groupBlockDirection == BottomToTopWritingMode)
+            || (childBlockDirection == BottomToTopWritingMode && groupBlockDirection == TopToBottomWritingMode)
+            || (childBlockDirection == LeftToRightWritingMode && groupBlockDirection == RightToLeftWritingMode)
+            || (childBlockDirection == RightToLeftWritingMode && groupBlockDirection == LeftToRightWritingMode);
+    }
+
+    bool isCompatibleChild(LayoutBox* child, ItemPosition preference)
+    {
+        return (child->styleRef().writingMode() == groupWritingMode && preference == groupPreference)
+            || (oppositeBlockDirection(child->styleRef().writingMode(), groupWritingMode) && preference != groupPreference);

[cbiesinger, 2015/10/26 22:07:16]

I don't think I fully understand what this is necessary for. Can you explain
this second part of the condition a bit more?

I also don't immediately see why you need baseline groups -- a single line can
have multiple baselines? I can't find a reference in the spec for that?

[jfernandez, 2015/10/27 09:47:56]

The CSS Box Alignment spec defines when a group of boxes can participate in
Baseline alignment together:

https://drafts.csswg.org/css-align/#baseline-terms

The isCompatibleChild implement the logic for fulfilling such restrictions on
when a grid item is compatible in a Baseline Sharing Group. The second part of
the condition you asked for is precisely the second condition defined in the
spec.
Well, if I understand what the spec says on this regard, it seems that we can
have different baselines depending on several factors, grid item's writing mode
(which might apply to a column-axis baseline alignment) or baseline alignment
preference (first vs last),  among them.

[cbiesinger, 2015/10/27 21:52:30]

Oh, thanks for the explanation. I should have checked css-align, not just
css-grid. I would suggest that you mention css-align 7.2 in the comment. Also,
since the spec calls the group "baseline-sharing group" maybe the class should
be called BaselineSharingGroup. Finally, since the spec only requires the same
block flow direction (not the same writing mode), LTR and RTL should be
considered compatible.

+    }
+
+    void add(LayoutBox* child, LayoutUnit childAscent)
+    {
+        ASSERT(child);
+        children.append(child);
+        groupMaxAscent = std::max(groupMaxAscent, childAscent);
+    }
+
+    Vector<LayoutBox*> children;

[cbiesinger, 2015/10/26 22:07:17]

Why not the m_children style for member variables? Also for BaselineContext

[jfernandez, 2015/10/27 09:47:56]

Acknowledged.

+    ItemPosition groupPreference;
+    WritingMode groupWritingMode;
+    LayoutUnit groupMaxAscent;
+};
+
+class BaselineContext {
+public:
+    BaselineContext() { }
+
+    BaselineContext(LayoutBox* child, LayoutUnit maxAscent, ItemPosition preference)
+    {
+        sharedGroups.append(BaselineGroup(child, maxAscent, preference));
+    }
+
+    void addGroupMember(LayoutBox* child, LayoutUnit childAscent, ItemPosition preference)
+    {
+        bool compatibleGroupFound = false;
+        for (auto& group : sharedGroups) {
+            if ((compatibleGroupFound = group.isCompatibleChild(child, preference))) {
+                group.add(child, childAscent);
+                break;
+            }
+        }
+        if (!compatibleGroupFound)
+            sharedGroups.append(BaselineGroup(child, childAscent, preference));
+    }
+
+    Vector<BaselineGroup> sharedGroups;
+};
+
 enum TrackSizeRestriction {
     AllowInfinity,
     ForbidInfinity,
 };
 
 class LayoutGrid::GridIterator {
     WTF_MAKE_NONCOPYABLE(GridIterator);
 public:
     // |direction| is the direction that is fixed to |fixedTrackIndex| so e.g
     // GridIterator(m_grid, ForColumns, 1) will walk over the rows of the 2nd column.
@@ skipping 64 matching lines @@
     }
 
 private:
     const GridRepresentation& m_grid;
     GridTrackSizingDirection m_direction;
     size_t m_rowIndex;
     size_t m_columnIndex;
     size_t m_childIndex;
 };
 
+typedef HashMap<unsigned, BaselineContext, DefaultHash<unsigned>::Hash, WTF::UnsignedWithZeroKeyHashTraits<unsigned>> BaselineContextsMap;
+
 struct LayoutGrid::GridSizingData {
     WTF_MAKE_NONCOPYABLE(GridSizingData);
     STACK_ALLOCATED();
 public:
     GridSizingData(size_t gridColumnCount, size_t gridRowCount)
         : columnTracks(gridColumnCount)
         , rowTracks(gridRowCount)
     {
     }
 
     Vector<GridTrack> columnTracks;
     Vector<GridTrack> rowTracks;
     Vector<size_t> contentSizedTracksIndex;
 
+    BaselineContextsMap rowAxisAlignmentContext;
+
     // Performance optimization: hold onto these Vectors until the end of Layout to avoid repeated malloc / free.
     Vector<GridTrack*> filteredTracks;
     Vector<GridItemWithSpan> itemsSortedByIncreasingSpan;
     Vector<GridTrack*> growBeyondGrowthLimitsTracks;
 };
 
 struct GridItemsSpanGroupRange {
     Vector<GridItemWithSpan>::iterator rangeStart;
     Vector<GridItemWithSpan>::iterator rangeEnd;
 };
@@ skipping 1074 matching lines @@
         child->setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
         child->setOverrideContainingBlockContentLogicalHeight(overrideContainingBlockContentLogicalHeight);
 
         // Stretching logic might force a child layout, so we need to run it before the layoutIfNeeded
         // call to avoid unnecessary relayouts. This might imply that child margins, needed to correctly
         // determine the available space before stretching, are not set yet.
         applyStretchAlignmentToChildIfNeeded(*child);
 
         child->layoutIfNeeded();
 
+        updateBaselineAlignmentContextInRowAxisIfNeeded(child, sizingData);
+
         // We need pending layouts to be done in order to compute auto-margins properly.
         updateAutoMarginsInColumnAxisIfNeeded(*child);
         updateAutoMarginsInRowAxisIfNeeded(*child);
 
 #if ENABLE(ASSERT)
         const GridCoordinate& coordinate = cachedGridCoordinate(*child);
         ASSERT(coordinate.columns.resolvedInitialPosition.toInt() < sizingData.columnTracks.size());
         ASSERT(coordinate.rows.resolvedInitialPosition.toInt() < sizingData.rowTracks.size());
 #endif
         child->setLogicalLocation(findChildLogicalPosition(*child, sizingData));
 
         // Keep track of children overflowing their grid area as we might need to paint them even if the grid-area is
         // not visible
         if (child->logicalHeight() > overrideContainingBlockContentLogicalHeight
             || child->logicalWidth() > overrideContainingBlockContentLogicalWidth)
             m_gridItemsOverflowingGridArea.append(child);
     }
 
+    applyBaselineAlignmentIfNeeded(sizingData);
+
     for (const auto& row : sizingData.rowTracks)
         setLogicalHeight(logicalHeight() + row.baseSize());
 
     LayoutUnit height = logicalHeight() + borderAndPaddingLogicalHeight() + scrollbarLogicalHeight();
     if (hasLineIfEmpty())
         height = std::max(height, minimumLogicalHeightForEmptyLine());
 
     // Min / max logical height is handled by the call to updateLogicalHeight in layoutBlock.
     setLogicalHeight(height);
 }
@@ skipping 337 matching lines @@
     if (marginBefore.isAuto() && marginAfter.isAuto()) {
         child.setMarginBefore(availableAlignmentSpace / 2, style());
         child.setMarginAfter(availableAlignmentSpace / 2, style());
     } else if (marginBefore.isAuto()) {
         child.setMarginBefore(availableAlignmentSpace, style());
     } else if (marginAfter.isAuto()) {
         child.setMarginAfter(availableAlignmentSpace, style());
     }
 }
 
+void LayoutGrid::updateBaselineAlignmentContextInRowAxisIfNeeded(LayoutBox* child, GridSizingData& sizingData) const
+{
+    ItemPosition align = ComputedStyle::resolveAlignment(styleRef(), child->styleRef(), ItemPositionStretch);
+    if ((align != ItemPositionBaseline && align != ItemPositionLastBaseline) || hasAutoMarginsInColumnAxis(*child))
+        return;
+
+    const GridCoordinate& coordinate = cachedGridCoordinate(*child);
+    unsigned lineNumber = coordinate.rows.resolvedInitialPosition.toInt();
+    LayoutUnit ascent = marginBoxAscentFromBaselineForChild(*child);
+    bool contextExists = sizingData.rowAxisAlignmentContext.contains(lineNumber);
+    BaselineContext context = contextExists ? sizingData.rowAxisAlignmentContext.get(lineNumber) : BaselineContext(child, ascent, align);
+    if (contextExists)
+        context.addGroupMember(child, ascent, align);
+    sizingData.rowAxisAlignmentContext.set(lineNumber, context);
+}
+
+// FIXME: This logic is shared by LayoutFlexibleBox, so it should be moved to LayoutBox.
+LayoutUnit LayoutGrid::marginBoxAscentFromBaselineForChild(const LayoutBox& child) const
+{
+    LayoutUnit baseline = child.firstLineBoxBaseline();
+    // We take content-box's bottom if no valid baseline.
+    if (baseline == -1)
+        baseline = LayoutBlock::logicalHeightForChild(child);
+    return baseline + marginBeforeForChild(child);
+}
+
+void LayoutGrid::applyBaselineAlignmentIfNeeded(const GridSizingData& sizingData)
+{
+    for (auto& contexts : sizingData.rowAxisAlignmentContext.values()) {
+        for (auto& group : contexts.sharedGroups) {
+            for (LayoutBox* child : group.children) {
+                ItemPosition align = ComputedStyle::resolveAlignment(styleRef(), child->styleRef(), ItemPositionStretch);
+                // TODO (lajava): implement last-baseline logic here.
+                if (align == ItemPositionBaseline) {
+                    LayoutUnit ascent = marginBoxAscentFromBaselineForChild(*child);
+                    LayoutUnit startOffset = group.groupMaxAscent - ascent;
+                    LayoutPoint location(isHorizontalWritingMode() ? child->location() : child->location().transposedPoint());
+                    child->setLogicalLocation(location + LayoutSize(0, startOffset));
+                }
+            }
+        }
+    }
+}
+
+static int synthesizedBaselineFromContentBox(const LayoutBox& box, LineDirectionMode direction)
+{
+    if (direction == HorizontalLine)
+        return box.size().height() - box.borderBottom() - box.paddingBottom() - box.verticalScrollbarWidth();
+    return box.size().width() - box.borderLeft() - box.paddingLeft() - box.horizontalScrollbarHeight();
+}
+
+int LayoutGrid::baselinePosition(FontBaseline, bool, LineDirectionMode direction, LinePositionMode mode) const
+{
+    ASSERT(mode == PositionOnContainingLine);
+    int baseline = firstLineBoxBaseline();
+    // We take content-box's bottom if no valid baseline.
+    if (baseline == -1)
+        baseline = synthesizedBaselineFromContentBox(*this, direction);
+
+    return baseline + beforeMarginInLineDirection(direction);
+}
+
+int LayoutGrid::firstLineBoxBaseline() const
+{
+    if (isWritingModeRoot())
+        return -1;
+    LayoutBox* baselineChild = nullptr;
+    for (LayoutBox* child = m_orderIterator.first(); child; child = m_orderIterator.next()) {
+        if (child->isOutOfFlowPositioned())
+            continue;
+        const GridCoordinate& coordinate = cachedGridCoordinate(*child);
+        // TODO (lajava): propertly identifying grid items whose areas intersect the grid container's first row/column.
+        if (coordinate.rows.resolvedInitialPosition.toInt() > 0 && coordinate.columns.resolvedInitialPosition.toInt() > 0)
+            break;
+        ItemPosition align = ComputedStyle::resolveAlignment(styleRef(), child->styleRef(), ItemPositionStretch);
+        // Orthogonal children don't participate in baseline alignment.
+        bool isOrthogonal = child->isHorizontalWritingMode() != isHorizontalWritingMode();
+        if (align == ItemPositionBaseline && !isOrthogonal && !hasAutoMarginsInColumnAxis(*child)) {
+            baselineChild = child;
+            break;
+        }
+        if (!baselineChild)
+            baselineChild = child;
+    }
+
+    if (!baselineChild)
+        return -1;
+
+    // Using a synthesized baseline (content-box's bottom) if baselineChild has an orthogonal writing mode.
+    // TODO (lajava) We still don't support orthogonal modes in grid.
+    if (baselineChild->isHorizontalWritingMode() != isHorizontalWritingMode())
+        return -1;
+
+    int baseline = baselineChild->firstLineBoxBaseline();
+    if (baseline == -1) {
+        // TODO (lajava): We should pass |direction| into firstLineBoxBaseline and stop bailing out if we're a writing mode root.
+        // This would also fix some cases where the grid is orthogonal to its container.
+        LineDirectionMode direction = isHorizontalWritingMode() ? HorizontalLine : VerticalLine;
+        return synthesizedBaselineFromContentBox(*baselineChild, direction) + baselineChild->logicalTop();
+    }
+
+    return baseline + baselineChild->logicalTop();
+}
+
+int LayoutGrid::inlineBlockBaseline(LineDirectionMode direction) const
+{
+    int baseline = firstLineBoxBaseline();
+    if (baseline != -1)
+        return baseline;
+
+    int marginHeight = direction == HorizontalLine ? marginTop() : marginRight();
+    return synthesizedBaselineFromContentBox(*this, direction) + marginHeight;
+}
+
 GridAxisPosition LayoutGrid::columnAxisPositionForChild(const LayoutBox& child) const
 {
     bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
     bool hasSameWritingMode = child.styleRef().writingMode() == styleRef().writingMode();
 
     switch (ComputedStyle::resolveAlignment(styleRef(), child.styleRef(), ItemPositionStretch)) {
     case ItemPositionSelfStart:
         // If orthogonal writing-modes, this computes to 'start'.
         // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
         // 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.
@@ skipping 18 matching lines @@
     case ItemPositionFlexStart: // Only used in flex layout, otherwise equivalent to 'start'.
     case ItemPositionStart:
         return GridAxisStart;
     case ItemPositionFlexEnd: // Only used in flex layout, otherwise equivalent to 'end'.
     case ItemPositionEnd:
         return GridAxisEnd;
     case ItemPositionStretch:
         return GridAxisStart;
     case ItemPositionBaseline:
     case ItemPositionLastBaseline:
-        // FIXME: These two require implementing Baseline Alignment. For now, we always 'start' align the child.
-        // crbug.com/234191
         return GridAxisStart;
     case ItemPositionAuto:
         break;
     }
 
     ASSERT_NOT_REACHED();
     return GridAxisStart;
 }
 
 GridAxisPosition LayoutGrid::rowAxisPositionForChild(const LayoutBox& child) const
@@ skipping 21 matching lines @@
     case ItemPositionFlexStart: // Only used in flex layout, otherwise equivalent to 'start'.
     case ItemPositionStart:
         return GridAxisStart;
     case ItemPositionFlexEnd: // Only used in flex layout, otherwise equivalent to 'end'.
     case ItemPositionEnd:
         return GridAxisEnd;
     case ItemPositionStretch:
         return GridAxisStart;
     case ItemPositionBaseline:
     case ItemPositionLastBaseline:
-        // FIXME: These two require implementing Baseline Alignment. For now, we always 'start' align the child.
-        // crbug.com/234191
         return GridAxisStart;
     case ItemPositionAuto:
         break;
     }
 
     ASSERT_NOT_REACHED();
     return GridAxisStart;
 }
 
 static inline LayoutUnit offsetBetweenTracks(ContentDistributionType distribution, const Vector<LayoutUnit>& trackPositions, const LayoutUnit& childBreadth)
@@ skipping 184 matching lines @@
 
     return LayoutPoint(rowAxisOffset, columnAxisOffsetForChild(child));
 }
 
 void LayoutGrid::paintChildren(const PaintInfo& paintInfo, const LayoutPoint& paintOffset) const
 {
     GridPainter(*this).paintChildren(paintInfo, paintOffset);
 }
 
 } // namespace blink