<?xml version="1.0"?>
<!-- This a 1-1 copy of pointer-events-image.svg tests with the addition of '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', '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 / 2);
img.setAttribute('y', yOffset / 2);
img.setAttribute('width', 25);
img.setAttribute('height', 25);
img.setAttribute('visibility', attributes.visibility);
img.setAttribute('fill', attributes.fill);
img.setAttribute('stroke', attributes.stroke);
img.setAttribute('pointer-events', attributes.pointerEvents);
img.setAttribute('style', "transform: scale(2)");
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 + 30, yOffset + 30);
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>