Skip to content

Commit 67a78f5

Browse files
alisonmaherchromium-wpt-export-bot
alisonmaher
authored and
chromium-wpt-export-bot
committed
[LayoutNG] Relative offset for OOFs with inline CBs in a multicol
Relative offsets should be applied after fragmentation. Since we perform layout for OOFs once they reach the fragmentation context root (if applicable), we fail to apply any relative offsets at the correct time in the case of inline containing blocks. See CL:2851595 for how this was handled for the non-inline case. The changes required to accomplish this for inline containing blocks include: 1. We currently store an accumulated relative offset in NGContainingBlock inside the OOF node, which is any relative offset from the containing block to the fragmentation context root. We also need to store an accumulated relative offset from the inline container to the containing block in order to properly apply all relative offsets at the time of fragmentation. A new struct, NGInlineContainer, was added to the OOF node to hold the inline container object and the accumulated relative offset to the containing block. 2. A relative offset was also added to the InlineContainingBlockGeometry struct so that we have access to the relative offset from #1 when creating the ContainingBlockInfo for the inline container. 3. The way that relative offsets are applied to inlines, it didn't seem straightforward to separate the relative offset from the normal offset, like we had in CL:2851595. Instead, store the relative offset for the inline and subtract it out from the OOF static position once it reaches the containing block, and subtract it from the containing block rect offset when determining the ContainingBlockInfo for the inline container. 4. Store the total relative offset (from the inline container to the fragmentation context root) in ContainingBlockInfo. This relative offset will then be applied after fragmentation is complete for the OOF as a result of CL:2851595. Bug: 1079031 Change-Id: I7198fec4c01e05ca54c51b2f215569b75b0b869e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2995308 Commit-Queue: Alison Maher <almaher@microsoft.com> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/master@{#902060}
1 parent a1cb55f commit 67a78f5

6 files changed

+247
-0
lines changed

‎css/css-break/out-of-flow-in-multicolumn-058.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Out-of-flow positioned element in multicol with inline containing block - the
4+
relative offset should apply to the OOF descendant after fragmentation.
5+
</title>
6+
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
8+
<style>
9+
.multicol {
10+
column-count: 2;
11+
column-fill: auto;
12+
column-gap: 0px;
13+
height: 100px;
14+
width: 100px;
15+
margin-left: -400px;
16+
margin-top: -400px;
17+
}
18+
.rel {
19+
position: relative;
20+
}
21+
.abs {
22+
position: absolute;
23+
background-color: green;
24+
width: 50px;
25+
}
26+
</style>
27+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
28+
<div class="multicol">
29+
<div class="rel" style="top: 200px; left: 200px;">
30+
<div class="rel" style="top: 50px; left: 50px;">
31+
<span class="rel" style="top: 50px; left: 100px;">
32+
<span class="rel" style="top: 100px; left: 50px;">
33+
<div style="height: 200px; width: 50px; background: red;"></div>
34+
<div class="abs" style="top: 0px; height: 50px;"></div>
35+
<div class="abs" style="top: 50px; height: 150px;"></div>
36+
</span>
37+
</span>
38+
</div>
39+
</div>
40+
</div>

‎css/css-break/out-of-flow-in-multicolumn-059.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Out-of-flow positioned element in multicol - the relative offset should
4+
apply to the OOF descendant after fragmentation.
5+
</title>
6+
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
8+
<style>
9+
.multicol {
10+
column-count: 2;
11+
column-fill: auto;
12+
column-gap: 0px;
13+
height: 100px;
14+
width: 100px;
15+
margin-left: -150px;
16+
margin-top: -150px;
17+
}
18+
.rel {
19+
position: relative;
20+
}
21+
.abs {
22+
position: absolute;
23+
background-color: green;
24+
height: 200px;
25+
width: 50px;
26+
top: 0px;
27+
}
28+
</style>
29+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
30+
<div class="multicol">
31+
<span class="rel" style="top: 50px; left: 100px;">
32+
<div class="rel" style="top: 100px; left: 50px;">
33+
<div style="height: 200px; width: 50px; background: red;"></div>
34+
<span class="abs"></span>
35+
</div>
36+
</span>
37+
</div>

‎css/css-break/out-of-flow-in-multicolumn-060.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Nested out-of-flow positioned element in multicol with inline containing
4+
block - the relative offset should apply to the OOF descendant after
5+
fragmentation.
6+
</title>
7+
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
8+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9+
<style>
10+
.multicol {
11+
column-count: 2;
12+
column-fill: auto;
13+
column-gap: 0px;
14+
height: 100px;
15+
width: 100px;
16+
margin-left: -100px;
17+
margin-top: -50px;
18+
}
19+
.rel {
20+
position: relative;
21+
}
22+
.abs {
23+
position: absolute;
24+
background-color: green;
25+
height: 200px;
26+
width: 50px;
27+
top: 0px;
28+
}
29+
</style>
30+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
31+
<div class="multicol">
32+
<div class="rel" style="top: 50px; left: 100px;">
33+
<span class="abs">
34+
<div style="height: 200px; width: 50px; background: red;"></div>
35+
<div class="abs"></div>
36+
</span>
37+
</div>
38+
</div>

‎css/css-break/out-of-flow-in-multicolumn-061.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Nested out-of-flow positioned element in multicol - the relative offset
4+
should apply to the OOF descendant after fragmentation.
5+
</title>
6+
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
8+
<style>
9+
.multicol {
10+
column-count: 2;
11+
column-fill: auto;
12+
column-gap: 0px;
13+
height: 100px;
14+
width: 100px;
15+
margin-left: -100px;
16+
}
17+
.rel {
18+
position: relative;
19+
}
20+
.oof {
21+
background-color: green;
22+
height: 100px;
23+
width: 50px;
24+
}
25+
#abs {
26+
position: absolute;
27+
top: 100px;
28+
}
29+
#fixed {
30+
position: fixed;
31+
top: 0px;
32+
left: 100px;
33+
}
34+
</style>
35+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
36+
<div class="multicol">
37+
<div style="transform: translateX(0);">
38+
<div class="rel" style="left: 100px;">
39+
<div style="height: 200px; width: 50px; background: red;"></div>
40+
<span class="oof" id="abs">
41+
<div class="oof" id="fixed"></div>
42+
</span>
43+
</div>
44+
</div>
45+
</div>

‎css/css-break/out-of-flow-in-multicolumn-062.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Out-of-flow positioned element in nested multicol with inline containing
4+
block - the relative offset should apply to the OOF descendant after
5+
fragmentation.
6+
</title>
7+
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
8+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9+
<style>
10+
.multicol {
11+
column-count: 2;
12+
column-fill: auto;
13+
column-gap: 0px;
14+
}
15+
#outer {
16+
height: 100px;
17+
width: 100px;
18+
margin-left: -150px;
19+
margin-top: -150px;
20+
}
21+
#inner {
22+
width: 50px;
23+
}
24+
.rel {
25+
position: relative;
26+
}
27+
.abs {
28+
position: absolute;
29+
background-color: green;
30+
width: 25px;
31+
height: 400px;
32+
left: -100px;
33+
}
34+
</style>
35+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
36+
<div class="multicol" id="outer">
37+
<div class="multicol" id="inner">
38+
<div class="rel" style="top: 50px; left: 100px;">
39+
<span class="rel" style="top: 100px; left: 50px;">
40+
<div style="height: 400px; width: 25px; background: red;"></div>
41+
<div class="abs"></div>
42+
</span>
43+
</div>
44+
</div>
45+
</div>

‎css/css-break/out-of-flow-in-multicolumn-063.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Out-of-flow positioned element in multicol with inline containing
4+
block and vertical-rl writing mode.
5+
</title>
6+
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
8+
<style>
9+
.multicol {
10+
writing-mode: vertical-lr;
11+
direction: rtl;
12+
columns: 2;
13+
column-fill: auto;
14+
height: 100px;
15+
width: 100px;
16+
column-gap: 0px;
17+
margin-top: 66px;
18+
margin-left: -50px;
19+
}
20+
.rel {
21+
position: relative;
22+
inset-block-start: 50px;
23+
inset-inline-start: 50px;
24+
}
25+
.abs {
26+
position: absolute;
27+
inline-size: 50px;
28+
block-size: 200px;
29+
inset-block-start: 0;
30+
inset-inline-start: 0;
31+
background: green;
32+
}
33+
</style>
34+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
35+
<div class="multicol">
36+
<div>
37+
<span class="rel">
38+
<div style="block-size: 200px; inline-size: 50px; background: red;"></div>
39+
<div class="abs"></div>
40+
</span>
41+
</div>
42+
</div>

0 commit comments

Comments
 (0)