Chromium Code Reviews Chromium Code Reviews
Issue 45733010:
Add pointer-events="bounding-box" for svg content. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <html xmlns='http://www.w3.org/1999/xhtml'> | |
|
pdr.
2013/12/02 02:57:25
Nit: this file has tabs. Can you reformat using sp
| |
| 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" messages.</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="5 0" visibility="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">the 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">invi sible</tspan></text> | |
| 32 </svg> | |
| 33 | |
| 34 <script type="text/javascript"> | |
| 35 document.body.onclick = function(evt) { | |
| 36 document.getElementById("console").innerHTML = " mouse at " + evt.x + "," + evt.y; | |
| 37 }; | |
| 38 | |
| 39 if (window.testRunner) | |
| 40 testRunner.dumpAsText(); | |
| 41 | |
| 42 var resultString = ""; | |
| 43 var group1 = document.getElementById("test1"); | |
| 44 var circle1 = document.getElementById("circle1"); | |
| 45 var circle2 = document.getElementById("circle2"); | |
| 46 var text1 = document.getElementById("text1"); | |
| 47 var tspan1 = document.getElementById("tspan1"); | |
| 48 var text2 = document.getElementById("text2"); | |
| 49 var tspan2 = document.getElementById("tspan2"); | |
| 50 var text3 = document.getElementById("text3"); | |
| 51 var tspan3 = document.getElementById("tspan3"); | |
| 52 | |
| 53 var pointsOnCircle1 = [ | |
| 54 {x: 36, y: 60}, | |
| 55 {x: 42, y: 67} | |
| 56 ]; | |
| 57 | |
| 58 var pointsNotOnCircle1 = [ | |
| 59 {x: 50, y: 50}, | |
| 60 {x: 50, y: 55} | |
| 61 ]; | |
| 62 | |
| 63 var pointsInsideBBoxOfCircle1 = [ | |
| 64 {x: 100, y: 100}, | |
| 65 {x: 137, y: 84}, | |
| 66 {x: 51, y: 156}, | |
| 67 {x:70, y:120} | |
| 68 ]; | |
| 69 | |
| 70 var pointsOnCircle2 = [ | |
| 71 {x: 400, y: 150}, | |
| 72 {x: 432, y: 182}, | |
| 73 {x: 361, y: 122} | |
| 74 ]; | |
| 75 | |
| 76 var pointsInsideBBoxOfCircle2 = [ | |
| 77 {x: 438, y: 103}, | |
| 78 {x: 450, y: 200} | |
| 79 ]; | |
| 80 | |
| 81 var pointsOnText1 = [ | |
| 82 {x: 134, y: 16} | |
| 83 ]; | |
| 84 | |
| 85 var pointsOnTspan1 = [ | |
| 86 {x: 422, y: 63} | |
| 87 ]; | |
| 88 | |
| 89 var pointsNotOnText1 = [ | |
| 90 {x: 395, y: 73}, | |
| 91 {x: 74, y: 5} | |
| 92 ]; | |
| 93 | |
| 94 var pointsInsideBBoxOfText1 = [ | |
| 95 {x: 435, y: 32}, | |
| 96 {x: 115, y: 46} | |
| 97 ]; | |
| 98 | |
| 99 var pointsOnText2 = [ | |
| 100 {x: 178, y: 146} | |
| 101 ]; | |
| 102 | |
| 103 var pointsOnTspan2 = [ | |
| 104 {x: 434, y: 268} | |
| 105 ]; | |
| 106 | |
| 107 var pointsNotOnText2 = [ | |
| 108 {x: 319, y: 161}, | |
| 109 {x: 179, y: 131} | |
| 110 ]; | |
| 111 | |
| 112 var pointsInsideBBoxOfText2 = [ | |
| 113 {x: 295, y: 214}, | |
| 114 {x: 444, y: 222} | |
| 115 ]; | |
| 116 | |
| 117 var pointsOnText3 = [ | |
| 118 {x: 198, y: 291}, | |
| 119 {x: 286, y: 301} | |
| 120 ]; | |
| 121 | |
| 122 var pointsNotOnText3 = [ | |
| 123 {x: 302, y: 337}, | |
| 124 {x: 348, y: 335} | |
| 125 ]; | |
| 126 | |
| 127 pointsOnCircle1.forEach( function(point) { | |
| 128 var pass = (circle1 == document.elementFromPoint (point.x, point.y)); | |
| 129 resultString += ((pass) ? "PASS" : "FAIL") + " c ircle1 contains point at (" + point.x + ", " + point.y + ")\n"; | |
| 130 }); | |
| 131 | |
| 132 pointsNotOnCircle1.forEach( function(point) { | |
| 133 var pass = (circle1 != document.elementFromPoint (point.x, point.y)); | |
| 134 resultString += ((pass) ? "PASS" : "FAIL") + " c ircle1 does not contain point at (" + point.x + ", " + point.y + ")\n"; | |
| 135 }); | |
| 136 | |
| 137 pointsInsideBBoxOfCircle1.forEach( function(point) { | |
| 138 var pass = (group1 == document.elementFromPoint( point.x, point.y)); | |
| 139 resultString += ((pass) ? "PASS" : "FAIL") + " g roup1 contains point at (" + (point.x) + ", " + point.y + ")\n"; | |
| 140 }); | |
| 141 | |
| 142 pointsOnCircle2.forEach( function(point) { | |
| 143 var pass = (circle2 == document.elementFromPoint (point.x, point.y)); | |
| 144 resultString += ((pass) ? "PASS" : "FAIL") + " c ircle2 contains point at (" + point.x + ", " + point.y + ")\n"; | |
| 145 }); | |
| 146 | |
| 147 pointsInsideBBoxOfCircle2.forEach( function(point) { | |
| 148 var pass = (circle2 == document.elementFromPoint (point.x, point.y)); | |
| 149 resultString += ((pass) ? "PASS" : "FAIL") + " b box of circle2 contains point at (" + (point.x) + ", " + point.y + ")\n"; | |
| 150 }); | |
| 151 | |
| 152 pointsOnText1.forEach( function(point) { | |
| 153 var pass = (text1 == document.elementFromPoint(p oint.x, point.y)); | |
| 154 resultString += ((pass) ? "PASS" : "FAIL") + " t ext1 contains point at (" + point.x + ", " + point.y + ")\n"; | |
| 155 }); | |
| 156 | |
| 157 pointsOnTspan1.forEach( function(point) { | |
| 158 var pass = (tspan1 == document.elementFromPoint( point.x, point.y)); | |
| 159 resultString += ((pass) ? "PASS" : "FAIL") + " t span1 contains point at (" + point.x + ", " + point.y + ")\n"; | |
| 160 }); | |
| 161 | |
| 162 pointsNotOnText1.forEach( function(point) { | |
| 163 var elm = document.elementFromPoint(point.x, poi nt.y); | |
| 164 var pass = (text1 != elm && tspan1 != elm); | |
| 165 resultString += ((pass) ? "PASS" : "FAIL") + " t ext1 does not contain point at (" + point.x + ", " + point.y + ")\n"; | |
| 166 }); | |
| 167 | |
| 168 pointsInsideBBoxOfText1.forEach( function(point) { | |
| 169 var pass = (text1 == document.elementFromPoint(p oint.x, point.y)); | |
| 170 resultString += ((pass) ? "PASS" : "FAIL") + " b box of text1 contains point at (" + (point.x) + ", " + point.y + ")\n"; | |
| 171 }); | |
| 172 | |
| 173 pointsOnText2.forEach( function(point) { | |
| 174 var pass = (text2 == document.elementFromPoint(p oint.x, point.y)); | |
| 175 resultString += ((pass) ? "PASS" : "FAIL") + " t ext2 contains point at (" + point.x + ", " + point.y + ")\n"; | |
| 176 }); | |
| 177 | |
| 178 pointsOnTspan2.forEach( function(point) { | |
| 179 var pass = (tspan2 == document.elementFromPoint( point.x, point.y)); | |
| 180 resultString += ((pass) ? "PASS" : "FAIL") + " t span2 contains point at (" + point.x + ", " + point.y + ")\n"; | |
| 181 }); | |
| 182 | |
| 183 pointsNotOnText2.forEach( function(point) { | |
| 184 var elm = document.elementFromPoint(point.x, poi nt.y); | |
| 185 var pass = (text2 != elm && tspan2 != elm); | |
| 186 resultString += ((pass) ? "PASS" : "FAIL") + " t ext2 does not contain point at (" + point.x + ", " + point.y + ")\n"; | |
| 187 }); | |
| 188 | |
| 189 pointsInsideBBoxOfText2.forEach( function(point) { | |
| 190 var pass = (text2 == document.elementFromPoint(p oint.x, point.y)); | |
| 191 resultString += ((pass) ? "PASS" : "FAIL") + " b box of text2 contains point at (" + (point.x) + ", " + point.y + ")\n"; | |
| 192 }); | |
| 193 | |
| 194 pointsOnText3.forEach( function(point) { | |
| 195 var pass = (text3 == document.elementFromPoint(p oint.x, point.y)); | |
| 196 resultString += ((pass) ? "PASS" : "FAIL") + " t ext3 contains point at (" + point.x + ", " + point.y + ")\n"; | |
| 197 }); | |
| 198 | |
| 199 pointsNotOnText3.forEach( function(point) { | |
| 200 var elm = document.elementFromPoint(point.x, poi nt.y); | |
| 201 var pass = (text3 != elm && tspan3 != elm); | |
| 202 resultString += ((pass) ? "PASS" : "FAIL") + " t ext3 does not contain point at (" + point.x + ", " + point.y + ")\n"; | |
| 203 }); | |
| 204 | |
| 205 document.getElementById("console").innerHTML = resultStr ing; | |
| 206 </script> | |
| 207 </body> | |
| 208 </html> | |
| OLD | NEW |
