Bug 1360144 - enable WPT interpolation tests for some SVG stroke related properties. r=hiro

This includes stroke-{opacity, miterlimit, stroke-dasharray}.

In this patch, we added opacityType to enabled stroke-opacity's
animation tests. With the newly added opacityType, we should be
able to test other opacity like properties as well.

Re-use existing positiveNumberType for stroke-miterlimit.

As for stroke-dasharray, we add a separated type specifically for it. Note
that we haven't supported unitless length in servo and stylo yet, so I didn't
add tests for length. We should add some once we support unitless length
in servo and stylo.

MozReview-Commit-ID: HIUSyvKA2G3

--HG--
extra : rebase_source : 08fdcdbf0895e691cb47dcf54c59dde38071c7dc

testing/web-platform/meta/MANIFEST.json

@@ -211714,11 +211714,11 @@
    "testharness"
   ],
   "web-animations/animation-model/animation-types/property-list.js": [
-   "2843e53e0bf500d529062dce14889693fdf9f58a",
+   "7845e786fa31d2a707a018ca99e3f3bb53fb3083",
    "support"
   ],
   "web-animations/animation-model/animation-types/property-types.js": [
-   "b42366e9ef71bc6671543a05a85a5b932b2e2e03",
+   "634bf959bd37624d1846a4b87595eee8b90f9146",
    "support"
   ],
   "web-animations/animation-model/animation-types/spacing-keyframes-filters.html": [

testing/web-platform/meta/web-animations/animation-model/animation-types/addition-per-property.html.ini

@@ -4,3 +4,7 @@ prefs: [layout.css.contain.enabled:true, layout.css.initial-letter.enabled:true,
   [column-gap: "normal" onto "200px"]
     expected: FAIL
     bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1356241
+
+  [stroke-dasharray: dasharray]
+    expected: FAIL
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1361738

testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js

@@ -1235,8 +1235,7 @@ var gCSSProperties = {
   },
   'stroke-dasharray': {
     // https://svgwg.org/svg2-draft/painting.html#StrokeDasharrayProperty
-    types: [
-    ]
+    types: [ 'dasharray' ]
   },
   'stroke-dashoffset': {
     // https://svgwg.org/svg2-draft/painting.html#StrokeDashoffsetProperty
@@ -1260,13 +1259,11 @@ var gCSSProperties = {
   },
   'stroke-miterlimit': {
     // https://svgwg.org/svg2-draft/painting.html#StrokeMiterlimitProperty
-    types: [
-    ]
+    types: [ 'positiveNumber' ]
   },
   'stroke-opacity': {
     // https://svgwg.org/svg2-draft/painting.html#StrokeOpacityProperty
-    types: [
-    ]
+    types: [ 'opacity' ]
   },
   'stroke-width': {
     // https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty

testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js

@@ -405,6 +405,41 @@ const positiveNumberType = {
 
 };
 
+// Test using float values in the range [0, 1]
+const opacityType = {
+  testInterpolation: function(property, setup) {
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]: [0.3, 0.8] },
+                                     { duration: 1000, fill: 'both' });
+      testAnimationSamples(animation, idlName,
+                           [{ time: 500,  expected: '0.55' }]);
+    }, property + ' supports animating as a [0, 1] number');
+  },
+
+  testAddition: function(property, setup) {
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      target.style[idlName] = 0.3;
+      var animation = target.animate({ [idlName]: [0.3, 0.8] },
+                                     { duration: 1000, composite: 'add' });
+      testAnimationSamples(animation, idlName, [{ time: 0, expected: '0.6' }]);
+    }, property + ': [0, 1] number');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      target.style[idlName] = 0.8;
+      var animation = target.animate({ [idlName]: [0.3, 0.8] },
+                                     { duration: 1000, composite: 'add' });
+      testAnimationSamples(animation, idlName, [{ time: 0, expected: '1' }]);
+    }, property + ': [0, 1] number (clamped)');
+  },
+
+};
+
 const visibilityType = {
   testInterpolation: function(property, setup) {
     test(function(t) {
@@ -1218,6 +1253,57 @@ const rectType = {
   },
 }
 
+// stroke-dasharray: none | [ <length> | <percentage> | <number> ]*
+const dasharrayType = {
+  testInterpolation: function(property, setup) {
+    percentageType.testInterpolation(property, setup);
+    positiveNumberType.testInterpolation(property, setup);
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]:
+                                         ['8, 16, 4',
+                                          '4, 8, 12, 16'] },
+                                     { duration: 1000, fill: 'both' });
+      testAnimationSamples(
+          animation, idlName,
+          [{ time: 500,  expected: '6, 12, 8, 12, 10, 6, 10, 16, 4, 8, 14, 10' }]);
+    }, property + ' supports animating as a dasharray (mismatched length)');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]:
+                                         ['2, 50%, 6, 10',
+                                          '6, 30%, 2, 2'] },
+                                     { duration: 1000, fill: 'both' });
+      testAnimationSamples(
+          animation, idlName,
+          [{ time: 500,  expected: '4, 40%, 4, 6' }]);
+    }, property + ' supports animating as a dasharray (mixed number and percentage)');
+
+  },
+
+  // Note that stroke-dasharray is non-additive property, so we should write this
+  // additive test case that animating value replaces underlying values.
+  // See https://www.w3.org/TR/SVG2/painting.html#StrokeDashing.
+  testAddition: function(property, setup) {
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      target.style[idlName] = '6, 30%, 2px';
+      var animation = target.animate({ [idlName]:
+                                         ['1, 2, 3, 4, 5',
+                                          '6, 7, 8, 9, 10'] },
+                                     { duration: 1000, fill: 'add' });
+      testAnimationSamples(
+          animation, idlName,
+          [{ time: 0, expected: '1, 2, 3, 4, 5' }]);
+    }, property + ': dasharray');
+  },
+}
+
 const types = {
   color: colorType,
   discrete: discreteType,
@@ -1229,11 +1315,13 @@ const types = {
   lengthPercentageOrCalc: lengthPercentageOrCalcType,
   lengthPair: lengthPairType,
   positiveNumber: positiveNumberType,
+  opacity: opacityType,
   transformList: transformListType,
   visibility: visibilityType,
   boxShadowList: boxShadowListType,
   textShadowList: textShadowListType,
   rect: rectType,
   position: positionType,
+  dasharray: dasharrayType,
 };