[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 14 matching lines @@
 
 #include "core/layout/LayoutGrid.h"
 
 #include "core/layout/LayoutState.h"
 #include "core/layout/TextAutosizer.h"
 #include "core/paint/GridPainter.h"
 #include "core/paint/PaintLayer.h"
 #include "core/style/ComputedStyle.h"
 #include "core/style/GridArea.h"
 #include "platform/LengthFunctions.h"
+#include "platform/text/WritingMode.h"
 #include "wtf/PtrUtil.h"
 #include <algorithm>
 #include <memory>
 
 namespace blink {
 
 static const int infinity = -1;
 
 class GridItemWithSpan;
 
@@ skipping 88 matching lines @@
   ContentAlignmentData(){};
   ContentAlignmentData(LayoutUnit position, LayoutUnit distribution)
       : positionOffset(position), distributionOffset(distribution) {}
 
   bool isValid() { return positionOffset >= 0 && distributionOffset >= 0; }
 
   LayoutUnit positionOffset = LayoutUnit(-1);
   LayoutUnit distributionOffset = LayoutUnit(-1);
 };
 
+class BaselineGroup {
+ public:
+  BaselineGroup() {}
+
+  void update(LayoutUnit ascent, LayoutUnit descent) {
+    m_maxAscent = std::max(m_maxAscent, ascent);
+    m_maxDescent = std::max(m_maxDescent, descent);
+    m_size++;
+  }
+  LayoutUnit maxAscent() const { return m_maxAscent; }
+  LayoutUnit maxDescent() const { return m_maxDescent; }
+  LayoutUnit size() const { return m_size; }
+
+ private:
+  LayoutUnit m_maxAscent;
+  LayoutUnit m_maxDescent;
+  LayoutUnit m_size;

[svillar, 2016/11/25 14:44:48]

Not clear to me what this m_size is and why we increment it in 1 unit everytime
the update() method is called.

UPDATE: I think what you want to do is to add items to the BaselineGroup. If
that's the case I'd call the method append() or add() or even insert() but not
update. Also I guess m_size is the number of items in the baseline group. If
that's the case use an unsigned instead of a LayoutUnit.

+};
+
+class BaselineContext {
+ public:
+  BaselineContext(const LayoutBox& child,
+                  ItemPosition preference,
+                  LayoutUnit ascent,
+                  LayoutUnit descent) {
+    updateSharedGroup(child, preference, ascent, descent);
+  }
+
+  const BaselineGroup& getSharedGroup(const LayoutBox& child,
+                                      ItemPosition preference) const {
+    if (isAscentBaseline(child.styleRef().getWritingMode(), preference))
+      return m_ascentSharedGroup;
+    return m_descentSharedGroup;
+  }
+
+  void updateSharedGroup(const LayoutBox& child,
+                         ItemPosition preference,
+                         LayoutUnit ascent,
+                         LayoutUnit descent) {
+    if (isAscentBaseline(child.styleRef().getWritingMode(), preference))
+      m_ascentSharedGroup.update(ascent, descent);
+    else
+      m_descentSharedGroup.update(ascent, descent);
+  }
+
+ private:
+  bool isAscentBaseline(WritingMode blockDirection,
+                        ItemPosition preference) const {
+    return ((blockDirection == TopToBottomWritingMode &&
+             preference == ItemPositionBaseline) ||
+            (blockDirection == LeftToRightWritingMode &&
+             preference == ItemPositionBaseline) ||
+            (blockDirection == RightToLeftWritingMode &&
+             preference == ItemPositionLastBaseline));
+  }
+
+  BaselineGroup m_ascentSharedGroup;
+  BaselineGroup m_descentSharedGroup;
+};
+
 enum TrackSizeRestriction {
   AllowInfinity,
   ForbidInfinity,
 };
 
 class LayoutGrid::GridIterator {
   WTF_MAKE_NONCOPYABLE(GridIterator);
 
  public:
   // |direction| is the direction that is fixed to |fixedTrackIndex| so e.g
@@ skipping 87 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,
+                std::unique_ptr<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;
+  BaselineContextsMap colAxisAlignmentContext;
+
   // 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;
 
   LayoutUnit& freeSpace(GridTrackSizingDirection direction) {
     return direction == ForColumns ? freeSpaceForColumns : freeSpaceForRows;
   }
 
@@ skipping 511 matching lines @@
     track.setGrowthLimit(
         computeUsedBreadthOfMaxLength(trackSize, track.baseSize(), maxSize));
     track.setInfinitelyGrowable(false);
 
     if (trackSize.isFitContent()) {
       GridLength gridLength = trackSize.fitContentTrackBreadth();
       if (!gridLength.hasPercentage() || hasDefiniteFreeSpace)
         track.setGrowthLimitCap(valueForLength(gridLength.length(), maxSize));
     }
 
-    if (trackSize.isContentSized())
+    if (trackSize.isContentSized()) {
       sizingData.contentSizedTracksIndex.append(i);
+    } else if (!m_gridItemArea.isEmpty()) {

[svillar, 2016/11/25 14:44:48]

I am not sure this condition is correct. Why are we doing it only for non
content sized tracks?

+      GridIterator iterator(m_grid, direction, i);
+      while (LayoutBox* gridItem = iterator.nextGridItem()) {
+        if (isBaselineAlignment(*gridItem) &&
+            (sizingData.sizingOperation != IntrinsicSizeComputation ||
+             direction == ForRows))
+          gridItem->layoutIfNeeded();
+        updateBaselineAlignmentContextIfNeeded(*gridItem, sizingData);
+      }
+    }
     if (trackSize.maxTrackBreadth().isFlex())
       flexibleSizedTracksIndex.append(i);
   }
 
   // 2. Resolve content-based TrackSizingFunctions.
   if (!sizingData.contentSizedTracksIndex.isEmpty())
     resolveContentBasedTrackSizingFunctions(direction, sizingData);
 
   baseSizesWithoutMaximization = growthLimitsWithoutMaximization = LayoutUnit();
 
@@ skipping 292 matching lines @@
     // sizes (AvailableSpaceIndefinite).
     if ((sizingOperation == IntrinsicSizeComputation) ||
         (direction == ForRows && !cachedHasDefiniteLogicalHeight())) {
       if (minTrackBreadth.hasPercentage())
         minTrackBreadth = Length(Auto);
       if (maxTrackBreadth.hasPercentage())
         maxTrackBreadth = Length(Auto);
     }
   }
 
-  // Flex sizes are invalid as a min sizing function. However we still can have
+  // Flex sizes are invalid as a min sizing function. However we still can
+  // have

[svillar, 2016/11/25 14:44:48]

Something has happened to this comment

   // a flexible |minTrackBreadth| if the track had a flex size directly (e.g.
   // "1fr"), the spec says that in this case it implies an automatic minimum.
   if (minTrackBreadth.isFlex())
     minTrackBreadth = Length(Auto);
 
   return GridTrackSize(minTrackBreadth, maxTrackBreadth);
 }
 
 bool LayoutGrid::isOrthogonalChild(const LayoutBox& child) const {
   return child.isHorizontalWritingMode() != isHorizontalWritingMode();
@@ skipping 11 matching lines @@
                                                   LayoutUnit(-1));
     child.setNeedsLayout(LayoutInvalidationReason::GridChanged);
   }
 
   // We need to clear the stretched height to properly compute logical height
   // during layout.
   if (child.needsLayout())
     child.clearOverrideLogicalContentHeight();
 
   child.layoutIfNeeded();
-  return child.logicalHeight() + child.marginLogicalHeight();
+  LayoutUnit baselineOffset =
+      updateBaselineAlignmentContextIfNeeded(child, sizingData);
+  return baselineOffset > 0
+             ? baselineOffset
+             : child.logicalHeight() + child.marginLogicalHeight();

[svillar, 2016/11/25 14:44:48]

Nit: what about

if (auto baselineOffset = update.....)
  return baselineOffset;

return child.logical.....;

One question, could baselineOffset be negative? If so I guess my proposal is not
applicable

 }
 
 GridTrackSizingDirection LayoutGrid::flowAwareDirectionForChild(
     const LayoutBox& child,
     GridTrackSizingDirection direction) const {
   return !isOrthogonalChild(child)
              ? direction
              : (direction == ForColumns ? ForRows : ForColumns);
 }
 
@@ skipping 75 matching lines @@
 
   // All orthogonal flow boxes were already laid out during an early layout
   // phase performed in FrameView::performLayout.
   // It's true that grid track sizing was not completed at that time and it may
   // afffect the final height of a grid item, but since it's forbidden to
   // perform a layout during intrinsic width computation, we have to use that
   // computed height for now.
   if (direction == ForColumns &&
       sizingData.sizingOperation == IntrinsicSizeComputation) {
     DCHECK(isOrthogonalChild(child));
-    return child.logicalHeight() + child.marginLogicalHeight();
+    LayoutUnit baselineOffset =
+        updateBaselineAlignmentContextIfNeeded(child, sizingData);
+    return baselineOffset > 0
+               ? baselineOffset
+               : child.logicalHeight() + child.marginLogicalHeight();

[svillar, 2016/11/25 14:44:48]

Looks like exactly the same code, would it make sense to refactor it?

   }
 
   if (updateOverrideContainingBlockContentSizeForChild(
           child, childInlineDirection, sizingData))
     child.setNeedsLayout(LayoutInvalidationReason::GridChanged);
   return logicalHeightForChild(child, sizingData);
 }
 
 DISABLE_CFI_PERF
 LayoutUnit LayoutGrid::maxContentForChild(LayoutBox& child,
@@ skipping 1493 matching lines @@
   return LayoutUnit();
 }
 
 // FIXME: This logic is shared by LayoutFlexibleBox, so it should be moved to
 // LayoutBox.
 LayoutUnit LayoutGrid::marginLogicalHeightForChild(
     const LayoutBox& child) const {
   return isHorizontalWritingMode() ? child.marginHeight() : child.marginWidth();
 }
 
+LayoutUnit LayoutGrid::marginLogicalWidthForChild(
+    const LayoutBox& child) const {
+  return isHorizontalWritingMode() ? child.marginWidth() : child.marginHeight();
+}
+
 LayoutUnit LayoutGrid::computeMarginLogicalSizeForChild(
     MarginDirection forDirection,
     const LayoutBox& child) const {
   if (!child.styleRef().hasMargin())
     return LayoutUnit();
 
   bool isRowAxis = forDirection == InlineDirection;
   LayoutUnit marginStart;
   LayoutUnit marginEnd;
   LayoutUnit logicalSize =
@@ skipping 163 matching lines @@
 
 static int synthesizedBaselineFromBorderBox(const LayoutBox& box,
                                             LineDirectionMode direction) {
   return (direction == HorizontalLine ? box.size().height()
                                       : box.size().width())
       .toInt();
 }
 
 // TODO(lajava): This logic is shared by LayoutFlexibleBox, so it might be
 // refactored somehow.
+bool LayoutGrid::isBaselineAlignment(const LayoutBox& child) const {
+  bool isChildInlineFlowAlongRowAxis = !isOrthogonalChild(child);

[svillar, 2016/11/25 14:44:48]

I don't understand this variable name. isParallelChild is not a valid one?

+  ItemPosition align = isChildInlineFlowAlongRowAxis
+                           ? alignSelfForChild(child).position()
+                           : justifySelfForChild(child).position();
+  bool hasAutoMargins = isChildInlineFlowAlongRowAxis
+                            ? hasAutoMarginsInColumnAxis(child)
+                            : hasAutoMarginsInRowAxis(child);
+  return (
+      (align == ItemPositionBaseline || align == ItemPositionLastBaseline) &&
+      !hasAutoMargins);
+}
+
+LayoutUnit LayoutGrid::updateBaselineAlignmentContextIfNeeded(
+    LayoutBox& child,
+    GridSizingData& sizingData) const {
+  if (!isBaselineAlignment(child))
+    return LayoutUnit();
+
+  bool isChildInlineFlowAlongRowAxis = !isOrthogonalChild(child);
+  ItemPosition align = isChildInlineFlowAlongRowAxis
+                           ? alignSelfForChild(child).position()
+                           : justifySelfForChild(child).position();
+  const GridSpan& span = isChildInlineFlowAlongRowAxis
+                             ? cachedGridSpan(child, ForRows)
+                             : cachedGridSpan(child, ForColumns);
+  LayoutUnit ascent = firstLineBoxBaselineForChild(child);
+  LayoutUnit descent = descentBaselineForChild(child, ascent);
+  BaselineContextsMap& baselineContexts =
+      isChildInlineFlowAlongRowAxis ? sizingData.rowAxisAlignmentContext
+                                    : sizingData.colAxisAlignmentContext;
+  BaselineContext* context = nullptr;
+  BaselineContextsMap::AddResult addResult = baselineContexts.add(
+      span.startLine(), std::unique_ptr<BaselineContext>());
+  if (addResult.isNewEntry) {
+    context = new BaselineContext(child, align, ascent, descent);
+    addResult.storedValue->value = wrapUnique(context);
+  } else {
+    context = addResult.storedValue->value.get();
+    context->updateSharedGroup(child, align, ascent, descent);
+  }
+  auto group = context->getSharedGroup(child, align);
+  return group.maxAscent() + group.maxDescent();
+}
+
+LayoutUnit LayoutGrid::firstLineBoxBaselineForChild(
+    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);
+}
+
+LayoutUnit LayoutGrid::descentBaselineForChild(const LayoutBox& child,
+                                               LayoutUnit ascent) const {
+  bool isChildInlineFlowAlongRowAxis = !isOrthogonalChild(child);
+  return isChildInlineFlowAlongRowAxis
+             ? (marginLogicalHeightForChild(child) +
+                LayoutBlock::logicalHeightForChild(child)) -
+                   ascent
+             : (marginLogicalWidthForChild(child) +
+                logicalWidthForChild(child)) -
+                   ascent;
+}
+
+LayoutUnit LayoutGrid::columnAxisBaselineOffsetForChild(
+    const LayoutBox& child,
+    const GridSizingData& sizingData) const {
+  // only parallel items participating in baseline alignment along

[svillar, 2016/11/25 14:44:48]

Nit: capital letter -> Only

+  // the grid's row axis have an offset in the column axis.
+  if (!isInlineBaselineAlignedChild(child))
+    return LayoutUnit();
+
+  const GridSpan& span = cachedGridSpan(child, ForRows);
+  const BaselineContext* context =
+      sizingData.rowAxisAlignmentContext.get(span.startLine());
+  DCHECK(context);
+  const BaselineGroup& group =
+      context->getSharedGroup(child, alignSelfForChild(child).position());
+  // TODO (lajava): We could just return LayoutUnit() if there is only
+  // 1 child in the group.
+  return group.maxAscent() - firstLineBoxBaselineForChild(child);
+}
+
+LayoutUnit LayoutGrid::rowAxisBaselineOffsetForChild(
+    const LayoutBox& child,
+    const GridSizingData& sizingData) const {
+  // only orthogonal items participating in baseline alignment along
+  // the grid's column axis have an offset in the row axis.
+  if (!isBlockBaselineAlignedChild(child))
+    return LayoutUnit();
+
+  const GridSpan& span = cachedGridSpan(child, ForColumns);
+  const BaselineContext* context =
+      sizingData.colAxisAlignmentContext.get(span.startLine());
+  DCHECK(context);
+  const BaselineGroup& group =
+      context->getSharedGroup(child, justifySelfForChild(child).position());
+  // TODO (lajava): We could just return LayoutUnit() if there is only
+  // 1 child in the group.
+  return group.maxAscent() - firstLineBoxBaselineForChild(child);
+}
+
 int LayoutGrid::baselinePosition(FontBaseline,
                                  bool,
                                  LineDirectionMode direction,
                                  LinePositionMode mode) const {
   DCHECK_EQ(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);
 }
 
-bool LayoutGrid::isInlineBaselineAlignedChild(const LayoutBox* child) const {
-  return alignSelfForChild(*child).position() == ItemPositionBaseline &&
-         !isOrthogonalChild(*child) && !hasAutoMarginsInColumnAxis(*child);
+bool LayoutGrid::isInlineBaselineAlignedChild(const LayoutBox& child) const {
+  return !isOrthogonalChild(child) && isBaselineAlignment(child);
+}
+
+bool LayoutGrid::isBlockBaselineAlignedChild(const LayoutBox& child) const {
+  return isOrthogonalChild(child) && isBaselineAlignment(child);
 }
 
 int LayoutGrid::firstLineBoxBaseline() const {
   if (isWritingModeRoot() || m_grid.isEmpty())
     return -1;
   const LayoutBox* baselineChild = nullptr;
   const LayoutBox* firstChild = nullptr;
   bool isBaselineAligned = false;
   // Finding the first grid item in grid order.
   for (size_t column = 0; !isBaselineAligned && column < m_grid[0].size();
        column++) {
     for (size_t index = 0; index < m_grid[0][column].size(); index++) {
       const LayoutBox* child = m_grid[0][column][index];
       DCHECK(!child->isOutOfFlowPositioned());
-      // If an item participates in baseline alignmen, we select such item.
-      if (isInlineBaselineAlignedChild(child)) {
+      // If an item participates in baseline alignment, we select such item.
+      if (isInlineBaselineAlignedChild(*child)) {
         // TODO (lajava): self-baseline and content-baseline alignment
         // still not implemented.
         baselineChild = child;
         isBaselineAligned = true;
         break;
       }
       if (!baselineChild) {
         // Use dom order for items in the same cell.
         if (!firstChild || (m_gridItemsIndexesMap.get(child) <
                             m_gridItemsIndexesMap.get(firstChild)))
@@ skipping 98 matching lines @@
     // Only used in flex layout, otherwise equivalent to 'end'.
     case ItemPositionFlexEnd:
     // Aligns the alignment subject to be flush with the alignment container's
     // 'end' edge (block-end) in the column axis.
     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:
     case ItemPositionNormal:
       break;
   }
 
   ASSERT_NOT_REACHED();
   return GridAxisStart;
 }
 
@@ skipping 57 matching lines @@
     // Only used in flex layout, otherwise equivalent to 'end'.
     case ItemPositionFlexEnd:
     // Aligns the alignment subject to be flush with the alignment container's
     // 'end' edge (inline-end) in the row axis.
     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:
     case ItemPositionNormal:
       break;
   }
 
   ASSERT_NOT_REACHED();
   return GridAxisStart;
 }
 
 LayoutUnit LayoutGrid::columnAxisOffsetForChild(
     const LayoutBox& child,
     GridSizingData& sizingData) const {
   const GridSpan& rowsSpan = cachedGridSpan(child, ForRows);
   size_t childStartLine = rowsSpan.startLine();
   LayoutUnit startOfRow = m_rowPositions[childStartLine];
   LayoutUnit startPosition = startOfRow + marginBeforeForChild(child);
   if (hasAutoMarginsInColumnAxis(child))
     return startPosition;
   GridAxisPosition axisPosition = columnAxisPositionForChild(child);
   switch (axisPosition) {
     case GridAxisStart:
-      return startPosition;
+      return startPosition +
+             columnAxisBaselineOffsetForChild(child, sizingData);
     case GridAxisEnd:
     case GridAxisCenter: {
       size_t childEndLine = rowsSpan.endLine();
       LayoutUnit endOfRow = m_rowPositions[childEndLine];
       // m_rowPositions include distribution offset (because of content
       // alignment) and gutters so we need to subtract them to get the actual
       // end position for a given row (this does not have to be done for the
       // last track as there are no more m_columnPositions after it).
       LayoutUnit trackGap =
           gridGapForDirection(ForRows, sizingData.sizingOperation);
@@ skipping 22 matching lines @@
                                              GridSizingData& sizingData) const {
   const GridSpan& columnsSpan = cachedGridSpan(child, ForColumns);
   size_t childStartLine = columnsSpan.startLine();
   LayoutUnit startOfColumn = m_columnPositions[childStartLine];
   LayoutUnit startPosition = startOfColumn + marginStartForChild(child);
   if (hasAutoMarginsInRowAxis(child))
     return startPosition;
   GridAxisPosition axisPosition = rowAxisPositionForChild(child);
   switch (axisPosition) {
     case GridAxisStart:
-      return startPosition;
+      return startPosition + rowAxisBaselineOffsetForChild(child, sizingData);
     case GridAxisEnd:
     case GridAxisCenter: {
       size_t childEndLine = columnsSpan.endLine();
       LayoutUnit endOfColumn = m_columnPositions[childEndLine];
       // m_columnPositions include distribution offset (because of content
       // alignment) and gutters so we need to subtract them to get the actual
       // end position for a given column (this does not have to be done for the
       // last track as there are no more m_columnPositions after it).
       LayoutUnit trackGap =
           gridGapForDirection(ForColumns, sizingData.sizingOperation);
@@ skipping 197 matching lines @@
   if (!m_gridItemArea.isEmpty())
     GridPainter(*this).paintChildren(paintInfo, paintOffset);
 }
 
 bool LayoutGrid::cachedHasDefiniteLogicalHeight() const {
   SECURITY_DCHECK(m_hasDefiniteLogicalHeight);
   return m_hasDefiniteLogicalHeight.value();
 }
 
 }  // namespace blink