LibWeb: Implement the SVG clip-rule attribute

This controls the fill rule used when rasterizing `<clipPath>` elements.
butcher73 · May 14, 2024 · 6c9069f · 6c9069f
1 parent 8e00fba
commit 6c9069f
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 8 deletions.
diff --git a/Tests/LibWeb/Ref/reference/images/svg-clip-rule-ref.png b/Tests/LibWeb/Ref/reference/images/svg-clip-rule-ref.png
diff --git a/Tests/LibWeb/Ref/reference/svg-clip-rule-ref.html b/Tests/LibWeb/Ref/reference/svg-clip-rule-ref.html
@@ -0,0 +1,9 @@
+<style>
+  * {
+      margin: 0;
+  }
+  body {
+      background-color: white;
+  }
+  </style>
+  <img src="./images/svg-clip-rule-ref.png">
diff --git a/Tests/LibWeb/Ref/svg-clip-rule.html b/Tests/LibWeb/Ref/svg-clip-rule.html
@@ -0,0 +1,18 @@
+<svg
+  width="100"
+  viewBox="0 0 100 90"
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1">
+  <defs>
+    <link rel="match" href="reference/svg-clip-rule-ref.html" />
+    <path d="M50,0 21,90 98,35 2,35 79,90z" id="star" />
+  </defs>
+  <clipPath id="emptyStar">
+    <use href="#star" clip-rule="evenodd" />
+  </clipPath>
+  <rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" />
+  <clipPath id="filledStar">
+    <use href="#star" clip-rule="nonzero" />
+  </clipPath>
+  <rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" />
+</svg>
diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
@@ -48,6 +48,7 @@ caption-side: top
 clear: none
 clip: auto
 clip-path: none
+clip-rule: nonzero
 color: rgb(0, 0, 0)
 column-count: auto
 column-gap: auto
@@ -84,7 +85,7 @@ grid-row-start: auto
 grid-template-areas: 
 grid-template-columns: 
 grid-template-rows: 
-height: 1462px
+height: 1479px
 image-rendering: auto
 inline-size: auto
 inset-block-end: auto

diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
@@ -27,6 +27,8 @@
 
 namespace Web::CSS {
 
+using ClipRule = FillRule;
+
 struct FlexBasisContent { };
 using FlexBasis = Variant<FlexBasisContent, Size>;
 
@@ -134,6 +136,7 @@ class InitialValues {
     static float opacity() { return 1.0f; }
     static float fill_opacity() { return 1.0f; }
     static CSS::FillRule fill_rule() { return CSS::FillRule::Nonzero; }
+    static CSS::ClipRule clip_rule() { return CSS::ClipRule::Nonzero; }
     static float stroke_opacity() { return 1.0f; }
     static float stop_opacity() { return 1.0f; }
     static CSS::TextAnchor text_anchor() { return CSS::TextAnchor::Start; }
@@ -430,6 +433,7 @@ class ComputedValues {
     Optional<MaskReference> const& mask() const { return m_noninherited.mask; }
     CSS::MaskType mask_type() const { return m_noninherited.mask_type; }
     Optional<ClipPathReference> const& clip_path() const { return m_noninherited.clip_path; }
+    CSS::ClipRule clip_rule() const { return m_inherited.clip_rule; }
 
     LengthPercentage const& cx() const { return m_noninherited.cx; }
     LengthPercentage const& cy() const { return m_noninherited.cy; }
@@ -505,6 +509,7 @@ class ComputedValues {
         float stroke_opacity { InitialValues::stroke_opacity() };
         LengthPercentage stroke_width { Length::make_px(1) };
         CSS::TextAnchor text_anchor { InitialValues::text_anchor() };
+        CSS::ClipRule clip_rule { InitialValues::clip_rule() };
 
         Vector<ShadowData> text_shadow;
 
@@ -731,6 +736,7 @@ class MutableComputedValues final : public ComputedValues {
     void set_mask(MaskReference value) { m_noninherited.mask = value; }
     void set_mask_type(CSS::MaskType value) { m_noninherited.mask_type = value; }
     void set_clip_path(ClipPathReference value) { m_noninherited.clip_path = value; }
+    void set_clip_rule(CSS::ClipRule value) { m_inherited.clip_rule = value; }
 
     void set_cx(LengthPercentage cx) { m_noninherited.cx = cx; }
     void set_cy(LengthPercentage cy) { m_noninherited.cy = cy; }

diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json
@@ -716,6 +716,13 @@
     ],
     "initial": "none"
   },
+  "clip-rule": {
+    "affects-layout": false,
+    "animation-type": "discrete",
+    "inherited": true,
+    "initial": "nonzero",
+    "valid-types": [ "fill-rule" ]
+  },
   "color": {
     "affects-layout": false,
     "animation-type": "by-computed-value",

diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
@@ -336,6 +336,12 @@ Optional<CSS::FillRule> StyleProperties::fill_rule() const
     return value_id_to_fill_rule(value->to_identifier());
 }
 
+Optional<CSS::ClipRule> StyleProperties::clip_rule() const
+{
+    auto value = property(CSS::PropertyID::ClipRule);
+    return value_id_to_fill_rule(value->to_identifier());
+}
+
 Optional<CSS::FlexDirection> StyleProperties::flex_direction() const
 {
     auto value = property(CSS::PropertyID::FlexDirection);

diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.h b/Userland/Libraries/LibWeb/CSS/StyleProperties.h
@@ -148,6 +148,7 @@ class StyleProperties : public RefCounted<StyleProperties> {
     float fill_opacity() const;
     float stroke_opacity() const;
     Optional<CSS::FillRule> fill_rule() const;
+    Optional<CSS::ClipRule> clip_rule() const;
 
     Gfx::Font const& first_available_computed_font() const { return m_font_list->first(); }
 

diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp
@@ -804,6 +804,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     if (auto clip_path = computed_style.property(CSS::PropertyID::ClipPath); clip_path->is_url())
         computed_values.set_clip_path(clip_path->as_url().url());
 
+    if (auto clip_rule = computed_style.clip_rule(); clip_rule.has_value())
+        computed_values.set_clip_rule(*clip_rule);
+
     if (auto fill_rule = computed_style.fill_rule(); fill_rule.has_value())
         computed_values.set_fill_rule(*fill_rule);
 

diff --git a/Userland/Libraries/LibWeb/Painting/SVGPathPaintable.cpp b/Userland/Libraries/LibWeb/Painting/SVGPathPaintable.cpp
@@ -101,8 +101,7 @@ void SVGPathPaintable::paint(PaintContext& context, PaintPhase phase) const
         context.recording_painter().fill_path({
             .path = closed_path(),
             .color = Color::Black,
-            // FIXME: Support clip-rule.
-            .winding_rule = Gfx::Painter::WindingRule::Nonzero,
+            .winding_rule = to_gfx_winding_rule(graphics_element.clip_rule().value_or(SVG::ClipRule::Nonzero)),
             .translation = offset,
         });
         return;

diff --git a/Userland/Libraries/LibWeb/SVG/AttributeParser.h b/Userland/Libraries/LibWeb/SVG/AttributeParser.h
@@ -137,6 +137,8 @@ enum class FillRule {
     Evenodd
 };
 
+using ClipRule = FillRule;
+
 enum class TextAnchor {
     Start,
     Middle,

diff --git a/Userland/Libraries/LibWeb/SVG/SVGGraphicsElement.cpp b/Userland/Libraries/LibWeb/SVG/SVGGraphicsElement.cpp
@@ -158,6 +158,7 @@ void SVGGraphicsElement::apply_presentational_hints(CSS::StyleProperties& style)
         NamedPropertyID(CSS::PropertyID::Mask),
         NamedPropertyID(CSS::PropertyID::MaskType),
         NamedPropertyID(CSS::PropertyID::ClipPath),
+        NamedPropertyID(CSS::PropertyID::ClipRule),
     };
 
     CSS::Parser::ParsingContext parsing_context { document(), CSS::Parser::ParsingContext::Mode::SVGPresentationAttribute };
@@ -172,11 +173,9 @@ void SVGGraphicsElement::apply_presentational_hints(CSS::StyleProperties& style)
     });
 }
 
-Optional<FillRule> SVGGraphicsElement::fill_rule() const
+static FillRule to_svg_fill_rule(CSS::FillRule fill_rule)
 {
-    if (!layout_node())
-        return {};
-    switch (layout_node()->computed_values().fill_rule()) {
+    switch (fill_rule) {
     case CSS::FillRule::Nonzero:
         return FillRule::Nonzero;
     case CSS::FillRule::Evenodd:
@@ -186,6 +185,20 @@ Optional<FillRule> SVGGraphicsElement::fill_rule() const
     }
 }
 
+Optional<FillRule> SVGGraphicsElement::fill_rule() const
+{
+    if (!layout_node())
+        return {};
+    return to_svg_fill_rule(layout_node()->computed_values().fill_rule());
+}
+
+Optional<ClipRule> SVGGraphicsElement::clip_rule() const
+{
+    if (!layout_node())
+        return {};
+    return to_svg_fill_rule(layout_node()->computed_values().clip_rule());
+}
+
 Optional<Gfx::Color> SVGGraphicsElement::fill_color() const
 {
     if (!layout_node())

diff --git a/Userland/Libraries/LibWeb/SVG/SVGGraphicsElement.h b/Userland/Libraries/LibWeb/SVG/SVGGraphicsElement.h
@@ -35,11 +35,12 @@ class SVGGraphicsElement : public SVGElement {
     virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override;
 
     Optional<Gfx::Color> fill_color() const;
-    Optional<FillRule> fill_rule() const;
     Optional<Gfx::Color> stroke_color() const;
     Optional<float> stroke_width() const;
     Optional<float> fill_opacity() const;
     Optional<float> stroke_opacity() const;
+    Optional<FillRule> fill_rule() const;
+    Optional<ClipRule> clip_rule() const;
 
     float visible_stroke_width() const
     {
-Original file line number
+Diff line change
@@ Expand Up / @@ -137,6 +137,8 @@ enum class FillRule { @@
         Evenodd
     };
+    using ClipRule = FillRule;
     enum class TextAnchor {
         Start,
         Middle,
@@ Expand Down @@