LibWeb: Sum horizontal margins to calculate space used by floats

This fixes the issue where max margin is used to find offset of
floating box although horizonal margins do not collapse so they need
to be summed instead.

Tests/LibWeb/Layout/expected/block-and-inline/float-stress-1.txt

@@ -5,65 +5,63 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
         TextNode <#text>
       BlockContainer <div.outer> at (9,9) content-size 300x250 children: inline
         line 0 width: 239.15625, height: 16, bottom: 16, baseline: 12.796875
-          frag 0 from TextNode start: 1, length: 24, rect: [60,9 212x16]
+          frag 0 from TextNode start: 1, length: 24, rect: [61,9 212x16]
             "foo bar baz foo bar baz "
-          frag 1 from TextNode start: 1, length: 3, rect: [272,9 27.15625x16]
+          frag 1 from TextNode start: 1, length: 3, rect: [273,9 27.15625x16]
             "foo"
         line 1 width: 27.640625, height: 16, bottom: 32, baseline: 12.796875
-          frag 0 from TextNode start: 5, length: 3, rect: [262,25 27.640625x16]
+          frag 0 from TextNode start: 5, length: 3, rect: [263,25 27.640625x16]
             "bar"
         line 2 width: 27.203125, height: 16, bottom: 48, baseline: 12.796875
-          frag 0 from TextNode start: 9, length: 3, rect: [262,41 27.203125x16]
+          frag 0 from TextNode start: 9, length: 3, rect: [263,41 27.203125x16]
             "baz"
         line 3 width: 27.15625, height: 16, bottom: 64, baseline: 12.796875
-          frag 0 from TextNode start: 13, length: 3, rect: [262,57 27.15625x16]
+          frag 0 from TextNode start: 13, length: 3, rect: [263,57 27.15625x16]
             "foo"
         line 4 width: 0, height: 0, bottom: 0, baseline: 0
-        line 5 width: 98, height: 16, bottom: 84, baseline: 12.796875
+        line 5 width: 62.84375, height: 16, bottom: 84, baseline: 12.796875
-          frag 0 from TextNode start: 17, length: 11, rect: [9,77 98x16]
+          frag 0 from TextNode start: 17, length: 7, rect: [9,77 62.84375x16]
-            "bar baz foo"
-        line 6 width: 98, height: 16, bottom: 100, baseline: 12.796875
-          frag 0 from TextNode start: 29, length: 11, rect: [9,93 98x16]
-            "bar baz foo"
-        line 7 width: 98, height: 16, bottom: 116, baseline: 12.796875
-          frag 0 from TextNode start: 41, length: 8, rect: [9,109 70.84375x16]
-            "bar baz "
-          frag 1 from TextNode start: 1, length: 3, rect: [80,109 27.15625x16]
-            "foo"
-        line 8 width: 62.84375, height: 16, bottom: 132, baseline: 12.796875
-          frag 0 from TextNode start: 5, length: 7, rect: [9,125 62.84375x16]
             "bar baz"
-        line 9 width: 62.796875, height: 16, bottom: 148, baseline: 12.796875
+        line 6 width: 62.796875, height: 16, bottom: 100, baseline: 12.796875
-          frag 0 from TextNode start: 13, length: 7, rect: [9,141 62.796875x16]
+          frag 0 from TextNode start: 25, length: 7, rect: [9,93 62.796875x16]
             "foo bar"
-        line 10 width: 274.359375, height: 16, bottom: 164, baseline: 12.796875
+        line 7 width: 62.359375, height: 16, bottom: 116, baseline: 12.796875
-          frag 0 from TextNode start: 21, length: 31, rect: [9,157 274.359375x16]
+          frag 0 from TextNode start: 33, length: 7, rect: [9,109 62.359375x16]
-            "baz foo bar baz foo bar baz foo"
+            "baz foo"
-        line 11 width: 239.640625, height: 16, bottom: 180, baseline: 12.796875
+        line 8 width: 62.84375, height: 16, bottom: 132, baseline: 12.796875
-          frag 0 from TextNode start: 53, length: 20, rect: [60,173 176.84375x16]
+          frag 0 from TextNode start: 41, length: 7, rect: [9,125 62.84375x16]
-            "bar baz foo bar baz "
+            "bar baz"
-          frag 1 from TextNode start: 1, length: 7, rect: [237,173 62.796875x16]
+        line 9 width: 239.15625, height: 16, bottom: 148, baseline: 12.796875
-            "foo bar"
+          frag 0 from TextNode start: 1, length: 27, rect: [9,141 239.15625x16]
-        line 12 width: 204, height: 16, bottom: 196, baseline: 12.796875
+            "foo bar baz foo bar baz foo"
-          frag 0 from TextNode start: 9, length: 16, rect: [60,189 141.203125x16]
+        line 10 width: 239.640625, height: 16, bottom: 164, baseline: 12.796875
+          frag 0 from TextNode start: 29, length: 27, rect: [9,157 239.640625x16]
+            "bar baz foo bar baz foo bar"
+        line 11 width: 239.203125, height: 16, bottom: 180, baseline: 12.796875
+          frag 0 from TextNode start: 57, length: 16, rect: [61,173 141.203125x16]
             "baz foo bar baz "
-          frag 1 from TextNode start: 1, length: 7, rect: [201,189 62.796875x16]
+          frag 1 from TextNode start: 1, length: 11, rect: [202,173 98x16]
-            "foo bar"
+            "foo bar baz"
+        line 12 width: 204, height: 16, bottom: 196, baseline: 12.796875
+          frag 0 from TextNode start: 13, length: 12, rect: [61,189 106x16]
+            "foo bar baz "
+          frag 1 from TextNode start: 1, length: 11, rect: [167,189 98x16]
+            "foo bar baz"
         line 13 width: 204, height: 16, bottom: 212, baseline: 12.796875
-          frag 0 from TextNode start: 9, length: 23, rect: [60,205 204x16]
+          frag 0 from TextNode start: 13, length: 23, rect: [61,205 204x16]
-            "baz foo bar baz foo bar"
+            "foo bar baz foo bar baz"
-        line 14 width: 239.203125, height: 16, bottom: 228, baseline: 12.796875
+        line 14 width: 239.15625, height: 16, bottom: 228, baseline: 12.796875
-          frag 0 from TextNode start: 33, length: 27, rect: [60,221 239.203125x16]
+          frag 0 from TextNode start: 37, length: 27, rect: [61,221 239.15625x16]
-            "baz foo bar baz foo bar baz"
+            "foo bar baz foo bar baz foo"
-        line 15 width: 274.796875, height: 16, bottom: 244, baseline: 12.796875
+        line 15 width: 274.84375, height: 16, bottom: 244, baseline: 12.796875
-          frag 0 from TextNode start: 61, length: 31, rect: [9,237 274.796875x16]
+          frag 0 from TextNode start: 65, length: 31, rect: [9,237 274.84375x16]
+            "bar baz foo bar baz foo bar baz"
+        line 16 width: 274.796875, height: 16, bottom: 260, baseline: 12.796875
+          frag 0 from TextNode start: 97, length: 31, rect: [9,253 274.796875x16]
             "foo bar baz foo bar baz foo bar"
-        line 16 width: 274.359375, height: 16, bottom: 260, baseline: 12.796875
+        line 17 width: 133.203125, height: 16, bottom: 276, baseline: 12.796875
-          frag 0 from TextNode start: 93, length: 31, rect: [9,253 274.359375x16]
+          frag 0 from TextNode start: 129, length: 15, rect: [9,269 133.203125x16]
-            "baz foo bar baz foo bar baz foo"
+            "baz foo bar baz"
-        line 17 width: 168.84375, height: 16, bottom: 276, baseline: 12.796875
-          frag 0 from TextNode start: 125, length: 19, rect: [9,269 168.84375x16]
-            "bar baz foo bar baz"
         TextNode <#text>
         BlockContainer <div.lefty> at (10,10) content-size 50x50 floating [BFC] children: not-inline
         TextNode <#text>
@@ -71,7 +69,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
         TextNode <#text>
         BlockContainer <div.two> at (108,78) content-size 200x50 floating [BFC] children: not-inline
         TextNode <#text>
-        BlockContainer <div.righty> at (76,126) content-size 30x30 floating [BFC] children: not-inline
+        BlockContainer <div.righty> at (278,142) content-size 30x30 floating [BFC] children: not-inline
         TextNode <#text>
         BlockContainer <div.lefty.shwifty> at (10,174) content-size 50x50 floating [BFC] children: not-inline
         TextNode <#text>

Tests/LibWeb/Layout/expected/block-and-inline/float-stress-3.txt

@@ -5,7 +5,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
         TextNode <#text>
       BlockContainer <div.outer> at (9,9) content-size 300x250 children: inline
         line 0 width: 204, height: 16, bottom: 16, baseline: 12.796875
-          frag 0 from TextNode start: 1, length: 23, rect: [60,9 204x16]
+          frag 0 from TextNode start: 1, length: 23, rect: [61,9 204x16]
             "foo bar baz foo bar baz"
         TextNode <#text>
         BlockContainer <div.lefty> at (10,10) content-size 50x50 floating [BFC] children: not-inline

Tests/LibWeb/Layout/expected/block-and-inline/floats-and-negative-margins.txt

@@ -0,0 +1,16 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
+    BlockContainer <body> at (100,8) content-size 200x200 children: not-inline
+      BlockContainer <div.row> at (50,8) content-size 250x200 children: inline
+        BlockContainer <div.item> at (50,8) content-size 125x17.46875 floating [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 1, length: 1, rect: [50,8 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        TextNode <#text>
+        BlockContainer <div.item> at (175,8) content-size 125x17.46875 floating [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 1, length: 1, rect: [175,8 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+        TextNode <#text>

Tests/LibWeb/Layout/input/block-and-inline/floats-and-negative-margins.html

@@ -0,0 +1,20 @@
+<style>
+body {
+    width: 200px;
+    margin-left: 100px;
+}
+
+.row {
+    height: 200px;
+    margin-left: -50px;
+    background-color: blueviolet;
+}
+.item {
+    float: left;
+    width: 50%;
+}
+</style><div class="row"><div class="item" style="background-color: lightblue">
+    a</div>
+<div class="item" style="background-color: lightgoldenrodyellow">
+    b</div>
+</div>

Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp

@@ -1011,7 +1011,7 @@ BlockFormattingContext::SpaceUsedByFloats BlockFormattingContext::space_used_by_
             CSSPixels offset_from_containing_block_chain_margins_between_here_and_root = 0;
             for (auto const* containing_block = floating_box.box->containing_block(); containing_block && containing_block != &root(); containing_block = containing_block->containing_block()) {
                 auto const& containing_block_state = m_state.get(*containing_block);
-                offset_from_containing_block_chain_margins_between_here_and_root = max(offset_from_containing_block_chain_margins_between_here_and_root, containing_block_state.margin_box_left());
+                offset_from_containing_block_chain_margins_between_here_and_root += containing_block_state.margin_box_left();
             }
             space_used_by_floats.left = offset_from_containing_block_chain_margins_between_here_and_root
                 + floating_box.offset_from_edge
@@ -1030,7 +1030,7 @@ BlockFormattingContext::SpaceUsedByFloats BlockFormattingContext::space_used_by_
             CSSPixels offset_from_containing_block_chain_margins_between_here_and_root = 0;
             for (auto const* containing_block = floating_box.box->containing_block(); containing_block && containing_block != &root(); containing_block = containing_block->containing_block()) {
                 auto const& containing_block_state = m_state.get(*containing_block);
-                offset_from_containing_block_chain_margins_between_here_and_root = max(offset_from_containing_block_chain_margins_between_here_and_root, containing_block_state.margin_box_right());
+                offset_from_containing_block_chain_margins_between_here_and_root += containing_block_state.margin_box_right();
             }
             space_used_by_floats.right = offset_from_containing_block_chain_margins_between_here_and_root
                 + floating_box.offset_from_edge