<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" onload="fillTestContent()">
<style type="text/css">
rect {
stroke-width: 6px;
}
</style>
<script type="text/javascript">
<![CDATA[
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 leftEdge = 100;
var topEdge = 30;
var rectSpacing = 57;
var svgNS = "http://www.w3.org/2000/svg";
function clickHit(event, identifierString) {
// This is my cheap hack to see if we hit the stroke.
if ((event.clientX - parseInt(event.target.getAttribute('x'))) == 0) {
var strokeText = document.getElementById('stroke-text' + identifierString);
strokeText.textContent = 'HIT';
}
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 rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('x', xOffset);
rect.setAttribute('y', yOffset);
rect.setAttribute('width', 50);
rect.setAttribute('height', 50);
rect.setAttribute('visibility', visibleValues[vi]);
rect.setAttribute('fill', fillValues[fi]);
rect.setAttribute('stroke', strokeValues[si]);
rect.setAttribute('pointer-events', pointerEventsValues[pi]);
rect.setAttribute('onclick', 'clickHit(evt, "' + identString + '")');
testContent.appendChild(rect);
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);
var stokeText = document.createElementNS(svgNS, 'text');
stokeText.setAttribute('x', xOffset + 5);
stokeText.setAttribute('y', yOffset + 40);
stokeText.textContent = "miss";
stokeText.setAttribute('id', 'stroke-text' + identString);
stokeText.setAttribute('pointer-events', 'none');
testContent.appendChild(stokeText);
if (window.eventSender) {
// Stroke click
eventSender.mouseMoveTo(xOffset, yOffset);
eventSender.mouseDown();
eventSender.mouseUp();
// Fill click
eventSender.mouseMoveTo(xOffset + 25, yOffset + 25);
eventSender.mouseDown();
eventSender.mouseUp();
}
xOffset += rectSpacing;
}
}
}
xOffset = leftEdge;
yOffset += rectSpacing;
}
getSelection().removeAllRanges();
}
]]>
</script>
<text x="610" y="18">Example:</text>
<text x="605" y="40">Hit Fill:</text>
<text x="605" y="60">Hit Stroke:</text>
<text x="110" y="20">Visibility: visible</text>
<text x="340" y="20">Visibility: hidden</text>
<g id="test-content">
<rect x="680" y="20" width="50" height="50" fill="orange" />
<text x="685" y="40">HIT</text>
<text x="685" y="60">miss</text>
</g>
</svg>