test_transform.xhtml (6202B)
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>