LibWeb: Support CSS content property images (and lists, too!)

This patch expands our generated content support beyond single strings
to lists of strings and/or images.

Pseudo-elements like ::before and ::after can now use content:url(...)
to insert anonymous image boxes into the layout tree.

This is heavily used in Google Docs for UI elements.

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -987,17 +987,13 @@ ComputedProperties::ContentDataAndQuoteNestingLevel ComputedProperties::content(
 
         ContentData content_data;
 
-        // FIXME: The content is a list of things: strings, identifiers or functions that return strings, and images.
-        //        So it can't always be represented as a single String, but may have to be multiple boxes.
-        //        For now, we'll just assume strings since that is easiest.
-        StringBuilder builder;
         for (auto const& item : content_style_value.content().values()) {
             if (item->is_string()) {
-                builder.append(item->as_string().string_value());
+                content_data.data.append(item->as_string().string_value().to_string());
             } else if (item->is_keyword()) {
                 switch (item->to_keyword()) {
                 case Keyword::OpenQuote:
-                    builder.append(get_quote_string(true, quote_nesting_level++));
+                    content_data.data.append(get_quote_string(true, quote_nesting_level++).to_string());
                     break;
                 case Keyword::CloseQuote:
                     // A 'close-quote' or 'no-close-quote' that would make the depth negative is in error and is ignored
@@ -1006,7 +1002,7 @@ ComputedProperties::ContentDataAndQuoteNestingLevel ComputedProperties::content(
                     // - https://www.w3.org/TR/CSS21/generate.html#quotes-insert
                     // (This is missing from the CONTENT-3 spec.)
                     if (quote_nesting_level > 0)
-                        builder.append(get_quote_string(false, --quote_nesting_level));
+                        content_data.data.append(get_quote_string(false, --quote_nesting_level).to_string());
                     break;
                 case Keyword::NoOpenQuote:
                     quote_nesting_level++;
@@ -1021,14 +1017,15 @@ ComputedProperties::ContentDataAndQuoteNestingLevel ComputedProperties::content(
                     break;
                 }
             } else if (item->is_counter()) {
-                builder.append(item->as_counter().resolve(element_reference));
+                content_data.data.append(item->as_counter().resolve(element_reference));
+            } else if (item->is_image()) {
+                content_data.data.append(NonnullRefPtr { const_cast<ImageStyleValue&>(item->as_image()) });
             } else {
                 // TODO: Implement images, and other things.
                 dbgln("`{}` is not supported in `content` (yet?)", item->to_string(SerializationMode::Normal));
             }
         }
-        content_data.type = ContentData::Type::String;
+        content_data.type = ContentData::Type::List;
-        content_data.data = MUST(builder.to_string());
 
         if (content_style_value.has_alt_text()) {
             StringBuilder alt_text_builder;
@@ -1049,9 +1046,9 @@ ComputedProperties::ContentDataAndQuoteNestingLevel ComputedProperties::content(
 
     switch (value.to_keyword()) {
     case Keyword::None:
-        return { { ContentData::Type::None }, quote_nesting_level };
+        return { { ContentData::Type::None, {} }, quote_nesting_level };
     case Keyword::Normal:
-        return { { ContentData::Type::Normal }, quote_nesting_level };
+        return { { ContentData::Type::Normal, {} }, quote_nesting_level };
     default:
         break;
     }

Libraries/LibWeb/CSS/ComputedValues.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020-2023, Andreas Kling <andreas@ladybird.org>
+ * Copyright (c) 2020-2025, Andreas Kling <andreas@ladybird.org>
  * Copyright (c) 2023-2025, Sam Atkins <sam@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
@@ -30,6 +30,7 @@
 #include <LibWeb/CSS/StyleValues/AbstractImageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BasicShapeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/CursorStyleValue.h>
+#include <LibWeb/CSS/StyleValues/ImageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>
 #include <LibWeb/CSS/Transformation.h>
 #include <LibWeb/CSS/URL.h>
@@ -375,11 +376,10 @@ struct ContentData {
     enum class Type {
         Normal,
         None,
-        String,
+        List,
     } type { Type::Normal };
 
-    // FIXME: Data is a list of identifiers, strings and image values.
+    Vector<Variant<String, NonnullRefPtr<ImageStyleValue>>> data;
-    String data {};
     Optional<String> alt_text {};
 };
 

Libraries/LibWeb/CSS/Properties.json

@@ -1308,6 +1308,7 @@
     "__comment": "FIXME: This accepts a whole lot of other types and identifiers!",
     "valid-types": [
       "counter",
+      "image",
       "string"
     ],
     "valid-identifiers": [

Libraries/LibWeb/CSS/StyleValues/ImageStyleValue.cpp

@@ -66,6 +66,9 @@ void ImageStyleValue::load_any_resources(DOM::Document& document)
                 if (!weak_this || !m_document)
                     return;
 
+                for (auto* client : m_clients)
+                    client->image_style_value_did_update(*this);
+
                 auto image_data = m_resource_request->image_data();
                 if (image_data->is_animated() && image_data->frame_count() > 1) {
                     m_timer = Platform::Timer::create(m_document->heap());
@@ -212,4 +215,31 @@ ValueComparingNonnullRefPtr<CSSStyleValue const> ImageStyleValue::absolutized(CS
     return *this;
 }
 
+void ImageStyleValue::register_client(Client& client)
+{
+    auto result = m_clients.set(&client);
+    VERIFY(result == AK::HashSetResult::InsertedNewEntry);
+}
+
+void ImageStyleValue::unregister_client(Client& client)
+{
+    auto did_remove = m_clients.remove(&client);
+    VERIFY(did_remove);
+}
+
+ImageStyleValue::Client::Client(ImageStyleValue& image_style_value)
+    : m_image_style_value(image_style_value)
+{
+    m_image_style_value.register_client(*this);
+}
+
+ImageStyleValue::Client::~Client()
+{
+}
+
+void ImageStyleValue::Client::image_style_value_finalize()
+{
+    m_image_style_value.unregister_client(*this);
+}
+
 }

Libraries/LibWeb/CSS/StyleValues/ImageStyleValue.h

@@ -24,6 +24,18 @@ class ImageStyleValue final
     using Base = AbstractImageStyleValue;
 
 public:
+    class Client {
+    public:
+        Client(ImageStyleValue&);
+        virtual ~Client();
+        virtual void image_style_value_did_update(ImageStyleValue&) = 0;
+
+    protected:
+        void image_style_value_finalize();
+
+        ImageStyleValue& m_image_style_value;
+    };
+
     static ValueComparingNonnullRefPtr<ImageStyleValue const> create(URL const&);
     static ValueComparingNonnullRefPtr<ImageStyleValue const> create(::URL::URL const&);
     virtual ~ImageStyleValue() override;
@@ -50,8 +62,13 @@ public:
     GC::Ptr<HTML::DecodedImageData> image_data() const;
 
 private:
+    friend class Client;
+
     ImageStyleValue(URL const&);
 
+    void register_client(Client&);
+    void unregister_client(Client&);
+
     virtual void set_style_sheet(GC::Ptr<CSSStyleSheet>) override;
     virtual ValueComparingNonnullRefPtr<CSSStyleValue const> absolutized(CSSPixelRect const& viewport_rect, Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const override;
 
@@ -67,6 +84,8 @@ private:
     size_t m_current_frame_index { 0 };
     size_t m_loops_completed { 0 };
     GC::Ptr<Platform::Timer> m_timer;
+
+    HashTable<Client*> m_clients;
 };
 
 }

Libraries/LibWeb/DOM/Node.cpp

@@ -2926,10 +2926,14 @@ ErrorOr<String> Node::name_or_description(NameOrDescription target, Document con
             //    content of the current node. NOTE: The code for handling the ::after pseudo elements case is further below,
             //    following the “iii. For each child node of the current node” code.
             if (auto before = element->get_pseudo_element_node(CSS::PseudoElement::Before)) {
-                if (before->computed_values().content().alt_text.has_value())
+                if (before->computed_values().content().alt_text.has_value()) {
                     total_accumulated_text.append(before->computed_values().content().alt_text.release_value());
-                else
+                } else {
-                    total_accumulated_text.append(before->computed_values().content().data);
+                    for (auto& item : before->computed_values().content().data) {
+                        if (auto const* string = item.get_pointer<String>())
+                            total_accumulated_text.append(*string);
+                    }
+                }
             }
 
             // iii. Determine Child Nodes: Determine the rendered child nodes of the current node:
@@ -2982,10 +2986,14 @@ ErrorOr<String> Node::name_or_description(NameOrDescription target, Document con
 
             // NOTE: See step ii.b above.
             if (auto after = element->get_pseudo_element_node(CSS::PseudoElement::After)) {
-                if (after->computed_values().content().alt_text.has_value())
+                if (after->computed_values().content().alt_text.has_value()) {
                     total_accumulated_text.append(after->computed_values().content().alt_text.release_value());
-                else
+                } else {
-                    total_accumulated_text.append(after->computed_values().content().data);
+                    for (auto& item : after->computed_values().content().data) {
+                        if (auto const* string = item.get_pointer<String>())
+                            total_accumulated_text.append(*string);
+                    }
+                }
             }
 
             // v. Return the accumulated text if it is not the empty string ("").

Libraries/LibWeb/DOM/Node.h

@@ -94,6 +94,7 @@ enum class StyleInvalidationReason {
 #define ENUMERATE_SET_NEEDS_LAYOUT_REASONS(X)         \
     X(CharacterDataReplaceData)                       \
     X(FinalizeACrossDocumentNavigation)               \
+    X(GeneratedContentImageFinishedLoading)           \
     X(HTMLCanvasElementWidthOrHeightChange)           \
     X(HTMLImageElementReactToChangesInTheEnvironment) \
     X(HTMLImageElementUpdateTheImageData)             \

Libraries/LibWeb/Layout/LayoutState.h

@@ -160,6 +160,8 @@ struct LayoutState {
             CSSPixelSize size;
             size.set_width(content_width() + padding_left + padding_right + border_left + border_right + margin_left + margin_right);
             size.set_height(content_height() + padding_top + padding_bottom + border_top + border_bottom + margin_top + margin_bottom);
+            if (!m_static_position_rect.has_value())
+                return {};
             return m_static_position_rect->aligned_position_for_box_with_size(size);
         }
 

Libraries/LibWeb/Layout/TreeBuilder.cpp

@@ -22,6 +22,7 @@
 #include <LibWeb/HTML/HTMLInputElement.h>
 #include <LibWeb/HTML/HTMLSlotElement.h>
 #include <LibWeb/Layout/FieldSetBox.h>
+#include <LibWeb/Layout/ImageBox.h>
 #include <LibWeb/Layout/ListItemBox.h>
 #include <LibWeb/Layout/ListItemMarkerBox.h>
 #include <LibWeb/Layout/Node.h>
@@ -183,6 +184,78 @@ void TreeBuilder::insert_node_into_inline_or_block_ancestor(Layout::Node& node,
     }
 }
 
+class GeneratedContentImageProvider final
+    : public GC::Cell
+    , public ImageProvider
+    , public CSS::ImageStyleValue::Client {
+    GC_CELL(GeneratedContentImageProvider, GC::Cell);
+    GC_DECLARE_ALLOCATOR(GeneratedContentImageProvider);
+
+public:
+    virtual ~GeneratedContentImageProvider() override = default;
+
+    virtual void finalize() override
+    {
+        Base::finalize();
+        image_style_value_finalize();
+    }
+
+    virtual bool is_image_available() const override { return m_image->is_paintable(); }
+
+    virtual Optional<CSSPixels> intrinsic_width() const override { return m_image->natural_width(); }
+    virtual Optional<CSSPixels> intrinsic_height() const override { return m_image->natural_height(); }
+    virtual Optional<CSSPixelFraction> intrinsic_aspect_ratio() const override { return m_image->natural_aspect_ratio(); }
+
+    virtual RefPtr<Gfx::ImmutableBitmap> current_image_bitmap(Gfx::IntSize size) const override
+    {
+        auto rect = DevicePixelRect { DevicePixelPoint {}, size.to_type<DevicePixels>() };
+        return const_cast<Gfx::ImmutableBitmap*>(m_image->current_frame_bitmap(rect));
+    }
+
+    virtual void set_visible_in_viewport(bool) override { }
+
+    virtual GC::Ptr<DOM::Element const> to_html_element() const override { return nullptr; }
+
+    static GC::Ref<GeneratedContentImageProvider> create(GC::Heap& heap, NonnullRefPtr<CSS::ImageStyleValue> image)
+    {
+        return heap.allocate<GeneratedContentImageProvider>(move(image));
+    }
+
+    void set_layout_node(GC::Ref<Layout::Node> layout_node)
+    {
+        m_layout_node = layout_node;
+    }
+
+private:
+    GeneratedContentImageProvider(NonnullRefPtr<CSS::ImageStyleValue> image)
+        : Client(image)
+        , m_image(move(image))
+    {
+    }
+
+    virtual void visit_edges(Visitor& visitor) override
+    {
+        Base::visit_edges(visitor);
+        visitor.visit(m_layout_node);
+    }
+
+    virtual void image_provider_visit_edges(Visitor& visitor) const override
+    {
+        ImageProvider::image_provider_visit_edges(visitor);
+        visitor.visit(*this);
+    }
+
+    virtual void image_style_value_did_update(CSS::ImageStyleValue&) override
+    {
+        m_layout_node->set_needs_layout_update(DOM::SetNeedsLayoutReason::GeneratedContentImageFinishedLoading);
+    }
+
+    GC::Ptr<Layout::Node> m_layout_node;
+    NonnullRefPtr<CSS::ImageStyleValue> m_image;
+};
+
+GC_DEFINE_ALLOCATOR(GeneratedContentImageProvider);
+
 void TreeBuilder::create_pseudo_element_if_needed(DOM::Element& element, CSS::PseudoElement pseudo_element, AppendOrPrepend mode)
 {
     auto& document = element.document();
@@ -236,18 +309,28 @@ void TreeBuilder::create_pseudo_element_if_needed(DOM::Element& element, CSS::Ps
     DOM::AbstractElement pseudo_element_reference { element, pseudo_element };
     CSS::resolve_counters(pseudo_element_reference);
     // Now that we have counters, we can compute the content for real. Which is silly.
-    if (pseudo_element_content.type == CSS::ContentData::Type::String) {
+    if (pseudo_element_content.type == CSS::ContentData::Type::List) {
         auto [new_content, _] = pseudo_element_style->content(element_reference, initial_quote_nesting_level);
         pseudo_element_node->mutable_computed_values().set_content(new_content);
 
         // FIXME: Handle images, and multiple values
-        if (new_content.type == CSS::ContentData::Type::String) {
+        if (new_content.type == CSS::ContentData::Type::List) {
-            auto text = document.realm().create<DOM::Text>(document, Utf16String::from_utf8(new_content.data));
-            auto text_node = document.heap().allocate<TextNode>(document, *text);
-            text_node->set_generated_for(pseudo_element, element);
-
             push_parent(*pseudo_element_node);
-            insert_node_into_inline_or_block_ancestor(*text_node, text_node->display(), AppendOrPrepend::Append);
+            for (auto& item : new_content.data) {
+                GC::Ptr<Layout::Node> layout_node;
+                if (auto const* string = item.get_pointer<String>()) {
+                    auto text = document.realm().create<DOM::Text>(document, Utf16String::from_utf8(*string));
+                    layout_node = document.heap().allocate<TextNode>(document, *text);
+                } else {
+                    auto& image = *item.get<NonnullRefPtr<CSS::ImageStyleValue>>();
+                    image.load_any_resources(document);
+                    auto image_provider = GeneratedContentImageProvider::create(element.heap(), image);
+                    layout_node = document.heap().allocate<ImageBox>(document, nullptr, *pseudo_element_style, image_provider);
+                    image_provider->set_layout_node(*layout_node);
+                }
+                layout_node->set_generated_for(pseudo_element, element);
+                insert_node_into_inline_or_block_ancestor(*layout_node, layout_node->display(), AppendOrPrepend::Append);
+            }
             pop_parent();
         } else {
             TODO();

Tests/LibWeb/Layout/expected/content-image-simple.txt

@@ -0,0 +1,37 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x1216 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x1200 children: not-inline
+      BlockContainer <div> at (8,8) content-size 784x1200 children: inline
+        frag 0 from ImageBox start: 0, length: 0, rect: [8,808 400x400] baseline: 400
+        InlineNode <(anonymous)>
+          frag 0 from TextNode start: 0, length: 3, rect: [8,394 27.15625x18] baseline: 13.796875
+              "foo"
+          frag 1 from ImageBox start: 0, length: 0, rect: [35.15625,8 400x400] baseline: 400
+          frag 2 from TextNode start: 0, length: 3, rect: [435.15625,394 27.640625x18] baseline: 13.796875
+              "bar"
+          frag 0 from ImageBox start: 0, length: 0, rect: [8,408 400x400] baseline: 400
+          frag 1 from TextNode start: 0, length: 3, rect: [408,794 27.203125x18] baseline: 13.796875
+              "baz"
+          TextNode <#text>
+          ImageBox <(anonymous)> at (35.15625,8) content-size 400x400 children: not-inline
+          TextNode <#text>
+          ImageBox <(anonymous)> at (8,408) content-size 400x400 children: not-inline
+          TextNode <#text>
+        ImageBox <img> at (8,808) content-size 400x400 children: not-inline
+        TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1216]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x1216]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x1200]
+      PaintableWithLines (BlockContainer<DIV>) [8,8 784x1200]
+        PaintableWithLines (InlineNode(anonymous)) [8,394 454.796875x400]
+          TextPaintable (TextNode<#text>)
+          ImagePaintable (ImageBox(anonymous)) [35.15625,8 400x400]
+          TextPaintable (TextNode<#text>)
+          ImagePaintable (ImageBox(anonymous)) [8,408 400x400]
+          TextPaintable (TextNode<#text>)
+        PaintableWithLines (InlineNode(anonymous)) [8,408 427.203125x400]
+        ImagePaintable (ImageBox<IMG>) [8,808 400x400]
+
+SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
+ SC for BlockContainer<HTML> [0,0 800x1216] [children: 0] (z-index: auto)

Tests/LibWeb/Layout/expected/css-counters/basic.txt

@@ -6,40 +6,85 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
           frag 0 from TextNode start: 0, length: 5, rect: [36.8125,16 44.75x18] baseline: 13.796875
               "Never"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 5, rect: [8,16 28.8125x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [8,16 6.34375x18] baseline: 13.796875
-                "1.1: "
+                "1"
+            frag 1 from TextNode start: 0, length: 1, rect: [14.34375,16 4.34375x18] baseline: 13.796875
+                "."
+            frag 2 from TextNode start: 0, length: 1, rect: [18.6875,16 6.34375x18] baseline: 13.796875
+                "1"
+            frag 3 from TextNode start: 0, length: 2, rect: [25.03125,16 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
+            TextNode <#text>
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <p> at (8,50) content-size 784x18 children: inline
           frag 0 from TextNode start: 0, length: 5, rect: [39.28125,50 52.15625x18] baseline: 13.796875
               "Gonna"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 5, rect: [8,50 31.28125x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [8,50 6.34375x18] baseline: 13.796875
-                "1.2: "
+                "1"
+            frag 1 from TextNode start: 0, length: 1, rect: [14.34375,50 4.34375x18] baseline: 13.796875
+                "."
+            frag 2 from TextNode start: 0, length: 1, rect: [18.6875,50 8.8125x18] baseline: 13.796875
+                "2"
+            frag 3 from TextNode start: 0, length: 2, rect: [27.5,50 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
+            TextNode <#text>
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <p> at (8,84) content-size 784x18 children: inline
           frag 0 from TextNode start: 0, length: 4, rect: [39.5625,84 34.71875x18] baseline: 13.796875
               "Give"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 5, rect: [8,84 31.5625x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [8,84 6.34375x18] baseline: 13.796875
-                "1.3: "
+                "1"
+            frag 1 from TextNode start: 0, length: 1, rect: [14.34375,84 4.34375x18] baseline: 13.796875
+                "."
+            frag 2 from TextNode start: 0, length: 1, rect: [18.6875,84 9.09375x18] baseline: 13.796875
+                "3"
+            frag 3 from TextNode start: 0, length: 2, rect: [27.78125,84 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
+            TextNode <#text>
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <p> at (8,118) content-size 784x18 children: inline
           frag 0 from TextNode start: 0, length: 3, rect: [38.21875,118 31.21875x18] baseline: 13.796875
               "You"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 5, rect: [8,118 30.21875x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [8,118 6.34375x18] baseline: 13.796875
-                "1.4: "
+                "1"
+            frag 1 from TextNode start: 0, length: 1, rect: [14.34375,118 4.34375x18] baseline: 13.796875
+                "."
+            frag 2 from TextNode start: 0, length: 1, rect: [18.6875,118 7.75x18] baseline: 13.796875
+                "4"
+            frag 3 from TextNode start: 0, length: 2, rect: [26.4375,118 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
+            TextNode <#text>
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <p> at (8,152) content-size 784x18 children: inline
           frag 0 from TextNode start: 0, length: 2, rect: [38.921875,152 20.71875x18] baseline: 13.796875
               "Up"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 5, rect: [8,152 30.921875x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [8,152 6.34375x18] baseline: 13.796875
-                "1.5: "
+                "1"
+            frag 1 from TextNode start: 0, length: 1, rect: [14.34375,152 4.34375x18] baseline: 13.796875
+                "."
+            frag 2 from TextNode start: 0, length: 1, rect: [18.6875,152 8.453125x18] baseline: 13.796875
+                "5"
+            frag 3 from TextNode start: 0, length: 2, rect: [27.140625,152 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
+            TextNode <#text>
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
       BlockContainer <div> at (8,186) content-size 784x154 children: not-inline
@@ -47,40 +92,85 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
           frag 0 from TextNode start: 0, length: 5, rect: [39.28125,186 44.75x18] baseline: 13.796875
               "Never"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 5, rect: [8,186 31.28125x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [8,186 8.8125x18] baseline: 13.796875
-                "2.1: "
+                "2"
+            frag 1 from TextNode start: 0, length: 1, rect: [16.8125,186 4.34375x18] baseline: 13.796875
+                "."
+            frag 2 from TextNode start: 0, length: 1, rect: [21.15625,186 6.34375x18] baseline: 13.796875
+                "1"
+            frag 3 from TextNode start: 0, length: 2, rect: [27.5,186 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
+            TextNode <#text>
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <p> at (8,220) content-size 784x18 children: inline
           frag 0 from TextNode start: 0, length: 5, rect: [41.75,220 52.15625x18] baseline: 13.796875
               "Gonna"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 5, rect: [8,220 33.75x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [8,220 8.8125x18] baseline: 13.796875
-                "2.2: "
+                "2"
+            frag 1 from TextNode start: 0, length: 1, rect: [16.8125,220 4.34375x18] baseline: 13.796875
+                "."
+            frag 2 from TextNode start: 0, length: 1, rect: [21.15625,220 8.8125x18] baseline: 13.796875
+                "2"
+            frag 3 from TextNode start: 0, length: 2, rect: [29.96875,220 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
+            TextNode <#text>
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <p> at (8,254) content-size 784x18 children: inline
           frag 0 from TextNode start: 0, length: 3, rect: [42.03125,254 26.4375x18] baseline: 13.796875
               "Let"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 5, rect: [8,254 34.03125x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [8,254 8.8125x18] baseline: 13.796875
-                "2.3: "
+                "2"
+            frag 1 from TextNode start: 0, length: 1, rect: [16.8125,254 4.34375x18] baseline: 13.796875
+                "."
+            frag 2 from TextNode start: 0, length: 1, rect: [21.15625,254 9.09375x18] baseline: 13.796875
+                "3"
+            frag 3 from TextNode start: 0, length: 2, rect: [30.25,254 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
+            TextNode <#text>
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <p> at (8,288) content-size 784x18 children: inline
           frag 0 from TextNode start: 0, length: 3, rect: [40.6875,288 31.21875x18] baseline: 13.796875
               "You"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 5, rect: [8,288 32.6875x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [8,288 8.8125x18] baseline: 13.796875
-                "2.4: "
+                "2"
+            frag 1 from TextNode start: 0, length: 1, rect: [16.8125,288 4.34375x18] baseline: 13.796875
+                "."
+            frag 2 from TextNode start: 0, length: 1, rect: [21.15625,288 7.75x18] baseline: 13.796875
+                "4"
+            frag 3 from TextNode start: 0, length: 2, rect: [28.90625,288 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
+            TextNode <#text>
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <p> at (8,322) content-size 784x18 children: inline
           frag 0 from TextNode start: 0, length: 4, rect: [41.390625,322 42.328125x18] baseline: 13.796875
               "Down"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 5, rect: [8,322 33.390625x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [8,322 8.8125x18] baseline: 13.796875
-                "2.5: "
+                "2"
+            frag 1 from TextNode start: 0, length: 1, rect: [16.8125,322 4.34375x18] baseline: 13.796875
+                "."
+            frag 2 from TextNode start: 0, length: 1, rect: [21.15625,322 8.453125x18] baseline: 13.796875
+                "5"
+            frag 3 from TextNode start: 0, length: 2, rect: [29.609375,322 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
+            TextNode <#text>
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
       BlockContainer <(anonymous)> at (8,356) content-size 784x0 children: inline
@@ -94,43 +184,73 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
           PaintableWithLines (InlineNode(anonymous)) [8,16 28.8125x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<P>) [8,50 784x18]
           PaintableWithLines (InlineNode(anonymous)) [8,50 31.28125x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<P>) [8,84 784x18]
           PaintableWithLines (InlineNode(anonymous)) [8,84 31.5625x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<P>) [8,118 784x18]
           PaintableWithLines (InlineNode(anonymous)) [8,118 30.21875x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<P>) [8,152 784x18]
           PaintableWithLines (InlineNode(anonymous)) [8,152 30.921875x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer<DIV>) [8,186 784x154]
         PaintableWithLines (BlockContainer<P>) [8,186 784x18]
           PaintableWithLines (InlineNode(anonymous)) [8,186 31.28125x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<P>) [8,220 784x18]
           PaintableWithLines (InlineNode(anonymous)) [8,220 33.75x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<P>) [8,254 784x18]
           PaintableWithLines (InlineNode(anonymous)) [8,254 34.03125x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<P>) [8,288 784x18]
           PaintableWithLines (InlineNode(anonymous)) [8,288 32.6875x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<P>) [8,322 784x18]
           PaintableWithLines (InlineNode(anonymous)) [8,322 33.390625x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+            TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer(anonymous)) [8,356 784x0]
 
 SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)

Tests/LibWeb/Layout/expected/css-counters/counters-function.txt

@@ -8,8 +8,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
           frag 0 from TextNode start: 0, length: 1, rect: [42.125,8 14.265625x18] baseline: 13.796875
               "A"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 3, rect: [24,8 18.125x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [24,8 6.34375x18] baseline: 13.796875
-                "1: "
+                "1"
+            frag 1 from TextNode start: 0, length: 2, rect: [30.34375,8 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <(anonymous)> at (24,26) content-size 768x0 children: inline
@@ -18,8 +21,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
           frag 0 from TextNode start: 0, length: 1, rect: [44.59375,26 9.34375x18] baseline: 13.796875
               "B"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 3, rect: [24,26 20.59375x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [24,26 8.8125x18] baseline: 13.796875
-                "2: "
+                "2"
+            frag 1 from TextNode start: 0, length: 2, rect: [32.8125,26 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <(anonymous)> at (24,44) content-size 768x0 children: inline
@@ -28,8 +34,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
           frag 0 from TextNode start: 0, length: 1, rect: [44.875,44 10.3125x18] baseline: 13.796875
               "C"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 3, rect: [24,44 20.875x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [24,44 9.09375x18] baseline: 13.796875
-                "3: "
+                "3"
+            frag 1 from TextNode start: 0, length: 2, rect: [33.09375,44 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <(anonymous)> at (24,62) content-size 768x0 children: inline
@@ -37,8 +46,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
         BlockContainer <div.li> at (24,62) content-size 768x162 children: not-inline
           BlockContainer <(anonymous)> at (24,62) content-size 768x18 children: inline
             InlineNode <(anonymous)>
-              frag 0 from TextNode start: 0, length: 2, rect: [24,62 11.53125x18] baseline: 13.796875
+              frag 0 from TextNode start: 0, length: 1, rect: [24,62 7.75x18] baseline: 13.796875
-                  "4:"
+                  "4"
+              frag 1 from TextNode start: 0, length: 1, rect: [31.75,62 3.78125x18] baseline: 13.796875
+                  ":"
+              TextNode <#text>
               TextNode <#text>
             TextNode <#text>
           BlockContainer <div.ol> at (40,80) content-size 752x144 children: not-inline
@@ -48,8 +60,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
               frag 0 from TextNode start: 0, length: 1, rect: [70.21875,80 11.140625x18] baseline: 13.796875
                   "D"
               InlineNode <(anonymous)>
-                frag 0 from TextNode start: 0, length: 5, rect: [40,80 30.21875x18] baseline: 13.796875
+                frag 0 from TextNode start: 0, length: 3, rect: [40,80 18.4375x18] baseline: 13.796875
-                    "4.1: "
+                    "4.1"
+                frag 1 from TextNode start: 0, length: 2, rect: [58.4375,80 11.78125x18] baseline: 13.796875
+                    ": "
+                TextNode <#text>
                 TextNode <#text>
               TextNode <#text>
             BlockContainer <(anonymous)> at (40,98) content-size 752x0 children: inline
@@ -58,8 +73,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
               frag 0 from TextNode start: 0, length: 1, rect: [72.6875,98 11.859375x18] baseline: 13.796875
                   "E"
               InlineNode <(anonymous)>
-                frag 0 from TextNode start: 0, length: 5, rect: [40,98 32.6875x18] baseline: 13.796875
+                frag 0 from TextNode start: 0, length: 3, rect: [40,98 20.90625x18] baseline: 13.796875
-                    "4.2: "
+                    "4.2"
+                frag 1 from TextNode start: 0, length: 2, rect: [60.90625,98 11.78125x18] baseline: 13.796875
+                    ": "
+                TextNode <#text>
                 TextNode <#text>
               TextNode <#text>
             BlockContainer <(anonymous)> at (40,116) content-size 752x0 children: inline
@@ -67,8 +85,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
             BlockContainer <div.li> at (40,116) content-size 752x72 children: not-inline
               BlockContainer <(anonymous)> at (40,116) content-size 752x18 children: inline
                 InlineNode <(anonymous)>
-                  frag 0 from TextNode start: 0, length: 4, rect: [40,116 24.96875x18] baseline: 13.796875
+                  frag 0 from TextNode start: 0, length: 3, rect: [40,116 21.1875x18] baseline: 13.796875
-                      "4.3:"
+                      "4.3"
+                  frag 1 from TextNode start: 0, length: 1, rect: [61.1875,116 3.78125x18] baseline: 13.796875
+                      ":"
+                  TextNode <#text>
                   TextNode <#text>
                 TextNode <#text>
               BlockContainer <div.ol> at (56,134) content-size 736x54 children: not-inline
@@ -78,8 +99,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
                   frag 0 from TextNode start: 0, length: 1, rect: [99.65625,134 12.546875x18] baseline: 13.796875
                       "F"
                   InlineNode <(anonymous)>
-                    frag 0 from TextNode start: 0, length: 7, rect: [56,134 43.65625x18] baseline: 13.796875
+                    frag 0 from TextNode start: 0, length: 5, rect: [56,134 31.875x18] baseline: 13.796875
-                        "4.3.1: "
+                        "4.3.1"
+                    frag 1 from TextNode start: 0, length: 2, rect: [87.875,134 11.78125x18] baseline: 13.796875
+                        ": "
+                    TextNode <#text>
                     TextNode <#text>
                   TextNode <#text>
                 BlockContainer <(anonymous)> at (56,152) content-size 736x0 children: inline
@@ -88,8 +112,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
                   frag 0 from TextNode start: 0, length: 1, rect: [102.125,152 13.234375x18] baseline: 13.796875
                       "G"
                   InlineNode <(anonymous)>
-                    frag 0 from TextNode start: 0, length: 7, rect: [56,152 46.125x18] baseline: 13.796875
+                    frag 0 from TextNode start: 0, length: 5, rect: [56,152 34.34375x18] baseline: 13.796875
-                        "4.3.2: "
+                        "4.3.2"
+                    frag 1 from TextNode start: 0, length: 2, rect: [90.34375,152 11.78125x18] baseline: 13.796875
+                        ": "
+                    TextNode <#text>
                     TextNode <#text>
                   TextNode <#text>
                 BlockContainer <(anonymous)> at (56,170) content-size 736x0 children: inline
@@ -98,8 +125,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
                   frag 0 from TextNode start: 0, length: 1, rect: [102.40625,170 12.234375x18] baseline: 13.796875
                       "H"
                   InlineNode <(anonymous)>
-                    frag 0 from TextNode start: 0, length: 7, rect: [56,170 46.40625x18] baseline: 13.796875
+                    frag 0 from TextNode start: 0, length: 5, rect: [56,170 34.625x18] baseline: 13.796875
-                        "4.3.3: "
+                        "4.3.3"
+                    frag 1 from TextNode start: 0, length: 2, rect: [90.625,170 11.78125x18] baseline: 13.796875
+                        ": "
+                    TextNode <#text>
                     TextNode <#text>
                   TextNode <#text>
                 BlockContainer <(anonymous)> at (56,188) content-size 736x0 children: inline
@@ -112,8 +142,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
               frag 0 from TextNode start: 0, length: 1, rect: [71.625,188 4.59375x18] baseline: 13.796875
                   "I"
               InlineNode <(anonymous)>
-                frag 0 from TextNode start: 0, length: 5, rect: [40,188 31.625x18] baseline: 13.796875
+                frag 0 from TextNode start: 0, length: 3, rect: [40,188 19.84375x18] baseline: 13.796875
-                    "4.4: "
+                    "4.4"
+                frag 1 from TextNode start: 0, length: 2, rect: [59.84375,188 11.78125x18] baseline: 13.796875
+                    ": "
+                TextNode <#text>
                 TextNode <#text>
               TextNode <#text>
             BlockContainer <(anonymous)> at (40,206) content-size 752x0 children: inline
@@ -122,8 +155,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
               frag 0 from TextNode start: 0, length: 1, rect: [72.328125,206 8.90625x18] baseline: 13.796875
                   "J"
               InlineNode <(anonymous)>
-                frag 0 from TextNode start: 0, length: 5, rect: [40,206 32.328125x18] baseline: 13.796875
+                frag 0 from TextNode start: 0, length: 3, rect: [40,206 20.546875x18] baseline: 13.796875
-                    "4.5: "
+                    "4.5"
+                frag 1 from TextNode start: 0, length: 2, rect: [60.546875,206 11.78125x18] baseline: 13.796875
+                    ": "
+                TextNode <#text>
                 TextNode <#text>
               TextNode <#text>
             BlockContainer <(anonymous)> at (40,224) content-size 752x0 children: inline
@@ -136,8 +172,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
           frag 0 from TextNode start: 0, length: 1, rect: [44.234375,224 9.8125x18] baseline: 13.796875
               "K"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 3, rect: [24,224 20.234375x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [24,224 8.453125x18] baseline: 13.796875
-                "5: "
+                "5"
+            frag 1 from TextNode start: 0, length: 2, rect: [32.453125,224 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <(anonymous)> at (24,242) content-size 768x0 children: inline
@@ -146,8 +185,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
           frag 0 from TextNode start: 0, length: 1, rect: [44.515625,242 10.859375x18] baseline: 13.796875
               "L"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 3, rect: [24,242 20.515625x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [24,242 8.734375x18] baseline: 13.796875
-                "6: "
+                "6"
+            frag 1 from TextNode start: 0, length: 2, rect: [32.734375,242 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <(anonymous)> at (24,260) content-size 768x0 children: inline
@@ -156,8 +198,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
           frag 0 from TextNode start: 0, length: 1, rect: [44.5,260 11.765625x18] baseline: 13.796875
               "M"
           InlineNode <(anonymous)>
-            frag 0 from TextNode start: 0, length: 3, rect: [24,260 20.5x18] baseline: 13.796875
+            frag 0 from TextNode start: 0, length: 1, rect: [24,260 8.71875x18] baseline: 13.796875
-                "7: "
+                "7"
+            frag 1 from TextNode start: 0, length: 2, rect: [32.71875,260 11.78125x18] baseline: 13.796875
+                ": "
+            TextNode <#text>
             TextNode <#text>
           TextNode <#text>
         BlockContainer <(anonymous)> at (24,278) content-size 768x0 children: inline
@@ -174,53 +219,63 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
           PaintableWithLines (InlineNode(anonymous)) [24,8 18.125x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer(anonymous)) [24,26 768x0]
         PaintableWithLines (BlockContainer<DIV>.li) [24,26 768x18]
           PaintableWithLines (InlineNode(anonymous)) [24,26 20.59375x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer(anonymous)) [24,44 768x0]
         PaintableWithLines (BlockContainer<DIV>.li) [24,44 768x18]
           PaintableWithLines (InlineNode(anonymous)) [24,44 20.875x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer(anonymous)) [24,62 768x0]
         PaintableWithLines (BlockContainer<DIV>.li) [24,62 768x162]
           PaintableWithLines (BlockContainer(anonymous)) [24,62 768x18]
             PaintableWithLines (InlineNode(anonymous)) [24,62 11.53125x18]
               TextPaintable (TextNode<#text>)
+              TextPaintable (TextNode<#text>)
           PaintableWithLines (BlockContainer<DIV>.ol) [24,80 768x144]
             PaintableWithLines (BlockContainer(anonymous)) [40,80 752x0]
             PaintableWithLines (BlockContainer<DIV>.li) [40,80 752x18]
               PaintableWithLines (InlineNode(anonymous)) [40,80 30.21875x18]
                 TextPaintable (TextNode<#text>)
                 TextPaintable (TextNode<#text>)
+              TextPaintable (TextNode<#text>)
             PaintableWithLines (BlockContainer(anonymous)) [40,98 752x0]
             PaintableWithLines (BlockContainer<DIV>.li) [40,98 752x18]
               PaintableWithLines (InlineNode(anonymous)) [40,98 32.6875x18]
                 TextPaintable (TextNode<#text>)
                 TextPaintable (TextNode<#text>)
+              TextPaintable (TextNode<#text>)
             PaintableWithLines (BlockContainer(anonymous)) [40,116 752x0]
             PaintableWithLines (BlockContainer<DIV>.li) [40,116 752x72]
               PaintableWithLines (BlockContainer(anonymous)) [40,116 752x18]
                 PaintableWithLines (InlineNode(anonymous)) [40,116 24.96875x18]
                   TextPaintable (TextNode<#text>)
+                  TextPaintable (TextNode<#text>)
               PaintableWithLines (BlockContainer<DIV>.ol) [40,134 752x54]
                 PaintableWithLines (BlockContainer(anonymous)) [56,134 736x0]
                 PaintableWithLines (BlockContainer<DIV>.li) [56,134 736x18]
                   PaintableWithLines (InlineNode(anonymous)) [56,134 43.65625x18]
                     TextPaintable (TextNode<#text>)
                     TextPaintable (TextNode<#text>)
+                  TextPaintable (TextNode<#text>)
                 PaintableWithLines (BlockContainer(anonymous)) [56,152 736x0]
                 PaintableWithLines (BlockContainer<DIV>.li) [56,152 736x18]
                   PaintableWithLines (InlineNode(anonymous)) [56,152 46.125x18]
                     TextPaintable (TextNode<#text>)
                     TextPaintable (TextNode<#text>)
+                  TextPaintable (TextNode<#text>)
                 PaintableWithLines (BlockContainer(anonymous)) [56,170 736x0]
                 PaintableWithLines (BlockContainer<DIV>.li) [56,170 736x18]
                   PaintableWithLines (InlineNode(anonymous)) [56,170 46.40625x18]
                     TextPaintable (TextNode<#text>)
                     TextPaintable (TextNode<#text>)
+                  TextPaintable (TextNode<#text>)
                 PaintableWithLines (BlockContainer(anonymous)) [56,188 736x0]
               PaintableWithLines (BlockContainer(anonymous)) [40,188 752x0]
             PaintableWithLines (BlockContainer(anonymous)) [40,188 752x0]
@@ -228,11 +283,13 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
               PaintableWithLines (InlineNode(anonymous)) [40,188 31.625x18]
                 TextPaintable (TextNode<#text>)
                 TextPaintable (TextNode<#text>)
+              TextPaintable (TextNode<#text>)
             PaintableWithLines (BlockContainer(anonymous)) [40,206 752x0]
             PaintableWithLines (BlockContainer<DIV>.li) [40,206 752x18]
               PaintableWithLines (InlineNode(anonymous)) [40,206 32.328125x18]
                 TextPaintable (TextNode<#text>)
                 TextPaintable (TextNode<#text>)
+              TextPaintable (TextNode<#text>)
             PaintableWithLines (BlockContainer(anonymous)) [40,224 752x0]
           PaintableWithLines (BlockContainer(anonymous)) [24,224 768x0]
         PaintableWithLines (BlockContainer(anonymous)) [24,224 768x0]
@@ -240,16 +297,19 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
           PaintableWithLines (InlineNode(anonymous)) [24,224 20.234375x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer(anonymous)) [24,242 768x0]
         PaintableWithLines (BlockContainer<DIV>.li) [24,242 768x18]
           PaintableWithLines (InlineNode(anonymous)) [24,242 20.515625x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer(anonymous)) [24,260 768x0]
         PaintableWithLines (BlockContainer<DIV>.li) [24,260 768x18]
           PaintableWithLines (InlineNode(anonymous)) [24,260 20.5x18]
             TextPaintable (TextNode<#text>)
             TextPaintable (TextNode<#text>)
+          TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer(anonymous)) [24,278 768x0]
       PaintableWithLines (BlockContainer(anonymous)) [8,278 784x0]
 

Tests/LibWeb/Layout/expected/css-counters/hidden-elements.txt

@@ -5,40 +5,55 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
         frag 0 from TextNode start: 0, length: 1, rect: [26.125,16 14.265625x18] baseline: 13.796875
             "A"
         InlineNode <(anonymous)>
-          frag 0 from TextNode start: 0, length: 3, rect: [8,16 18.125x18] baseline: 13.796875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,16 6.34375x18] baseline: 13.796875
-              "1: "
+              "1"
+          frag 1 from TextNode start: 0, length: 2, rect: [14.34375,16 11.78125x18] baseline: 13.796875
+              ": "
+          TextNode <#text>
           TextNode <#text>
         TextNode <#text>
       BlockContainer <p> at (8,50) content-size 784x18 children: inline
         frag 0 from TextNode start: 0, length: 1, rect: [28.59375,50 9.34375x18] baseline: 13.796875
             "B"
         InlineNode <(anonymous)>
-          frag 0 from TextNode start: 0, length: 3, rect: [8,50 20.59375x18] baseline: 13.796875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,50 8.8125x18] baseline: 13.796875
-              "2: "
+              "2"
+          frag 1 from TextNode start: 0, length: 2, rect: [16.8125,50 11.78125x18] baseline: 13.796875
+              ": "
+          TextNode <#text>
           TextNode <#text>
         TextNode <#text>
       BlockContainer <p> at (8,84) content-size 784x18 children: inline
         frag 0 from TextNode start: 0, length: 1, rect: [28.875,84 10.3125x18] baseline: 13.796875
             "C"
         InlineNode <(anonymous)>
-          frag 0 from TextNode start: 0, length: 3, rect: [8,84 20.875x18] baseline: 13.796875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,84 9.09375x18] baseline: 13.796875
-              "3: "
+              "3"
+          frag 1 from TextNode start: 0, length: 2, rect: [17.09375,84 11.78125x18] baseline: 13.796875
+              ": "
+          TextNode <#text>
           TextNode <#text>
         TextNode <#text>
       BlockContainer <p> at (8,118) content-size 784x18 children: inline
         frag 0 from TextNode start: 0, length: 1, rect: [27.53125,118 11.140625x18] baseline: 13.796875
             "D"
         InlineNode <(anonymous)>
-          frag 0 from TextNode start: 0, length: 3, rect: [8,118 19.53125x18] baseline: 13.796875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,118 7.75x18] baseline: 13.796875
-              "4: "
+              "4"
+          frag 1 from TextNode start: 0, length: 2, rect: [15.75,118 11.78125x18] baseline: 13.796875
+              ": "
+          TextNode <#text>
           TextNode <#text>
         TextNode <#text>
       BlockContainer <p> at (8,152) content-size 784x18 children: inline
         frag 0 from TextNode start: 0, length: 1, rect: [28.234375,152 11.859375x18] baseline: 13.796875
             "E"
         InlineNode <(anonymous)>
-          frag 0 from TextNode start: 0, length: 3, rect: [8,152 20.234375x18] baseline: 13.796875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,152 8.453125x18] baseline: 13.796875
-              "5: "
+              "5"
+          frag 1 from TextNode start: 0, length: 2, rect: [16.453125,152 11.78125x18] baseline: 13.796875
+              ": "
+          TextNode <#text>
           TextNode <#text>
         TextNode <#text>
 
@@ -49,22 +64,27 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
         PaintableWithLines (InlineNode(anonymous)) [8,16 18.125x18]
           TextPaintable (TextNode<#text>)
           TextPaintable (TextNode<#text>)
+        TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer<P>) [8,50 784x18]
         PaintableWithLines (InlineNode(anonymous)) [8,50 20.59375x18]
           TextPaintable (TextNode<#text>)
           TextPaintable (TextNode<#text>)
+        TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer<P>) [8,84 784x18]
         PaintableWithLines (InlineNode(anonymous)) [8,84 20.875x18]
           TextPaintable (TextNode<#text>)
           TextPaintable (TextNode<#text>)
+        TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer<P>) [8,118 784x18]
         PaintableWithLines (InlineNode(anonymous)) [8,118 19.53125x18]
           TextPaintable (TextNode<#text>)
           TextPaintable (TextNode<#text>)
+        TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer<P>) [8,152 784x18]
         PaintableWithLines (InlineNode(anonymous)) [8,152 20.234375x18]
           TextPaintable (TextNode<#text>)
           TextPaintable (TextNode<#text>)
+        TextPaintable (TextNode<#text>)
 
 SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
  SC for BlockContainer<HTML> [0,0 800x186] [children: 0] (z-index: auto)

Tests/LibWeb/Layout/expected/css/counters-on-pseudo-elements.txt

@@ -5,24 +5,33 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
         frag 0 from TextNode start: 0, length: 1, rect: [26.6875,8 9.34375x18] baseline: 13.796875
             "a"
         InlineNode <(anonymous)>
-          frag 0 from TextNode start: 0, length: 3, rect: [8,8 18.6875x18] baseline: 13.796875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x18] baseline: 13.796875
-              "1. "
+              "1"
+          frag 1 from TextNode start: 0, length: 2, rect: [14.34375,8 12.34375x18] baseline: 13.796875
+              ". "
+          TextNode <#text>
           TextNode <#text>
         TextNode <#text>
       BlockContainer <div#b> at (8,26) content-size 784x18 children: inline
         frag 0 from TextNode start: 0, length: 1, rect: [29.15625,26 9.46875x18] baseline: 13.796875
             "b"
         InlineNode <(anonymous)>
-          frag 0 from TextNode start: 0, length: 3, rect: [8,26 21.15625x18] baseline: 13.796875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,26 8.8125x18] baseline: 13.796875
-              "2. "
+              "2"
+          frag 1 from TextNode start: 0, length: 2, rect: [16.8125,26 12.34375x18] baseline: 13.796875
+              ". "
+          TextNode <#text>
           TextNode <#text>
         TextNode <#text>
       BlockContainer <div#c> at (8,44) content-size 784x18 children: inline
         frag 0 from TextNode start: 0, length: 1, rect: [29.4375,44 8.890625x18] baseline: 13.796875
             "c"
         InlineNode <(anonymous)>
-          frag 0 from TextNode start: 0, length: 3, rect: [8,44 21.4375x18] baseline: 13.796875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,44 9.09375x18] baseline: 13.796875
-              "3. "
+              "3"
+          frag 1 from TextNode start: 0, length: 2, rect: [17.09375,44 12.34375x18] baseline: 13.796875
+              ". "
+          TextNode <#text>
           TextNode <#text>
         TextNode <#text>
       BlockContainer <(anonymous)> at (8,62) content-size 784x0 children: inline
@@ -35,14 +44,17 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
         PaintableWithLines (InlineNode(anonymous)) [8,8 18.6875x18]
           TextPaintable (TextNode<#text>)
           TextPaintable (TextNode<#text>)
+        TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer<DIV>#b) [8,26 784x18]
         PaintableWithLines (InlineNode(anonymous)) [8,26 21.15625x18]
           TextPaintable (TextNode<#text>)
           TextPaintable (TextNode<#text>)
+        TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer<DIV>#c) [8,44 784x18]
         PaintableWithLines (InlineNode(anonymous)) [8,44 21.4375x18]
           TextPaintable (TextNode<#text>)
           TextPaintable (TextNode<#text>)
+        TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer(anonymous)) [8,62 784x0]
 
 SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)

Tests/LibWeb/Layout/input/content-image-simple.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html><style>
+    div::before {
+        content: "foo" url("400.png") "bar" url("400.png") "baz";
+    }
+</style><body><div><img src="400.png">

Tests/LibWeb/Text/expected/wpt-import/css/cssom/serialize-values.txt

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 687 tests
 
-659 Pass
+661 Pass
-28 Fail
+26 Fail
 Pass	background-attachment: scroll
 Pass	background-attachment: fixed
 Pass	background-attachment: inherit
@@ -322,8 +322,8 @@ Pass	content: normal
 Pass	content: none
 Pass	content: "string"
 Pass	content: 'string'
-Fail	content: url("http://localhost/")
+Pass	content: url("http://localhost/")
-Fail	content: url(http://localhost/)
+Pass	content: url(http://localhost/)
 Pass	content: counter(par-num)
 Pass	content: counter(par-num, decimal)
 Pass	content: counter(par-num, upper-roman)