From e8bc6e9e8eefc65c1a7e402d16875207ede19be3 Mon Sep 17 00:00:00 2001 From: Jelle Raaijmakers Date: Mon, 27 Jan 2025 12:14:10 +0100 Subject: [PATCH] LibWeb: Set float Y offset using margin box bottom instead of height When positioning floats against an edge, we are taking all current relevant floats at that side into account to determine the Y offset at which to place the new float. However, we were using the margin box height instead of the absolute bottom position, which disregards the current float's Y-position within the root, and we were setting the Y offset to that height, instead of taking the new float's Y position inside of the root into account. The new code determines the lowest margin bottom value within the root of the current floats, and adds the difference between that value and the new float's Y position to the Y offset. --- .../LibWeb/Layout/BlockFormattingContext.cpp | 5 +-- ...oat-vertical-offset-by-preceding-float.txt | 33 +++++++++++++++++++ ...at-vertical-offset-by-preceding-float.html | 3 ++ 3 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/float-vertical-offset-by-preceding-float.txt create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/float-vertical-offset-by-preceding-float.html diff --git a/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Libraries/LibWeb/Layout/BlockFormattingContext.cpp index 9ccf0d50195..543ba79ae0d 100644 --- a/Libraries/LibWeb/Layout/BlockFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/BlockFormattingContext.cpp @@ -1128,10 +1128,11 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer float_to_edge(); CSSPixels lowest_margin_edge = 0; for (auto const& current : side_data.current_boxes) { - lowest_margin_edge = max(lowest_margin_edge, current.used_values.margin_box_height()); + auto current_rect = margin_box_rect_in_ancestor_coordinate_space(current.used_values, root()); + lowest_margin_edge = max(lowest_margin_edge, current_rect.bottom()); } - side_data.y_offset += lowest_margin_edge; + side_data.y_offset += max(0, lowest_margin_edge - y_in_root + box_state.margin_box_top()); // Also, forget all previous boxes floated to this side while since they're no longer relevant. side_data.clear(); diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/float-vertical-offset-by-preceding-float.txt b/Tests/LibWeb/Layout/expected/block-and-inline/float-vertical-offset-by-preceding-float.txt new file mode 100644 index 00000000000..b7069fe68f9 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-vertical-offset-by-preceding-float.txt @@ -0,0 +1,33 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer at (8,16) content-size 784x51 children: not-inline + BlockContainer
at (8,16) content-size 50x50 floating [BFC] children: not-inline + BlockContainer <(anonymous)> at (8,16) content-size 784x0 children: inline + TextNode <#text> + BlockContainer

at (8,16) content-size 784x51 children: inline + frag 0 from TextNode start: 0, length: 1, rect: [58,16 14.265625x17] baseline: 13.296875 + "A" + frag 1 from TextNode start: 0, length: 1, rect: [58,33 9.34375x17] baseline: 13.296875 + "B" + frag 2 from TextNode start: 0, length: 1, rect: [58,50 10.3125x17] baseline: 13.296875 + "C" + TextNode <#text> + BreakNode
+ TextNode <#text> + BreakNode
+ TextNode <#text> + BlockContainer

at (8,83) content-size 50x50 floating [BFC] children: not-inline + BlockContainer <(anonymous)> at (8,83) content-size 784x0 children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x600] + PaintableWithLines (BlockContainer) [8,16 784x51] overflow: [8,16 784x117] + PaintableWithLines (BlockContainer
) [8,16 50x50] + PaintableWithLines (BlockContainer(anonymous)) [8,16 784x0] + PaintableWithLines (BlockContainer

) [8,16 784x51] + TextPaintable (TextNode<#text>) + TextPaintable (TextNode<#text>) + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer

) [8,83 50x50] + PaintableWithLines (BlockContainer(anonymous)) [8,83 784x0] diff --git a/Tests/LibWeb/Layout/input/block-and-inline/float-vertical-offset-by-preceding-float.html b/Tests/LibWeb/Layout/input/block-and-inline/float-vertical-offset-by-preceding-float.html new file mode 100644 index 00000000000..5373660b504 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/float-vertical-offset-by-preceding-float.html @@ -0,0 +1,3 @@ +
+

A
B
C +