Bug 1394284 - add wpt test for fallback discrete type of transform animation. r=boris,hiro

According to the spec, if one of the matrices for transform interpolation is
non-invertible, the used animation function must fall-back to a discrete
animation. Add wpt tests so we can ensure the web compability for this behavior.

Note that we don't add 'discrete' type for transform property in property-list.js.
Because the 'discrete' type also tests discrete addition and accumulation,
however, the fallback behavior is just for interpolation and accumulation, not
for addition. So, we add tests in each part of transformListType in property-types.js.

One test is failing in Gecko, so annotate it for Gecko.

MozReview-Commit-ID: 3JGvgqbBqZp

--HG--
extra : rebase_source : 216c471580ad419eb65a6373ea21864fad4b5767

testing/web-platform/meta/MANIFEST.json

@@ -627707,7 +627707,7 @@
    "support"
   ],
   "web-animations/animation-model/animation-types/property-types.js": [
-   "98c3bbc4e0403d289a053711ebba7a0029345282",
+   "4b9e06fc9014110a711c590f866a149d31a9a6fa",
    "support"
   ],
   "web-animations/animation-model/combining-effects/effect-composition.html": [

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

@@ -15,3 +15,8 @@ prefs: [layout.css.font-variations.enabled:true, layout.css.overflow-clip-box.en
       if stylo: PASS
       FAIL
 
+  [transform: non-invertible matrices in matched transform lists]
+    expected:
+      if stylo: PASS
+      FAIL
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1400167

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

@@ -913,6 +913,56 @@ const transformListType = {
                    // rotateY(30deg) == rotate3D(0, 1, 0, 30deg)
         [{ time: 500, expected: rotate3dToMatrix(0, 1, 0, Math.PI / 6) }]);
     }, property + ': rotateY');
+
+    // Following tests aim for test the fallback discrete interpolation behavior
+    // for non-invertible matrices. The non-invertible matrix that we use is the
+    // singuler matrix, matrix(1, 1, 0, 0, 0, 100).
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation =
+        target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',
+                                     'matrix( 1, 1, 0,  0, 0, 100)'] },
+                       { duration: 1000, fill: 'both' });
+
+      testAnimationSampleMatrices(animation, idlName,
+        [ { time: 0,    expected: [ -1, 0, 0, -1, 200,   0 ] },
+          { time: 499,  expected: [ -1, 0, 0, -1, 200,   0 ] },
+          { time: 500,  expected: [  1, 1, 0,  0,   0, 100 ] },
+          { time: 1000, expected: [  1, 1, 0,  0,   0, 100 ] }]);
+    }, property + ': non-invertible matrices');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation =                // matrix(0, -1, 1, 0, 250, 0)
+        target.animate({ [idlName]: ['translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
+                                     // matrix(-1, -1, 0, 0, 100, 100)
+                                     'translate(100px) matrix( 1, 1, 0,  0, 0, 100) rotate(180deg)'] },
+                       { duration: 1000, fill: 'both' });
+
+      testAnimationSampleMatrices(animation, idlName,
+        [ { time: 0,    expected: [  0, -1, 1, 0, 250,   0 ] },
+          { time: 499,  expected: [  0, -1, 1, 0, 250,   0 ] },
+          { time: 500,  expected: [ -1, -1, 0, 0, 100, 100 ] },
+          { time: 1000, expected: [ -1, -1, 0, 0, 100, 100 ] }]);
+    }, property + ': non-invertible matrices in matched transform lists');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation =                // matrix(-2, 0, 0, -2, 250, 0)
+        target.animate({ [idlName]: ['translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',
+                                     // matrix(1, 1, 1, 1, 100, 100)
+                                     'translate(100px) matrix( 1, 1, 0,  0, 0, 100) skew(45deg)'] },
+                       { duration: 1000, fill: 'both' });
+
+      testAnimationSampleMatrices(animation, idlName,
+        [ { time: 0,    expected: [ -2, 0, 0, -2, 250,   0 ] },
+          { time: 499,  expected: [ -2, 0, 0, -2, 250,   0 ] },
+          { time: 500,  expected: [  1, 1, 1,  1, 100, 100 ] },
+          { time: 1000, expected: [  1, 1, 1,  1, 100, 100 ] }]);
+    }, property + ': non-invertible matrices in mismatched transform lists');
   },
 
   testAddition: function(property, setup) {
@@ -1078,6 +1128,55 @@ const transformListType = {
         [{ time: 0,    expected: rotate3dToMatrix(1, 1, 0,    -Math.PI / 4) },
          { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);
     }, property + ': matrix3d');
+
+    // Following tests aim for test the addition behavior for non-invertible
+    // matrices. Note that the addition for non-invertible matrices should be
+    // the same, just like addition for invertible matrices. With these tests,
+    // we can assure that addition never behaves as discrete. The non-invertible
+    // matrix that we use is the singuler matrix, matrix(1, 1, 0, 0, 0, 100).
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      target.style[idlName] = 'translateX(50px)';
+      var animation =
+        target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',
+                                     'matrix( 1, 1, 0,  0, 0, 100)'] },
+                       { duration: 1000, fill: 'both', composite: 'add' });
+
+      testAnimationSampleMatrices(animation, idlName,
+        [ { time: 0,    expected: [ -1, 0, 0, -1, 250,   0 ] },
+          { time: 1000, expected: [  1, 1, 0,  0,  50, 100 ] }]);
+    }, property + ': non-invertible matrices');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      target.style[idlName] = 'translateX(50px)';
+      var animation =                // matrix(0, -1, 1, 0, 200, 0)
+        target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
+                                     // matrix(-1, -1, 0, 0, 0, 100)
+                                     'matrix( 1, 1, 0,  0, 0, 100) rotate(180deg)'] },
+                       { duration: 1000, fill: 'both', composite: 'add' });
+
+      testAnimationSampleMatrices(animation, idlName,
+        [ { time: 0,    expected: [  0, -1, 1, 0, 250,   0 ] },
+          { time: 1000, expected: [ -1, -1, 0, 0,  50, 100 ] }]);
+    }, property + ': non-invertible matrices in matched transform lists');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      target.style[idlName] = 'translateX(50px)';
+      var animation =                // matrix(-2, 0, 0, -2, 200, 0)
+        target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) scale(2)',
+                                     // matrix(1, 1, 1, 1, 0, 100)
+                                     'matrix( 1, 1, 0,  0, 0, 100) skew(45deg)'] },
+                       { duration: 1000, fill: 'both', composite: 'add' });
+
+      testAnimationSampleMatrices(animation, idlName,
+        [ { time: 0,    expected: [ -2, 0, 0, -2, 250,   0 ] },
+          { time: 1000, expected: [  1, 1, 1,  1,  50, 100 ] }]);
+    }, property + ': non-invertible matrices in mismatched transform lists');
   },
 
   testAccumulation: function(property, setup) {
@@ -1245,6 +1344,91 @@ const transformListType = {
         [{ time: 0,    expected: matrixArray },
          { time: 1000, expected: matrixArray }]);
     }, property + ': none');
+
+    // Following tests aim for test the fallback discrete accumulation behavior
+    // for non-invertible matrices. The non-invertible matrix that we use is the
+    // singuler matrix, matrix(1, 1, 0, 0, 0, 100).
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',
+                                   'matrix(-1, 0, 0, -1, 200, 0)'] }, 1000);
+      var animation = target.animate({ [idlName]: ['matrix( 1, 1, 0, 0, 0, 100)',
+                                                   'matrix( 1, 1, 0, 0, 0, 100)'] },
+                                     { duration: 1000, composite: 'accumulate' });
+      testAnimationSampleMatrices(animation, idlName,
+                                  [{ time: 0, expected: [ 1, 1, 0, 0, 0, 100 ] }]);
+    }, property + ': non-invertible matrices (non-invertible onto invertible)');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      target.animate({ [idlName]: ['matrix( 1, 1, 0, 0, 0, 100)',
+                                   'matrix( 1, 1, 0, 0, 0, 100)'] }, 1000);
+      var animation = target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',
+                                                   'matrix(-1, 0, 0, -1, 200, 0)'] },
+                                     { duration: 1000, composite: 'accumulate' });
+      testAnimationSampleMatrices(animation, idlName,
+                                  [{ time: 0, expected: [ -1, 0, 0, -1, 200, 0 ] }]);
+    }, property + ': non-invertible matrices (invertible onto non-invertible)');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+                                   // matrix(0, -1, 1, 0, 250, 0)
+      target.animate({ [idlName]: ['translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
+                                   'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)'] }, 1000);
+      var animation =                // matrix(-1, -1, 0, 0, 100, 100)
+        target.animate({ [idlName]: ['translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)',
+                                     'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)'] },
+                       { duration: 1000, composite: 'accumulate' });
+      testAnimationSampleMatrices(animation, idlName,
+                                  [{ time: 0, expected: [ -1, -1, 0, 0, 100, 100 ] }]);
+    }, property + ': non-invertible matrices in matched transform lists (non-invertible onto invertible)');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+                                   // matrix(-1, -1, 0, 0, 100, 100)
+      target.animate({ [idlName]: ['translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)',
+                                   'translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)'] }, 1000);
+      var animation =                // matrix(0, -1, 1, 0, 250, 0)
+        target.animate({ [idlName]: ['translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',
+                                     'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)'] },
+                       { duration: 1000, composite: 'accumulate' });
+      testAnimationSampleMatrices(animation, idlName,
+                                  [{ time: 0, expected: [ 0, -1, 1, 0, 250, 0 ] }]);
+    }, property + ': non-invertible matrices in matched transform lists (invertible onto non-invertible)');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+                                   // matrix(-2, 0, 0, -2, 250, 0)
+      target.animate({ [idlName]: ['translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',
+                                   'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)'] }, 1000);
+      var animation =                // matrix(1, 1, 1, 1, 100, 100)
+        target.animate({ [idlName]: ['translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',
+                                     'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)'] },
+                       { duration: 1000, composite: 'accumulate' });
+      testAnimationSampleMatrices(animation, idlName,
+                                  [{ time: 0, expected: [ 1, 1, 1, 1, 100, 100 ] }]);
+    }, property + ': non-invertible matrices in mismatched transform lists' +
+                  ' (non-invertible onto invertible)');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+                                   // matrix(1, 1, 1, 1, 100, 100)
+      target.animate({ [idlName]: ['translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',
+                                   'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)'] }, 1000);
+      var animation =                // matrix(-2, 0, 0, -2, 250, 0)
+        target.animate({ [idlName]: ['translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',
+                                     'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)'] },
+                       { duration: 1000, composite: 'accumulate' });
+      testAnimationSampleMatrices(animation, idlName,
+                                  [{ time: 0, expected: [ -2, 0, 0, -2, 250, 0 ] }]);
+    }, property + ': non-invertible matrices in mismatched transform lists' +
+                  ' (invertible onto non-invertible)');
   },
 };