dom/svg/test/test_transform.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <!--
   3 https://bugzilla.mozilla.org/show_bug.cgi?id=512636
   4 -->
   5 <head>
   6   <title>Test SVGTransform behavior</title>
   7   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   8   <script src="matrixUtils.js"></script>
   9   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  10 </head>
  11 <body>
  12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=512636">Mozilla Bug 512636</a>
  13 <p id="display"></p>
  14 <div id="content">
  15
  16   <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1" id="svg">
  17     <g id="g" transform="translate(10, 20)"/>
  18   </svg>
  19
  20 </div>
  21 <pre id="test">
  22 <script class="testbody" type="text/javascript">
  23 <![CDATA[
  24
  25 SimpleTest.waitForExplicitFinish();
  26
  27 function run() {
  28   var g, t, m, m2;
  29
  30   g = $("g");
  31
  32   t = g.transform.baseVal.getItem(0);
  33   m = t.matrix;
  34
  35   // test that the SVGTransform correctly reflects the translate()
  36   checkTransform(t, SVGTransform.SVG_TRANSFORM_TRANSLATE,
  37                  {a: 1, b: 0, c: 0, d: 1, e: 10, f: 20},
  38                  0, "translate");
  39
  40   // set the SVGTransform to be a scale()
  41   t.setScale(2, 3);
  42
  43   // test that the matrix is live and now reflects the scale()
  44   checkTransform(t, SVGTransform.SVG_TRANSFORM_SCALE,
  45                  {a: 2, b: 0, c: 0, d: 3, e: 0, f: 0},
  46                  0, "scale");
  47
  48   // set the SVGTransform to be a matrix()
  49   m2 = createMatrix(1, 2, 3, 4, 5, 6);
  50   t.setMatrix(m2);
  51
  52   // check that setMatrix() took a copy of m
  53   ok(m != m2, "t.matrix identity");
  54
  55   // test that the SVGTransform now reflects the matrix value
  56   checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
  57                  {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6},
  58                  0, "matrix");
  59
  60   m2 = {m11: 6, m12: 5, m21: 4, m22: 3, m41: 2, m42: 1};
  61   t.setMatrix(m2);
  62   checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
  63                  {a: 6, b: 5, c: 4, d: 3, e: 2, f: 1},
  64                  0, "matrix");
  65
  66   // set the SVGTransform to be a translate() then convert to a matrix
  67   t.setTranslate(0, 10);
  68   m.a = 2;
  69
  70   // test that the SVGTransform now reflects the matrix value
  71   checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
  72                  {a: 2, b: 0, c: 0, d: 1, e: 0, f: 10},
  73                  0, "matrix");
  74
  75   // If ty is not supplied it is assumed to be zero
  76   g.setAttribute("transform", "translate(5)");
  77
  78   // test that the SVGTransform now reflects the matrix value
  79   checkTransform(t, SVGTransform.SVG_TRANSFORM_TRANSLATE,
  80                  {a: 1, b: 0, c: 0, d: 1, e: 5, f: 0},
  81                  0, "transform");
  82
  83   // set the SVGTransform to be a rotate()
  84   t.setRotate(90, 0, 0);
  85
  86   // test that the SVGTransform now reflects the matrix value
  87   checkTransform(t, SVGTransform.SVG_TRANSFORM_ROTATE,
  88                  {a: Math.cos(Math.PI / 2), b: Math.sin(Math.PI / 2),
  89                   c: -Math.sin(Math.PI / 2), d: Math.cos(Math.PI / 2),
  90                   e: 0, f: 0},
  91                  90, "rotate");
  92
  93   // set the SVGTransform to be a skewX()
  94   t.setSkewX(45);
  95
  96   // test that the SVGTransform now reflects the matrix value
  97   checkTransform(t, SVGTransform.SVG_TRANSFORM_SKEWX,
  98                  {a: 1, b: 0,
  99                   c: Math.tan(Math.PI / 4), d: Math.tan(Math.PI / 4),
 100                   e: 0, f: 0},
 101                  45, "skewX");
 102
 103   // set the SVGTransform to be a skewY()
 104   t.setSkewY(45);
 105
 106   // test that the SVGTransform now reflects the matrix value
 107   checkTransform(t, SVGTransform.SVG_TRANSFORM_SKEWY,
 108                  {a: Math.tan(Math.PI / 4), b: Math.tan(Math.PI / 4),
 109                   c: 0, d: 1,
 110                   e: 0, f: 0},
 111                  45, "skewY");
 112
 113   // check angle is reset after changing type
 114   t.setTranslate(10, 20);
 115   is(t.angle, 0, "Angle not reset after changing to translate type");
 116
 117   // check read-only properties
 118   t.angle = 40;
 119   is(t.angle, 0, "t.angle should be read-only");
 120   t.type = 7;
 121   is(t.type, SVGTransform.SVG_TRANSFORM_TRANSLATE,
 122      "t.type should be read-only");
 123   t.matrix = m2;
 124   ok(t.matrix != m2 && t.matrix.b == 0, "t.matrix should be read-only");
 125
 126   // check transform object identity after manipulation
 127   ok(t === g.transform.baseVal.getItem(0),
 128      "Got different transform objects after manipulation");
 129   ok(t.matrix === m,
 130      "Got different matrix objects after manipulation");
 131
 132   testCreateTransform();
 133   testMatrixTransform();
 134
 135   SimpleTest.finish();
 136 }
 137
 138 function testMatrixTransform() {
 139   let svg = $("svg");
 140   const epsilon = 1 / 65536;
 141
 142   let point = svg.createSVGPoint();
 143   point.x = 5;
 144   point.y = 4;
 145   let matrix = createMatrix(2, 0, 0, 2, 10, 10);
 146   let result = point.matrixTransform(matrix);
 147   let expected = DOMPoint.fromPoint(point).matrixTransform(matrix);
 148   isfuzzy(result.x, expected.x, epsilon, "matrix transformation x");
 149   isfuzzy(result.y, expected.y, epsilon, "matrix transformation y");
 150
 151   svg.currentTranslate.x = 5;
 152   svg.currentTranslate.y = 4;
 153   result = svg.currentTranslate.matrixTransform(matrix);
 154   isfuzzy(result.x, expected.x, epsilon, "svg matrix transformation x");
 155   isfuzzy(result.y, expected.y, epsilon, "svg matrix transformation y");
 156   svg.currentTranslate.x = 0;
 157   svg.currentTranslate.y = 0;
 158 }
 159
 160 function testCreateTransform() {
 161   let svg = $("svg");
 162   let t = svg.createSVGTransform();
 163   ok(t != svg.createSVGTransform(),
 164      "Got identical objects when creating new transform");
 165   checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
 166                  createMatrix(1, 0, 0, 1, 0, 0), 0, "createSVGTransform");
 167
 168   let m = createMatrix(1, 2, 3, 4, 5, 6);
 169   t = svg.createSVGTransformFromMatrix(m);
 170   ok(t.matrix != m,
 171      "createSVGTransformFromMatrix should copy matrix not adopt it");
 172   m.a = 7; // Just to be sure, changing m should not affect t
 173   checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
 174                  {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6},
 175                  0, "createSVGTransformFromMatrix");
 176 }
 177
 178 function checkTransform(transform, type, matrix, angle, forWhat) {
 179   roughCmpMatrix(transform.matrix, matrix, forWhat);
 180   is(transform.type, type, `transform.type for ${forWhat}`);
 181   is(transform.angle, angle, `transform.angle for ${forWhat}`);
 182 }
 183
 184 window.addEventListener("load", run);
 185
 186 ]]>
 187 </script>
 188 </pre>
 189 </body>
 190 </html>