<?xml version="1.0"?>
<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', 'none'];

    var pendingClicks = [];
    function queueClick(x, y) {
      pendingClicks.push({ x: x, y: y });
    }

    function performClick(x, y) {
      if (!window.eventSender)
        return;
      eventSender.mouseMoveTo(x, y);
      eventSender.mouseDown();
      eventSender.mouseUp();
    }

    var totalImages = visibleValues.length * fillValues.length * strokeValues.length * pointerEventsValues.length;
    var imagesLoaded = 0;

    function imageLoaded() {
      // Wait for all images to load, then issue all pending clicks.
      if (++imagesLoaded < totalImages)
        return;
      for (let point of pendingClicks)
        performClick(point.x, point.y);
      if (window.testRunner)
        testRunner.notifyDone();
    }

    var svgNS = "http://www.w3.org/2000/svg";

    function attachTestImage(container, xOffset, yOffset, attributes) {
      var fillText = document.createElementNS(svgNS, 'text');
      fillText.setAttribute('x', xOffset + 5);
      fillText.setAttribute('y', yOffset + 20);
      fillText.textContent = "miss";
      fillText.setAttribute('pointer-events', 'none');

      var img = document.createElementNS(svgNS, 'image');
      img.setAttributeNS("http://www.w3.org/1999/xlink", 'href', 'resources/red-checker.png');
      img.setAttribute('x', xOffset);
      img.setAttribute('y', yOffset);
      img.setAttribute('width', 50);
      img.setAttribute('height', 50);
      img.setAttribute('visibility', attributes.visibility);
      img.setAttribute('fill', attributes.fill);
      img.setAttribute('stroke', attributes.stroke);
      img.setAttribute('pointer-events', attributes.pointerEvents);
      img.onload = imageLoaded;
      img.onclick = function() { fillText.textContent = 'HIT'; };

      container.appendChild(img);
      container.appendChild(fillText);
    }

    var leftEdge = 100;
    var topEdge = 30;

    var rectSpacing = 57;

    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++) {
              attachTestImage(testContent, xOffset, yOffset, {
                visibility: visibleValues[vi],
                fill: fillValues[fi],
                stroke: strokeValues[si],
                pointerEvents: pointerEventsValues[pi]
              });
              queueClick(xOffset + 25, yOffset + 25);
              xOffset += rectSpacing;
            }
          }
        }
        xOffset = leftEdge;
        yOffset += rectSpacing;
      }
    }
  ]]>
  </script>
  <text x="110" y="20">Visibility: visible</text>
  <text x="340" y="20">Visibility: hidden</text>
  <g id="test-content"/>
</svg>