Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(87)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/svg/hittest/svg-pointer-events-bbox.html

Issue 45733010: Add pointer-events="bounding-box" for svg content. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: make assert more specific Created 7 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/svg/hittest/svg-pointer-events-bbox-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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..9263003409e1ee62ecb456f3d1a17a0870d258b2
--- /dev/null
+++ b/LayoutTests/svg/hittest/svg-pointer-events-bbox.html
@@ -0,0 +1,221 @@
+<html xmlns='http://www.w3.org/1999/xhtml'>
+ <head>
+ <style type="text/css">
+ #svgRoot {
+ margin: 0px;
+ padding: 0px;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ }
+
+ .test { fill: blue; pointer-events: bounding-box; }
+ .test:hover { fill: green; visibility: visible; }
+ </style>
+ </head>
+ <body>
+ <p>Tests for pointer-events=bounding-box - 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>
+ <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>"
+ width="50" height="30" visibility="hidden" transform="translate(0,200)"/>
+ </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 image1 = document.getElementById("image1");
+
+ 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}
+ ];
+
+ var pointsOnImage1 = [
+ {x: 19, y: 215},
+ {x: 45, y: 225}
+ ];
+
+ 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";
+ });
+
+ pointsOnImage1.forEach( function(point) {
+ var pass = (image1 == document.elementFromPoint(point.x, point.y));
+ resultString += ((pass) ? "PASS" : "FAIL") + " image1 contains point at (" + point.x + ", " + point.y + ")\n";
+ });
+
+ document.getElementById("console").innerHTML = resultString;
+ </script>
+ </body>
+</html>
« no previous file with comments | « no previous file | LayoutTests/svg/hittest/svg-pointer-events-bbox-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698