1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-06-09 17:44:56 +09:00

LibWeb: Remove application of vertical float clearance to BFC Y offset

In 15103d172c we applied any remaining vertical float clearance to the
BFC's current Y offset for the next block to layout, because a `<br
style="clear: left">` could introduce clearance that would otherwise be
ignored. However, a `<div>` that floats _and_ clears `right` also
introduces this clearance and it is obvious that this should not push
down any subsequent blocks to layout in the current BFC.

Turns out, we don't need this change anymore. Some other later change
also fixed the underlying issue, and by getting rid of the original fix
we can now render https://en.wikipedia.org/wiki/SerenityOS correctly
again.

Fixes #4418.
This commit is contained in:
Jelle Raaijmakers 2025-04-23 10:58:46 +02:00 committed by Andreas Kling
parent 1731389bfe
commit 79352ad725
Notes: github-actions[bot] 2025-04-23 12:26:44 +00:00
3 changed files with 57 additions and 4 deletions

View file

@ -564,10 +564,6 @@ void BlockFormattingContext::layout_inline_children(BlockContainer const& block_
block_container_state.set_content_width(used_width_px); block_container_state.set_content_width(used_width_px);
block_container_state.set_content_height(context.automatic_content_height()); block_container_state.set_content_height(context.automatic_content_height());
} }
// If we end up with remaining vertical clearance, we should make sure the next block is moved down accordingly.
if (context.vertical_float_clearance() > 0)
m_y_offset_of_current_block_container = context.vertical_float_clearance();
} }
CSSPixels BlockFormattingContext::compute_auto_height_for_block_level_element(Box const& box, AvailableSpace const& available_space) CSSPixels BlockFormattingContext::compute_auto_height_for_block_level_element(Box const& box, AvailableSpace const& available_space)

View file

@ -0,0 +1,35 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 650x466 [BFC] children: not-inline
BlockContainer <body> at (8,16) content-size 634x384 children: not-inline
BlockContainer <div.a> at (342,16) content-size 300x225 floating [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,16) content-size 634x0 children: inline
TextNode <#text>
BlockContainer <p> at (8,16) content-size 634x68 children: inline
frag 0 from TextNode start: 0, length: 27, rect: [8,16 232.84375x17] baseline: 13.296875
"Lorem ipsum dolor sit amet,"
frag 1 from TextNode start: 28, length: 35, rect: [8,33 278.125x17] baseline: 13.296875
"consectetur adipiscing elit, sed do"
frag 2 from TextNode start: 64, length: 38, rect: [8,50 316.5x17] baseline: 13.296875
"eiusmod tempor incididunt ut labore et"
frag 3 from TextNode start: 103, length: 20, rect: [8,67 167.078125x17] baseline: 13.296875
"dolore magna aliqua."
TextNode <#text>
BlockContainer <(anonymous)> at (8,100) content-size 634x0 children: inline
TextNode <#text>
BlockContainer <div.a> at (342,241) content-size 300x225 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.b> at (8,100) content-size 634x300 children: not-inline
BlockContainer <(anonymous)> at (8,400) content-size 634x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 650x466]
PaintableWithLines (BlockContainer<BODY>) [8,16 634x384]
PaintableWithLines (BlockContainer<DIV>.a) [342,16 300x225]
PaintableWithLines (BlockContainer(anonymous)) [8,16 634x0]
PaintableWithLines (BlockContainer<P>) [8,16 634x68]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,100 634x0]
PaintableWithLines (BlockContainer<DIV>.a) [342,241 300x225]
PaintableWithLines (BlockContainer<DIV>.b) [8,100 634x300]
PaintableWithLines (BlockContainer(anonymous)) [8,400 634x0]

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<style>
html {
font-family: sans-serif;
width: 650px;
}
.a {
background: rgba(0, 255, 0, 0.6);
clear: right;
float: right;
height: 225px;
width: 300px;
}
.b {
background: rgba(255, 0, 0, 0.6);
height: 300px;
}
</style>
<div class="a"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="a"></div>
<div class="b"></div>