<!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.layoutTestController)
        layoutTestController.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>