1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 02:37:36 +00:00

LibWeb: Skip out-of-flow boxes when wrapping inlines in anonymous block

Out-of-flow boxes (floating and absolutely-positioned elements) were
previously collected and put in the anonymous block wrapper as well, but
this actually made hit testing not able to find them, since they were
breaking expectations about tree structure that hit testing relies on.

After this change, we simply let out-of-flow boxes stay in their
original parent, preserving the author's intended box tree structure.
This commit is contained in:
Andreas Kling 2023-12-10 21:33:03 +01:00
parent 11354dbf9e
commit 6994ea5885
10 changed files with 86 additions and 40 deletions

View file

@ -3,17 +3,17 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x34.9375 children: not-inline
BlockContainer <div.big-float> at (8,8) content-size 100x100 floating [BFC] children: not-inline
BlockContainer <div.xxx> at (108,8) content-size 29.109375x17.46875 floating [BFC] children: inline
line 0 width: 29.109375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [108,8 29.109375x17.46875]
"xxx"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 784x17.46875 children: inline
line 0 width: 27.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 3, rect: [137,8 27.640625x17.46875]
"bar"
BlockContainer <div.big-float> at (8,8) content-size 100x100 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.xxx> at (108,8) content-size 29.109375x17.46875 floating [BFC] children: inline
line 0 width: 29.109375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [108,8 29.109375x17.46875]
"xxx"
TextNode <#text>
TextNode <#text>
BlockContainer <div> at (8,25.46875) content-size 784x17.46875 children: inline
line 0 width: 27.203125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
@ -32,11 +32,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x108]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x34.9375]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x34.9375] overflow: [8,8 784x100]
PaintableWithLines (BlockContainer<DIV>.big-float) [8,8 100x100]
PaintableWithLines (BlockContainer<DIV>.xxx) [108,8 29.109375x17.46875]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x17.46875]
PaintableWithLines (BlockContainer<DIV>.big-float) [8,8 100x100]
PaintableWithLines (BlockContainer<DIV>.xxx) [108,8 29.109375x17.46875]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [8,25.46875 784x17.46875]
PaintableWithLines (BlockContainer<DIV>.yyy) [108,25.46875 21.515625x17.46875]

View file

@ -2,9 +2,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
BlockContainer <div> at (8,8) content-size 784x100 children: not-inline
BlockContainer <div.square.white> at (8,8) content-size 100x100 floating [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.square.white> at (8,8) content-size 100x100 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.clearfix> at (8,108) content-size 784x0 children: not-inline
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
@ -18,8 +18,8 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x100]
PaintableWithLines (BlockContainer<DIV>) [8,8 784x100]
PaintableWithLines (BlockContainer<DIV>.square.white) [8,8 100x100]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (BlockContainer<DIV>.square.white) [8,8 100x100]
PaintableWithLines (BlockContainer<DIV>.clearfix) [8,108 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,108 784x0]
PaintableWithLines (BlockContainer<DIV>.square.black) [8,108 49x49]

View file

@ -3,9 +3,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
BlockContainer <div#b> at (9,9) content-size 50x50 floating [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#b> at (9,9) content-size 50x50 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div#a> at (8,8) content-size 784x17.46875 children: inline
line 0 width: 37.578125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
@ -18,9 +18,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x60]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17.46875]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17.46875] overflow: [8,8 784x52]
PaintableWithLines (BlockContainer<DIV>#b) [8,8 52x52]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (BlockContainer<DIV>#b) [8,8 52x52]
PaintableWithLines (BlockContainer<DIV>#a) [8,8 784x17.46875]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,25.46875 784x0]