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.
abyesilyurt · Dec 12, 2020 · 2b8c7fa · 2b8c7fa
1 parent 66e9dde
commit 2b8c7fa
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/Base/res/html/misc/float-2.html b/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>
diff --git a/Libraries/LibWeb/Layout/Box.h b/Libraries/LibWeb/Layout/Box.h
@@ -58,6 +58,22 @@ class Box : public NodeWithStyleAndBoxModelMetrics {
  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(); }

diff --git a/Libraries/LibWeb/Layout/InlineFormattingContext.cpp b/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;