RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 13:17:44 +00:00
Code Issues Activity Actions

LibWeb: Prevent margin double-counting with "collapse through" boxes

Browse source 
If there is a remaining margin-bottom in margin collapsing state
tracker after laying out all boxes in the current BFC, it must be
assigned to the last in-flow child since margin collapsing cannot
occur across a formatting context boundary.

The current issue where margin-bottom may be counted twice due to
"collapse through" margins in the last in-flow child box is addressed
with this fix by excluding such boxes during the search for a box to
assign the remaining margin.

Test case coming with this fix has a layout bug with incorrectly
computed line height.
This commit is contained in:
Aliaksandr Kalenik 2023-04-27 04:34:32 +03:00 • committed by Andreas Kling
parent 7fffa0176f
commit 9ee64b5694
3 changed files with 37 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

12
Tests/LibWeb/Layout/expected/block-and-inline/margin-collapse-5.txt Normal file
View file

@ -0,0 +1,12 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x134.46875 children: inline
line 0 width: 170.96875, height: 134.46875, bottom: 134.46875, baseline: 13.53125
frag 0 from BlockContainer start: 0, length: 0, rect: [2,15 168.96875x119.46875]
BlockContainer <body> at (2,15) content-size 168.96875x119.46875 inline-block children: not-inline
BlockContainer <div.hmm> at (3,16) content-size 166.96875x17.46875 children: inline
line 0 width: 166.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 21, rect: [3,16 166.96875x17.46875]
"suspiciously tall box"
TextNode <#text>
BlockContainer <(anonymous)> at (2,134.46875) content-size 168.96875x0 children: inline
TextNode <#text>

14
Tests/LibWeb/Layout/input/block-and-inline/margin-collapse-5.html Normal file
View file

@ -0,0 +1,14 @@
<!doctype html><style>
* {
border: 1px solid black;
font-family: 'SerenitySans';
}
body {
padding: 0;
margin: 0;
display: inline-block;
}
.hmm {
margin-bottom: 100px;
}
</style><body><div class=hmm>suspiciously tall box</div> </body></html>