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.
This commit is contained in:
Andreas Kling 2020-12-12 19:58:23 +01:00
parent 66e9dde86f
commit 2b8c7faee4
Notes: sideshowbarker 2024-07-19 00:54:56 +09:00
3 changed files with 35 additions and 2 deletions

View file

@ -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>

View file

@ -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(); }

View file

@ -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;