blob: 75cbfdde5eadf3003ff59f285ed955a9c70efa00 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="resources/SVGTestCase.js"></script>
<script src="../../resources/js-test-pre.js"></script>
<script src="../../fast/repaint/resources/repaint.js"></script>
<style type="text/css" media="screen">
.column {
margin: 10px;
display: inline-block;
vertical-align: top;
}
.container {
position: relative;
height: 200px;
width: 200px;
margin: 10px;
background-color: silver;
border: 1px solid black;
}
#wrapper {
position: relative;
top: 0;
left: 0;
height: 60px;
width: 60px;
-webkit-transform-origin: top left; /* to match SVG */
}
</style>
</head>
<body>
<div class="column">
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
<rect id="rect1" x="0" y="0" height="60" width="60" fill="green"/>
</svg>
</div>
<div class="container">
<svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
<rect id="rect2" x="0" y="0" height="60" width="60" fill="green" transform="translate(1000, 1000) rotate(90)"/>
</svg>
</div>
</div>
<div class="column">
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
<rect id="rect3" x="0" y="0" height="60" width="60" fill="green"/>
</svg>
</div>
<div class="container">
<svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
<rect id="rect4" x="0" y="0" height="60" width="60" fill="green" transform="translate(1000, 1000) rotate(90)"/>
</svg>
</div>
</div>
<div class="column">
<div class="container">
<div id="wrapper">
<svg id="svg3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
<rect id="rect5" x="0" y="0" height="60" width="60" fill="green"/>
</svg>
</div>
</div>
</div>
<h1>SVG 1.1 dynamic update tests</h1>
<p id="description"></p>
<p>Also, to pass the test, the rectangles should be rotated with 45deg</p>
<div id="console"></div>
<script>
// [Expected rendering result] 'Test passed' message - and a series of PASS messages
description("Tests dynamic updates of the '-webkit-transform' on SVG element");
//createSVGTestCase();
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 rect1 = document.getElementById("rect1");
var rect2 = document.getElementById("rect2");
var rect3 = document.getElementById("rect3");
var rect4 = document.getElementById("rect4");
var rect5 = document.getElementById("rect5");
var wrapper = document.getElementById("wrapper");
debug("");
debug("Transform via style attribute");
rect1.setAttribute("style", "-webkit-transform: translate(100px, 25px) scale(2) rotate(45deg)");
shouldBeEqualToString("rect1.style.webkitTransform", "translate(100px, 25px) scale(2) rotate(45deg)");
shouldBeEqualToString("dumpMatrix(rect1.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect1.style.webkitTransform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBe("dumpMatrix(new WebKitCSSMatrix(rect1.style.webkitTransform))", "dumpMatrix(rect1.getCTM())");
shouldBe("rect1.transform.baseVal.numberOfItems", "0");
shouldBeNull("rect1.getAttribute('transform')");
shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[0.0 1.0 -1.0 0.0 1000.0 1000.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.webkitTransform))", "[1.0 0.0 0.0 1.0 0.0 0.0]");
rect2.setAttribute("style", "-webkit-transform: translate(100px, 25px) scale(2) rotate(45deg)");
shouldBeEqualToString("rect2.style.webkitTransform", "translate(100px, 25px) scale(2) rotate(45deg)");
shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.webkitTransform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBe("dumpMatrix(new WebKitCSSMatrix(rect2.style.webkitTransform))", "dumpMatrix(rect2.getCTM())");
shouldBe("rect2.transform.baseVal.numberOfItems", "2");
shouldBeEqualToString("rect2.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
shouldBeEqualToString("dumpTransform(rect2.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
shouldBeEqualToString("dumpTransform(rect2.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");
debug("");
debug("Transform via CSS");
rect3.style.webkitTransform = "translate(100px, 25px) scale(2) rotate(45deg)";
shouldBeEqualToString("rect3.style.webkitTransform", "translate(100px, 25px) scale(2) rotate(45deg)");
shouldBeEqualToString("dumpMatrix(rect3.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect3.style.webkitTransform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBe("dumpMatrix(new WebKitCSSMatrix(rect3.style.webkitTransform))", "dumpMatrix(rect3.getCTM())");
shouldBe("rect3.transform.baseVal.numberOfItems", "0");
shouldBeNull("rect3.getAttribute('transform')");
shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.webkitTransform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
rect4.style.webkitTransform = "translate(100px, 25px) scale(2) rotate(45deg)";
shouldBeEqualToString("rect4.style.webkitTransform", "translate(100px, 25px) scale(2) rotate(45deg)");
shouldBeEqualToString("dumpMatrix(rect4.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect4.style.webkitTransform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBe("dumpMatrix(new WebKitCSSMatrix(rect4.style.webkitTransform))", "dumpMatrix(rect4.getCTM())");
shouldBe("rect4.transform.baseVal.numberOfItems", "2");
shouldBeEqualToString("rect4.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
shouldBeEqualToString("dumpTransform(rect4.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
shouldBeEqualToString("dumpTransform(rect4.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");
debug("");
debug("Transform on wrapper div");
wrapper.style.webkitTransform = "translate(100px, 25px) scale(2) rotate(45deg)";
shouldBeEqualToString("rect5.style.webkitTransform", "");
shouldBeEqualToString("dumpMatrix(rect5.getCTM())", "[1.0 0.0 0.0 1.0 0.0 0.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect5.style.webkitTransform))", "[1.0 0.0 0.0 1.0 0.0 0.0]");
shouldBe("dumpMatrix(new WebKitCSSMatrix(rect5.style.webkitTransform))", "dumpMatrix(rect5.getCTM())");
shouldBe("rect5.transform.baseVal.numberOfItems", "0");
shouldBeNull("rect5.getAttribute('transform')");
debug("");
var successfullyParsed = true;
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>