Skip to content

GitLab

T
tangled
Commit cf9bba9d authored by Alison Maher's avatar Alison Maher Committed by Chromium LUCI CQ
Browse files
Options

[LayoutNG] Abspos elements inside a spanner 

It was decided that the containing block chain goes directly from a
column spanner to the multi-column container. Thus, if an absolute
positioned element is nested inside a spanner, we should begin
looking for its containing block starting with the multi-column
container, as well.

This is an update to the previous legacy behavior, and the related
web test has been updated to reflect the new behavior.

Bug: 1079031
Change-Id: Ia9f60107417158c32d78e12a1d414181411ecb0a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2568852
Commit-Queue: Alison Maher <almaher@microsoft.com>
Reviewed-by: default avatarMorten Stenshorne <mstensho@chromium.org>
Reviewed-by: default avatarXianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834360}
parent c5633cbe
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 50 deletions
third_party/blink/renderer/core/layout/layout_object.cc
View file @ cf9bba9d
......@@ -162,6 +162,18 @@ LayoutObject* FindAncestorByPredicate(const LayoutObject* descendant,
skip_info->Update(*legend_parent);
object = legend_parent;
}
} else if (UNLIKELY(object->IsColumnSpanAll())) {
// The containing block chain goes directly from the column spanner to the
// multi-column container.
const auto* multicol_container =
object->SpannerPlaceholder()->MultiColumnBlockFlow();
if (multicol_container->IsLayoutNGObject()) {
while (object->Parent() != multicol_container) {
object = object->Parent();
if (skip_info)
skip_info->Update(*object);
}
}
}
}
return nullptr;
......
third_party/blink/renderer/core/layout/ng/ng_out_of_flow_layout_part_test.cc
View file @ cf9bba9d
......@@ -842,11 +842,9 @@ TEST_F(NGOutOfFlowLayoutPartTest, PositionedFragmentationWithNestedSpanners) {
EXPECT_EQ(expectation, dump);
}
// Tests that column spanners are used as the containing block for abspos
// elements nested inside of a spanner.
// TODO(almaher): Abspos elements nested in a spanner are never getting laid
// out.
TEST_F(NGOutOfFlowLayoutPartTest, DISABLED_AbsposInSpanner) {
// Tests that abspos elements bubble up to their containing block when nested
// inside of a spanner.
TEST_F(NGOutOfFlowLayoutPartTest, AbsposInSpanner) {
SetBodyInnerHTML(
R"HTML(
<style>
......@@ -854,17 +852,74 @@ TEST_F(NGOutOfFlowLayoutPartTest, DISABLED_AbsposInSpanner) {
column-count:2; column-fill:auto; column-gap:16px; height:40px;
}
.rel {
position: relative; width:30px;
position: relative;
}
.abs {
position:absolute; width:5px; height:50px; top:5px;
}
</style>
<div id="container">
<div class="rel" style="width:50px;">
<div id="multicol">
<div class="rel" style="width:30px;">
<div style="width:10px; height:30px;"></div>
<div>
<div style="column-span:all;">
<div class="abs"></div>
</div>
</div>
</div>
</div>
</div>
</div>
)HTML");
String dump = DumpFragmentTree(GetElementById("container"));
String expectation = R"DUMP(.:: LayoutNG Physical Fragment Tree ::.
offset:unplaced size:1000x40
offset:0,0 size:50x40
offset:0,0 size:50x40
offset:0,0 size:17x15
offset:0,0 size:30x15
offset:0,0 size:10x15
offset:33,0 size:17x15
offset:0,0 size:30x15
offset:0,0 size:10x15
offset:0,15 size:30x0
offset:0,15 size:50x0
offset:0,15 size:17x25
offset:0,0 size:30x0
offset:0,0 size:30x0
offset:0,5 size:5x50
)DUMP";
EXPECT_EQ(expectation, dump);
}
// Tests that abspos elements bubble up to their containing block when nested
// inside of a spanner and get the correct static position.
TEST_F(NGOutOfFlowLayoutPartTest, AbsposInSpannerStaticPos) {
SetBodyInnerHTML(
R"HTML(
<style>
#multicol {
column-count:2; column-fill:auto; column-gap:16px; height:40px;
}
.rel {
position: relative;
}
.abs {
position:absolute; width:5px; height:50px;
}
</style>
<div id="container">
<div id="multicol">
<div class="rel">
<div style="column-span:all;">
<div class="abs"></div>
<div class="rel" style="width:50px;">
<div id="multicol">
<div class="rel" style="width:30px;">
<div style="width:10px; height:30px;"></div>
<div style="column-span:all; margin-top:5px;">
<div style="width:20px; height:5px;"></div>
<div class="abs"></div>
</div>
</div>
</div>
</div>
......@@ -874,13 +929,19 @@ TEST_F(NGOutOfFlowLayoutPartTest, DISABLED_AbsposInSpanner) {
String expectation = R"DUMP(.:: LayoutNG Physical Fragment Tree ::.
offset:unplaced size:1000x40
offset:0,0 size:1000x40
offset:0,0 size:492x1
offset:0,0 size:30x0
offset:0,0 size:1000x0
offset:0,0 size:5x50
offset:0,0 size:492x40
offset:0,0 size:30x0
offset:0,0 size:50x40
offset:0,0 size:50x40
offset:0,0 size:17x15
offset:0,0 size:30x15
offset:0,0 size:10x15
offset:33,0 size:17x15
offset:0,0 size:30x15
offset:0,0 size:10x15
offset:0,20 size:50x5
offset:0,0 size:20x5
offset:0,25 size:17x15
offset:0,0 size:30x0
offset:0,25 size:5x50
)DUMP";
EXPECT_EQ(expectation, dump);
}
......
third_party/blink/web_tests/TestExpectations
View file @ cf9bba9d
......@@ -977,6 +977,7 @@ virtual/layout_ng_block_frag/external/wpt/css/css-break/tall-line-in-short-fragm
virtual/layout_ng_block_frag/external/wpt/css/css-break/trailing-child-margin-000.html [ Pass ]
virtual/layout_ng_block_frag/external/wpt/css/css-break/trailing-child-margin-002.html [ Pass ]
virtual/layout_ng_block_frag/external/wpt/css/css-contain/contain-size-monolithic-002.html [ Pass ]
virtual/layout_ng_block_frag/external/wpt/css/css-multicol/abspos-containing-block-outside-spanner.html [ Pass ]
virtual/layout_ng_block_frag/external/wpt/css/css-multicol/balance-break-avoidance-001.html [ Pass ]
virtual/layout_ng_block_frag/external/wpt/css/css-multicol/balance-orphans-widows-000.html [ Pass ]
virtual/layout_ng_block_frag/external/wpt/css/css-multicol/baseline-001.html [ Pass ]
......@@ -1093,7 +1094,6 @@ crbug.com/1079031 virtual/layout_ng_block_frag/fast/multicol/out-of-flow/nested-
crbug.com/829028 virtual/layout_ng_block_frag/fast/multicol/overflowing-columns-large-gaps.html [ Failure ]
crbug.com/1079031 virtual/layout_ng_block_frag/fast/multicol/positioned-outside-of-columns.html [ Crash Failure ]
crbug.com/1079031 virtual/layout_ng_block_frag/fast/multicol/positioned-split.html [ Failure ]
crbug.com/1079031 virtual/layout_ng_block_frag/fast/multicol/span/abspos-containing-block-outside-spanner.html [ Crash Failure Timeout ]
crbug.com/1058792 virtual/layout_ng_block_frag/fast/multicol/span/invalid-spanner-in-transform.html [ Failure Crash ]
crbug.com/829028 virtual/layout_ng_block_frag/fast/multicol/span/outer-column-break-after-inner-spanner-2.html [ Failure ]
crbug.com/829028 virtual/layout_ng_block_frag/fast/multicol/span/outer-column-break-after-inner-spanner-and-float.html [ Failure ]
......@@ -3185,6 +3185,7 @@ crbug.com/829028 external/wpt/css/css-break/tall-line-in-short-fragmentainer-001
crbug.com/829028 external/wpt/css/css-break/tall-line-in-short-fragmentainer-002.html [ Failure ]
crbug.com/829028 external/wpt/css/css-break/trailing-child-margin-000.html [ Failure ]
crbug.com/829028 external/wpt/css/css-break/trailing-child-margin-002.html [ Failure ]
crbug.com/829028 external/wpt/css/css-multicol/abspos-containing-block-outside-spanner.html [ Failure ]
crbug.com/967329 external/wpt/css/css-multicol/columnfill-auto-max-height-001.html [ Failure ]
crbug.com/967329 external/wpt/css/css-multicol/columnfill-auto-max-height-002.html [ Failure ]
crbug.com/829028 external/wpt/css/css-multicol/balance-break-avoidance-001.html [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-multicol/abspos-containing-block-outside-spanner-ref.html 0 → 100644
View file @ cf9bba9d
<!DOCTYPE html>
<p>There should be no red.</p>
<div style="position:absolute; top:0; left:0; background-color:green; height:100px; width:100px;"></div>
<div style="position:absolute; bottom:0; right:0; background-color:green; height:100px; width:100px;"></div>
third_party/blink/web_tests/external/wpt/css/css-multicol/abspos-containing-block-outside-spanner.html 0 → 100644
View file @ cf9bba9d
<!DOCTYPE html>
<title>Abspos elements nested inside a column spanner</title>
<link rel="help" href="href=https://drafts.csswg.org/css-multicol/">
<link rel="match" href="abspos-containing-block-outside-spanner-ref.html">
<p>There should be no red.</p>
<div style="position:absolute; top:0; left:0; background-color:red; height:100px; width:100px;"></div>
<div style="position:absolute; bottom:0; right:0; background-color:red; height:100px; width:100px;"></div>
<div style="columns:3; column-gap:1em; width:20em;">
<div style="position:relative;">
<div style="column-span:all; height:50px;">
<div style="position:absolute; top:0; left:0; background-color:green; height:100px; width:100px;"></div>
<div style="position:absolute; bottom:0; right:0; background-color:green; height:100px; width:100px;"></div>
</div>
</div>
</div>
third_party/blink/web_tests/fast/multicol/span/abspos-containing-block-outside-spanner-expected.html deleted 100644 → 0
View file @ c5633cbe
<!DOCTYPE html>
<p>Below, the word PASS should be seen twice.</p>
<div style="width:20em; overflow:hidden;">
<br>
<div style="float:left;"><span style="background:green; color:white;">PASS</span></div>
<br>
<div style="margin:10px; height:50px;"></div>
<div style="float:right;"><span style="background:green; color:white;">PASS</span></div>
</div>
third_party/blink/web_tests/fast/multicol/span/abspos-containing-block-outside-spanner.html deleted 100644 → 0
View file @ c5633cbe
<!DOCTYPE html>
<p>Below, the word PASS should be seen twice.</p>
<div style="-webkit-columns:3; -webkit-column-gap:1em; width:20em;">
<br>
<div style="position:relative; orphans:1; widows:1;">
<span style="background:green; color:green;">PASS</span>
<br>
<br>
<br>
<div style="-webkit-column-span:all; margin:10px; height:50px;">
<div style="position:absolute; top:0; left:0; color:white;">PASS</div>
<div style="position:absolute; bottom:0; right:0; color:white;">PASS</div>
</div>
<br>
<br>
<br>
<br>
<div style="text-align:right;">
<span style="background:green; color:green;">PASS</span>
</div>
</div>
<br>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment