OLD | NEW |
(Empty) | |
| 1 <html xmlns='http://www.w3.org/1999/xhtml'> |
| 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: bounding-box; } |
| 13 .test:hover { fill: green; visibility: visible; } |
| 14 </style> |
| 15 </head> |
| 16 <body> |
| 17 <p>Tests for pointer-events=bounding-box - hit testing.</p> |
| 18 <p>On success, you will see a series of "PASS" messages and no "FAIL" me
ssages.</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" visibilit
y="hidden"/> |
| 29 <text class="test" id="text1" x="100" y="20">Text should change colo
r 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">the b
box.</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</tspan
></text> |
| 32 <image class="test" id="image1" xlink:href="data:image/svg+xml,<svg
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'><rect x='10' y='10' width
='20' height='10' fill='blue'/></svg>" |
| 33 width="50" height="30" visibility="hidden" transform="transla
te(0,200)"/> |
| 34 </svg> |
| 35 |
| 36 <script type="text/javascript"> |
| 37 document.body.onclick = function(evt) { |
| 38 document.getElementById("console").innerHTML = "mouse at " + evt
.x + "," + evt.y; |
| 39 }; |
| 40 |
| 41 if (window.testRunner) |
| 42 testRunner.dumpAsText(); |
| 43 |
| 44 var resultString = ""; |
| 45 var group1 = document.getElementById("test1"); |
| 46 var circle1 = document.getElementById("circle1"); |
| 47 var circle2 = document.getElementById("circle2"); |
| 48 var text1 = document.getElementById("text1"); |
| 49 var tspan1 = document.getElementById("tspan1"); |
| 50 var text2 = document.getElementById("text2"); |
| 51 var tspan2 = document.getElementById("tspan2"); |
| 52 var text3 = document.getElementById("text3"); |
| 53 var tspan3 = document.getElementById("tspan3"); |
| 54 var image1 = document.getElementById("image1"); |
| 55 |
| 56 var pointsOnCircle1 = [ |
| 57 {x: 36, y: 60}, |
| 58 {x: 42, y: 67} |
| 59 ]; |
| 60 |
| 61 var pointsNotOnCircle1 = [ |
| 62 {x: 50, y: 50}, |
| 63 {x: 50, y: 55} |
| 64 ]; |
| 65 |
| 66 var pointsInsideBBoxOfCircle1 = [ |
| 67 {x: 100, y: 100}, |
| 68 {x: 137, y: 84}, |
| 69 {x: 51, y: 156}, |
| 70 {x:70, y:120} |
| 71 ]; |
| 72 |
| 73 var pointsOnCircle2 = [ |
| 74 {x: 400, y: 150}, |
| 75 {x: 432, y: 182}, |
| 76 {x: 361, y: 122} |
| 77 ]; |
| 78 |
| 79 var pointsInsideBBoxOfCircle2 = [ |
| 80 {x: 438, y: 103}, |
| 81 {x: 450, y: 200} |
| 82 ]; |
| 83 |
| 84 var pointsOnText1 = [ |
| 85 {x: 134, y: 16} |
| 86 ]; |
| 87 |
| 88 var pointsOnTspan1 = [ |
| 89 {x: 422, y: 63} |
| 90 ]; |
| 91 |
| 92 var pointsNotOnText1 = [ |
| 93 {x: 395, y: 73}, |
| 94 {x: 74, y: 5} |
| 95 ]; |
| 96 |
| 97 var pointsInsideBBoxOfText1 = [ |
| 98 {x: 435, y: 32}, |
| 99 {x: 115, y: 46} |
| 100 ]; |
| 101 |
| 102 var pointsOnText2 = [ |
| 103 {x: 178, y: 146} |
| 104 ]; |
| 105 |
| 106 var pointsOnTspan2 = [ |
| 107 {x: 434, y: 268} |
| 108 ]; |
| 109 |
| 110 var pointsNotOnText2 = [ |
| 111 {x: 319, y: 161}, |
| 112 {x: 179, y: 131} |
| 113 ]; |
| 114 |
| 115 var pointsInsideBBoxOfText2 = [ |
| 116 {x: 295, y: 214}, |
| 117 {x: 444, y: 222} |
| 118 ]; |
| 119 |
| 120 var pointsOnText3 = [ |
| 121 {x: 198, y: 291}, |
| 122 {x: 286, y: 301} |
| 123 ]; |
| 124 |
| 125 var pointsNotOnText3 = [ |
| 126 {x: 302, y: 337}, |
| 127 {x: 348, y: 335} |
| 128 ]; |
| 129 |
| 130 var pointsOnImage1 = [ |
| 131 {x: 19, y: 215}, |
| 132 {x: 45, y: 225} |
| 133 ]; |
| 134 |
| 135 pointsOnCircle1.forEach( function(point) { |
| 136 var pass = (circle1 == document.elementFromPoint(point.x, point.
y)); |
| 137 resultString += ((pass) ? "PASS" : "FAIL") + " circle1 contains
point at (" + point.x + ", " + point.y + ")\n"; |
| 138 }); |
| 139 |
| 140 pointsNotOnCircle1.forEach( function(point) { |
| 141 var pass = (circle1 != document.elementFromPoint(point.x, point.
y)); |
| 142 resultString += ((pass) ? "PASS" : "FAIL") + " circle1 does not
contain point at (" + point.x + ", " + point.y + ")\n"; |
| 143 }); |
| 144 |
| 145 pointsInsideBBoxOfCircle1.forEach( function(point) { |
| 146 var pass = (group1 == document.elementFromPoint(point.x, point.y
)); |
| 147 resultString += ((pass) ? "PASS" : "FAIL") + " group1 contains p
oint at (" + (point.x) + ", " + point.y + ")\n"; |
| 148 }); |
| 149 |
| 150 pointsOnCircle2.forEach( function(point) { |
| 151 var pass = (circle2 == document.elementFromPoint(point.x, point.
y)); |
| 152 resultString += ((pass) ? "PASS" : "FAIL") + " circle2 contains
point at (" + point.x + ", " + point.y + ")\n"; |
| 153 }); |
| 154 |
| 155 pointsInsideBBoxOfCircle2.forEach( function(point) { |
| 156 var pass = (circle2 == document.elementFromPoint(point.x, point.
y)); |
| 157 resultString += ((pass) ? "PASS" : "FAIL") + " bbox of circle2 c
ontains point at (" + (point.x) + ", " + point.y + ")\n"; |
| 158 }); |
| 159 |
| 160 pointsOnText1.forEach( function(point) { |
| 161 var pass = (text1 == document.elementFromPoint(point.x, point.y)
); |
| 162 resultString += ((pass) ? "PASS" : "FAIL") + " text1 contains po
int at (" + point.x + ", " + point.y + ")\n"; |
| 163 }); |
| 164 |
| 165 pointsOnTspan1.forEach( function(point) { |
| 166 var pass = (tspan1 == document.elementFromPoint(point.x, point.y
)); |
| 167 resultString += ((pass) ? "PASS" : "FAIL") + " tspan1 contains p
oint at (" + point.x + ", " + point.y + ")\n"; |
| 168 }); |
| 169 |
| 170 pointsNotOnText1.forEach( function(point) { |
| 171 var elm = document.elementFromPoint(point.x, point.y); |
| 172 var pass = (text1 != elm && tspan1 != elm); |
| 173 resultString += ((pass) ? "PASS" : "FAIL") + " text1 does not co
ntain point at (" + point.x + ", " + point.y + ")\n"; |
| 174 }); |
| 175 |
| 176 pointsInsideBBoxOfText1.forEach( function(point) { |
| 177 var pass = (text1 == document.elementFromPoint(point.x, point.y)
); |
| 178 resultString += ((pass) ? "PASS" : "FAIL") + " bbox of text1 con
tains point at (" + (point.x) + ", " + point.y + ")\n"; |
| 179 }); |
| 180 |
| 181 pointsOnText2.forEach( function(point) { |
| 182 var pass = (text2 == document.elementFromPoint(point.x, point.y)
); |
| 183 resultString += ((pass) ? "PASS" : "FAIL") + " text2 contains po
int at (" + point.x + ", " + point.y + ")\n"; |
| 184 }); |
| 185 |
| 186 pointsOnTspan2.forEach( function(point) { |
| 187 var pass = (tspan2 == document.elementFromPoint(point.x, point.y
)); |
| 188 resultString += ((pass) ? "PASS" : "FAIL") + " tspan2 contains p
oint at (" + point.x + ", " + point.y + ")\n"; |
| 189 }); |
| 190 |
| 191 pointsNotOnText2.forEach( function(point) { |
| 192 var elm = document.elementFromPoint(point.x, point.y); |
| 193 var pass = (text2 != elm && tspan2 != elm); |
| 194 resultString += ((pass) ? "PASS" : "FAIL") + " text2 does not co
ntain point at (" + point.x + ", " + point.y + ")\n"; |
| 195 }); |
| 196 |
| 197 pointsInsideBBoxOfText2.forEach( function(point) { |
| 198 var pass = (text2 == document.elementFromPoint(point.x, point.y)
); |
| 199 resultString += ((pass) ? "PASS" : "FAIL") + " bbox of text2 con
tains point at (" + (point.x) + ", " + point.y + ")\n"; |
| 200 }); |
| 201 |
| 202 pointsOnText3.forEach( function(point) { |
| 203 var pass = (text3 == document.elementFromPoint(point.x, point.y)
); |
| 204 resultString += ((pass) ? "PASS" : "FAIL") + " text3 contains po
int at (" + point.x + ", " + point.y + ")\n"; |
| 205 }); |
| 206 |
| 207 pointsNotOnText3.forEach( function(point) { |
| 208 var elm = document.elementFromPoint(point.x, point.y); |
| 209 var pass = (text3 != elm && tspan3 != elm); |
| 210 resultString += ((pass) ? "PASS" : "FAIL") + " text3 does not co
ntain point at (" + point.x + ", " + point.y + ")\n"; |
| 211 }); |
| 212 |
| 213 pointsOnImage1.forEach( function(point) { |
| 214 var pass = (image1 == document.elementFromPoint(point.x, point.y
)); |
| 215 resultString += ((pass) ? "PASS" : "FAIL") + " image1 contains p
oint at (" + point.x + ", " + point.y + ")\n"; |
| 216 }); |
| 217 |
| 218 document.getElementById("console").innerHTML = resultString; |
| 219 </script> |
| 220 </body> |
| 221 </html> |
OLD | NEW |