[webkit-changes] [WebKit/WebKit] 99e30b: [margin-trim][block-layout] Content at block-start...

[Sammy Gill]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 99e30b0ca8f6729c9e28bfc1d3fa4b46cfe80a42
      https://github.com/WebKit/WebKit/commit/99e30b0ca8f6729c9e28bfc1d3fa4b46cfe80a42
  Author: Sammy Gill <sammy.gill at apple.com>
  Date:   2023-04-26 (Wed, 26 Apr 2023)

  Changed paths:
    A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border-expected.txt
    A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border.html
    A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-expected.txt
    A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested-expected.txt
    A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested.html
    A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start.html
    M Source/WebCore/css/ComputedStyleExtractor.cpp
    M Source/WebCore/rendering/RenderBlockFlow.cpp
    M Source/WebCore/rendering/RenderBox.cpp
    M Source/WebCore/rendering/RenderLayoutState.cpp
    M Source/WebCore/rendering/RenderLayoutState.h

  Log Message:
  -----------
  [margin-trim][block-layout] Content at block-start edge should have trimmed margins reflected in computed style
https://bugs.webkit.org/show_bug.cgi?id=253606
rdar://106452955

Reviewed by Alan Baradlay.

When we trim margins at the block-start edge, we can indicate that the
renderer has a trimmed margin by replacing the calls to setMarginBefore/After
with setTrimmedMarginForChild. This will perform the same behavior of
trimming the renderer's margins by updating its m_marginBox and also
setting the margin-trim rare data bit to indicate that the margin has
been trimmed.

In order to apply this behavior for nested block content that is at the
block-start edge of the outer block container we need to keep track of
some additional state. If a block container has block-start margin-trim
set then it will push some new state onto m_blockStartTrimming to indicate
that block-start trimming should occur and propagate this information to
its children in order to determine whether they should trim. This
new structure acts as a stack that will help nested block containers
determine if they should trim the margins at their block-start edge
based upon its containing block's trimming state and its own MarginInfo
state.

A block container will push new state onto this stack in the following
scenarios:

- If a block-container has block-start margin trim set, then it will push
some new state onto the stack (true) indicating trimming should occur
- A nested block container will check to see if its containing block has trimming
state set by checking the value at the top of the stack along with whether or
not its margins can collapse through to its containing block
    - If the containing block has trimming state and the nested child's
      margins can collapse through to the top, then the nested child will
      push its own state onto the stack to use later on as it lays out
      its children. The state will be the same as its containing block's
      so that the nested block container will only trim if it is at the
      block-start edge of the containing block that has margin-trim set.

    - If the containing block has trimming state and the nested child's
      margins *cannot* collapse through to the top, then it will push
      state onto the stack (false) to indicate that it should not
      perform any sort of trimming. This will also indicate to nested
      block containers that they should also not trim.

<div id="container" style="margin-trim: block">
    <div id="outer" style="margin-block-start: 10px; border: 1px solid black; width: 50px; height: 50px; background-color: green;">
        <div id="inner" style="margin-block-start: 10px; border: 1px solid black; width: 50px; height: 50px; background-color: blue;"></div>
    </div>
</div>

Here "container," will push some state onto the margin trimming stack
to indicate that it should trim margins at the block-start edge. When
"outer," goes through layout, it will see that its containing block had
set some trimming state so it will do the same. Since it has a border that
means its children's margins cannot collapse through, so it should not
trim those margins and set the state appropriately. "Inner," will see
that its containing block had set some margin-trim state and will need
to do the same. Since its children's margins could collapse through, it
will use the same state as its containing block. However, since the
containing block did not perform trimming, it will also not trim when
it attempts to use this information.

In ComputedStyleExtractor, we will check to see if the renderer has its
top margin trimmed by checking to see if the rare data bit was set during
layout by using RenderBox::hasTrimmedMargin.

* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start.html: Added.
* Source/WebCore/css/ComputedStyleExtractor.cpp:
(WebCore::rendererCanHaveTrimmedMargin):
(WebCore::isLayoutDependent):
* Source/WebCore/rendering/RenderBlockFlow.cpp:
(WebCore::RenderBlockFlow::layoutBlockChildren):
(WebCore::RenderBlockFlow::layoutBlockChild):
(WebCore::RenderBlockFlow::collapseMarginsWithChildInfo):
* Source/WebCore/rendering/RenderBox.cpp:
(WebCore::RenderBox::physicalToFlowRelativeDirectionMapping const):
(WebCore::RenderBox::hasTrimmedMargin const):
* Source/WebCore/rendering/RenderBox.h:
(WebCore::RenderBox::isBlockLevelBox const):
* Source/WebCore/rendering/RenderLayoutState.cpp:
(WebCore::RenderLayoutState::RenderLayoutState):
* Source/WebCore/rendering/RenderLayoutState.h:
(WebCore::RenderLayoutState::RenderLayoutState):
(WebCore::RenderLayoutState::pushBlockStartTrimming):
(WebCore::RenderLayoutState::peekBlockStartTrimming):
(WebCore::RenderLayoutState::popBlockStartTrimming):

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