RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 16:37:35 +00:00
Code Issues Activity Actions

LibWeb: Account for negative margins when calculating float intrusion

Browse source 
If a box has a negative margin-left, it may have a negative effective
offset within its parent BFC root coordinate system.

We can account for this when calculating the amount of left-side float
intrusion by flooring the X offset at 0.
This commit is contained in:
Andreas Kling 2023-06-04 12:55:55 +02:00
parent 0e5ec8c0ab
commit 89ba00304c
4 changed files with 28 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Tests/LibWeb/Layout/expected/block-and-inline/block-with-negative-margin-and-no-intruding-floats.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x55.40625 [BFC] children: not-inline
BlockContainer <body> at (110,10) content-size 300x37.40625 positioned children: not-inline
BlockContainer <div> at (61,11) content-size 200x35.40625 children: inline
line 0 width: 159.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 19, rect: [61,11 159.859375x17.46875]
"there are no floats"
line 1 width: 163.875, height: 17.9375, bottom: 35.40625, baseline: 13.53125
frag 0 from TextNode start: 20, length: 21, rect: [61,28 163.875x17.46875]
"intruding on this div"
TextNode <#text>

15
Tests/LibWeb/Layout/input/block-and-inline/block-with-negative-margin-and-no-intruding-floats.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html><style>
* { border: 1px solid black; }
html { background: white; }
body {
position: relative;
left: 100px;
background: pink;
width: 300px;
}
div {
margin-left: -50px;
background: orange;
width: 200px;
}
</style><body><div>there are no floats intruding on this div

2
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View file

@ -1066,7 +1066,7 @@ FormattingContext::SpaceUsedByFloats BlockFormattingContext::intrusion_by_floats
CSSPixels y_in_root = box_in_root_rect.y() + y_in_box; CSSPixels y_in_root = box_in_root_rect.y() + y_in_box;
auto space_used_by_floats_in_root = space_used_by_floats(y_in_root); auto space_used_by_floats_in_root = space_used_by_floats(y_in_root);
auto left_intrusion = max(CSSPixels(0), space_used_by_floats_in_root.left - box_in_root_rect.x()); auto left_intrusion = max(CSSPixels(0), space_used_by_floats_in_root.left - max(CSSPixels(0), box_in_root_rect.x()));
CSSPixels offset_from_containing_block_chain_margins_between_here_and_root = 0; CSSPixels offset_from_containing_block_chain_margins_between_here_and_root = 0;
for (auto const* containing_block = static_cast<Box const*>(&box); containing_block && containing_block != &root(); containing_block = containing_block->containing_block()) { for (auto const* containing_block = static_cast<Box const*>(&box); containing_block && containing_block != &root(); containing_block = containing_block->containing_block()) {

2
Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp
View file

@ -51,7 +51,7 @@ CSSPixels InlineFormattingContext::leftmost_x_offset_at(CSSPixels y) const
} }
// The left edge of the containing block is to the left of the rightmost left-side float. // 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. // We adjust the inline content insertion point by the overlap between the containing block and the float.
return space.left - box_in_root_rect.x(); return space.left - max(CSSPixels(0), box_in_root_rect.x());
} }
CSSPixels InlineFormattingContext::available_space_for_line(CSSPixels y) const CSSPixels InlineFormattingContext::available_space_for_line(CSSPixels y) const