[webkit-changes] [WebKit/WebKit] b9ee98: Update margin box for trimmed block-end boxes in b...
Sammy Gill
noreply at github.com
Thu Mar 16 10:47:01 PDT 2023
Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: b9ee985deec446b5c3bfb23ea59c90e3c14a814d
https://github.com/WebKit/WebKit/commit/b9ee985deec446b5c3bfb23ea59c90e3c14a814d
Author: Sammy Gill <sammy.gill at apple.com>
Date: 2023-03-16 (Thu, 16 Mar 2023)
Changed paths:
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-last-child-with-border-expected.txt
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-last-child-with-border.html
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-nested-last-child-with-border-expected.txt
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-nested-last-child-with-border.html
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-nested-at-bottom-expected.txt
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-nested-at-bottom.html
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-nested-margin-trim-expected.txt
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-nested-margin-trim.html
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-expected.txt
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-nested-multiple-times-expected.txt
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-nested-multiple-times.html
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-nested-once-expected.txt
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-nested-once.html
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-vert-lr-expected.txt
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-vert-lr.html
A LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets.html
M Source/WebCore/rendering/RenderBlockFlow.cpp
M Source/WebCore/rendering/RenderBlockFlow.h
Log Message:
-----------
Update margin box for trimmed block-end boxes in block container and adjust position of self-collapsing children
https://bugs.webkit.org/show_bug.cgi?id=253679
rdar://106524654
Reviewed by Alan Baradlay.
The initial attempt at trimming margins that collapsed through to the
block-end of a block container simply used the MarginInfo for the block
container to "trim," the margins. This MarginInfo structure held the
margins that collapsed through and would be used with the container's
actual block-end margin to perform a final margin collapsing. By ignoring
these values we were prohibit the collapsing from occurring with the
block container's block-end margin.
However, since the margins for the children at the end of the block
container were not actually trimmed (i.e. their m_marginBox still
contained their used margin values), the block container may have
incorrectly positioned self-collapsing children that were also at the
bottom of the block.
container {
display: block;
margin-trim: block;
margin-block-end: 10px;
}
item {
display: block;
margin-block-end: 40px;
inline-size: 50px;
block-size: 50px;
background-color: green;
}
.collapsed {
margin-block-start: 50px;
block-size: 0px;
}
</style>
<container>
<item></item>
<item class="collapsed"></item>
<item class="collapsed"></item>
</container>
Here the last two items in the block container are self-collapsing, so
they would normally participate in margin collapsing with the block-end
margin of the first item and the block-end mark of the container itself.
Without margin-trim the collapsed items should have an offset of 100px
from the top of the containing block.
When block-end margin trimming is specified, however, these items will
need to get placed right below the first item since the block-end margin
will be removed from the first item and both block margins will be
trimmed from the last two.
Since we cannot know if a self-collapsing child is at the block-end
of a block container (i.e. there may be another non self-collapsing
child further on in the layout), we need to make these adjustments when
we are handling the after side of the block container. This means we
need to walk back up the children of the container and perform these
adjustments. As we walk up the tree we have 3 scenarios for each child:
1.) The child is a self-collapsing block:
We should trim the before/after margins of this child and make sure its
position is at the bottom of the block right below the last non
self-collapsing child. We do not need to go inside the self-collapsing
children even if they contain more self-collapsing children since those
will already be positioned at the top of their containing block. If they
had any margins they were have collapsed through to the outer most
self-collapsing child.
2.) The child is a nested block
In this case, we will trim its after margin (since it is at the bottom
of the block and everything below it is self-collapsing), but we also
need to check if the margins of its children nested inside can collapse
through with its own after margin. If it cannot (e.g. the nested block
has some border and padding), then we are done since those margins
cannot affect the margins or children outside of their containing block
(the nested block we are checking), and everything before this nested
block cannot affect the bottom of the block.
However, if the margins inside can collapse through, then we need to go
one more level deep (inside of this nested block) and perform the same
logic. This is because those margins could have potentially collapsed
through and affected any self-collapsing children at the bottom of this
nested block as well as the children in the outer one.
3.) The block is some other non-nested and non self-collapsing block.
In this case we can just trim the block-end margin and end our
adjustments since everything before this block cannot impact the bottom
(just like the case with the nested-block that cannot have its children's
margins collapse through).
In this case, we need to recurse into it and
apply the same type of logic. It is possible that this nested block
container may have its children's margins at the bottom of the block
contribute to the margin collapsing occurring at the outer block container.
<style>
.outer {
margin-trim: block;
}
container {
display: block;
}
item {
display: block;
margin-block-end: 40px;
inline-size: 50px;
block-size: 50px;
background-color: green;
}
.collapsed {
margin-block-start: 50px;
block-size: 0px;
}
</style>
<container class="outer">
<container>
<item data-offset-y="8"></item>
<item data-offset-y="58" class="collapsed"></item>
<item data-offset-y="58" class="collapsed"></item>
</container>
</container>
Here the outer container has block-end margin trim but there is no
block-end margin set on its last child nor does it have any self
collapsing children at the end of the block. However, it has another
block container nested within its last child. This nested block
container has self-collapsing children at the end of the block that
have their margins collapse through and propagate up to the outer
container.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-last-child-with-border-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-last-child-with-border.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-nested-last-child-with-border-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-nested-last-child-with-border.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-nested-at-bottom-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-nested-at-bottom.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-nested-margin-trim-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-nested-margin-trim.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-nested-multiple-times-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-nested-multiple-times.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-nested-once-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-nested-once.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-vert-lr-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets-vert-lr.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/block-container-block-end-self-collapsing-children-offsets.html: Added.
* Source/WebCore/rendering/RenderBlockFlow.cpp:
(WebCore::RenderBlockFlow::layoutBlockChildren):
(WebCore::RenderBlockFlow::trimBlockEndChildrenMargins):
* Source/WebCore/rendering/RenderBlockFlow.h:
Canonical link: https://commits.webkit.org/261750@main
More information about the webkit-changes
mailing list