LibWeb: Absolute positioned div inside of relative divs not layed out correctly
...when followed by a relatively positioned element
Reduced from https://www.w3.org/Style/CSS/Overview.en.html
<style>
.absolute {
position: absolute
}
</style>
<div>
<div>
<div class="absolute">Languages</div>
</div>
</div>
<h1>Cascading Style Sheets</h1>Firefox:
Ladybird:
Results in a gap in the top bar of the site:
Layout dump:
Viewport <#document> at (0,0) content-size 1906x939 [0+0+0 1906 0+0+0] [0+0+0 939 0+0+0] children: not-inline
BlockContainer <html> at (0,0) content-size 1906x939 [0+0+0 1906 0+0+0] [0+0+0 939 0+0+0] [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 1890x58.25 [8+0+0 1890 0+0+8] [8+0+0 58.25 0+0+21.4375] children: not-inline
BlockContainer <div> at (8,8) content-size 1890x0 [0+0+0 1890 0+0+0] [0+0+0 0 0+0+0] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 1890x0 [0+0+0 1890 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text>
BlockContainer <div> at (8,8) content-size 1890x0 [0+0+0 1890 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text>
BlockContainer <div.absolute> at (8,8) content-size 69.3125x18.40625 positioned [0+0+0 69.3125 0+0+0] [0+0+0 18.40625 0+0+0] [BFC] children: inline
line 0 width: 69.3125, height: 18.40625, bottom: 18.40625, baseline: 14.59375
frag 0 from TextNode start: 0, length: 9, rect: [8,8 69.3125x18.40625]
"Languages"
TextNode <#text>
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 1890x0 [0+0+0 1890 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,16) content-size 1890x0 [0+0+0 1890 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text>
BlockContainer <h1> at (8,29.4375) content-size 1890x36.8125 [0+0+0 1890 0+0+0] [21.4375+0+0 36.8125 0+0+21.4375] children: inline
line 0 width: 312.90625, height: 36.8125, bottom: 36.8125, baseline: 29.203125
frag 0 from TextNode start: 0, length: 22, rect: [8,29.4375 312.90625x36.796875]
"Cascading Style Sheets"
TextNode <#text>
BlockContainer <(anonymous)> at (8,87.6875) content-size 1890x0 [0+0+0 1890 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text>
SerenityOS / serenity
The Serenity Operating System 🐞
30.6k
Contributors get 100% of received funds after fees
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too