<?xml version="1.0"?>
<!-- This a 1-1 copy of pointer-events-image.svg tests with the addition of -webkit-transform -->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" onload="fillTestContent()">
  <script type="text/javascript">
  <![CDATA[
    
    if (window.testRunner)
        testRunner.waitUntilDone();
  
    var visibleValues = [ 'visible', 'hidden' ];
    var fillValues = ['none', 'orange' ];
    var strokeValues = ['none', 'blue' ];
  
    var pointerEventsValues = ['auto', 'visiblePainted', 'visibleFill', 'visibleStroke', 'visible', 'painted', 'fill', 'stroke', 'all', 'bounding-box', 'none'];
  
    var leftEdge = 100;
    var topEdge = 30;
    
    var rectSpacing = 57;
  
    var svgNS = "http://www.w3.org/2000/svg";
    
    function clickHit(event, identifierString) {
      var fillText = document.getElementById('fill-text' + identifierString);
      fillText.textContent = 'HIT';
    }
  
    function fillTestContent() {    
      var xOffset = leftEdge;
      var yOffset = topEdge;
    
      var testContent = document.getElementById("test-content");
    
      for (var pi = 0; pi < pointerEventsValues.length; pi++) {
        var eventLabel = document.createElementNS(svgNS, 'text');
        eventLabel.setAttribute('x', 0);
        eventLabel.setAttribute('y', yOffset + 30);
        eventLabel.textContent = pointerEventsValues[pi];
        testContent.appendChild(eventLabel);
      
        for (var vi = 0; vi < visibleValues.length; vi++) {
          for (var fi = 0; fi < fillValues.length; fi++) {
            for (var si = 0; si < strokeValues.length; si++) {
            
              var identString = "_" + pi + "_" + vi + "_" + fi + "_" + si;
            
              var img = document.createElementNS(svgNS, 'image');
              img.setAttributeNS("http://www.w3.org/1999/xlink", 'href', 'resources/red-checker.png');
              img.setAttribute('x', xOffset/2);
              img.setAttribute('y', yOffset/2);
              img.setAttribute('width', 25);
              img.setAttribute('height', 25);
              img.setAttribute('visibility', visibleValues[vi]);
              img.setAttribute('fill', fillValues[fi]);
              img.setAttribute('stroke', strokeValues[si]);
              img.setAttribute('pointer-events', pointerEventsValues[pi]);
              img.setAttribute('style', "-webkit-transform: scale(2)");
              img.setAttribute('onclick', 'clickHit(evt, "' + identString + '")');
              
              testContent.appendChild(img);
            
              var fillText = document.createElementNS(svgNS, 'text');
              fillText.setAttribute('x', xOffset + 5);
              fillText.setAttribute('y', yOffset + 20);
              fillText.textContent = "miss";
              fillText.setAttribute('id', 'fill-text' + identString);
              fillText.setAttribute('pointer-events', 'none');
              testContent.appendChild(fillText);
            
              if (window.eventSender) {
                // Fill click
                eventSender.mouseMoveTo(xOffset + 30, yOffset + 30);
                eventSender.mouseDown();
                eventSender.mouseUp();
              }
              xOffset += rectSpacing;
            }
          }
        }
        xOffset = leftEdge;
        yOffset += rectSpacing;
      }
      
      if (window.testRunner)
        testRunner.notifyDone();
    }
  ]]>
  </script>
  
  <text x="110" y="20">Visibility: visible</text>
  <text x="340" y="20">Visibility: hidden</text>
  <g id="test-content"/>
</svg>