183 lines
7.6 KiB
HTML
183 lines
7.6 KiB
HTML
<!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>
|