third_party/WebKit/LayoutTests/svg/hittest/svg-pointer-events-bbox.html

   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" 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="50" 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">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="translate(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 point 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 contains 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 point 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 point 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 contain 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 contains 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 point 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 point 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 contain 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 contains 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 point 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 contain 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 point at (" + point.x + ", " + point.y + ")\n";
 216             });
 217
 218             document.getElementById("console").innerHTML = resultString;
 219         </script>
 220     </body>
 221 </html>