Skip to content

Commit bc09e43

Browse files
Loirooriolservo-wpt-sync
Loirooriol
authored and
servo-wpt-sync
committed
layout: Make lines non-phantom if they have inline padding/border/margin
According to https://drafts.csswg.org/css-inline/#invisible-line-boxes, if a line box contains non-zero inline-axis margins, padding or borders, then it can't be phantom. Therefore, this patch makes adds a `has_inline_pbm` flag to the line. Note that we can't use the `has_content` flag, because that would add a soft wrap wrap opportunity between the padding/border/margin and the first content of the line. The patch also renames `InlineFormattingContext::had_inflow_content` to `has_line_boxes`, which is what we care about for collapsing margins through. Signed-off-by: Oriol Brufau <obrufau@igalia.com>
1 parent 89966df commit bc09e43

File tree

6 files changed

+295
-0
lines changed

6 files changed

+295
-0
lines changed

‎css/css-inline/model/phantom-line-boxes-001.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
3+
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
5+
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
7+
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
8+
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
9+
prevent a line box from becoming a phantom line box, and therefore prevent
10+
the inline formatting context from collapsing margins through.
11+
This test checks non-zero padding.">
12+
13+
<style>
14+
.wrapper {
15+
float: left;
16+
width: 50px;
17+
background: red;
18+
}
19+
.wrapper.phantom {
20+
background: green;
21+
}
22+
.wrapper > div {
23+
line-height: 0;
24+
background: green;
25+
}
26+
.wrapper.phantom > div {
27+
background: red
28+
}
29+
.wrapper > div::after {
30+
content: "";
31+
display: flow-root;
32+
margin-top: 200px;
33+
}
34+
</style>
35+
36+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
37+
38+
<div class="wrapper phantom">
39+
<div><span style="padding-top: 1px"></span></div>
40+
</div>
41+
<div class="wrapper phantom">
42+
<div><span style="padding-bottom: 1px"></span></div>
43+
</div>
44+
<div class="wrapper">
45+
<div><span style="padding-left: 1px"></span></div>
46+
</div>
47+
<div class="wrapper">
48+
<div><span style="padding-right: 1px"></span></div>
49+
</div>

‎css/css-inline/model/phantom-line-boxes-002.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
3+
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
5+
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
7+
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
8+
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
9+
prevent a line box from becoming a phantom line box, and therefore prevent
10+
the inline formatting context from collapsing margins through.
11+
This test checks non-zero borders.">
12+
13+
<style>
14+
.wrapper {
15+
float: left;
16+
width: 50px;
17+
background: red;
18+
}
19+
.wrapper.phantom {
20+
background: green;
21+
}
22+
.wrapper > div {
23+
line-height: 0;
24+
background: green;
25+
}
26+
.wrapper.phantom > div {
27+
background: red
28+
}
29+
.wrapper > div::after {
30+
content: "";
31+
display: flow-root;
32+
margin-top: 200px;
33+
}
34+
</style>
35+
36+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
37+
38+
<div class="wrapper phantom">
39+
<div><span style="border-top: 1px solid transparent"></span></div>
40+
</div>
41+
<div class="wrapper phantom">
42+
<div><span style="border-bottom: 1px solid transparent"></span></div>
43+
</div>
44+
<div class="wrapper">
45+
<div><span style="border-left: 1px solid transparent"></span></div>
46+
</div>
47+
<div class="wrapper">
48+
<div><span style="border-right: 1px solid transparent"></span></div>
49+
</div>

‎css/css-inline/model/phantom-line-boxes-003.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
3+
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
5+
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
7+
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
8+
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
9+
prevent a line box from becoming a phantom line box, and therefore prevent
10+
the inline formatting context from collapsing margins through.
11+
This test checks positive margins.">
12+
13+
<style>
14+
.wrapper {
15+
float: left;
16+
width: 50px;
17+
background: red;
18+
}
19+
.wrapper.phantom {
20+
background: green;
21+
}
22+
.wrapper > div {
23+
line-height: 0;
24+
background: green;
25+
}
26+
.wrapper.phantom > div {
27+
background: red
28+
}
29+
.wrapper > div::after {
30+
content: "";
31+
display: flow-root;
32+
margin-top: 200px;
33+
}
34+
</style>
35+
36+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
37+
38+
<div class="wrapper phantom">
39+
<div><span style="margin-top: 1px"></span></div>
40+
</div>
41+
<div class="wrapper phantom">
42+
<div><span style="margin-bottom: 1px"></span></div>
43+
</div>
44+
<div class="wrapper">
45+
<div><span style="margin-left: 1px"></span></div>
46+
</div>
47+
<div class="wrapper">
48+
<div><span style="margin-right: 1px"></span></div>
49+
</div>

‎css/css-inline/model/phantom-line-boxes-004.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
3+
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
5+
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
7+
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
8+
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
9+
prevent a line box from becoming a phantom line box, and therefore prevent
10+
the inline formatting context from collapsing margins through.
11+
This test checks negative margins.">
12+
13+
<style>
14+
.wrapper {
15+
float: left;
16+
width: 50px;
17+
background: red;
18+
}
19+
.wrapper.phantom {
20+
background: green;
21+
}
22+
.wrapper > div {
23+
line-height: 0;
24+
background: green;
25+
}
26+
.wrapper.phantom > div {
27+
background: red
28+
}
29+
.wrapper > div::after {
30+
content: "";
31+
display: flow-root;
32+
margin-top: 200px;
33+
}
34+
</style>
35+
36+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
37+
38+
<div class="wrapper phantom">
39+
<div><span style="margin-top: -1px"></span></div>
40+
</div>
41+
<div class="wrapper phantom">
42+
<div><span style="margin-bottom: -1px"></span></div>
43+
</div>
44+
<div class="wrapper">
45+
<div><span style="margin-left: -1px"></span></div>
46+
</div>
47+
<div class="wrapper">
48+
<div><span style="margin-right: -1px"></span></div>
49+
</div>

‎css/css-inline/model/phantom-line-boxes-005.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
3+
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
5+
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
7+
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
8+
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
9+
prevent a line box from becoming a phantom line box, and therefore prevent
10+
the inline formatting context from collapsing margins through.
11+
This test checks non-zero margins that add up to zero in that axis.">
12+
13+
<style>
14+
.wrapper {
15+
float: left;
16+
width: 50px;
17+
background: red;
18+
}
19+
.wrapper.phantom {
20+
background: green;
21+
}
22+
.wrapper > div {
23+
line-height: 0;
24+
background: green;
25+
}
26+
.wrapper.phantom > div {
27+
background: red
28+
}
29+
.wrapper > div::after {
30+
content: "";
31+
display: flow-root;
32+
margin-top: 200px;
33+
}
34+
</style>
35+
36+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
37+
38+
<div class="wrapper phantom">
39+
<div><span style="margin-top: 1px; margin-bottom: -1px"></span></div>
40+
</div>
41+
<div class="wrapper phantom">
42+
<div><span style="margin-top: -1px; margin-bottom: 1px"></span></div>
43+
</div>
44+
<div class="wrapper">
45+
<div><span style="margin-left: 1px; margin-right: -1px"></span></div>
46+
</div>
47+
<div class="wrapper">
48+
<div><span style="margin-left: -1px; margin-right: 1px"></span></div>
49+
</div>

‎css/css-inline/model/phantom-line-boxes-006.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
3+
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
5+
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
7+
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
8+
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
9+
prevent a line box from becoming a phantom line box, and therefore prevent
10+
the inline formatting context from collapsing margins through.
11+
This test checks non-zero margins and padding in the same box side, which
12+
add up to zero.">
13+
14+
<style>
15+
.wrapper {
16+
float: left;
17+
width: 50px;
18+
background: red;
19+
}
20+
.wrapper.phantom {
21+
background: green;
22+
}
23+
.wrapper > div {
24+
line-height: 0;
25+
background: green;
26+
}
27+
.wrapper.phantom > div {
28+
background: red
29+
}
30+
.wrapper > div::after {
31+
content: "";
32+
display: flow-root;
33+
margin-top: 200px;
34+
}
35+
</style>
36+
37+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
38+
39+
<div class="wrapper phantom">
40+
<div><span style="padding-top: 1px; margin-top: -1px"></span></div>
41+
</div>
42+
<div class="wrapper phantom">
43+
<div><span style="padding-bottom: 1px; padding-bottom: -1px"></span></div>
44+
</div>
45+
<div class="wrapper">
46+
<div><span style="padding-left: 1px; margin-left: -1px"></span></div>
47+
</div>
48+
<div class="wrapper">
49+
<div><span style="padding-right: 1px; margin-right: -1px"></span></div>
50+
</div>

0 commit comments

Comments
 (0)