view htdocs/svg-edit/test/math_test.html @ 632:8c00e2be925e

inital veraion 2.7 r2891 of svg-edit
author Reimar Bauer <rb.proj AT googlemail DOT com>
date Thu, 05 Feb 2015 16:37:37 +0100
parents
children
line wrap: on
line source
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Unit Tests for math.js</title>
  <link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
  <script src='../editor/jquery.js'></script>
  <script src='../editor/svgedit.js'></script>
  <script src='../editor/math.js'></script>
  <script src='qunit/qunit.js'></script>
  <script>
  $(function() {
    // log function
    QUnit.log = function(result, message) {
      if (window.console && window.console.log) {
        window.console.log(result +' :: '+ message);
      }
    };

    var svg = document.createElementNS(svgedit.NS.SVG, 'svg');

    module('svgedit.math');

    test('Test svgedit.math package', function() {
      expect(7);

      ok(svgedit.math);
      ok(svgedit.math.transformPoint);
      ok(svgedit.math.isIdentity);
      ok(svgedit.math.matrixMultiply);
      equals(typeof svgedit.math.transformPoint, typeof function(){});
      equals(typeof svgedit.math.isIdentity, typeof function(){});
      equals(typeof svgedit.math.matrixMultiply, typeof function(){});
    });

    test('Test svgedit.math.transformPoint() function', function() {
      expect(6);
      var transformPoint = svgedit.math.transformPoint;

      var m = svg.createSVGMatrix();
      m.a = 1; m.b = 0;
      m.c = 0; m.d = 1;
      m.e = 0; m.f = 0;
      var pt = transformPoint(100, 200, m);
      equals(pt.x, 100);
      equals(pt.y, 200);

      m.e = 300; m.f = 400;
      pt = transformPoint(100, 200, m);
      equals(pt.x, 400);
      equals(pt.y, 600);

      m.a = 0.5; m.b = 0.75;
      m.c = 1.25; m.d = 2;
      pt = transformPoint(100, 200, m);
      equals(pt.x, 100 * m.a + 200 * m.c + m.e);
      equals(pt.y, 100 * m.b + 200 * m.d + m.f);
    });

    test('Test svgedit.math.isIdentity() function', function() {
      expect(2);

      ok(svgedit.math.isIdentity(svg.createSVGMatrix()));

      var m = svg.createSVGMatrix();
      m.a = 1; m.b = 0;
      m.c = 0; m.d = 1;
      m.e = 0; m.f = 0;
      ok(svgedit.math.isIdentity(m));
    });

    test('Test svgedit.math.matrixMultiply() function', function() {
      expect(5);
      var mult = svgedit.math.matrixMultiply;
      var isIdentity = svgedit.math.isIdentity;

      // translate there and back
      var tr_1 = svg.createSVGMatrix().translate(100,50),
        tr_2 = svg.createSVGMatrix().translate(-90,0),
        tr_3 = svg.createSVGMatrix().translate(-10,-50),
        I = mult(tr_1,tr_2,tr_3);
      ok(isIdentity(I), 'Expected identity matrix when translating there and back');

      // rotate there and back
      // TODO: currently Mozilla fails this when rotating back at -50 and then -40 degrees
      // (b and c are *almost* zero, but not zero)
      var rot_there = svg.createSVGMatrix().rotate(90),
        rot_back = svg.createSVGMatrix().rotate(-90); // TODO: set this to -50
        rot_back_more = svg.createSVGMatrix().rotate(0); // TODO: set this to -40
      I = mult(rot_there, rot_back, rot_back_more);
      ok(isIdentity(I), 'Expected identity matrix when rotating there and back');

      // scale up and down
      var scale_up = svg.createSVGMatrix().scale(4),
        scale_down = svg.createSVGMatrix().scaleNonUniform(0.25,1);
        scale_down_more = svg.createSVGMatrix().scaleNonUniform(1,0.25);
      I = mult(scale_up, scale_down, scale_down_more);
      ok(isIdentity(I), 'Expected identity matrix when scaling up and down');

      // test multiplication with its inverse
      I = mult(rot_there, rot_there.inverse());
      ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
      I = mult(rot_there.inverse(), rot_there);
      ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
    });

    test('Test svgedit.math.transformBox() function', function() {
      expect(12);
      var transformBox = svgedit.math.transformBox;

      var m = svg.createSVGMatrix();
      m.a = 1; m.b = 0;
      m.c = 0; m.d = 1;
      m.e = 0; m.f = 0;

      var r = transformBox(10, 10, 200, 300, m);
      equals(r.tl.x, 10);
      equals(r.tl.y, 10);
      equals(r.tr.x, 210);
      equals(r.tr.y, 10);
      equals(r.bl.x, 10);
      equals(r.bl.y, 310);
      equals(r.br.x, 210);
      equals(r.br.y, 310);
      equals(r.aabox.x, 10);
      equals(r.aabox.y, 10);
      equals(r.aabox.width, 200);
      equals(r.aabox.height, 300);
    });
  });
  </script>
</head>
<body>
  <h1 id='qunit-header'>Unit Tests for math.js</h1>
  <h2 id='qunit-banner'></h2>
  <h2 id='qunit-userAgent'></h2>
  <ol id='qunit-tests'></ol>
</body>
</html>