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

layout: Avoid setting baseline for phantom line boxes (#39055)

Browse source 
Phantom line boxes should be treated as non-existing for most purposes,
so don't let them affect the baseline of their block container.

Testing: An existing test passes, and also adding a new one which
doesn't rely on `<button>`

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-09-01 04:52:17 +02:00 • committed by GitHub
parent dc7fca5c79
commit 6e92e1d7d5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 73 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

8
components/layout/flow/inline/mod.rs
View file

@ -993,9 +993,11 @@ impl InlineFormattingContextLayout<'_> {
return;
}
let baseline = baseline_offset + block_start_position;
self.baselines.first.get_or_insert(baseline);
self.baselines.last = Some(baseline);
if line_to_layout.has_content {
let baseline = baseline_offset + block_start_position;
self.baselines.first.get_or_insert(baseline);
self.baselines.last = Some(baseline);
}
// The inline part of this start offset was taken into account when determining
// the inline start of the line in `calculate_inline_start_for_current_line` so

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

@ -118868,6 +118868,19 @@
{}
]
],
"inline-block-baseline-015.html": [
"34b4de90b5432c058c25f54927799ac687d95abd",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"line-height-201.html": [
"00ab2aa52755d27c5bbd3b41d91a6f8e138c2899",
[

2
tests/wpt/meta/html/rendering/widgets/button-layout/block-in-inline.html.ini vendored
View file

@ -1,2 +0,0 @@
[block-in-inline.html]
expected: FAIL

55
tests/wpt/tests/css/CSS2/visudet/inline-block-baseline-015.html vendored Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<title>Vertical-align: baseline of inline-block with phantom line box</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css2/#leading">
<link rel="help" href="https://drafts.csswg.org/css2/#inline-formatting">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="
From https://drafts.csswg.org/css2/#leading
> The baseline of an inline-block is the baseline of its last line box in the normal flow,
> unless it has either no in-flow line boxes or if its overflow property has a computed
> value other than visible, in which case the baseline is the bottom margin edge.
Here we have 2 inline-blocks. The 1st one is completely empty, so it baseline is its
bottom margin edge. The 2nd one has an empty span followed by a block.
The span would typically be placed in a line box. However, it's a phantom line box.
From https://drafts.csswg.org/css2/#inline-formatting
> Line boxes that contain no text, no preserved white space, no inline elements with
> non-zero margins, padding, or borders, and no other in-flow content (such as images,
> inline blocks or inline tables), and do not end with a preserved newline must be
> treated as zero-height line boxes for the purposes of determining the positions of
> any elements inside of them, and must be treated as not existing for any other purpose.
So for the purpose of finding the baseline of the 2nd inline-block we ignore the phantom
line box, and thus the baseline is also the bottom margin edge.
Therefore, the inline-blocks should have their bottom margin edges aligned.
">
<style>
.wrapper {
width: 200px;
background: red;
line-height: 0;
font-size: 0;
}
.green {
width: 100px;
height: 200px;
background: green;
}
.inline-block {
display: inline-block;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="wrapper">
<div class="inline-block green"></div>
<div class="inline-block">
<span></span>
<div class="green"></div>
</div>
</div>