[css-grid] Implementation of Baseline Self-Alignment

third_party/WebKit/Source/core/layout/LayoutGrid.cpp

Index: third_party/WebKit/Source/core/layout/LayoutGrid.cpp
diff --git a/third_party/WebKit/Source/core/layout/LayoutGrid.cpp b/third_party/WebKit/Source/core/layout/LayoutGrid.cpp
index eef54fb123031d0c59c34df4a23d138abee928e3..06a39258c64d34e39c1a7be755f03179f4f4f807 100644
--- a/third_party/WebKit/Source/core/layout/LayoutGrid.cpp
+++ b/third_party/WebKit/Source/core/layout/LayoutGrid.cpp
@@ -33,6 +33,7 @@
 #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>
@@ -645,6 +646,12 @@ void LayoutGrid::layoutBlock(bool relayoutChildren) {
     GridSizingData sizingData(numTracks(ForColumns, m_grid),
                               numTracks(ForRows, m_grid), m_grid);
 
+    computeBaselineAlignmentContext(sizingData);
+    if (baselineMayAffectIntrinsicWidth()) {
+      setPreferredLogicalWidthsDirty(MarkOnlyThis);
+      updateLogicalWidth();

[svillar, 2017/01/23 10:41:58]

It does not seem correct to do this twice. Why cannot we compute this before
calling updateLogicalWidth()?

[jfernandez, 2017/02/02 15:49:22]

As agreed, this is correct and the best approach, so far. I admit that a more
general approach to deal with intrinsic size computation requiring layouts might
be implemented, but that's a complex topic that needs further analysis.

+    }
+
     // 1- First, the track sizing algorithm is used to resolve the sizes of the
     // grid columns.
     // At this point the logical width is always definite as the above call to
@@ -1324,6 +1331,12 @@ LayoutUnit LayoutGrid::logicalHeightForChild(LayoutBox& child,
     child.clearOverrideLogicalContentHeight();
 
   child.layoutIfNeeded();
+  GridAxis baselineAxis =
+      isOrthogonalChild(child) ? GridRowAxis : GridColumnAxis;
+  if (isBaselineAlignmentForChild(child, baselineAxis)) {
+    auto& group = getBaselineGroupForChild(child, sizingData, baselineAxis);
+    return group.maxAscent() + group.maxDescent();
+  }
   return child.logicalHeight() + child.marginLogicalHeight();
 }
 
@@ -1427,6 +1440,11 @@ LayoutUnit LayoutGrid::minContentForChild(LayoutBox& child,
   if (direction == ForColumns &&
       sizingData.sizingOperation == IntrinsicSizeComputation) {
     DCHECK(isOrthogonalChild(child));
+    if (isBaselineAlignmentForChild(child, GridRowAxis) &&
+        isBaselineContextComputed(GridRowAxis)) {
+      auto& group = getBaselineGroupForChild(child, sizingData, GridRowAxis);
+      return group.maxAscent() + group.maxDescent();
+    }
     return child.logicalHeight() + child.marginLogicalHeight();
   }
 
@@ -3088,8 +3106,6 @@ static int synthesizedBaselineFromBorderBox(const LayoutBox& box,
       .toInt();
 }
 
-// TODO(lajava): This logic is shared by LayoutFlexibleBox, so it might be
-// refactored somehow.
 int LayoutGrid::baselinePosition(FontBaseline,
                                  bool,
                                  LineDirectionMode direction,
@@ -3103,11 +3119,6 @@ int LayoutGrid::baselinePosition(FontBaseline,
   return baseline + beforeMarginInLineDirection(direction);
 }
 
-bool LayoutGrid::isInlineBaselineAlignedChild(const LayoutBox* child) const {
-  return alignSelfForChild(*child).position() == ItemPositionBaseline &&
-         !isOrthogonalChild(*child) && !hasAutoMarginsInColumnAxis(*child);
-}
-
 int LayoutGrid::firstLineBoxBaseline() const {
   if (isWritingModeRoot() || !m_grid.hasGridItems())
     return -1;
@@ -3120,8 +3131,8 @@ int LayoutGrid::firstLineBoxBaseline() const {
     for (size_t index = 0; index < m_grid.cell(0, column).size(); index++) {
       const LayoutBox* child = m_grid.cell(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 (isBaselineAlignmentForChild(*child)) {
         // TODO (lajava): self-baseline and content-baseline alignment
         // still not implemented.
         baselineChild = child;
@@ -3171,6 +3182,178 @@ int LayoutGrid::inlineBlockBaseline(LineDirectionMode direction) const {
   return synthesizedBaselineFromContentBox(*this, direction) + marginHeight;
 }
 
+bool LayoutGrid::isHorizontalGridAxis(GridAxis axis) const {
+  return axis == GridRowAxis ? isHorizontalWritingMode()
+                             : !isHorizontalWritingMode();
+}
+
+bool LayoutGrid::isParallelToBlockAxisForChild(const LayoutBox& child,
+                                               GridAxis axis) const {
+  return axis == GridColumnAxis ? !isOrthogonalChild(child)
+                                : isOrthogonalChild(child);
+}
+
+bool LayoutGrid::isDescentBaselineForChild(const LayoutBox& child,
+                                           GridAxis baselineAxis) const {
+  return isHorizontalGridAxis(baselineAxis) &&
+         !styleRef().isFlippedBlocksWritingMode();
+}
+
+bool LayoutGrid::isBaselineAlignmentForChild(const LayoutBox& child,
+                                             GridAxis baselineAxis) const {
+  bool isColumnAxisBaseline = baselineAxis == GridColumnAxis;
+  ItemPosition align = isColumnAxisBaseline
+                           ? alignSelfForChild(child).position()
+                           : justifySelfForChild(child).position();
+  bool hasAutoMargins = isColumnAxisBaseline ? hasAutoMarginsInColumnAxis(child)
+                                             : hasAutoMarginsInRowAxis(child);
+  return isBaselinePosition(align) && !hasAutoMargins;
+}
+
+const BaselineGroup& LayoutGrid::getBaselineGroupForChild(
+    const LayoutBox& child,
+    const GridSizingData& sizingData,
+    GridAxis baselineAxis) const {
+  DCHECK(isBaselineAlignmentForChild(child, baselineAxis));
+  auto& grid = sizingData.grid();
+  bool isColumnAxisBaseline = baselineAxis == GridColumnAxis;
+  bool isRowAxisContext = isColumnAxisBaseline;
+  const auto& span = isRowAxisContext ? grid.gridItemSpan(child, ForRows)
+                                      : grid.gridItemSpan(child, ForColumns);
+  auto& contextsMap =
+      isRowAxisContext ? m_rowAxisAlignmentContext : m_colAxisAlignmentContext;
+  auto* context = contextsMap.get(span.startLine());
+  DCHECK(context);
+  ItemPosition align = isColumnAxisBaseline
+                           ? alignSelfForChild(child).position()
+                           : justifySelfForChild(child).position();
+  return context->getSharedGroup(child, align);
+}
+
+LayoutUnit LayoutGrid::marginOverForChild(const LayoutBox& child,
+                                          GridAxis axis) const {
+  return isHorizontalGridAxis(axis) ? child.marginRight() : child.marginTop();
+}
+
+LayoutUnit LayoutGrid::logicalAscentForChild(const LayoutBox& child,
+                                             GridAxis baselineAxis) const {
+  LayoutUnit ascent = ascentForChild(child, baselineAxis);
+  return isDescentBaselineForChild(child, baselineAxis)
+             ? descentForChild(child, ascent, baselineAxis)
+             : ascent;
+}
+
+LayoutUnit LayoutGrid::ascentForChild(const LayoutBox& child,
+                                      GridAxis baselineAxis) const {
+  int baseline = isParallelToBlockAxisForChild(child, baselineAxis)
+                     ? child.firstLineBoxBaseline()
+                     : -1;
+  // We take border-box's bottom if no valid baseline.
+  if (baseline == -1) {
+    baseline = isHorizontalGridAxis(baselineAxis)
+                   ? child.size().width().toInt()
+                   : child.size().height().toInt();
+  }
+  return LayoutUnit(baseline) + marginOverForChild(child, baselineAxis);
+}
+
+LayoutUnit LayoutGrid::descentForChild(const LayoutBox& child,
+                                       LayoutUnit ascent,
+                                       GridAxis baselineAxis) const {
+  if (isParallelToBlockAxisForChild(child, baselineAxis))
+    return child.marginLogicalHeight() + child.logicalHeight() - ascent;
+  return child.marginLogicalWidth() + child.logicalWidth() - ascent;
+}
+
+bool LayoutGrid::isBaselineContextComputed(GridAxis baselineAxis) const {
+  return baselineAxis == GridColumnAxis ? !m_rowAxisAlignmentContext.isEmpty()
+                                        : !m_colAxisAlignmentContext.isEmpty();
+}
+
+bool LayoutGrid::baselineMayAffectIntrinsicWidth() const {
+  for (const auto& context : m_colAxisAlignmentContext) {
+    for (const auto& group : context.value->sharedGroups()) {
+      if (group.size() > 1)
+        return true;
+    }
+  }
+  return false;
+}
+
+void LayoutGrid::computeBaselineAlignmentContext(GridSizingData& sizingData) {
+  for (auto* child = firstInFlowChildBox(); child;
+       child = child->nextInFlowSiblingBox()) {
+    updateBaselineAlignmentContextIfNeeded(*child, sizingData, GridRowAxis);
+    updateBaselineAlignmentContextIfNeeded(*child, sizingData, GridColumnAxis);
+  }
+}
+
+void LayoutGrid::updateBaselineAlignmentContextIfNeeded(
+    LayoutBox& child,
+    GridSizingData& sizingData,
+    GridAxis baselineAxis) {
+  DCHECK_EQ(sizingData.sizingOperation, TrackSizing);
+  if (!isBaselineAlignmentForChild(child, baselineAxis))
+    return;
+
+  child.layoutIfNeeded();
+
+  // Determine Ascent and Descent values of this child with respect to
+  // its grid container.
+  LayoutUnit ascent = ascentForChild(child, baselineAxis);
+  LayoutUnit descent = descentForChild(child, ascent, baselineAxis);
+  if (isDescentBaselineForChild(child, baselineAxis)) {
+    LayoutUnit temp(ascent);
+    ascent = descent;
+    descent = temp;

[svillar, 2017/01/23 10:41:58]

std::swap

[jfernandez, 2017/02/02 15:49:22]

Done.

+  }
+
+  // Looking up for a shared alignment context perpendicular to the
+  // baseline axis.
+  auto& grid = sizingData.grid();
+  bool isColumnAxisBaseline = baselineAxis == GridColumnAxis;
+  bool isRowAxisContext = isColumnAxisBaseline;
+  const auto& span = isRowAxisContext ? grid.gridItemSpan(child, ForRows)
+                                      : grid.gridItemSpan(child, ForColumns);
+  auto& contextsMap =
+      isRowAxisContext ? m_rowAxisAlignmentContext : m_colAxisAlignmentContext;
+  auto addResult = contextsMap.add(span.startLine(), nullptr);
+
+  // Looking for a compatible baseline-sharing group.
+  ItemPosition align = isColumnAxisBaseline
+                           ? alignSelfForChild(child).position()
+                           : justifySelfForChild(child).position();
+  if (addResult.isNewEntry) {
+    addResult.storedValue->value =
+        WTF::makeUnique<BaselineContext>(child, align, ascent, descent);
+  } else {
+    auto* context = addResult.storedValue->value.get();
+    context->updateSharedGroup(child, align, ascent, descent);
+  }
+}
+
+LayoutUnit LayoutGrid::columnAxisBaselineOffsetForChild(
+    const LayoutBox& child,
+    const GridSizingData& sizingData) const {
+  if (!isBaselineAlignmentForChild(child, GridColumnAxis))
+    return LayoutUnit();
+  auto& group = getBaselineGroupForChild(child, sizingData, GridColumnAxis);
+  if (group.size() > 1)
+    return group.maxAscent() - logicalAscentForChild(child, GridColumnAxis);
+  return LayoutUnit();
+}
+
+LayoutUnit LayoutGrid::rowAxisBaselineOffsetForChild(
+    const LayoutBox& child,
+    const GridSizingData& sizingData) const {
+  if (!isBaselineAlignmentForChild(child, GridRowAxis))
+    return LayoutUnit();
+  auto& group = getBaselineGroupForChild(child, sizingData, GridRowAxis);
+  if (group.size() > 1)
+    return group.maxAscent() - logicalAscentForChild(child, GridRowAxis);
+  return LayoutUnit();
+}
+
 GridAxisPosition LayoutGrid::columnAxisPositionForChild(
     const LayoutBox& child) const {
   bool hasSameWritingMode =
@@ -3240,8 +3423,6 @@ GridAxisPosition LayoutGrid::columnAxisPositionForChild(
       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:
@@ -3319,8 +3500,6 @@ GridAxisPosition LayoutGrid::rowAxisPositionForChild(
       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:
@@ -3343,7 +3522,8 @@ LayoutUnit LayoutGrid::columnAxisOffsetForChild(
   GridAxisPosition axisPosition = columnAxisPositionForChild(child);
   switch (axisPosition) {
     case GridAxisStart:
-      return startPosition;
+      return startPosition +
+             columnAxisBaselineOffsetForChild(child, sizingData);
     case GridAxisEnd:
     case GridAxisCenter: {
       size_t childEndLine = rowsSpan.endLine();
@@ -3387,7 +3567,7 @@ LayoutUnit LayoutGrid::rowAxisOffsetForChild(const LayoutBox& child,
   GridAxisPosition axisPosition = rowAxisPositionForChild(child);
   switch (axisPosition) {
     case GridAxisStart:
-      return startPosition;
+      return startPosition + rowAxisBaselineOffsetForChild(child, sizingData);
     case GridAxisEnd:
     case GridAxisCenter: {
       size_t childEndLine = columnsSpan.endLine();