Bug 1360144 - enable WPT interpolation tests for stroke-dasharray. draft
authorJeremy Chen <jeremychen@mozilla.com>
Tue, 02 May 2017 18:08:51 +0800
changeset 571275 d287101940f195387ef7a50854e7f6b9b3c40718
parent 571274 e91c68f2ef1cc3741addf1fddafaab2b087a1434
child 571276 0d397c86c39b67a3d5d9cd52caacce901984a4f6
push id56737
push userjichen@mozilla.com
push dateTue, 02 May 2017 10:09:15 +0000
bugs1360144
milestone55.0a1
Bug 1360144 - enable WPT interpolation tests for stroke-dasharray. MozReview-Commit-ID: A711wzYF44S
testing/web-platform/meta/MANIFEST.json
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
@@ -211699,21 +211699,21 @@
    "eee8ff07b3ec5e83e5f18305f5bc00eb72468443",
    "testharness"
   ],
   "web-animations/animation-model/animation-types/interpolation-per-property.html": [
    "55100f7d505bc8cbc966ced0d1337ed78534a553",
    "testharness"
   ],
   "web-animations/animation-model/animation-types/property-list.js": [
-   "42a14466e8ff814284a596c3a104dea419e24d31",
+   "ddcfd20fcb21807dba4c56fd10b70e6fefddeccf",
    "support"
   ],
   "web-animations/animation-model/animation-types/property-types.js": [
-   "45237a7227e19bf2289336ccf1168c4122dcd67a",
+   "fee387af98249ad54a2be78ecca58909a5808b83",
    "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/tests/web-animations/animation-model/animation-types/property-list.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
@@ -1227,18 +1227,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
--- 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
@@ -1213,16 +1213,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) {
+    lengthType.testInterpolation(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]:
+                                         ['6, 8px, 4, 4',
+                                          '14, 12, 16, 16px'] },
+                                     { duration: 1000, fill: 'both' });
+      testAnimationSamples(
+          animation, idlName,
+          [{ time: 500,  expected: '10, 10, 10, 10' }]);
+    }, property + ' supports animating as a dasharray');
+
+    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');
+
+    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');
+  },
+
+  testAddition: function(property, setup) {
+    lengthType.testAddition(property, setup);
+    percentageType.testAddition(property, setup);
+    positiveNumberType.testAddition(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]:
+                                         ['6, 30%, 2px',
+                                          '2, 50%, 6px'] },
+                                     { duration: 1000, fill: 'add' });
+      testAnimationSamples(
+          animation, idlName,
+          [{ time: 0, expected: '12, 60%, 4px' }]);
+    }, property + ': dasharray');
+  },
+}
+
 const types = {
   color: colorType,
   discrete: discreteType,
   filterList: filterListType,
   integer: integerType,
   length: lengthType,
   percentage: percentageType,
   lengthPercentageOrCalc: lengthPercentageOrCalcType,
@@ -1230,10 +1294,11 @@ const types = {
   positiveNumber: positiveNumberType,
   zeroToOneNumber: zeroToOneNumberType,
   transformList: transformListType,
   visibility: visibilityType,
   boxShadowList: boxShadowListType,
   textShadowList: textShadowListType,
   rect: rectType,
   position: positionType,
+  dasharray: dasharrayType,
 };