Implement SVGGeometryElement's isPointInFill and isPointInStroke
[WebKit-https.git] / LayoutTests / svg / dom / SVGGeometry-isPointInStroke.xhtml
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <script src="../../resources/js-test-pre.js"></script>
4 </head>
5 <body onload="run()">
6 <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
7     <path id="p1" d="M-100 -100L100 -100 L100 100 L-100 100 z"/>
8     <path id="p2" d="M-1 0 L 200 0"/>
9     <path id="p3" d="M-1 0 L 200 0" stroke="black"/>
10     <path id="p4" d="M0 0 L 200 0" stroke="black" stroke-width="20" stroke-dashoffset="20" stroke-dasharray="20 20"/>
11     <path id="p5" d="M20 0 L 200 0" stroke="black" stroke-width="20" stroke-linecap="round"/>
12     <path id="p6" d="M20 0 L 200 0" stroke="black" stroke-width="20" stroke-linecap="square"/>
13     <path id="p7" d="M20 0 L 200 0" stroke="black" stroke-width="20" stroke-linecap="butt"/>
14     <path id="p8" d="M0 0 L20 60 L40 0" stroke="black" stroke-width="20" stroke-linejoin="miter" stroke-miterlimit="30"/>
15     <path id="p9" d="M0 0 L20 60 L40 0" stroke="black" stroke-width="20" stroke-linejoin="round" stroke-miterlimit="30"/>
16     <path id="p10" d="M0 0 L20 60 L40 0" stroke="black" stroke-width="20" stroke-linejoin="bevel" stroke-miterlimit="30"/>
17     <path id="p11" d="M-1 0 L 200 0" stroke="black" stroke-width="20" transform="translate(-200, -200)"/>
18     <path id="p12" d="M-1 0 L 200 0" stroke="black" stroke-width="20" display="none"/>
19     <path id="p13" d="M-1 0 L 200 0" stroke="black" stroke-width="20" visibility="hidden"/>
20     <path id="p14" d="M-1 0 L 200 0" stroke="black" stroke-width="20" opacity="0"/>
21     <g transform="scale(20)">
22         <path id="p15" d="M0 0 L 200 0" stroke="black" stroke-width="20" vector-effect="non-scaling-stroke"/>
23     </g>
24 </svg>
25 <p id="description"></p>
26 <div id="console"></div>
27 <script type="text/javascript">
28 <![CDATA[
29 window.enablePixelTesting = false;
30 window.jsTestIsAsync = true;
31 var svg = document.getElementById("svg");
32 var p1 = document.getElementById("p1"),
33     p2 = document.getElementById("p2"),
34     p3 = document.getElementById("p3"),
35     p4 = document.getElementById("p4"),
36     p5 = document.getElementById("p5"),
37     p6 = document.getElementById("p6"),
38     p7 = document.getElementById("p7"),
39     p8 = document.getElementById("p8"),
40     p9 = document.getElementById("p9"),
41     p10 = document.getElementById("p10"),
42     p11 = document.getElementById("p11"),
43     p12 = document.getElementById("p12"),
44     p13 = document.getElementById("p13"),
45     p14 = document.getElementById("p14"),
46     p15 = document.getElementById("p15");
47 var svgPoint = svg.createSVGPoint();
48
49 function run() {
50     description("Test isPointInStroke() on path.");
51
52     debug("");
53     debug("Test that fill area does not contribute to stroke area");
54     shouldBe("p1.isPointInStroke()", "false");
55     shouldBe("p1.isPointInStroke({})", "false");
56
57     debug("");
58     debug("Test disabled stroke");
59     shouldBe("p2.isPointInStroke({x: 1, y: 0})", "false");
60
61     debug("");
62     debug("Test general functionality");
63     shouldBe("p3.isPointInStroke()", "true");
64     shouldBe("p3.isPointInStroke({})", "true");
65     shouldBe("p3.isPointInStroke(new DOMPoint())", "true");
66     shouldBe("p3.isPointInStroke(new DOMPoint(1, 0))", "true");
67     shouldBe("p3.isPointInStroke(new DOMPoint(-200, -200))", "false");
68     shouldBe("p3.isPointInStroke(new DOMPointReadOnly())", "true");
69     shouldBe("p3.isPointInStroke(new DOMPointReadOnly(-200, -200))", "false");
70     shouldBe("p3.isPointInStroke(svgPoint)", "true");
71     svgPoint.x = -200;
72     svgPoint.y = -200;
73     shouldBe("p3.isPointInStroke(svgPoint)", "false");
74     shouldBe("p3.isPointInStroke(new DOMPoint(NaN))", "false");
75     shouldBe("p3.isPointInStroke(new DOMPoint(Infinity))", "false");
76     shouldThrow("p3.isPointInStroke('string')");
77
78     debug("");
79     debug("Test CSS properties that shall not affect isPointInStroke");
80     shouldBe("p11.isPointInStroke()", "true");
81     shouldBe("p12.isPointInStroke()", "true");
82     shouldBe("p13.isPointInStroke()", "true");
83     shouldBe("p14.isPointInStroke()", "true");
84
85     debug("");
86     debug("Test different stroke properties");
87     shouldBe("p4.isPointInStroke()", "false");
88     shouldBe("p4.isPointInStroke({x: 19})", "false");
89     shouldBe("p4.isPointInStroke({x: 20})", "true");
90     shouldBe("p4.isPointInStroke({x: 30})", "true");
91     shouldBe("p4.isPointInStroke({x: 40})", "true");
92     shouldBe("p4.isPointInStroke({x: 41})", "false");
93     shouldBe("p4.isPointInStroke({x: 50})", "false");
94     shouldBe("p4.isPointInStroke({x: 59})", "false");
95     shouldBe("p4.isPointInStroke({x: 60})", "true");
96     shouldBe("p4.isPointInStroke({x: 20, y: 10})", "true");
97     shouldBe("p4.isPointInStroke({x: 20, y: 11})", "false");
98     shouldBe("p4.isPointInStroke({x: 20, y: -10})", "true");
99     shouldBe("p4.isPointInStroke({x: 20, y: -11})", "false");
100
101     debug("");
102     debug("Test different linecaps");
103     shouldBe("p5.isPointInStroke({x: 18})", "true");
104     shouldBe("p6.isPointInStroke({x: 18})", "true");
105     shouldBe("p7.isPointInStroke({x: 18})", "false");
106
107     debug("");
108     debug("Test different linejoins");
109     shouldBe("p8.isPointInStroke({x: 20, y: 60})", "true");
110     shouldBe("p8.isPointInStroke({x: 20, y: 75})", "true");
111     shouldBe("p8.isPointInStroke({x: 20, y: 90})", "true");
112     shouldBe("p9.isPointInStroke({x: 20, y: 60})", "true");
113     shouldBe("p9.isPointInStroke({x: 20, y: 70})", "true");
114     shouldBe("p9.isPointInStroke({x: 20, y: 90})", "false");
115     shouldBe("p10.isPointInStroke({x: 20, y: 60})", "true");
116     shouldBe("p10.isPointInStroke({x: 20, y: 70})", "false");
117     shouldBe("p10.isPointInStroke({x: 20, y: 90})", "false");
118
119     debug("");
120     debug("Test non-scaling-stroke");
121     shouldBe("p15.isPointInStroke({})", "true");
122     shouldBe("p15.isPointInStroke({y: 1})", "true");
123     shouldBe("p15.isPointInStroke({y: 11})", "false");
124     finishJSTest();
125 }
126 ]]>
127 </script>
128 <script src="../../resources/js-test-post.js"></script>
129 </body>
130 </html>