LibWeb: Plumbing for svg stroke-dashoffset

Libraries/LibWeb/CSS/ComputedValues.h

@@ -150,10 +150,12 @@ class InitialValues {
     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 CSS::LengthPercentage stroke_dashoffset() { return CSS::Length::make_px(0); }
     static CSS::StrokeLinecap stroke_linecap() { return CSS::StrokeLinecap::Butt; }
     static CSS::StrokeLinejoin stroke_linejoin() { return CSS::StrokeLinejoin::Miter; }
     static float stroke_miterlimit() { return 4.0f; }
     static float stroke_opacity() { return 1.0f; }
+    static CSS::LengthPercentage stroke_width() { return CSS::Length::make_px(1); }
     static float stop_opacity() { return 1.0f; }
     static CSS::TextAnchor text_anchor() { return CSS::TextAnchor::Start; }
     static CSS::Length border_radius() { return Length::make_px(0); }
@@ -478,6 +480,7 @@ class ComputedValues {
     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; }
+    LengthPercentage const& stroke_dashoffset() const { return m_inherited.stroke_dashoffset; }
     CSS::StrokeLinecap stroke_linecap() const { return m_inherited.stroke_linecap; }
     CSS::StrokeLinejoin stroke_linejoin() const { return m_inherited.stroke_linejoin; }
     NumberOrCalculated stroke_miterlimit() const { return m_inherited.stroke_miterlimit; }
@@ -578,11 +581,12 @@ class ComputedValues {
         CSS::FillRule fill_rule { InitialValues::fill_rule() };
         Optional<SVGPaint> stroke;
         float fill_opacity { InitialValues::fill_opacity() };
+        LengthPercentage stroke_dashoffset { InitialValues::stroke_dashoffset() };
         CSS::StrokeLinecap stroke_linecap { InitialValues::stroke_linecap() };
         CSS::StrokeLinejoin stroke_linejoin { InitialValues::stroke_linejoin() };
         NumberOrCalculated stroke_miterlimit { InitialValues::stroke_miterlimit() };
         float stroke_opacity { InitialValues::stroke_opacity() };
-        LengthPercentage stroke_width { Length::make_px(1) };
+        LengthPercentage stroke_width { InitialValues::stroke_width() };
         CSS::TextAnchor text_anchor { InitialValues::text_anchor() };
         CSS::ClipRule clip_rule { InitialValues::clip_rule() };
 
@@ -826,6 +830,7 @@ class MutableComputedValues final : public ComputedValues {
     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_dashoffset(LengthPercentage value) { m_inherited.stroke_dashoffset = value; }
     void set_stroke_linecap(CSS::StrokeLinecap value) { m_inherited.stroke_linecap = value; }
     void set_stroke_linejoin(CSS::StrokeLinejoin value) { m_inherited.stroke_linejoin = value; }
     void set_stroke_miterlimit(NumberOrCalculated value) { m_inherited.stroke_miterlimit = value; }

Libraries/LibWeb/CSS/Properties.json

@@ -2420,6 +2420,18 @@
       "paint"
     ]
   },
+  "stroke-dashoffset": {
+    "affects-layout": false,
+    "animation-type": "by-computed-value",
+    "inherited": true,
+    "initial": "0",
+    "valid-types": [
+      "length [0,∞]",
+      "number [0,∞]",
+      "percentage [0,∞]"
+    ],
+    "percentages-resolve-to": "length"
+  },
   "stroke-linecap": {
     "affects-layout": false,
     "animation-type": "discrete",

Libraries/LibWeb/Layout/Node.cpp

@@ -854,6 +854,17 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
         computed_values.set_fill_rule(*fill_rule);
 
     computed_values.set_fill_opacity(computed_style.fill_opacity());
+
+    auto const& stroke_dashoffset = computed_style.property(CSS::PropertyID::StrokeDashoffset);
+    // FIXME: Converting to pixels isn't really correct - values should be in "user units"
+    //        https://svgwg.org/svg2-draft/coords.html#TermUserUnits
+    if (stroke_dashoffset.is_number())
+        computed_values.set_stroke_dashoffset(CSS::Length::make_px(CSSPixels::nearest_value_for(stroke_dashoffset.as_number().number())));
+    else if (stroke_dashoffset.is_length())
+        computed_values.set_stroke_dashoffset(stroke_dashoffset.as_length().length());
+    else if (stroke_dashoffset.is_percentage())
+        computed_values.set_stroke_dashoffset(CSS::LengthPercentage { stroke_dashoffset.as_percentage().percentage() });
+
     if (auto stroke_linecap = computed_style.stroke_linecap(); stroke_linecap.has_value())
         computed_values.set_stroke_linecap(stroke_linecap.value());
     if (auto stroke_linejoin = computed_style.stroke_linejoin(); stroke_linejoin.has_value())

Libraries/LibWeb/SVG/SVGGraphicsElement.cpp

@@ -150,6 +150,7 @@ void SVGGraphicsElement::apply_presentational_hints(CSS::StyleProperties& style)
         NamedPropertyID(CSS::PropertyID::Fill),
         // FIXME: The `stroke` attribute and CSS `stroke` property are not the same! But our support is limited enough that they are equivalent for now.
         NamedPropertyID(CSS::PropertyID::Stroke),
+        NamedPropertyID(CSS::PropertyID::StrokeDashoffset),
         NamedPropertyID(CSS::PropertyID::StrokeLinecap),
         NamedPropertyID(CSS::PropertyID::StrokeLinejoin),
         NamedPropertyID(CSS::PropertyID::StrokeMiterlimit),
@@ -266,13 +267,10 @@ Optional<float> SVGGraphicsElement::stroke_opacity() const
     return layout_node()->computed_values().stroke_opacity();
 }
 
-Optional<float> SVGGraphicsElement::stroke_width() const
+float SVGGraphicsElement::resolve_relative_to_viewport_size(CSS::LengthPercentage const& length_percentage) const
 {
-    if (!layout_node())
-        return {};
     // FIXME: Converting to pixels isn't really correct - values should be in "user units"
     //        https://svgwg.org/svg2-draft/coords.html#TermUserUnits
-    auto width = layout_node()->computed_values().stroke_width();
     // Resolved relative to the "Scaled viewport size": https://www.w3.org/TR/2017/WD-fill-stroke-3-20170413/#scaled-viewport-size
     // FIXME: This isn't right, but it's something.
     CSSPixels viewport_width = 0;
@@ -284,7 +282,21 @@ Optional<float> SVGGraphicsElement::stroke_width() const
         }
     }
     auto scaled_viewport_size = (viewport_width + viewport_height) * CSSPixels(0.5);
-    return width.to_px(*layout_node(), scaled_viewport_size).to_double();
+    return length_percentage.to_px(*layout_node(), scaled_viewport_size).to_double();
+}
+
+Optional<float> SVGGraphicsElement::stroke_dashoffset() const
+{
+    if (!layout_node())
+        return {};
+    return resolve_relative_to_viewport_size(layout_node()->computed_values().stroke_dashoffset());
+}
+
+Optional<float> SVGGraphicsElement::stroke_width() const
+{
+    if (!layout_node())
+        return {};
+    return resolve_relative_to_viewport_size(layout_node()->computed_values().stroke_width());
 }
 
 // https://svgwg.org/svg2-draft/types.html#__svg__SVGGraphicsElement__getBBox

Libraries/LibWeb/SVG/SVGGraphicsElement.h

@@ -36,6 +36,7 @@ class SVGGraphicsElement : public SVGElement {
 
     Optional<Gfx::Color> fill_color() const;
     Optional<Gfx::Color> stroke_color() const;
+    Optional<float> stroke_dashoffset() const;
     Optional<float> stroke_width() const;
     Optional<float> fill_opacity() const;
     Optional<CSS::StrokeLinecap> stroke_linecap() const;
@@ -94,6 +95,7 @@ class SVGGraphicsElement : public SVGElement {
 
 private:
     virtual bool is_svg_graphics_element() const final { return true; }
+    float resolve_relative_to_viewport_size(CSS::LengthPercentage const& length_percentage) const;
 };
 
 Gfx::AffineTransform transform_from_transform_list(ReadonlySpan<Transform> transform_list);

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt

@@ -1,6 +1,6 @@
 All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
 'cssText': ''
-'length': '202'
+'length': '203'
 'parentRule': 'null'
 'cssFloat': 'none'
 'WebkitAlignContent': 'normal'
@@ -495,6 +495,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'stopOpacity': '1'
 'stop-opacity': '1'
 'stroke': 'none'
+'strokeDashoffset': '0'
+'stroke-dashoffset': '0'
 'strokeLinecap': 'butt'
 'stroke-linecap': 'butt'
 'strokeLinejoin': 'miter'