LibWeb: Render any specified list-style-image for list items

Author: https://github.com/trflynn89
Commit: https://github.com/SerenityOS/serenity/commit/ef62118c8b1
Pull-request: https://github.com/SerenityOS/serenity/pull/10683

Userland/Libraries/LibWeb/Layout/ListItemBox.cpp

@@ -40,7 +40,9 @@ void ListItemBox::layout_marker()
     }
 
     m_marker->set_offset(-(m_marker->width() + 4), 0);
-    m_marker->set_height(line_height());
+
+    if (m_marker->height() > height())
+        set_height(m_marker->height());
 }
 
 }

Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp

@@ -49,13 +49,21 @@ ListItemMarkerBox::ListItemMarkerBox(DOM::Document& document, CSS::ListStyleType
         VERIFY_NOT_REACHED();
     }
 
-    if (m_text.is_null()) {
-        set_width(4);
-        return;
+    int image_width = 0;
+    int image_height = 0;
+    if (auto const* list_style_image = list_style_image_bitmap()) {
+        image_width = list_style_image->rect().width();
+        image_height = list_style_image->rect().height();
     }
 
-    auto text_width = font().width(m_text);
-    set_width(text_width);
+    if (m_text.is_null()) {
+        set_width(image_width + 4);
+    } else {
+        auto text_width = font().width(m_text);
+        set_width(image_width + text_width);
+    }
+
+    set_height(max(image_height, line_height()));
 }
 
 ListItemMarkerBox::~ListItemMarkerBox()
@@ -67,10 +75,16 @@ void ListItemMarkerBox::paint(PaintContext& context, PaintPhase phase)
     if (phase != PaintPhase::Foreground)
         return;
 
+    auto enclosing = enclosing_int_rect(absolute_rect());
+
+    if (auto const* list_style_image = list_style_image_bitmap()) {
+        context.painter().blit(enclosing.location(), *list_style_image, list_style_image->rect());
+        return;
+    }
+
     // FIXME: It would be nicer to not have to go via the parent here to get our inherited style.
     auto color = parent()->computed_values().color();
 
-    auto enclosing = enclosing_int_rect(absolute_rect());
     int marker_width = (int)enclosing.height() / 2;
     Gfx::IntRect marker_rect { 0, 0, marker_width, marker_width };
     marker_rect.center_within(enclosing);
@@ -110,4 +124,9 @@ void ListItemMarkerBox::paint(PaintContext& context, PaintPhase phase)
     }
 }
 
+Gfx::Bitmap const* ListItemMarkerBox::list_style_image_bitmap() const
+{
+    return list_style_image() ? list_style_image()->bitmap() : nullptr;
+}
+
 }

Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.h

@@ -20,6 +20,7 @@ public:
 
 private:
     virtual bool can_have_children() const override { return false; }
+    Gfx::Bitmap const* list_style_image_bitmap() const;
 
     CSS::ListStyleType m_list_style_type { CSS::ListStyleType::None };
     size_t m_index;

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -320,6 +320,12 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
     if (auto list_style_type = specified_style.list_style_type(); list_style_type.has_value())
         computed_values.set_list_style_type(list_style_type.value());
 
+    auto list_style_image = specified_style.property(CSS::PropertyID::ListStyleImage);
+    if (list_style_image.has_value() && list_style_image.value()->is_image()) {
+        m_list_style_image = list_style_image.value()->as_image();
+        m_list_style_image->load_bitmap(document());
+    }
+
     computed_values.set_color(specified_style.color_or_fallback(CSS::PropertyID::Color, *this, CSS::InitialValues::color()));
     computed_values.set_background_color(specified_style.color_or_fallback(CSS::PropertyID::BackgroundColor, *this, CSS::InitialValues::background_color()));
 

Userland/Libraries/LibWeb/Layout/Node.h

@@ -206,6 +206,7 @@ public:
     float line_height() const { return m_line_height; }
     float font_size() const { return m_font_size; }
     const CSS::ImageStyleValue* background_image() const { return m_background_image; }
+    const CSS::ImageStyleValue* list_style_image() const { return m_list_style_image; }
 
     NonnullRefPtr<NodeWithStyle> create_anonymous_wrapper() const;
 
@@ -222,6 +223,7 @@ private:
     float m_line_height { 0 };
     float m_font_size { 0 };
     RefPtr<CSS::ImageStyleValue> m_background_image;
+    RefPtr<CSS::ImageStyleValue> m_list_style_image;
 
     bool m_has_definite_height { false };
     bool m_has_definite_width { false };