Attachment 357315 Details for Bug 192699 – Patch

[patch] Patch

bug-192699-20181214075329.patch (text/plain), 124.47 KB, created by zalan on 2018-12-14 07:53:31 PST

(hide)

Description:

Filename:

MIME Type:

Creator: zalan

Created: 2018-12-14 07:53:31 PST

Size: 124.47 KB

patch

obsolete

>Subversion Revision: 239205
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 3bb109f401b9b40f6cda88cd4db692e94d808488..2e565ee9f53badbf1e3c7a1c34c675099e41f5b3 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,151 @@
>+2018-12-14  Zalan Bujtas  <zalan@apple.com>
>+
>+        [LFC][BFC] Transition to logical margin types.
>+        https://bugs.webkit.org/show_bug.cgi?id=192699
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        This is in preparation for moving over to logical types.
>+        (This patch also transitions to singlular margin naming (verticalMargins -> VerticalMargin))
>+
>+        * layout/FormattingContext.cpp:
>+        (WebCore::Layout::FormattingContext::computeOutOfFlowHorizontalGeometry const):
>+        (WebCore::Layout::FormattingContext::computeOutOfFlowVerticalGeometry const):
>+        (WebCore::Layout::FormattingContext::validateGeometryConstraintsAfterLayout const):
>+        * layout/FormattingContext.h:
>+        * layout/FormattingContextGeometry.cpp:
>+        (WebCore::Layout::staticVerticalPositionForOutOfFlowPositioned):
>+        (WebCore::Layout::FormattingContext::Geometry::outOfFlowNonReplacedVerticalGeometry):
>+        (WebCore::Layout::FormattingContext::Geometry::outOfFlowNonReplacedHorizontalGeometry):
>+        (WebCore::Layout::FormattingContext::Geometry::outOfFlowReplacedVerticalGeometry):
>+        (WebCore::Layout::FormattingContext::Geometry::outOfFlowReplacedHorizontalGeometry):
>+        (WebCore::Layout::FormattingContext::Geometry::complicatedCases):
>+        (WebCore::Layout::FormattingContext::Geometry::floatingNonReplacedWidthAndMargin):
>+        (WebCore::Layout::FormattingContext::Geometry::floatingReplacedWidthAndMargin):
>+        (WebCore::Layout::FormattingContext::Geometry::inlineReplacedHeightAndMargin):
>+        (WebCore::Layout::FormattingContext::Geometry::inlineReplacedWidthAndMargin):
>+        (WebCore::Layout::FormattingContext::Geometry::computedNonCollapsedHorizontalMarginValue):
>+        (WebCore::Layout::FormattingContext::Geometry::computedNonCollapsedVerticalMarginValue):
>+        * layout/FormattingContextQuirks.cpp:
>+        (WebCore::Layout::FormattingContext::Quirks::heightValueOfNearestContainingBlockWithFixedHeight):
>+        * layout/MarginTypes.h:
>+        (WebCore::Layout::VerticalMargin::usedValues const):
>+        * layout/Verification.cpp:
>+        (WebCore::Layout::outputMismatchingBlockBoxInformationIfNeeded):
>+        * layout/blockformatting/BlockFormattingContext.cpp:
>+        (WebCore::Layout::BlockFormattingContext::computeEstimatedMarginBefore const):
>+        (WebCore::Layout::BlockFormattingContext::computeEstimatedMarginBeforeForAncestors const):
>+        (WebCore::Layout::BlockFormattingContext::precomputeVerticalPositionForFormattingRootIfNeeded const):
>+        (WebCore::Layout::hasPrecomputedMarginBefore):
>+        (WebCore::Layout::BlockFormattingContext::computeFloatingPosition const):
>+        (WebCore::Layout::BlockFormattingContext::computePositionToAvoidFloats const):
>+        (WebCore::Layout::BlockFormattingContext::computeVerticalPositionForFloatClear const):
>+        (WebCore::Layout::BlockFormattingContext::computeWidthAndMargin const):
>+        (WebCore::Layout::BlockFormattingContext::computeHeightAndMargin const):
>+        (WebCore::Layout::BlockFormattingContext::computeEstimatedMarginTop const): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::computeEstimatedMarginTopForAncestors const): Deleted.
>+        (WebCore::Layout::hasPrecomputedMarginTop): Deleted.
>+        * layout/blockformatting/BlockFormattingContext.h:
>+        * layout/blockformatting/BlockFormattingContextGeometry.cpp:
>+        (WebCore::Layout::BlockFormattingContext::Geometry::inFlowNonReplacedHeightAndMargin):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::inFlowNonReplacedWidthAndMargin):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::inFlowReplacedWidthAndMargin):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::staticPosition):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::inFlowHeightAndMargin):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::instrinsicWidthConstraints):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::estimatedMarginBefore):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::estimatedMarginAfter):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::estimatedMarginTop): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Geometry::estimatedMarginBottom): Deleted.
>+        * layout/blockformatting/BlockFormattingContextQuirks.cpp:
>+        (WebCore::Layout::hasMarginBeforeQuirkValue):
>+        (WebCore::Layout::BlockFormattingContext::Quirks::stretchedHeight):
>+        (WebCore::Layout::BlockFormattingContext::Quirks::shouldIgnoreMarginBefore):
>+        (WebCore::Layout::hasMarginTopQuirkValue): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Quirks::shouldIgnoreMarginTop): Deleted.
>+        * layout/blockformatting/BlockMarginCollapse.cpp:
>+        (WebCore::Layout::isMarginBeforeCollapsedWithSibling):
>+        (WebCore::Layout::isMarginAfterCollapsedWithSibling):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::isMarginBeforeCollapsedWithParent):
>+        (WebCore::Layout::isMarginAfterCollapsedThrough):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::collapsedMarginBeforeFromFirstChild):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::nonCollapsedMarginBefore):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::computedNonCollapsedMarginBefore):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::computedNonCollapsedMarginAfter):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::marginBefore):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::marginAfter):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::isMarginAfterCollapsedWithParent):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::isMarginBeforeCollapsedWithParentMarginAfter):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::collapsedMarginAfterFromLastChild):
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::nonCollapsedMarginAfter):
>+        (WebCore::Layout::isMarginTopCollapsedWithSibling): Deleted.
>+        (WebCore::Layout::isMarginBottomCollapsedWithSibling): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::isMarginTopCollapsedWithParent): Deleted.
>+        (WebCore::Layout::isMarginBottomCollapsedThrough): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::collapsedMarginTopFromFirstChild): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::nonCollapsedMarginTop): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::computedNonCollapsedMarginTop): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::computedNonCollapsedMarginBottom): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::marginTop): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::marginBottom): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::isMarginBottomCollapsedWithParent): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::isMarginTopCollapsedWithParentMarginBottom): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::collapsedMarginBottomFromLastChild): Deleted.
>+        (WebCore::Layout::BlockFormattingContext::Geometry::MarginCollapse::nonCollapsedMarginBottom): Deleted.
>+        * layout/displaytree/DisplayBox.cpp:
>+        (WebCore::Display::Box::Box):
>+        (WebCore::Display::Box::marginBox const):
>+        (WebCore::Display::Box::nonCollapsedMarginBox const):
>+        * layout/displaytree/DisplayBox.h:
>+        (WebCore::Display::Box::rectWithMargin const):
>+        (WebCore::Display::Box::estimatedMarginBefore const):
>+        (WebCore::Display::Box::setEstimatedMarginBefore):
>+        (WebCore::Display::Box::top const):
>+        (WebCore::Display::Box::topLeft const):
>+        (WebCore::Display::Box::setVerticalMargin):
>+        (WebCore::Display::Box::marginBefore const):
>+        (WebCore::Display::Box::marginStart const):
>+        (WebCore::Display::Box::marginAfter const):
>+        (WebCore::Display::Box::marginEnd const):
>+        (WebCore::Display::Box::nonCollapsedMarginBefore const):
>+        (WebCore::Display::Box::nonCollapsedMarginAfter const):
>+        (WebCore::Display::Box::nonComputedMarginStart const):
>+        (WebCore::Display::Box::nonComputedMarginEnd const):
>+        (WebCore::Display::Box::estimatedMarginTop const): Deleted.
>+        (WebCore::Display::Box::setEstimatedMarginTop): Deleted.
>+        (WebCore::Display::Box::marginTop const): Deleted.
>+        (WebCore::Display::Box::marginLeft const): Deleted.
>+        (WebCore::Display::Box::marginBottom const): Deleted.
>+        (WebCore::Display::Box::marginRight const): Deleted.
>+        (WebCore::Display::Box::nonCollapsedMarginTop const): Deleted.
>+        (WebCore::Display::Box::nonCollapsedMarginBottom const): Deleted.
>+        (WebCore::Display::Box::nonComputedMarginLeft const): Deleted.
>+        (WebCore::Display::Box::nonComputedMarginRight const): Deleted.
>+        * layout/floats/FloatAvoider.cpp:
>+        (WebCore::Layout::FloatAvoider::setHorizontalConstraints):
>+        (WebCore::Layout::FloatAvoider::initialHorizontalPosition const):
>+        (WebCore::Layout::FloatAvoider::overflowsContainingBlock const):
>+        * layout/floats/FloatAvoider.h:
>+        (WebCore::Layout::FloatAvoider::marginBefore const):
>+        (WebCore::Layout::FloatAvoider::marginAfter const):
>+        (WebCore::Layout::FloatAvoider::marginStart const):
>+        (WebCore::Layout::FloatAvoider::marginEnd const):
>+        (WebCore::Layout::FloatAvoider::marginBoxWidth const):
>+        (WebCore::Layout::FloatAvoider::marginTop const): Deleted.
>+        (WebCore::Layout::FloatAvoider::marginBottom const): Deleted.
>+        (WebCore::Layout::FloatAvoider::marginLeft const): Deleted.
>+        (WebCore::Layout::FloatAvoider::marginRight const): Deleted.
>+        * layout/floats/FloatBox.cpp:
>+        (WebCore::Layout::FloatBox::rect const):
>+        (WebCore::Layout::FloatBox::horizontalPositionCandidate):
>+        (WebCore::Layout::FloatBox::verticalPositionCandidate):
>+        (WebCore::Layout::FloatBox::initialVerticalPosition const):
>+        * layout/floats/FloatingContext.cpp:
>+        (WebCore::Layout::FloatingContext::positionForFloat const):
>+        (WebCore::Layout::FloatingContext::verticalPositionWithClearance const):
>+        * layout/inlineformatting/InlineFormattingContext.cpp:
>+        (WebCore::Layout::InlineFormattingContext::collectInlineContentForSubtree const):
>+
> 2018-12-14  Zalan Bujtas  <zalan@apple.com>
> 
>         [LFC][BFC] Introduce VerticalMargin and HorizontalMargin types.
>diff --git a/Source/WebCore/layout/FormattingContext.cpp b/Source/WebCore/layout/FormattingContext.cpp
>index 81dda8c62395077f7be624d54af7a2679cf58638..cd8d5c6b3552e6ae5f9d4c0733246438f01e4274 100644
>--- a/Source/WebCore/layout/FormattingContext.cpp
>+++ b/Source/WebCore/layout/FormattingContext.cpp
>@@ -87,7 +87,7 @@ void FormattingContext::computeOutOfFlowHorizontalGeometry(const Box& layoutBox)
>     }
> 
>     auto& displayBox = layoutState.displayBoxForLayoutBox(layoutBox);
>-    displayBox.setLeft(horizontalGeometry.left + horizontalGeometry.widthAndMargin.margin.left);
>+    displayBox.setLeft(horizontalGeometry.left + horizontalGeometry.widthAndMargin.margin.start);
>     displayBox.setContentBoxWidth(horizontalGeometry.widthAndMargin.width);
>     displayBox.setHorizontalMargin(horizontalGeometry.widthAndMargin.margin);
>     displayBox.setHorizontalNonComputedMargin(horizontalGeometry.widthAndMargin.nonComputedMargin);
>@@ -117,8 +117,8 @@ void FormattingContext::computeOutOfFlowVerticalGeometry(const Box& layoutBox) c
>     auto& displayBox = layoutState.displayBoxForLayoutBox(layoutBox);
>     // Margins of absolutely positioned boxes do not collapse
>     ASSERT(!verticalGeometry.heightAndMargin.margin.collapsedValues());
>-    auto nonCollapsedVerticalMargins = verticalGeometry.heightAndMargin.margin.nonCollapsedValues();
>-    displayBox.setTop(verticalGeometry.top + nonCollapsedVerticalMargins.top);
>+    auto nonCollapsedVerticalMargin = verticalGeometry.heightAndMargin.margin.nonCollapsedValues();
>+    displayBox.setTop(verticalGeometry.top + nonCollapsedVerticalMargin.before);
>     displayBox.setContentBoxHeight(verticalGeometry.heightAndMargin.height);
>     displayBox.setVerticalMargin(verticalGeometry.heightAndMargin.margin);
> }
>@@ -224,16 +224,16 @@ void FormattingContext::validateGeometryConstraintsAfterLayout() const
>         if ((layoutBox.isBlockLevelBox() || layoutBox.isOutOfFlowPositioned()) && !layoutBox.replaced()) {
>             // margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block
>             auto containingBlockWidth = containingBlockDisplayBox.contentBoxWidth();
>-            ASSERT(displayBox.marginLeft() + displayBox.borderLeft() + displayBox.paddingLeft().value_or(0) + displayBox.contentBoxWidth()
>-                + displayBox.paddingRight().value_or(0) + displayBox.borderRight() + displayBox.marginRight() == containingBlockWidth);
>+            ASSERT(displayBox.marginStart() + displayBox.borderLeft() + displayBox.paddingLeft().value_or(0) + displayBox.contentBoxWidth()
>+                + displayBox.paddingRight().value_or(0) + displayBox.borderRight() + displayBox.marginEnd() == containingBlockWidth);
>         }
> 
>         // 10.6.4 Absolutely positioned, non-replaced elements
>         if (layoutBox.isOutOfFlowPositioned() && !layoutBox.replaced()) {
>             // top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = height of containing block
>             auto containingBlockHeight = containingBlockDisplayBox.contentBoxHeight();
>-            ASSERT(displayBox.top() + displayBox.marginTop() + displayBox.borderTop() + displayBox.paddingTop().value_or(0) + displayBox.contentBoxHeight()
>-                + displayBox.paddingBottom().value_or(0) + displayBox.borderBottom() + displayBox.marginBottom() == containingBlockHeight);
>+            ASSERT(displayBox.top() + displayBox.marginBefore() + displayBox.borderTop() + displayBox.paddingTop().value_or(0) + displayBox.contentBoxHeight()
>+                + displayBox.paddingBottom().value_or(0) + displayBox.borderBottom() + displayBox.marginAfter() == containingBlockHeight);
>         }
>     }
> }
>diff --git a/Source/WebCore/layout/FormattingContext.h b/Source/WebCore/layout/FormattingContext.h
>index 50b3863ec5337e41181b681bcfd30e2d0f24a33a..3216302ec9df2f66da3ead4760065834232f0a9e 100644
>--- a/Source/WebCore/layout/FormattingContext.h
>+++ b/Source/WebCore/layout/FormattingContext.h
>@@ -86,7 +86,7 @@ protected:
> 
>         static HeightAndMargin inlineReplacedHeightAndMargin(const LayoutState&, const Box&, std::optional<LayoutUnit> usedHeight = { });
>         static WidthAndMargin inlineReplacedWidthAndMargin(const LayoutState&, const Box&, std::optional<LayoutUnit> usedWidth = { }, 
>-            std::optional<LayoutUnit> precomputedMarginLeft = { }, std::optional<LayoutUnit> precomputedMarginRight = { });
>+            std::optional<LayoutUnit> precomputedMarginStart = { }, std::optional<LayoutUnit> precomputedMarginEnd = { });
> 
>         static LayoutSize inFlowPositionedPositionOffset(const LayoutState&, const Box&);
> 
>diff --git a/Source/WebCore/layout/FormattingContextGeometry.cpp b/Source/WebCore/layout/FormattingContextGeometry.cpp
>index d1fe88e013433f74cb803bd9680bbef5b6bb5140..14bba1eb34055bedb4b4b4868506f01ed15a1214 100644
>--- a/Source/WebCore/layout/FormattingContextGeometry.cpp
>+++ b/Source/WebCore/layout/FormattingContextGeometry.cpp
>@@ -186,7 +186,7 @@ static LayoutUnit staticVerticalPositionForOutOfFlowPositioned(const LayoutState
>     if (auto* previousInFlowSibling = layoutBox.previousInFlowSibling()) {
>         // Add sibling offset
>         auto& previousInFlowDisplayBox = layoutState.displayBoxForLayoutBox(*previousInFlowSibling);
>-        top += previousInFlowDisplayBox.bottom() + previousInFlowDisplayBox.nonCollapsedMarginBottom();
>+        top += previousInFlowDisplayBox.bottom() + previousInFlowDisplayBox.nonCollapsedMarginAfter();
>     } else {
>         ASSERT(layoutBox.parent());
>         top = layoutState.displayBoxForLayoutBox(*layoutBox.parent()).contentBoxTop();
>@@ -280,8 +280,8 @@ VerticalGeometry FormattingContext::Geometry::outOfFlowNonReplacedVerticalGeomet
>     auto top = computedValueIfNotAuto(style.logicalTop(), containingBlockWidth);
>     auto bottom = computedValueIfNotAuto(style.logicalBottom(), containingBlockWidth);
>     auto height = usedHeight ? usedHeight.value() : computedHeightValue(layoutState, layoutBox, HeightType::Normal);
>-    auto marginTop = computedValueIfNotAuto(style.marginTop(), containingBlockWidth);
>-    auto marginBottom = computedValueIfNotAuto(style.marginBottom(), containingBlockWidth);
>+    auto marginBefore = computedValueIfNotAuto(style.marginBefore(), containingBlockWidth);
>+    auto marginAfter = computedValueIfNotAuto(style.marginAfter(), containingBlockWidth);
>     auto paddingTop = displayBox.paddingTop().value_or(0);
>     auto paddingBottom = displayBox.paddingBottom().value_or(0);
>     auto borderTop = displayBox.borderTop();
>@@ -291,72 +291,72 @@ VerticalGeometry FormattingContext::Geometry::outOfFlowNonReplacedVerticalGeomet
>         top = staticVerticalPositionForOutOfFlowPositioned(layoutState, layoutBox);
> 
>     if (top && height && bottom) {
>-        if (!marginTop && !marginBottom) {
>-            auto marginTopAndBottom = containingBlockHeight - (*top + borderTop + paddingTop + *height + paddingBottom + borderBottom + *bottom);
>-            marginTop = marginBottom = marginTopAndBottom / 2;
>-        } else if (!marginTop)
>-            marginTop = containingBlockHeight - (*top + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginBottom + *bottom);
>+        if (!marginBefore && !marginAfter) {
>+            auto marginBeforeAndAfter = containingBlockHeight - (*top + borderTop + paddingTop + *height + paddingBottom + borderBottom + *bottom);
>+            marginBefore = marginAfter = marginBeforeAndAfter / 2;
>+        } else if (!marginBefore)
>+            marginBefore = containingBlockHeight - (*top + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginAfter + *bottom);
>         else
>-            marginBottom = containingBlockHeight - (*top + *marginTop + borderTop + paddingTop + *height + paddingBottom + borderBottom + *bottom);
>+            marginAfter = containingBlockHeight - (*top + *marginBefore + borderTop + paddingTop + *height + paddingBottom + borderBottom + *bottom);
>         // Over-constrained?
>-        auto boxHeight = *top + *marginTop + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginBottom + *bottom;
>+        auto boxHeight = *top + *marginBefore + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginAfter + *bottom;
>         if (boxHeight > containingBlockHeight)
>-            bottom = containingBlockHeight - (*top + *marginTop + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginBottom); 
>+            bottom = containingBlockHeight - (*top + *marginBefore + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginAfter); 
>     }
> 
>     if (!top && !height && bottom) {
>         // #1
>         height = contentHeightForFormattingContextRoot(layoutState, layoutBox);
>-        marginTop = marginTop.value_or(0);
>-        marginBottom = marginBottom.value_or(0);
>-        top = containingBlockHeight - (*marginTop + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginBottom + *bottom); 
>+        marginBefore = marginBefore.value_or(0);
>+        marginAfter = marginAfter.value_or(0);
>+        top = containingBlockHeight - (*marginBefore + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginAfter + *bottom); 
>     }
> 
>     if (!top && !bottom && height) {
>         // #2
>         top = staticVerticalPositionForOutOfFlowPositioned(layoutState, layoutBox);
>-        marginTop = marginTop.value_or(0);
>-        marginBottom = marginBottom.value_or(0);
>-        bottom = containingBlockHeight - (*top + *marginTop + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginBottom); 
>+        marginBefore = marginBefore.value_or(0);
>+        marginAfter = marginAfter.value_or(0);
>+        bottom = containingBlockHeight - (*top + *marginBefore + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginAfter); 
>     }
> 
>     if (!height && !bottom && top) {
>         // #3
>         height = contentHeightForFormattingContextRoot(layoutState, layoutBox);
>-        marginTop = marginTop.value_or(0);
>-        marginBottom = marginBottom.value_or(0);
>-        bottom = containingBlockHeight - (*top + *marginTop + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginBottom); 
>+        marginBefore = marginBefore.value_or(0);
>+        marginAfter = marginAfter.value_or(0);
>+        bottom = containingBlockHeight - (*top + *marginBefore + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginAfter); 
>     }
> 
>     if (!top && height && bottom) {
>         // #4
>-        marginTop = marginTop.value_or(0);
>-        marginBottom = marginBottom.value_or(0);
>-        top = containingBlockHeight - (*marginTop + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginBottom + *bottom); 
>+        marginBefore = marginBefore.value_or(0);
>+        marginAfter = marginAfter.value_or(0);
>+        top = containingBlockHeight - (*marginBefore + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginAfter + *bottom); 
>     }
> 
>     if (!height && top && bottom) {
>         // #5
>-        marginTop = marginTop.value_or(0);
>-        marginBottom = marginBottom.value_or(0);
>-        height = containingBlockHeight - (*top + *marginTop + borderTop + paddingTop + paddingBottom + borderBottom + *marginBottom + *bottom); 
>+        marginBefore = marginBefore.value_or(0);
>+        marginAfter = marginAfter.value_or(0);
>+        height = containingBlockHeight - (*top + *marginBefore + borderTop + paddingTop + paddingBottom + borderBottom + *marginAfter + *bottom); 
>     }
> 
>     if (!bottom && top && height) {
>         // #6
>-        marginTop = marginTop.value_or(0);
>-        marginBottom = marginBottom.value_or(0);
>-        bottom = containingBlockHeight - (*top + *marginTop + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginBottom); 
>+        marginBefore = marginBefore.value_or(0);
>+        marginAfter = marginAfter.value_or(0);
>+        bottom = containingBlockHeight - (*top + *marginBefore + borderTop + paddingTop + *height + paddingBottom + borderBottom + *marginAfter); 
>     }
> 
>     ASSERT(top);
>     ASSERT(bottom);
>     ASSERT(height);
>-    ASSERT(marginTop);
>-    ASSERT(marginBottom);
>+    ASSERT(marginBefore);
>+    ASSERT(marginAfter);
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Position][Height][Margin] -> out-of-flow non-replaced -> top(" << *top << "px) bottom("  << *bottom << "px) height(" << *height << "px) margin(" << *marginTop << "px, "  << *marginBottom << "px) layoutBox(" << &layoutBox << ")");
>-    return { *top, *bottom, { *height, { { *marginTop, *marginBottom }, { } } } };
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Position][Height][Margin] -> out-of-flow non-replaced -> top(" << *top << "px) bottom("  << *bottom << "px) height(" << *height << "px) margin(" << *marginBefore << "px, "  << *marginAfter << "px) layoutBox(" << &layoutBox << ")");
>+    return { *top, *bottom, { *height, { { *marginBefore, *marginAfter }, { } } } };
> }
> 
> HorizontalGeometry FormattingContext::Geometry::outOfFlowNonReplacedHorizontalGeometry(LayoutState& layoutState, const Box& layoutBox, std::optional<LayoutUnit> usedWidth)
>@@ -398,10 +398,10 @@ HorizontalGeometry FormattingContext::Geometry::outOfFlowNonReplacedHorizontalGe
>     auto left = computedValueIfNotAuto(style.logicalLeft(), containingBlockWidth);
>     auto right = computedValueIfNotAuto(style.logicalRight(), containingBlockWidth);
>     auto width = computedValueIfNotAuto(usedWidth ? Length { usedWidth.value(), Fixed } : style.logicalWidth(), containingBlockWidth);
>-    auto marginLeft = computedValueIfNotAuto(style.marginLeft(), containingBlockWidth);
>-    auto marginRight = computedValueIfNotAuto(style.marginRight(), containingBlockWidth);
>-    auto nonComputedMarginLeft = marginLeft.value_or(0);
>-    auto nonComputedMarginRight = marginRight.value_or(0);
>+    auto marginStart = computedValueIfNotAuto(style.marginStart(), containingBlockWidth);
>+    auto marginEnd = computedValueIfNotAuto(style.marginEnd(), containingBlockWidth);
>+    auto nonComputedMarginStart = marginStart.value_or(0);
>+    auto nonComputedMarginEnd = marginEnd.value_or(0);
>     auto paddingLeft = displayBox.paddingLeft().value_or(0);
>     auto paddingRight = displayBox.paddingRight().value_or(0);
>     auto borderLeft = displayBox.borderLeft();
>@@ -411,8 +411,8 @@ HorizontalGeometry FormattingContext::Geometry::outOfFlowNonReplacedHorizontalGe
>         // If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0.
>         // Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static
>         // position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
>-        marginLeft = marginLeft.value_or(0);
>-        marginRight = marginRight.value_or(0);
>+        marginStart = marginStart.value_or(0);
>+        marginEnd = marginEnd.value_or(0);
> 
>         auto staticHorizontalPosition = staticHorizontalPositionForOutOfFlowPositioned(layoutState, layoutBox);
>         if (isLeftToRightDirection)
>@@ -425,84 +425,84 @@ HorizontalGeometry FormattingContext::Geometry::outOfFlowNonReplacedHorizontalGe
>         // solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value.
>         // If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right'
>         // (in case 'direction' is 'ltr') and solve for that value.
>-        if (!marginLeft && !marginRight) {
>-            auto marginLeftAndRight = containingBlockWidth - (*left + borderLeft + paddingLeft + *width + paddingRight + borderRight + *right);
>-            if (marginLeftAndRight >= 0)
>-                marginLeft = marginRight = marginLeftAndRight / 2;  
>+        if (!marginStart && !marginEnd) {
>+            auto marginStartAndEnd = containingBlockWidth - (*left + borderLeft + paddingLeft + *width + paddingRight + borderRight + *right);
>+            if (marginStartAndEnd >= 0)
>+                marginStart = marginEnd = marginStartAndEnd / 2;  
>             else {
>                 if (isLeftToRightDirection) {
>-                    marginLeft = 0_lu;
>-                    marginRight = containingBlockWidth - (*left + *marginLeft + borderLeft + paddingLeft + *width + paddingRight + borderRight + *right);
>+                    marginStart = 0_lu;
>+                    marginEnd = containingBlockWidth - (*left + *marginStart + borderLeft + paddingLeft + *width + paddingRight + borderRight + *right);
>                 } else {
>-                    marginRight = 0_lu;
>-                    marginLeft = containingBlockWidth - (*left + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginRight + *right);
>+                    marginEnd = 0_lu;
>+                    marginStart = containingBlockWidth - (*left + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginEnd + *right);
>                 }
>             }
>-        } else if (!marginLeft) {
>-            marginLeft = containingBlockWidth - (*left + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginRight + *right);
>+        } else if (!marginStart) {
>+            marginStart = containingBlockWidth - (*left + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginEnd + *right);
>             // Overconstrained? Ignore right (left).
>-            if (*marginLeft < 0) {
>+            if (*marginStart < 0) {
>                 if (isLeftToRightDirection)
>-                    marginLeft = containingBlockWidth - (*left + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginRight);
>+                    marginStart = containingBlockWidth - (*left + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginEnd);
>                 else
>-                    marginLeft = containingBlockWidth - (borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginRight + *right);
>+                    marginStart = containingBlockWidth - (borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginEnd + *right);
>             }
>-        } else if (!marginRight) {
>-            marginRight = containingBlockWidth - (*left + *marginLeft + borderLeft + paddingLeft + *width + paddingRight + borderRight + *right);
>+        } else if (!marginEnd) {
>+            marginEnd = containingBlockWidth - (*left + *marginStart + borderLeft + paddingLeft + *width + paddingRight + borderRight + *right);
>             // Overconstrained? Ignore right (left).
>-            if (*marginRight < 0) {
>+            if (*marginEnd < 0) {
>                 if (isLeftToRightDirection)
>-                    marginRight = containingBlockWidth - (*left + *marginLeft + borderLeft + paddingLeft + *width + paddingRight + borderRight);
>+                    marginEnd = containingBlockWidth - (*left + *marginStart + borderLeft + paddingLeft + *width + paddingRight + borderRight);
>                 else
>-                    marginRight = containingBlockWidth - (*marginLeft + borderLeft + paddingLeft + *width + paddingRight + borderRight + *right);
>+                    marginEnd = containingBlockWidth - (*marginStart + borderLeft + paddingLeft + *width + paddingRight + borderRight + *right);
>             }
>         }
>     } else {
>         // Otherwise, set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
>-        marginLeft = marginLeft.value_or(0);
>-        marginRight = marginRight.value_or(0);
>+        marginStart = marginStart.value_or(0);
>+        marginEnd = marginEnd.value_or(0);
>     }
> 
>-    ASSERT(marginLeft);
>-    ASSERT(marginRight);
>+    ASSERT(marginStart);
>+    ASSERT(marginEnd);
> 
>     if (!left && !width && right) {
>         // #1
>         width = shrinkToFitWidth(layoutState, layoutBox);
>-        left = containingBlockWidth - (*marginLeft + borderLeft + paddingLeft + *width + paddingRight  + borderRight + *marginRight + *right);
>+        left = containingBlockWidth - (*marginStart + borderLeft + paddingLeft + *width + paddingRight  + borderRight + *marginEnd + *right);
>     } else if (!left && !right && width) {
>         // #2
>         auto staticHorizontalPosition = staticHorizontalPositionForOutOfFlowPositioned(layoutState, layoutBox);
>         if (isLeftToRightDirection) {
>             left = staticHorizontalPosition;
>-            right = containingBlockWidth - (*left + *marginLeft + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginRight);
>+            right = containingBlockWidth - (*left + *marginStart + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginEnd);
>         } else {
>             right = staticHorizontalPosition;
>-            left = containingBlockWidth - (*marginLeft + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginRight + *right);
>+            left = containingBlockWidth - (*marginStart + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginEnd + *right);
>         }
>     } else if (!width && !right && left) {
>         // #3
>         width = shrinkToFitWidth(layoutState, layoutBox);
>-        right = containingBlockWidth - (*left + *marginLeft + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginRight);
>+        right = containingBlockWidth - (*left + *marginStart + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginEnd);
>     } else if (!left && width && right) {
>         // #4
>-        left = containingBlockWidth - (*marginLeft + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginRight + *right);
>+        left = containingBlockWidth - (*marginStart + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginEnd + *right);
>     } else if (!width && left && right) {
>         // #5
>-        width = containingBlockWidth - (*left + *marginLeft + borderLeft + paddingLeft + paddingRight  + borderRight + *marginRight + *right);
>+        width = containingBlockWidth - (*left + *marginStart + borderLeft + paddingLeft + paddingRight  + borderRight + *marginEnd + *right);
>     } else if (!right && left && width) {
>         // #6
>-        right = containingBlockWidth - (*left + *marginLeft + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginRight);
>+        right = containingBlockWidth - (*left + *marginStart + borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginEnd);
>     }
> 
>     ASSERT(left);
>     ASSERT(right);
>     ASSERT(width);
>-    ASSERT(marginLeft);
>-    ASSERT(marginRight);
>+    ASSERT(marginStart);
>+    ASSERT(marginEnd);
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Position][Width][Margin] -> out-of-flow non-replaced -> left(" << *left << "px) right("  << *right << "px) width(" << *width << "px) margin(" << *marginLeft << "px, "  << *marginRight << "px) layoutBox(" << &layoutBox << ")");
>-    return { *left, *right, { *width, { *marginLeft, *marginRight }, { nonComputedMarginLeft, nonComputedMarginRight } } };
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Position][Width][Margin] -> out-of-flow non-replaced -> left(" << *left << "px) right("  << *right << "px) width(" << *width << "px) margin(" << *marginStart << "px, "  << *marginEnd << "px) layoutBox(" << &layoutBox << ")");
>+    return { *left, *right, { *width, { *marginStart, *marginEnd }, { nonComputedMarginStart, nonComputedMarginEnd } } };
> }
> 
> VerticalGeometry FormattingContext::Geometry::outOfFlowReplacedVerticalGeometry(const LayoutState& layoutState, const Box& layoutBox, std::optional<LayoutUnit> usedHeight)
>@@ -528,8 +528,8 @@ VerticalGeometry FormattingContext::Geometry::outOfFlowReplacedVerticalGeometry(
>     auto top = computedValueIfNotAuto(style.logicalTop(), containingBlockWidth);
>     auto bottom = computedValueIfNotAuto(style.logicalBottom(), containingBlockWidth);
>     auto height = inlineReplacedHeightAndMargin(layoutState, layoutBox, usedHeight).height;
>-    auto marginTop = computedValueIfNotAuto(style.marginTop(), containingBlockWidth);
>-    auto marginBottom = computedValueIfNotAuto(style.marginBottom(), containingBlockWidth);
>+    auto marginBefore = computedValueIfNotAuto(style.marginBefore(), containingBlockWidth);
>+    auto marginAfter = computedValueIfNotAuto(style.marginAfter(), containingBlockWidth);
>     auto paddingTop = displayBox.paddingTop().value_or(0);
>     auto paddingBottom = displayBox.paddingBottom().value_or(0);
>     auto borderTop = displayBox.borderTop();
>@@ -542,36 +542,36 @@ VerticalGeometry FormattingContext::Geometry::outOfFlowReplacedVerticalGeometry(
> 
>     if (!bottom) {
>         // #2
>-        marginTop = marginTop.value_or(0);
>-        marginBottom = marginBottom.value_or(0);
>+        marginBefore = marginBefore.value_or(0);
>+        marginAfter = marginAfter.value_or(0);
>     }
> 
>-    if (!marginTop && !marginBottom) {
>+    if (!marginBefore && !marginAfter) {
>         // #3
>-        auto marginTopAndBottom = containingBlockHeight - (*top + borderTop + paddingTop + height + paddingBottom + borderBottom + *bottom);
>-        marginTop = marginBottom = marginTopAndBottom / 2;
>+        auto marginBeforeAndAfter = containingBlockHeight - (*top + borderTop + paddingTop + height + paddingBottom + borderBottom + *bottom);
>+        marginBefore = marginAfter = marginBeforeAndAfter / 2;
>     }
> 
>     // #4
>     if (!top)
>-        top = containingBlockHeight - (*marginTop + borderTop + paddingTop + height + paddingBottom + borderBottom + *marginBottom + *bottom);
>+        top = containingBlockHeight - (*marginBefore + borderTop + paddingTop + height + paddingBottom + borderBottom + *marginAfter + *bottom);
> 
>     if (!bottom)
>-        bottom = containingBlockHeight - (*top + *marginTop + borderTop + paddingTop + height + paddingBottom + borderBottom + *marginBottom);
>+        bottom = containingBlockHeight - (*top + *marginBefore + borderTop + paddingTop + height + paddingBottom + borderBottom + *marginAfter);
> 
>-    if (!marginTop)
>-        marginTop = containingBlockHeight - (*top + borderTop + paddingTop + height + paddingBottom + borderBottom + *marginBottom + *bottom);
>+    if (!marginBefore)
>+        marginBefore = containingBlockHeight - (*top + borderTop + paddingTop + height + paddingBottom + borderBottom + *marginAfter + *bottom);
> 
>-    if (!marginBottom)
>-        marginBottom = containingBlockHeight - (*top + *marginTop + borderTop + paddingTop + height + paddingBottom + borderBottom + *bottom);
>+    if (!marginAfter)
>+        marginAfter = containingBlockHeight - (*top + *marginBefore + borderTop + paddingTop + height + paddingBottom + borderBottom + *bottom);
> 
>     // #5
>-    auto boxHeight = *top + *marginTop + borderTop + paddingTop + height + paddingBottom + borderBottom + *marginBottom + *bottom;
>+    auto boxHeight = *top + *marginBefore + borderTop + paddingTop + height + paddingBottom + borderBottom + *marginAfter + *bottom;
>     if (boxHeight > containingBlockHeight)
>-        bottom = containingBlockHeight - (*top + *marginTop + borderTop + paddingTop + height + paddingBottom + borderBottom + *marginBottom); 
>+        bottom = containingBlockHeight - (*top + *marginBefore + borderTop + paddingTop + height + paddingBottom + borderBottom + *marginAfter); 
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Position][Height][Margin] -> out-of-flow replaced -> top(" << *top << "px) bottom("  << *bottom << "px) height(" << height << "px) margin(" << *marginTop << "px, "  << *marginBottom << "px) layoutBox(" << &layoutBox << ")");
>-    return { *top, *bottom, { height, { { *marginTop, *marginBottom }, { } } } };
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Position][Height][Margin] -> out-of-flow replaced -> top(" << *top << "px) bottom("  << *bottom << "px) height(" << height << "px) margin(" << *marginBefore << "px, "  << *marginAfter << "px) layoutBox(" << &layoutBox << ")");
>+    return { *top, *bottom, { height, { { *marginBefore, *marginAfter }, { } } } };
> }
> 
> HorizontalGeometry FormattingContext::Geometry::outOfFlowReplacedHorizontalGeometry(const LayoutState& layoutState, const Box& layoutBox, std::optional<LayoutUnit> usedWidth)
>@@ -600,10 +600,10 @@ HorizontalGeometry FormattingContext::Geometry::outOfFlowReplacedHorizontalGeome
> 
>     auto left = computedValueIfNotAuto(style.logicalLeft(), containingBlockWidth);
>     auto right = computedValueIfNotAuto(style.logicalRight(), containingBlockWidth);
>-    auto marginLeft = computedValueIfNotAuto(style.marginLeft(), containingBlockWidth);
>-    auto marginRight = computedValueIfNotAuto(style.marginRight(), containingBlockWidth);
>-    auto nonComputedMarginLeft = marginLeft.value_or(0);
>-    auto nonComputedMarginRight = marginRight.value_or(0);
>+    auto marginStart = computedValueIfNotAuto(style.marginStart(), containingBlockWidth);
>+    auto marginEnd = computedValueIfNotAuto(style.marginEnd(), containingBlockWidth);
>+    auto nonComputedMarginStart = marginStart.value_or(0);
>+    auto nonComputedMarginEnd = marginEnd.value_or(0);
>     auto width = inlineReplacedWidthAndMargin(layoutState, layoutBox, usedWidth).width;
>     auto paddingLeft = displayBox.paddingLeft().value_or(0);
>     auto paddingRight = displayBox.paddingRight().value_or(0);
>@@ -621,55 +621,55 @@ HorizontalGeometry FormattingContext::Geometry::outOfFlowReplacedHorizontalGeome
> 
>     if (!left || !right) {
>         // #2
>-        marginLeft = marginLeft.value_or(0); 
>-        marginRight = marginRight.value_or(0); 
>+        marginStart = marginStart.value_or(0); 
>+        marginEnd = marginEnd.value_or(0); 
>     }
> 
>-    if (!marginLeft && !marginRight) {
>+    if (!marginStart && !marginEnd) {
>         // #3
>-        auto marginLeftAndRight = containingBlockWidth - (*left + borderLeft + paddingLeft + width + paddingRight + borderRight + *right);
>-        if (marginLeftAndRight >= 0)
>-            marginLeft = marginRight = marginLeftAndRight / 2;
>+        auto marginStartAndEnd = containingBlockWidth - (*left + borderLeft + paddingLeft + width + paddingRight + borderRight + *right);
>+        if (marginStartAndEnd >= 0)
>+            marginStart = marginEnd = marginStartAndEnd / 2;
>         else {
>             if (isLeftToRightDirection) {
>-                marginLeft = 0_lu;
>-                marginRight = containingBlockWidth - (*left + *marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRight + *right);
>+                marginStart = 0_lu;
>+                marginEnd = containingBlockWidth - (*left + *marginStart + borderLeft + paddingLeft + width + paddingRight + borderRight + *right);
>             } else {
>-                marginRight = 0_lu;
>-                marginLeft = containingBlockWidth - (*left + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginRight + *right);
>+                marginEnd = 0_lu;
>+                marginStart = containingBlockWidth - (*left + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginEnd + *right);
>             }
>         }
>     }
> 
>     // #4
>     if (!left)
>-        left = containingBlockWidth - (*marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginRight + *right);
>+        left = containingBlockWidth - (*marginStart + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginEnd + *right);
> 
>     if (!right)
>-        right = containingBlockWidth - (*left + *marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginRight);
>+        right = containingBlockWidth - (*left + *marginStart + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginEnd);
> 
>-    if (!marginLeft)
>-        marginLeft = containingBlockWidth - (*left + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginRight + *right);
>+    if (!marginStart)
>+        marginStart = containingBlockWidth - (*left + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginEnd + *right);
> 
>-    if (!marginRight)
>-        marginRight = containingBlockWidth - (*left + *marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRight + *right);
>+    if (!marginEnd)
>+        marginEnd = containingBlockWidth - (*left + *marginStart + borderLeft + paddingLeft + width + paddingRight + borderRight + *right);
> 
>-    auto boxWidth = (*left + *marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginRight + *right);
>+    auto boxWidth = (*left + *marginStart + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginEnd + *right);
>     if (boxWidth > containingBlockWidth) {
>         // #5 Over-constrained?
>         if (isLeftToRightDirection)
>-            right = containingBlockWidth - (*left + *marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginRight);
>+            right = containingBlockWidth - (*left + *marginStart + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginEnd);
>         else
>-            left = containingBlockWidth - (*marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginRight + *right);
>+            left = containingBlockWidth - (*marginStart + borderLeft + paddingLeft + width + paddingRight + borderRight + *marginEnd + *right);
>     }
> 
>     ASSERT(left);
>     ASSERT(right);
>-    ASSERT(marginLeft);
>-    ASSERT(marginRight);
>+    ASSERT(marginStart);
>+    ASSERT(marginEnd);
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Position][Width][Margin] -> out-of-flow replaced -> left(" << *left << "px) right("  << *right << "px) width(" << width << "px) margin(" << *marginLeft << "px, "  << *marginRight << "px) layoutBox(" << &layoutBox << ")");
>-    return { *left, *right, { width, { *marginLeft, *marginRight }, { nonComputedMarginLeft, nonComputedMarginRight } } };
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Position][Width][Margin] -> out-of-flow replaced -> left(" << *left << "px) right("  << *right << "px) width(" << width << "px) margin(" << *marginStart << "px, "  << *marginEnd << "px) layoutBox(" << &layoutBox << ")");
>+    return { *left, *right, { width, { *marginStart, *marginEnd }, { nonComputedMarginStart, nonComputedMarginEnd } } };
> }
> 
> HeightAndMargin FormattingContext::Geometry::complicatedCases(const LayoutState& layoutState, const Box& layoutBox, std::optional<LayoutUnit> usedHeight)
>@@ -693,12 +693,12 @@ HeightAndMargin FormattingContext::Geometry::complicatedCases(const LayoutState&
>     auto containingBlockWidth = containingBlockDisplayBox.contentBoxWidth();
> 
>     auto height = usedHeight ? usedHeight.value() : computedHeightValue(layoutState, layoutBox, HeightType::Normal);
>-    auto marginTop = computedValueIfNotAuto(style.marginTop(), containingBlockWidth);
>-    auto marginBottom = computedValueIfNotAuto(style.marginBottom(), containingBlockWidth);
>+    auto marginBefore = computedValueIfNotAuto(style.marginBefore(), containingBlockWidth);
>+    auto marginAfter = computedValueIfNotAuto(style.marginAfter(), containingBlockWidth);
> 
>     // #1
>-    marginTop = marginTop.value_or(0);
>-    marginBottom = marginBottom.value_or(0);
>+    marginBefore = marginBefore.value_or(0);
>+    marginAfter = marginAfter.value_or(0);
>     // #2
>     if (!height) {
>         ASSERT(isHeightAuto(layoutBox));
>@@ -706,11 +706,11 @@ HeightAndMargin FormattingContext::Geometry::complicatedCases(const LayoutState&
>     }
> 
>     ASSERT(height);
>-    ASSERT(marginTop);
>-    ASSERT(marginBottom);
>+    ASSERT(marginBefore);
>+    ASSERT(marginAfter);
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Height][Margin] -> floating non-replaced -> height(" << *height << "px) margin(" << *marginTop << "px, " << *marginBottom << "px) -> layoutBox(" << &layoutBox << ")");
>-    return HeightAndMargin { *height, { { *marginTop, *marginBottom }, { } } };
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Height][Margin] -> floating non-replaced -> height(" << *height << "px) margin(" << *marginBefore << "px, " << *marginAfter << "px) -> layoutBox(" << &layoutBox << ")");
>+    return HeightAndMargin { *height, { { *marginBefore, *marginAfter }, { } } };
> }
> 
> WidthAndMargin FormattingContext::Geometry::floatingNonReplacedWidthAndMargin(LayoutState& layoutState, const Box& layoutBox, std::optional<LayoutUnit> usedWidth)
>@@ -732,7 +732,7 @@ WidthAndMargin FormattingContext::Geometry::floatingNonReplacedWidthAndMargin(La
>     if (!width)
>         width = shrinkToFitWidth(layoutState, layoutBox);
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Width][Margin] -> floating non-replaced -> width(" << *width << "px) margin(" << margin.left << "px, " << margin.right << "px) -> layoutBox(" << &layoutBox << ")");
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Width][Margin] -> floating non-replaced -> width(" << *width << "px) margin(" << margin.start << "px, " << margin.end << "px) -> layoutBox(" << &layoutBox << ")");
>     return WidthAndMargin { *width, margin, margin };
> }
> 
>@@ -757,7 +757,7 @@ WidthAndMargin FormattingContext::Geometry::floatingReplacedWidthAndMargin(const
>     auto margin = computedNonCollapsedHorizontalMarginValue(layoutState, layoutBox);
> 
>     LOG_WITH_STREAM(FormattingContextLayout, stream << "[Height][Margin] -> floating replaced -> redirected to inline replaced");
>-    return inlineReplacedWidthAndMargin(layoutState, layoutBox, usedWidth, margin.left, margin.right);
>+    return inlineReplacedWidthAndMargin(layoutState, layoutBox, usedWidth, margin.start, margin.end);
> }
> 
> VerticalGeometry FormattingContext::Geometry::outOfFlowVerticalGeometry(const LayoutState& layoutState, const Box& layoutBox, std::optional<LayoutUnit> usedHeight)
>@@ -837,12 +837,12 @@ HeightAndMargin FormattingContext::Geometry::inlineReplacedHeightAndMargin(const
> 
>     ASSERT(height);
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Height][Margin] -> inflow replaced -> height(" << *height << "px) margin(" << margin.top << "px, " << margin.bottom << "px) -> layoutBox(" << &layoutBox << ")");
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Height][Margin] -> inflow replaced -> height(" << *height << "px) margin(" << margin.before << "px, " << margin.after << "px) -> layoutBox(" << &layoutBox << ")");
>     return { *height, { margin, { } } };
> }
> 
> WidthAndMargin FormattingContext::Geometry::inlineReplacedWidthAndMargin(const LayoutState& layoutState, const Box& layoutBox,
>-    std::optional<LayoutUnit> usedWidth, std::optional<LayoutUnit> precomputedMarginLeft, std::optional<LayoutUnit> precomputedMarginRight)
>+    std::optional<LayoutUnit> usedWidth, std::optional<LayoutUnit> precomputedMarginStart, std::optional<LayoutUnit> precomputedMarginEnd)
> {
>     ASSERT((layoutBox.isOutOfFlowPositioned() || layoutBox.isFloatingPositioned() || layoutBox.isInFlow()) && layoutBox.replaced());
> 
>@@ -869,27 +869,27 @@ WidthAndMargin FormattingContext::Geometry::inlineReplacedWidthAndMargin(const L
>     auto& containingBlockDisplayBox = layoutState.displayBoxForLayoutBox(*layoutBox.containingBlock());
>     auto containingBlockWidth = containingBlockDisplayBox.width();
> 
>-    auto computeMarginRight = [&]() {
>-        if (precomputedMarginRight)
>-            return precomputedMarginRight.value();
>-        auto marginRight = computedValueIfNotAuto(style.marginRight(), containingBlockWidth);
>-        return marginRight.value_or(0_lu);
>+    auto computeMarginEnd = [&]() {
>+        if (precomputedMarginEnd)
>+            return precomputedMarginEnd.value();
>+        auto marginEnd = computedValueIfNotAuto(style.marginEnd(), containingBlockWidth);
>+        return marginEnd.value_or(0_lu);
>     };
> 
>-    auto computeMarginLeft = [&]() {
>-        if (precomputedMarginLeft)
>-            return precomputedMarginLeft.value();
>-        auto marginLeft = computedValueIfNotAuto(style.marginLeft(), containingBlockWidth);
>-        return marginLeft.value_or(0_lu);
>+    auto computeMarginStart = [&]() {
>+        if (precomputedMarginStart)
>+            return precomputedMarginStart.value();
>+        auto marginStart = computedValueIfNotAuto(style.marginStart(), containingBlockWidth);
>+        return marginStart.value_or(0_lu);
>     };
> 
>     auto replaced = layoutBox.replaced();
>     ASSERT(replaced);
> 
>-    auto marginLeft = computeMarginLeft();
>-    auto marginRight = computeMarginRight();
>-    auto nonComputedMarginLeft = computedValueIfNotAuto(style.marginLeft(), containingBlockWidth).value_or(0);
>-    auto nonComputedMarginRight = computedValueIfNotAuto(style.marginRight(), containingBlockWidth).value_or(0);
>+    auto marginStart = computeMarginStart();
>+    auto marginEnd = computeMarginEnd();
>+    auto nonComputedMarginStart = computedValueIfNotAuto(style.marginStart(), containingBlockWidth).value_or(0);
>+    auto nonComputedMarginEnd = computedValueIfNotAuto(style.marginEnd(), containingBlockWidth).value_or(0);
>     auto width = computedValueIfNotAuto(usedWidth ? Length { usedWidth.value(), Fixed } : style.logicalWidth(), containingBlockWidth);
> 
>     auto heightIsAuto = isHeightAuto(layoutBox);
>@@ -916,8 +916,8 @@ WidthAndMargin FormattingContext::Geometry::inlineReplacedWidthAndMargin(const L
> 
>     ASSERT(width);
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Width][Margin] -> inflow replaced -> width(" << *width << "px) margin(" << marginLeft << "px, " << marginRight << "px) -> layoutBox(" << &layoutBox << ")");
>-    return { *width, { marginLeft, marginRight }, { nonComputedMarginLeft, nonComputedMarginRight } };
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Width][Margin] -> inflow replaced -> width(" << *width << "px) margin(" << marginStart << "px, " << marginEnd << "px) -> layoutBox(" << &layoutBox << ")");
>+    return { *width, { marginStart, marginEnd }, { nonComputedMarginStart, nonComputedMarginEnd } };
> }
> 
> LayoutSize FormattingContext::Geometry::inFlowPositionedPositionOffset(const LayoutState& layoutState, const Box& layoutBox)
>@@ -1025,11 +1025,11 @@ HorizontalMargin FormattingContext::Geometry::computedNonCollapsedHorizontalMarg
>     auto& style = layoutBox.style();
>     auto containingBlockWidth = layoutState.displayBoxForLayoutBox(*layoutBox.containingBlock()).contentBoxWidth();
> 
>-    auto marginLeft = computedValueIfNotAuto(style.marginLeft(), containingBlockWidth).value_or(0_lu);
>-    auto marginRight = computedValueIfNotAuto(style.marginRight(), containingBlockWidth).value_or(0_lu);
>+    auto marginStart = computedValueIfNotAuto(style.marginStart(), containingBlockWidth).value_or(0_lu);
>+    auto marginEnd = computedValueIfNotAuto(style.marginEnd(), containingBlockWidth).value_or(0_lu);
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Margin] -> non collapsed horizontal -> margin(" << marginLeft << "px, " << marginRight << "px) -> layoutBox: " << &layoutBox);
>-    return { marginLeft, marginRight };
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Margin] -> non collapsed horizontal -> margin(" << marginStart << "px, " << marginEnd << "px) -> layoutBox: " << &layoutBox);
>+    return { marginStart, marginEnd };
> }
> 
> VerticalMargin::ComputedValues FormattingContext::Geometry::computedNonCollapsedVerticalMarginValue(const LayoutState& layoutState, const Box& layoutBox)
>@@ -1037,11 +1037,11 @@ VerticalMargin::ComputedValues FormattingContext::Geometry::computedNonCollapsed
>     auto& style = layoutBox.style();
>     auto containingBlockWidth = layoutState.displayBoxForLayoutBox(*layoutBox.containingBlock()).contentBoxWidth();
> 
>-    auto marginTop = computedValueIfNotAuto(style.marginTop(), containingBlockWidth).value_or(0_lu);
>-    auto marginBottom = computedValueIfNotAuto(style.marginBottom(), containingBlockWidth).value_or(0_lu);
>+    auto marginBefore = computedValueIfNotAuto(style.marginBefore(), containingBlockWidth).value_or(0_lu);
>+    auto marginAfter = computedValueIfNotAuto(style.marginAfter(), containingBlockWidth).value_or(0_lu);
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Margin] -> non collapsed vertical -> margin(" << marginTop << "px, " << marginBottom << "px) -> layoutBox: " << &layoutBox);
>-    return { marginTop, marginBottom };
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Margin] -> non collapsed vertical -> margin(" << marginBefore << "px, " << marginAfter << "px) -> layoutBox: " << &layoutBox);
>+    return { marginBefore, marginAfter };
> }
> 
> }
>diff --git a/Source/WebCore/layout/FormattingContextQuirks.cpp b/Source/WebCore/layout/FormattingContextQuirks.cpp
>index a3c5b6e8975ff9bb59f00ab7c08503715f1703ab..d10abe27655ad9d9b939eda108c1a1534dcb9829 100644
>--- a/Source/WebCore/layout/FormattingContextQuirks.cpp
>+++ b/Source/WebCore/layout/FormattingContextQuirks.cpp
>@@ -40,27 +40,27 @@ LayoutUnit FormattingContext::Quirks::heightValueOfNearestContainingBlockWithFix
>     // In quirks mode, we go and travers the containing block chain to find a block level box with fixed height value, even if it means leaving
>     // the current formatting context. FIXME: surely we need to do some tricks here when block direction support is added.
>     auto* containingBlock = layoutBox.containingBlock();
>-    LayoutUnit bodyAndDocumentVerticalMarginsPaddingsAndBorders;
>+    LayoutUnit bodyAndDocumentVerticalMarginPaddingAndBorder;
>     while (containingBlock) {
>         auto containingBlockHeight = containingBlock->style().logicalHeight();
>         if (containingBlockHeight.isFixed())
>-            return containingBlockHeight.value() - bodyAndDocumentVerticalMarginsPaddingsAndBorders;
>+            return containingBlockHeight.value() - bodyAndDocumentVerticalMarginPaddingAndBorder;
> 
>         // If the only fixed value box we find is the ICB, then ignore the body and the document (vertical) margin, padding and border. So much quirkiness.
>         // -and it's totally insane because now we freely travel across formatting context boundaries and computed margins are nonexistent.
>         if (containingBlock->isBodyBox() || containingBlock->isDocumentBox()) {
>             auto& displayBox = layoutState.displayBoxForLayoutBox(*containingBlock);
> 
>-            auto verticalMargins = FormattingContext::Geometry::computedNonCollapsedVerticalMarginValue(layoutState, *containingBlock);
>-            auto verticalPaddings = displayBox.paddingTop().value_or(0) + displayBox.paddingBottom().value_or(0);
>-            auto verticalBorders = displayBox.borderTop() + displayBox.borderBottom();
>-            bodyAndDocumentVerticalMarginsPaddingsAndBorders += verticalMargins.top + verticalMargins.bottom + verticalPaddings + verticalBorders;
>+            auto verticalMargin = FormattingContext::Geometry::computedNonCollapsedVerticalMarginValue(layoutState, *containingBlock);
>+            auto verticalPadding = displayBox.paddingTop().value_or(0) + displayBox.paddingBottom().value_or(0);
>+            auto verticalBorder = displayBox.borderTop() + displayBox.borderBottom();
>+            bodyAndDocumentVerticalMarginPaddingAndBorder += verticalMargin.before + verticalMargin.after + verticalPadding + verticalBorder;
>         }
> 
>         containingBlock = containingBlock->containingBlock();
>     }
>     // Initial containing block has to have a height.
>-    return layoutState.displayBoxForLayoutBox(layoutBox.initialContainingBlock()).contentBox().height() - bodyAndDocumentVerticalMarginsPaddingsAndBorders;
>+    return layoutState.displayBoxForLayoutBox(layoutBox.initialContainingBlock()).contentBox().height() - bodyAndDocumentVerticalMarginPaddingAndBorder;
> }
> 
> }
>diff --git a/Source/WebCore/layout/MarginTypes.h b/Source/WebCore/layout/MarginTypes.h
>index 7146e2291607c84068b72179bd553399a91526fd..6e53f8879ac999e5ddee6bad70a07eacdc36ebe6 100644
>--- a/Source/WebCore/layout/MarginTypes.h
>+++ b/Source/WebCore/layout/MarginTypes.h
>@@ -34,15 +34,15 @@ namespace Layout {
> 
> struct VerticalMargin {
>     struct ComputedValues {
>-        LayoutUnit top;
>-        LayoutUnit bottom;
>+        LayoutUnit before;
>+        LayoutUnit after;
>     };
>     ComputedValues usedValues() const;
>     ComputedValues nonCollapsedValues() const { return m_nonCollapsed; }
>     
>     struct CollapsedValues {
>-        std::optional<LayoutUnit> top;
>-        std::optional<LayoutUnit> bottom;
>+        std::optional<LayoutUnit> before;
>+        std::optional<LayoutUnit> after;
>     };
>     std::optional<CollapsedValues> collapsedValues() const { return m_collapsed; }
>     void setCollapsedValues(CollapsedValues collapsedValues) { m_collapsed = collapsedValues; }
>@@ -57,8 +57,8 @@ private:
> };
> 
> struct HorizontalMargin {
>-    LayoutUnit left;
>-    LayoutUnit right;
>+    LayoutUnit start;
>+    LayoutUnit end;
> };
> 
> struct PositiveAndNegativeVerticalMargin {
>@@ -66,8 +66,8 @@ struct PositiveAndNegativeVerticalMargin {
>         std::optional<LayoutUnit> positive;
>         std::optional<LayoutUnit> negative;
>     };
>-    Values top;
>-    Values bottom;
>+    Values before;
>+    Values after;
> };
> 
> inline VerticalMargin::VerticalMargin(VerticalMargin::ComputedValues nonCollapsed, std::optional<VerticalMargin::CollapsedValues> collapsed)
>@@ -80,8 +80,8 @@ inline VerticalMargin::ComputedValues VerticalMargin::usedValues() const
> {
>     if (!m_collapsed)
>         return m_nonCollapsed;
>-    return { m_collapsed->top.value_or(m_nonCollapsed.top),
>-        m_collapsed->bottom.value_or(m_nonCollapsed.bottom) };
>+    return { m_collapsed->before.value_or(m_nonCollapsed.before),
>+        m_collapsed->after.value_or(m_nonCollapsed.after) };
> }
> 
> }
>diff --git a/Source/WebCore/layout/Verification.cpp b/Source/WebCore/layout/Verification.cpp
>index a22e234b359c7b5ae6e9d9f5b08a6f55373f491f..8eb054743afa0ec5a8f2b834694c4e58719fc2f7 100644
>--- a/Source/WebCore/layout/Verification.cpp
>+++ b/Source/WebCore/layout/Verification.cpp
>@@ -246,10 +246,10 @@ static bool outputMismatchingBlockBoxInformationIfNeeded(TextStream& stream, con
>         auto borderBox = displayBox.borderBox();
> 
>         return Display::Box::Rect {
>-            borderBox.top() - displayBox.nonCollapsedMarginTop(),
>-            borderBox.left() - displayBox.nonComputedMarginLeft(),
>-            displayBox.nonComputedMarginLeft() + borderBox.width() + displayBox.nonComputedMarginRight(),
>-            displayBox.nonCollapsedMarginTop() + borderBox.height() + displayBox.nonCollapsedMarginBottom()
>+            borderBox.top() - displayBox.nonCollapsedMarginBefore(),
>+            borderBox.left() - displayBox.nonComputedMarginStart(),
>+            displayBox.nonComputedMarginStart() + borderBox.width() + displayBox.nonComputedMarginEnd(),
>+            displayBox.nonCollapsedMarginBefore() + borderBox.height() + displayBox.nonCollapsedMarginAfter()
>         };
>     };
> 
>diff --git a/Source/WebCore/layout/blockformatting/BlockFormattingContext.cpp b/Source/WebCore/layout/blockformatting/BlockFormattingContext.cpp
>index 1e36cba67589f875e6a6787f3e21b9d9c00e900b..6afad42102c8d75b6b836852887122a28b23d5f0 100644
>--- a/Source/WebCore/layout/blockformatting/BlockFormattingContext.cpp
>+++ b/Source/WebCore/layout/blockformatting/BlockFormattingContext.cpp
>@@ -184,17 +184,17 @@ void BlockFormattingContext::computeStaticPosition(const Box& layoutBox) const
>     layoutState.displayBoxForLayoutBox(layoutBox).setTopLeft(Geometry::staticPosition(layoutState, layoutBox));
> }
> 
>-void BlockFormattingContext::computeEstimatedMarginTop(const Box& layoutBox) const
>+void BlockFormattingContext::computeEstimatedMarginBefore(const Box& layoutBox) const
> {
>     auto& layoutState = this->layoutState();
>-    auto estimatedMarginTop = Geometry::estimatedMarginTop(layoutState, layoutBox);
>+    auto estimatedMarginBefore = Geometry::estimatedMarginBefore(layoutState, layoutBox);
> 
>     auto& displayBox = layoutState.displayBoxForLayoutBox(layoutBox);
>-    displayBox.setEstimatedMarginTop(estimatedMarginTop);
>-    displayBox.moveVertically(estimatedMarginTop);
>+    displayBox.setEstimatedMarginBefore(estimatedMarginBefore);
>+    displayBox.moveVertically(estimatedMarginBefore);
> }
> 
>-void BlockFormattingContext::computeEstimatedMarginTopForAncestors(const Box& layoutBox) const
>+void BlockFormattingContext::computeEstimatedMarginBeforeForAncestors(const Box& layoutBox) const
> {
>     // We only need to estimate margin top for float related layout (formatting context roots avoid floats).
>     ASSERT(layoutBox.isFloatingPositioned() || layoutBox.hasFloatClear() || layoutBox.establishesBlockFormattingContext() || layoutBox.establishesInlineFormattingContext());
>@@ -213,10 +213,10 @@ void BlockFormattingContext::computeEstimatedMarginTopForAncestors(const Box& la
>     for (auto* ancestor = layoutBox.containingBlock(); ancestor && !ancestor->establishesBlockFormattingContext(); ancestor = ancestor->containingBlock()) {
>         auto& displayBox = layoutState.displayBoxForLayoutBox(*ancestor);
>         // FIXME: with incremental layout, we might actually have a valid (non-estimated) margin top as well.
>-        if (displayBox.estimatedMarginTop())
>+        if (displayBox.estimatedMarginBefore())
>             return;
> 
>-        computeEstimatedMarginTop(*ancestor);
>+        computeEstimatedMarginBefore(*ancestor);
>     }
> }
> 
>@@ -226,22 +226,22 @@ void BlockFormattingContext::precomputeVerticalPositionForFormattingRootIfNeeded
> 
>     auto avoidsFloats = layoutBox.isFloatingPositioned() || layoutBox.establishesBlockFormattingContext() || layoutBox.hasFloatClear();
>     if (avoidsFloats)
>-        computeEstimatedMarginTopForAncestors(layoutBox);
>+        computeEstimatedMarginBeforeForAncestors(layoutBox);
> 
>     // If the inline formatting root is also the root for the floats (happens when the root box also establishes a block formatting context)
>     // the floats are in the coordinate system of this root. No need to find the final vertical position.
>     auto inlineContextInheritsFloats = layoutBox.establishesInlineFormattingContext() && !layoutBox.establishesBlockFormattingContext();
>     if (inlineContextInheritsFloats) {
>-        computeEstimatedMarginTop(layoutBox);
>-        computeEstimatedMarginTopForAncestors(layoutBox);
>+        computeEstimatedMarginBefore(layoutBox);
>+        computeEstimatedMarginBeforeForAncestors(layoutBox);
>     }
> }
> 
> #ifndef NDEBUG
>-static bool hasPrecomputedMarginTop(const LayoutState& layoutState, const Box& layoutBox)
>+static bool hasPrecomputedMarginBefore(const LayoutState& layoutState, const Box& layoutBox)
> {
>     for (auto* ancestor = layoutBox.containingBlock(); ancestor && !ancestor->establishesBlockFormattingContext(); ancestor = ancestor->containingBlock()) {
>-        if (layoutState.displayBoxForLayoutBox(*ancestor).estimatedMarginTop())
>+        if (layoutState.displayBoxForLayoutBox(*ancestor).estimatedMarginBefore())
>             continue;
>         return false;
>     }
>@@ -253,7 +253,7 @@ void BlockFormattingContext::computeFloatingPosition(const FloatingContext& floa
> {
>     auto& layoutState = this->layoutState();
>     ASSERT(layoutBox.isFloatingPositioned());
>-    ASSERT(hasPrecomputedMarginTop(layoutState, layoutBox));
>+    ASSERT(hasPrecomputedMarginBefore(layoutState, layoutBox));
> 
>     auto& displayBox = layoutState.displayBoxForLayoutBox(layoutBox);
>     // 8.3.1 Collapsing margins
>@@ -261,7 +261,7 @@ void BlockFormattingContext::computeFloatingPosition(const FloatingContext& floa
>     // Adjust the static position by using the previous inflow box's non-collapsed margin.
>     if (auto* previousInFlowBox = layoutBox.previousInFlowSibling()) {
>         auto& previousDisplayBox = layoutState.displayBoxForLayoutBox(*previousInFlowBox);
>-        displayBox.moveVertically(previousDisplayBox.nonCollapsedMarginBottom() - previousDisplayBox.marginBottom());
>+        displayBox.moveVertically(previousDisplayBox.nonCollapsedMarginAfter() - previousDisplayBox.marginAfter());
>     }
>     displayBox.setTopLeft(floatingContext.positionForFloat(layoutBox));
> }
>@@ -273,7 +273,7 @@ void BlockFormattingContext::computePositionToAvoidFloats(const FloatingContext&
>     ASSERT(layoutBox.establishesBlockFormattingContext());
>     ASSERT(!layoutBox.isFloatingPositioned());
>     ASSERT(!layoutBox.hasFloatClear());
>-    ASSERT(hasPrecomputedMarginTop(layoutState, layoutBox));
>+    ASSERT(hasPrecomputedMarginBefore(layoutState, layoutBox));
> 
>     if (floatingContext.floatingState().isEmpty())
>         return;
>@@ -291,8 +291,8 @@ void BlockFormattingContext::computeVerticalPositionForFloatClear(const Floating
>     auto& layoutState = this->layoutState();
>     // For formatting roots, we already precomputed final position.
>     if (!layoutBox.establishesFormattingContext())
>-        computeEstimatedMarginTopForAncestors(layoutBox);
>-    ASSERT(hasPrecomputedMarginTop(layoutState, layoutBox));
>+        computeEstimatedMarginBeforeForAncestors(layoutBox);
>+    ASSERT(hasPrecomputedMarginBefore(layoutState, layoutBox));
> 
>     if (auto verticalPositionWithClearance = floatingContext.verticalPositionWithClearance(layoutBox))
>         layoutState.displayBoxForLayoutBox(layoutBox).setTop(*verticalPositionWithClearance);
>@@ -331,7 +331,7 @@ void BlockFormattingContext::computeWidthAndMargin(const Box& layoutBox) const
> 
>     auto& displayBox = layoutState.displayBoxForLayoutBox(layoutBox);
>     displayBox.setContentBoxWidth(widthAndMargin.width);
>-    displayBox.moveHorizontally(widthAndMargin.margin.left);
>+    displayBox.moveHorizontally(widthAndMargin.margin.start);
>     displayBox.setHorizontalMargin(widthAndMargin.margin);
>     displayBox.setHorizontalNonComputedMargin(widthAndMargin.nonComputedMargin);
> }
>@@ -376,8 +376,8 @@ void BlockFormattingContext::computeHeightAndMargin(const Box& layoutBox) const
>     displayBox.setVerticalMargin(heightAndMargin.margin);
> 
>     // If this box has already been moved by the estimated vertical margin, no need to move it again.
>-    if (layoutBox.isFloatingPositioned() || !displayBox.estimatedMarginTop())
>-        displayBox.moveVertically(heightAndMargin.margin.usedValues().top);
>+    if (layoutBox.isFloatingPositioned() || !displayBox.estimatedMarginBefore())
>+        displayBox.moveVertically(heightAndMargin.margin.usedValues().before);
> }
> 
> FormattingContext::InstrinsicWidthConstraints BlockFormattingContext::instrinsicWidthConstraints() const
>diff --git a/Source/WebCore/layout/blockformatting/BlockFormattingContext.h b/Source/WebCore/layout/blockformatting/BlockFormattingContext.h
>index e677e0174f0ed58c162fb6b713de096b11f0fd30..f44e02157f2012c64a764afd9ca6df9a1371c356 100644
>--- a/Source/WebCore/layout/blockformatting/BlockFormattingContext.h
>+++ b/Source/WebCore/layout/blockformatting/BlockFormattingContext.h
>@@ -61,8 +61,8 @@ private:
>     void computePositionToAvoidFloats(const FloatingContext&, const Box&) const;
>     void computeVerticalPositionForFloatClear(const FloatingContext&, const Box&) const;
> 
>-    void computeEstimatedMarginTopForAncestors(const Box&) const;
>-    void computeEstimatedMarginTop(const Box&) const;
>+    void computeEstimatedMarginBeforeForAncestors(const Box&) const;
>+    void computeEstimatedMarginBefore(const Box&) const;
> 
>     void precomputeVerticalPositionForFormattingRootIfNeeded(const Box&) const;
> 
>@@ -79,30 +79,30 @@ private:
>         static bool instrinsicWidthConstraintsNeedChildrenWidth(const Box&);
>         static InstrinsicWidthConstraints instrinsicWidthConstraints(const LayoutState&, const Box&);
> 
>-        static LayoutUnit estimatedMarginTop(const LayoutState&, const Box&);
>-        static LayoutUnit estimatedMarginBottom(const LayoutState&, const Box&);
>+        static LayoutUnit estimatedMarginBefore(const LayoutState&, const Box&);
>+        static LayoutUnit estimatedMarginAfter(const LayoutState&, const Box&);
> 
>     private:
>         // This class implements margin collapsing for block formatting context.
>         class MarginCollapse {
>         public:
>-            static LayoutUnit marginTop(const LayoutState&, const Box&);
>-            static LayoutUnit marginBottom(const LayoutState&, const Box&);
>+            static LayoutUnit marginBefore(const LayoutState&, const Box&);
>+            static LayoutUnit marginAfter(const LayoutState&, const Box&);
> 
>-            static bool isMarginBottomCollapsedWithParent(const Box&);
>-            static bool isMarginTopCollapsedWithParentMarginBottom(const Box&);
>+            static bool isMarginAfterCollapsedWithParent(const Box&);
>+            static bool isMarginBeforeCollapsedWithParentMarginAfter(const Box&);
> 
>         private:
>-            static LayoutUnit collapsedMarginBottomFromLastChild(const LayoutState&, const Box&);
>-            static LayoutUnit nonCollapsedMarginBottom(const LayoutState&, const Box&);
>+            static LayoutUnit collapsedMarginAfterFromLastChild(const LayoutState&, const Box&);
>+            static LayoutUnit nonCollapsedMarginAfter(const LayoutState&, const Box&);
> 
>-            static LayoutUnit computedNonCollapsedMarginTop(const LayoutState&, const Box&);
>-            static LayoutUnit computedNonCollapsedMarginBottom(const LayoutState&, const Box&);
>+            static LayoutUnit computedNonCollapsedMarginBefore(const LayoutState&, const Box&);
>+            static LayoutUnit computedNonCollapsedMarginAfter(const LayoutState&, const Box&);
> 
>-            static LayoutUnit collapsedMarginTopFromFirstChild(const LayoutState&, const Box&);
>-            static LayoutUnit nonCollapsedMarginTop(const LayoutState&, const Box&);
>+            static LayoutUnit collapsedMarginBeforeFromFirstChild(const LayoutState&, const Box&);
>+            static LayoutUnit nonCollapsedMarginBefore(const LayoutState&, const Box&);
> 
>-            static bool isMarginTopCollapsedWithParent(const LayoutState&, const Box&);
>+            static bool isMarginBeforeCollapsedWithParent(const LayoutState&, const Box&);
>         };
> 
>         static HeightAndMargin inFlowNonReplacedHeightAndMargin(const LayoutState&, const Box&, std::optional<LayoutUnit> usedHeight = { });
>@@ -116,7 +116,7 @@ private:
>         static bool needsStretching(const LayoutState&, const Box&);
>         static HeightAndMargin stretchedHeight(const LayoutState&, const Box&, HeightAndMargin);
> 
>-        static bool shouldIgnoreMarginTop(const LayoutState&, const Box&);
>+        static bool shouldIgnoreMarginBefore(const LayoutState&, const Box&);
>     };
> };
> 
>diff --git a/Source/WebCore/layout/blockformatting/BlockFormattingContextGeometry.cpp b/Source/WebCore/layout/blockformatting/BlockFormattingContextGeometry.cpp
>index ebe1a2270b8981f16e9ea13b1ecb6f97ba87a065..39f940b87eab9394532a7c51acf849a2655277e2 100644
>--- a/Source/WebCore/layout/blockformatting/BlockFormattingContextGeometry.cpp
>+++ b/Source/WebCore/layout/blockformatting/BlockFormattingContextGeometry.cpp
>@@ -61,9 +61,9 @@ HeightAndMargin BlockFormattingContext::Geometry::inFlowNonReplacedHeightAndMarg
>         auto containingBlockWidth = layoutState.displayBoxForLayoutBox(*layoutBox.containingBlock()).contentBoxWidth();
>         auto& displayBox = layoutState.displayBoxForLayoutBox(layoutBox);
> 
>-        auto nonCollapsedMargin = VerticalMargin::ComputedValues { computedValueIfNotAuto(style.marginTop(), containingBlockWidth).value_or(0),
>-            computedValueIfNotAuto(style.marginBottom(), containingBlockWidth).value_or(0) }; 
>-        auto collapsedMargin = VerticalMargin::CollapsedValues { MarginCollapse::marginTop(layoutState, layoutBox), MarginCollapse::marginBottom(layoutState, layoutBox) };
>+        auto nonCollapsedMargin = VerticalMargin::ComputedValues { computedValueIfNotAuto(style.marginBefore(), containingBlockWidth).value_or(0),
>+            computedValueIfNotAuto(style.marginAfter(), containingBlockWidth).value_or(0) }; 
>+        auto collapsedMargin = VerticalMargin::CollapsedValues { MarginCollapse::marginBefore(layoutState, layoutBox), MarginCollapse::marginAfter(layoutState, layoutBox) };
>         auto borderAndPaddingTop = displayBox.borderTop() + displayBox.paddingTop().value_or(0);
> 
>         auto height = usedHeight ? usedHeight.value() : computedHeightValue(layoutState, layoutBox, HeightType::Normal);
>@@ -84,14 +84,14 @@ HeightAndMargin BlockFormattingContext::Geometry::inFlowNonReplacedHeightAndMarg
>         // 2. the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin...
>         auto* lastInFlowChild = downcast<Container>(layoutBox).lastInFlowChild();
>         ASSERT(lastInFlowChild);
>-        if (!MarginCollapse::isMarginBottomCollapsedWithParent(*lastInFlowChild)) {
>+        if (!MarginCollapse::isMarginAfterCollapsedWithParent(*lastInFlowChild)) {
>             auto& lastInFlowDisplayBox = layoutState.displayBoxForLayoutBox(*lastInFlowChild);
>-            return { lastInFlowDisplayBox.bottom() + lastInFlowDisplayBox.marginBottom() - borderAndPaddingTop, { nonCollapsedMargin, collapsedMargin } };
>+            return { lastInFlowDisplayBox.bottom() + lastInFlowDisplayBox.marginAfter() - borderAndPaddingTop, { nonCollapsedMargin, collapsedMargin } };
>         }
> 
>         // 3. the bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin
>         auto* inFlowChild = lastInFlowChild;
>-        while (inFlowChild && MarginCollapse::isMarginTopCollapsedWithParentMarginBottom(*inFlowChild))
>+        while (inFlowChild && MarginCollapse::isMarginBeforeCollapsedWithParentMarginAfter(*inFlowChild))
>             inFlowChild = inFlowChild->previousInFlowSibling();
>         if (inFlowChild) {
>             auto& inFlowDisplayBox = layoutState.displayBoxForLayoutBox(*inFlowChild);
>@@ -104,7 +104,7 @@ HeightAndMargin BlockFormattingContext::Geometry::inFlowNonReplacedHeightAndMarg
> 
>     auto heightAndMargin = compute();
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Height][Margin] -> inflow non-replaced -> height(" << heightAndMargin.height << "px) margin(" << heightAndMargin.margin.usedValues().top << "px, " << heightAndMargin.margin.usedValues().bottom << "px) -> layoutBox(" << &layoutBox << ")");
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Height][Margin] -> inflow non-replaced -> height(" << heightAndMargin.height << "px) margin(" << heightAndMargin.margin.usedValues().before << "px, " << heightAndMargin.margin.usedValues().after << "px) -> layoutBox(" << &layoutBox << ")");
>     return heightAndMargin;
> }
> 
>@@ -141,10 +141,10 @@ WidthAndMargin BlockFormattingContext::Geometry::inFlowNonReplacedWidthAndMargin
>         auto& displayBox = layoutState.displayBoxForLayoutBox(layoutBox);
> 
>         auto width = computedValueIfNotAuto(usedWidth ? Length { usedWidth.value(), Fixed } : style.logicalWidth(), containingBlockWidth);
>-        auto marginLeft = computedValueIfNotAuto(style.marginLeft(), containingBlockWidth);
>-        auto marginRight = computedValueIfNotAuto(style.marginRight(), containingBlockWidth);
>-        auto nonComputedMarginLeft = marginLeft.value_or(0);
>-        auto nonComputedMarginRight = marginRight.value_or(0);
>+        auto marginStart = computedValueIfNotAuto(style.marginStart(), containingBlockWidth);
>+        auto marginEnd = computedValueIfNotAuto(style.marginEnd(), containingBlockWidth);
>+        auto nonComputedMarginStart = marginStart.value_or(0);
>+        auto nonComputedMarginEnd = marginEnd.value_or(0);
>         auto borderLeft = displayBox.borderLeft();
>         auto borderRight = displayBox.borderRight();
>         auto paddingLeft = displayBox.paddingLeft().value_or(0);
>@@ -152,51 +152,51 @@ WidthAndMargin BlockFormattingContext::Geometry::inFlowNonReplacedWidthAndMargin
> 
>         // #1
>         if (width) {
>-            auto horizontalSpaceForMargin = containingBlockWidth - (marginLeft.value_or(0) + borderLeft + paddingLeft + *width + paddingRight + borderRight + marginRight.value_or(0));
>+            auto horizontalSpaceForMargin = containingBlockWidth - (marginStart.value_or(0) + borderLeft + paddingLeft + *width + paddingRight + borderRight + marginEnd.value_or(0));
>             if (horizontalSpaceForMargin < 0) {
>-                marginLeft = marginLeft.value_or(0);
>-                marginRight = marginRight.value_or(0);
>+                marginStart = marginStart.value_or(0);
>+                marginEnd = marginEnd.value_or(0);
>             }
>         }
> 
>         // #2
>-        if (width && marginLeft && marginRight) {
>+        if (width && marginStart && marginEnd) {
>             if (containingBlock->style().isLeftToRightDirection())
>-                marginRight = containingBlockWidth - (*marginLeft + borderLeft + paddingLeft  + *width + paddingRight + borderRight);
>+                marginEnd = containingBlockWidth - (*marginStart + borderLeft + paddingLeft  + *width + paddingRight + borderRight);
>             else
>-                marginLeft = containingBlockWidth - (borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginRight);
>+                marginStart = containingBlockWidth - (borderLeft + paddingLeft + *width + paddingRight + borderRight + *marginEnd);
>         }
> 
>         // #3
>-        if (!marginLeft && width && marginRight)
>-            marginLeft = containingBlockWidth - (borderLeft + paddingLeft  + *width + paddingRight + borderRight + *marginRight);
>-        else if (marginLeft && !width && marginRight)
>-            width = containingBlockWidth - (*marginLeft + borderLeft + paddingLeft + paddingRight + borderRight + *marginRight);
>-        else if (marginLeft && width && !marginRight)
>-            marginRight = containingBlockWidth - (*marginLeft + borderLeft + paddingLeft + *width + paddingRight + borderRight);
>+        if (!marginStart && width && marginEnd)
>+            marginStart = containingBlockWidth - (borderLeft + paddingLeft  + *width + paddingRight + borderRight + *marginEnd);
>+        else if (marginStart && !width && marginEnd)
>+            width = containingBlockWidth - (*marginStart + borderLeft + paddingLeft + paddingRight + borderRight + *marginEnd);
>+        else if (marginStart && width && !marginEnd)
>+            marginEnd = containingBlockWidth - (*marginStart + borderLeft + paddingLeft + *width + paddingRight + borderRight);
> 
>         // #4
>         if (!width) {
>-            marginLeft = marginLeft.value_or(0);
>-            marginRight = marginRight.value_or(0);
>-            width = containingBlockWidth - (*marginLeft + borderLeft + paddingLeft + paddingRight + borderRight + *marginRight);
>+            marginStart = marginStart.value_or(0);
>+            marginEnd = marginEnd.value_or(0);
>+            width = containingBlockWidth - (*marginStart + borderLeft + paddingLeft + paddingRight + borderRight + *marginEnd);
>         }
> 
>         // #5
>-        if (!marginLeft && !marginRight) {
>+        if (!marginStart && !marginEnd) {
>             auto horizontalSpaceForMargin = containingBlockWidth - (borderLeft + paddingLeft  + *width + paddingRight + borderRight);
>-            marginLeft = marginRight = horizontalSpaceForMargin / 2;
>+            marginStart = marginEnd = horizontalSpaceForMargin / 2;
>         }
> 
>         ASSERT(width);
>-        ASSERT(marginLeft);
>-        ASSERT(marginRight);
>+        ASSERT(marginStart);
>+        ASSERT(marginEnd);
> 
>-        return WidthAndMargin { *width, { *marginLeft, *marginRight }, { nonComputedMarginLeft, nonComputedMarginRight } };
>+        return WidthAndMargin { *width, { *marginStart, *marginEnd }, { nonComputedMarginStart, nonComputedMarginEnd } };
>     };
> 
>     auto widthAndMargin = compute();
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Width][Margin] -> inflow non-replaced -> width(" << widthAndMargin.width << "px) margin(" << widthAndMargin.margin.left << "px, " << widthAndMargin.margin.right << "px) -> layoutBox(" << &layoutBox << ")");
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Width][Margin] -> inflow non-replaced -> width(" << widthAndMargin.width << "px) margin(" << widthAndMargin.margin.start << "px, " << widthAndMargin.margin.end << "px) -> layoutBox(" << &layoutBox << ")");
>     return widthAndMargin;
> }
> 
>@@ -214,7 +214,7 @@ WidthAndMargin BlockFormattingContext::Geometry::inFlowReplacedWidthAndMargin(co
>     // #2
>     auto nonReplacedWidthAndMargin = inFlowNonReplacedWidthAndMargin(layoutState, layoutBox, width);
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Width][Margin] -> inflow replaced -> width(" << width << "px) margin(" << nonReplacedWidthAndMargin.margin.left << "px, " << nonReplacedWidthAndMargin.margin.right << "px) -> layoutBox(" << &layoutBox << ")");
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Width][Margin] -> inflow replaced -> width(" << width << "px) margin(" << nonReplacedWidthAndMargin.margin.start << "px, " << nonReplacedWidthAndMargin.margin.end << "px) -> layoutBox(" << &layoutBox << ")");
>     return { width, nonReplacedWidthAndMargin.margin, nonReplacedWidthAndMargin.nonComputedMargin };
> }
> 
>@@ -230,7 +230,7 @@ Point BlockFormattingContext::Geometry::staticPosition(const LayoutState& layout
>     auto& containingBlockDisplayBox = layoutState.displayBoxForLayoutBox(*layoutBox.containingBlock());
>     if (auto* previousInFlowSibling = layoutBox.previousInFlowSibling()) {
>         auto& previousInFlowDisplayBox = layoutState.displayBoxForLayoutBox(*previousInFlowSibling);
>-        top = previousInFlowDisplayBox.bottom() + previousInFlowDisplayBox.marginBottom();
>+        top = previousInFlowDisplayBox.bottom() + previousInFlowDisplayBox.marginAfter();
>     } else
>         top = containingBlockDisplayBox.contentBoxTop();
> 
>@@ -263,7 +263,7 @@ HeightAndMargin BlockFormattingContext::Geometry::inFlowHeightAndMargin(const La
> 
>     heightAndMargin = Quirks::stretchedHeight(layoutState, layoutBox, heightAndMargin);
> 
>-    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Height][Margin] -> inflow non-replaced -> streched to viewport -> height(" << heightAndMargin.height << "px) margin(" << heightAndMargin.margin.usedValues().top << "px, " << heightAndMargin.margin.usedValues().bottom << "px) -> layoutBox(" << &layoutBox << ")");
>+    LOG_WITH_STREAM(FormattingContextLayout, stream << "[Height][Margin] -> inflow non-replaced -> streched to viewport -> height(" << heightAndMargin.height << "px) margin(" << heightAndMargin.margin.usedValues().before << "px, " << heightAndMargin.margin.usedValues().after << "px) -> layoutBox(" << &layoutBox << ")");
>     return heightAndMargin;
> }
> 
>@@ -308,12 +308,12 @@ FormattingContext::InstrinsicWidthConstraints BlockFormattingContext::Geometry::
>         ASSERT(childInstrinsicWidthConstraints);
>         
>         auto& style = child.style();
>-        auto horizontalMarginBorderAndPadding = fixedValue(style.marginLeft()).value_or(0)
>+        auto horizontalMarginBorderAndPadding = fixedValue(style.marginStart()).value_or(0)
>             + LayoutUnit { style.borderLeftWidth() }
>             + fixedValue(style.paddingLeft()).value_or(0)
>             + fixedValue(style.paddingRight()).value_or(0)
>             + LayoutUnit { style.borderRightWidth() }
>-            + fixedValue(style.marginRight()).value_or(0);
>+            + fixedValue(style.marginEnd()).value_or(0);
> 
>         minimumIntrinsicWidth = std::max(minimumIntrinsicWidth, childInstrinsicWidthConstraints->minimum + horizontalMarginBorderAndPadding); 
>         maximumIntrinsicWidth = std::max(maximumIntrinsicWidth, childInstrinsicWidthConstraints->maximum + horizontalMarginBorderAndPadding); 
>@@ -322,7 +322,7 @@ FormattingContext::InstrinsicWidthConstraints BlockFormattingContext::Geometry::
>     return { minimumIntrinsicWidth, maximumIntrinsicWidth };
> }
> 
>-LayoutUnit BlockFormattingContext::Geometry::estimatedMarginTop(const LayoutState& layoutState, const Box& layoutBox)
>+LayoutUnit BlockFormattingContext::Geometry::estimatedMarginBefore(const LayoutState& layoutState, const Box& layoutBox)
> {
>     ASSERT(layoutBox.isBlockLevelBox());
>     // Can't estimate vertical margins for out of flow boxes (and we shouldn't need to do it for float boxes).
>@@ -331,10 +331,10 @@ LayoutUnit BlockFormattingContext::Geometry::estimatedMarginTop(const LayoutStat
>     ASSERT(!layoutBox.establishesBlockFormattingContext());
> 
>     // Let's just use the normal path for now.
>-    return MarginCollapse::marginTop(layoutState, layoutBox);
>+    return MarginCollapse::marginBefore(layoutState, layoutBox);
> }
> 
>-LayoutUnit BlockFormattingContext::Geometry::estimatedMarginBottom(const LayoutState& layoutState, const Box& layoutBox)
>+LayoutUnit BlockFormattingContext::Geometry::estimatedMarginAfter(const LayoutState& layoutState, const Box& layoutBox)
> {
>     ASSERT(layoutBox.isBlockLevelBox());
>     // Can't estimate vertical margins for out of flow boxes (and we shouldn't need to do it for float boxes).
>@@ -343,7 +343,7 @@ LayoutUnit BlockFormattingContext::Geometry::estimatedMarginBottom(const LayoutS
>     ASSERT(!layoutBox.establishesBlockFormattingContext());
> 
>     // Let's just use the normal path for now.
>-    return MarginCollapse::marginBottom(layoutState, layoutBox);
>+    return MarginCollapse::marginAfter(layoutState, layoutBox);
> }
> 
> }
>diff --git a/Source/WebCore/layout/blockformatting/BlockFormattingContextQuirks.cpp b/Source/WebCore/layout/blockformatting/BlockFormattingContextQuirks.cpp
>index a19a60839a8eb5a9091a78702d67a29ff1832fea..fb71b7c080ff3e98ddb3cc499b03e0ec09df6dfe 100644
>--- a/Source/WebCore/layout/blockformatting/BlockFormattingContextQuirks.cpp
>+++ b/Source/WebCore/layout/blockformatting/BlockFormattingContextQuirks.cpp
>@@ -48,7 +48,7 @@ static bool isQuirkContainer(const Box& layoutBox)
>     return layoutBox.isBodyBox() || layoutBox.isDocumentBox() || layoutBox.isTableCell();
> }
> 
>-static bool hasMarginTopQuirkValue(const Box& layoutBox)
>+static bool hasMarginBeforeQuirkValue(const Box& layoutBox)
> {
>     return layoutBox.style().hasMarginBeforeQuirk();
> }
>@@ -78,38 +78,38 @@ HeightAndMargin BlockFormattingContext::Quirks::stretchedHeight(const LayoutStat
>     auto strechedHeight = layoutState.displayBoxForLayoutBox(initialContainingBlock(layoutBox)).contentBoxHeight();
>     strechedHeight -= documentBoxVerticalBorders + documentBoxVerticalPaddings;
> 
>-    LayoutUnit totalVerticalMargins;
>+    LayoutUnit totalVerticalMargin;
>     if (layoutBox.isDocumentBox()) {
>-        auto verticalMargins = heightAndMargin.margin.usedValues();
>+        auto verticalMargin = heightAndMargin.margin.usedValues();
>         // Document box's margins do not collapse.
>         ASSERT(!heightAndMargin.margin.collapsedValues());
>-        totalVerticalMargins = verticalMargins.top + verticalMargins.bottom;
>+        totalVerticalMargin = verticalMargin.before + verticalMargin.after;
>     } else if (layoutBox.isBodyBox()) {
>         // Here is the quirky part for body box:
>         // Stretch the body using the initial containing block's height and shrink it with document box's margin/border/padding.
>         // This looks extremely odd when html has non-auto height.
>-        auto verticalMargins = Geometry::estimatedMarginTop(layoutState, documentBox) + Geometry::estimatedMarginBottom(layoutState, documentBox);
>-        strechedHeight -= verticalMargins;
>+        auto verticalMargin = Geometry::estimatedMarginBefore(layoutState, documentBox) + Geometry::estimatedMarginAfter(layoutState, documentBox);
>+        strechedHeight -= verticalMargin;
> 
>         // This quirk happens when the body height is 0 which means its vertical margins collapse through (top and bottom margins are adjoining).
>         // However now that we stretch the body they don't collapse through anymore, so we need to use the non-collapsed values instead.
>-        auto bodyBoxVerticalMargins = heightAndMargin.height ? heightAndMargin.margin.usedValues() : heightAndMargin.margin.nonCollapsedValues();
>-        totalVerticalMargins = bodyBoxVerticalMargins.top + bodyBoxVerticalMargins.bottom;
>+        auto bodyBoxVerticalMargin = heightAndMargin.height ? heightAndMargin.margin.usedValues() : heightAndMargin.margin.nonCollapsedValues();
>+        totalVerticalMargin = bodyBoxVerticalMargin.before + bodyBoxVerticalMargin.after;
>     }
> 
>     // Stretch but never overstretch with the margins.
>-    if (heightAndMargin.height + totalVerticalMargins < strechedHeight)
>-        heightAndMargin.height = strechedHeight - totalVerticalMargins;
>+    if (heightAndMargin.height + totalVerticalMargin < strechedHeight)
>+        heightAndMargin.height = strechedHeight - totalVerticalMargin;
> 
>     return heightAndMargin;
> }
> 
>-bool BlockFormattingContext::Quirks::shouldIgnoreMarginTop(const LayoutState& layoutState, const Box& layoutBox)
>+bool BlockFormattingContext::Quirks::shouldIgnoreMarginBefore(const LayoutState& layoutState, const Box& layoutBox)
> {
>     if (!layoutBox.parent())
>         return false;
> 
>-    return layoutState.inQuirksMode() && isQuirkContainer(*layoutBox.parent()) && hasMarginTopQuirkValue(layoutBox);
>+    return layoutState.inQuirksMode() && isQuirkContainer(*layoutBox.parent()) && hasMarginBeforeQuirkValue(layoutBox);
> }
> 
> }
>diff --git a/Source/WebCore/layout/blockformatting/BlockMarginCollapse.cpp b/Source/WebCore/layout/blockformatting/BlockMarginCollapse.cpp
>index bf1a08ccb659e5735937c76e822e87dba889e486..7e080898714426f1c358978271f4549cc9609fba 100644
>--- a/Source/WebCore/layout/blockformatting/BlockMarginCollapse.cpp
>+++ b/Source/WebCore/layout/blockformatting/BlockMarginCollapse.cpp
>@@ -94,7 +94,7 @@ static LayoutUnit marginValue(LayoutUnit currentMarginValue, LayoutUnit candidat
>     return currentMarginValue + candidateMarginValue;
> }
> 
>-static bool isMarginTopCollapsedWithSibling(const Box& layoutBox)
>+static bool isMarginBeforeCollapsedWithSibling(const Box& layoutBox)
> {
>     ASSERT(layoutBox.isBlockLevelBox());
> 
>@@ -109,7 +109,7 @@ static bool isMarginTopCollapsedWithSibling(const Box& layoutBox)
>     return layoutBox.style().top().isAuto();
> }
> 
>-static bool isMarginBottomCollapsedWithSibling(const Box& layoutBox)
>+static bool isMarginAfterCollapsedWithSibling(const Box& layoutBox)
> {
>     ASSERT(layoutBox.isBlockLevelBox());
> 
>@@ -124,7 +124,7 @@ static bool isMarginBottomCollapsedWithSibling(const Box& layoutBox)
>     return layoutBox.style().bottom().isAuto();
> }
> 
>-bool BlockFormattingContext::Geometry::MarginCollapse::isMarginTopCollapsedWithParent(const LayoutState& layoutState, const Box& layoutBox)
>+bool BlockFormattingContext::Geometry::MarginCollapse::isMarginBeforeCollapsedWithParent(const LayoutState& layoutState, const Box& layoutBox)
> {
>     // The first inflow child could propagate its top margin to parent.
>     // https://www.w3.org/TR/CSS21/box.html#collapsing-margins
>@@ -151,13 +151,13 @@ bool BlockFormattingContext::Geometry::MarginCollapse::isMarginTopCollapsedWithP
>     if (hasPaddingBefore(parent))
>         return false;
> 
>-    if (BlockFormattingContext::Quirks::shouldIgnoreMarginTop(layoutState, layoutBox))
>+    if (BlockFormattingContext::Quirks::shouldIgnoreMarginBefore(layoutState, layoutBox))
>         return false;
> 
>     return true;
> }
> 
>-static bool isMarginBottomCollapsedThrough(const Box& layoutBox)
>+static bool isMarginAfterCollapsedThrough(const Box& layoutBox)
> {
>     ASSERT(layoutBox.isBlockLevelBox());
> 
>@@ -181,7 +181,7 @@ static bool isMarginBottomCollapsedThrough(const Box& layoutBox)
>     return true;
> }
> 
>-LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::collapsedMarginTopFromFirstChild(const LayoutState& layoutState, const Box& layoutBox)
>+LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::collapsedMarginBeforeFromFirstChild(const LayoutState& layoutState, const Box& layoutBox)
> {
>     ASSERT(layoutBox.isBlockLevelBox());
> 
>@@ -195,21 +195,21 @@ LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::collapsedMarginTopF
> 
>     // FIXME: Take collapsed through margin into account.
>     auto& firstInFlowChild = *downcast<Container>(layoutBox).firstInFlowChild();
>-    if (!isMarginTopCollapsedWithParent(layoutState, firstInFlowChild))
>+    if (!isMarginBeforeCollapsedWithParent(layoutState, firstInFlowChild))
>         return 0;
>     // Collect collapsed margin top recursively.
>-    return marginValue(computedNonCollapsedMarginTop(layoutState, firstInFlowChild), collapsedMarginTopFromFirstChild(layoutState, firstInFlowChild));
>+    return marginValue(computedNonCollapsedMarginBefore(layoutState, firstInFlowChild), collapsedMarginBeforeFromFirstChild(layoutState, firstInFlowChild));
> }
> 
>-LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::nonCollapsedMarginTop(const LayoutState& layoutState, const Box& layoutBox)
>+LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::nonCollapsedMarginBefore(const LayoutState& layoutState, const Box& layoutBox)
> {
>     ASSERT(layoutBox.isBlockLevelBox());
> 
>     // Non collapsed margin top includes collapsed margin from inflow first child.
>-    return marginValue(computedNonCollapsedMarginTop(layoutState, layoutBox), collapsedMarginTopFromFirstChild(layoutState, layoutBox));
>+    return marginValue(computedNonCollapsedMarginBefore(layoutState, layoutBox), collapsedMarginBeforeFromFirstChild(layoutState, layoutBox));
> }
> 
>-/*static bool hasAdjoiningMarginTopAndBottom(const Box&)
>+/*static bool hasAdjoiningMarginBeforeAndAfter(const Box&)
> {
>     // Two margins are adjoining if and only if:
>     // 1. both belong to in-flow block-level boxes that participate in the same block formatting context
>@@ -223,81 +223,81 @@ LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::nonCollapsedMarginT
>     // A collapsed margin is considered adjoining to another margin if any of its component margins is adjoining to that margin.
>     return false;
> }*/
>-LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::computedNonCollapsedMarginTop(const LayoutState& layoutState, const Box& layoutBox)
>+LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::computedNonCollapsedMarginBefore(const LayoutState& layoutState, const Box& layoutBox)
> {
>     ASSERT(layoutBox.isBlockLevelBox());
> 
>-    return computedNonCollapsedVerticalMarginValue(layoutState, layoutBox).top;
>+    return computedNonCollapsedVerticalMarginValue(layoutState, layoutBox).before;
> }
> 
>-LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::computedNonCollapsedMarginBottom(const LayoutState& layoutState, const Box& layoutBox)
>+LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::computedNonCollapsedMarginAfter(const LayoutState& layoutState, const Box& layoutBox)
> {
>     ASSERT(layoutBox.isBlockLevelBox());
> 
>-    return computedNonCollapsedVerticalMarginValue(layoutState, layoutBox).bottom;
>+    return computedNonCollapsedVerticalMarginValue(layoutState, layoutBox).after;
> }
> 
>-LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::marginTop(const LayoutState& layoutState, const Box& layoutBox)
>+LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::marginBefore(const LayoutState& layoutState, const Box& layoutBox)
> {
>     if (layoutBox.isAnonymous())
>         return 0;
> 
>     ASSERT(layoutBox.isBlockLevelBox());
> 
>-    // TODO: take _hasAdjoiningMarginTopAndBottom() into account.
>-    if (isMarginTopCollapsedWithParent(layoutState, layoutBox))
>+    // TODO: take _hasAdjoiningMarginBeforeAndAfter() into account.
>+    if (isMarginBeforeCollapsedWithParent(layoutState, layoutBox))
>         return 0;
> 
>     // FIXME: Find out the logic behind this.
>-    if (BlockFormattingContext::Quirks::shouldIgnoreMarginTop(layoutState, layoutBox))
>+    if (BlockFormattingContext::Quirks::shouldIgnoreMarginBefore(layoutState, layoutBox))
>         return 0;
> 
>-    if (!isMarginTopCollapsedWithSibling(layoutBox)) {
>-        if (!isMarginBottomCollapsedThrough(layoutBox))
>-            return nonCollapsedMarginTop(layoutState, layoutBox);
>+    if (!isMarginBeforeCollapsedWithSibling(layoutBox)) {
>+        if (!isMarginAfterCollapsedThrough(layoutBox))
>+            return nonCollapsedMarginBefore(layoutState, layoutBox);
>         // Compute the collapsed through value.
>-        auto marginTop = nonCollapsedMarginTop(layoutState, layoutBox);
>-        auto marginBottom = nonCollapsedMarginBottom(layoutState, layoutBox); 
>-        return marginValue(marginTop, marginBottom);
>+        auto marginBefore = nonCollapsedMarginBefore(layoutState, layoutBox);
>+        auto marginAfter = nonCollapsedMarginAfter(layoutState, layoutBox); 
>+        return marginValue(marginBefore, marginAfter);
>     }
> 
>     // The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling,
>     // unless that sibling has clearance.
>     auto* previousInFlowSibling = layoutBox.previousInFlowSibling();
>     if (!previousInFlowSibling)
>-        return nonCollapsedMarginTop(layoutState, layoutBox);
>+        return nonCollapsedMarginBefore(layoutState, layoutBox);
> 
>-    auto previousSiblingMarginBottom = nonCollapsedMarginBottom(layoutState, *previousInFlowSibling);
>-    auto marginTop = nonCollapsedMarginTop(layoutState, layoutBox);
>-    return marginValue(marginTop, previousSiblingMarginBottom);
>+    auto previousSiblingMarginAfter = nonCollapsedMarginAfter(layoutState, *previousInFlowSibling);
>+    auto marginBefore = nonCollapsedMarginBefore(layoutState, layoutBox);
>+    return marginValue(marginBefore, previousSiblingMarginAfter);
> }
> 
>-LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::marginBottom(const LayoutState& layoutState, const Box& layoutBox)
>+LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::marginAfter(const LayoutState& layoutState, const Box& layoutBox)
> {
>     if (layoutBox.isAnonymous())
>         return 0;
> 
>     ASSERT(layoutBox.isBlockLevelBox());
> 
>-    // TODO: take _hasAdjoiningMarginTopAndBottom() into account.
>-    if (isMarginBottomCollapsedWithParent(layoutBox))
>+    // TODO: take _hasAdjoiningMarginBeforeAndBottom() into account.
>+    if (isMarginAfterCollapsedWithParent(layoutBox))
>         return 0;
> 
>-    if (isMarginBottomCollapsedThrough(layoutBox))
>+    if (isMarginAfterCollapsedThrough(layoutBox))
>         return 0;
> 
>     // Floats and out of flow positioned boxes do not collapse their margins.
>-    if (!isMarginBottomCollapsedWithSibling(layoutBox))
>-        return nonCollapsedMarginBottom(layoutState, layoutBox);
>+    if (!isMarginAfterCollapsedWithSibling(layoutBox))
>+        return nonCollapsedMarginAfter(layoutState, layoutBox);
> 
>     // The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling,
>     // unless that sibling has clearance.
>     if (layoutBox.nextInFlowSibling())
>         return 0;
>-    return nonCollapsedMarginBottom(layoutState, layoutBox);
>+    return nonCollapsedMarginAfter(layoutState, layoutBox);
> }
> 
>-bool BlockFormattingContext::Geometry::MarginCollapse::isMarginBottomCollapsedWithParent(const Box& layoutBox)
>+bool BlockFormattingContext::Geometry::MarginCollapse::isMarginAfterCollapsedWithParent(const Box& layoutBox)
> {
>     // last inflow box to parent.
>     // https://www.w3.org/TR/CSS21/box.html#collapsing-margins
>@@ -309,7 +309,7 @@ bool BlockFormattingContext::Geometry::MarginCollapse::isMarginBottomCollapsedWi
>     if (layoutBox.isFloatingOrOutOfFlowPositioned())
>         return false;
> 
>-    if (isMarginBottomCollapsedThrough(layoutBox))
>+    if (isMarginAfterCollapsedThrough(layoutBox))
>         return false;
> 
>     // Only the last inlflow child collapses with parent.
>@@ -333,12 +333,12 @@ bool BlockFormattingContext::Geometry::MarginCollapse::isMarginBottomCollapsedWi
>     return true;
> }
> 
>-bool BlockFormattingContext::Geometry::MarginCollapse::isMarginTopCollapsedWithParentMarginBottom(const Box&)
>+bool BlockFormattingContext::Geometry::MarginCollapse::isMarginBeforeCollapsedWithParentMarginAfter(const Box&)
> {
>     return false;
> }
> 
>-LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::collapsedMarginBottomFromLastChild(const LayoutState& layoutState, const Box& layoutBox)
>+LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::collapsedMarginAfterFromLastChild(const LayoutState& layoutState, const Box& layoutBox)
> {
>     ASSERT(layoutBox.isBlockLevelBox());
> 
>@@ -352,19 +352,19 @@ LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::collapsedMarginBott
> 
>     // FIXME: Check for collapsed through margin.
>     auto& lastInFlowChild = *downcast<Container>(layoutBox).lastInFlowChild();
>-    if (!isMarginBottomCollapsedWithParent(lastInFlowChild))
>+    if (!isMarginAfterCollapsedWithParent(lastInFlowChild))
>         return 0;
> 
>     // Collect collapsed margin bottom recursively.
>-    return marginValue(computedNonCollapsedMarginBottom(layoutState, lastInFlowChild), collapsedMarginBottomFromLastChild(layoutState, lastInFlowChild));
>+    return marginValue(computedNonCollapsedMarginAfter(layoutState, lastInFlowChild), collapsedMarginAfterFromLastChild(layoutState, lastInFlowChild));
> }
> 
>-LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::nonCollapsedMarginBottom(const LayoutState& layoutState, const Box& layoutBox)
>+LayoutUnit BlockFormattingContext::Geometry::MarginCollapse::nonCollapsedMarginAfter(const LayoutState& layoutState, const Box& layoutBox)
> {
>     ASSERT(layoutBox.isBlockLevelBox());
> 
>     // Non collapsed margin bottom includes collapsed margin from inflow last child.
>-    return marginValue(computedNonCollapsedMarginBottom(layoutState, layoutBox), collapsedMarginBottomFromLastChild(layoutState, layoutBox));
>+    return marginValue(computedNonCollapsedMarginAfter(layoutState, layoutBox), collapsedMarginAfterFromLastChild(layoutState, layoutBox));
> }
> 
> }
>diff --git a/Source/WebCore/layout/displaytree/DisplayBox.cpp b/Source/WebCore/layout/displaytree/DisplayBox.cpp
>index 65bc0f070ae7056ae655f1992a3abdfc9f3d29b2..027b434bbc6d4c2f5510afce9c507839e649e244 100644
>--- a/Source/WebCore/layout/displaytree/DisplayBox.cpp
>+++ b/Source/WebCore/layout/displaytree/DisplayBox.cpp
>@@ -60,7 +60,7 @@ Box::Box(const Box& other)
>     , m_horizontalMargin(other.m_horizontalMargin)
>     , m_verticalMargin(other.m_verticalMargin)
>     , m_horizontalNonComputedMargin(other.m_horizontalNonComputedMargin)
>-    , m_estimatedMarginTop(other.m_estimatedMarginTop)
>+    , m_estimatedMarginBefore(other.m_estimatedMarginBefore)
>     , m_border(other.m_border)
>     , m_padding(other.m_padding)
> #if !ASSERT_DISABLED
>@@ -92,10 +92,10 @@ Box::Rect Box::marginBox() const
>     auto borderBox = this->borderBox();
> 
>     Rect marginBox;
>-    marginBox.setTop(borderBox.top() - marginTop());
>-    marginBox.setLeft(borderBox.left() - marginLeft());
>-    marginBox.setHeight(borderBox.height() + marginTop() + marginBottom());
>-    marginBox.setWidth(borderBox.width() + marginLeft() + marginRight());
>+    marginBox.setTop(borderBox.top() - marginBefore());
>+    marginBox.setLeft(borderBox.left() - marginStart());
>+    marginBox.setHeight(borderBox.height() + marginBefore() + marginAfter());
>+    marginBox.setWidth(borderBox.width() + marginStart() + marginEnd());
>     return marginBox;
> }
> 
>@@ -104,10 +104,10 @@ Box::Rect Box::nonCollapsedMarginBox() const
>     auto borderBox = this->borderBox();
> 
>     Rect marginBox;
>-    marginBox.setTop(borderBox.top() - nonCollapsedMarginTop());
>-    marginBox.setLeft(borderBox.left() - marginLeft());
>-    marginBox.setHeight(borderBox.height() + nonCollapsedMarginTop() + nonCollapsedMarginBottom());
>-    marginBox.setWidth(borderBox.width() + marginLeft() + marginRight());
>+    marginBox.setTop(borderBox.top() - nonCollapsedMarginBefore());
>+    marginBox.setLeft(borderBox.left() - marginStart());
>+    marginBox.setHeight(borderBox.height() + nonCollapsedMarginBefore() + nonCollapsedMarginAfter());
>+    marginBox.setWidth(borderBox.width() + marginStart() + marginEnd());
>     return marginBox;
> }
> 
>diff --git a/Source/WebCore/layout/displaytree/DisplayBox.h b/Source/WebCore/layout/displaytree/DisplayBox.h
>index e49de3c36ae8522beae40e70dfd94c3bbab53d42..9f5590ff37457e08d5305ec275c61a6e610591d2 100644
>--- a/Source/WebCore/layout/displaytree/DisplayBox.h
>+++ b/Source/WebCore/layout/displaytree/DisplayBox.h
>@@ -136,20 +136,20 @@ public:
>     LayoutUnit width() const { return borderLeft() + paddingLeft().value_or(0) + contentBoxWidth() + paddingRight().value_or(0) + borderRight(); }
>     LayoutUnit height() const { return borderTop() + paddingTop().value_or(0) + contentBoxHeight() + paddingBottom().value_or(0) + borderBottom(); }
>     Rect rect() const { return { top(), left(), width(), height() }; }
>-    Rect rectWithMargin() const { return { top() - marginTop(), left() - marginLeft(), marginLeft() + width() + marginRight(), marginTop() + height() + marginBottom() }; }
>+    Rect rectWithMargin() const { return { top() - marginBefore(), left() - marginStart(), marginStart() + width() + marginEnd(), marginBefore() + height() + marginAfter() }; }
> 
>     Layout::VerticalMargin verticalMargin() const;
>-    LayoutUnit marginTop() const;
>-    LayoutUnit marginLeft() const;
>-    LayoutUnit marginBottom() const;
>-    LayoutUnit marginRight() const;
>+    LayoutUnit marginBefore() const;
>+    LayoutUnit marginStart() const;
>+    LayoutUnit marginAfter() const;
>+    LayoutUnit marginEnd() const;
> 
>-    LayoutUnit nonCollapsedMarginTop() const;
>-    LayoutUnit nonCollapsedMarginBottom() const;
>-    LayoutUnit nonComputedMarginLeft() const;
>-    LayoutUnit nonComputedMarginRight() const;
>+    LayoutUnit nonCollapsedMarginBefore() const;
>+    LayoutUnit nonCollapsedMarginAfter() const;
>+    LayoutUnit nonComputedMarginStart() const;
>+    LayoutUnit nonComputedMarginEnd() const;
> 
>-    std::optional<LayoutUnit> estimatedMarginTop() const { return m_estimatedMarginTop; }
>+    std::optional<LayoutUnit> estimatedMarginBefore() const { return m_estimatedMarginBefore; }
> 
>     LayoutUnit borderTop() const;
>     LayoutUnit borderLeft() const;
>@@ -194,7 +194,7 @@ private:
>     void setHorizontalMargin(Layout::HorizontalMargin);
>     void setVerticalMargin(Layout::VerticalMargin);
>     void setHorizontalNonComputedMargin(Layout::HorizontalMargin);
>-    void setEstimatedMarginTop(LayoutUnit marginTop) { m_estimatedMarginTop = marginTop; }
>+    void setEstimatedMarginBefore(LayoutUnit marginBefore) { m_estimatedMarginBefore = marginBefore; }
> 
>     void setBorder(Layout::Edges);
>     void setPadding(std::optional<Layout::Edges>);
>@@ -227,7 +227,7 @@ private:
>     Layout::HorizontalMargin m_horizontalMargin;
>     Layout::VerticalMargin m_verticalMargin;
>     Layout::HorizontalMargin m_horizontalNonComputedMargin;
>-    std::optional<LayoutUnit> m_estimatedMarginTop;
>+    std::optional<LayoutUnit> m_estimatedMarginBefore;
> 
>     Layout::Edges m_border;
>     std::optional<Layout::Edges> m_padding;
>@@ -437,7 +437,7 @@ inline Box::Rect::operator LayoutRect() const
> 
> inline LayoutUnit Box::top() const
> {
>-    ASSERT(m_hasValidTop && (m_estimatedMarginTop || m_hasValidVerticalMargin));
>+    ASSERT(m_hasValidTop && (m_estimatedMarginBefore || m_hasValidVerticalMargin));
>     return m_topLeft.y();
> }
> 
>@@ -449,7 +449,7 @@ inline LayoutUnit Box::left() const
> 
> inline LayoutPoint Box::topLeft() const
> {
>-    ASSERT(m_hasValidTop && (m_estimatedMarginTop || m_hasValidVerticalMargin));
>+    ASSERT(m_hasValidTop && (m_estimatedMarginBefore || m_hasValidVerticalMargin));
>     ASSERT(m_hasValidLeft && m_hasValidHorizontalMargin);
>     return m_topLeft;
> }
>@@ -521,7 +521,7 @@ inline void Box::setVerticalMargin(Layout::VerticalMargin margin)
>     setHasValidVerticalMargin();
>     setHasValidVerticalNonCollapsedMargin();
> #endif
>-    ASSERT(!m_estimatedMarginTop || *m_estimatedMarginTop == margin.usedValues().top);
>+    ASSERT(!m_estimatedMarginBefore || *m_estimatedMarginBefore == margin.usedValues().before);
>     m_verticalMargin = margin;
> }
> 
>@@ -555,52 +555,52 @@ inline Layout::VerticalMargin Box::verticalMargin() const
>     return m_verticalMargin;
> }
> 
>-inline LayoutUnit Box::marginTop() const
>+inline LayoutUnit Box::marginBefore() const
> {
>     ASSERT(m_hasValidVerticalMargin);
>-    return m_verticalMargin.usedValues().top;
>+    return m_verticalMargin.usedValues().before;
> }
> 
>-inline LayoutUnit Box::marginLeft() const
>+inline LayoutUnit Box::marginStart() const
> {
>     ASSERT(m_hasValidHorizontalMargin);
>-    return m_horizontalMargin.left;
>+    return m_horizontalMargin.start;
> }
> 
>-inline LayoutUnit Box::marginBottom() const
>+inline LayoutUnit Box::marginAfter() const
> {
>     ASSERT(m_hasValidVerticalMargin);
>-    return m_verticalMargin.usedValues().bottom;
>+    return m_verticalMargin.usedValues().after;
> }
> 
>-inline LayoutUnit Box::marginRight() const
>+inline LayoutUnit Box::marginEnd() const
> {
>     ASSERT(m_hasValidHorizontalMargin);
>-    return m_horizontalMargin.right;
>+    return m_horizontalMargin.end;
> }
> 
>-inline LayoutUnit Box::nonCollapsedMarginTop() const
>+inline LayoutUnit Box::nonCollapsedMarginBefore() const
> {
>     ASSERT(m_hasValidVerticalNonCollapsedMargin);
>-    return m_verticalMargin.nonCollapsedValues().top;
>+    return m_verticalMargin.nonCollapsedValues().before;
> }
> 
>-inline LayoutUnit Box::nonCollapsedMarginBottom() const
>+inline LayoutUnit Box::nonCollapsedMarginAfter() const
> {
>     ASSERT(m_hasValidVerticalNonCollapsedMargin);
>-    return m_verticalMargin.nonCollapsedValues().bottom;
>+    return m_verticalMargin.nonCollapsedValues().after;
> }
> 
>-inline LayoutUnit Box::nonComputedMarginLeft() const
>+inline LayoutUnit Box::nonComputedMarginStart() const
> {
>     ASSERT(m_hasValidHorizontalNonComputedMargin);
>-    return m_horizontalNonComputedMargin.left;
>+    return m_horizontalNonComputedMargin.start;
> }
> 
>-inline LayoutUnit Box::nonComputedMarginRight() const
>+inline LayoutUnit Box::nonComputedMarginEnd() const
> {
>     ASSERT(m_hasValidHorizontalNonComputedMargin);
>-    return m_horizontalNonComputedMargin.right;
>+    return m_horizontalNonComputedMargin.end;
> }
> 
> inline std::optional<LayoutUnit> Box::paddingTop() const
>diff --git a/Source/WebCore/layout/floats/FloatAvoider.cpp b/Source/WebCore/layout/floats/FloatAvoider.cpp
>index 32aa318f0fede06fc69f9439ebf3d5ae6d2b9dd9..db181cd4a57b7470a546b63f924008ba6b9298ee 100644
>--- a/Source/WebCore/layout/floats/FloatAvoider.cpp
>+++ b/Source/WebCore/layout/floats/FloatAvoider.cpp
>@@ -61,11 +61,11 @@ void FloatAvoider::setHorizontalConstraints(HorizontalConstraints horizontalCons
>         // Compute the horizontal position for the new floating by taking both the contining block and the current left/right floats into account.
>         auto containingBlockContentBoxLeft = m_containingBlockAbsoluteDisplayBox.left() + m_containingBlockAbsoluteDisplayBox.contentBoxLeft();
>         if (isLeftAligned())
>-            return std::max<PositionInContextRoot>({ containingBlockContentBoxLeft + marginLeft() }, left);
>+            return std::max<PositionInContextRoot>({ containingBlockContentBoxLeft + marginStart() }, left);
> 
>         // Make sure it does not overflow the containing block on the right.
>         auto containingBlockContentBoxRight = containingBlockContentBoxLeft + m_containingBlockAbsoluteDisplayBox.contentBoxWidth();
>-        return std::min<PositionInContextRoot>(left, { containingBlockContentBoxRight - marginBoxWidth() + marginLeft() });
>+        return std::min<PositionInContextRoot>(left, { containingBlockContentBoxRight - marginBoxWidth() + marginStart() });
>     };
> 
>     auto positionCandidate = horizontalPositionCandidate(horizontalConstraints);
>@@ -99,7 +99,7 @@ PositionInContextRoot FloatAvoider::initialHorizontalPosition() const
>     auto containingBlockContentBoxRight = containingBlockContentBoxLeft + m_containingBlockAbsoluteDisplayBox.contentBoxWidth();
> 
>     auto left = isLeftAligned() ? containingBlockContentBoxLeft : containingBlockContentBoxRight - marginBoxWidth();
>-    left += marginLeft();
>+    left += marginStart();
> 
>     return { left };
> }
>@@ -107,13 +107,13 @@ PositionInContextRoot FloatAvoider::initialHorizontalPosition() const
> bool FloatAvoider::overflowsContainingBlock() const
> {
>     auto containingBlockContentBoxLeft = m_containingBlockAbsoluteDisplayBox.left() + m_containingBlockAbsoluteDisplayBox.contentBoxLeft();
>-    auto left = displayBox().left() - marginLeft();
>+    auto left = displayBox().left() - marginStart();
> 
>     if (containingBlockContentBoxLeft > left)
>         return true;
> 
>     auto containingBlockContentBoxRight = containingBlockContentBoxLeft + m_containingBlockAbsoluteDisplayBox.contentBoxWidth();
>-    auto right = displayBox().right() + marginRight();
>+    auto right = displayBox().right() + marginEnd();
> 
>     return containingBlockContentBoxRight < right;
> }
>diff --git a/Source/WebCore/layout/floats/FloatAvoider.h b/Source/WebCore/layout/floats/FloatAvoider.h
>index 8c26ddf2ed70c872c8b3809e80789f921dfcf3ef..7ad37a148dec9ecc5715311650e818364c70bc94 100644
>--- a/Source/WebCore/layout/floats/FloatAvoider.h
>+++ b/Source/WebCore/layout/floats/FloatAvoider.h
>@@ -70,12 +70,12 @@ protected:
>     virtual PositionInContextRoot horizontalPositionCandidate(HorizontalConstraints);
>     virtual PositionInContextRoot verticalPositionCandidate(PositionInContextRoot);
> 
>-    LayoutUnit marginTop() const { return displayBox().marginTop(); }
>-    LayoutUnit marginBottom() const { return displayBox().marginBottom(); }
>-    LayoutUnit marginLeft() const { return displayBox().nonComputedMarginLeft(); }
>-    LayoutUnit marginRight() const { return displayBox().nonComputedMarginRight(); }
>+    LayoutUnit marginBefore() const { return displayBox().marginBefore(); }
>+    LayoutUnit marginAfter() const { return displayBox().marginAfter(); }
>+    LayoutUnit marginStart() const { return displayBox().nonComputedMarginStart(); }
>+    LayoutUnit marginEnd() const { return displayBox().nonComputedMarginEnd(); }
> 
>-    LayoutUnit marginBoxWidth() const { return marginLeft() + displayBox().width() + marginRight(); }
>+    LayoutUnit marginBoxWidth() const { return marginStart() + displayBox().width() + marginEnd(); }
> 
>     const FloatingState& floatingState() const { return m_floatingState; }
>     const Box& layoutBox() const { return *m_layoutBox; }
>diff --git a/Source/WebCore/layout/floats/FloatBox.cpp b/Source/WebCore/layout/floats/FloatBox.cpp
>index 45c2a3a1d2558431ceb72ff5cbac35641774711e..b557bb096c7f7deab0346c89c7817678d817ac2b 100644
>--- a/Source/WebCore/layout/floats/FloatBox.cpp
>+++ b/Source/WebCore/layout/floats/FloatBox.cpp
>@@ -43,30 +43,30 @@ FloatBox::FloatBox(const Box& layoutBox, const FloatingState& floatingState, con
> Display::Box::Rect FloatBox::rect() const
> {
>     auto rect = displayBox().rect();
>-    return { rect.top() - marginTop(), rect.left() - marginLeft(), marginLeft() + rect.width() + marginRight(), marginTop() + rect.height() + marginBottom() };
>+    return { rect.top() - marginBefore(), rect.left() - marginStart(), marginStart() + rect.width() + marginEnd(), marginBefore() + rect.height() + marginAfter() };
> }
> 
> PositionInContextRoot FloatBox::horizontalPositionCandidate(HorizontalConstraints horizontalConstraints)
> {
>     auto positionCandidate = isLeftAligned() ? *horizontalConstraints.left : *horizontalConstraints.right - rect().width();
>-    positionCandidate += marginLeft();
>+    positionCandidate += marginStart();
> 
>     return { positionCandidate };
> }
> 
> PositionInContextRoot FloatBox::verticalPositionCandidate(PositionInContextRoot verticalConstraint)
> {
>-    return { verticalConstraint + marginTop() };
>+    return { verticalConstraint + marginBefore() };
> }
> 
> PositionInContextRoot FloatBox::initialVerticalPosition() const
> {
>     // Incoming float cannot be placed higher than existing floats (margin box of the last float).
>     // Take the static position (where the box would go if it wasn't floating) and adjust it with the last float.
>-    auto top = FloatAvoider::initialVerticalPosition() - marginTop();
>+    auto top = FloatAvoider::initialVerticalPosition() - marginBefore();
>     if (auto lastFloat = floatingState().last())
>         top = std::max(top, lastFloat->rectWithMargin().top());
>-    top += marginTop();
>+    top += marginBefore();
> 
>     return { top };
> }
>diff --git a/Source/WebCore/layout/floats/FloatingContext.cpp b/Source/WebCore/layout/floats/FloatingContext.cpp
>index 2753194038a986a07ceb69d0a2d3a501d67d06b8..1314a178c8e768f792e303d680172c086ef0a2eb 100644
>--- a/Source/WebCore/layout/floats/FloatingContext.cpp
>+++ b/Source/WebCore/layout/floats/FloatingContext.cpp
>@@ -128,9 +128,9 @@ Point FloatingContext::positionForFloat(const Box& layoutBox) const
>             auto& containingBlockDisplayBox = layoutState().displayBoxForLayoutBox(*layoutBox.containingBlock());
> 
>             if (layoutBox.isLeftFloatingPositioned())
>-                return Position { containingBlockDisplayBox.contentBoxLeft() + displayBox.marginLeft() };
>+                return Position { containingBlockDisplayBox.contentBoxLeft() + displayBox.marginStart() };
> 
>-            return Position { containingBlockDisplayBox.contentBoxRight() - displayBox.marginRight() - displayBox.width() };
>+            return Position { containingBlockDisplayBox.contentBoxRight() - displayBox.marginEnd() - displayBox.width() };
>         };
> 
>         // No float box on the context yet -> align it with the containing block's left/right edge.
>@@ -188,23 +188,23 @@ std::optional<Position> FloatingContext::verticalPositionWithClearance(const Box
>             auto& previousInFlowDisplayBox = layoutState.displayBoxForLayoutBox(*previousInFlowSibling);
> 
>             // Since the previous inflow sibling has already been laid out, its margin is collapsed by now.
>-            ASSERT(!previousInFlowDisplayBox.marginBottom());
>-            auto collapsedMargin = displayBox.marginTop();
>+            ASSERT(!previousInFlowDisplayBox.marginAfter());
>+            auto collapsedMargin = displayBox.marginBefore();
> 
>             // Reset previous bottom and current top margins to non-collapsing.
>             auto previousVerticalMargin = previousInFlowDisplayBox.verticalMargin();
>-            if (previousVerticalMargin.collapsedValues() && previousVerticalMargin.collapsedValues()->bottom) {
>-                previousVerticalMargin.setCollapsedValues({ previousVerticalMargin.collapsedValues()->top, { } });
>+            if (previousVerticalMargin.collapsedValues() && previousVerticalMargin.collapsedValues()->after) {
>+                previousVerticalMargin.setCollapsedValues({ previousVerticalMargin.collapsedValues()->before, { } });
>                 previousInFlowDisplayBox.setVerticalMargin(previousVerticalMargin);
>             }
>             // FIXME: check if collapsing through has anything to do with this.
>             auto verticalMargin = displayBox.verticalMargin();
>-            if (verticalMargin.collapsedValues() && verticalMargin.collapsedValues()->top) {
>-                verticalMargin.setCollapsedValues({ { }, verticalMargin.collapsedValues()->bottom });
>+            if (verticalMargin.collapsedValues() && verticalMargin.collapsedValues()->before) {
>+                verticalMargin.setCollapsedValues({ { }, verticalMargin.collapsedValues()->after });
>                 displayBox.setVerticalMargin(verticalMargin);
>             }
> 
>-            auto nonCollapsedMargin = previousInFlowDisplayBox.marginBottom() + displayBox.marginTop();
>+            auto nonCollapsedMargin = previousInFlowDisplayBox.marginAfter() + displayBox.marginBefore();
>             auto marginOffset = nonCollapsedMargin - collapsedMargin;
>             // Move the box to the position where it would be with non-collapsed margins.
>             rootRelativeTop += marginOffset;
>diff --git a/Source/WebCore/layout/inlineformatting/InlineFormattingContext.cpp b/Source/WebCore/layout/inlineformatting/InlineFormattingContext.cpp
>index c7ad9c5c9d11705feb5778ad40863d6384c726e7..fb554ff15d796389126ba7a8017cdb1e3acfd4e1 100644
>--- a/Source/WebCore/layout/inlineformatting/InlineFormattingContext.cpp
>+++ b/Source/WebCore/layout/inlineformatting/InlineFormattingContext.cpp
>@@ -442,10 +442,10 @@ void InlineFormattingContext::collectInlineContentForSubtree(const Box& root, In
>         createAndAppendInlineItem();
>         auto& inlineRun = *inlineFormattingState.inlineContent().last();
> 
>-        auto horizontalMargins = Geometry::computedNonCollapsedHorizontalMarginValue(layoutState(), root);
>+        auto horizontalMargin = Geometry::computedNonCollapsedHorizontalMarginValue(layoutState(), root);
>         inlineRun.addDetachingRule({ InlineItem::DetachingRule::BreakAtStart, InlineItem::DetachingRule::BreakAtEnd });
>-        inlineRun.addNonBreakableStart(horizontalMargins.left);
>-        inlineRun.addNonBreakableEnd(horizontalMargins.right);
>+        inlineRun.addNonBreakableStart(horizontalMargin.start);
>+        inlineRun.addNonBreakableEnd(horizontalMargin.end);
>         // Skip formatting root subtree. They are not part of this inline formatting context.
>         return;
>     }
>@@ -465,7 +465,7 @@ void InlineFormattingContext::collectInlineContentForSubtree(const Box& root, In
>     // FIXME: Revisit this when we figured out how inline boxes fit the display tree.
>     auto padding = Geometry::computedPadding(layoutState(), root);
>     auto border = Geometry::computedBorder(layoutState(), root);
>-    auto horizontalMargins = Geometry::computedNonCollapsedHorizontalMarginValue(layoutState(), root);
>+    auto horizontalMargin = Geometry::computedNonCollapsedHorizontalMarginValue(layoutState(), root);
>     // Setup breaking boundaries for this subtree.
>     auto* lastDescendantInlineBox = inlineFormattingState.lastInlineItem();
>     // Empty container?
>@@ -475,13 +475,13 @@ void InlineFormattingContext::collectInlineContentForSubtree(const Box& root, In
>     auto rootBreaksAtStart = [&] {
>         if (&root == &(this->root()))
>             return false;
>-        return (padding && padding->horizontal.left) || border.horizontal.left || horizontalMargins.left || root.isPositioned();
>+        return (padding && padding->horizontal.left) || border.horizontal.left || horizontalMargin.start || root.isPositioned();
>     };
> 
>     auto rootBreaksAtEnd = [&] {
>         if (&root == &(this->root()))
>             return false;
>-        return (padding && padding->horizontal.right) || border.horizontal.right || horizontalMargins.right || root.isPositioned();
>+        return (padding && padding->horizontal.right) || border.horizontal.right || horizontalMargin.end || root.isPositioned();
>     };
> 
>     if (rootBreaksAtStart()) {
>@@ -496,7 +496,7 @@ void InlineFormattingContext::collectInlineContentForSubtree(const Box& root, In
> 
>         ASSERT(firstDescendantInlineBox);
>         firstDescendantInlineBox->addDetachingRule(InlineItem::DetachingRule::BreakAtStart);
>-        auto startOffset = border.horizontal.left + horizontalMargins.left;
>+        auto startOffset = border.horizontal.left + horizontalMargin.start;
>         if (padding)
>             startOffset += padding->horizontal.left;
>         firstDescendantInlineBox->addNonBreakableStart(startOffset);
>@@ -504,7 +504,7 @@ void InlineFormattingContext::collectInlineContentForSubtree(const Box& root, In
> 
>     if (rootBreaksAtEnd()) {
>         lastDescendantInlineBox->addDetachingRule(InlineItem::DetachingRule::BreakAtEnd);
>-        auto endOffset = border.horizontal.right + horizontalMargins.right;
>+        auto endOffset = border.horizontal.right + horizontalMargin.end;
>         if (padding)
>             endOffset += padding->horizontal.right;
>         lastDescendantInlineBox->addNonBreakableEnd(endOffset);

Actions: View | Formatted Diff | Diff

Attachments on bug 192699: 357315