Browse Source

LibWeb: Use the margin box of floating elements for flowing around

Inline content flows around the entire margin box of floating elements,
not just the content box.
Andreas Kling 4 năm trước cách đây
mục cha
commit
2b8c7faee4

+ 17 - 0
Base/res/html/misc/float-2.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#b { 
+    border: 1px solid red;
+    width: 50px;
+    height: 50px;
+    float: left;
+}
+</style>
+</head>
+<body>
+    <div id=b></div>
+    <div id=a>Text</div>
+</body>
+</html>

+ 16 - 0
Libraries/LibWeb/Layout/Box.h

@@ -58,6 +58,22 @@ public:
         return width() + border_box.left + border_box.right;
     }
 
+    Gfx::FloatRect content_box_as_relative_rect() const
+    {
+        return { m_offset, m_size };
+    }
+
+    Gfx::FloatRect margin_box_as_relative_rect() const
+    {
+        auto rect = content_box_as_relative_rect();
+        auto margin_box = box_model().margin_box(*this);
+        rect.set_x(rect.x() - margin_box.left);
+        rect.set_width(rect.width() + margin_box.left + margin_box.right);
+        rect.set_y(rect.y() - margin_box.top);
+        rect.set_height(rect.height() + margin_box.top + margin_box.bottom);
+        return rect;
+    }
+
     float absolute_x() const { return absolute_rect().x(); }
     float absolute_y() const { return absolute_rect().y(); }
     Gfx::FloatPoint absolute_position() const { return absolute_rect().location(); }

+ 2 - 2
Libraries/LibWeb/Layout/InlineFormattingContext.cpp

@@ -62,7 +62,7 @@ static AvailableSpaceForLineInfo available_space_for_line(const InlineFormatting
 
     for (ssize_t i = bfc.left_floating_boxes().size() - 1; i >= 0; --i) {
         auto& floating_box = *bfc.left_floating_boxes().at(i);
-        Gfx::FloatRect rect { floating_box.effective_offset(), floating_box.size() };
+        auto rect = floating_box.margin_box_as_relative_rect();
         if (rect.contains_vertically(y)) {
             info.left = rect.right() + 1;
             break;
@@ -73,7 +73,7 @@ static AvailableSpaceForLineInfo available_space_for_line(const InlineFormatting
 
     for (ssize_t i = bfc.right_floating_boxes().size() - 1; i >= 0; --i) {
         auto& floating_box = *bfc.right_floating_boxes().at(i);
-        Gfx::FloatRect rect { floating_box.effective_offset(), floating_box.size() };
+        auto rect = floating_box.margin_box_as_relative_rect();
         if (rect.contains_vertically(y)) {
             info.right = rect.left() - 1;
             break;