Bug 1464647 - Add web platform tests affected by the smarter interpolation of transform list. r=birtles

MozReview-Commit-ID: 4nYK6UROK6f

--HG--
extra : rebase_source : 3274211d89264ead2f3b83f16848470755e68a4b

testing/web-platform/meta/MANIFEST.json

@@ -546831,7 +546831,7 @@
    "testharness"
   ],
   "css/geometry/DOMMatrix-003.html": [
-   "9e2d031f83fbcc4d32a3891fdf2c2d8bc2cc774c",
+   "ed9ca53d25463a9b38414ab9062cf3eb2f8991cb",
    "testharness"
   ],
   "css/geometry/DOMMatrix-a-f-alias.html": [
@@ -615479,7 +615479,7 @@
    "support"
   ],
   "web-animations/animation-model/animation-types/property-types.js": [
-   "9f6d5f18913c02044cc06c300b924f387025c258",
+   "874b54961245af61eb2880ccf6b9d368548249a0",
    "support"
   ],
   "web-animations/animation-model/animation-types/visibility.html": [
@@ -615671,7 +615671,7 @@
    "support"
   ],
   "web-animations/testcommon.js": [
-   "039db95bc6b54f00d6e106241d001ae980566f92",
+   "57883097f4a440ae95b9e665bf8d9e36a187f7d8",
    "support"
   ],
   "web-animations/timing-model/animation-effects/active-time.html": [

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

@@ -1 +1,7 @@
 prefs: [layout.css.font-variations.enabled:true, layout.css.overflow-clip-box.enabled:true, layout.css.individual-transform.enabled:true]
+  [transform: rotate and translate on rotate]
+    expected: FAIL
+
+  [transform: rotate on roate and translate]
+    expected: FAIL
+

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

@@ -4,3 +4,9 @@ prefs: [layout.css.font-variations.enabled:true, layout.css.overflow-clip-box.en
     expected: FAIL
     bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1345709
 
+  [transform: extend shorter list (from)]
+    expected: FAIL
+
+  [transform: extend shorter list (to)]
+    expected: FAIL
+

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

@@ -890,6 +890,30 @@ const transformListType = {
                                   150 * Math.sin(Math.PI / 2) ] }]);
     }, `${property}: translate and rotate`);
 
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
+        target.animate({ [idlName]: ['rotate(0deg)',
+                                     'rotate(1080deg) translateX(100px)'] },
+                       1000);
+
+      testAnimationSampleMatrices(animation, idlName,
+        [{ time: 500, expected: [ -1, 0, 0, -1, -50, 0 ] }]);
+    }, `${property}: extend shorter list (from)`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
+        target.animate({ [idlName]: ['rotate(0deg) translateX(100px)',
+                                     'rotate(1080deg)'] },
+                       1000);
+
+      testAnimationSampleMatrices(animation, idlName,
+        [{ time: 500, expected: [ -1, 0, 0, -1, -50, 0 ] }]);
+    }, `${property}: extend shorter list (to)`);
+
     test(t => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
@@ -1363,6 +1387,53 @@ const transformListType = {
          { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);
     }, `${property}: translate on rotate`);
 
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = 'rotate(45deg)';
+      const animation =
+        target.animate({ [idlName]: ['rotate(45deg) translateX(0px)',
+                                     'rotate(45deg) translateX(100px)'] },
+                       { duration: 1000, fill: 'both', composite: 'accumulate' });
+
+      testAnimationSampleMatrices(animation, idlName,
+        [{ time: 0,    expected: [ Math.cos(Math.PI / 2),
+                                   Math.sin(Math.PI / 2),
+                                  -Math.sin(Math.PI / 2),
+                                   Math.cos(Math.PI / 2),
+                                   0 * Math.cos(Math.PI / 2),
+                                   0 * Math.sin(Math.PI / 2) ] },
+         { time: 1000, expected: [ Math.cos(Math.PI / 2),
+                                   Math.sin(Math.PI / 2),
+                                  -Math.sin(Math.PI / 2),
+                                   Math.cos(Math.PI / 2),
+                                   100 * Math.cos(Math.PI / 2),
+                                   100 * Math.sin(Math.PI / 2) ] }]);
+    }, `${property}: rotate and translate on rotate`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = 'rotate(45deg) translateX(100px)';
+      const animation =
+        target.animate({ [idlName]: ['rotate(45deg)', 'rotate(45deg)'] },
+                       { duration: 1000, fill: 'both', composite: 'accumulate' });
+
+      testAnimationSampleMatrices(animation, idlName,
+        [{ time: 0,    expected: [ Math.cos(Math.PI / 2),
+                                   Math.sin(Math.PI / 2),
+                                  -Math.sin(Math.PI / 2),
+                                   Math.cos(Math.PI / 2),
+                                   100 * Math.cos(Math.PI / 2),
+                                   100 * Math.sin(Math.PI / 2) ] },
+         { time: 1000, expected: [ Math.cos(Math.PI / 2),
+                                   Math.sin(Math.PI / 2),
+                                  -Math.sin(Math.PI / 2),
+                                   Math.cos(Math.PI / 2),
+                                   100 * Math.cos(Math.PI / 2),
+                                   100 * Math.sin(Math.PI / 2) ] }]);
+    }, `${property}: rotate on roate and translate`);
+
     test(t => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);