LibWeb: Add out-of-flow boxes to anonymous wrapper block when possible

If the previous sibling of an out-of-flow box has been wrapped in an
anonymous block, we now stuff the out-of-flow box into the anonymous
block as well.

Co-authored-by: Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>

5 files changed, 50 insertions, 28 deletions

diff --git a/Tests/LibWeb/Layout/expected/acid1.txt b/Tests/LibWeb/Layout/expected/acid1.txt
index 7a2992f068..5d2c4088bd 100644
--- a/Tests/LibWeb/Layout/expected/acid1.txt
+++ b/Tests/LibWeb/Layout/expected/acid1.txt
@@ -74,30 +74,28 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
             TextNode <#text>
           BlockContainer <(anonymous)> at (135,45) content-size 340x0 children: inline
             TextNode <#text>
-          BlockContainer <blockquote> at (280,195) content-size 50x90 floating children: not-inline
-            BlockContainer <(anonymous)> at (280,195) content-size 50x0 children: inline
-              TextNode <#text>
-            BlockContainer <address> at (280,195) content-size 50x20 children: inline
-              line 0 width: 17.275390, height: 10, bottom: 10, baseline: 7.998046
-                frag 0 from TextNode start: 0, length: 3, rect: [280,195 17.275390x10]
-                  "bar"
-              line 1 width: 30.224609, height: 10, bottom: 20, baseline: 7.998046
-                frag 0 from TextNode start: 4, length: 6, rect: [280,205 30.224609x10]
-                  "maids,"
-              TextNode <#text>
-            BlockContainer <(anonymous)> at (280,215) content-size 50x0 children: inline
-              TextNode <#text>
-          BlockContainer <(anonymous)> at (135,45) content-size 340x0 children: inline
-            TextNode <#text>
-          BlockContainer <h1> at (365,185) content-size 100x100 floating children: inline
-            line 0 width: 56.416015, height: 10, bottom: 10, baseline: 7.998046
-              frag 0 from TextNode start: 0, length: 11, rect: [365,185 56.416015x10]
-                "sing to me,"
-            line 1 width: 65.449218, height: 10, bottom: 20, baseline: 7.998046
-              frag 0 from TextNode start: 12, length: 12, rect: [365,195 65.449218x10]
-                "erbarme dich"
+            BlockContainer <blockquote> at (280,195) content-size 50x90 floating children: not-inline
+              BlockContainer <(anonymous)> at (280,195) content-size 50x0 children: inline
+                TextNode <#text>
+              BlockContainer <address> at (280,195) content-size 50x20 children: inline
+                line 0 width: 17.275390, height: 10, bottom: 10, baseline: 7.998046
+                  frag 0 from TextNode start: 0, length: 3, rect: [280,195 17.275390x10]
+                    "bar"
+                line 1 width: 30.224609, height: 10, bottom: 20, baseline: 7.998046
+                  frag 0 from TextNode start: 4, length: 6, rect: [280,205 30.224609x10]
+                    "maids,"
+                TextNode <#text>
+              BlockContainer <(anonymous)> at (280,215) content-size 50x0 children: inline
+                TextNode <#text>
             TextNode <#text>
-          BlockContainer <(anonymous)> at (135,45) content-size 340x0 children: inline
+            BlockContainer <h1> at (365,185) content-size 100x100 floating children: inline
+              line 0 width: 56.416015, height: 10, bottom: 10, baseline: 7.998046
+                frag 0 from TextNode start: 0, length: 11, rect: [365,185 56.416015x10]
+                  "sing to me,"
+              line 1 width: 65.449218, height: 10, bottom: 20, baseline: 7.998046
+                frag 0 from TextNode start: 12, length: 12, rect: [365,195 65.449218x10]
+                  "erbarme dich"
+              TextNode <#text>
             TextNode <#text>
         TextNode <#text>
       BlockContainer <(anonymous)> at (20,30) content-size 480x0 children: inline
diff --git a/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt b/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt
index 8be04e1370..9a28e9d6cb 100644
--- a/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt
+++ b/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt
@@ -1,5 +1,5 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (1,1) content-size 798x107 children: not-inline
+  BlockContainer <html> at (1,1) content-size 798x106 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
@@ -13,6 +13,5 @@ Viewport <#document> at (0,0) content-size 800x600 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
+        BlockContainer <div.green> at (3,56) content-size 100x50 floating children: not-inline
         TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/clearfix.txt b/Tests/LibWeb/Layout/expected/clearfix.txt
index 06c90f6cfa..8f996d0ea9 100644
--- a/Tests/LibWeb/Layout/expected/clearfix.txt
+++ b/Tests/LibWeb/Layout/expected/clearfix.txt
@@ -9,8 +9,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
         BlockContainer <div.clearfix> at (8,108) content-size 784x0 children: not-inline
         BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
           TextNode <#text>
-        BlockContainer <div.square.black> at (8,108) content-size 49x49 floating children: not-inline
-        BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
+          BlockContainer <div.square.black> at (8,108) content-size 49x49 floating children: not-inline
           TextNode <#text>
       BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
         TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.txt b/Tests/LibWeb/Layout/expected/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.txt
new file mode 100644
index 0000000000..e9a9081597
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.txt
@@ -0,0 +1,9 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x76 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x60 children: not-inline
+      BlockContainer <div.banner> at (8,8) content-size 200x30 children: not-inline
+      BlockContainer <(anonymous)> at (8,38) content-size 784x30 children: inline
+        line 0 width: 200, height: 30, bottom: 30, baseline: 30
+          frag 0 from BlockContainer start: 0, length: 0, rect: [8,38 200x30]
+        BlockContainer <div.tab> at (8,38) content-size 200x30 inline-block children: not-inline
+        BlockContainer <div.timeline> at (592,38) content-size 200x30 floating children: not-inline
diff --git a/Tests/LibWeb/Layout/input/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.html b/Tests/LibWeb/Layout/input/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.html
new file mode 100644
index 0000000000..14966ee7af
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html><html><head><style>
+      div {
+          width: 200px;
+          height: 30px;
+      }
+      .banner {
+          background: lime;
+      }
+      .tab {
+          background: orange;
+          display: inline-block;
+      }
+      .timeline {
+          background: magenta;
+          float: right;
+      }
+</style></head><body><div class="banner"></div><div class="tab"></div><div class="timeline">
\ No newline at end of file