blob: ca8d061fda82fab1f70f21e155b8b252cbe9e887 [file] [log] [blame]
<!DOCTYPE html>
<meta charset="UTF-8">
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div id="target"></div>
<script>
// These tests target post multiplication interpolation behaviour of the transform property.
// https://drafts.csswg.org/css-transforms-1/#interpolation-of-transforms
function assertPostMultiplication(start, end) {
test(() => {
assert_true(interpolationUsesPostMultiplication(start, end));
}, 'Animating transform from ' + start + ' to ' + end + ' should use post multiplication');
}
function assertNoPostMultiplication(start, end) {
test(() => {
assert_false(interpolationUsesPostMultiplication(start, end));
}, 'Animating transform from ' + start + ' to ' + end + ' should not use post multiplication');
}
function interpolationUsesPostMultiplication(start, end) {
// This value prefix will cause post multiplication to interpolate differently than pairwise
// interpolation. Flipping both the x and y scales is equivalent to a 180 degree rotation in
// its matrix representation.
var testStart = 'scale(-1, -1) ' + start;
var testEnd = 'scale(1, 1) ' + end;
var animation = target.animate({transform: [toMatrix(testStart), toMatrix(testEnd)]}, 1);
animation.currentTime = 0.5;
var postMultipliedInterpolation = getComputedStyle(target).transform;
animation.cancel();
animation = target.animate({transform: [testStart, testEnd]}, 1);
animation.currentTime = 0.5;
var interpolation = getComputedStyle(target).transform;
animation.cancel();
return matricesApproxEqual(interpolation, postMultipliedInterpolation, 0.01);
}
function toMatrix(transform) {
target.style.transform = transform;
var matrix = getComputedStyle(target).transform;
target.style.transform = '';
return matrix;
}
function matricesApproxEqual(actualMatrix, expectedMatrix, epsilon) {
var extractmatrix = function(matrixStr) {
var list = [];
var regex = /[+\-]?[0-9]+[.]?[0-9]*(e[+/-][0-9]+)?/g;
var match = undefined;
do {
match = regex.exec(matrixStr);
if (match) {
list.push(parseFloat(match[0]));
}
} while (match);
return list;
}
var actualNumbers = extractmatrix(actualMatrix);
var expectedNumbers = extractmatrix(expectedMatrix);
if (actualNumbers.length !== expectedNumbers.length) {
return false;
}
for (var i = 0; i < actualNumbers.length; i++) {
if (Math.abs(actualNumbers[i] - expectedNumbers[i]) > epsilon) {
return false;
}
}
return true;
}
// Verify that the transform prefix generates different interpolations based on matrix and pairwise
// interpolation.
assertNoPostMultiplication('', '');
// Transforms are not of the same type: fallback to 4x4 matrix.
assertPostMultiplication('translateX(10px)', 'matrix(1, 1, 0, 1, 1, 1)');
assertPostMultiplication('translateX(10px)', 'rotate(90deg)');
assertPostMultiplication('skewX(45deg)', 'translateX(10px)');
assertPostMultiplication(
'matrix(1, 0, 0, 1, 0, 0)',
'matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1)');
// TODO(kevers): Investigate if skewX(a) and skewY(b) should map to skew(a, 0) and skew(0, b),
// respectively. If correct, then pairwise interpolation should be used.
assertPostMultiplication('skewX(15deg)', 'skewY(15deg)');
assertPostMultiplication('skew(15deg, 0deg)', 'skewY(15deg)');
// Transform pairs can be expressed in the form of a common primitive.
assertNoPostMultiplication('translate(10px, 20px)', 'translateX(100px)');
assertNoPostMultiplication('translateX(10px)', 'translateY(100px)');
assertNoPostMultiplication('translateX(10px)', 'translateZ(100px)');
assertNoPostMultiplication('translateZ(10px)', 'translate3d(100px, 20px, 30px)');
assertNoPostMultiplication('scaleX(2)', 'scaleY(1)');
assertNoPostMultiplication('scaleX(2)', 'scaleZ(1)');
assertNoPostMultiplication('scaleX(2)', 'scale(1, 2)');
assertNoPostMultiplication('scaleX(2)', 'scale3d(1, 2, 3)');
assertNoPostMultiplication('skewY(10deg)', 'skewY(15deg)');
assertNoPostMultiplication('skew(10deg, 0)', 'skew(10deg, 0)');
assertNoPostMultiplication('rotate(10deg)', 'rotate(90deg)');
assertNoPostMultiplication('rotateY(10deg)', 'rotateY(90deg)');
assertNoPostMultiplication('rotateX(90deg)', 'rotateY(90deg)');
assertNoPostMultiplication('rotate(10deg)', 'rotate3d(1, 2, 1, 90deg)');
assertNoPostMultiplication('rotate(10deg)', 'rotateZ(90deg)');
assertNoPostMultiplication('rotate(10deg)', 'rotate3d(0, 0, 1, 90deg)');
assertNoPostMultiplication('rotate(10deg)', 'rotate3d(0, 0, 2, 90deg)');
assertNoPostMultiplication('rotateX(10deg)', 'rotate3d(1, 0, 0, 100deg)');
assertNoPostMultiplication('perspective(10px)', 'perspective(100px)');
assertNoPostMultiplication('matrix(1, 0, 0, 1, 0, 0)', 'matrix(2, 0, 0, 2, 0, 0)');
</script>