1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 20:27:45 +00:00

LibWeb: Reset margin collapsing state only if box indeed add clearance

This fixes the issue when margin collapsing state was always reset if
a box has clear property not equal to none even if it does not actually
introduce clearance.
This commit is contained in:
Aliaksandr Kalenik 2023-05-26 18:31:29 +03:00 committed by Andreas Kling
parent b0a43404b9
commit 7cc20f4cb5
6 changed files with 83 additions and 13 deletions

View file

@ -0,0 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x110 children: not-inline
BlockContainer <div> at (8,8) content-size 784x110 children: not-inline
BlockContainer <div.square.white> at (8,8) content-size 100x100 floating [BFC] children: not-inline
BlockContainer <div.clearfix> at (8,108) content-size 10x10 children: not-inline
BlockContainer <div.square.black> at (8,218) content-size 49x49 floating [BFC] children: not-inline

View file

@ -0,0 +1,14 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x125.9375 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x109.9375 children: not-inline
BlockContainer <div.upper> at (8,8) content-size 784x17.46875 children: inline
line 0 width: 46.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [8,8 46.15625x17.46875]
"upper"
TextNode <#text>
BlockContainer <div.mystery> at (8,100.46875) content-size 784x0 children: not-inline
BlockContainer <div.lower> at (8,100.46875) content-size 784x17.46875 children: inline
line 0 width: 43.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [8,100.46875 43.359375x17.46875]
"lower"
TextNode <#text>

View file

@ -0,0 +1,24 @@
<style>
.clearfix {
clear: both;
margin-top: 9999px;
margin-bottom: 100px;
background-color: black;
width: 10px;
height: 10px;
}
.square {
float: left;
width: 49px;
height: 49px;
}
.white {
background-color: salmon;
width: 100px;
height: 100px;
}
.black {
background-color: slateblue;
}
</style>
<div><div class="square white"></div><div class="clearfix"></div><div class="square black"></div></div>

View file

@ -0,0 +1,8 @@
<!doctype html><style>
.upper {
margin-bottom: 75px;
}
.mystery {
clear: both;
}
</style><body><div class="upper">upper</div><div class="mystery"></div><div class="lower">lower