From db545b51ef439f463ca530ff56f86d63d4c14c72 Mon Sep 17 00:00:00 2001
From: Andreas Kling <kling@serenityos.org>
Date: Wed, 15 Mar 2023 10:22:37 +0100
Subject: [PATCH] LibWeb: Make sure `float: left` boxes get pushed down if they
 can't fit

---
 .../bfc-float-left-break-vertically-2.txt     | 10 +++++
 .../bfc-float-left-break-vertically.txt       | 18 ++++++++
 .../bfc-float-left-break-vertically-2.html    | 32 ++++++++++++++
 .../bfc-float-left-break-vertically.html      | 44 +++++++++++++++++++
 .../LibWeb/Layout/BlockFormattingContext.cpp  | 15 +++----
 5 files changed, 110 insertions(+), 9 deletions(-)
 create mode 100644 Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically-2.txt
 create mode 100644 Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt
 create mode 100644 Tests/LibWeb/Layout/input/bfc-float-left-break-vertically-2.html
 create mode 100644 Tests/LibWeb/Layout/input/bfc-float-left-break-vertically.html
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 00000000000..ce53aa59f8c
--- /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 00000000000..8be04e13702
--- /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 00000000000..003cf703eef
--- /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 00000000000..064d8cc2da8
--- /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 f3127b502bb..80d370902ab 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) {
