diff options
Diffstat (limited to 'dom/svg/test/test_transform.xhtml')
| -rw-r--r-- | dom/svg/test/test_transform.xhtml | 190 |
1 files changed, 190 insertions, 0 deletions
diff --git a/dom/svg/test/test_transform.xhtml b/dom/svg/test/test_transform.xhtml new file mode 100644 index 0000000000..6a139d3580 --- /dev/null +++ b/dom/svg/test/test_transform.xhtml @@ -0,0 +1,190 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=512636 +--> +<head> + <title>Test SVGTransform behavior</title> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <script src="matrixUtils.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> +</head> +<body> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=512636">Mozilla Bug 512636</a> +<p id="display"></p> +<div id="content"> + + <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1" id="svg"> + <g id="g" transform="translate(10, 20)"/> + </svg> + +</div> +<pre id="test"> +<script class="testbody" type="text/javascript"> +<![CDATA[ + +SimpleTest.waitForExplicitFinish(); + +function run() { + var g, t, m, m2; + + g = $("g"); + + t = g.transform.baseVal.getItem(0); + m = t.matrix; + + // test that the SVGTransform correctly reflects the translate() + checkTransform(t, SVGTransform.SVG_TRANSFORM_TRANSLATE, + {a: 1, b: 0, c: 0, d: 1, e: 10, f: 20}, + 0, "translate"); + + // set the SVGTransform to be a scale() + t.setScale(2, 3); + + // test that the matrix is live and now reflects the scale() + checkTransform(t, SVGTransform.SVG_TRANSFORM_SCALE, + {a: 2, b: 0, c: 0, d: 3, e: 0, f: 0}, + 0, "scale"); + + // set the SVGTransform to be a matrix() + m2 = createMatrix(1, 2, 3, 4, 5, 6); + t.setMatrix(m2); + + // check that setMatrix() took a copy of m + ok(m != m2, "t.matrix identity"); + + // test that the SVGTransform now reflects the matrix value + checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX, + {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}, + 0, "matrix"); + + m2 = {m11: 6, m12: 5, m21: 4, m22: 3, m41: 2, m42: 1}; + t.setMatrix(m2); + checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX, + {a: 6, b: 5, c: 4, d: 3, e: 2, f: 1}, + 0, "matrix"); + + // set the SVGTransform to be a translate() then convert to a matrix + t.setTranslate(0, 10); + m.a = 2; + + // test that the SVGTransform now reflects the matrix value + checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX, + {a: 2, b: 0, c: 0, d: 1, e: 0, f: 10}, + 0, "matrix"); + + // If ty is not supplied it is assumed to be zero + g.setAttribute("transform", "translate(5)"); + + // test that the SVGTransform now reflects the matrix value + checkTransform(t, SVGTransform.SVG_TRANSFORM_TRANSLATE, + {a: 1, b: 0, c: 0, d: 1, e: 5, f: 0}, + 0, "transform"); + + // set the SVGTransform to be a rotate() + t.setRotate(90, 0, 0); + + // test that the SVGTransform now reflects the matrix value + checkTransform(t, SVGTransform.SVG_TRANSFORM_ROTATE, + {a: Math.cos(Math.PI / 2), b: Math.sin(Math.PI / 2), + c: -Math.sin(Math.PI / 2), d: Math.cos(Math.PI / 2), + e: 0, f: 0}, + 90, "rotate"); + + // set the SVGTransform to be a skewX() + t.setSkewX(45); + + // test that the SVGTransform now reflects the matrix value + checkTransform(t, SVGTransform.SVG_TRANSFORM_SKEWX, + {a: 1, b: 0, + c: Math.tan(Math.PI / 4), d: Math.tan(Math.PI / 4), + e: 0, f: 0}, + 45, "skewX"); + + // set the SVGTransform to be a skewY() + t.setSkewY(45); + + // test that the SVGTransform now reflects the matrix value + checkTransform(t, SVGTransform.SVG_TRANSFORM_SKEWY, + {a: Math.tan(Math.PI / 4), b: Math.tan(Math.PI / 4), + c: 0, d: 1, + e: 0, f: 0}, + 45, "skewY"); + + // check angle is reset after changing type + t.setTranslate(10, 20); + is(t.angle, 0, "Angle not reset after changing to translate type"); + + // check read-only properties + t.angle = 40; + is(t.angle, 0, "t.angle should be read-only"); + t.type = 7; + is(t.type, SVGTransform.SVG_TRANSFORM_TRANSLATE, + "t.type should be read-only"); + t.matrix = m2; + ok(t.matrix != m2 && t.matrix.b == 0, "t.matrix should be read-only"); + + // check transform object identity after manipulation + ok(t === g.transform.baseVal.getItem(0), + "Got different transform objects after manipulation"); + ok(t.matrix === m, + "Got different matrix objects after manipulation"); + + testCreateTransform(); + testMatrixTransform(); + + SimpleTest.finish(); +} + +function testMatrixTransform() { + let svg = $("svg"); + const epsilon = 1 / 65536; + + let point = svg.createSVGPoint(); + point.x = 5; + point.y = 4; + let matrix = createMatrix(2, 0, 0, 2, 10, 10); + let result = point.matrixTransform(matrix); + let expected = DOMPoint.fromPoint(point).matrixTransform(matrix); + isfuzzy(result.x, expected.x, epsilon, "matrix transformation x"); + isfuzzy(result.y, expected.y, epsilon, "matrix transformation y"); + + svg.currentTranslate.x = 5; + svg.currentTranslate.y = 4; + result = svg.currentTranslate.matrixTransform(matrix); + isfuzzy(result.x, expected.x, epsilon, "svg matrix transformation x"); + isfuzzy(result.y, expected.y, epsilon, "svg matrix transformation y"); + svg.currentTranslate.x = 0; + svg.currentTranslate.y = 0; +} + +function testCreateTransform() { + let svg = $("svg"); + let t = svg.createSVGTransform(); + ok(t != svg.createSVGTransform(), + "Got identical objects when creating new transform"); + checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX, + createMatrix(1, 0, 0, 1, 0, 0), 0, "createSVGTransform"); + + let m = createMatrix(1, 2, 3, 4, 5, 6); + t = svg.createSVGTransformFromMatrix(m); + ok(t.matrix != m, + "createSVGTransformFromMatrix should copy matrix not adopt it"); + m.a = 7; // Just to be sure, changing m should not affect t + checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX, + {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}, + 0, "createSVGTransformFromMatrix"); +} + +function checkTransform(transform, type, matrix, angle, forWhat) { + roughCmpMatrix(transform.matrix, matrix, forWhat); + is(transform.type, type, `transform.type for ${forWhat}`); + is(transform.angle, angle, `transform.angle for ${forWhat}`); +} + +window.addEventListener("load", run); + +]]> +</script> +</pre> +</body> +</html> |