LibWeb: Convert images to common AbstractImageStyleValue base

This commit moves both the ImageStyleValue and LinearGradientStyleValue
to a common base class of AbstractImageStyleValue. This abstracts
getting the natural_width/height, loading/resolving, and painting
the image.

Now for 'free' you get:

 - Linear gradients working with the various background sizing/repeat
   properties.
 - Linear gradients working as list-markers :^) -- best feature ever!

P.s. This commit is a little large as it's tricky to make this change
incrementally without breaking things.

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -63,7 +63,7 @@ public:
 };
 
 struct BackgroundLayerData {
-    RefPtr<CSS::StyleValue> background_image { nullptr };
+    RefPtr<CSS::AbstractImageStyleValue> background_image { nullptr };
     CSS::BackgroundAttachment attachment { CSS::BackgroundAttachment::Scroll };
     CSS::BackgroundBox origin { CSS::BackgroundBox::PaddingBox };
     CSS::BackgroundBox clip { CSS::BackgroundBox::BorderBox };

Userland/Libraries/LibWeb/CSS/StyleValue.cpp

@@ -15,6 +15,7 @@
 #include <LibWeb/Loader/LoadRequest.h>
 #include <LibWeb/Loader/ResourceLoader.h>
 #include <LibWeb/Page/Page.h>
+#include <LibWeb/Painting/GradientPainting.h>
 
 namespace Web::CSS {
 
@@ -23,6 +24,12 @@ StyleValue::StyleValue(Type type)
 {
 }
 
+AbstractImageStyleValue const& StyleValue::as_abstract_image() const
+{
+    VERIFY(is_abstract_image());
+    return static_cast<AbstractImageStyleValue const&>(*this);
+}
+
 AngleStyleValue const& StyleValue::as_angle() const
 {
     VERIFY(is_angle());
@@ -1399,12 +1406,12 @@ Color IdentifierStyleValue::to_color(Layout::NodeWithStyle const& node) const
 }
 
 ImageStyleValue::ImageStyleValue(AK::URL const& url)
-    : StyleValue(Type::Image)
+    : AbstractImageStyleValue(Type::Image)
     , m_url(url)
 {
 }
 
-void ImageStyleValue::load_bitmap(DOM::Document& document)
+void ImageStyleValue::load_any_resources(DOM::Document& document)
 {
     if (m_bitmap)
         return;
@@ -1436,6 +1443,26 @@ bool ImageStyleValue::equals(StyleValue const& other) const
     return m_url == other.as_image().m_url;
 }
 
+Optional<int> ImageStyleValue::natural_width() const
+{
+    if (m_bitmap)
+        return m_bitmap->width();
+    return {};
+}
+
+Optional<int> ImageStyleValue::natural_height() const
+{
+    if (m_bitmap)
+        return m_bitmap->height();
+    return {};
+}
+
+void ImageStyleValue::paint(PaintContext& context, Gfx::IntRect const& dest_rect) const
+{
+    if (m_bitmap)
+        context.painter().draw_scaled_bitmap(dest_rect, *m_bitmap, m_bitmap->rect(), 1.0f, Gfx::Painter::ScalingMode::BilinearBlend);
+}
+
 String LinearGradientStyleValue::to_string() const
 {
     StringBuilder builder;
@@ -1537,10 +1564,10 @@ bool LinearGradientStyleValue::equals(StyleValue const& other_) const
     return true;
 }
 
-float LinearGradientStyleValue::angle_degrees(Gfx::FloatRect const& gradient_rect) const
+float LinearGradientStyleValue::angle_degrees(Gfx::FloatSize const& gradient_size) const
 {
     auto corner_angle_degrees = [&] {
-        return static_cast<float>(atan2(gradient_rect.height(), gradient_rect.width())) * 180 / AK::Pi<float>;
+        return static_cast<float>(atan2(gradient_size.height(), gradient_size.width())) * 180 / AK::Pi<float>;
     };
     return m_direction.visit(
         [&](SideOrCorner side_or_corner) {
@@ -1576,6 +1603,17 @@ float LinearGradientStyleValue::angle_degrees(Gfx::FloatRect const& gradient_rec
         });
 }
 
+void LinearGradientStyleValue::resolve_for_size(Layout::Node const& node, Gfx::FloatSize const& size) const
+{
+    m_resolved_data = Painting::resolve_linear_gradient_data(node, size, *this);
+}
+
+void LinearGradientStyleValue::paint(PaintContext& context, Gfx::IntRect const& dest_rect) const
+{
+    VERIFY(m_resolved_data.has_value());
+    Painting::paint_linear_gradient(context, dest_rect, *m_resolved_data);
+}
+
 bool InheritStyleValue::equals(StyleValue const& other) const
 {
     return type() == other.type();

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -9,6 +9,7 @@
 #pragma once
 
 #include <AK/Function.h>
+#include <AK/GenericShorthands.h>
 #include <AK/NonnullOwnPtr.h>
 #include <AK/NonnullOwnPtrVector.h>
 #include <AK/NonnullRefPtrVector.h>
@@ -38,6 +39,7 @@
 #include <LibWeb/CSS/ValueID.h>
 #include <LibWeb/Forward.h>
 #include <LibWeb/Loader/ImageResource.h>
+#include <LibWeb/Painting/GradientPainting.h>
 
 namespace Web::CSS {
 
@@ -153,6 +155,7 @@ public:
 
     Type type() const { return m_type; }
 
+    bool is_abstract_image() const { return AK::first_is_one_of(type(), Type::Image, Type::LinearGradient); }
     bool is_angle() const { return type() == Type::Angle; }
     bool is_background() const { return type() == Type::Background; }
     bool is_background_repeat() const { return type() == Type::BackgroundRepeat; }
@@ -191,6 +194,7 @@ public:
 
     bool is_builtin() const { return is_inherit() || is_initial() || is_unset(); }
 
+    AbstractImageStyleValue const& as_abstract_image() const;
     AngleStyleValue const& as_angle() const;
     BackgroundStyleValue const& as_background() const;
     BackgroundRepeatStyleValue const& as_background_repeat() const;
@@ -227,6 +231,7 @@ public:
     UnsetStyleValue const& as_unset() const;
     StyleValueList const& as_value_list() const;
 
+    AbstractImageStyleValue& as_abstract_image() { return const_cast<AbstractImageStyleValue&>(const_cast<StyleValue const&>(*this).as_abstract_image()); }
     AngleStyleValue& as_angle() { return const_cast<AngleStyleValue&>(const_cast<StyleValue const&>(*this).as_angle()); }
     BackgroundStyleValue& as_background() { return const_cast<BackgroundStyleValue&>(const_cast<StyleValue const&>(*this).as_background()); }
     BackgroundRepeatStyleValue& as_background_repeat() { return const_cast<BackgroundRepeatStyleValue&>(const_cast<StyleValue const&>(*this).as_background_repeat()); }
@@ -919,8 +924,22 @@ private:
     CSS::ValueID m_id { CSS::ValueID::Invalid };
 };
 
+class AbstractImageStyleValue : public StyleValue {
+public:
+    using StyleValue::StyleValue;
+
+    virtual Optional<int> natural_width() const { return {}; }
+    virtual Optional<int> natural_height() const { return {}; }
+
+    virtual void load_any_resources(DOM::Document&) {};
+    virtual void resolve_for_size(Layout::Node const&, Gfx::FloatSize const&) const {};
+
+    virtual bool is_paintable() const = 0;
+    virtual void paint(PaintContext& context, Gfx::IntRect const& dest_rect) const = 0;
+};
+
 class ImageStyleValue final
-    : public StyleValue
+    : public AbstractImageStyleValue
     , public ImageResourceClient {
 public:
     static NonnullRefPtr<ImageStyleValue> create(AK::URL const& url) { return adopt_ref(*new ImageStyleValue(url)); }
@@ -929,9 +948,16 @@ public:
     virtual String to_string() const override;
     virtual bool equals(StyleValue const& other) const override;
 
-    void load_bitmap(DOM::Document& document);
+    virtual void load_any_resources(DOM::Document&) override;
+
     Gfx::Bitmap const* bitmap() const { return m_bitmap; }
 
+    Optional<int> natural_width() const override;
+    Optional<int> natural_height() const override;
+
+    bool is_paintable() const override { return !m_bitmap.is_null(); }
+    void paint(PaintContext& context, Gfx::IntRect const& dest_rect) const override;
+
 private:
     ImageStyleValue(AK::URL const&);
 
@@ -943,7 +969,7 @@ private:
     RefPtr<Gfx::Bitmap> m_bitmap;
 };
 
-class LinearGradientStyleValue final : public StyleValue {
+class LinearGradientStyleValue final : public AbstractImageStyleValue {
 public:
     using GradientDirection = Variant<Angle, SideOrCorner>;
 
@@ -967,11 +993,16 @@ public:
         return m_color_stop_list;
     }
 
-    float angle_degrees(Gfx::FloatRect const& gradient_rect) const;
+    float angle_degrees(Gfx::FloatSize const& gradient_rect) const;
+
+    void resolve_for_size(Layout::Node const&, Gfx::FloatSize const&) const override;
+
+    bool is_paintable() const override { return true; }
+    void paint(PaintContext& context, Gfx::IntRect const& dest_rect) const override;
 
 private:
     LinearGradientStyleValue(GradientDirection direction, Vector<ColorStopListElement> color_stop_list, GradientType type)
-        : StyleValue(Type::LinearGradient)
+        : AbstractImageStyleValue(Type::LinearGradient)
         , m_direction(direction)
         , m_color_stop_list(move(color_stop_list))
         , m_gradient_type(type)
@@ -981,6 +1012,8 @@ private:
     GradientDirection m_direction;
     Vector<ColorStopListElement> m_color_stop_list;
     GradientType m_gradient_type;
+
+    mutable Optional<Painting::LinearGradientData> m_resolved_data;
 };
 
 class InheritStyleValue final : public StyleValue {

Userland/Libraries/LibWeb/Forward.h

@@ -23,6 +23,7 @@ class SubtleCrypto;
 }
 
 namespace Web::CSS {
+class AbstractImageStyleValue;
 class Angle;
 class AnglePercentage;
 class AngleStyleValue;
@@ -339,6 +340,7 @@ class StackingContext;
 class TextPaintable;
 struct BorderRadiusData;
 struct BorderRadiiData;
+struct LinearGradientData;
 }
 
 namespace Web::RequestIdleCallback {

Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp

@@ -765,9 +765,9 @@ void BlockFormattingContext::layout_list_item_marker(ListItemBox const& list_ite
 
     int image_width = 0;
     int image_height = 0;
-    if (auto const* list_style_image = marker.list_style_image_bitmap()) {
-        image_width = list_style_image->rect().width();
-        image_height = list_style_image->rect().height();
+    if (auto const* list_style_image = marker.list_style_image()) {
+        image_width = list_style_image->natural_width().value_or(0);
+        image_height = list_style_image->natural_height().value_or(0);
     }
 
     int default_marker_width = max(4, marker.font().glyph_height() - 4);

Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp

@@ -51,11 +51,6 @@ ListItemMarkerBox::ListItemMarkerBox(DOM::Document& document, CSS::ListStyleType
 
 ListItemMarkerBox::~ListItemMarkerBox() = default;
 
-Gfx::Bitmap const* ListItemMarkerBox::list_style_image_bitmap() const
-{
-    return list_style_image() ? list_style_image()->bitmap() : nullptr;
-}
-
 RefPtr<Painting::Paintable> ListItemMarkerBox::create_paintable() const
 {
     return Painting::MarkerPaintable::create(*this);

Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.h

@@ -16,7 +16,6 @@ public:
     explicit ListItemMarkerBox(DOM::Document&, CSS::ListStyleType, size_t index, NonnullRefPtr<CSS::StyleProperties>);
     virtual ~ListItemMarkerBox() override;
 
-    Gfx::Bitmap const* list_style_image_bitmap() const;
     String const& text() const { return m_text; }
 
     virtual RefPtr<Painting::Paintable> create_paintable() const override;

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -248,11 +248,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
             CSS::BackgroundLayerData layer;
 
             if (auto image_value = value_for_layer(images, layer_index); image_value) {
-                if (image_value->is_image()) {
-                    image_value->as_image().load_bitmap(document());
-                    layer.background_image = image_value;
-                } else if (image_value->is_linear_gradient()) {
-                    layer.background_image = image_value;
+                if (image_value->is_abstract_image()) {
+                    layer.background_image = image_value->as_abstract_image();
+                    layer.background_image->load_any_resources(document());
                 }
             }
 
@@ -461,9 +459,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
         computed_values.set_list_style_type(list_style_type.value());
 
     auto list_style_image = computed_style.property(CSS::PropertyID::ListStyleImage);
-    if (list_style_image->is_image()) {
-        m_list_style_image = list_style_image->as_image();
-        m_list_style_image->load_bitmap(document());
+    if (list_style_image->is_abstract_image()) {
+        m_list_style_image = list_style_image->as_abstract_image();
+        m_list_style_image->load_any_resources(document());
     }
 
     computed_values.set_color(computed_style.color_or_fallback(CSS::PropertyID::Color, *this, CSS::InitialValues::color()));

Userland/Libraries/LibWeb/Layout/Node.h

@@ -166,7 +166,7 @@ public:
     Gfx::Font const& font() const { return *m_font; }
     float line_height() const { return m_line_height; }
     Vector<CSS::BackgroundLayerData> const& background_layers() const { return computed_values().background_layers(); }
-    const CSS::ImageStyleValue* list_style_image() const { return m_list_style_image; }
+    const CSS::AbstractImageStyleValue* list_style_image() const { return m_list_style_image; }
 
     NonnullRefPtr<NodeWithStyle> create_anonymous_wrapper() const;
 
@@ -180,7 +180,7 @@ private:
     CSS::ComputedValues m_computed_values;
     RefPtr<Gfx::Font> m_font;
     float m_line_height { 0 };
-    RefPtr<CSS::ImageStyleValue> m_list_style_image;
+    RefPtr<CSS::AbstractImageStyleValue> m_list_style_image;
 };
 
 class NodeWithStyleAndBoxModelMetrics : public NodeWithStyle {

Userland/Libraries/LibWeb/Painting/BackgroundPainting.cpp

@@ -62,9 +62,7 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
         color_box = get_box(background_layers->last().clip);
 
     auto layer_is_paintable = [&](auto& layer) {
-        return (layer.background_image
-            && ((layer.background_image->is_image() && layer.background_image->as_image().bitmap())
-                || layer.background_image->is_linear_gradient()));
+        return layer.background_image && layer.background_image->is_paintable();
     };
 
     bool has_paintable_layers = false;
@@ -93,19 +91,12 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
 
         // Clip
         auto clip_box = get_box(layer.clip);
+
         auto clip_rect = clip_box.rect.to_rounded<int>();
         painter.add_clip_rect(clip_rect);
         ScopedCornerRadiusClip corner_clip { painter, clip_rect, clip_box.radii };
 
-        if (layer.background_image->is_linear_gradient()) {
-            // FIXME: Support sizing and positioning rules with gradients.
-            auto& linear_gradient = layer.background_image->as_linear_gradient();
-            auto data = resolve_linear_gradient_data(layout_node, border_box.rect, linear_gradient);
-            paint_linear_gradient(context, border_box.rect.to_rounded<int>(), data);
-            continue;
-        }
-
-        auto& image = *layer.background_image->as_image().bitmap();
+        auto& image = *layer.background_image;
         Gfx::FloatRect background_positioning_area;
 
         // Attachment and Origin
@@ -119,21 +110,25 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
             break;
         }
 
+        // FIXME: Implement proper derault sizing algorithm: https://drafts.csswg.org/css-images/#default-sizing
+        auto natural_image_width = image.natural_width().value_or(background_positioning_area.width());
+        auto natural_image_height = image.natural_height().value_or(background_positioning_area.height());
+
         // Size
         Gfx::FloatRect image_rect;
         switch (layer.size_type) {
         case CSS::BackgroundSize::Contain: {
-            float max_width_ratio = background_positioning_area.width() / image.width();
-            float max_height_ratio = background_positioning_area.height() / image.height();
+            float max_width_ratio = background_positioning_area.width() / natural_image_width;
+            float max_height_ratio = background_positioning_area.height() / natural_image_height;
             float ratio = min(max_width_ratio, max_height_ratio);
-            image_rect.set_size(image.width() * ratio, image.height() * ratio);
+            image_rect.set_size(natural_image_width * ratio, natural_image_height * ratio);
             break;
         }
         case CSS::BackgroundSize::Cover: {
-            float max_width_ratio = background_positioning_area.width() / image.width();
-            float max_height_ratio = background_positioning_area.height() / image.height();
+            float max_width_ratio = background_positioning_area.width() / natural_image_width;
+            float max_height_ratio = background_positioning_area.height() / natural_image_height;
             float ratio = max(max_width_ratio, max_height_ratio);
-            image_rect.set_size(image.width() * ratio, image.height() * ratio);
+            image_rect.set_size(natural_image_width * ratio, natural_image_height * ratio);
             break;
         }
         case CSS::BackgroundSize::LengthPercentage: {
@@ -142,14 +137,14 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
             bool x_is_auto = layer.size_x.is_auto();
             bool y_is_auto = layer.size_y.is_auto();
             if (x_is_auto && y_is_auto) {
-                width = image.width();
-                height = image.height();
+                width = natural_image_width;
+                height = natural_image_height;
             } else if (x_is_auto) {
                 height = layer.size_y.resolved(layout_node, CSS::Length::make_px(background_positioning_area.height())).to_px(layout_node);
-                width = image.width() * (height / image.height());
+                width = natural_image_width * (height / natural_image_height);
             } else if (y_is_auto) {
                 width = layer.size_x.resolved(layout_node, CSS::Length::make_px(background_positioning_area.width())).to_px(layout_node);
-                height = image.height() * (width / image.width());
+                height = natural_image_height * (width / natural_image_width);
             } else {
                 width = layer.size_x.resolved(layout_node, CSS::Length::make_px(background_positioning_area.width())).to_px(layout_node);
                 height = layer.size_y.resolved(layout_node, CSS::Length::make_px(background_positioning_area.height())).to_px(layout_node);
@@ -180,10 +175,10 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
             // so that the original aspect ratio is restored.
             if (layer.repeat_x != layer.repeat_y) {
                 if (layer.size_x.is_auto()) {
-                    image_rect.set_width(image.width() * (image_rect.height() / image.height()));
+                    image_rect.set_width(natural_image_width * (image_rect.height() / natural_image_height));
                 }
                 if (layer.size_y.is_auto()) {
-                    image_rect.set_height(image.height() * (image_rect.width() / image.width()));
+                    image_rect.set_height(natural_image_height * (image_rect.width() / natural_image_width));
                 }
             }
         }
@@ -278,6 +273,8 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
         float image_y = image_rect.y();
         Optional<Gfx::IntRect> last_int_image_rect;
 
+        image.resolve_for_size(layout_node, image_rect.size());
+
         while (image_y < clip_rect.bottom()) {
             image_rect.set_y(image_y);
 
@@ -285,8 +282,8 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
             while (image_x < clip_rect.right()) {
                 image_rect.set_x(image_x);
                 auto int_image_rect = image_rect.to_rounded<int>();
-                if (int_image_rect != last_int_image_rect)
-                    painter.draw_scaled_bitmap(int_image_rect, image, image.rect(), 1.0f, Gfx::Painter::ScalingMode::BilinearBlend);
+                if (int_image_rect != last_int_image_rect && int_image_rect.intersects(context.viewport_rect()))
+                    image.paint(context, int_image_rect);
                 last_int_image_rect = int_image_rect;
                 if (!repeat_x)
                     break;

Userland/Libraries/LibWeb/Painting/GradientPainting.cpp

@@ -8,6 +8,7 @@
 #include <AK/Math.h>
 #include <LibGfx/Gamma.h>
 #include <LibGfx/Line.h>
+#include <LibWeb/CSS/StyleValue.h>
 #include <LibWeb/Painting/GradientPainting.h>
 
 namespace Web::Painting {
@@ -19,20 +20,20 @@ static float normalized_gradient_angle_radians(float gradient_angle)
     return real_angle * (AK::Pi<float> / 180);
 }
 
-static float calulate_gradient_length(Gfx::IntRect const& gradient_rect, float sin_angle, float cos_angle)
+static float calulate_gradient_length(Gfx::IntSize const& gradient_size, float sin_angle, float cos_angle)
 {
-    return AK::fabs(gradient_rect.height() * sin_angle) + AK::fabs(gradient_rect.width() * cos_angle);
+    return AK::fabs(gradient_size.height() * sin_angle) + AK::fabs(gradient_size.width() * cos_angle);
 }
 
-static float calulate_gradient_length(Gfx::IntRect const& gradient_rect, float gradient_angle)
+static float calulate_gradient_length(Gfx::IntSize const& gradient_size, float gradient_angle)
 {
     float angle = normalized_gradient_angle_radians(gradient_angle);
     float sin_angle, cos_angle;
     AK::sincos(angle, sin_angle, cos_angle);
-    return calulate_gradient_length(gradient_rect, sin_angle, cos_angle);
+    return calulate_gradient_length(gradient_size, sin_angle, cos_angle);
 }
 
-LinearGradientData resolve_linear_gradient_data(Layout::Node const& node, Gfx::FloatRect const& gradient_rect, CSS::LinearGradientStyleValue const& linear_gradient)
+LinearGradientData resolve_linear_gradient_data(Layout::Node const& node, Gfx::FloatSize const& gradient_size, CSS::LinearGradientStyleValue const& linear_gradient)
 {
     auto& color_stop_list = linear_gradient.color_stop_list();
 
@@ -42,8 +43,8 @@ LinearGradientData resolve_linear_gradient_data(Layout::Node const& node, Gfx::F
     for (auto& stop : color_stop_list)
         resolved_color_stops.append(ColorStop { .color = stop.color_stop.color });
 
-    auto gradient_angle = linear_gradient.angle_degrees(gradient_rect);
-    auto gradient_length_px = calulate_gradient_length(gradient_rect.to_rounded<int>(), gradient_angle);
+    auto gradient_angle = linear_gradient.angle_degrees(gradient_size);
+    auto gradient_length_px = calulate_gradient_length(gradient_size.to_rounded<int>(), gradient_angle);
     auto gradient_length = CSS::Length::make_px(gradient_length_px);
 
     // 1. If the first color stop does not have a position, set its position to 0%.
@@ -137,7 +138,7 @@ void paint_linear_gradient(PaintContext& context, Gfx::IntRect const& gradient_r
     float sin_angle, cos_angle;
     AK::sincos(angle, sin_angle, cos_angle);
 
-    auto length = calulate_gradient_length(gradient_rect, sin_angle, cos_angle);
+    auto length = calulate_gradient_length(gradient_rect.size(), sin_angle, cos_angle);
 
     Gfx::FloatPoint offset { cos_angle * (length / 2), sin_angle * (length / 2) };
 

Userland/Libraries/LibWeb/Painting/GradientPainting.h

@@ -9,7 +9,6 @@
 #include <AK/Span.h>
 #include <AK/Vector.h>
 #include <LibGfx/Color.h>
-#include <LibWeb/CSS/StyleValue.h>
 #include <LibWeb/Forward.h>
 #include <LibWeb/Painting/PaintContext.h>
 
@@ -27,7 +26,7 @@ struct LinearGradientData {
     ColorStopList color_stops;
 };
 
-LinearGradientData resolve_linear_gradient_data(Layout::Node const&, Gfx::FloatRect const&, CSS::LinearGradientStyleValue const&);
+LinearGradientData resolve_linear_gradient_data(Layout::Node const&, Gfx::FloatSize const&, CSS::LinearGradientStyleValue const&);
 
 void paint_linear_gradient(PaintContext&, Gfx::IntRect const&, LinearGradientData const&);
 

Userland/Libraries/LibWeb/Painting/MarkerPaintable.cpp

@@ -33,17 +33,25 @@ void MarkerPaintable::paint(PaintContext& context, PaintPhase phase) const
 
     auto enclosing = enclosing_int_rect(absolute_rect());
 
-    if (auto const* list_style_image = layout_box().list_style_image_bitmap()) {
-        context.painter().blit(enclosing.location(), *list_style_image, list_style_image->rect());
+    int marker_width = (int)enclosing.height() / 2;
+
+    if (auto const* list_style_image = layout_box().list_style_image()) {
+        Gfx::IntRect image_rect {
+            0, 0,
+            list_style_image->natural_width().value_or(marker_width),
+            list_style_image->natural_height().value_or(marker_width)
+        };
+        image_rect.center_within(enclosing);
+        list_style_image->resolve_for_size(layout_box(), image_rect.size().to_type<float>());
+        list_style_image->paint(context, image_rect);
         return;
     }
 
-    auto color = computed_values().color();
-
-    int marker_width = (int)enclosing.height() / 2;
     Gfx::IntRect marker_rect { 0, 0, marker_width, marker_width };
     marker_rect.center_within(enclosing);
 
+    auto color = computed_values().color();
+
     Gfx::AntiAliasingPainter aa_painter { context.painter() };
 
     switch (layout_box().list_style_type()) {