| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <script>window.enablePixelTesting = true;</script> |
| <script src="../../resources/js-test.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(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]"); |
| |
| 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> |
| </body> |
| </html> |
