Bug 1340422 - Part 1: Add SVG d property in CSS. r=emilio

Add d property for style system. d property only supports path() for now and it has the functional notation without fill rule. w3c/svgwg#320 (comment) Differential Revision: https://phabricator.services.mozilla.com/D81237
mozilla · Jun 9, 2021 · d61e621 · d61e621
1 parent 6751962
commit d61e621
Show file tree

Hide file tree

Showing 20 changed files with 134 additions and 661 deletions.
diff --git a/devtools/server/actors/animation-type-longhand.js b/devtools/server/actors/animation-type-longhand.js
@@ -279,6 +279,7 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
       "clip-path",
       "column-count",
       "column-rule-width",
+      "d",
       "filter",
       "font-stretch",
       "font-variation-settings",

diff --git a/devtools/shared/css/generated/properties-db.js b/devtools/shared/css/generated/properties-db.js
@@ -3068,6 +3068,7 @@ exports.CSS_PROPERTIES = {
       "rx",
       "ry",
       "r",
+      "d",
       "table-layout",
       "text-overflow",
       "text-decoration-line",
@@ -10995,6 +10996,10 @@ exports.PREFERENCES = [
     "backdrop-filter",
     "layout.css.backdrop-filter.enabled"
   ],
+  [
+    "d",
+    "layout.css.d-property.enabled"
+  ],
   [
     "font-variation-settings",
     "layout.css.font-variations.enabled"

diff --git a/layout/style/ServoBindings.toml b/layout/style/ServoBindings.toml
@@ -583,6 +583,7 @@ cbindgen-types = [
     { gecko = "StyleDefaultFontSizes", servo = "crate::gecko::wrapper::DefaultFontSizes" },
     { gecko = "StyleCaptionSide", servo = "crate::values::computed::table::CaptionSide" },
     { gecko = "StylePageSize", servo = "crate::values::computed::page::PageSize" },
+    { gecko = "StyleDProperty", servo = "crate::values::specified::svg::DProperty" },
 ]
 
 mapped-generic-types = [

diff --git a/layout/style/nsStyleStruct.cpp b/layout/style/nsStyleStruct.cpp
@@ -935,7 +935,8 @@ nsStyleSVGReset::nsStyleSVGReset(const Document& aDocument)
       mStopOpacity(1.0f),
       mFloodOpacity(1.0f),
       mVectorEffect(StyleVectorEffect::None),
-      mMaskType(StyleMaskType::Luminance) {
+      mMaskType(StyleMaskType::Luminance),
+      mD(StyleDProperty::None()) {
   MOZ_COUNT_CTOR(nsStyleSVGReset);
 }
 
@@ -957,7 +958,8 @@ nsStyleSVGReset::nsStyleSVGReset(const nsStyleSVGReset& aSource)
       mStopOpacity(aSource.mStopOpacity),
       mFloodOpacity(aSource.mFloodOpacity),
       mVectorEffect(aSource.mVectorEffect),
-      mMaskType(aSource.mMaskType) {
+      mMaskType(aSource.mMaskType),
+      mD(aSource.mD) {
   MOZ_COUNT_CTOR(nsStyleSVGReset);
 }
 
@@ -1002,7 +1004,7 @@ nsChangeHint nsStyleSVGReset::CalcDifference(
 
   if (mX != aNewData.mX || mY != aNewData.mY || mCx != aNewData.mCx ||
       mCy != aNewData.mCy || mR != aNewData.mR || mRx != aNewData.mRx ||
-      mRy != aNewData.mRy) {
+      mRy != aNewData.mRy || mD != aNewData.mD) {
     hint |= nsChangeHint_InvalidateRenderingObservers | nsChangeHint_NeedReflow;
   }
 
@@ -1024,7 +1026,7 @@ nsChangeHint nsStyleSVGReset::CalcDifference(
              mLightingColor != aNewData.mLightingColor ||
              mStopOpacity != aNewData.mStopOpacity ||
              mFloodOpacity != aNewData.mFloodOpacity ||
-             mMaskType != aNewData.mMaskType) {
+             mMaskType != aNewData.mMaskType || mD != aNewData.mD) {
     hint |= nsChangeHint_RepaintFrame;
   }
 

diff --git a/layout/style/nsStyleStruct.h b/layout/style/nsStyleStruct.h
@@ -1923,6 +1923,8 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleSVGReset {
 
   mozilla::StyleVectorEffect mVectorEffect;
   mozilla::StyleMaskType mMaskType;
+
+  mozilla::StyleDProperty mD;
 };
 
 struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleEffects {

diff --git a/layout/style/test/mochitest.ini b/layout/style/test/mochitest.ini
@@ -18,6 +18,7 @@ prefs =
   layout.css.step-position-jump.enabled=true
   layout.css.backdrop-filter.enabled=true
   layout.css.fit-content-function.enabled=true
+  layout.css.d-property.enabled=true
 support-files =
   animation_utils.js
   ccd-quirks.html

diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
@@ -13063,6 +13063,29 @@ gCSSProperties["scrollbar-width"] = {
   invalid_values: ["1px"],
 };
 
+const pathValues = {
+  other_values: [
+    "path('')",
+    "path(' ')",
+    "path('M 10 10 20 20 H 90 V 90 Z')",
+    "path('M10 10 20,20H90V90Z')",
+    "path('M 10 10 C 20 20, 40 20, 50 10')",
+    "path('M 10 80 C 40 10, 65 10, 95 80 S 1.5e2 150, 180 80')",
+    "path('M 10 80 Q 95 10 180 80')",
+    "path('M 10 80 Q 52.5 10, 95 80 T 180 80')",
+    "path('M 80 80 A 45 45, 0, 0, 0, 1.25e2 1.25e2 L 125 80 Z')",
+    "path('M100-200h20z')",
+    "path('M10,10L20.6.5z')",
+  ],
+  invalid_values: [
+    "path()",
+    "path(a)",
+    "path('M 10 Z')",
+    "path('M 10-10 20')",
+    "path('M 10 10 C 20 20 40 20')",
+  ],
+};
+
 if (IsCSSPropertyPrefEnabled("layout.css.motion-path.enabled")) {
   gCSSProperties["offset"] = {
     domProp: "offset",
@@ -13113,37 +13136,21 @@ if (IsCSSPropertyPrefEnabled("layout.css.motion-path.enabled")) {
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     initial_values: ["none"],
-    other_values: [
-      "path('')",
-      "path(' ')",
-      "path('M 10 10 20 20 H 90 V 90 Z')",
-      "path('M10 10 20,20H90V90Z')",
-      "path('M 10 10 C 20 20, 40 20, 50 10')",
-      "path('M 10 80 C 40 10, 65 10, 95 80 S 1.5e2 150, 180 80')",
-      "path('M 10 80 Q 95 10 180 80')",
-      "path('M 10 80 Q 52.5 10, 95 80 T 180 80')",
-      "path('M 80 80 A 45 45, 0, 0, 0, 1.25e2 1.25e2 L 125 80 Z')",
-      "path('M100-200h20z')",
-      "path('M10,10L20.6.5z')",
+    other_values: pathValues.other_values.concat([
       "ray(45deg closest-side)",
       "ray(0rad farthest-side)",
       "ray(0.5turn closest-corner contain)",
       "ray(200grad farthest-corner)",
       "ray(sides 180deg)",
       "ray(contain farthest-side 180deg)",
       "ray(calc(180deg - 45deg) farthest-side)",
-    ],
-    invalid_values: [
-      "path()",
-      "path(a)",
-      "path('M 10 Z')",
-      "path('M 10-10 20')",
-      "path('M 10 10 C 20 20 40 20')",
+    ]),
+    invalid_values: pathValues.invalid_values.concat([
       "ray(0deg)",
       "ray(closest-side)",
       "ray(0deg, closest-side)",
       "ray(contain 0deg closest-side contain)",
-    ],
+    ]),
   };
 
   gCSSProperties["offset-distance"] = {
@@ -13196,6 +13203,17 @@ if (IsCSSPropertyPrefEnabled("layout.css.clip-path-path.enabled")) {
   );
 }
 
+if (IsCSSPropertyPrefEnabled("layout.css.d-property.enabled")) {
+  gCSSProperties["d"] = {
+    domProp: "d",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: pathValues.other_values,
+    invalid_values: pathValues.invalid_values,
+  };
+}
+
 if (IsCSSPropertyPrefEnabled("layout.css.step-position-jump.enabled")) {
   gCSSProperties["animation-timing-function"].other_values.push(
     "steps(1, jump-start)",

diff --git a/layout/style/test/test_transitions_per_property.html b/layout/style/test/test_transitions_per_property.html
@@ -421,6 +421,10 @@
   supported_properties["clip-path"].push(test_path_function);
 }
 
+if (IsCSSPropertyPrefEnabled("layout.css.d-property.enabled")) {
+  supported_properties["d"] = [ test_path_function ];
+}
+
 if (IsCSSPropertyPrefEnabled("layout.css.font-variations.enabled")) {
   supported_properties["font-variation-settings"] = [ test_font_variations_transition ];
 }

diff --git a/modules/libpref/init/StaticPrefList.yaml b/modules/libpref/init/StaticPrefList.yaml
@@ -6821,6 +6821,12 @@
   value: true
   mirror: always
 
+# Is support for d property for SVG path element?
+- name: layout.css.d-property.enabled
+  type: bool
+  value: false
+  mirror: always
+
 # Are we emulating -moz-{inline}-box layout using CSS flexbox?
 - name: layout.css.emulate-moz-box-with-flex
   type: bool

diff --git a/servo/components/style/properties/counted_unknown_properties.py b/servo/components/style/properties/counted_unknown_properties.py
@@ -63,7 +63,6 @@
     "-webkit-text-combine",
     "-webkit-text-emphasis-style",
     "-webkit-text-emphasis",
-    "d",
     "-webkit-mask-box-image-width",
     "-webkit-mask-box-image-source",
     "-webkit-mask-box-image-outset",

diff --git a/servo/components/style/properties/longhands/svg.mako.rs b/servo/components/style/properties/longhands/svg.mako.rs
@@ -246,3 +246,13 @@ ${helpers.predefined_type(
     animation_value_type="LengthPercentage",
     spec="https://svgwg.org/svg2-draft/geometry.html#R",
 )}
+
+${helpers.predefined_type(
+    "d",
+    "DProperty",
+    "specified::DProperty::none()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    gecko_pref="layout.css.d-property.enabled",
+    spec="https://svgwg.org/svg2-draft/paths.html#TheDProperty",
+)}
diff --git a/servo/components/style/values/computed/mod.rs b/servo/components/style/values/computed/mod.rs
@@ -80,7 +80,7 @@ pub use self::position::{
 pub use self::ratio::Ratio;
 pub use self::rect::NonNegativeLengthOrNumberRect;
 pub use self::resolution::Resolution;
-pub use self::svg::MozContextProperties;
+pub use self::svg::{DProperty, MozContextProperties};
 pub use self::svg::{SVGLength, SVGOpacity, SVGPaint, SVGPaintKind};
 pub use self::svg::{SVGPaintOrder, SVGStrokeDashArray, SVGWidth};
 pub use self::text::TextUnderlinePosition;

diff --git a/servo/components/style/values/computed/svg.rs b/servo/components/style/values/computed/svg.rs
@@ -11,7 +11,7 @@ use crate::values::generics::svg as generic;
 use crate::values::RGBA;
 use crate::Zero;
 
-pub use crate::values::specified::{MozContextProperties, SVGPaintOrder};
+pub use crate::values::specified::{DProperty, MozContextProperties, SVGPaintOrder};
 
 /// Computed SVG Paint value
 pub type SVGPaint = generic::GenericSVGPaint<Color, ComputedUrl>;

diff --git a/servo/components/style/values/specified/mod.rs b/servo/components/style/values/specified/mod.rs
@@ -80,7 +80,7 @@ pub use self::position::{PositionComponent, ZIndex};
 pub use self::ratio::Ratio;
 pub use self::rect::NonNegativeLengthOrNumberRect;
 pub use self::resolution::Resolution;
-pub use self::svg::MozContextProperties;
+pub use self::svg::{DProperty, MozContextProperties};
 pub use self::svg::{SVGLength, SVGOpacity, SVGPaint};
 pub use self::svg::{SVGPaintOrder, SVGStrokeDashArray, SVGWidth};
 pub use self::svg_path::SVGPathData;

diff --git a/servo/components/style/values/specified/svg.rs b/servo/components/style/values/specified/svg.rs
@@ -10,6 +10,7 @@ use crate::values::specified::color::Color;
 use crate::values::specified::url::SpecifiedUrl;
 use crate::values::specified::AllowQuirks;
 use crate::values::specified::LengthPercentage;
+use crate::values::specified::SVGPathData;
 use crate::values::specified::{NonNegativeLengthPercentage, Opacity};
 use crate::values::CustomIdent;
 use cssparser::{Parser, Token};
@@ -334,3 +335,57 @@ impl Parse for MozContextProperties {
         })
     }
 }
+
+/// The svg d property type.
+///
+/// https://svgwg.org/svg2-draft/paths.html#TheDProperty
+#[derive(
+    Animate,
+    Clone,
+    ComputeSquaredDistance,
+    Debug,
+    Deserialize,
+    MallocSizeOf,
+    PartialEq,
+    Serialize,
+    SpecifiedValueInfo,
+    ToAnimatedZero,
+    ToComputedValue,
+    ToCss,
+    ToResolvedValue,
+    ToShmem,
+)]
+#[repr(C, u8)]
+pub enum DProperty {
+    /// Path value for path(<string>) or just a <string>.
+    #[css(function)]
+    Path(SVGPathData),
+    /// None value.
+    #[animation(error)]
+    None,
+}
+
+impl DProperty {
+    /// return none.
+    #[inline]
+    pub fn none() -> Self {
+        DProperty::None
+    }
+}
+
+impl Parse for DProperty {
+    fn parse<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Self, ParseError<'i>> {
+        // Parse none.
+        if input.try_parse(|i| i.expect_ident_matching("none")).is_ok() {
+            return Ok(DProperty::none());
+        }
+
+        // Parse possible functions.
+        input.expect_function_matching("path")?;
+        let path_data = input.parse_nested_block(|i| SVGPathData::parse(context, i))?;
+        Ok(DProperty::Path(path_data))
+    }
+}
diff --git a/servo/ports/geckolib/cbindgen.toml b/servo/ports/geckolib/cbindgen.toml
@@ -227,6 +227,7 @@ include = [
   "DefaultFontSizes",
   "RuleChangeKind",
   "PageSize",
+  "DProperty",
 ]
 item_types = ["enums", "structs", "unions", "typedefs", "functions", "constants"]
 renaming_overrides_prefixing = true

diff --git a/testing/web-platform/meta/svg/path/property/__dir__.ini b/testing/web-platform/meta/svg/path/property/__dir__.ini
@@ -0,0 +1 @@
+prefs: [layout.css.d-property.enabled:true]