[css-anchor-position-1] Implement position-area in CSS grids

https://bugs.webkit.org/show_bug.cgi?id=290075
rdar://147452098

Reviewed by Alan Baradlay.

Integrates grid-area handling and grid container static posititions with
position-area calculations in PositionedLayoutConstraints, and updates
callers of containingBlockLogical*ForPositioned to use this full logic.

Cosmetic fixes:
* Clarify what the LogicalBoxAxis argument to the constructor represents.
* Update some comments and add section markers.
* Rename computeAnchorGeometry for consistency with other methods.
* Organize static position computation under a single primary method.
* Reorganize data members of PositionedLayoutConstraints into 3 sections:
  1. Data about the box and container.
  2. Containing block geometry.
  3. Box geometry properties.
  because the previous split about data mutability no longer is accurate.

* LayoutTests/TestExpectations:
* LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-area-in-grid-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-area-in-grid.html:
* Source/WebCore/rendering/PositionedLayoutConstraints.cpp:
(WebCore::PositionedLayoutConstraints::PositionedLayoutConstraints):
(WebCore::PositionedLayoutConstraints::captureInsets):
(WebCore::PositionedLayoutConstraints::captureGridArea):
(WebCore::PositionedLayoutConstraints::captureAnchorGeometry):
(WebCore::PositionedLayoutConstraints::computeStaticPosition):
(WebCore::PositionedLayoutConstraints::computeInlineStaticDistance):
(WebCore::PositionedLayoutConstraints::computeBlockStaticDistance):
(WebCore::PositionedLayoutConstraints::computeAnchorGeometry): Deleted.
* Source/WebCore/rendering/PositionedLayoutConstraints.h:
* Source/WebCore/rendering/RenderBox.cpp:
(WebCore::RenderBox::computeReplacedLogicalWidthUsing const):
(WebCore::RenderBox::computeReplacedLogicalHeightUsing const):
(WebCore::RenderBox::availableLogicalHeightUsing const):
(WebCore::RenderBox::containingBlockLogicalWidthForPositioned const):
(WebCore::RenderBox::containingBlockLogicalHeightForPositioned const):
* Source/WebCore/rendering/RenderBox.h:
* Source/WebCore/rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutPositionedObject):
(WebCore::RenderGrid::gridAreaColumnRangeForOutOfFlow const):
(WebCore::RenderGrid::gridAreaPositionForInFlowGridItem const):
(WebCore::RenderGrid::gridAreaPositionForGridItem const):
(WebCore::RenderGrid::logicalOffsetForOutOfFlowGridItem const): Deleted.
(WebCore::RenderGrid::gridAreaPositionForOutOfFlowGridItem const): Deleted.
* Source/WebCore/rendering/RenderGrid.h:

Canonical link: https://commits.webkit.org/293946@main

Author: fantasai

LayoutTests/TestExpectations

@@ -1725,20 +1725,14 @@ imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-align-
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002.html [ ImageOnlyFailure ]
-imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002.html [ ImageOnlyFailure ]
-imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004.html [ ImageOnlyFailure ]
-imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001.html [ ImageOnlyFailure ]
-imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-004.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004.html [ ImageOnlyFailure ]
-imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-001.html [ ImageOnlyFailure ]
-imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-010.html [ Pass Failure ]

LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-area-in-grid-expected.txt

@@ -1,4 +1,4 @@
 
-FAIL Offsets for position-area: span-bottom span-left and insets: {"left":"auto","right":"auto","top":"auto","bottom":"auto"} assert_equals: Check expected offsetTop expected 150 but got 100
-FAIL Offsets for position-area: span-bottom span-left and insets: {"left":"10px","right":"10px","top":"10px","bottom":"10px"} assert_equals: Check expected offsetTop expected 160 but got 260
+PASS Offsets for position-area: span-bottom span-left and insets: {"left":"auto","right":"auto","top":"auto","bottom":"auto"}
+PASS Offsets for position-area: span-bottom span-left and insets: {"left":"10px","right":"10px","top":"10px","bottom":"10px"}
 

LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/position-area-in-grid.html

@@ -56,6 +56,7 @@
     position: relative;
     width: 400px;
     height: 400px;
+    outline: 1px solid;
   }
 
   #anchor {
@@ -65,6 +66,7 @@
     width: 150px;
     height: 75px;
     anchor-name: --anchor;
+    background: blue;
   }
 
   #anchored {
@@ -76,6 +78,7 @@
     align-self: stretch;
     justify-self: stretch;
     position-anchor: --anchor;
+    border: solid orange;
   }
 </style>
 
@@ -99,8 +102,8 @@
   }
 
   test_position_area("span-bottom span-left", {left:"auto", right:"auto", top:"auto", bottom:"auto"},
-                  {left:200, top:150, width:50, height:150});
+                  {left:100, top:150, width:150, height:150});
 
   test_position_area("span-bottom span-left", {left:"10px", right:"10px", top:"10px", bottom:"10px"},
-                  {left:210, top:160, width:30, height:130});
+                  {left:110, top:160, width:130, height:130});
 </script>

Source/WebCore/rendering/PositionedLayoutConstraints.cpp

@@ -54,17 +54,18 @@ static bool shouldFlipStaticPositionInParent(const RenderBox& outOfFlowBox, cons
     return parent->writingMode().isBlockFlipped() && parent->isWritingModeRoot();
 }
 
-PositionedLayoutConstraints::PositionedLayoutConstraints(const RenderBox& renderer, const RenderStyle& style, LogicalBoxAxis logicalAxis)
+PositionedLayoutConstraints::PositionedLayoutConstraints(const RenderBox& renderer, const RenderStyle& style, LogicalBoxAxis selfAxis)
     : m_container(downcast<RenderBoxModelObject>(*renderer.container())) // Using containingBlock() would be wrong for relpositioned inlines.
     , m_containingWritingMode(m_container->writingMode())
     , m_writingMode(style.writingMode())
-    , m_physicalAxis(logicalAxis == LogicalBoxAxis::Inline ? m_writingMode.inlineAxis() : m_writingMode.blockAxis())
-    , m_containingAxis(!isOrthogonal() ? logicalAxis : oppositeAxis(logicalAxis))
-    , m_alignment(m_containingAxis == LogicalBoxAxis::Inline ? style.justifySelf() : style.alignSelf())
+    , m_physicalAxis(selfAxis == LogicalBoxAxis::Inline ? m_writingMode.inlineAxis() : m_writingMode.blockAxis())
+    , m_containingAxis(!isOrthogonal() ? selfAxis : oppositeAxis(selfAxis))
     , m_style(style)
+    , m_alignment(m_containingAxis == LogicalBoxAxis::Inline ? style.justifySelf() : style.alignSelf())
     , m_defaultAnchorBox(needsAnchor() ? dynamicDowncast<const RenderBoxModelObject>(renderer.defaultAnchorRenderer()) : nullptr)
 {
-    // Compute the baseline containing block info.
+
+    // Compute basic containing block info.
     auto containingWidth = renderer.containingBlockLogicalWidthForPositioned(*m_container, false);
     if (LogicalBoxAxis::Inline == m_containingAxis)
         m_containingRange.set(m_container->borderLogicalLeft(), containingWidth);
@@ -73,22 +74,32 @@ PositionedLayoutConstraints::PositionedLayoutConstraints(const RenderBox& render
     m_marginPercentageBasis = containingWidth;
     m_originalContainingRange = m_containingRange;
 
-    computeAnchorGeometry(renderer);
+    // Adjust for grid-area.
+    captureGridArea(renderer);
 
-    captureInsets(renderer, logicalAxis);
+    // Capture the anchor geometry and adjust for position-area.
+    captureAnchorGeometry(renderer);
 
-    if (logicalAxis == LogicalBoxAxis::Inline)
-        computeInlineStaticDistance(renderer);
-    else
-        computeBlockStaticDistance(renderer);
+    // Cache insets and margins, etc.
+    captureInsets(renderer, selfAxis);
+
+    if (m_useStaticPosition)
+        computeStaticPosition(renderer, selfAxis);
 
+    if (containingCoordsAreFlipped()) {
+        // Ideally this check is incorporated into captureInsets() but currently it needs to happen after computeStaticPosition() because containingCoordsAreFlipped() depends on m_useStaticPosition.
+        std::swap(m_marginBefore, m_marginAfter);
+        std::swap(m_insetBefore, m_insetAfter);
+    }
+
+    // Compute the inset-modified containing block.
     m_insetModifiedContainingRange = m_containingRange;
     m_insetModifiedContainingRange.shiftMinEdgeBy(insetBeforeValue());
     m_insetModifiedContainingRange.shiftMaxEdgeBy(-insetAfterValue());
 }
 
-PositionedLayoutConstraints::PositionedLayoutConstraints(const RenderBox& renderer, LogicalBoxAxis logicalAxis)
-    : PositionedLayoutConstraints(renderer, renderer.style(), logicalAxis)
+PositionedLayoutConstraints::PositionedLayoutConstraints(const RenderBox& renderer, LogicalBoxAxis selfAxis)
+    : PositionedLayoutConstraints(renderer, renderer.style(), selfAxis)
 {
 }
 
@@ -128,22 +139,41 @@ void PositionedLayoutConstraints::captureInsets(const RenderBox& renderer, const
         m_insetAfter = m_style.logicalBottom();
     }
 
-    if (containingCoordsAreFlipped()) {
-        std::swap(m_marginBefore, m_marginAfter);
-        std::swap(m_insetBefore, m_insetAfter);
-    }
-
     if (m_defaultAnchorBox) {
         // If the box uses anchor-center and does have a default anchor box,
         // any auto insets are set to zero.
         if (m_insetBefore.isAuto())
             m_insetBefore = Length(0, LengthType::Fixed);
         if (m_insetAfter.isAuto())
             m_insetAfter = Length(0, LengthType::Fixed);
+        m_useStaticPosition = false;
     }
 }
 
-void PositionedLayoutConstraints::computeAnchorGeometry(const RenderBox& renderer)
+// MARK: - Adjustments to the containing block.
+
+void PositionedLayoutConstraints::captureGridArea(const RenderBox& renderer)
+{
+    const CheckedPtr gridContainer = dynamicDowncast<RenderGrid>(m_container.get());
+    if (!gridContainer)
+        return;
+
+    if (LogicalBoxAxis::Inline == m_containingAxis) {
+        m_containingRange = gridContainer->gridAreaColumnRangeForOutOfFlow(renderer);
+        m_marginPercentageBasis = m_containingRange.size();
+    } else {
+        m_containingRange = gridContainer->gridAreaRowRangeForOutOfFlow(renderer);
+        m_marginPercentageBasis = gridContainer->gridAreaColumnRangeForOutOfFlow(renderer).size();
+    }
+
+    if (!startIsBefore()) {
+        auto containerSize = BoxAxis::Horizontal == m_physicalAxis
+            ? gridContainer->width() : gridContainer->height();
+        m_containingRange.moveTo(containerSize - m_containingRange.max());
+    }
+}
+
+void PositionedLayoutConstraints::captureAnchorGeometry(const RenderBox& renderer)
 {
     if (!m_defaultAnchorBox)
         return;
@@ -214,6 +244,8 @@ LayoutRange PositionedLayoutConstraints::adjustForPositionArea(const LayoutRange
     };
 }
 
+// MARK: - Resolving margins and alignment (after sizing).
+
 void PositionedLayoutConstraints::resolvePosition(RenderBox::LogicalExtentComputedValues& computedValues) const
 {
     // Static position should have resolved one of our insets by now.
@@ -344,26 +376,55 @@ bool PositionedLayoutConstraints::alignmentAppliesStretch(ItemPosition normalAli
     return ItemPosition::Stretch == alignmentPosition;
 }
 
-void PositionedLayoutConstraints::computeInlineStaticDistance(const RenderBox& renderer)
+// MARK: - Static Position Computation
+
+void PositionedLayoutConstraints::computeStaticPosition(const RenderBox& renderer, LogicalBoxAxis selfAxis)
 {
-    if (!m_useStaticPosition)
-        return;
+    ASSERT(m_useStaticPosition);
 
-    auto* parent = renderer.parent();
-    auto parentWritingMode = parent->writingMode();
+    if (is<RenderGrid>(m_container)) {
+        // Grid Containers have special behavior, see https://www.w3.org/TR/css-grid/#abspos
+        if (m_container.get() == renderer.parent()) {
+            // Fake the static layout right here so it integrates with grid-area properly.
+            m_useStaticPosition = false; // Avoid the static position code path.
+            m_insetBefore = Length(0, LengthType::Fixed);
+            m_insetAfter = Length(0, LengthType::Fixed);
 
-    // This method is using enclosingBox() which is wrong for absolutely
-    // positioned grid items, as they rely on the grid area. So for grid items if
-    // both "left" and "right" properties are "auto", we can consider that one of
-    // them (depending on the direction) is simply "0".
-    if (is<RenderGrid>(parent) && parent == renderer.containingBlock()) {
-        if (parentWritingMode.isLogicalLeftInlineStart())
-            m_insetBefore.setValue(LengthType::Fixed, 0);
-        else
-            m_insetAfter.setValue(LengthType::Fixed, 0);
-        return;
+            if (ItemPosition::Auto == m_alignment.position()) {
+                if (LogicalBoxAxis::Inline == m_containingAxis) {
+                    auto justifyItems = m_container->style().justifyItems();
+                    if (ItemPosition::Legacy != justifyItems.position())
+                        m_alignment = justifyItems;
+                } else
+                    m_alignment = m_container->style().alignItems();
+            }
+            if (ItemPosition::Auto == m_alignment.position() || ItemPosition::Normal == m_alignment.position())
+                m_alignment.setPosition(ItemPosition::Start);
+            if (OverflowAlignment::Default == m_alignment.overflow())
+                m_alignment.setOverflow(OverflowAlignment::Unsafe);
+
+            // Unclear if this is spec-compliant, but it is the current interop behavior.
+            if (m_marginBefore.isAuto())
+                m_marginBefore = Length(0, LengthType::Fixed);
+            if (m_marginAfter.isAuto())
+                m_marginAfter = Length(0, LengthType::Fixed);
+            return;
+        }
+        // Rewind grid-area adjustments and fall through to the existing static position code.
+        m_containingRange.moveTo(m_originalContainingRange.min());
     }
 
+    if (selfAxis == LogicalBoxAxis::Inline)
+        computeInlineStaticDistance(renderer);
+    else
+        computeBlockStaticDistance(renderer);
+}
+
+void PositionedLayoutConstraints::computeInlineStaticDistance(const RenderBox& renderer)
+{
+    auto* parent = renderer.parent();
+    auto parentWritingMode = parent->writingMode();
+
     // For orthogonal flows we don't care whether the parent is LTR or RTL because it does not affect the position in our inline axis.
     bool haveOrthogonalWritingModes = parentWritingMode.isOrthogonal(m_writingMode);
     if (parentWritingMode.isLogicalLeftInlineStart() || haveOrthogonalWritingModes) {
@@ -407,9 +468,6 @@ void PositionedLayoutConstraints::computeInlineStaticDistance(const RenderBox& r
 
 void PositionedLayoutConstraints::computeBlockStaticDistance(const RenderBox& renderer)
 {
-    if (!m_useStaticPosition)
-        return;
-
     auto* parent = renderer.parent();
     bool haveOrthogonalWritingModes = parent->writingMode().isOrthogonal(m_writingMode);
     // The static positions from the child's layer are relative to the container block's coordinate space (which is determined

Source/WebCore/rendering/PositionedLayoutConstraints.h

@@ -28,13 +28,14 @@
 #include "BoxSides.h"
 #include "LayoutRange.h"
 #include "RenderBox.h"
+#include "StyleSelfAlignmentData.h"
 
 namespace WebCore {
 
-struct PositionedLayoutConstraints {
+class PositionedLayoutConstraints {
 public:
-    PositionedLayoutConstraints(const RenderBox&, const RenderStyle&, LogicalBoxAxis);
-    PositionedLayoutConstraints(const RenderBox&, LogicalBoxAxis);
+    PositionedLayoutConstraints(const RenderBox&, LogicalBoxAxis selfAxis);
+    PositionedLayoutConstraints(const RenderBox&, const RenderStyle& selfStyleOverride, LogicalBoxAxis selfAxis);
 
     // Logical top or left wrt containing block.
     Length marginBefore() const { return m_marginBefore; }
@@ -75,36 +76,34 @@ struct PositionedLayoutConstraints {
 
 private:
     void captureInsets(const RenderBox&, const LogicalBoxAxis selfAxis);
-    void computeAnchorGeometry(const RenderBox&);
+    void captureGridArea(const RenderBox&);
+    void captureAnchorGeometry(const RenderBox&);
     LayoutRange adjustForPositionArea(const LayoutRange rangeToAdjust, const LayoutRange anchorArea, const BoxAxis containerAxis);
 
+    void computeStaticPosition(const RenderBox&, LogicalBoxAxis selfAxis);
     void computeInlineStaticDistance(const RenderBox&);
     void computeBlockStaticDistance(const RenderBox&);
 
-private:
-    // These values are captured by the constructor and may be tweaked by the user.
-    Length m_marginBefore;
-    Length m_marginAfter;
-    Length m_insetBefore;
-    Length m_insetAfter;
-
-    // These values are calculated by the constructor.
-    LayoutRange m_containingRange;
-    LayoutRange m_originalContainingRange;
-    LayoutRange m_insetModifiedContainingRange;
-    LayoutUnit m_marginPercentageBasis;
     CheckedPtr<const RenderBoxModelObject> m_container;
     const WritingMode m_containingWritingMode;
     const WritingMode m_writingMode;
     const BoxAxis m_physicalAxis;
     const LogicalBoxAxis m_containingAxis;
-    const StyleSelfAlignmentData& m_alignment;
     const RenderStyle& m_style;
+    StyleSelfAlignmentData m_alignment;
     const CheckedPtr<const RenderBoxModelObject> m_defaultAnchorBox; // Only set if needed.
+
     LayoutRange m_anchorArea; // Only valid if defaultAnchor exists.
+    LayoutRange m_containingRange;
+    LayoutRange m_originalContainingRange;
+    LayoutRange m_insetModifiedContainingRange;
+    LayoutUnit m_marginPercentageBasis;
 
-    // These values are cached by the constructor, and should not be changed afterwards.
     LayoutUnit m_bordersPlusPadding;
+    Length m_marginBefore;
+    Length m_marginAfter;
+    Length m_insetBefore;
+    Length m_insetAfter;
     bool m_useStaticPosition { false };
 };