diff options
5 files changed, 110 insertions, 9 deletions
diff --git a/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically-2.txt b/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically-2.txt new file mode 100644 index 0000000000..ce53aa59f8 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically-2.txt @@ -0,0 +1,10 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (0,0) content-size 800x150 children: not-inline + BlockContainer <body> at (0,0) content-size 200x0 children: not-inline + BlockContainer <ul> at (0,0) content-size 200x0 children: inline + BlockContainer <div.red> at (0,0) content-size 150x50 floating children: not-inline + BlockContainer <div.green> at (0,50) content-size 150x50 floating children: not-inline + TextNode <#text> + BlockContainer <div.orange> at (0,100) content-size 150x50 floating children: not-inline + BlockContainer <(anonymous)> at (0,0) content-size 200x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt b/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt new file mode 100644 index 0000000000..8be04e1370 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt @@ -0,0 +1,18 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (1,1) content-size 798x107 children: not-inline + BlockContainer <(anonymous)> at (1,1) content-size 798x0 children: inline + TextNode <#text> + BlockContainer <body> at (2,2) content-size 400x2 children: not-inline + BlockContainer <(anonymous)> at (2,2) content-size 400x0 children: inline + TextNode <#text> + BlockContainer <div.ul> at (3,3) content-size 398x0 children: inline + TextNode <#text> + BlockContainer <div.yellow> at (4,4) content-size 60x50 floating children: not-inline + TextNode <#text> + BlockContainer <div.orange> at (66,4) content-size 250x50 floating children: not-inline + TextNode <#text> + BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline + TextNode <#text> + BlockContainer <div.green> at (3,57) content-size 100x50 floating children: not-inline + BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/bfc-float-left-break-vertically-2.html b/Tests/LibWeb/Layout/input/bfc-float-left-break-vertically-2.html new file mode 100644 index 0000000000..003cf703ee --- /dev/null +++ b/Tests/LibWeb/Layout/input/bfc-float-left-break-vertically-2.html @@ -0,0 +1,32 @@ +<!DOCTYPE html><html><head><style> + * { + margin: 0; + padding: 0; + } + + body { + width: 200px; + } + + div { + float: left; + width: 150px; + height: 50px; + } + + .red { + background: red; + } + + .green { + background: green; + } + + .blue { + background: blue; + } + + .orange { + background: orange; + } +</style></head><body><ul><div class="red"></div><div class="green"></div> </ul><div class="orange"></div> diff --git a/Tests/LibWeb/Layout/input/bfc-float-left-break-vertically.html b/Tests/LibWeb/Layout/input/bfc-float-left-break-vertically.html new file mode 100644 index 0000000000..064d8cc2da --- /dev/null +++ b/Tests/LibWeb/Layout/input/bfc-float-left-break-vertically.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <style> + * { + border: 1px solid black !important; + margin: 0; + padding: 0; + } + + body { + width: 400px; + } + + .yellow { + width: 60px; + height: 50px; + float: left; + background: yellow; + } + + .orange { + width: 250px; + height: 50px; + float: left; + background: orange; + } + + .green { + background: lime; + width: 100px; + height: 50px; + float: left; + } + </style> + </head> + <body> + <div class="ul"> + <div class="yellow"></div> + <div class="orange"></div> + </div> + <div class="green"></div> + </body> +</html> diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp index f3127b502b..80d370902a 100644 --- a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp @@ -785,20 +785,17 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer } did_touch_preceding_float = true; if (!fits_next_to_preceding_float) - continue; + break; offset_from_edge = tentative_offset_from_edge; did_place_next_to_preceding_float = true; break; } - if (!did_touch_preceding_float) { - // This box does not touch another floating box, go all the way to the edge. - float_to_edge(); - - // Also, forget all previous boxes floated to this side while since they're no longer relevant. - side_data.clear(); - } else if (!did_place_next_to_preceding_float) { - // We ran out of horizontal space on this "float line", and need to break. + if (!did_touch_preceding_float || !did_place_next_to_preceding_float) { + // One of two things happened: + // - This box does not touch another floating box. + // - We ran out of horizontal space on this "float line", and need to break. + // Either way, we float this box all the way to the edge. float_to_edge(); CSSPixels lowest_margin_edge = 0; for (auto const& box : side_data.current_boxes) { |