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

      #rect {
          fill: green;
          fill-opacity: 0.1;
      }
    </style>
  </head>
  <body>
    <p>Test for bug 34714 - onclick is not reliable for transformed SVG elements. This test checks that elementFromPoint() works correctly with an SVG rect element (green) defined within a 1x1 viewbox.</p>
    <p>On success, you will see a series of "PASS" messages</p>
    <pre id="console"></pre>

    <svg id="svgRoot" width="400px" height="400px" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(0.5, 0)">
          <rect id="rect" width="1" height="1" transform="translate(-0.499, 0)"/>
      </g>
    </svg>
    
    <script><![CDATA[
    if (window.testRunner) {
      testRunner.dumpAsText();
    }

    var resultString = "";
    var rectElt = document.getElementById("rect");

    var pointsInRect = [
       {x: 1, y: 1},     // fails without the fix
       {x: 1, y: 399},   // fails without the fix
       {x: 399, y: 1},
       {x: 399, y: 399},
       {x: 200, y: 200}  
    ];

    pointsInRect.forEach( function(point) {
        var pass = (rectElt == document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS " : "FAIL ") + " rect contains point @ " + point.x + ", " + point.y + "\n";
    });

    var pointsNotInRect = [
        {x: 1, y: 401},
        {x: 401, y: 1},
        {x: 401, y: 401},
        {x: -1, y: -1},
    ];

    pointsNotInRect.forEach( function(point) {
        var pass = (rectElt != document.elementFromPoint(point.x, point.y));
        resultString += ((pass) ? "PASS " : "FAIL ") + " rect does not contain point @ " + point.x + ", " + point.y + "\n";
    });

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