LayoutTests/svg/custom/image-clipped-hit.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="runTest()">
   <script>
   <![CDATA[
if (window.layoutTestController)
  layoutTestController.dumpAsText();

var clicked = false;

function addToStatus(s) {
  document.getElementById("status").textContent += s;
}
function setStatus(s) {
  document.getElementById("status").textContent = s;
}

function testClickAt(x, y, expectedResult) {
   eventSender.mouseMoveTo(x, y);
   eventSender.mouseDown();
   eventSender.mouseUp();
   
   addToStatus("Hit test @ " + x + ", " + y);
   if (clicked == expectedResult)
     addToStatus(" SUCCESS, got " + clicked);
   else {
     addToStatus("FAILURE, expected " + expectedResult)
   }
   addToStatus("; ");
   clicked = false;
}

function runTest() {
  if (!window.eventSender) {
    setStatus("This test requires DumpRenderTree to run. Dots are where the clicks go.");
    return;
  }
  testClickAt(219, 196, true);
  testClickAt(236, 300, false);
}

function gotClick() {
  if (!window.layoutTestController)
    alert("Clicked hidden image @ " + event.clientX + ", " + event.clientY);
  clicked = true;
}
   ]]>
   </script>
  <circle cx="219" cy="196" r="3" />
  <circle cx="236" cy="300" r="3" />
  <g transform="rotate(30)" style="visibility:hidden">
    <svg x="250" width="100" height="150" style="overflow:hidden">"
      <rect opacity="0.5" fill="pink" x="0" y="0" width="240" height="150" />
      <image pointer-events="all" onmousedown="gotClick()" x="0" y="0" width="240" height="150" xlink:href="resources/struct-image-01.png"/>
    </svg>
  </g>
  <text id="status" x="10" y="20"></text>
</svg>