[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
  *    documentation and/or other materials provided with the distribution.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 #include "core/layout/LayoutGrid.h"
 
+#include <algorithm>
+#include <memory>
 #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 {
 
 struct ContentAlignmentData {
   STACK_ALLOCATED();
 
  public:
   ContentAlignmentData(){};
   ContentAlignmentData(LayoutUnit position, LayoutUnit distribution)
       : positionOffset(position), distributionOffset(distribution) {}
@@ skipping 111 matching lines @@
                                TrackSizing, availableSpace, freeSpace);
   m_trackSizingAlgorithm.run();
 
 #if DCHECK_IS_ON()
   DCHECK(m_trackSizingAlgorithm.tracksAreWiderThanMinTrackBreadth());
 #endif
 }
 
 void LayoutGrid::repeatTracksSizingIfNeeded(LayoutUnit availableSpaceForColumns,
                                             LayoutUnit availableSpaceForRows) {
+  // 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.
-  // 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
+  bool hasAnyOrthogonal =
+      m_trackSizingAlgorithm.grid().hasAnyOrthogonalGridItem();

[svillar, 2017/03/24 10:52:05]

Nit: no need for a variable here, we just use this once.

[jfernandez, 2017/03/24 14:15:18]

Well, I admit it's not strictly necessary but IMHO it helps to
place the comment and to define the multiple conditional clause 
below.

+
+  bool intrinsicWidthMayHaveChanged =
+      baselineAffectIntrinsicWidth || hasAnyOrthogonal;
+  if (!intrinsicWidthMayHaveChanged && !baselineAffectIntrinsicHeight)
+    return;
+
+  // TODO (lajava): these are just some 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 (m_grid.hasAnyOrthogonalGridItem()) {
-    computeTrackSizesForDefiniteSize(ForColumns, availableSpaceForColumns);
-    computeTrackSizesForDefiniteSize(ForRows, availableSpaceForRows);
+  if (!intrinsicWidthMayHaveChanged && !baselineAffectIntrinsicHeight)
+    return;
+
+  // TODO (lajava): Whenever the min-content contribution of a grid item changes
+  // we may need to update the grid container's intrinsic width. The new
+  // intrinsic width may also affect the extra Track Sizing algorithm cycles we
+  // are about to execute.
+  // https://crbug.com/704713
+  // https://github.com/w3c/csswg-drafts/issues/1039
+
+  // Hence we need to repeat computeUsedBreadthOfGridTracks for both, columns
+  // and rows, to determine the final values.
+  computeTrackSizesForDefiniteSize(ForColumns, availableSpaceForColumns);
+  computeTrackSizesForDefiniteSize(ForRows, availableSpaceForRows);
+
+  if (baselineAffectIntrinsicHeight) {
+    setLogicalHeight(computeTrackBasedLogicalHeight() +
+                     borderAndPaddingLogicalHeight() +
+                     scrollbarLogicalHeight());
   }
 }
 
 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 46 matching lines @@
     LayoutUnit oldClientAfterEdge = clientLogicalBottom();
     updateLogicalHeight();
 
     // Once grid's indefinite height is resolved, we can compute the
     // available free space for Content Alignment.
     if (!cachedHasDefiniteLogicalHeight()) {
       m_trackSizingAlgorithm.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
+    // an incorrect computation of their shared context's baseline.
+    computeBaselineAlignmentContext();

[svillar, 2017/03/24 10:52:05]

I have just realized that we do this before applying the alignment stuff. What
happens in those cases? Can't alignment modify the grid in such a way that this
computation becomes wrong?

[jfernandez, 2017/03/24 14:15:18]

Yes, indeed. It's a really good point and I admit I haven't analyzed
it carefully. However, my impression when I cooked the patch was that Content
Distribution does not affect to the Baseline-Self alignment. The reason is that
Content Distribution affects to the
whole track, either its position or its size, and Baseline-Self
alignment operates on the items sharing an alignment context, either
a row or column. Hence, the final baseline offsets will be relative
to the position and size of the tracks that conforms the shared
alignment context.

I played with some tests and I haven't see any wrong behavior, so
far. I don't think we need an exhaustive set of test cases now, since there may
be other combinations with baseline that might be
tested as well. I think we can progressively improve the testing
coverage for Baseline-Self alignment and fixing the bugs that may appear, if
any.

+
     // 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(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 1301 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.
         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)))
@@ skipping 29 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;
+}

[svillar, 2017/03/24 10:52:05]

I wonder if these four utility methods could be part of the baseline class added
in other file instead of being here. Haven't examined all the dependencies in
detail so feel free to ignore this if it does not make much sense.

[jfernandez, 2017/03/24 14:15:18]

Yeah, I wondered the same and actually tried to move them to the
Baseline class. However, some of these methods have dependencies
with the LayoutGrid object, so while not impossible, it's not a trivial
refactoring.  

I can think of it in a follow up patch.

+
+const BaselineGroup& LayoutGrid::getBaselineGroupForChild(
+    const LayoutBox& child,
+    GridAxis baselineAxis) const {
+  DCHECK(isBaselineAlignmentForChild(child, baselineAxis));
+  auto& grid = m_trackSizingAlgorithm.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.at(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();
+}
+

[svillar, 2017/03/24 10:52:05]

Same question here for the above 5 methods. Do you think it might make sense to
generalize it so they could be part of the baseline class? I know we have
GridAxis there, but I wonder if that could be generalized to inline/block axis
or perhaps they're different, dunno.

[jfernandez, 2017/03/24 14:15:18]

Already explained before, but I'd definitively like to do it, in a 
different patch, to avoid complicate this one even more.

+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() {
+  for (auto* child = firstInFlowChildBox(); child;
+       child = child->nextInFlowSiblingBox()) {
+    updateBaselineAlignmentContextIfNeeded(*child, GridRowAxis);
+    updateBaselineAlignmentContextIfNeeded(*child, GridColumnAxis);
+  }
+}
+
+void LayoutGrid::updateBaselineAlignmentContextIfNeeded(LayoutBox& child,
+                                                        GridAxis baselineAxis) {
+  // DCHECK(m_trackSizingAlgorithm.isTrackSizingOperation());

[svillar, 2017/03/24 10:52:05]

Remove this check if it does not apply.

[jfernandez, 2017/03/24 14:15:18]

Well, I'd like to have this check. However, unfortunately the new tracks sizing
algorithm initialize the sizing phase during the 'setup' method. This is called
as art of the sizing logic, later on during the layout logic. 

It's a PITA we can't figure out before whether we are doing an intrinsic size
computation or a regular layout. The method in question shouldn't be called as
part of an intrinsic size computation, because it performs a layout.

My recommendation would be to remove the check but add a TODO to
revisit the topic in a future patch.

+  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 = m_trackSizingAlgorithm.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.insert(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 {
+  if (!isBaselineAlignmentForChild(child, GridColumnAxis))
+    return LayoutUnit();
+  auto& group = getBaselineGroupForChild(child, GridColumnAxis);
+  if (group.size() > 1)
+    return group.maxAscent() - logicalAscentForChild(child, GridColumnAxis);
+  return LayoutUnit();
+}
+
+LayoutUnit LayoutGrid::rowAxisBaselineOffsetForChild(
+    const LayoutBox& child) const {
+  if (!isBaselineAlignmentForChild(child, GridRowAxis))
+    return LayoutUnit();
+  auto& group = getBaselineGroupForChild(child, 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) const {
   const GridSpan& rowsSpan =
       m_trackSizingAlgorithm.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);
     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, TrackSizing);
       if (childEndLine < m_rowPositions.size() - 1) {
@@ skipping 21 matching lines @@
   const GridSpan& columnsSpan =
       m_trackSizingAlgorithm.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);
     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, TrackSizing);
       if (childEndLine < m_columnPositions.size() - 1) {
@@ skipping 213 matching lines @@
   if (direction == ForRows)
     return grid.numTracks(ForRows);
 
   return grid.numTracks(ForRows)
              ? grid.numTracks(ForColumns)
              : GridPositionsResolver::explicitGridColumnCount(
                    styleRef(), grid.autoRepeatTracks(ForColumns));
 }
 
 }  // namespace blink