LayoutTests/svg/hittest/svg-small-path.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       #path {
  13           fill: green;
  14           fill-opacity: 0.1;
  15           stroke: green;
  16           stroke-opacity: 0.2;
  17       }
  18     </style>
  19   </head>
  20   <body>
  21     <p>Tests for WK84117 - Make sure hit testing works properly on small paths.</p>
  22     <p>On success, you will see a series of "PASS" messages and no "FAIL" messages.</p>
  23     <pre id="console"></pre>
  24
  25     <svg id="svgRoot" width="400px" height="400px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  26       <g transform="translate(100, 100) scale(100, 100)">
  27         <path id="path" d="M 0 0 L 0.4 0 L 0.4 0.4 L 0 0.4 z" stroke-width="0.2" />
  28       </g>
  29     </svg>
  30
  31     <script><![CDATA[
  32     if (window.layoutTestController)
  33       layoutTestController.dumpAsText();
  34
  35     var resultString = "";
  36     var pathElement = document.getElementById("path");
  37
  38     var pointsInPath = [
  39        {x: 106, y: 106},
  40        {x: 124, y: 124},
  41        {x: 121, y: 137}
  42     ];
  43
  44     var pointsNotInPath = [
  45         {x: 0, y: 0},
  46         {x: 145, y: 145}
  47     ];
  48
  49     var pointsOnPathStroke = [
  50        {x: 122, y: 146}, // outer stroke
  51        {x: 124, y: 136} // inner stroke
  52     ];
  53
  54     var pointsNotOnPathStroke = [
  55        {x: 160, y: 160}, // outside path
  56        {x: 0, y: 0}, // outside path
  57        {x: 120, y: 120} // inside path
  58     ];
  59
  60     pathElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill
  61     pointsInPath.forEach( function(point) {
  62         var pass = (pathElement == document.elementFromPoint(point.x, point.y));
  63         resultString += ((pass) ? "PASS" : "FAIL") + " path contains point at (" + point.x + ", " + point.y + ")\n";
  64     });
  65     pointsNotInPath.forEach( function(point) {
  66         var pass = (pathElement != document.elementFromPoint(point.x, point.y));
  67         resultString += ((pass) ? "PASS" : "FAIL") + " path does not contain point at (" + point.x + ", " + point.y + ")\n";
  68     });
  69
  70     pathElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke
  71     pointsOnPathStroke.forEach( function(point) {
  72         var pass = (pathElement == document.elementFromPoint(point.x, point.y));
  73         resultString += ((pass) ? "PASS" : "FAIL") + " path stroke contains point at (" + point.x + ", " + point.y + ")\n";
  74     });
  75     pointsNotOnPathStroke.forEach( function(point) {
  76         var pass = (pathElement != document.elementFromPoint(point.x, point.y));
  77         resultString += ((pass) ? "PASS" : "FAIL") + " path stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
  78     });
  79     document.getElementById("console").innerHTML = resultString;
  80     ]]></script>
  81  </body>
  82 </html>