LayoutTests/svg/hittest/svg-small-viewbox.xhtml

   1 <html xmlns='http://www.w3.org/1999/xhtml'>
   2   <head>
   3     <style>
   4       #svgRoot {
   5           margin: 0px;
   6           padding: 0px;
   7           position: absolute;
   8           top: 0px;
   9           left: 0px;"
  10       }
  11
  12       #rect {
  13           fill: green;
  14           fill-opacity: 0.1;
  15       }
  16     </style>
  17   </head>
  18   <body>
  19     <p>Test for bug 34714 - onclick is not reliable for transformed SVG elements. This test checks that elementFromPoint() works correctly with an SVG rect element (green) defined within a 1x1 viewbox.</p>
  20     <p>On success, you will see a series of "PASS" messages</p>
  21     <pre id="console"></pre>
  22
  23     <svg id="svgRoot" width="400px" height="400px" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
  24       <g transform="translate(0.5, 0)">
  25           <rect id="rect" width="1" height="1" transform="translate(-0.499, 0)"/>
  26       </g>
  27     </svg>
  28
  29     <script><![CDATA[
  30     if (window.layoutTestController) {
  31       layoutTestController.dumpAsText();
  32     }
  33
  34     var resultString = "";
  35     var rectElt = document.getElementById("rect");
  36
  37     var pointsInRect = [
  38        {x: 1, y: 1},     // fails without the fix
  39        {x: 1, y: 399},   // fails without the fix
  40        {x: 399, y: 1},
  41        {x: 399, y: 399},
  42        {x: 200, y: 200}
  43     ];
  44
  45     pointsInRect.forEach( function(point) {
  46         var pass = (rectElt == document.elementFromPoint(point.x, point.y));
  47         resultString += ((pass) ? "PASS " : "FAIL ") + " rect contains point @ " + point.x + ", " + point.y + "\n";
  48     });
  49
  50     var pointsNotInRect = [
  51         {x: 1, y: 401},
  52         {x: 401, y: 1},
  53         {x: 401, y: 401},
  54         {x: -1, y: -1},
  55     ];
  56
  57     pointsNotInRect.forEach( function(point) {
  58         var pass = (rectElt != document.elementFromPoint(point.x, point.y));
  59         resultString += ((pass) ? "PASS " : "FAIL ") + " rect does not contain point @ " + point.x + ", " + point.y + "\n";
  60     });
  61
  62     document.getElementById("console").innerHTML = resultString;
  63     ]]></script>
  64  </body>
  65 </html>