<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <style type="text/css">
      #svgRoot {
        margin: 0px;
        padding: 0px;
        position: absolute; 
        top: 0px; 
        left: 0px;
      }
      .nonscaletest {
        stroke-width: 20px;
        fill: #ccc;
        fill-opacity: 0.4;
      }
      #ellipse1, #ellipse2 {
          stroke: #f31900;
      }
      #line1, #line2 {
          stroke: #3364c2;
      }
      #rect1, #rect2 {
          stroke: #f7d72b;
      }
      #curve1, #curve2 {
          stroke: #44c400;
      }
    </style>
    <script type="text/javascript">
      function enter(event) {
        event.target.setAttribute("stroke-opacity", "0.4");
      };
      function exit(event) {
        event.target.setAttribute("stroke-opacity", "0.7");
      };
    </script>
  </head>
  <body>
    <p>Tests for WK82628 - Make sure hit testing works properly on ellipses, rects, lines and curves with non-scaling stroke.</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="500px" height="300px" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
      <!-- The following are all small and scaled up -->
      <g transform="translate(30, 0) scale(5, 5)">
        <ellipse id="ellipse1" class="nonscaletest" cx="10" cy="10" rx="10" ry="5" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
        <rect id="rect1" class="nonscaletest" x="30" y="10" width="10" height="7" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7"  stroke-dasharray="15,25" stroke-linecap="round"/>
        <path id="line1" class="nonscaletest" d="M20 20 l 10 10z" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
        <g transform="translate(-6, 12)">
          <path id="curve1" class="nonscaletest" d="M5,20 C10,10 25,10 25,20 S40,30 40,20" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
        </g>
      </g>
      <!-- The following are all large and scaled down -->
      <g transform="translate(275, 0) scale(0.2, 0.2)">
        <ellipse id="ellipse2" class="nonscaletest" cx="250" cy="250" rx="250" ry="125" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" class="nonscaletest" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
        <rect id="rect2" class="nonscaletest" x="750" y="250" width="250" height="175" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
        <path id="line2" class="nonscaletest" d="M500 500 l 250 250z" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
        <g transform="translate(-150, 300)">
          <path id="curve2" class="nonscaletest" d="M125,500 C250,250 625,250 600,500 S1000,750 1000,500" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
        </g>
      </g>
    </svg>
    <script type="text/javascript">
      // document.body.onmousedown = function(evt) { console.log("mouse down at " + evt.x + "," + evt.y); }
      if (window.testRunner)
        testRunner.dumpAsText();

      var resultString = "";
      var ellipse1 = document.getElementById("ellipse1");
      var ellipse2 = document.getElementById("ellipse2"); // 250px to the right of ellipse1
      var pointsOnEllipse1Stroke = [
         {x: 29, y: 37},
         {x: 34, y: 48},
         {x: 94, y: 70},
         {x: 100, y: 78}
      ];
      var pointsNotOnEllipse1Stroke = [
         {x: 33, y: 18},
         {x: 81, y: 49},
         {x: 129, y: 78}
      ];

      var rect1 = document.getElementById("rect1");
      var rect2 = document.getElementById("rect2"); // 250px to the right of rect1
      var pointsOnRect1Stroke = [
         {x: 172, y: 45},
         {x: 183, y: 63},
         {x: 220, y: 82},
         {x: 233, y: 90}
      ];
      var pointsNotOnRect1Stroke = [
         {x: 205, y: 68}
      ];

      var line1 = document.getElementById("line1");
      var line2 = document.getElementById("line2"); // 250px to the right of line1
      var pointsOnLine1Stroke = [
         {x: 127, y: 97},
         {x: 174, y: 146}
      ];
      var pointsNotOnLine1Stroke = [
         {x: 138, y: 131},
         {x: 177, y: 126}
      ];

      var curve1 = document.getElementById("curve1");
      var curve2 = document.getElementById("curve2"); // 250px to the right of curve1
      var pointsOnCurve1Stroke = [
         {x: 24, y: 159},
         {x: 107, y: 126},
         {x: 169, y: 193},
         {x: 195, y: 159}
      ];
      var pointsNotOnCurve1Stroke = [
         {x: 5, y: 164},
         {x: 81, y: 140},
         {x: 161, y: 177}
      ];

      pointsOnEllipse1Stroke.forEach( function(point) {
        var pass = (ellipse1 == document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " ellipse1 stroke contains point at (" + point.x + ", " + point.y + ")\n";
        var pass = (ellipse2 == document.elementFromPoint(point.x + 250, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " ellipse2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n";
      });
      pointsNotOnEllipse1Stroke.forEach( function(point) {
        var pass = (ellipse1 != document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " ellipse1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
        var pass = (ellipse2 != document.elementFromPoint(point.x + 250, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " ellipse2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n";
      });

      pointsOnRect1Stroke.forEach( function(point) {
        var pass = (rect1 == document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " rect1 stroke contains point at (" + point.x + ", " + point.y + ")\n";
        var pass = (rect2 == document.elementFromPoint(point.x + 250, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " rect2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n";
      });
      pointsNotOnRect1Stroke.forEach( function(point) {
        var pass = (rect1 != document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " rect1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
        var pass = (rect2 != document.elementFromPoint(point.x + 250, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " rect2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n";
      });

      pointsOnLine1Stroke.forEach( function(point) {
        var pass = (line1 == document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " line1 stroke contains point at (" + point.x + ", " + point.y + ")\n";
        var pass = (line2 == document.elementFromPoint(point.x + 250, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " line2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n";
      });
      pointsNotOnLine1Stroke.forEach( function(point) {
        var pass = (line1 != document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " line1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
        var pass = (line2 != document.elementFromPoint(point.x + 250, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " line2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n";
      });

      pointsOnCurve1Stroke.forEach( function(point) {
        var pass = (curve1 == document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " curve1 stroke contains point at (" + point.x + ", " + point.y + ")\n";
        var pass = (curve2 == document.elementFromPoint(point.x + 250, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " curve2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n";
      });
      pointsNotOnCurve1Stroke.forEach( function(point) {
        var pass = (curve1 != document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " curve1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
        var pass = (curve2 != document.elementFromPoint(point.x + 250, point.y));
        resultString += ((pass) ? "PASS" : "FAIL") + " curve2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n";
      });

      document.getElementById("console").innerHTML = resultString;
    </script>
  </body>
</html>