Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: dom/svg/test/mochitest.toml
<!--
-->
<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">
<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>