LibWeb: Port inline elements to the new Paintable system

This patch adds InlinePaintable which corresponds to Layout::InlineNode.

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -288,6 +288,7 @@ set(SOURCES
     Painting/CanvasPaintable.cpp
     Painting/CheckBoxPaintable.cpp
     Painting/ImagePaintable.cpp
+    Painting/InlinePaintable.cpp
     Painting/MarkerPaintable.cpp
     Painting/NestedBrowsingContextPaintable.cpp
     Painting/PaintContext.cpp

Userland/Libraries/LibWeb/Layout/InlineNode.cpp

@@ -11,9 +11,7 @@
 #include <LibWeb/Layout/BlockContainer.h>
 #include <LibWeb/Layout/InlineFormattingContext.h>
 #include <LibWeb/Layout/InlineNode.h>
-#include <LibWeb/Painting/BackgroundPainting.h>
+#include <LibWeb/Painting/InlinePaintable.h>
-#include <LibWeb/Painting/BorderPainting.h>
-#include <LibWeb/Painting/ShadowPainting.h>
 
 namespace Web::Layout {
 
@@ -27,118 +25,9 @@ InlineNode::~InlineNode()
 {
 }
 
-void InlineNode::paint_inline(PaintContext& context, Painting::PaintPhase phase) const
+OwnPtr<Painting::Paintable> InlineNode::create_paintable() const
 {
-    auto& painter = context.painter();
+    return Painting::InlinePaintable::create(*this);
-
-    if (phase == Painting::PaintPhase::Background) {
-        auto top_left_border_radius = computed_values().border_top_left_radius();
-        auto top_right_border_radius = computed_values().border_top_right_radius();
-        auto bottom_right_border_radius = computed_values().border_bottom_right_radius();
-        auto bottom_left_border_radius = computed_values().border_bottom_left_radius();
-        auto containing_block_position_in_absolute_coordinates = containing_block()->paint_box()->absolute_position();
-
-        for_each_fragment([&](auto const& fragment, bool is_first_fragment, bool is_last_fragment) {
-            Gfx::FloatRect absolute_fragment_rect { containing_block_position_in_absolute_coordinates.translated(fragment.offset()), fragment.size() };
-
-            if (is_first_fragment) {
-                float extra_start_width = box_model().padding.left;
-                absolute_fragment_rect.translate_by(-extra_start_width, 0);
-                absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_start_width);
-            }
-
-            if (is_last_fragment) {
-                float extra_end_width = box_model().padding.right;
-                absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width);
-            }
-
-            auto border_radius_data = Painting::normalized_border_radius_data(*this, absolute_fragment_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius);
-            Painting::paint_background(context, *this, enclosing_int_rect(absolute_fragment_rect), computed_values().background_color(), &computed_values().background_layers(), border_radius_data);
-
-            if (auto computed_box_shadow = computed_values().box_shadow(); !computed_box_shadow.is_empty()) {
-                Vector<Painting::BoxShadowData> resolved_box_shadow_data;
-                resolved_box_shadow_data.ensure_capacity(computed_box_shadow.size());
-                for (auto const& layer : computed_box_shadow) {
-                    resolved_box_shadow_data.empend(
-                        layer.color,
-                        static_cast<int>(layer.offset_x.to_px(*this)),
-                        static_cast<int>(layer.offset_y.to_px(*this)),
-                        static_cast<int>(layer.blur_radius.to_px(*this)),
-                        static_cast<int>(layer.spread_distance.to_px(*this)),
-                        layer.placement == CSS::BoxShadowPlacement::Outer ? Painting::BoxShadowPlacement::Outer : Painting::BoxShadowPlacement::Inner);
-                }
-                Painting::paint_box_shadow(context, enclosing_int_rect(absolute_fragment_rect), resolved_box_shadow_data);
-            }
-
-            return IterationDecision::Continue;
-        });
-    }
-
-    if (phase == Painting::PaintPhase::Border) {
-        auto top_left_border_radius = computed_values().border_top_left_radius();
-        auto top_right_border_radius = computed_values().border_top_right_radius();
-        auto bottom_right_border_radius = computed_values().border_bottom_right_radius();
-        auto bottom_left_border_radius = computed_values().border_bottom_left_radius();
-
-        auto borders_data = Painting::BordersData {
-            .top = computed_values().border_top(),
-            .right = computed_values().border_right(),
-            .bottom = computed_values().border_bottom(),
-            .left = computed_values().border_left(),
-        };
-
-        auto containing_block_position_in_absolute_coordinates = containing_block()->paint_box()->absolute_position();
-
-        for_each_fragment([&](auto const& fragment, bool is_first_fragment, bool is_last_fragment) {
-            Gfx::FloatRect absolute_fragment_rect { containing_block_position_in_absolute_coordinates.translated(fragment.offset()), fragment.size() };
-
-            if (is_first_fragment) {
-                float extra_start_width = box_model().padding.left;
-                absolute_fragment_rect.translate_by(-extra_start_width, 0);
-                absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_start_width);
-            }
-
-            if (is_last_fragment) {
-                float extra_end_width = box_model().padding.right;
-                absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width);
-            }
-
-            auto bordered_rect = absolute_fragment_rect.inflated(borders_data.top.width, borders_data.right.width, borders_data.bottom.width, borders_data.left.width);
-            auto border_radius_data = Painting::normalized_border_radius_data(*this, bordered_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius);
-
-            Painting::paint_all_borders(context, bordered_rect, border_radius_data, borders_data);
-
-            return IterationDecision::Continue;
-        });
-    }
-
-    // FIXME: We check for a non-null dom_node(), since pseudo-elements have a null one and were getting
-    //        highlighted incorrectly. A better solution will be needed if we want to inspect them too.
-    if (phase == Painting::PaintPhase::Overlay && dom_node() && document().inspected_node() == dom_node()) {
-        // FIXME: This paints a double-thick border between adjacent fragments, where ideally there
-        //        would be none. Once we implement non-rectangular outlines for the `outline` CSS
-        //        property, we can use that here instead.
-        for_each_fragment([&](auto& fragment, bool, bool) {
-            painter.draw_rect(enclosing_int_rect(fragment.absolute_rect()), Color::Magenta);
-            return IterationDecision::Continue;
-        });
-    }
-}
-
-template<typename Callback>
-void InlineNode::for_each_fragment(Callback callback) const
-{
-    // FIXME: This will be slow if the containing block has a lot of fragments!
-    Vector<LineBoxFragment const&> fragments;
-    containing_block()->paint_box()->for_each_fragment([&](auto& fragment) {
-        if (is_inclusive_ancestor_of(fragment.layout_node()))
-            fragments.append(fragment);
-        return IterationDecision::Continue;
-    });
-    for (size_t i = 0; i < fragments.size(); ++i) {
-        auto const& fragment = fragments[i];
-        callback(fragment, i == 0, i == fragments.size() - 1);
-    }
 }
 
 }

Userland/Libraries/LibWeb/Layout/InlineNode.h

@@ -15,11 +15,7 @@ public:
     InlineNode(DOM::Document&, DOM::Element*, NonnullRefPtr<CSS::StyleProperties>);
     virtual ~InlineNode() override;
 
-    void paint_inline(PaintContext&, Painting::PaintPhase) const;
+    virtual OwnPtr<Painting::Paintable> create_paintable() const override;
-
-private:
-    template<typename Callback>
-    void for_each_fragment(Callback) const;
 };
 
 }

Userland/Libraries/LibWeb/Painting/InlinePaintable.cpp

@@ -0,0 +1,146 @@
+/*
+ * Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <LibGfx/AntiAliasingPainter.h>
+#include <LibWeb/DOM/Document.h>
+#include <LibWeb/Layout/BlockContainer.h>
+#include <LibWeb/Layout/ImageBox.h>
+#include <LibWeb/Painting/BackgroundPainting.h>
+#include <LibWeb/Painting/InlinePaintable.h>
+#include <LibWeb/Painting/ShadowPainting.h>
+
+namespace Web::Painting {
+
+NonnullOwnPtr<InlinePaintable> InlinePaintable::create(Layout::InlineNode const& layout_node)
+{
+    return adopt_own(*new InlinePaintable(layout_node));
+}
+
+InlinePaintable::InlinePaintable(Layout::InlineNode const& layout_node)
+    : Paintable(layout_node)
+{
+}
+
+Layout::InlineNode const& InlinePaintable::layout_node() const
+{
+    return static_cast<Layout::InlineNode const&>(Paintable::layout_node());
+}
+
+void InlinePaintable::paint(PaintContext& context, Painting::PaintPhase phase) const
+{
+    auto& painter = context.painter();
+
+    if (phase == Painting::PaintPhase::Background) {
+        auto top_left_border_radius = computed_values().border_top_left_radius();
+        auto top_right_border_radius = computed_values().border_top_right_radius();
+        auto bottom_right_border_radius = computed_values().border_bottom_right_radius();
+        auto bottom_left_border_radius = computed_values().border_bottom_left_radius();
+        auto containing_block_position_in_absolute_coordinates = layout_node().containing_block()->paint_box()->absolute_position();
+
+        for_each_fragment([&](auto const& fragment, bool is_first_fragment, bool is_last_fragment) {
+            Gfx::FloatRect absolute_fragment_rect { containing_block_position_in_absolute_coordinates.translated(fragment.offset()), fragment.size() };
+
+            if (is_first_fragment) {
+                float extra_start_width = box_model().padding.left;
+                absolute_fragment_rect.translate_by(-extra_start_width, 0);
+                absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_start_width);
+            }
+
+            if (is_last_fragment) {
+                float extra_end_width = box_model().padding.right;
+                absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width);
+            }
+
+            auto border_radius_data = Painting::normalized_border_radius_data(layout_node(), absolute_fragment_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius);
+            Painting::paint_background(context, layout_node(), enclosing_int_rect(absolute_fragment_rect), computed_values().background_color(), &computed_values().background_layers(), border_radius_data);
+
+            if (auto computed_box_shadow = computed_values().box_shadow(); !computed_box_shadow.is_empty()) {
+                Vector<Painting::BoxShadowData> resolved_box_shadow_data;
+                resolved_box_shadow_data.ensure_capacity(computed_box_shadow.size());
+                for (auto const& layer : computed_box_shadow) {
+                    resolved_box_shadow_data.empend(
+                        layer.color,
+                        static_cast<int>(layer.offset_x.to_px(layout_node())),
+                        static_cast<int>(layer.offset_y.to_px(layout_node())),
+                        static_cast<int>(layer.blur_radius.to_px(layout_node())),
+                        static_cast<int>(layer.spread_distance.to_px(layout_node())),
+                        layer.placement == CSS::BoxShadowPlacement::Outer ? Painting::BoxShadowPlacement::Outer : Painting::BoxShadowPlacement::Inner);
+                }
+                Painting::paint_box_shadow(context, enclosing_int_rect(absolute_fragment_rect), resolved_box_shadow_data);
+            }
+
+            return IterationDecision::Continue;
+        });
+    }
+
+    if (phase == Painting::PaintPhase::Border) {
+        auto top_left_border_radius = computed_values().border_top_left_radius();
+        auto top_right_border_radius = computed_values().border_top_right_radius();
+        auto bottom_right_border_radius = computed_values().border_bottom_right_radius();
+        auto bottom_left_border_radius = computed_values().border_bottom_left_radius();
+
+        auto borders_data = Painting::BordersData {
+            .top = computed_values().border_top(),
+            .right = computed_values().border_right(),
+            .bottom = computed_values().border_bottom(),
+            .left = computed_values().border_left(),
+        };
+
+        auto containing_block_position_in_absolute_coordinates = layout_node().containing_block()->paint_box()->absolute_position();
+
+        for_each_fragment([&](auto const& fragment, bool is_first_fragment, bool is_last_fragment) {
+            Gfx::FloatRect absolute_fragment_rect { containing_block_position_in_absolute_coordinates.translated(fragment.offset()), fragment.size() };
+
+            if (is_first_fragment) {
+                float extra_start_width = box_model().padding.left;
+                absolute_fragment_rect.translate_by(-extra_start_width, 0);
+                absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_start_width);
+            }
+
+            if (is_last_fragment) {
+                float extra_end_width = box_model().padding.right;
+                absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width);
+            }
+
+            auto bordered_rect = absolute_fragment_rect.inflated(borders_data.top.width, borders_data.right.width, borders_data.bottom.width, borders_data.left.width);
+            auto border_radius_data = Painting::normalized_border_radius_data(layout_node(), bordered_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius);
+
+            Painting::paint_all_borders(context, bordered_rect, border_radius_data, borders_data);
+
+            return IterationDecision::Continue;
+        });
+    }
+
+    // FIXME: We check for a non-null dom_node(), since pseudo-elements have a null one and were getting
+    //        highlighted incorrectly. A better solution will be needed if we want to inspect them too.
+    if (phase == Painting::PaintPhase::Overlay && layout_node().dom_node() && layout_node().document().inspected_node() == layout_node().dom_node()) {
+        // FIXME: This paints a double-thick border between adjacent fragments, where ideally there
+        //        would be none. Once we implement non-rectangular outlines for the `outline` CSS
+        //        property, we can use that here instead.
+        for_each_fragment([&](auto const& fragment, bool, bool) {
+            painter.draw_rect(enclosing_int_rect(fragment.absolute_rect()), Color::Magenta);
+            return IterationDecision::Continue;
+        });
+    }
+}
+
+template<typename Callback>
+void InlinePaintable::for_each_fragment(Callback callback) const
+{
+    // FIXME: This will be slow if the containing block has a lot of fragments!
+    Vector<Layout::LineBoxFragment const&> fragments;
+    layout_node().containing_block()->paint_box()->for_each_fragment([&](auto& fragment) {
+        if (layout_node().is_inclusive_ancestor_of(fragment.layout_node()))
+            fragments.append(fragment);
+        return IterationDecision::Continue;
+    });
+    for (size_t i = 0; i < fragments.size(); ++i) {
+        auto const& fragment = fragments[i];
+        callback(fragment, i == 0, i == fragments.size() - 1);
+    }
+}
+
+}

Userland/Libraries/LibWeb/Painting/InlinePaintable.h

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2022, Andreas Kling <kling@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/Layout/InlineNode.h>
+#include <LibWeb/Painting/Paintable.h>
+
+namespace Web::Painting {
+
+class InlinePaintable final : public Paintable {
+public:
+    static NonnullOwnPtr<InlinePaintable> create(Layout::InlineNode const&);
+
+    virtual void paint(PaintContext&, PaintPhase) const override;
+
+    Layout::InlineNode const& layout_node() const;
+    auto const& box_model() const { return layout_node().box_model(); }
+
+private:
+    InlinePaintable(Layout::InlineNode const&);
+
+    template<typename Callback>
+    void for_each_fragment(Callback) const;
+};
+
+}

Userland/Libraries/LibWeb/Painting/Paintable.h

@@ -25,6 +25,7 @@ public:
     virtual void after_children_paint(PaintContext&, PaintPhase) const { }
 
     Layout::Node const& layout_node() const { return m_layout_node; }
+    auto const& computed_values() const { return m_layout_node.computed_values(); }
 
 protected:
     explicit Paintable(Layout::Node const& layout_node)
@@ -48,7 +49,6 @@ public:
     Layout::Box const& layout_box() const { return static_cast<Layout::Box const&>(Paintable::layout_node()); }
 
     auto const& box_model() const { return layout_box().box_model(); }
-    auto const& computed_values() const { return layout_box().computed_values(); }
 
     struct OverflowData {
         Gfx::FloatRect scrollable_overflow_rect;

Userland/Libraries/LibWeb/Painting/StackingContext.cpp

@@ -9,7 +9,6 @@
 #include <LibGfx/Painter.h>
 #include <LibWeb/Layout/Box.h>
 #include <LibWeb/Layout/InitialContainingBlock.h>
-#include <LibWeb/Layout/InlineNode.h>
 #include <LibWeb/Layout/ReplacedBox.h>
 #include <LibWeb/Painting/Paintable.h>
 #include <LibWeb/Painting/StackingContext.h>
@@ -18,11 +17,8 @@ namespace Web::Painting {
 
 static void paint_node(Layout::Node const& layout_node, PaintContext& context, PaintPhase phase)
 {
-    // FIXME: This whole thing is hairy. Find a nicer solution for painting InlineNode.
+    if (auto const* paintable = layout_node.paintable())
-    if (layout_node.is_box())
+        paintable->paint(context, phase);
-        static_cast<Layout::Box const&>(layout_node).paint_box()->paint(context, phase);
-    else if (is<Layout::InlineNode>(layout_node))
-        static_cast<Layout::InlineNode const&>(layout_node).paint_inline(context, phase);
 }
 
 StackingContext::StackingContext(Layout::Box& box, StackingContext* parent)