mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-10 03:45:46 +00:00
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
This commit is contained in:
parent
d29aaa59a6
commit
8f49fb8f42
@ -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": [
|
||||
|
@ -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
|
||||
|
@ -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)');
|
||||
},
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user