blob: 83362f914f1d744a734e7e11a4868d1f1c140446 [file] [log] [blame]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>window.enablePixelTesting = true;</script>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle id="circle" cx="40" cy="40" r="40" fill="green" style="-webkit-transform: scale(2, 2) translate(10px, 10px)"/>
</svg>
<svg id="svg2" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<rect id="rect" x="40" y="40" height="100" width="100" fill="green" transform="translate(1000, 1000) rotate(90)" style="-webkit-transform: translate(100px) rotate(45deg)"/>
</svg>
<p id="description"></p>
<p>Also, to pass the test, the rectangle should be rotated with 45deg</p>
<div id="console"></div>
<script type="text/javascript">
<![CDATA[
description("This is a test of precedency between CSS and SVG transform");
function dumpRect(r) {
return "[" + r.x
+ " " + r.y
+ " " + r.width
+ " " + r.height
+ "]";
}
function dumpMatrix(matrix) {
return "[" + matrix.a.toFixed(1)
+ " " + matrix.b.toFixed(1)
+ " " + matrix.c.toFixed(1)
+ " " + matrix.d.toFixed(1)
+ " " + matrix.e.toFixed(1)
+ " " + matrix.f.toFixed(1)
+ "]";
}
function dumpTransform(transform) {
var transformTypes = {
"0": "SVG_TRANSFORM_UNKNOWN",
"1": "SVG_TRANSFORM_MATRIX",
"2": "SVG_TRANSFORM_TRANSLATE",
"3": "SVG_TRANSFORM_SCALE",
"4": "SVG_TRANSFORM_ROTATE",
"5": "SVG_TRANSFORM_SKEWX",
"6": "SVG_TRANSFORM_SKEWY"
};
return "type=" + transformTypes[transform.type] + " matrix=" + dumpMatrix(transform.matrix);
}
var svg1 = document.getElementById("svg1");
var circle = document.getElementById("circle");
var svg2 = document.getElementById("svg2");
var rect = document.getElementById("rect");
debug("");
debug("Test SVGTransformList interface");
shouldBe("circle.transform.baseVal.numberOfItems", "0");
shouldBeNull("circle.getAttribute('transform')");
shouldBe("rect.transform.baseVal.numberOfItems", "2");
shouldBeEqualToString("rect.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
shouldBeEqualToString("dumpTransform(rect.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
shouldBeEqualToString("dumpTransform(rect.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");
debug("");
debug("Test SVGLocatable interface");
shouldBeEqualToString("dumpMatrix(circle.getCTM())", "[2.0 0.0 0.0 2.0 20.0 20.0]");
shouldBeEqualToString("dumpMatrix(circle.getScreenCTM())", "[2.0 0.0 0.0 2.0 28.0 28.0]");
shouldBeEqualToString("dumpRect(circle.getBBox())", "[0 0 80 80]");
shouldBeEqualToString("dumpMatrix(circle.getTransformToElement(circle))", "[1.0 0.0 0.0 1.0 0.0 0.0]");
shouldBeEqualToString("dumpMatrix(rect.getCTM())", "[0.7 0.7 -0.7 0.7 100.0 0.0]");
shouldBeEqualToString("dumpMatrix(rect.getScreenCTM())", "[0.7 0.7 -0.7 0.7 312.0 8.0]");
shouldBeEqualToString("dumpRect(rect.getBBox())", "[40 40 100 100]");
shouldBeEqualToString("dumpMatrix(rect.getTransformToElement(rect))", "[1.0 0.0 0.0 1.0 0.0 0.0]");
debug("");
debug("Test CSSMatrix");
shouldBeEqualToString("circle.style.webkitTransform", "scale(2, 2) translate(10px, 10px)");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(circle.style.webkitTransform))", "[2.0 0.0 0.0 2.0 20.0 20.0]");
shouldBeEqualToString("rect.style.webkitTransform", "translate(100px) rotate(45deg)");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect.style.webkitTransform))", "[0.7 0.7 -0.7 0.7 100.0 0.0]");
debug("");
shouldBe("dumpMatrix(new WebKitCSSMatrix(circle.style.webkitTransform))", "dumpMatrix(circle.getCTM())");
shouldBe("dumpMatrix(new WebKitCSSMatrix(rect.style.webkitTransform))", "dumpMatrix(rect.getCTM())");
debug("");
successfullyParsed = true;
]]>
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>