LibWeb: Support inserting non-inline elements into inline elements

Our layout tree requires that all containers either have inline or
non-inline children. In order to support the layout of non-inline
elements inside inline elements, we need to do a bit of tree
restructuring. It effectively simulates temporarily closing all inline
nodes, appending the block element, and resumes appending to the last
open inline node.

The acid1.txt expectation needed to be updated to reflect the fact that
we now hoist its <p> elements out of the inline <form> they were in.
Visually, the before and after situations for acid1.html are identical.

Libraries/LibWeb/Dump.cpp

@@ -210,7 +210,6 @@ void dump_tree(StringBuilder& builder, Layout::Node const& layout_node, bool sho
             nonbox_color_on,
             identifier,
             color_off);
-        builder.append("\n"sv);
     } else {
         auto& box = verify_cast<Layout::Box>(layout_node);
         StringView color_on = is<Layout::SVGBox>(box) ? svg_box_color_on : box_color_on;
@@ -334,10 +333,14 @@ void dump_tree(StringBuilder& builder, Layout::Node const& layout_node, bool sho
                 }
             }
         }
-
-        builder.append("\n"sv);
     }
 
+    if (is<Layout::NodeWithStyleAndBoxModelMetrics>(layout_node)
+        && static_cast<Layout::NodeWithStyleAndBoxModelMetrics const&>(layout_node).continuation_of_node())
+        builder.append(" continuation"sv);
+
+    builder.append("\n"sv);
+
     if (layout_node.dom_node() && is<HTML::HTMLImageElement>(*layout_node.dom_node())) {
         if (auto image_data = static_cast<HTML::HTMLImageElement const&>(*layout_node.dom_node()).current_request().image_data()) {
             if (is<SVG::SVGDecodedImageData>(*image_data)) {

Libraries/LibWeb/HTML/HTMLElement.cpp

@@ -1,5 +1,6 @@
 /*
  * Copyright (c) 2018-2024, Andreas Kling <[email protected]>
+ * Copyright (c) 2025, Jelle Raaijmakers <[email protected]>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -540,13 +541,17 @@ int HTMLElement::offset_width() const
     // NOTE: Ensure that layout is up-to-date before looking at metrics.
     const_cast<DOM::Document&>(document()).update_layout();
 
-    // 1. If the element does not have any associated CSS layout box return zero and terminate this algorithm.
-    if (!paintable_box())
+    // 1. If the element does not have any associated box return zero and terminate this algorithm.
+    auto const* box = paintable_box();
+    if (!box)
         return 0;
 
-    // 2. Return the width of the axis-aligned bounding box of the border boxes of all fragments generated by the element’s principal box,
-    //    ignoring any transforms that apply to the element and its ancestors.
-    return paintable_box()->border_box_width().to_int();
+    // 2. Return the unscaled width of the axis-aligned bounding box of the border boxes of all fragments generated by
+    //    the element’s principal box, ignoring any transforms that apply to the element and its ancestors.
+    //
+    //    If the element’s principal box is an inline-level box which was "split" by a block-level descendant, also
+    //    include fragments generated by the block-level descendants, unless they are zero width or height.
+    return box->absolute_united_border_box_rect().width().to_int();
 }
 
 // https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetheight
@@ -555,13 +560,17 @@ int HTMLElement::offset_height() const
     // NOTE: Ensure that layout is up-to-date before looking at metrics.
     const_cast<DOM::Document&>(document()).update_layout();
 
-    // 1. If the element does not have any associated CSS layout box return zero and terminate this algorithm.
-    if (!paintable_box())
+    // 1. If the element does not have any associated box return zero and terminate this algorithm.
+    auto const* box = paintable_box();
+    if (!box)
         return 0;
 
-    // 2. Return the height of the axis-aligned bounding box of the border boxes of all fragments generated by the element’s principal box,
-    //    ignoring any transforms that apply to the element and its ancestors.
-    return paintable_box()->border_box_height().to_int();
+    // 2. Return the unscaled height of the axis-aligned bounding box of the border boxes of all fragments generated by
+    //    the element’s principal box, ignoring any transforms that apply to the element and its ancestors.
+    //
+    //    If the element’s principal box is an inline-level box which was "split" by a block-level descendant, also
+    //    include fragments generated by the block-level descendants, unless they are zero width or height.
+    return box->absolute_united_border_box_rect().height().to_int();
 }
 
 // https://html.spec.whatwg.org/multipage/links.html#cannot-navigate

Libraries/LibWeb/Layout/LayoutState.cpp

@@ -223,7 +223,12 @@ void LayoutState::commit(Box& root)
     root.document().for_each_shadow_including_inclusive_descendant([&](DOM::Node& node) {
         node.clear_paintable();
         if (node.layout_node() && is<InlineNode>(node.layout_node())) {
-            inline_nodes.set(static_cast<InlineNode*>(node.layout_node()));
+            // Inline nodes might have a continuation chain; add all inline nodes that are part of it.
+            for (GC::Ptr inline_node = static_cast<NodeWithStyleAndBoxModelMetrics*>(node.layout_node());
+                inline_node; inline_node = inline_node->continuation_of_node()) {
+                if (is<InlineNode>(*inline_node))
+                    inline_nodes.set(static_cast<InlineNode*>(inline_node.ptr()));
+            }
         }
         return TraversalDecision::Continue;
     });

Libraries/LibWeb/Layout/Node.cpp

@@ -1,6 +1,7 @@
 /*
  * Copyright (c) 2018-2023, Andreas Kling <[email protected]>
  * Copyright (c) 2021-2023, Sam Atkins <[email protected]>
+ * Copyright (c) 2025, Jelle Raaijmakers <[email protected]>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -13,7 +14,6 @@
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/CSS/StyleValues/IntegerStyleValue.h>
 #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
-#include <LibWeb/CSS/StyleValues/MathDepthStyleValue.h>
 #include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RatioStyleValue.h>
@@ -30,7 +30,6 @@
 #include <LibWeb/Layout/TableWrapper.h>
 #include <LibWeb/Layout/TextNode.h>
 #include <LibWeb/Layout/Viewport.h>
-#include <LibWeb/Platform/FontPlugin.h>
 
 namespace Web::Layout {
 
@@ -1275,4 +1274,10 @@ CSS::UserSelect Node::user_select_used_value() const
     return computed_value;
 }
 
+void NodeWithStyleAndBoxModelMetrics::visit_edges(Cell::Visitor& visitor)
+{
+    Base::visit_edges(visitor);
+    visitor.visit(m_continuation_of_node);
+}
+
 }

Libraries/LibWeb/Layout/Node.h

@@ -259,6 +259,11 @@ class NodeWithStyleAndBoxModelMetrics : public NodeWithStyle {
     BoxModelMetrics& box_model() { return m_box_model; }
     BoxModelMetrics const& box_model() const { return m_box_model; }
 
+    GC::Ptr<NodeWithStyleAndBoxModelMetrics> continuation_of_node() const { return m_continuation_of_node; }
+    void set_continuation_of_node(Badge<TreeBuilder>, GC::Ptr<NodeWithStyleAndBoxModelMetrics> node) { m_continuation_of_node = node; }
+
+    virtual void visit_edges(Cell::Visitor& visitor) override;
+
 protected:
     NodeWithStyleAndBoxModelMetrics(DOM::Document& document, DOM::Node* node, GC::Ref<CSS::ComputedProperties> style)
         : NodeWithStyle(document, node, style)
@@ -274,6 +279,7 @@ class NodeWithStyleAndBoxModelMetrics : public NodeWithStyle {
     virtual bool is_node_with_style_and_box_model_metrics() const final { return true; }
 
     BoxModelMetrics m_box_model;
+    GC::Ptr<NodeWithStyleAndBoxModelMetrics> m_continuation_of_node;
 };
 
 template<>