Bug 1353202 - Use assert_matrix_equal to compare matrices in iterationComposite.html test draft
authorBrian Birtles <birtles@gmail.com>
Mon, 22 May 2017 16:40:45 +0900
changeset 582331 9a9817372de059e31de4b1a5b827fe8f19f9ea46
parent 582330 e8e9cf9a147c5077bc2f5cfb3c5d0428e8bb8b01
child 629728 6a918ebdc42d797b82985af98478f39acef4eef9
push id60038
push userbbirtles@mozilla.com
push dateMon, 22 May 2017 07:45:43 +0000
bugs1353202
milestone55.0a1
Bug 1353202 - Use assert_matrix_equal to compare matrices in iterationComposite.html test MozReview-Commit-ID: BOG3TrbEH0u
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
testing/web-platform/tests/web-animations/testcommon.js
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
@@ -442,150 +442,150 @@ test(function(t) {
     div.animate({ transform: ['rotate(0deg)', 'rotate(180deg)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0, 1, -1, 0, 0, 0)', // rotate(90deg)
     'Animated transform(rotate) style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(1, 0, 0, 1, 0, 0)', // rotate(360deg)
     'Animated transform(rotate) style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0, 1, -1, 0, 0, 0)', // rotate(450deg)
     'Animated transform(rotate) style at 50s of the third iteration');
 }, 'iterationComposite of transform(rotate) animation');
 
 test(function(t) {
   var div = createDiv(t);
   var anim =
     div.animate({ transform: ['scale(0)', 'scale(1)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5)
     'Animated transform(scale) style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0, 0, 0, 0, 0, 0)', // scale(0); scale(1) is an identity element,
                                 // not accumulated.
     'Animated transform(scale) style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5); scale(1) an identity
                                     // element, not accumulated.
     'Animated transform(scale) style at 50s of the third iteration');
 }, 'iterationComposite of transform: [ scale(0), scale(1) ] animation');
 
 test(function(t) {
   var div = createDiv(t);
   var anim =
     div.animate({ transform: ['scale(1)', 'scale(2)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(1.5, 0, 0, 1.5, 0, 0)', // scale(1.5)
     'Animated transform(scale) style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(3, 0, 0, 3, 0, 0)', // scale(1 + (2 -1) + (2 -1))
     'Animated transform(scale) style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(3.5, 0, 0, 3.5, 0, 0)', // (scale(3) + scale(4)) * 0.5
     'Animated transform(scale) style at 50s of the third iteration');
 }, 'iterationComposite of transform: [ scale(1), scale(2) ] animation');
 
 test(function(t) {
   var div = createDiv(t);
   var anim =
     div.animate({ transform: ['scale(0)', 'scale(2)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(1, 0, 0, 1, 0, 0)', // scale(1)
     'Animated transform(scale) style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(2, 0, 0, 2, 0, 0)', // (scale(0) + scale(2-1)*2)
     'Animated transform(scale) style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(3, 0, 0, 3, 0, 0)', // (scale(2) + scale(4)) * 0.5
     'Animated transform(scale) style at 50s of the third iteration');
 }, 'iterationComposite of transform: scale(2) animation');
 
 test(function(t) {
   var div = createDiv(t);
   var anim =
     div.animate({ transform: ['rotate(0deg) translateX(0px)',
                               'rotate(180deg) translateX(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0, 1, -1, 0, 0, 5)', // rotate(90deg) translateX(5px)
     'Animated transform list at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(1, 0, 0, 1, 20, 0)', // rotate(360deg) translateX(20px)
     'Animated transform list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0, 1, -1, 0, 0, 25)', // rotate(450deg) translateX(25px)
     'Animated transform list at 50s of the third iteration');
 }, 'iterationComposite of transform list animation');
 
 test(function(t) {
   var div = createDiv(t);
   var anim =
     div.animate({ transform: ['matrix(2, 0, 0, 2, 0, 0)',
                               'matrix(3, 0, 0, 3, 30, 0)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(2.5, 0, 0, 2.5, 15, 0)',
     'Animated transform of matrix function at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // scale(2) + (scale(3-1)*2) + translateX(30px)*2
     'matrix(6, 0, 0, 6, 60, 0)',
     'Animated transform of matrix function at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // from: matrix(6, 0, 0, 6, 60, 0)
     // to:   matrix(7, 0, 0, 7, 90, 0)
     //         = scale(3) + (scale(3-1)*2) + translateX(30px)*3
     'matrix(6.5, 0, 0, 6.5, 75, 0)',
     'Animated transform of matrix function at 50s of the third iteration');
 }, 'iterationComposite of transform of matrix function');
 
 test(function(t) {
@@ -595,30 +595,30 @@ test(function(t) {
                               'scale(3) translateX(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // Interpolate between matrix(2, 0, 0, 2,  0, 0) = translateX(0px) scale(2)
     //                 and matrix(3, 0, 0, 3, 30, 0) = scale(3) translateX(10px)
     'matrix(2.5, 0, 0, 2.5, 15, 0)',
     'Animated transform list at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // 'from' and 'to' value are mismatched, so accumulate
     // matrix(2, 0, 0, 2, 0, 0) onto matrix(3, 0, 0, 3, 30, 0) * 2
     //  = scale(2) + (scale(3-1)*2) + translateX(30px)*2
     'matrix(6, 0, 0, 6, 60, 0)',
     'Animated transform list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // Interpolate between matrix(6, 0, 0, 6, 60, 0)
     //                 and matrix(7, 0, 0, 7, 210, 0) = scale(7) translate(30px)
     'matrix(6.5, 0, 0, 6.5, 135, 0)',
     'Animated transform list at 50s of the third iteration');
 }, 'iterationComposite of transform list animation whose order is mismatched');
 
 test(function(t) {
   var div = createDiv(t);
@@ -629,30 +629,30 @@ test(function(t) {
                               'scale(2) translateX(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // Interpolate between matrix(1, 0, 0, 1,  0, 0) = translateX(0px)
     //                 and matrix(2, 0, 0, 2, 20, 0) = scale(2) translateX(10px)
     'matrix(1.5, 0, 0, 1.5, 10, 0)',
     'Animated transform list at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // 'from' and 'to' value are mismatched, so accumulate
     // matrix(1, 0, 0, 1, 0, 0) onto matrix(2, 0, 0, 2, 20, 0) * 2
     //  = scale(1) + (scale(2-1)*2) + translateX(20px)*2
     'matrix(3, 0, 0, 3, 40, 0)',
     'Animated transform list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // Interpolate between matrix(3, 0, 0, 3, 40, 0)
     //                 and matrix(4, 0, 0, 4, 120, 0) =
     //                       scale(2 + (2-1)*2) translate(10px * 3)
     'matrix(3.5, 0, 0, 3.5, 80, 0)',
     'Animated transform list at 50s of the third iteration');
 }, 'iterationComposite of transform list animation whose order is mismatched ' +
    'because of missing functions');
 
@@ -663,27 +663,27 @@ test(function(t) {
                               'translateX(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // translateX(none) -> translateX(10px) @ 50%
     'matrix(1, 0, 0, 1, 5, 0)',
     'Animated transform list at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 0%
     'matrix(1, 0, 0, 1, 20, 0)',
     'Animated transform list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 50%
     'matrix(1, 0, 0, 1, 25, 0)',
     'Animated transform list at 50s of the third iteration');
 }, 'iterationComposite of transform from none to translate');
 
 test(function(t) {
   var div = createDiv(t);
   var anim =
@@ -697,26 +697,26 @@ test(function(t) {
                                        '0, 0, 50, 1)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 40, 1)',
     'Animated transform of matrix3d function at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // translateZ(30px) + (translateZ(50px)*2)
     'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)',
     'Animated transform of matrix3d function at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     // from: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)
     // to:   matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 150, 1)
     'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 140, 1)',
     'Animated transform of matrix3d function at 50s of the third iteration');
 }, 'iterationComposite of transform of matrix3d function');
 
 test(function(t) {
   var div = createDiv(t);
@@ -725,17 +725,17 @@ test(function(t) {
                               'rotate3d(1, 1, 0, 90deg)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = 0;
-  assert_equals(getComputedStyle(div).transform,
+  assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(1, 0, 0, 1, 0, 0)', // Actually not rotated at all.
     'Animated transform of rotate3d function at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     rotate3dToMatrix3d(1, 1, 0, Math.PI), // 180deg
     'Animated transform of rotate3d function at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
--- a/testing/web-platform/tests/web-animations/testcommon.js
+++ b/testing/web-platform/tests/web-animations/testcommon.js
@@ -233,11 +233,11 @@ function assert_matrix_equals(actual, ex
     actual.match(matrixRegExp)[1].split(',').map(Number);
   var expectedMatrixArray =
     expected.match(matrixRegExp)[1].split(',').map(Number);
 
   assert_equals(actualMatrixArray.length, expectedMatrixArray.length,
     'dimension of the matrix: ' + description);
   for (var i = 0; i < actualMatrixArray.length; i++) {
     assert_approx_equals(actualMatrixArray[i], expectedMatrixArray[i], 0.0001,
-      'expecetd ' + expected + ' but got ' + actual + ": " + description);
+      'expected ' + expected + ' but got ' + actual + ": " + description);
   }
 }