OLD | NEW |
---|---|
(Empty) | |
1 <html xmlns='http://www.w3.org/1999/xhtml'> | |
pdr.
2013/11/01 03:42:00
nit: can you cleanup the indentation in this test
| |
2 <head> | |
3 <style type="text/css"> | |
4 #svgRoot { | |
5 margin: 0px; | |
6 padding: 0px; | |
7 position: absolute; | |
8 top: 0px; | |
9 left: 0px; | |
10 } | |
11 | |
12 .test { fill: blue; pointer-events: boundingBox; } | |
13 .test:hover { fill: green; visibility: visible; } | |
14 </style> | |
15 </head> | |
16 <body> | |
17 <p>Tests for pointer-events=boundingBox - hit testing.</p> | |
18 <p>On success, you will see a series of "PASS" messages and no "FAIL" messag es.</p> | |
19 <pre id="console"></pre> | |
20 | |
21 <svg id="svgRoot" width="480px" height="360px" | |
22 viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" | |
23 xmlns:xlink="http://www.w3.org/1999/xlink" opacity="0"> | |
24 <g class="test" id="test1" transform="rotate(15)"> | |
25 <circle id="circle1" cx="50" cy="50" r="10"/> | |
26 <circle cx="150" cy="150" r="10"/> | |
27 </g> | |
28 <circle class="test" id="circle2" cx="400" cy="150" r="50" visib ility="hidden"/> | |
29 <text class="test" id="text1" x="100" y="20">Text should change color when mouse is within <tspan id="tspan1" dy="3em">the bbox.</tspan></text> | |
30 <text class="test" id="text2" x="150" y="100" transform="rotate( 15)">Text should change color when mouse is within <tspan id="tspan2" dy="3em">t he bbox.</tspan></text> | |
31 <text class="test" id="text3" x="200" y="280" transform="rotate( 5)">Text should end here.<tspan id="tspan3" dy="2em" display="none">invisible</t span></text> | |
32 </svg> | |
33 <script type="text/javascript"> | |
34 document.body.onclick = function(evt) { document.getElementById("console") .innerHTML = "mouse at " + evt.x + "," + evt.y; } | |
35 | |
36 if (window.testRunner) | |
37 testRunner.dumpAsText(); | |
38 | |
39 var resultString = ""; | |
40 var group1 = document.getElementById("test1"); | |
41 var circle1 = document.getElementById("circle1"); | |
42 var circle2 = document.getElementById("circle2"); | |
43 var text1 = document.getElementById("text1"); | |
44 var tspan1 = document.getElementById("tspan1"); | |
45 var text2 = document.getElementById("text2"); | |
46 var tspan2 = document.getElementById("tspan2"); | |
47 var text3 = document.getElementById("text3"); | |
48 var tspan3 = document.getElementById("tspan3"); | |
49 | |
50 var pointsOnCircle1 = [ | |
51 {x: 36, y: 60}, | |
52 {x: 42, y: 67} | |
53 ]; | |
54 | |
55 var pointsNotOnCircle1 = [ | |
56 {x: 50, y: 50}, | |
57 {x: 50, y: 55} | |
58 ]; | |
59 | |
60 var pointsInsideBBoxOfCircle1 = [ | |
61 {x: 100, y: 100}, | |
62 {x: 137, y: 84}, | |
63 {x: 51, y: 156}, | |
64 {x:70, y:120} | |
65 ]; | |
66 | |
67 var pointsOnCircle2 = [ | |
68 {x: 400, y: 150}, | |
69 {x: 432, y: 182}, | |
70 {x: 361, y: 122} | |
71 ]; | |
72 | |
73 var pointsInsideBBoxOfCircle2 = [ | |
74 {x: 438, y: 103}, | |
75 {x: 450, y: 200} | |
76 ]; | |
77 | |
78 var pointsOnText1 = [ | |
79 {x: 134, y: 16} | |
80 ]; | |
81 | |
82 var pointsOnTspan1 = [ | |
83 {x: 422, y: 63} | |
84 ]; | |
85 | |
86 var pointsNotOnText1 = [ | |
87 {x: 395, y: 73}, | |
88 {x: 74, y: 5} | |
89 ]; | |
90 | |
91 var pointsInsideBBoxOfText1 = [ | |
92 {x: 435, y: 32}, | |
93 {x: 115, y: 46} | |
94 ]; | |
95 | |
96 var pointsOnText2 = [ | |
97 {x: 178, y: 146} | |
98 ]; | |
99 | |
100 var pointsOnTspan2 = [ | |
101 {x: 434, y: 268} | |
102 ]; | |
103 | |
104 var pointsNotOnText2 = [ | |
105 {x: 319, y: 161}, | |
106 {x: 179, y: 131} | |
107 ]; | |
108 | |
109 var pointsInsideBBoxOfText2 = [ | |
110 {x: 295, y: 214}, | |
111 {x: 444, y: 222} | |
112 ]; | |
113 | |
114 var pointsOnText3 = [ | |
115 {x: 198, y: 291}, | |
116 {x: 286, y: 301} | |
117 ]; | |
118 | |
119 var pointsNotOnText3 = [ | |
120 {x: 302, y: 337}, | |
121 {x: 348, y: 335} | |
122 ]; | |
123 | |
124 pointsOnCircle1.forEach( function(point) { | |
125 var pass = (circle1 == document.elementFromPoint(point.x, point.y)); | |
126 resultString += ((pass) ? "PASS" : "FAIL") + " circle1 contains point at (" + point.x + ", " + point.y + ")\n"; | |
127 }); | |
128 | |
129 pointsNotOnCircle1.forEach( function(point) { | |
130 var pass = (circle1 != document.elementFromPoint(point.x, point.y)); | |
131 resultString += ((pass) ? "PASS" : "FAIL") + " circle1 does not contain point at (" + point.x + ", " + point.y + ")\n"; | |
132 }); | |
133 | |
134 pointsInsideBBoxOfCircle1.forEach( function(point) { | |
135 var pass = (group1 == document.elementFromPoint(point.x, point.y)); | |
136 resultString += ((pass) ? "PASS" : "FAIL") + " group1 contains point at (" + (point.x) + ", " + point.y + ")\n"; | |
137 }); | |
138 | |
139 pointsOnCircle2.forEach( function(point) { | |
140 var pass = (circle2 == document.elementFromPoint(point.x, point.y)); | |
141 resultString += ((pass) ? "PASS" : "FAIL") + " circle2 contains point at (" + point.x + ", " + point.y + ")\n"; | |
142 }); | |
143 | |
144 pointsInsideBBoxOfCircle2.forEach( function(point) { | |
145 var pass = (circle2 == document.elementFromPoint(point.x, point.y)); | |
146 resultString += ((pass) ? "PASS" : "FAIL") + " bbox of circle2 contains point at (" + (point.x) + ", " + point.y + ")\n"; | |
147 }); | |
148 | |
149 pointsOnText1.forEach( function(point) { | |
150 var pass = (text1 == document.elementFromPoint(point.x, point.y)); | |
151 resultString += ((pass) ? "PASS" : "FAIL") + " text1 contains point at ( " + point.x + ", " + point.y + ")\n"; | |
152 }); | |
153 | |
154 pointsOnTspan1.forEach( function(point) { | |
155 var pass = (tspan1 == document.elementFromPoint(point.x, point.y)); | |
156 resultString += ((pass) ? "PASS" : "FAIL") + " tspan1 contains point at (" + point.x + ", " + point.y + ")\n"; | |
157 }); | |
158 | |
159 pointsNotOnText1.forEach( function(point) { | |
160 var elm = document.elementFromPoint(point.x, point.y); | |
161 var pass = (text1 != elm && tspan1 != elm); | |
162 resultString += ((pass) ? "PASS" : "FAIL") + " text1 does not contain po int at (" + point.x + ", " + point.y + ")\n"; | |
163 }); | |
164 | |
165 pointsInsideBBoxOfText1.forEach( function(point) { | |
166 var pass = (text1 == document.elementFromPoint(point.x, point.y)); | |
167 resultString += ((pass) ? "PASS" : "FAIL") + " bbox of text1 contains po int at (" + (point.x) + ", " + point.y + ")\n"; | |
168 }); | |
169 | |
170 pointsOnText2.forEach( function(point) { | |
171 var pass = (text2 == document.elementFromPoint(point.x, point.y)); | |
172 resultString += ((pass) ? "PASS" : "FAIL") + " text2 contains point at ( " + point.x + ", " + point.y + ")\n"; | |
173 }); | |
174 | |
175 pointsOnTspan2.forEach( function(point) { | |
176 var pass = (tspan2 == document.elementFromPoint(point.x, point.y)); | |
177 resultString += ((pass) ? "PASS" : "FAIL") + " tspan2 contains point at (" + point.x + ", " + point.y + ")\n"; | |
178 }); | |
179 | |
180 pointsNotOnText2.forEach( function(point) { | |
181 var elm = document.elementFromPoint(point.x, point.y); | |
182 var pass = (text2 != elm && tspan2 != elm); | |
183 resultString += ((pass) ? "PASS" : "FAIL") + " text2 does not contain po int at (" + point.x + ", " + point.y + ")\n"; | |
184 }); | |
185 | |
186 pointsInsideBBoxOfText2.forEach( function(point) { | |
187 var pass = (text2 == document.elementFromPoint(point.x, point.y)); | |
188 resultString += ((pass) ? "PASS" : "FAIL") + " bbox of text2 contains po int at (" + (point.x) + ", " + point.y + ")\n"; | |
189 }); | |
190 | |
191 pointsOnText3.forEach( function(point) { | |
192 var pass = (text3 == document.elementFromPoint(point.x, point.y)); | |
193 resultString += ((pass) ? "PASS" : "FAIL") + " text3 contains point at ( " + point.x + ", " + point.y + ")\n"; | |
194 }); | |
195 | |
196 pointsNotOnText3.forEach( function(point) { | |
197 var elm = document.elementFromPoint(point.x, point.y); | |
198 var pass = (text3 != elm && tspan3 != elm); | |
199 resultString += ((pass) ? "PASS" : "FAIL") + " text3 does not contain po int at (" + point.x + ", " + point.y + ")\n"; | |
200 }); | |
201 | |
202 document.getElementById("console").innerHTML = resultString; | |
203 </script> | |
204 </body> | |
205 </html> | |
OLD | NEW |