third_party/WebKit/LayoutTests/animations/transform-post-multiplication.html - Issue 2519333004: Don't use post multiplication on transforms with compatible pairs of operations

Side by Side Diff: third_party/WebKit/LayoutTests/animations/transform-post-multiplication.html

Issue 2519333004: Don't use post multiplication on transforms with compatible pairs of operations (Closed)

Patch Set: Rename Created 4 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

« no previous file with comments | « third_party/WebKit/LayoutTests/animations/interpolation/transform-interpolation.html ('k') | third_party/WebKit/Source/platform/transforms/RotateTransformOperation.h » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <meta charset="UTF-8">

	3 <script src="../resources/testharness.js"></script>

	4 <script src="../resources/testharnessreport.js"></script>

	5 <div id="target"></div>

	6 <script>

	7 // These tests target post multiplication interpolation behaviour of the transfo rm property.

	8 // https://drafts.csswg.org/css-transforms-1/#interpolation-of-transforms

	9

	10 function assertPostMultiplication(start, end) {

	11 test(() => {

	12 assert_true(interpolationUsesPostMultiplication(start, end));

	13 }, 'Animating transform from ' + start + ' to ' + end + ' should use post mult iplication');

	14 }

	15

	16 function assertNoPostMultiplication(start, end) {

	17 test(() => {

	18 assert_false(interpolationUsesPostMultiplication(start, end));

	19 }, 'Animating transform from ' + start + ' to ' + end + ' should not use post multiplication');

	20 }

	21

	22 function interpolationUsesPostMultiplication(start, end) {

	23 // This value prefix will cause post multiplication to interpolate different ly than pairwise interpolation.

	24 var testStart = 'rotate(90deg) translateX(10px) ' + start;

	25 var testEnd = 'rotate(90deg) translateX(100px) ' + end;

	26

	27 var animation = target.animate({transform: [toMatrix(testStart), toMatrix(te stEnd)]}, 1);

	28 animation.currentTime = 0.5;

	29 var postMultipliedInterpolation = getComputedStyle(target).transform;

	30 animation.cancel();

	31

	32 animation = target.animate({transform: [testStart, testEnd]}, 1);

	33 animation.currentTime = 0.5;

	34 var interpolation = getComputedStyle(target).transform;

	35 animation.cancel();

	36

	37 return matricesApproxEqual(interpolation, postMultipliedInterpolation, 0.01) ;

	38 }

	39

	40 function toMatrix(transform) {

	41 target.style.transform = transform;

	42 var matrix = getComputedStyle(target).transform;

	43 target.style.transform = '';

	44 return matrix;

	45 }

	46

	47 function matricesApproxEqual(actualMatrix, expectedMatrix, epsilon) {

	48 var actualNumbers = actualMatrix.split(/[^\d\.-]/).map(Number);

	49 var expectedNumbers = expectedMatrix.split(/[^\d\.-]/).map(Number);

	50 if (actualNumbers.length !== expectedNumbers.length) {

	51 return false;

	52 }

	53 for (var i = 0; i < actualNumbers.length; i++) {

	54 if (Math.abs(actualNumbers[i] - expectedNumbers[i]) > epsilon) {

	55 return false;

	56 }

	57 }

	58 return true;

	59 }

	60

	61 assertPostMultiplication('translateX(10px)', 'matrix(1, 1, 1, 1, 1, 1)');

	62 assertPostMultiplication('translateX(10px)', 'rotate(90deg)');

	63 assertPostMultiplication('skewX(90deg)', 'skewY(90deg)');

	64 assertPostMultiplication('skew(90deg, 0deg)', 'skewY(90deg)');

	65 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)');

	66

	67 assertNoPostMultiplication('translate(10px, 20px)', 'translateX(100px)');

	68 assertNoPostMultiplication('translateX(10px)', 'translateY(100px)');

	69 assertNoPostMultiplication('translateX(10px)', 'translateZ(100px)');

	70 assertNoPostMultiplication('translateZ(10px)', 'translate3d(100px, 20px, 30px)') ;

	71 assertNoPostMultiplication('scaleX(2)', 'scaleY(1)');

	72 assertNoPostMultiplication('scaleX(2)', 'scaleZ(1)');

	73 assertNoPostMultiplication('scaleX(2)', 'scale(1, 2)');

	74 assertNoPostMultiplication('scaleX(2)', 'scale3d(1, 2, 3)');

	75 assertNoPostMultiplication('skewY(10deg)', 'skewY(90deg)');

	76 assertNoPostMultiplication('rotate(10deg)', 'rotate(90deg)');

	77 assertNoPostMultiplication('rotateY(10deg)', 'rotateY(90deg)');

	78 assertNoPostMultiplication('rotateX(90deg)', 'rotateY(90deg)');

	79 assertNoPostMultiplication('rotate(10deg)', 'rotate3d(1, 2, 1, 90deg)');

	80 assertNoPostMultiplication('rotate(10deg)', 'rotateZ(90deg)');

	81 assertNoPostMultiplication('rotate(10deg)', 'rotate3d(0, 0, 1, 90deg)');

	82 assertNoPostMultiplication('rotate(10deg)', 'rotate3d(0, 0, 2, 90deg)');

	83 assertNoPostMultiplication('rotateX(10deg)', 'rotate3d(1, 0, 0, 100deg)');

	84 assertNoPostMultiplication('perspective(10px)', 'perspective(100px)');

	85 assertNoPostMultiplication('matrix(1, 0, 0, 1, 0, 0)', 'matrix(2, 0, 0, 2, 0, 0) ');

	86 </script>

OLD	NEW