diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/block-level-floating-box-with-clearance.txt b/Tests/LibWeb/Layout/expected/block-and-inline/block-level-floating-box-with-clearance.txt new file mode 100644 index 0000000000..fabd1d6a75 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/block-level-floating-box-with-clearance.txt @@ -0,0 +1,34 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x976 [BFC] children: not-inline + BlockContainer at (8,8) content-size 600x960 children: not-inline + BlockContainer at (18,18) content-size 300x300 children: not-inline + BlockContainer at (8,328) content-size 100x100 floating [BFC] children: inline + line 0 width: 26.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 3, rect: [8,328 26.640625x17.46875] + "top" + TextNode <#text> + BlockContainer at (8,428) content-size 100x100 floating [BFC] children: inline + line 0 width: 26.25, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 4, rect: [8,428 26.25x17.46875] + "left" + TextNode <#text> + BlockContainer at (108,428) content-size 100x100 floating [BFC] children: inline + line 0 width: 37.109375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [108,428 37.109375x17.46875] + "right" + TextNode <#text> + BlockContainer at (18,338) content-size 300x300 children: not-inline + BlockContainer at (18,658) content-size 300x300 children: not-inline + +ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x976] + PaintableWithLines (BlockContainer) [0,0 800x976] + PaintableWithLines (BlockContainer) [8,8 600x960] + PaintableWithLines (BlockContainer
.normal) [8,8 320x320] + PaintableWithLines (BlockContainer
#top) [8,328 100x100] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
#left) [8,428 100x100] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
#right) [108,428 100x100] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.normal) [8,328 320x320] + PaintableWithLines (BlockContainer
.normal) [8,648 320x320] diff --git a/Tests/LibWeb/Layout/input/block-and-inline/block-level-floating-box-with-clearance.html b/Tests/LibWeb/Layout/input/block-and-inline/block-level-floating-box-with-clearance.html new file mode 100644 index 0000000000..cb93385b36 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/block-level-floating-box-with-clearance.html @@ -0,0 +1,27 @@ +
top
left
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp index 61b6cdd98d..fecaf1abe7 100644 --- a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp @@ -904,6 +904,7 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer VERIFY(box.is_floating()); auto& box_state = m_state.get_mutable(box); + auto const& computed_values = box.computed_values(); resolve_vertical_box_model_metrics(box); @@ -979,10 +980,18 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer break; } - if (!did_touch_preceding_float || !did_place_next_to_preceding_float) { - // One of two things happened: + auto has_clearance = false; + if (side == FloatSide::Left) { + has_clearance = computed_values.clear() == CSS::Clear::Left || computed_values.clear() == CSS::Clear::Both; + } else if (side == FloatSide::Right) { + has_clearance = computed_values.clear() == CSS::Clear::Right || computed_values.clear() == CSS::Clear::Both; + } + + if (!did_touch_preceding_float || !did_place_next_to_preceding_float || has_clearance) { + // One of three things happened: // - This box does not touch another floating box. // - We ran out of horizontal space on this "float line", and need to break. + // - This box has clearance. // Either way, we float this box all the way to the edge. float_to_edge(); CSSPixels lowest_margin_edge = 0;