LibWeb: Propagate layout tree update in display: contents to parent

awesomekling · awesomekling · commit b28480f62dbc · 2025-11-08T11:20:32.000+01:00
When an element has `display: contents` and it gets marked for a layout
tree rebuild, we actually have to mark its parent for rebuild as well.

The structure of the parent (and siblings) may change depending on how
the `display: contents` element changes (e.g position, display, etc.)
diff --git a/Libraries/LibWeb/DOM/Node.cpp b/Libraries/LibWeb/DOM/Node.cpp
@@ -1669,6 +1669,16 @@ void Node::set_needs_layout_tree_update(bool value, SetNeedsLayoutTreeUpdateReas
                 break;
             ancestor->m_child_needs_layout_tree_update = true;
         }
+
+        // If this is an element with display: contents, we need to propagate the layout tree update to the parent.
+        if (auto* element = as_if<Element>(*this)) {
+            if (element->computed_properties() && element->computed_properties()->display().is_contents()) {
+                if (auto parent_element = element->parent_or_shadow_host_element()) {
+                    parent_element->set_needs_layout_tree_update(true, reason);
+                }
+            }
+        }
+
         if (auto layout_node = this->layout_node()) {
             layout_node->set_needs_layout_update(SetNeedsLayoutReason::LayoutTreeUpdate);
 
diff --git a/Tests/LibWeb/Layout/expected/layout-tree-update/change-position-for-child-of-display-contents.txt b/Tests/LibWeb/Layout/expected/layout-tree-update/change-position-for-child-of-display-contents.txt
@@ -0,0 +1,16 @@
+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: not-inline
+      BlockContainer <article> at [8,8] positioned [0+0+0 784 0+0+0] [0+0+0 18 0+0+0] children: inline
+        frag 0 from TextNode start: 0, length: 3, rect: [8,8 27.421875x18] baseline: 13.796875
+            "wat"
+        TextNode <#text> (not painted)
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x34]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x18]
+      PaintableWithLines (BlockContainer<ARTICLE>) [8,8 784x18]
+        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/input/layout-tree-update/change-position-for-child-of-display-contents.html b/Tests/LibWeb/Layout/input/layout-tree-update/change-position-for-child-of-display-contents.html
@@ -0,0 +1,20 @@
+<!doctype html><head><script>
+
+window.onload = function() {
+    let art = document.querySelector("article");
+    art.style.position = "static";
+    art.offsetWidth;
+    art.style.position = "relative";
+    art.offsetWidth;
+    art.style.position = "static";
+    art.offsetWidth;
+    art.style.position = "relative";
+    art.offsetWidth;
+};
+
+</script><style>
+    main {
+        display: contents;
+        background: red;
+    }
+</style></head><body><main><article>wat
