LibWeb: Implement SVG fill-rule attribute

Previously, we did an evenodd fill for everything which while for most
SVGs works, it is not correct default (it should be nonzero), and broke
some SVGs. This fixes a few of the icons on https://shopify.com/.

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -72,6 +72,7 @@ public:
     static int order() { return 0; }
     static float opacity() { return 1.0f; }
     static float fill_opacity() { return 1.0f; }
+    static CSS::FillRule fill_rule() { return CSS::FillRule::Nonzero; }
     static float stroke_opacity() { return 1.0f; }
     static float stop_opacity() { return 1.0f; }
     static CSS::Length border_radius() { return Length::make_px(0); }
@@ -303,6 +304,7 @@ public:
     CSS::ListStylePosition list_style_position() const { return m_inherited.list_style_position; }
 
     Optional<SVGPaint> const& fill() const { return m_inherited.fill; }
+    CSS::FillRule fill_rule() const { return m_inherited.fill_rule; }
     Optional<SVGPaint> const& stroke() const { return m_inherited.stroke; }
     float fill_opacity() const { return m_inherited.fill_opacity; }
     float stroke_opacity() const { return m_inherited.stroke_opacity; }
@@ -346,6 +348,7 @@ protected:
         CSS::Visibility visibility { InitialValues::visibility() };
 
         Optional<SVGPaint> fill;
+        CSS::FillRule fill_rule { InitialValues::fill_rule() };
         Optional<SVGPaint> stroke;
         float fill_opacity { InitialValues::fill_opacity() };
         float stroke_opacity { InitialValues::stroke_opacity() };
@@ -515,6 +518,7 @@ public:
 
     void set_fill(SVGPaint value) { m_inherited.fill = value; }
     void set_stroke(SVGPaint value) { m_inherited.stroke = value; }
+    void set_fill_rule(CSS::FillRule value) { m_inherited.fill_rule = value; }
     void set_fill_opacity(float value) { m_inherited.fill_opacity = value; }
     void set_stroke_opacity(float value) { m_inherited.stroke_opacity = value; }
     void set_stroke_width(LengthPercentage value) { m_inherited.stroke_width = value; }

Userland/Libraries/LibWeb/CSS/Enums.json

@@ -132,6 +132,10 @@
         "zoom-in",
         "zoom-out"
     ],
+    "fill-rule": [
+        "nonzero",
+        "evenodd"
+    ],
     "flex-direction": [
         "row",
         "row-reverse",

Userland/Libraries/LibWeb/CSS/Identifiers.json

@@ -120,6 +120,7 @@
   "ease-out",
   "enabled",
   "end",
+  "evenodd",
   "ew-resize",
   "expanded",
   "extra-condensed",
@@ -199,6 +200,7 @@
   "no-preference",
   "no-repeat",
   "none",
+  "nonzero",
   "normal",
   "not-allowed",
   "nowrap",

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -755,6 +755,15 @@
       "percentage [-∞,∞]"
     ]
   },
+  "fill-rule": {
+    "affects-layout": false,
+    "inherited": true,
+    "initial": "nonzero",
+    "valid-identifiers": [
+      "nonzero",
+      "evenodd"
+    ]
+  },
   "flex": {
     "inherited": false,
     "initial": "0 1 auto",

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -309,6 +309,12 @@ float StyleProperties::stop_opacity() const
     return resolve_opacity_value(*value);
 }
 
+Optional<CSS::FillRule> StyleProperties::fill_rule() const
+{
+    auto value = property(CSS::PropertyID::FillRule);
+    return value_id_to_fill_rule(value->to_identifier());
+}
+
 Optional<CSS::FlexDirection> StyleProperties::flex_direction() const
 {
     auto value = property(CSS::PropertyID::FlexDirection);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -107,6 +107,7 @@ public:
     float stop_opacity() const;
     float fill_opacity() const;
     float stroke_opacity() const;
+    Optional<CSS::FillRule> fill_rule() const;
 
     Gfx::Font const& computed_font() const
     {

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -705,6 +705,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     else if (stroke_width->is_percentage())
         computed_values.set_stroke_width(CSS::LengthPercentage { stroke_width->as_percentage().percentage() });
 
+    if (auto fill_rule = computed_style.fill_rule(); fill_rule.has_value())
+        computed_values.set_fill_rule(*fill_rule);
+
     computed_values.set_fill_opacity(computed_style.fill_opacity());
     computed_values.set_stroke_opacity(computed_style.stroke_opacity());
     computed_values.set_stop_opacity(computed_style.stop_opacity());

Userland/Libraries/LibWeb/Painting/SVGGeometryPaintable.cpp

@@ -42,6 +42,18 @@ Optional<HitTestResult> SVGGeometryPaintable::hit_test(CSSPixelPoint position, H
     return result;
 }
 
+static Gfx::Painter::WindingRule to_gfx_winding_rule(SVG::FillRule fill_rule)
+{
+    switch (fill_rule) {
+    case SVG::FillRule::Nonzero:
+        return Gfx::Painter::WindingRule::Nonzero;
+    case SVG::FillRule::Evenodd:
+        return Gfx::Painter::WindingRule::EvenOdd;
+    default:
+        VERIFY_NOT_REACHED();
+    }
+}
+
 void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
 {
     if (!is_visible())
@@ -100,17 +112,19 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
     };
 
     auto fill_opacity = geometry_element.fill_opacity().value_or(svg_context.fill_opacity());
+    auto winding_rule = to_gfx_winding_rule(geometry_element.fill_rule().value_or(svg_context.fill_rule()));
+
     if (auto paint_style = geometry_element.fill_paint_style(paint_context); paint_style.has_value()) {
         painter.fill_path(
             closed_path(),
             *paint_style,
             fill_opacity,
-            Gfx::Painter::WindingRule::EvenOdd);
+            winding_rule);
     } else if (auto fill_color = geometry_element.fill_color().value_or(svg_context.fill_color()).with_opacity(fill_opacity); fill_color.alpha() > 0) {
         painter.fill_path(
             closed_path(),
             fill_color,
-            Gfx::Painter::WindingRule::EvenOdd);
+            winding_rule);
     }
 
     auto stroke_opacity = geometry_element.stroke_opacity().value_or(svg_context.stroke_opacity());

Userland/Libraries/LibWeb/Painting/SVGGraphicsPaintable.cpp

@@ -32,6 +32,8 @@ void SVGGraphicsPaintable::before_children_paint(PaintContext& context, PaintPha
 
     auto& graphics_element = layout_box().dom_node();
 
+    if (auto fill_rule = graphics_element.fill_rule(); fill_rule.has_value())
+        context.svg_context().set_fill_rule(*fill_rule);
     if (auto fill_color = graphics_element.fill_color(); fill_color.has_value())
         context.svg_context().set_fill_color(*fill_color);
     if (auto stroke_color = graphics_element.stroke_color(); stroke_color.has_value())

Userland/Libraries/LibWeb/SVG/AttributeParser.h

@@ -120,6 +120,11 @@ private:
     bool m_is_percentage { false };
 };
 
+enum class FillRule {
+    Nonzero,
+    Evenodd
+};
+
 class AttributeParser final {
 public:
     ~AttributeParser() = default;

Userland/Libraries/LibWeb/SVG/SVGContext.h

@@ -9,6 +9,7 @@
 #include <AK/Vector.h>
 #include <LibGfx/Color.h>
 #include <LibGfx/Rect.h>
+#include <LibWeb/SVG/AttributeParser.h>
 
 namespace Web {
 
@@ -20,12 +21,14 @@ public:
         m_states.append(State());
     }
 
+    SVG::FillRule fill_rule() const { return state().fill_rule; }
     Gfx::Color fill_color() const { return state().fill_color; }
     Gfx::Color stroke_color() const { return state().stroke_color; }
     float stroke_width() const { return state().stroke_width; }
     float fill_opacity() const { return state().fill_opacity; }
     float stroke_opacity() const { return state().stroke_opacity; }
 
+    void set_fill_rule(SVG::FillRule fill_rule) { state().fill_rule = fill_rule; }
     void set_fill_color(Gfx::Color color) { state().fill_color = color; }
     void set_stroke_color(Gfx::Color color) { state().stroke_color = color; }
     void set_stroke_width(float width) { state().stroke_width = width; }
@@ -40,6 +43,7 @@ public:
 
 private:
     struct State {
+        SVG::FillRule fill_rule { SVG::FillRule::Nonzero };
         Gfx::Color fill_color { Gfx::Color::Transparent };
         Gfx::Color stroke_color { Gfx::Color::Transparent };
         float stroke_width { 1.0f };

Userland/Libraries/LibWeb/SVG/SVGGraphicsElement.cpp

@@ -129,6 +129,9 @@ void SVGGraphicsElement::apply_presentational_hints(CSS::StyleProperties& style)
         } else if (name.equals_ignoring_ascii_case("stroke-width"sv)) {
             if (auto stroke_width_value = parse_css_value(parsing_context, value, CSS::PropertyID::StrokeWidth).release_value_but_fixme_should_propagate_errors())
                 style.set_property(CSS::PropertyID::StrokeWidth, stroke_width_value.release_nonnull());
+        } else if (name.equals_ignoring_ascii_case("fill-rule"sv)) {
+            if (auto fill_rule_value = parse_css_value(parsing_context, value, CSS::PropertyID::FillRule).release_value_but_fixme_should_propagate_errors())
+                style.set_property(CSS::PropertyID::FillRule, fill_rule_value.release_nonnull());
         } else if (name.equals_ignoring_ascii_case("fill-opacity"sv)) {
             if (auto fill_opacity_value = parse_css_value(parsing_context, value, CSS::PropertyID::FillOpacity).release_value_but_fixme_should_propagate_errors())
                 style.set_property(CSS::PropertyID::FillOpacity, fill_opacity_value.release_nonnull());
@@ -139,6 +142,20 @@ void SVGGraphicsElement::apply_presentational_hints(CSS::StyleProperties& style)
     });
 }
 
+Optional<FillRule> SVGGraphicsElement::fill_rule() const
+{
+    if (!layout_node())
+        return {};
+    switch (layout_node()->computed_values().fill_rule()) {
+    case CSS::FillRule::Nonzero:
+        return FillRule::Nonzero;
+    case CSS::FillRule::Evenodd:
+        return FillRule::Evenodd;
+    default:
+        VERIFY_NOT_REACHED();
+    }
+}
+
 Optional<Gfx::Color> SVGGraphicsElement::fill_color() const
 {
     if (!layout_node())

Userland/Libraries/LibWeb/SVG/SVGGraphicsElement.h

@@ -27,7 +27,7 @@ public:
     virtual void parse_attribute(DeprecatedFlyString const& name, DeprecatedString const& value) override;
 
     Optional<Gfx::Color> fill_color() const;
-    Gfx::Painter::WindingRule fill_rule() const;
+    Optional<FillRule> fill_rule() const;
     Optional<Gfx::Color> stroke_color() const;
     Optional<float> stroke_width() const;
     Optional<float> fill_opacity() const;