LibWeb: Count the width of inline-blocks in InlineNodes only once

lpas · gmta · commit ffcd3a4bb2dd · 2025-10-27T21:45:33.000-07:00
An BlockContainer inside an InlineNode is called from the
`for each in inclusive_subtree_of_type`  but is also a fragment
 of that InlineNode. Don't count the the Node twice.
diff --git a/Libraries/LibWeb/Layout/LayoutState.cpp b/Libraries/LibWeb/Layout/LayoutState.cpp
@@ -383,6 +383,8 @@ void LayoutState::commit(Box& root)
         paintable_with_lines->for_each_in_inclusive_subtree_of_type<Painting::PaintableWithLines>([&](auto& paintable) {
             if (paintable.line_index() != line_index)
                 return TraversalDecision::Continue;
+            if (is<BlockContainer>(paintable.layout_node()))
+                return TraversalDecision::Continue;
 
             auto used_values = used_values_per_layout_node.get(paintable.layout_node_with_style_and_box_metrics());
             if (&paintable != paintable_with_lines && used_values.has_value())
diff --git a/Tests/LibWeb/Layout/expected/abspos-static-position-containing-block-inline-situation.txt b/Tests/LibWeb/Layout/expected/abspos-static-position-containing-block-inline-situation.txt
@@ -1,6 +1,6 @@
 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 18 0+0+0] [BFC] children: inline
-    InlineNode <body> at [0,13] [8+0+0 36.84375 0+0+8] [8+0+0 0 0+0+8]
+    InlineNode <body> at [8,13] [8+0+0 0 0+0+8] [8+0+0 0 0+0+8]
       frag 0 from BlockContainer start: 0, length: 0, rect: [8,13 0x0] baseline: 0
       BlockContainer <main> at [8,13] inline-block [0+0+0 0 0+0+0] [0+0+0 0 0+0+0] [BFC] children: not-inline
         BlockContainer <div> at [8,0] positioned [0+0+0 36.84375 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
@@ -10,7 +10,7 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x18]
-    PaintableWithLines (InlineNode<BODY>) [0,13 36.84375x0]
+    PaintableWithLines (InlineNode<BODY>) [8,13 0x0]
       PaintableWithLines (BlockContainer<MAIN>) [8,13 0x0]
         PaintableWithLines (BlockContainer<DIV>) [8,0 36.84375x18]
           TextPaintable (TextNode<#text>)
diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-contained-by-inline.txt b/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-contained-by-inline.txt
@@ -0,0 +1,38 @@
+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 34 0+0+0] [BFC] children: not-inline
+    BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 18 0+0+8] children: inline
+      TextNode <#text> (not painted)
+      InlineNode <span> at [8,8] [0+0+0 193.453125 0+0+0] [0+0+0 18 0+0+0]
+        frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 185.453125x18] baseline: 13.796875
+        frag 1 from TextNode start: 0, length: 1, rect: [193.453125,8 8x18] baseline: 13.796875
+            " "
+        TextNode <#text> (not painted)
+        BlockContainer <div> at [8,8] inline-block [0+0+0 185.453125 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
+          frag 0 from TextNode start: 0, length: 13, rect: [8,8 185.453125x18] baseline: 13.796875
+              "AAAAAAAAAAAAA"
+          TextNode <#text> (not painted)
+        TextNode <#text> (not painted)
+      TextNode <#text> (not painted)
+      InlineNode <span> at [201.453125,8] [0+0+0 46.71875 0+0+0] [0+0+0 18 0+0+0]
+        frag 0 from BlockContainer start: 0, length: 0, rect: [201.453125,8 46.71875x18] baseline: 13.796875
+        TextNode <#text> (not painted)
+        BlockContainer <div> at [201.453125,8] inline-block [0+0+0 46.71875 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
+          frag 0 from TextNode start: 0, length: 5, rect: [201.453125,8 46.71875x18] baseline: 13.796875
+              "BBBBB"
+          TextNode <#text> (not painted)
+        TextNode <#text> (not painted)
+      TextNode <#text> (not painted)
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x34]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x18]
+      PaintableWithLines (InlineNode<SPAN>) [8,8 193.453125x18]
+        PaintableWithLines (BlockContainer<DIV>) [8,8 185.453125x18]
+          TextPaintable (TextNode<#text>)
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (InlineNode<SPAN>) [201.453125,8 46.71875x18]
+        PaintableWithLines (BlockContainer<DIV>) [201.453125,8 46.71875x18]
+          TextPaintable (TextNode<#text>)
+
+SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
+ SC for BlockContainer<HTML> [0,0 800x34] [children: 0] (z-index: auto)
diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/no-relocation-of-atomic-inline-fragments.txt b/Tests/LibWeb/Layout/expected/block-and-inline/no-relocation-of-atomic-inline-fragments.txt
@@ -1,6 +1,6 @@
 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 18 0+0+0] [BFC] children: inline
-    InlineNode <body> at [0,0] [8+0+0 23.59375 0+0+8] [8+0+0 18 0+0+8]
+    InlineNode <body> at [8,0] [8+0+0 11.796875 0+0+8] [8+0+0 18 0+0+8]
       frag 0 from BlockContainer start: 0, length: 0, rect: [8,0 11.796875x18] baseline: 13.796875
       BlockContainer <div> at [8,0] positioned inline-block [0+0+0 11.796875 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
         frag 0 from TextNode start: 0, length: 1, rect: [8,0 11.796875x18] baseline: 13.796875
@@ -9,7 +9,7 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x18]
-    PaintableWithLines (InlineNode<BODY>) [0,0 23.59375x18]
+    PaintableWithLines (InlineNode<BODY>) [8,0 11.796875x18]
       PaintableWithLines (BlockContainer<DIV>) [8,0 11.796875x18]
         TextPaintable (TextNode<#text>)
 
diff --git a/Tests/LibWeb/Layout/expected/inline-fragment-ordering-flakiness.txt b/Tests/LibWeb/Layout/expected/inline-fragment-ordering-flakiness.txt
@@ -1,6 +1,6 @@
 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 18 0+0+0] [BFC] children: inline
-    InlineNode <body> at [0,0] [8+0+0 73.6875 0+0+8] [8+0+0 18 0+0+8]
+    InlineNode <body> at [8,0] [8+0+0 36.84375 0+0+8] [8+0+0 18 0+0+8]
       frag 0 from BlockContainer start: 0, length: 0, rect: [8,0 36.84375x18] baseline: 13.796875
       BlockContainer <main> at [8,0] inline-block [0+0+0 36.84375 0+0+0] [0+0+0 18 0+0+0] [BFC] children: not-inline
         BlockContainer <div> at [8,0] [0+0+0 36.84375 0+0+0] [0+0+0 18 0+0+0] children: inline
@@ -11,7 +11,7 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x18]
-    PaintableWithLines (InlineNode<BODY>) [0,0 73.6875x18]
+    PaintableWithLines (InlineNode<BODY>) [8,0 36.84375x18]
       PaintableWithLines (BlockContainer<MAIN>) [8,0 36.84375x18]
         PaintableWithLines (BlockContainer<DIV>) [8,0 36.84375x18]
           TextPaintable (TextNode<#text>)
diff --git a/Tests/LibWeb/Layout/input/block-and-inline/inline-block-contained-by-inline.html b/Tests/LibWeb/Layout/input/block-and-inline/inline-block-contained-by-inline.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+    body>span {
+        background-color: red;
+    }
+
+    div {
+        display: inline-block
+    }
+</style>
+
+<body>
+    <span style="background-color: red;">
+        <div>AAAAAAAAAAAAA</div>
+    </span>
+    <span style="background-color: green;">
+        <div>BBBBB</div>
+    </span>
+
+</body>
