--- 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
@@ -908,16 +908,66 @@ const transformListType = {
var target = createTestElement(t, setup);
var animation =
target.animate({ [idlName]: ['rotateY(60deg)', 'none' ] }, 1000);
testAnimationSampleMatrices(animation, idlName,
// 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) {
test(function(t) {
var idlName = propertyToIDL(property);
var target = createTestElement(t, setup);
target.style[idlName] = 'translateX(100px)';
var animation = target.animate({ [idlName]: ['translateX(-200px)',
@@ -1073,16 +1123,65 @@ const transformListType = {
var animation =
target.animate({ [idlName]: [ from, to ] },
{ duration: 1000, fill: 'both', composite: 'add' });
testAnimationSampleMatrices(animation, idlName,
[{ 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) {
test(function(t) {
var idlName = propertyToIDL(property);
var target = createTestElement(t, setup);
target.style[idlName] = 'translateX(100px)';
var animation = target.animate({ [idlName]: ['translateX(-200px)',
@@ -1240,16 +1339,101 @@ const transformListType = {
var animation =
target.animate({ [idlName]: [ 'none', 'none' ] },
{ duration: 1000, fill: 'both', composite: 'accumulate' });
testAnimationSampleMatrices(animation, idlName,
[{ 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)');
},
};
const filterListType = {
testInterpolation: function(property, setup) {
test(function(t) {
var idlName = propertyToIDL(property);
var target = createTestElement(t, setup);