LayoutTests/fast/events/pointer-events.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2   "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   6   <title>Test for pointer-events property</title>
   7   <style type="text/css" media="screen">
   8     p {
   9       position: absolute;
  10       width: 100px;
  11       height: 30px;
  12       margin: 0;
  13       padding: 0;
  14       font-size: 20px;
  15     }
  16   </style>
  17   <script>
  18     var pointerEventsValues = ['auto', 'none'];
  19
  20     var topEdge = 120;
  21
  22     function clickHit(identifierString) {
  23       var text = document.getElementById('text' + identifierString);
  24       text.textContent = '-HIT-';
  25     }
  26
  27     function testContent() {
  28       if (window.testRunner)
  29         testRunner.dumpAsText();
  30
  31       var yOffset = topEdge;
  32
  33       var testContent = document.getElementById("test-content");
  34
  35       for (var pi = 0; pi < pointerEventsValues.length; pi++) {
  36         var eventLabel = document.createElement('p');
  37         eventLabel.style.left = "10px";
  38         eventLabel.style.top = yOffset + "px";
  39         eventLabel.style.pointerEvents = pointerEventsValues[pi];
  40         eventLabel.textContent = pointerEventsValues[pi];
  41         eventLabel.setAttribute('onclick', 'clickHit("' + pointerEventsValues[pi] + '")');
  42         testContent.appendChild(eventLabel);
  43
  44         var hit = document.createElement('p');
  45         hit.style.left = "140px";
  46         hit.style.top = yOffset + "px";
  47         hit.id = "text" + pointerEventsValues[pi];
  48         hit.appendChild(document.createTextNode("-miss-"));
  49
  50         testContent.appendChild(hit);
  51
  52         if (window.eventSender) {
  53           // Cell click
  54           eventSender.mouseMoveTo(15, yOffset + 10);
  55           eventSender.mouseDown();
  56           eventSender.mouseUp();
  57         }
  58
  59         yOffset += 40;
  60       }
  61     }
  62   </script>
  63
  64 </head>
  65 <body onload="testContent()">
  66   <h1>Testing the values of 'pointer-events' on HTML content</h1>
  67   <div>The labels on the left will be clicked and the result is shown to the right</div>
  68   <div id="test-content">
  69   </div>
  70 </body>
  71 </html>