mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-05 15:49:11 +00:00
LibWeb: Prevent time-traveling leading inline metrics
Some checks are pending
CI / macOS, arm64, Sanitizer_CI, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers_CI, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer_CI, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer_CI, Clang (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
Some checks are pending
CI / macOS, arm64, Sanitizer_CI, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers_CI, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer_CI, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer_CI, Clang (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
In `InlineLevelIterator`, whenever we call `skip_to_next()` and enter a node with box model metrics, we could potentially accumulate leading and trailing metrics. This lead to a weird situation where an element with `display: inline-block` could adopt the leading metrics of an inline element that follows it, since we perform the call to `add_extra_box_model_metrics_to_item()` too late. Move `skip_to_next()` down so it no longer interferes with the `Item` we're creating. The test expectation for `atomic-inline-with-percentage-vertical-align.html` is updated, although neither the old nor new results are 100% accurate since either box jumps one pixel to the right.
This commit is contained in:
Jelle Raaijmakers
Alexander Kalenik
parent
de24bc5d26
commit
30efcd0d00
Notes:
github-actions[bot]
2025-06-20 18:00:38 +00:00
Author: https://github.com/gmta
Commit: 30efcd0d00
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5149
4 changed files with 114 additions and 7 deletions
|
|
@ -620,7 +620,6 @@ Optional<InlineLevelIterator::Item> InlineLevelIterator::next_without_lookahead(
|
|||
auto& box_state = m_layout_state.get(box);
|
||||
m_inline_formatting_context.dimension_box_on_line(box, m_layout_mode);
|
||||
|
||||
skip_to_next();
|
||||
auto item = Item {
|
||||
.type = Item::Type::Element,
|
||||
.node = &box,
|
||||
|
|
@ -635,6 +634,7 @@ Optional<InlineLevelIterator::Item> InlineLevelIterator::next_without_lookahead(
|
|||
.margin_end = box_state.margin_right,
|
||||
};
|
||||
add_extra_box_model_metrics_to_item(item, true, true);
|
||||
skip_to_next();
|
||||
return item;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (1,1) content-size 798x62.40625 [BFC] children: not-inline
|
||||
BlockContainer <body> at (2,2) content-size 796x60.40625 children: inline
|
||||
frag 0 from BlockContainer start: 0, length: 0, rect: [4,3 30x30] baseline: 32
|
||||
frag 1 from BlockContainer start: 0, length: 0, rect: [3,35 30x30] baseline: 32
|
||||
BlockContainer <div.clump> at (4,3) content-size 30x30 inline-block [BFC] children: not-inline
|
||||
frag 0 from BlockContainer start: 0, length: 0, rect: [3,3 30x30] baseline: 32
|
||||
frag 1 from BlockContainer start: 0, length: 0, rect: [4,35 30x30] baseline: 32
|
||||
BlockContainer <div.clump> at (3,3) content-size 30x30 inline-block [BFC] children: not-inline
|
||||
BreakNode <br>
|
||||
BlockContainer <div.clump> at (3,35) content-size 30x30 inline-block [BFC] children: not-inline
|
||||
BlockContainer <div.clump> at (4,35) content-size 30x30 inline-block [BFC] children: not-inline
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x64.40625] overflow: [1,1 798x64]
|
||||
PaintableWithLines (BlockContainer<BODY>) [1,1 798x62.40625] overflow: [2,2 796x63]
|
||||
PaintableWithLines (BlockContainer<DIV>.clump) [3,2 32x32]
|
||||
PaintableWithLines (BlockContainer<DIV>.clump) [2,34 32x32]
|
||||
PaintableWithLines (BlockContainer<DIV>.clump) [2,2 32x32]
|
||||
PaintableWithLines (BlockContainer<DIV>.clump) [3,34 32x32]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x76 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x60 children: not-inline
|
||||
BlockContainer <div#a> at (9,9) content-size 782x18 children: inline
|
||||
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 88.453125x18] baseline: 13.796875
|
||||
BlockContainer <i> at (9,9) content-size 88.453125x18 inline-block [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 12, rect: [9,9 88.453125x18] baseline: 13.796875
|
||||
"inline-block"
|
||||
TextNode <#text>
|
||||
InlineNode <b>
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [117.453125,9 41.296875x18] baseline: 13.796875
|
||||
"inline"
|
||||
TextNode <#text>
|
||||
InlineNode <u>
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [158.75,9 41.296875x18] baseline: 13.796875
|
||||
"inline"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,28) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div#b> at (9,29) content-size 782x18 children: inline
|
||||
frag 0 from BlockContainer start: 0, length: 0, rect: [70.296875,29 88.453125x18] baseline: 13.796875
|
||||
InlineNode <i>
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [9,29 41.296875x18] baseline: 13.796875
|
||||
"inline"
|
||||
TextNode <#text>
|
||||
BlockContainer <b> at (70.296875,29) content-size 88.453125x18 inline-block [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 12, rect: [70.296875,29 88.453125x18] baseline: 13.796875
|
||||
"inline-block"
|
||||
TextNode <#text>
|
||||
InlineNode <u>
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [158.75,29 41.296875x18] baseline: 13.796875
|
||||
"inline"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,48) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div#c> at (9,49) content-size 782x18 children: inline
|
||||
frag 0 from BlockContainer start: 0, length: 0, rect: [131.59375,49 88.453125x18] baseline: 13.796875
|
||||
InlineNode <i>
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [9,49 41.296875x18] baseline: 13.796875
|
||||
"inline"
|
||||
TextNode <#text>
|
||||
InlineNode <b>
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [70.296875,49 41.296875x18] baseline: 13.796875
|
||||
"inline"
|
||||
TextNode <#text>
|
||||
BlockContainer <u> at (131.59375,49) content-size 88.453125x18 inline-block [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 12, rect: [131.59375,49 88.453125x18] baseline: 13.796875
|
||||
"inline-block"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,68) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x76]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x60]
|
||||
PaintableWithLines (BlockContainer<DIV>#a) [8,8 784x20]
|
||||
PaintableWithLines (BlockContainer<I>) [9,9 88.453125x18]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (InlineNode<B>)
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (InlineNode<U>)
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,28 784x0]
|
||||
PaintableWithLines (BlockContainer<DIV>#b) [8,28 784x20]
|
||||
PaintableWithLines (InlineNode<I>)
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<B>) [70.296875,29 88.453125x18]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (InlineNode<U>)
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,48 784x0]
|
||||
PaintableWithLines (BlockContainer<DIV>#c) [8,48 784x20]
|
||||
PaintableWithLines (InlineNode<I>)
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (InlineNode<B>)
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<U>) [131.59375,49 88.453125x18]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,68 784x0]
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid red;
|
||||
}
|
||||
#a i {
|
||||
display: inline-block;
|
||||
}
|
||||
#a b {
|
||||
padding-left: 20px;
|
||||
}
|
||||
#b i {
|
||||
padding-right: 20px;
|
||||
}
|
||||
#b b {
|
||||
display: inline-block;
|
||||
}
|
||||
#c b {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
#c u {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<div id="a"><i>inline-block</i><b>inline</b><u>inline</u></div>
|
||||
<div id="b"><i>inline</i><b>inline-block</b><u>inline</u></div>
|
||||
<div id="c"><i>inline</i><b>inline</b><u>inline-block</u></div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue