[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 15 matching lines @@
 #include "core/layout/LayoutGrid.h"
 
 #include "core/frame/UseCounter.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 530 matching lines @@
                                  growthLimits);
   ASSERT(tracksAreWiderThanMinTrackBreadth(direction, sizingData));
   sizingData.nextState();
 }
 
 void LayoutGrid::repeatTracksSizingIfNeeded(GridSizingData& sizingData,
                                             LayoutUnit availableSpaceForColumns,
                                             LayoutUnit availableSpaceForRows) {
   DCHECK(sizingData.sizingState > GridSizingData::RowSizingFirstIteration);
 
+  // Baseline alignment may change item's intrinsic size, hence changing its
+  // min-content contribution.
+  // https://drafts.csswg.org/css-align-3/#baseline-align-content
+  // https://drafts.csswg.org/css-align-3/#baseline-align-self
+  bool baselineAffectIntrinsicWidth = baselineMayAffectIntrinsicWidth();
+  bool baselineAffectIntrinsicHeight = baselineMayAffectIntrinsicHeight();
+
   // In orthogonal flow cases column track's size is determined by using the
   // computed row track's size, which it was estimated during the first cycle of
   // the sizing algorithm.
+  bool intrinsicSizeMayHaveChanged =
+      baselineAffectIntrinsicWidth || baselineAffectIntrinsicHeight ||
+      sizingData.grid().hasAnyOrthogonalGridItem();
+

[svillar, 2017/02/09 13:10:09]

Can't we just early return here if !intrinsicSizeMayHaveChanged ?

I guess we don't need to compute anything related to baselines in those cases.

[jfernandez, 2017/02/09 14:16:03]

Acknowledged.

+  // Compute again the intrinsic size if baseline changed item's min-content
+  // contribution.
+  // TODO (lajava): Should we do the same because if orthogonal items ? Perhaps
+  // after executing again the track sizing algorithm ?

[svillar, 2017/02/09 13:10:09]

I think we can take advantage of this change and do it also for orthogonal
items.

[jfernandez, 2017/02/09 14:16:03]

Acknowledged.

+  if (baselineAffectIntrinsicWidth) {
+    setPreferredLogicalWidthsDirty(MarkOnlyThis);

[svillar, 2017/02/09 13:10:09]

Not sure if MarkOnlyThis is enough for orthogonal items.

[jfernandez, 2017/02/09 14:16:03]

Umm, I think we must prevent infinite-iterations, so I guess just adjust the
grid container's intrinsic size should be enough. However, I'll try t verify
there is no unexpected behaviors.

+    updateLogicalWidth();
+    availableSpaceForColumns = availableLogicalWidth();
+  }
+
   // Hence we need to repeat computeUsedBreadthOfGridTracks for both, columns
   // and rows, to determine the final values.
   // TODO (lajava): orthogonal flows is just one of the cases which may require
   // a new cycle of the sizing algorithm; there may be more. In addition, not
   // all the cases with orthogonal flows require this extra cycle; we need a
   // more specific condition to detect whether child's min-content contribution
   // has changed or not.
-  if (sizingData.grid().hasAnyOrthogonalGridItem()) {
+  if (intrinsicSizeMayHaveChanged) {
     computeTrackSizesForDefiniteSize(ForColumns, sizingData,
                                      availableSpaceForColumns);
     computeTrackSizesForDefiniteSize(ForRows, sizingData,
                                      availableSpaceForRows);
   }
+
+  if (baselineAffectIntrinsicHeight) {
+    LayoutUnit trackBasedLogicalHeight =
+        computeTrackBasedLogicalHeight(sizingData) +
+        borderAndPaddingLogicalHeight() + scrollbarLogicalHeight();
+    setLogicalHeight(trackBasedLogicalHeight);

[svillar, 2017/02/09 13:10:09]

Perhaps you could omit the trackBasedLogicalHeight variable and directly call
setLogicalHeight as the coding style is forcing you to put everything in
multiple lines anyway.

[jfernandez, 2017/02/09 14:16:03]

Acknowledged.

+  }
 }
 
 void LayoutGrid::layoutBlock(bool relayoutChildren) {
   ASSERT(needsLayout());
 
   // We cannot perform a simplifiedLayout() on a dirty grid that
   // has positioned items to be laid out.
   if (!relayoutChildren &&
       (!m_grid.needsItemsPlacement() || !posChildNeedsLayout()) &&
       simplifiedLayout())
     return;
 
+  m_rowAxisAlignmentContext.clear();
+  m_colAxisAlignmentContext.clear();
+
   SubtreeLayoutScope layoutScope(*this);
 
   {
     // LayoutState needs this deliberate scope to pop before updating scroll
     // information (which may trigger relayout).
     LayoutState state(*this);
 
     LayoutSize previousSize = size();
 
     // We need to clear both own and containingBlock override sizes to
@@ skipping 50 matching lines @@
     setLogicalHeight(trackBasedLogicalHeight);
 
     LayoutUnit oldClientAfterEdge = clientLogicalBottom();
     updateLogicalHeight();
 
     // Once grid's indefinite height is resolved, we can compute the
     // available free space for Content Alignment.
     if (!cachedHasDefiniteLogicalHeight())
       sizingData.freeSpace(ForRows) = logicalHeight() - trackBasedLogicalHeight;
 
+    // TODO (lajava): We need to compute baselines after step 2 so
+    // items with a relative size (percentages) can resolve it before
+    // determining its baseline. However, we only set item's grid area
+    // (via override sizes) as part of the content-sized tracks sizing
+    // logic. Hence, items located at fixed or flexible tracks can't
+    // resolve correctly their size at this stage, which may lead to
+    // determining incorrect their shared context's baseline.
+    computeBaselineAlignmentContext(sizingData);

[svillar, 2017/02/09 13:10:09]

Not sure why you insert the computation in the middle of the track sizing
algorithm. Note that the first track might be a flexible sized track which is
not yet resolved.

I believe we should move it out from here (also related the track sizing
algorithm is not outside of LayoutGrid).

[jfernandez, 2017/02/09 14:16:03]

We must do it here to so that when repeating the track sizing algo, for columns
and rows, content-sized tracks take the baseline offset into account. 

[svillar, 2017/02/13 15:18:46]

Sorry about this. Yes it's propertly placed. I was cheated by the comment I
think you really need to simplify it and to correct it because it's wrong. First
this is not done after the step 2, this is done after the whole algorithm was
run. Secondly you mention stuff about content sized tracks not resolved. That's
wrong, they're already resolved.

[jfernandez, 2017/02/13 23:32:37]

I meant step 2 as described here:

https://drafts.csswg.org/css-grid/#algo-overview
What I mean is that items's size as percentage are not resolved
yet since we haven't set yet their override size. We do that
later, as part of the layoutGridItems logic. However, for 
content-sized tracks, we actually set the items' override size and
perform the layout. 

So, in case of fixed tracks we can't, at this point, compute 
the baseline offsets accurately.  

+
     // 3- If the min-content contribution of any grid items have changed based
     // on the row sizes calculated in step 2, steps 1 and 2 are repeated with
     // the new min-content contribution (once only).
     repeatTracksSizingIfNeeded(sizingData, availableSpaceForColumns,
                                contentLogicalHeight());
 
     // Grid container should have the minimum height of a line if it's editable.
     // That doesn't affect track sizing though.
     if (hasLineIfEmpty())
       setLogicalHeight(
@@ skipping 623 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();
+  GridAxis baselineAxis =
+      isOrthogonalChild(child) ? GridRowAxis : GridColumnAxis;
+  if (isBaselineAlignmentForChild(child, baselineAxis) &&
+      isBaselineContextComputed(baselineAxis)) {
+    auto& group = getBaselineGroupForChild(child, sizingData, baselineAxis);
+    return group.maxAscent() + group.maxDescent();
+  }
   return child.logicalHeight() + child.marginLogicalHeight();
 }
 
 GridTrackSizingDirection LayoutGrid::flowAwareDirectionForChild(
     const LayoutBox& child,
     GridTrackSizingDirection direction) const {
   return !isOrthogonalChild(child)
              ? direction
              : (direction == ForColumns ? ForRows : ForColumns);
 }
@@ skipping 83 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));
+    if (isBaselineAlignmentForChild(child, GridRowAxis) &&
+        isBaselineContextComputed(GridRowAxis)) {
+      auto& group = getBaselineGroupForChild(child, sizingData, GridRowAxis);
+      return group.maxAscent() + group.maxDescent();
+    }
     return child.logicalHeight() + child.marginLogicalHeight();
   }
 
   if (updateOverrideContainingBlockContentSizeForChild(
           child, childInlineDirection, sizingData))
     child.setNeedsLayout(LayoutInvalidationReason::GridChanged);
   return logicalHeightForChild(child, sizingData);
 }
 
 DISABLE_CFI_PERF
@@ skipping 1642 matching lines @@
       .toInt();
 }
 
 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.
 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);
-}
-
 int LayoutGrid::firstLineBoxBaseline() const {
   if (isWritingModeRoot() || !m_grid.hasGridItems())
     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.numTracks(ForColumns); column++) {
     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.

[svillar, 2017/02/09 13:10:09]

Time to remove this comment?

[jfernandez, 2017/02/09 14:16:03]

Umm, I don't think we can do it now. We must implement a new logic once the
self-baseline and content-baseline logic finally landed. Hence, this TODO may
help us to recall.

[svillar, 2017/02/13 15:18:46]

Acknowledged.

         baselineChild = child;
         isBaselineAligned = true;
         break;
       }
       if (!baselineChild) {
         // Use dom order for items in the same cell.
         if (!firstChild || (m_grid.gridItemPaintOrder(*child) <
                             m_grid.gridItemPaintOrder(*firstChild)))
           firstChild = child;
       }
@@ skipping 27 matching lines @@
 int LayoutGrid::inlineBlockBaseline(LineDirectionMode direction) const {
   int baseline = firstLineBoxBaseline();
   if (baseline != -1)
     return baseline;
 
   int marginHeight =
       (direction == HorizontalLine ? marginTop() : marginRight()).toInt();
   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 {
+  if (!styleRef().logicalWidth().isIntrinsicOrAuto())
+    return false;
+  for (const auto& context : m_colAxisAlignmentContext) {
+    for (const auto& group : context.value->sharedGroups()) {
+      if (group.size() > 1)
+        return true;
+    }
+  }
+  return false;
+}
+
+bool LayoutGrid::baselineMayAffectIntrinsicHeight() const {
+  if (!styleRef().logicalHeight().isIntrinsicOrAuto())
+    return false;
+  for (const auto& context : m_rowAxisAlignmentContext) {
+    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))
+    std::swap(ascent, descent);
+
+  // 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 =
       child.styleRef().getWritingMode() == styleRef().getWritingMode();
   bool childIsLTR = child.styleRef().isLeftToRightDirection();
 
   switch (alignSelfForChild(child).position()) {
     case ItemPositionSelfStart:
       // TODO (lajava): Should we implement this logic in a generic utility
       // function?
@@ skipping 49 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 = sizingData.grid().gridItemSpan(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);

[svillar, 2017/02/09 13:10:09]

Maybe this is an stupid question, but why just on start?

[jfernandez, 2017/02/09 14:16:03]

because 'baseline' value is managed as 'start', in terms of
figuring out the GridAxisPosition. See columnAxisPositionForChild
for details.

The baseline offset is computed to be added to the start position.

     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 23 matching lines @@
   const GridSpan& columnsSpan =
       sizingData.grid().gridItemSpan(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 216 matching lines @@
   if (direction == ForRows)
     return grid.numTracks(ForRows);
 
   return grid.numTracks(ForRows)
              ? grid.numTracks(ForColumns)
              : GridPositionsResolver::explicitGridColumnCount(
                    styleRef(), grid.autoRepeatTracks(ForColumns));
 }
 
 }  // namespace blink