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

LibWeb: Compute content width before static position for abspos elements

Browse source 
In some scenarios, correctly computing the static position may depend on
the content width having been calculated beforehand.
This commit is contained in:
implicitfield 2024-03-02 21:53:25 +04:00 • committed by Andreas Kling
parent 18fe86adc3
commit e3b1d4a141
3 changed files with 72 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

34
Tests/LibWeb/Layout/expected/abspos-flexbox-with-auto-width.txt Normal file
View file

@ -0,0 +1,34 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
BlockContainer <div#containing-block> at (8,8) content-size 200x100 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 200x0 children: inline
TextNode <#text>
Box <div#inner-flex> at (8,8) content-size 200x0 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div> at (83,8) content-size 50x100 positioned [BFC] children: not-inline
BlockContainer <(anonymous)> at (83,8) content-size 50x0 children: inline
TextNode <#text>
BlockContainer <span> at (83,8) content-size 50x0 children: not-inline
BlockContainer <(anonymous)> at (83,8) content-size 50x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 200x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x116]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x100]
PaintableWithLines (BlockContainer<DIV>#containing-block) [8,8 200x100]
PaintableWithLines (BlockContainer(anonymous)) [8,8 200x0]
PaintableBox (Box<DIV>#inner-flex) [8,8 200x0] overflow: [83,8 50x100]
PaintableWithLines (BlockContainer<DIV>) [83,8 50x100]
PaintableWithLines (BlockContainer(anonymous)) [83,8 50x0]
PaintableWithLines (BlockContainer<SPAN>) [83,8 50x0]
PaintableWithLines (BlockContainer(anonymous)) [83,8 50x0]
PaintableWithLines (BlockContainer(anonymous)) [8,8 200x0]
PaintableWithLines (BlockContainer(anonymous)) [8,108 784x0]

25
Tests/LibWeb/Layout/input/abspos-flexbox-with-auto-width.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<style>
#containing-block {
width: 200px;
height: 100px;
background: red;
}
#inner-flex {
display: flex;
justify-content: center;
}
span {
display: block;
width: 50px;
}
</style>
<div id="containing-block">
<div id="inner-flex">
<div style="position: absolute; height: 100px; background: green;">
<span></span>
</div>
</div>
</div>