<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test for pointer-events property</title>
<style type="text/css" media="screen">
p {
position: absolute;
width: 100px;
height: 30px;
margin: 0;
padding: 0;
font-size: 20px;
}
</style>
<script>
var pointerEventsValues = ['auto', 'none'];
var topEdge = 120;
function clickHit(identifierString) {
var text = document.getElementById('text' + identifierString);
text.textContent = '-HIT-';
}
function testContent() {
if (window.testRunner)
testRunner.dumpAsText();
var yOffset = topEdge;
var testContent = document.getElementById("test-content");
for (var pi = 0; pi < pointerEventsValues.length; pi++) {
var eventLabel = document.createElement('p');
eventLabel.style.left = "10px";
eventLabel.style.top = yOffset + "px";
eventLabel.style.pointerEvents = pointerEventsValues[pi];
eventLabel.textContent = pointerEventsValues[pi];
eventLabel.setAttribute('onclick', 'clickHit("' + pointerEventsValues[pi] + '")');
testContent.appendChild(eventLabel);
var hit = document.createElement('p');
hit.style.left = "140px";
hit.style.top = yOffset + "px";
hit.id = "text" + pointerEventsValues[pi];
hit.appendChild(document.createTextNode("-miss-"));
testContent.appendChild(hit);
if (window.eventSender) {
// Cell click
eventSender.mouseMoveTo(15, yOffset + 10);
eventSender.mouseDown();
eventSender.mouseUp();
}
yOffset += 40;
}
}
</script>
</head>
<body onload="testContent()">
<h1>Testing the values of 'pointer-events' on HTML content</h1>
<div>The labels on the left will be clicked and the result is shown to the right</div>
<div id="test-content">
</div>
</body>
</html>