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

LibWeb: Consider entire stack of floated boxes when floating new box

Browse source 
If normal flow layout has caused us to progress past the current
innermost float in the block axis, we still need to consider the floats
stacked outside of it.

Fix this by always walking the currently stacked floats from innermost
to outermost when placing new floats.
This commit is contained in:
Andreas Kling 2023-03-11 18:27:11 +01:00
parent 6960a1bb45
commit 92eaad8f2e
3 changed files with 95 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

30
Tests/LibWeb/Layout/expected/bfc-consider-all-currently-stacked-floats.txt Normal file
View file

@ -0,0 +1,30 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x108 children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x34.9375 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x17.46875 children: inline
line 0 width: 27.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 3, rect: [137,8 27.640625x17.46875]
"bar"
BlockContainer <div.big-float> at (8,8) content-size 100x100 floating children: not-inline
TextNode <#text>
BlockContainer <div.xxx> at (108,8) content-size 29.109375x17.46875 floating children: inline
line 0 width: 29.109375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [108,8 29.109375x17.46875]
"xxx"
TextNode <#text>
TextNode <#text>
BlockContainer <div> at (8,25.46875) content-size 784x17.46875 children: inline
line 0 width: 27.203125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 3, rect: [130,25.46875 27.203125x17.46875]
"baz"
TextNode <#text>
BlockContainer <div.yyy> at (108,25.46875) content-size 21.515625x17.46875 floating children: inline
line 0 width: 21.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [108,25.46875 21.515625x17.46875]
"yyy"
TextNode <#text>
TextNode <#text>
BlockContainer <(anonymous)> at (8,42.9375) content-size 784x0 children: inline
TextNode <#text>

28
Tests/LibWeb/Layout/input/bfc-consider-all-currently-stacked-floats.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: 'SerenitySans';
}
.big-float {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.xxx,
.yyy {
float: left;
background-color: orange;
}
</style>
</head>
<div class="big-float"></div>
<div class="xxx">xxx</div>
bar
<div>
<div class="yyy">yyy</div>
baz
</div>
</html>