Merge pull request web-animations#427 from ericwilligers/rotation-units

Matrix decomposition: support angle units grad and turn

Author: alancutter

src/matrix-decomposition.js

@@ -253,29 +253,32 @@
     ];
   }
 
+  function toRadians(arg) {
+    var rads = arg.rad || 0;
+    var degs = arg.deg || 0;
+    var grads = arg.grad || 0;
+    var turns = arg.turn || 0;
+    var angle = (degs / 360 + grads / 400 + turns) * (2 * Math.PI) + rads;
+    return angle;
+  }
+
   function convertItemToMatrix(item) {
     switch (item.t) {
       case 'rotatex':
-        var rads = item.d[0].rad || 0;
-        var degs = item.d[0].deg || 0;
-        var angle = (degs * Math.PI / 180) + rads;
+        var angle = toRadians(item.d[0]);
         return [1, 0, 0, 0,
                 0, Math.cos(angle), Math.sin(angle), 0,
                 0, -Math.sin(angle), Math.cos(angle), 0,
                 0, 0, 0, 1];
       case 'rotatey':
-        var rads = item.d[0].rad || 0;
-        var degs = item.d[0].deg || 0;
-        var angle = (degs * Math.PI / 180) + rads;
+        var angle = toRadians(item.d[0]);
         return [Math.cos(angle), 0, -Math.sin(angle), 0,
                 0, 1, 0, 0,
                 Math.sin(angle), 0, Math.cos(angle), 0,
                 0, 0, 0, 1];
       case 'rotate':
       case 'rotatez':
-        var rads = item.d[0].rad || 0;
-        var degs = item.d[0].deg || 0;
-        var angle = (degs * Math.PI / 180) + rads;
+        var angle = toRadians(item.d[0]);
         return [Math.cos(angle), Math.sin(angle), 0, 0,
                 -Math.sin(angle), Math.cos(angle), 0, 0,
                 0, 0, 1, 0,
@@ -284,9 +287,7 @@
         var x = item.d[0];
         var y = item.d[1];
         var z = item.d[2];
-        var rads = item.d[3].rad || 0;
-        var degs = item.d[3].deg || 0;
-        var angle = (degs * Math.PI / 180) + rads;
+        var angle = toRadians(item.d[3]);
 
         var sqrLength = x * x + y * y + z * z;
         if (sqrLength === 0) {
@@ -347,28 +348,20 @@
                 0, 0, item.d[2], 0,
                 0, 0, 0, 1];
       case 'skew':
-        var xDegs = item.d[0].deg || 0;
-        var xRads = item.d[0].rad || 0;
-        var yDegs = item.d[1].deg || 0;
-        var yRads = item.d[1].rad || 0;
-        var xAngle = (xDegs * Math.PI / 180) + xRads;
-        var yAngle = (yDegs * Math.PI / 180) + yRads;
+        var xAngle = toRadians(item.d[0]);
+        var yAngle = toRadians(item.d[1]);
         return [1, Math.tan(yAngle), 0, 0,
                 Math.tan(xAngle), 1, 0, 0,
                 0, 0, 1, 0,
                 0, 0, 0, 1];
       case 'skewx':
-        var rads = item.d[0].rad || 0;
-        var degs = item.d[0].deg || 0;
-        var angle = (degs * Math.PI / 180) + rads;
+        var angle = toRadians(item.d[0]);
         return [1, 0, 0, 0,
                 Math.tan(angle), 1, 0, 0,
                 0, 0, 1, 0,
                 0, 0, 0, 1];
       case 'skewy':
-        var rads = item.d[0].rad || 0;
-        var degs = item.d[0].deg || 0;
-        var angle = (degs * Math.PI / 180) + rads;
+        var angle = toRadians(item.d[0]);
         return [1, Math.tan(angle), 0, 0,
                 0, 1, 0, 0,
                 0, 0, 1, 0,

test/js/matrix-interpolation.js

@@ -407,42 +407,42 @@ suite('matrix interpolation', function() {
   test('decompose various CSS properties with unsupported units', function() {
     compareInterpolatedTransforms(
         ['rotateX(110grad)', 'rotateX(10deg) matrix(1, 0, 0, 1, 0, 0)'],
-        ['rotateX(0deg)', 'rotateX(10deg) matrix(1, 0, 0, 1, 0, 0)'],
+        ['rotateX(99deg)', 'rotateX(10deg) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['rotateY(2turn)', 'rotateY(2rad) matrix(1, 0, 0, 1, 0, 0)'],
-        ['rotateY(0rad)', 'rotateY(2rad) matrix(1, 0, 0, 1, 0, 0)'],
+        ['rotateY(12.56637rad)', 'rotateY(2rad) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['rotate(320deg)', 'rotateY(10grad) matrix(1, 0, 0, 1, 0, 0)'],
-        ['rotate(320deg)', 'rotateY(0deg) matrix(1, 0, 0, 1, 0, 0)'],
+        ['rotate(320deg)', 'rotateY(9deg) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['rotateZ(10grad)', 'rotateZ(2rad) matrix(1, 0, 0, 1, 0, 0)'],
-        ['rotateZ(0rad)', 'rotateZ(2rad) matrix(1, 0, 0, 1, 0, 0)'],
+        ['rotateZ(0.157rad)', 'rotateZ(2rad) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['rotate3d(1, 1, 1, 100deg)', 'rotate3d(1, 1, 1, 2turn) matrix(1, 0, 0, 1, 0, 0)'],
-        ['rotate3d(1, 1, 1, 100deg)', 'rotate3d(1, 1, 1, 0deg) matrix(1, 0, 0, 1, 0, 0)'],
+        ['rotate3d(1, 1, 1, 100deg)', 'rotate3d(1, 1, 1, 720deg) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['skew(30grad)', 'skew(10deg) matrix(1, 0, 0, 1, 0, 0)'],
-        ['skew(0deg)', 'skew(10deg) matrix(1, 0, 0, 1, 0, 0)'],
+        ['skew(27deg)', 'skew(10deg) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['skewx(3grad)', 'skewx(1rad) matrix(1, 0, 0, 1, 0, 0)'],
-        ['skewx(0rad)', 'skewx(1rad) matrix(1, 0, 0, 1, 0, 0)'],
+        ['skewx(0.04712rad)', 'skewx(1rad) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['skewy(3rad)', 'skewy(1grad) matrix(1, 0, 0, 1, 0, 0)'],
-        ['skewy(3rad)', 'skewy(0rad) matrix(1, 0, 0, 1, 0, 0)'],
+        ['skewy(3rad)', 'skewy(0.0157rad) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(