Bug 1304886 - Part 10: Add rotate3d test case. r?boris draft
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Wed, 16 Nov 2016 18:59:26 +0900
changeset 439595 47045adb1b98b77a99a1332cd8c9f5f51f905919
parent 439594 92a64f2d09279dff16c2623c73ce81eb3fa391f6
child 537219 e72e67d95ffe5f2f4832fb5679f9861c6cfa4bb2
push id36056
push userhiikezoe@mozilla-japan.org
push dateWed, 16 Nov 2016 11:13:11 +0000
reviewersboris
bugs1304886
milestone53.0a1
Bug 1304886 - Part 10: Add rotate3d test case. r?boris MozReview-Commit-ID: 6gDhughPrps
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
@@ -4,16 +4,70 @@
 <link rel="help" href="https://w3c.github.io/web-animations/#effect-accumulation-section">
 <script src=/resources/testharness.js></script>
 <script src=/resources/testharnessreport.js></script>
 <script src="../../testcommon.js"></script>
 <div id="log"></div>
 <script>
 'use strict';
 
+/*
+ * Compare matrix string like 'matrix(1, 0, 0, 1, 100, 0)' with tolerances.
+ */
+function assert_matrix_equals(actual, expected, description) {
+  var matrixRegExp = /^matrix(?:3d)*\((.+)\)/;
+  assert_regexp_match(actual, matrixRegExp,
+    'Actual value is not a matrix')
+  assert_regexp_match(expected, matrixRegExp,
+    'Expected value is not a matrix');
+
+  var actualMatrixArray =
+    actual.match(matrixRegExp)[1].split(',').map(Number);
+  var expectedMatrixArray =
+    expected.match(matrixRegExp)[1].split(',').map(Number);
+
+  assert_equals(actualMatrixArray.length, expectedMatrixArray.length,
+    'dimention of the matrix: ' + description);
+  for (var i = 0; i < actualMatrixArray.length; i++) {
+    assert_approx_equals(actualMatrixArray[i], expectedMatrixArray[i], 0.01,
+      'expecetd ' + expected + ' but got ' + actual + ": " + description);
+  }
+}
+
+// https://www.w3.org/TR/css-transforms-1/#Rotate3dDefined
+function rotate3dToMatrix3d(x, y, z, radian) {
+  var sc = Math.sin(radian / 2) * Math.cos(radian / 2);
+  var sq = Math.sin(radian / 2) * Math.sin(radian / 2);
+
+  // Normalize the vector.
+  var length = Math.sqrt(x*x + y*y + z*z);
+  x /= length;
+  y /= length;
+  z /= length;
+
+  return 'matrix3d(' + [
+    1 - 2 * (y*y + z*z) * sq,
+    2 * (x * y * sq + z * sc),
+    2 * (x * z * sq - y * sc),
+    0,
+    2 * (x * y * sq - z * sc),
+    1 - 2 * (x*x + z*z) * sq,
+    2 * (y * z * sq + x * sc),
+    0,
+    2 * (x * z * sq + y * sc),
+    2 * (y * z * sq - x * sc),
+    1 - 2 * (x*x + y*y) * sq,
+    0,
+    0,
+    0,
+    0,
+    1
+  ].join() + ')';
+}
+
 test(function(t) {
   var div = createDiv(t);
   var anim =
     div.animate({ alignContent: ['flex-start', 'flex-end'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
@@ -733,16 +787,41 @@ test(function(t) {
     // 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);
   var anim =
+    div.animate({ transform: ['rotate3d(1, 1, 0, 0deg)',
+                              '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,
+    '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,
+    rotate3dToMatrix3d(1, 1, 0, 225 * Math.PI / 180), //((270 + 180) * 0.5)deg
+    'Animated transform of rotate3d function at 50s of the third iteration');
+}, 'iterationComposite of transform of rotate3d function');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim =
     div.animate({ marginLeft: ['10px', '20px'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
                   iterationComposite: 'accumulate' });
   anim.pause();
 
   anim.currentTime = anim.effect.timing.duration / 2;