Chromium Code Reviews| Index: LayoutTests/svg/hittest/svg-pointer-events-bbox.html |
| diff --git a/LayoutTests/svg/hittest/svg-pointer-events-bbox.html b/LayoutTests/svg/hittest/svg-pointer-events-bbox.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..ae6e1e1e63436db9ab2f19ee609c0405cab45033 |
| --- /dev/null |
| +++ b/LayoutTests/svg/hittest/svg-pointer-events-bbox.html |
| @@ -0,0 +1,208 @@ |
| +<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
|
| + <head> |
| + <style type="text/css"> |
| + #svgRoot { |
| + margin: 0px; |
| + padding: 0px; |
| + position: absolute; |
| + top: 0px; |
| + left: 0px; |
| + } |
| + |
| + .test { fill: blue; pointer-events: boundingbox; } |
| + .test:hover { fill: green; visibility: visible; } |
| + </style> |
| + </head> |
| + <body> |
| + <p>Tests for pointer-events=boundingbox - hit testing.</p> |
| + <p>On success, you will see a series of "PASS" messages and no "FAIL" messages.</p> |
| + <pre id="console"></pre> |
| + |
| + <svg id="svgRoot" width="480px" height="360px" |
| + viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" |
| + xmlns:xlink="http://www.w3.org/1999/xlink" opacity="0"> |
| + <g class="test" id="test1" transform="rotate(15)"> |
| + <circle id="circle1" cx="50" cy="50" r="10"/> |
| + <circle cx="150" cy="150" r="10"/> |
| + </g> |
| + <circle class="test" id="circle2" cx="400" cy="150" r="50" visibility="hidden"/> |
| + <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> |
| + <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> |
| + <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> |
| + </svg> |
| + |
| + <script type="text/javascript"> |
| + document.body.onclick = function(evt) { |
| + document.getElementById("console").innerHTML = "mouse at " + evt.x + "," + evt.y; |
| + }; |
| + |
| + if (window.testRunner) |
| + testRunner.dumpAsText(); |
| + |
| + var resultString = ""; |
| + var group1 = document.getElementById("test1"); |
| + var circle1 = document.getElementById("circle1"); |
| + var circle2 = document.getElementById("circle2"); |
| + var text1 = document.getElementById("text1"); |
| + var tspan1 = document.getElementById("tspan1"); |
| + var text2 = document.getElementById("text2"); |
| + var tspan2 = document.getElementById("tspan2"); |
| + var text3 = document.getElementById("text3"); |
| + var tspan3 = document.getElementById("tspan3"); |
| + |
| + var pointsOnCircle1 = [ |
| + {x: 36, y: 60}, |
| + {x: 42, y: 67} |
| + ]; |
| + |
| + var pointsNotOnCircle1 = [ |
| + {x: 50, y: 50}, |
| + {x: 50, y: 55} |
| + ]; |
| + |
| + var pointsInsideBBoxOfCircle1 = [ |
| + {x: 100, y: 100}, |
| + {x: 137, y: 84}, |
| + {x: 51, y: 156}, |
| + {x:70, y:120} |
| + ]; |
| + |
| + var pointsOnCircle2 = [ |
| + {x: 400, y: 150}, |
| + {x: 432, y: 182}, |
| + {x: 361, y: 122} |
| + ]; |
| + |
| + var pointsInsideBBoxOfCircle2 = [ |
| + {x: 438, y: 103}, |
| + {x: 450, y: 200} |
| + ]; |
| + |
| + var pointsOnText1 = [ |
| + {x: 134, y: 16} |
| + ]; |
| + |
| + var pointsOnTspan1 = [ |
| + {x: 422, y: 63} |
| + ]; |
| + |
| + var pointsNotOnText1 = [ |
| + {x: 395, y: 73}, |
| + {x: 74, y: 5} |
| + ]; |
| + |
| + var pointsInsideBBoxOfText1 = [ |
| + {x: 435, y: 32}, |
| + {x: 115, y: 46} |
| + ]; |
| + |
| + var pointsOnText2 = [ |
| + {x: 178, y: 146} |
| + ]; |
| + |
| + var pointsOnTspan2 = [ |
| + {x: 434, y: 268} |
| + ]; |
| + |
| + var pointsNotOnText2 = [ |
| + {x: 319, y: 161}, |
| + {x: 179, y: 131} |
| + ]; |
| + |
| + var pointsInsideBBoxOfText2 = [ |
| + {x: 295, y: 214}, |
| + {x: 444, y: 222} |
| + ]; |
| + |
| + var pointsOnText3 = [ |
| + {x: 198, y: 291}, |
| + {x: 286, y: 301} |
| + ]; |
| + |
| + var pointsNotOnText3 = [ |
| + {x: 302, y: 337}, |
| + {x: 348, y: 335} |
| + ]; |
| + |
| + pointsOnCircle1.forEach( function(point) { |
| + var pass = (circle1 == document.elementFromPoint(point.x, point.y)); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " circle1 contains point at (" + point.x + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsNotOnCircle1.forEach( function(point) { |
| + var pass = (circle1 != document.elementFromPoint(point.x, point.y)); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " circle1 does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsInsideBBoxOfCircle1.forEach( function(point) { |
| + var pass = (group1 == document.elementFromPoint(point.x, point.y)); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " group1 contains point at (" + (point.x) + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsOnCircle2.forEach( function(point) { |
| + var pass = (circle2 == document.elementFromPoint(point.x, point.y)); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " circle2 contains point at (" + point.x + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsInsideBBoxOfCircle2.forEach( function(point) { |
| + var pass = (circle2 == document.elementFromPoint(point.x, point.y)); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " bbox of circle2 contains point at (" + (point.x) + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsOnText1.forEach( function(point) { |
| + var pass = (text1 == document.elementFromPoint(point.x, point.y)); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " text1 contains point at (" + point.x + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsOnTspan1.forEach( function(point) { |
| + var pass = (tspan1 == document.elementFromPoint(point.x, point.y)); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " tspan1 contains point at (" + point.x + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsNotOnText1.forEach( function(point) { |
| + var elm = document.elementFromPoint(point.x, point.y); |
| + var pass = (text1 != elm && tspan1 != elm); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " text1 does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsInsideBBoxOfText1.forEach( function(point) { |
| + var pass = (text1 == document.elementFromPoint(point.x, point.y)); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " bbox of text1 contains point at (" + (point.x) + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsOnText2.forEach( function(point) { |
| + var pass = (text2 == document.elementFromPoint(point.x, point.y)); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " text2 contains point at (" + point.x + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsOnTspan2.forEach( function(point) { |
| + var pass = (tspan2 == document.elementFromPoint(point.x, point.y)); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " tspan2 contains point at (" + point.x + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsNotOnText2.forEach( function(point) { |
| + var elm = document.elementFromPoint(point.x, point.y); |
| + var pass = (text2 != elm && tspan2 != elm); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " text2 does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsInsideBBoxOfText2.forEach( function(point) { |
| + var pass = (text2 == document.elementFromPoint(point.x, point.y)); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " bbox of text2 contains point at (" + (point.x) + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsOnText3.forEach( function(point) { |
| + var pass = (text3 == document.elementFromPoint(point.x, point.y)); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " text3 contains point at (" + point.x + ", " + point.y + ")\n"; |
| + }); |
| + |
| + pointsNotOnText3.forEach( function(point) { |
| + var elm = document.elementFromPoint(point.x, point.y); |
| + var pass = (text3 != elm && tspan3 != elm); |
| + resultString += ((pass) ? "PASS" : "FAIL") + " text3 does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| + }); |
| + |
| + document.getElementById("console").innerHTML = resultString; |
| + </script> |
| + </body> |
| +</html> |