serenity 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>

Sep 23 '23 03:09 shannonbooth

Is this related to https://github.com/SerenityOS/serenity/issues/21137 ?

Sep 23 '23 04:09 ADKaster

I'm trying to investigate some more to figure out how to fix, but there isnt any z-index here as far as I can tell, but I may be misunderstanding things

Sep 23 '23 04:09 shannonbooth

The following HTML appears to fix the issue, so it seems to have something to do with nested absolute div not impacting parent in some way?

<style>
.absolute {
  position: absolute
}
</style>
<div>
  <div class="absolute">
    <div class="absolute">Languages</div>
  </div>
</div>
<h1>Cascading Style Sheets</h1>

Oct 01 '23 07:10 shannonbooth

And a similar HTML where we also seem to match is:

 <style>
.absolute {
  position: absolute
}
</style>
<div>
  <div>
    <div class="absolute">Languages</div>
    <div>Languages</div>
  </div>
</div>
<h1>Cascading Style Sheets</h1>

Oct 01 '23 07:10 shannonbooth

serenity serenity copied to clipboard

LibWeb: Absolute positioned div inside of relative divs not layed out correctly

serenity
serenity copied to clipboard