<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <style>
      #svgRoot {
          margin: 0px;
          padding: 0px;
          position: absolute; 
          top: 0px; 
          left: 0px;
      }

      #ellipse {
          fill: green;
          fill-opacity: 0.1;
          stroke-width: 100px;
          stroke: green;
          stroke-opacity: 0.2;
      }
    </style>
  </head>
  <body>
    <p>Tests for WK80423 - Make sure hit testing works properly on stroked ellipses.</p>
    <p>On success, you will see a series of "PASS" messages and no "FAIL" messages.</p>
    <pre id="console"></pre>

    <svg id="svgRoot" width="400px" height="400px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
      <ellipse id="ellipse" cx="150" cy="150" rx="200" ry="100"/>
    </svg>
    
    <script><![CDATA[
    if (window.testRunner)
      testRunner.dumpAsText();

    var resultString = "";
    var ellipseElement = document.getElementById("ellipse");

    var pointsInEllipse = [
       {x: 150, y: 150},
       {x: 275, y: 150},
       {x: 250, y: 225}
    ];

    var pointsNotInEllipse = [
        {x: 0, y: 0},
        {x: 275, y: 250}
    ];

    var pointsOnEllipseStroke = [
       {x: 275, y: 250}, // outer stroke
       {x: 300, y: 200} // inner stroke
    ];

    var pointsNotOnEllipseStroke = [
       {x: 375, y: 375}, // outside ellipse
       {x: 0, y: 0}, // outside ellipse
       {x: 150, y: 150} // inside ellipse
    ];

    ellipseElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill
    pointsInEllipse.forEach( function(point) {
        var pass = (ellipseElement == document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " ellipse contains point at (" + point.x + ", " + point.y + ")\n";
    });
    pointsNotInEllipse.forEach( function(point) {
        var pass = (ellipseElement != document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " ellipse does not contain point at (" + point.x + ", " + point.y + ")\n";
    });

    ellipseElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke
    pointsOnEllipseStroke.forEach( function(point) {
        var pass = (ellipseElement == document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke contains point at (" + point.x + ", " + point.y + ")\n";
    });
    pointsNotOnEllipseStroke.forEach( function(point) {
        var pass = (ellipseElement != document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
    });
    document.getElementById("console").innerHTML = resultString;
    ]]></script>
 </body>
</html>