Bug 1360144 - enable WPT interpolation tests for some SVG stroke related properties. draft
authorJeremy Chen <jeremychen@mozilla.com>
Wed, 03 May 2017 23:12:37 +0800
changeset 571942 bd4c3a5e4cafdabde0105acc941782351bbdef6f
parent 571941 d7e40bb852ea047a0e5f530bcdc04d29a1765001
child 571943 1b3ec7157f997893193f6a933f2292b31752ef09
push id56966
push userjichen@mozilla.com
push dateWed, 03 May 2017 15:13:03 +0000
bugs1360144
milestone55.0a1
Bug 1360144 - enable WPT interpolation tests for some SVG stroke related properties. 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
testing/web-platform/meta/MANIFEST.json
testing/web-platform/meta/web-animations/animation-model/animation-types/addition-per-property.html.ini
testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -211709,21 +211709,21 @@
    "eee8ff07b3ec5e83e5f18305f5bc00eb72468443",
    "testharness"
   ],
   "web-animations/animation-model/animation-types/interpolation-per-property.html": [
    "55100f7d505bc8cbc966ced0d1337ed78534a553",
    "testharness"
   ],
   "web-animations/animation-model/animation-types/property-list.js": [
-   "2843e53e0bf500d529062dce14889693fdf9f58a",
+   "7845e786fa31d2a707a018ca99e3f3bb53fb3083",
    "support"
   ],
   "web-animations/animation-model/animation-types/property-types.js": [
-   "b42366e9ef71bc6671543a05a85a5b932b2e2e03",
+   "bc49d3e7be624aa97c2ab2e9c3d5dc8ad8f4c232",
    "support"
   ],
   "web-animations/animation-model/animation-types/spacing-keyframes-filters.html": [
    "bd771a8a18245560221d92ea3495f81918c09848",
    "testharness"
   ],
   "web-animations/animation-model/animation-types/spacing-keyframes-shapes.html": [
    "03c3ab6815cfa96c07d5f95b6059fb276c50a25f",
--- a/testing/web-platform/meta/web-animations/animation-model/animation-types/addition-per-property.html.ini
+++ b/testing/web-platform/meta/web-animations/animation-model/animation-types/addition-per-property.html.ini
@@ -1,6 +1,10 @@
 prefs: [layout.css.contain.enabled:true, layout.css.initial-letter.enabled:true, layout.css.overflow-clip-box.enabled:true, layout.css.shape-outside.enabled:true]
 [addition-per-property.html]
   type: testharness
   [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
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
@@ -1230,18 +1230,17 @@ var gCSSProperties = {
   },
   'stroke': {
     // https://svgwg.org/svg2-draft/painting.html#StrokeProperty
     types: [
     ]
   },
   'stroke-dasharray': {
     // https://svgwg.org/svg2-draft/painting.html#StrokeDasharrayProperty
-    types: [
-    ]
+    types: [ 'dasharray' ]
   },
   'stroke-dashoffset': {
     // https://svgwg.org/svg2-draft/painting.html#StrokeDashoffsetProperty
     types: [
     ]
   },
   'stroke-linecap': {
     // https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty
@@ -1255,23 +1254,21 @@ var gCSSProperties = {
       { type: 'discrete', options: [ [ 'round', 'miter' ] ] }
     ],
     setup: t => {
       return createElement(t, 'rect');
     }
   },
   '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
     types: [
     ]
   },
   'table-layout': {
     // https://drafts.csswg.org/css-tables/#propdef-table-layout
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
@@ -400,16 +400,51 @@ const positiveNumberType = {
       var animation = target.animate({ [idlName]: [1.1, 1.5] },
                                      { duration: 1000, composite: 'add' });
       testAnimationSamples(animation, idlName, [{ time: 0, expected: '2.2' }]);
     }, property + ': positive number');
   },
 
 };
 
+// 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.0' }]);
+    }, property + ': [0, 1] number (clamped)');
+  },
+
+};
+
 const visibilityType = {
   testInterpolation: function(property, setup) {
     test(function(t) {
       var idlName = propertyToIDL(property);
       var target = createTestElement(t, setup);
       var animation = target.animate({ [idlName]: ['visible', 'hidden'] },
                                      { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
@@ -1213,27 +1248,80 @@ const rectType = {
                                      { duration: 1000, composite: 'add' });
       testAnimationSamples(
         animation, idlName,
         [{ time: 0, expected: 'rect(110px, 110px, 110px, 110px)' }]);
     }, property + ': rect');
   },
 }
 
+// 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,
   filterList: filterListType,
   integer: integerType,
   positiveInteger: positiveIntegerType,
   length: lengthType,
   percentage: percentageType,
   lengthPercentageOrCalc: lengthPercentageOrCalcType,
   lengthPair: lengthPairType,
   positiveNumber: positiveNumberType,
+  opacity: opacityType,
   transformList: transformListType,
   visibility: visibilityType,
   boxShadowList: boxShadowListType,
   textShadowList: textShadowListType,
   rect: rectType,
   position: positionType,
+  dasharray: dasharrayType,
 };