101 lines
4.0 KiB
HTML
101 lines
4.0 KiB
HTML
<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>
|