svg-ellipse-rect-stroke.xhtml | Explore in Territory

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

      #ellipse, #rect {
          fill: green;
          fill-opacity: 0.1;
          stroke-width: 0.3px;
          stroke: green;
          stroke-opacity: 0.2;
      }
    </style>
  </head>
  <body>
    <p>Make sure hit testing works properly on stroked ellipses and rects.</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">
      <g transform="scale(200)">
        <ellipse id="ellipse" cx="0.5" cy="0.5" rx="0.3" ry="0.2"/>
        <rect id="rect" x="1.1" y="0.9" width="0.5" height="0.5"/>
      </g>
    </svg>

    <script><![CDATA[
    if (window.testRunner)
      testRunner.dumpAsText();

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

    var pointsInEllipse = [
       {x: 65, y: 81},
       {x: 89, y: 100},
       {x: 133, y: 128}
    ];

    var pointsNotInEllipse = [
        {x: 100, y: 148}, // outer stroke
        {x: 0, y: 0}
    ];

    var pointsOnEllipseStroke = [
       {x: 43, y: 54}, // outer stroke
       {x: 56, y: 123}, // inner stroke
       {x: 146, y: 134}, // outer stroke
       {x: 129, y: 109} // inner stroke
    ];

    var pointsNotOnEllipseStroke = [
       {x: 0, y: 100}, // outside ellipse
       {x: 160, y: 160}, // outside ellipse
       {x: 95, y: 100} // inside ellipse
    ];

    var pointsInRect = [
       {x: 230, y: 190},
       {x: 280, y: 245},
       {x: 310, y: 275}
    ];

    var pointsNotInRect = [
        {x: 337, y: 298}, // outer stroke
        {x: 0, y: 0}
    ];

    var pointsOnRectStroke = [
       {x: 208, y: 168}, // outer stroke
       {x: 237, y: 198}, // inner stroke
       {x: 301, y: 305}, // outer stroke
       {x: 302, y: 264} // inner stroke
    ];

    var pointsNotOnRectStroke = [
       {x: 0, y: 100}, // outside rect
       {x: 375, y: 315}, // outside rect
       {x: 267, y: 233} // inside rect
    ];

    ellipseElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill
    rectElement.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";
    });
    pointsInRect.forEach( function(point) {
        var pass = (rectElement == document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " rect contains point at (" + point.x + ", " + point.y + ")\n";
    });
    pointsNotInRect.forEach( function(point) {
        var pass = (rectElement != document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " rect does not contain point at (" + point.x + ", " + point.y + ")\n";
    });

    ellipseElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke
    rectElement.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";
    });
    pointsOnRectStroke.forEach( function(point) {
        var pass = (rectElement == document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " rect stroke contains point at (" + point.x + ", " + point.y + ")\n";
    });
    pointsNotOnRectStroke.forEach( function(point) {
        var pass = (rectElement != document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " rect stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
    });
    document.getElementById("console").innerHTML = resultString;
    ]]></script>
 </body>
</html>
chromium/third_party/blink/web_tests/svg/hittest/svg-ellipse-rect-stroke.xhtml
