LibWeb: Allow negative margins to influence inline offset after float

In 89ba00304c, the box' X position was
capped at 0 to prevent negative X positions to act as if there were
intruding floats on the left side. Instead, we need to check whether the
left side float intrusion we are going to calculate matters at all -
because if there's no matching float box, the intrusion is always going
to be 0 and we don't need to take the box' X position into account.

Fixes the floating publication images on https://lexfridman.com/.

Libraries/LibWeb/Layout/BlockFormattingContext.cpp

@@ -1298,16 +1298,19 @@ FormattingContext::SpaceUsedByFloats BlockFormattingContext::intrusion_by_floats
     auto box_in_root_rect = content_box_rect_in_ancestor_coordinate_space(box_used_values, root());
     CSSPixels y_in_root = box_in_root_rect.y() + y_in_box;
     auto space_and_containing_margin = space_used_and_containing_margin_for_floats(y_in_root);
-    auto left_side_floats_limit_to_right = space_and_containing_margin.left_total_containing_margin + space_and_containing_margin.left_used_space;
-    auto right_side_floats_limit_to_right = space_and_containing_margin.right_used_space + space_and_containing_margin.right_total_containing_margin;
 
-    auto left_intrusion = max(CSSPixels(0), left_side_floats_limit_to_right - max(CSSPixels(0), box_in_root_rect.x()));
+    CSSPixels left_intrusion = 0;
+    if (space_and_containing_margin.matching_left_float_box) {
+        auto left_side_floats_limit_to_right = space_and_containing_margin.left_total_containing_margin + space_and_containing_margin.left_used_space;
+        left_intrusion = max(CSSPixels(0), left_side_floats_limit_to_right - box_in_root_rect.x());
+    }
 
     // If we did not match a right float, the right_total_containing_margin will be 0 (as its never set). Since no floats means
     // no intrusion we would instead want it to be exactly equal to offset_from_containing_block_chain_margins_between_here_and_root.
     // Since this is not the case we have to explicitly handle this case.
     CSSPixels right_intrusion = 0;
     if (space_and_containing_margin.matching_right_float_box) {
+        auto right_side_floats_limit_to_right = space_and_containing_margin.right_used_space + space_and_containing_margin.right_total_containing_margin;
         CSSPixels offset_from_containing_block_chain_margins_between_here_and_root = 0;
         for (auto const* containing_block = &box_used_values; containing_block && &containing_block->node() != &root(); containing_block = containing_block->containing_block_used_values()) {
             offset_from_containing_block_chain_margins_between_here_and_root += containing_block->margin_box_right();

Libraries/LibWeb/Layout/InlineFormattingContext.cpp

@@ -45,15 +45,20 @@ CSSPixels InlineFormattingContext::leftmost_inline_offset_at(CSSPixels y) const
     auto box_in_root_rect = content_box_rect_in_ancestor_coordinate_space(m_containing_block_used_values, parent().root());
     CSSPixels y_in_root = box_in_root_rect.y() + y;
     auto space_and_containing_margin = parent().space_used_and_containing_margin_for_floats(y_in_root);
-    auto left_side_floats_limit_to_right = space_and_containing_margin.left_total_containing_margin + space_and_containing_margin.left_used_space;
-    if (box_in_root_rect.x() >= left_side_floats_limit_to_right) {
-        // The left edge of the containing block is to the right of the rightmost left-side float.
-        // We start placing inline content at the left edge of the containing block.
+
+    // If there's no float box to take into account, we start at the left edge of the containing block.
+    if (!space_and_containing_margin.matching_left_float_box)
         return 0;
-    }
+
+    // If the left edge of the containing block is to the right of the rightmost left-side float, start placing inline
+    // content at the left edge of the containing block.
+    auto left_side_floats_limit_to_right = space_and_containing_margin.left_total_containing_margin + space_and_containing_margin.left_used_space;
+    if (box_in_root_rect.x() >= left_side_floats_limit_to_right)
+        return 0;
+
     // The left edge of the containing block is to the left of the rightmost left-side float.
     // We adjust the inline content insertion point by the overlap between the containing block and the float.
-    return left_side_floats_limit_to_right - max(CSSPixels(0), box_in_root_rect.x());
+    return left_side_floats_limit_to_right - box_in_root_rect.x();
 }
 
 AvailableSize InlineFormattingContext::available_space_for_line(CSSPixels y) const

Tests/LibWeb/Layout/expected/block-and-inline/float-with-negative-margin-containing-block.txt

@@ -0,0 +1,18 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x208 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x18 children: not-inline
+      BlockContainer <div#a> at (-92,8) content-size 884x18 children: inline
+        frag 0 from TextNode start: 0, length: 11, rect: [108,8 98x18] baseline: 13.796875
+            "foo bar baz"
+        BlockContainer <div#b> at (-92,8) content-size 200x200 floating [BFC] children: not-inline
+        TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x208]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x18] overflow: [8,8 784x200]
+      PaintableWithLines (BlockContainer<DIV>#a) [-92,8 884x18] overflow: [-92,8 884x200]
+        PaintableWithLines (BlockContainer<DIV>#b) [-92,8 200x200]
+        TextPaintable (TextNode<#text>)
+
+SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
+ SC for BlockContainer<HTML> [0,0 800x208] [children: 0] (z-index: auto)

Tests/LibWeb/Layout/input/block-and-inline/float-with-negative-margin-containing-block.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<style>
+#a {
+    margin-left: -100px;
+}
+#b {
+    background-color: red;
+    float: left;
+    height: 200px;
+    width: 200px;
+}
+</style>
+<!-- The text should be positioned to the right of the red square -->
+<div id="a"><div id="b"></div>foo bar baz