| <!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> |
