Files
ladybird/Tests/LibWeb/Layout/expected/position-absolute-top-left.txt
Jelle Raaijmakers 6f800caeaa LibWeb: Don't mess up the order of nodes when wrapping inline contents
Whenever we introduce a block element in a container that at that point
has only had inline children, we create an anonymous wrapper for all the
inline elements so we can keep the invariant that each container
contains either inline or non-inline children. For some reason, we
ignore all the out-of-flow nodes since they are layed out separately and
it was thought that this shouldn't matter.

However, if we are dealing with inline blocks and floating blocks, the
order of the inline contents _including_ out-of-flow nodes becomes very
important: floating blocks need to take the order of nodes into account
when positioning themselves.

Fix this by simply hoisting the out-of-flow nodes into the anonymous
wrapper as well.

Fixes the order of blocks in #4212. The gap is still not present.
2025-04-24 19:12:50 +02:00

59 lines
3.7 KiB
Plaintext

Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x616 [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x600 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.blue.absolute> at (208,208) content-size 200x200 positioned [BFC] children: inline
TextNode <#text>
BlockContainer <div.red.absolute> at (308,308) content-size 100x100 positioned [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.yellow.absolute> at (258,258) content-size 100x100 positioned [BFC] children: inline
TextNode <#text>
BlockContainer <div.black.absolute> at (308,308) content-size 50x50 positioned [BFC] children: not-inline
TextNode <#text>
TextNode <#text>
BlockContainer <div.green.absolute> at (508,508) content-size 100x100 positioned [BFC] children: not-inline
TextNode <#text>
TextNode <#text>
BlockContainer <div.blue> at (8,8) content-size 200x200 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 200x0 children: inline
TextNode <#text>
BlockContainer <div.red> at (8,8) content-size 100x100 children: not-inline
BlockContainer <(anonymous)> at (8,108) content-size 200x0 children: inline
TextNode <#text>
BlockContainer <div.yellow> at (8,108) content-size 100x100 children: not-inline
BlockContainer <(anonymous)> at (8,208) content-size 200x0 children: inline
TextNode <#text>
BlockContainer <div.green> at (8,208) content-size 100x100 children: not-inline
BlockContainer <(anonymous)> at (8,308) content-size 200x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,208) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.blue_margin> at (408,408) content-size 200x200 children: not-inline
BlockContainer <(anonymous)> at (8,608) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x616]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x616]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x600]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (BlockContainer<DIV>.blue.absolute) [208,208 200x200]
PaintableWithLines (BlockContainer<DIV>.red.absolute) [308,308 100x100]
PaintableWithLines (BlockContainer<DIV>.yellow.absolute) [258,258 100x100]
PaintableWithLines (BlockContainer<DIV>.black.absolute) [308,308 50x50]
PaintableWithLines (BlockContainer<DIV>.green.absolute) [508,508 100x100]
PaintableWithLines (BlockContainer<DIV>.blue) [8,8 200x200] overflow: [8,8 200x300]
PaintableWithLines (BlockContainer(anonymous)) [8,8 200x0]
PaintableWithLines (BlockContainer<DIV>.red) [8,8 100x100]
PaintableWithLines (BlockContainer(anonymous)) [8,108 200x0]
PaintableWithLines (BlockContainer<DIV>.yellow) [8,108 100x100]
PaintableWithLines (BlockContainer(anonymous)) [8,208 200x0]
PaintableWithLines (BlockContainer<DIV>.green) [8,208 100x100]
PaintableWithLines (BlockContainer(anonymous)) [8,308 200x0]
PaintableWithLines (BlockContainer(anonymous)) [8,208 784x0]
PaintableWithLines (BlockContainer<DIV>.blue_margin) [408,408 200x200]
PaintableWithLines (BlockContainer(anonymous)) [8,608 784x0]