mirror of
https://github.com/RGBCube/serenity
synced 2025-07-28 10:17:34 +00:00
LibWeb: Compute content width before static position for abspos elements
In some scenarios, correctly computing the static position may depend on the content width having been calculated beforehand.
This commit is contained in:
parent
18fe86adc3
commit
e3b1d4a141
3 changed files with 72 additions and 4 deletions
|
@ -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]
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue