2010-01-13 11:21:17 -08:00
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<!--
|
|
|
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=512636
|
|
|
|
|
-->
|
|
|
|
|
<head>
|
|
|
|
|
<title>Test SVGTransform behavior</title>
|
|
|
|
|
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.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, svg, t, m, m2;
|
|
|
|
|
|
|
|
|
|
svg = $('svg');
|
|
|
|
|
g = $('g');
|
|
|
|
|
|
|
|
|
|
t = g.transform.baseVal.getItem(0);
|
|
|
|
|
m = t.matrix;
|
|
|
|
|
|
|
|
|
|
// test that the SVGTransform correctly reflects the translate()
|
2011-09-25 14:03:26 -07:00
|
|
|
checkTransform(t, SVGTransform.SVG_TRANSFORM_TRANSLATE,
|
|
|
|
|
1, 0,
|
|
|
|
|
0, 1,
|
|
|
|
|
10, 20,
|
|
|
|
|
0, "translate");
|
2010-01-13 11:21:17 -08:00
|
|
|
|
|
|
|
|
// set the SVGTransform to be a scale()
|
|
|
|
|
t.setScale(2, 3);
|
|
|
|
|
|
|
|
|
|
// test that the matrix is live and now reflects the scale()
|
2011-09-25 14:03:26 -07:00
|
|
|
checkTransform(t, SVGTransform.SVG_TRANSFORM_SCALE,
|
|
|
|
|
2, 0,
|
|
|
|
|
0, 3,
|
|
|
|
|
0, 0,
|
|
|
|
|
0, "scale");
|
2010-01-13 11:21:17 -08:00
|
|
|
|
|
|
|
|
// set the SVGTransform to be a matrix()
|
|
|
|
|
m2 = svg.createSVGMatrix();
|
|
|
|
|
m2.a = 1;
|
|
|
|
|
m2.b = 2;
|
|
|
|
|
m2.c = 3;
|
|
|
|
|
m2.d = 4;
|
|
|
|
|
m2.e = 5;
|
|
|
|
|
m2.f = 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
|
2011-09-25 14:03:26 -07:00
|
|
|
checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
|
|
|
|
|
1, 2,
|
|
|
|
|
3, 4,
|
|
|
|
|
5, 6,
|
|
|
|
|
0, "matrix");
|
2010-01-13 11:21:17 -08:00
|
|
|
|
2010-01-25 06:36:09 -08:00
|
|
|
// set the SVGTransform to be a translate() then convert to a matrix
|
2012-03-18 05:25:28 -07:00
|
|
|
t.setTranslate(0, 10);
|
2010-01-25 06:36:09 -08:00
|
|
|
m.a = 2;
|
|
|
|
|
|
|
|
|
|
// test that the SVGTransform now reflects the matrix value
|
2012-03-18 05:25:28 -07:00
|
|
|
checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
|
|
|
|
|
2, 0,
|
|
|
|
|
0, 1,
|
|
|
|
|
0, 10,
|
|
|
|
|
0, "matrix");
|
2012-03-18 11:24:35 -07:00
|
|
|
|
|
|
|
|
// 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,
|
|
|
|
|
1, 0,
|
|
|
|
|
0, 1,
|
|
|
|
|
5, 0,
|
|
|
|
|
0, "transform");
|
2010-01-25 06:36:09 -08:00
|
|
|
|
|
|
|
|
// set the SVGTransform to be a rotate()
|
|
|
|
|
t.setRotate(90, 0, 0);
|
|
|
|
|
|
|
|
|
|
// test that the SVGTransform now reflects the matrix value
|
2011-09-25 14:03:26 -07:00
|
|
|
checkTransform(t, SVGTransform.SVG_TRANSFORM_ROTATE,
|
|
|
|
|
Math.cos(Math.PI/2), Math.sin(Math.PI/2),
|
|
|
|
|
-Math.sin(Math.PI/2), Math.cos(Math.PI/2),
|
|
|
|
|
0, 0,
|
|
|
|
|
90, "rotate");
|
2010-01-25 06:36:09 -08:00
|
|
|
|
|
|
|
|
// set the SVGTransform to be a skewX()
|
|
|
|
|
t.setSkewX(45);
|
|
|
|
|
|
|
|
|
|
// test that the SVGTransform now reflects the matrix value
|
2011-09-25 14:03:26 -07:00
|
|
|
checkTransform(t, SVGTransform.SVG_TRANSFORM_SKEWX,
|
|
|
|
|
1, 0,
|
|
|
|
|
Math.tan(Math.PI/4), Math.tan(Math.PI/4),
|
|
|
|
|
0, 0,
|
|
|
|
|
45, "skewX");
|
2010-01-25 06:36:09 -08:00
|
|
|
|
|
|
|
|
// set the SVGTransform to be a skewY()
|
|
|
|
|
t.setSkewY(45);
|
|
|
|
|
|
|
|
|
|
// test that the SVGTransform now reflects the matrix value
|
2011-09-25 14:03:26 -07:00
|
|
|
checkTransform(t, SVGTransform.SVG_TRANSFORM_SKEWY,
|
|
|
|
|
Math.tan(Math.PI/4), Math.tan(Math.PI/4),
|
|
|
|
|
0, 1,
|
|
|
|
|
0, 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();
|
2010-01-25 06:36:09 -08:00
|
|
|
|
2010-01-13 11:21:17 -08:00
|
|
|
SimpleTest.finish();
|
|
|
|
|
}
|
|
|
|
|
|
2011-09-25 14:03:26 -07:00
|
|
|
function testCreateTransform()
|
|
|
|
|
{
|
|
|
|
|
svg = $('svg');
|
|
|
|
|
var t = svg.createSVGTransform();
|
|
|
|
|
ok(t != svg.createSVGTransform(),
|
|
|
|
|
"Got identical objects when creating new transform");
|
|
|
|
|
checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
|
|
|
|
|
1, 0, 0, 1, 0, 0, 0, "createSVGTransform");
|
|
|
|
|
|
|
|
|
|
var m = svg.createSVGMatrix();
|
|
|
|
|
m.a = 1;
|
|
|
|
|
m.b = 2;
|
|
|
|
|
m.c = 3;
|
|
|
|
|
m.d = 4;
|
|
|
|
|
m.e = 5;
|
|
|
|
|
m.f = 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,
|
|
|
|
|
1, 2, 3, 4, 5, 6, 0, "createSVGTransformFromMatrix");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function checkTransform(transform, type, a, b, c, d, e, f, angle, forWhat)
|
|
|
|
|
{
|
|
|
|
|
var m = transform.matrix;
|
|
|
|
|
is(transform.type, type, 'transform.type for ' + forWhat);
|
|
|
|
|
roughlyEqual(m.a, a, 'matrix.a for ' + forWhat);
|
|
|
|
|
roughlyEqual(m.b, b, 'matrix.b for ' + forWhat);
|
|
|
|
|
roughlyEqual(m.c, c, 'matrix.c for ' + forWhat);
|
|
|
|
|
roughlyEqual(m.d, d, 'matrix.d for ' + forWhat);
|
|
|
|
|
roughlyEqual(m.e, e, 'matrix.e for ' + forWhat);
|
|
|
|
|
roughlyEqual(m.f, f, 'matrix.f for ' + forWhat);
|
|
|
|
|
is(transform.angle, angle, 'transform.angle for ' + forWhat);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function roughlyEqual(value, expected, msg)
|
|
|
|
|
{
|
|
|
|
|
const tolerance = 1 / 65535;
|
|
|
|
|
ok(Math.abs(value - expected) < tolerance,
|
|
|
|
|
msg + ' - got ' + value + ', expected ' + expected);
|
|
|
|
|
}
|
|
|
|
|
|
2010-01-13 11:21:17 -08:00
|
|
|
window.addEventListener("load", run, false);
|
|
|
|
|
|
|
|
|
|
]]>
|
|
|
|
|
</script>
|
|
|
|
|
</pre>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
