LibWeb: Only set line builder's block offset if clearance increases it

This prevents text from overlapping with each other if a `<br>` with
`clear: ..` is used in between.
This commit is contained in:
Jelle Raaijmakers 2025-03-30 02:17:10 +01:00
parent 568531f06a
commit 923bc14f84
3 changed files with 47 additions and 1 deletions

View file

@ -283,7 +283,8 @@ void InlineFormattingContext::generate_line_boxes()
if (item.node) {
auto introduce_clearance = parent().clear_floating_boxes(*item.node, *this);
if (introduce_clearance == BlockFormattingContext::DidIntroduceClearance::Yes) {
line_builder.set_current_block_offset(vertical_float_clearance());
if (vertical_float_clearance() > line_builder.current_block_offset())
line_builder.set_current_block_offset(vertical_float_clearance());
parent().reset_margin_state();
}
}

View file

@ -0,0 +1,24 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x100 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x84 children: not-inline
BlockContainer <div.a> at (8,8) content-size 50x84 children: inline
frag 0 from TextNode start: 1, length: 3, rect: [8,58 27.15625x17] baseline: 13.296875
"foo"
frag 1 from TextNode start: 1, length: 3, rect: [8,75 27.640625x17] baseline: 13.296875
"bar"
TextNode <#text>
BlockContainer <div.b> at (8,8) content-size 50x50 floating [BFC] children: not-inline
TextNode <#text>
BreakNode <br.c>
TextNode <#text>
BlockContainer <(anonymous)> at (8,92) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x100]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x84]
PaintableWithLines (BlockContainer<DIV>.a) [8,8 50x84]
PaintableWithLines (BlockContainer<DIV>.b) [8,8 50x50]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,92 784x0]

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<style>
.a {
width: 50px;
}
.b {
background: red;
float: right;
height: 50px;
width: 50px;
}
.c {
clear: right;
}
</style>
<div class="a">
<div class="b"></div>
foo
<br class="c">
bar
</div>