third_party/WebKit/LayoutTests/svg/hittest/svg-small-big-path.html

   1 <!DOCTYPE html>
   2 <style>
   3   svg {
   4     margin: 0px;
   5     padding: 0px;
   6     position: absolute;
   7     top: 0px;
   8     left: 0px;
   9   }
  10 </style>
  11 <body>
  12   <svg x="0" y="0">
  13     <svg x="-250000" width="500000" height="500">
  14       <path id="path" d="M 250005 104 l 19 0 l 3 3 l -3 3 l -19 0 z"></path>
  15     </svg>
  16   </svg>
  17
  18 <script src="../../resources/js-test.js"></script>
  19 <script>
  20     description("Test that hit-test works for a path whose x/y ranges have different magnitude.");
  21     if (window.testRunner)
  22       testRunner.dumpAsText();
  23
  24     var resultString = "";
  25     var pathElement = document.getElementById("path");
  26
  27     var pointsInPath = [
  28        {x: 5, y: 104},
  29        {x: 5, y: 107},
  30        {x: 5, y: 110}
  31     ];
  32
  33     var pointsNotInPath = [
  34         {x: 5, y: 103},
  35         {x: 5, y: 111}
  36     ];
  37
  38     pointsInPath.forEach( function(point) {
  39         var pass = (pathElement == document.elementFromPoint(point.x, point.y));
  40         resultString += ((pass) ? "PASS" : "FAIL") + " path contains point at (" + point.x + ", " + point.y + ")\n";
  41     });
  42     pointsNotInPath.forEach( function(point) {
  43         var pass = (pathElement != document.elementFromPoint(point.x, point.y));
  44         resultString += ((pass) ? "PASS" : "FAIL") + " path does not contain point at (" + point.x + ", " + point.y + ")\n";
  45     });
  46
  47     debug(resultString);
  48 </script>
  49 </body>