Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-19 11:20:09 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Make lines non-phantom if they have inline padding/border/margin (#39058)

Browse source 
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 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.

Testing: Adding new tests
Fixes: #39057

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-09-17 00:18:46 +02:00 • committed by GitHub
parent 4451ce0ef1
commit 18b3e5fe21
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 416 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

80
tests/wpt/meta/MANIFEST.json vendored
View file

@ -210635,6 +210635,86 @@
]
]
},
"model": {
"phantom-line-boxes-001.html": [
"da0e9095b7a37e6b4a897269e753175c68039a34",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"phantom-line-boxes-002.html": [
"c180a9bf3b5c4cda3e281d84bb36b6d8b2bae91c",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"phantom-line-boxes-003.html": [
"633aa9dfba8d81d515c807c66074b77c73dbfee4",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"phantom-line-boxes-004.html": [
"0b4f7737ee21b4490e951ce1677772b9d1ae2d71",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"phantom-line-boxes-005.html": [
"dd2620294412fab68af218f30e470a3003255dd4",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"phantom-line-boxes-006.html": [
"7b5a43cbf811680087429abe5b0236d1221f28d4",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
]
},
"text-box-trim": {
"border-padding-001.html": [
"9c25c42a1def684b364e98dc9d6233cd5c700519",

49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-001.html vendored Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
prevent a line box from becoming a phantom line box, and therefore prevent
the inline formatting context from collapsing margins through.
This test checks non-zero padding.">
<style>
.wrapper {
float: left;
width: 50px;
background: red;
}
.wrapper.phantom {
background: green;
}
.wrapper > div {
line-height: 0;
background: green;
}
.wrapper.phantom > div {
background: red
}
.wrapper > div::after {
content: "";
display: flow-root;
margin-top: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="wrapper phantom">
<div><span style="padding-top: 1px"></span></div>
</div>
<div class="wrapper phantom">
<div><span style="padding-bottom: 1px"></span></div>
</div>
<div class="wrapper">
<div><span style="padding-left: 1px"></span></div>
</div>
<div class="wrapper">
<div><span style="padding-right: 1px"></span></div>
</div>

49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-002.html vendored Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
prevent a line box from becoming a phantom line box, and therefore prevent
the inline formatting context from collapsing margins through.
This test checks non-zero borders.">
<style>
.wrapper {
float: left;
width: 50px;
background: red;
}
.wrapper.phantom {
background: green;
}
.wrapper > div {
line-height: 0;
background: green;
}
.wrapper.phantom > div {
background: red
}
.wrapper > div::after {
content: "";
display: flow-root;
margin-top: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="wrapper phantom">
<div><span style="border-top: 1px solid transparent"></span></div>
</div>
<div class="wrapper phantom">
<div><span style="border-bottom: 1px solid transparent"></span></div>
</div>
<div class="wrapper">
<div><span style="border-left: 1px solid transparent"></span></div>
</div>
<div class="wrapper">
<div><span style="border-right: 1px solid transparent"></span></div>
</div>

49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-003.html vendored Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
prevent a line box from becoming a phantom line box, and therefore prevent
the inline formatting context from collapsing margins through.
This test checks positive margins.">
<style>
.wrapper {
float: left;
width: 50px;
background: red;
}
.wrapper.phantom {
background: green;
}
.wrapper > div {
line-height: 0;
background: green;
}
.wrapper.phantom > div {
background: red
}
.wrapper > div::after {
content: "";
display: flow-root;
margin-top: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="wrapper phantom">
<div><span style="margin-top: 1px"></span></div>
</div>
<div class="wrapper phantom">
<div><span style="margin-bottom: 1px"></span></div>
</div>
<div class="wrapper">
<div><span style="margin-left: 1px"></span></div>
</div>
<div class="wrapper">
<div><span style="margin-right: 1px"></span></div>
</div>

49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-004.html vendored Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
prevent a line box from becoming a phantom line box, and therefore prevent
the inline formatting context from collapsing margins through.
This test checks negative margins.">
<style>
.wrapper {
float: left;
width: 50px;
background: red;
}
.wrapper.phantom {
background: green;
}
.wrapper > div {
line-height: 0;
background: green;
}
.wrapper.phantom > div {
background: red
}
.wrapper > div::after {
content: "";
display: flow-root;
margin-top: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="wrapper phantom">
<div><span style="margin-top: -1px"></span></div>
</div>
<div class="wrapper phantom">
<div><span style="margin-bottom: -1px"></span></div>
</div>
<div class="wrapper">
<div><span style="margin-left: -1px"></span></div>
</div>
<div class="wrapper">
<div><span style="margin-right: -1px"></span></div>
</div>

49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-005.html vendored Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
prevent a line box from becoming a phantom line box, and therefore prevent
the inline formatting context from collapsing margins through.
This test checks non-zero margins that add up to zero in that axis.">
<style>
.wrapper {
float: left;
width: 50px;
background: red;
}
.wrapper.phantom {
background: green;
}
.wrapper > div {
line-height: 0;
background: green;
}
.wrapper.phantom > div {
background: red
}
.wrapper > div::after {
content: "";
display: flow-root;
margin-top: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="wrapper phantom">
<div><span style="margin-top: 1px; margin-bottom: -1px"></span></div>
</div>
<div class="wrapper phantom">
<div><span style="margin-top: -1px; margin-bottom: 1px"></span></div>
</div>
<div class="wrapper">
<div><span style="margin-left: 1px; margin-right: -1px"></span></div>
</div>
<div class="wrapper">
<div><span style="margin-left: -1px; margin-right: 1px"></span></div>
</div>

50
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-006.html vendored Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
prevent a line box from becoming a phantom line box, and therefore prevent
the inline formatting context from collapsing margins through.
This test checks non-zero margins and padding in the same box side, which
add up to zero.">
<style>
.wrapper {
float: left;
width: 50px;
background: red;
}
.wrapper.phantom {
background: green;
}
.wrapper > div {
line-height: 0;
background: green;
}
.wrapper.phantom > div {
background: red
}
.wrapper > div::after {
content: "";
display: flow-root;
margin-top: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="wrapper phantom">
<div><span style="padding-top: 1px; margin-top: -1px"></span></div>
</div>
<div class="wrapper phantom">
<div><span style="padding-bottom: 1px; padding-bottom: -1px"></span></div>
</div>
<div class="wrapper">
<div><span style="padding-left: 1px; margin-left: -1px"></span></div>
</div>
<div class="wrapper">
<div><span style="padding-right: 1px; margin-right: -1px"></span></div>
</div>