<!DOCTYPE html>
<style>
  svg {
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
  }
</style>
<body>
  <svg x="0" y="0">
    <svg x="-250000" width="500000" height="500">
      <path id="path" d="M 250005 104 l 19 0 l 3 3 l -3 3 l -19 0 z"></path>
    </svg>
  </svg>

<script src="../../resources/js-test.js"></script>
<script>
    description("Test that hit-test works for a path whose x/y ranges have different magnitude.");
    if (window.testRunner)
      testRunner.dumpAsText();

    var resultString = "";
    var pathElement = document.getElementById("path");

    var pointsInPath = [
       {x: 5, y: 104},
       {x: 5, y: 107},
       {x: 5, y: 110}
    ];

    var pointsNotInPath = [
        {x: 5, y: 103},
        {x: 5, y: 111}
    ];

    pointsInPath.forEach( function(point) {
        var pass = (pathElement == document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " path contains point at (" + point.x + ", " + point.y + ")\n";
    });
    pointsNotInPath.forEach( function(point) {
        var pass = (pathElement != document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " path does not contain point at (" + point.x + ", " + point.y + ")\n";
    });

    debug(resultString);
</script>
</body>