transform-to-matrix/test/test.js

A tiny library to get 2/3D matricies from CSS3 transform functions. Fully covered by unit tests, with support for AMD, CommonJS, Node, and browser globals.

// Generated by CoffeeScript 1.6.3
var div, expect, precision, rotate2d, rotate3d, rotateMatrix, round, styleToArray, test, transformToMatrix;

transformToMatrix = window.transform_to_matrix;

expect = chai.expect;

div = document.getElementById('test');

precision = 100000;

rotate3d = [[0, 4, 8, 12], [1, 5, 9, 13], [2, 6, 10, 14], [3, 7, 11, 15]];

rotate2d = [[0, 2, 4], [1, 3, 5]];

round = function(mixed) {
  return Math.round(mixed * precision) / precision;
};

rotateMatrix = function(matrix) {
  var j, k, num, result, rotate, row, _i, _j, _len, _len1;
  result = [];
  rotate = matrix.length === 4 ? rotate3d : rotate2d;
  for (j = _i = 0, _len = matrix.length; _i < _len; j = ++_i) {
    row = matrix[j];
    for (k = _j = 0, _len1 = row.length; _j < _len1; k = ++_j) {
      num = row[k];
      result[rotate[j][k]] = round(num);
    }
  }
  return result;
};

styleToArray = function(transform) {
  var i, num, nums, style, _i, _len;
  div.style[annie.transform] = transform;
  style = getComputedStyle(div)[annie.transform].match(/\([^\)]+\)/)[0].slice(1, -1);
  nums = style.split(', ');
  for (i = _i = 0, _len = nums.length; _i < _len; i = ++_i) {
    num = nums[i];
    nums[i] = round(num);
  }
  return nums;
};

test = function(property, values) {
  var intValues, value, _i, _len;
  intValues = [];
  for (_i = 0, _len = values.length; _i < _len; _i++) {
    value = values[_i];
    intValues.push(parseFloat(value, 10));
  }
  return describe('#' + property, function() {
    return it('should compute the same matrix as the browser', function() {
      var actual, expected;
      actual = rotateMatrix(transformToMatrix[property].apply(this, intValues));
      expected = styleToArray(property + '(' + values.join(', ') + ')');
      return expect(actual).to.eql(expected);
    });
  });
};

mocha.setup('bdd');

describe('3D', function() {
  test('rotateX', ['.5rad']);
  test('rotateY', ['.5rad']);
  test('rotate3d', [1, 0, 1, '.5rad']);
  test('scale3d', [5, 10, 20]);
  return test('translate3d', ['10px', '20px', '30px']);
});

describe('2D', function() {
  test('perspective', ['10px']);
  test('rotate', ['.5rad']);
  test('rotateZ', ['.5rad']);
  test('scale', [2, 3]);
  test('scaleX', [2]);
  test('scaleY', [2]);
  test('scaleZ', [2]);
  test('skew', ['.5rad', '.7rad']);
  test('skewX', ['.5rad']);
  test('skewY', ['.5rad']);
  test('translate', ['10px', '20px']);
  test('translateX', ['10px']);
  test('translateY', ['10px']);
  return test('translateZ', ['10px']);
});

mocha.run();