LibWeb: Don't join anonymous pseudo wrappers for block node insertion

gmta · gmta · commit c845e2cef7ff · 2025-11-11T10:49:49.000+01:00
This can happen if pseudo elements are absolutely positioned, they need
the nearest non-inline parent to determine their position.
diff --git a/Libraries/LibWeb/Layout/TreeBuilder.cpp b/Libraries/LibWeb/Layout/TreeBuilder.cpp
@@ -113,8 +113,8 @@ static Layout::Node& insertion_parent_for_block_node(Layout::NodeWithStyle& layo
     if (!has_inline_or_in_flow_block_children(*new_parent))
         return *new_parent;
 
-    // If the block is out-of-flow,
-    if (layout_node.is_out_of_flow()) {
+    // If the block is out-of-flow and is not a pseudo element,
+    if (layout_node.is_out_of_flow() && !layout_node.is_generated_for_pseudo_element()) {
         // And the parent's last child is an anonymous block, join that anonymous block.
         if (!new_parent->display().is_flex_inside()
             && !new_parent->display().is_grid_inside()
diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-with-after-pseudo.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-with-after-pseudo.txt
@@ -4,10 +4,11 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-
       frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.703125x57] baseline: 45.484375
       BlockContainer <button.button_button___eDCW> at [13,10] positioned inline-block [0+1+4 414.703125 4+1+0] [0+1+1 57 1+1+0] [BFC] children: not-inline
         BlockContainer <(anonymous)> at [13,10] flex-container(column) [0+0+0 414.703125 0+0+0] [0+0+0 57 0+0+0] [FFC] children: not-inline
-          BlockContainer <(anonymous)> at [13,10] flex-item [0+0+0 414.703125 0+0+0] [0+0+0 57 0+0+0] [BFC] children: inline
-            frag 0 from TextNode start: 0, length: 14, rect: [13,10 414.703125x57] baseline: 43.484375
-                "See more games"
-            TextNode <#text> (not painted)
+          BlockContainer <(anonymous)> at [13,10] flex-item [0+0+0 414.703125 0+0+0] [0+0+0 57 0+0+0] [BFC] children: not-inline
+            BlockContainer <(anonymous)> at [13,10] [0+0+0 414.703125 0+0+0] [0+0+0 57 0+0+0] children: inline
+              frag 0 from TextNode start: 0, length: 14, rect: [13,10 414.703125x57] baseline: 43.484375
+                  "See more games"
+              TextNode <#text> (not painted)
             BlockContainer <(anonymous)> at [9,9] positioned [0+0+0 422.703125 0+0+0] [0+0+0 59 0+0+0] [BFC] children: inline
               TextNode <#text> (not painted)
 
@@ -17,7 +18,8 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
       PaintableWithLines (BlockContainer<BUTTON>.button_button___eDCW) [8,8 424.703125x61]
         PaintableWithLines (BlockContainer(anonymous)) [13,10 414.703125x57]
           PaintableWithLines (BlockContainer(anonymous)) [13,10 414.703125x57]
-            TextPaintable (TextNode<#text>)
+            PaintableWithLines (BlockContainer(anonymous)) [13,10 414.703125x57]
+              TextPaintable (TextNode<#text>)
             PaintableWithLines (BlockContainer(anonymous)) [9,9 422.703125x59]
 
 SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
diff --git a/Tests/LibWeb/Layout/expected/pseudo-element-position-absolute.txt b/Tests/LibWeb/Layout/expected/pseudo-element-position-absolute.txt
@@ -0,0 +1,51 @@
+Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-inline
+  BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 70 0+0+0] [BFC] children: not-inline
+    BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 54 0+0+8] children: not-inline
+      BlockContainer <(anonymous)> at [8,8] [0+0+0 784 0+0+0] [0+0+0 18 0+0+0] children: inline
+        InlineNode <span> at [8,8] [0+0+0 54.796875 0+0+0] [0+0+0 18 0+0+0]
+          frag 0 from TextNode start: 0, length: 6, rect: [8,8 54.796875x18] baseline: 13.796875
+              "foobar"
+          TextNode <#text> (not painted)
+      BlockContainer <(anonymous)> at [8,26] positioned [0+0+0 50 0+0+0] [0+0+0 50 0+0+0] [BFC] children: inline
+        frag 0 from TextNode start: 0, length: 3, rect: [8,26 27.203125x18] baseline: 13.796875
+            "baz"
+        TextNode <#text> (not painted)
+      BlockContainer <(anonymous)> at [8,26] [0+0+0 784 0+0+0] [0+0+0 0 0+0+0] children: inline
+        TextNode <#text> (not painted)
+      BlockContainer <div> at [8,26] [0+0+0 784 0+0+0] [0+0+0 18 0+0+0] children: inline
+        frag 0 from TextNode start: 0, length: 11, rect: [8,26 97.640625x18] baseline: 13.796875
+            "lorem ipsum"
+        TextNode <#text> (not painted)
+      BlockContainer <(anonymous)> at [8,44] [0+0+0 784 0+0+0] [0+0+0 18 0+0+0] children: inline
+        TextNode <#text> (not painted)
+        InlineNode <span> at [8,44] [0+0+0 54.796875 0+0+0] [0+0+0 18 0+0+0]
+          frag 0 from TextNode start: 0, length: 6, rect: [8,44 54.796875x18] baseline: 13.796875
+              "foobar"
+          TextNode <#text> (not painted)
+      BlockContainer <(anonymous)> at [8,62] positioned [0+0+0 50 0+0+0] [0+0+0 50 0+0+0] [BFC] children: inline
+        frag 0 from TextNode start: 0, length: 3, rect: [8,62 27.203125x18] baseline: 13.796875
+            "baz"
+        TextNode <#text> (not painted)
+      BlockContainer <(anonymous)> at [8,62] [0+0+0 784 0+0+0] [0+0+0 0 0+0+0] children: inline
+        TextNode <#text> (not painted)
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x70]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x54]
+      PaintableWithLines (BlockContainer(anonymous)) [8,8 784x18]
+        PaintableWithLines (InlineNode<SPAN>) [8,8 54.796875x18]
+          TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [8,26 50x50]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [8,26 784x0]
+      PaintableWithLines (BlockContainer<DIV>) [8,26 784x18]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [8,44 784x18]
+        PaintableWithLines (InlineNode<SPAN>) [8,44 54.796875x18]
+          TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [8,62 50x50]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [8,62 784x0]
+
+SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
+ SC for BlockContainer<HTML> [0,0 800x70] [children: 0] (z-index: auto)
diff --git a/Tests/LibWeb/Layout/input/pseudo-element-position-absolute.html b/Tests/LibWeb/Layout/input/pseudo-element-position-absolute.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<style>
+span::after {
+    background: green;
+    content: "baz";
+    display: block;
+    height: 50px;
+    position: absolute;
+    width: 50px;
+}
+</style>
+<span>foobar</span>
+<div>lorem ipsum</div>
+<span>foobar</span>
