Implement SVGGeometryElement's isPointInFill and isPointInStroke
[WebKit-https.git] / LayoutTests / svg / dom / css-transforms.xhtml
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <script>window.enablePixelTesting = true;</script>
4 <script src="../../resources/js-test-pre.js"></script>
5 </head>
6 <body>
7
8 <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
9   <circle id="circle" cx="40" cy="40" r="40" fill="green" style="-webkit-transform: scale(2, 2) translate(10px, 10px)"/>
10 </svg>
11
12 <svg id="svg2" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
13     <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)"/>
14 </svg>
15
16 <p id="description"></p>
17 <p>Also, to pass the test, the rectangle should be rotated with 45deg</p>
18 <div id="console"></div>
19 <script type="text/javascript">
20 <![CDATA[
21   description("This is a test of precedency between CSS and SVG transform");
22
23
24   function dumpRect(r) {
25     return "[" + r.x
26           + " " + r.y
27           + " " + r.width 
28           + " " + r.height
29           + "]";
30   }
31
32   function dumpMatrix(matrix) {
33     return "[" + matrix.a.toFixed(1)
34           + " " + matrix.b.toFixed(1)
35           + " " + matrix.c.toFixed(1)
36           + " " + matrix.d.toFixed(1)
37           + " " + matrix.e.toFixed(1)
38           + " " + matrix.f.toFixed(1)
39           + "]";
40   }
41
42   function dumpTransform(transform) {
43     var transformTypes = {
44       "0": "SVG_TRANSFORM_UNKNOWN",
45       "1": "SVG_TRANSFORM_MATRIX",
46       "2": "SVG_TRANSFORM_TRANSLATE",
47       "3": "SVG_TRANSFORM_SCALE",
48       "4": "SVG_TRANSFORM_ROTATE",
49       "5": "SVG_TRANSFORM_SKEWX",
50       "6": "SVG_TRANSFORM_SKEWY"
51     };
52
53     return "type=" + transformTypes[transform.type] + " matrix=" + dumpMatrix(transform.matrix);
54   }
55
56   var svg1 = document.getElementById("svg1");
57   var circle = document.getElementById("circle");
58
59   var svg2 = document.getElementById("svg2");
60   var rect = document.getElementById("rect");
61
62   debug("");
63   debug("Test SVGTransformList interface");
64   shouldBe("circle.transform.baseVal.numberOfItems", "0");
65   shouldBeNull("circle.getAttribute('transform')");
66   shouldBe("rect.transform.baseVal.numberOfItems", "2");
67   shouldBeEqualToString("rect.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
68   shouldBeEqualToString("dumpTransform(rect.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
69   shouldBeEqualToString("dumpTransform(rect.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");
70
71   debug("");
72   debug("Test SVGLocatable interface");
73   shouldBeEqualToString("dumpMatrix(circle.getCTM())", "[2.0 0.0 0.0 2.0 20.0 20.0]");
74   shouldBeEqualToString("dumpMatrix(circle.getScreenCTM())", "[2.0 0.0 0.0 2.0 28.0 28.0]");
75   shouldBeEqualToString("dumpRect(circle.getBBox())", "[0 0 80 80]");
76   shouldBeEqualToString("dumpMatrix(circle.getTransformToElement(circle))", "[1.0 0.0 0.0 1.0 0.0 0.0]");
77
78   shouldBeEqualToString("dumpMatrix(rect.getCTM())", "[0.7 0.7 -0.7 0.7 100.0 0.0]");
79   shouldBeEqualToString("dumpMatrix(rect.getScreenCTM())", "[0.7 0.7 -0.7 0.7 312.0 8.0]");
80   shouldBeEqualToString("dumpRect(rect.getBBox())", "[40 40 100 100]");
81   shouldBeEqualToString("dumpMatrix(rect.getTransformToElement(rect))", "[1.0 0.0 0.0 1.0 0.0 0.0]");
82
83   debug("");
84   debug("Test CSSMatrix");
85   shouldBeEqualToString("circle.style.webkitTransform", "scale(2, 2) translate(10px, 10px)");
86   shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(circle.style.webkitTransform))", "[2.0 0.0 0.0 2.0 20.0 20.0]");
87   shouldBeEqualToString("rect.style.webkitTransform", "translate(100px) rotate(45deg)");
88   shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect.style.webkitTransform))", "[0.7 0.7 -0.7 0.7 100.0 0.0]");
89
90   debug("");
91   shouldBe("dumpMatrix(new WebKitCSSMatrix(circle.style.webkitTransform))", "dumpMatrix(circle.getCTM())");
92   shouldBe("dumpMatrix(new WebKitCSSMatrix(rect.style.webkitTransform))", "dumpMatrix(rect.getCTM())");
93
94   debug("");
95   successfullyParsed = true;
96 ]]>
97 </script>
98 <script src="../../resources/js-test-post.js"></script>
99 </body>
100 </html>