layout/style/test/test_pointer-events.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <title>Test for pointer-events in HTML</title>
   5   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   6   <script src="/tests/SimpleTest/EventUtils.js"></script>
   7   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
   8   <style type="text/css">
   9
  10   div       { height: 10px; width: 10px; background: black; }
  11
  12   </style>
  13 </head>
  14 <!-- need a set timeout because we need things to start after painting suppression ends -->
  15 <body onload="setTimeout(run_test, 0)">
  16 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
  17 <div id="display" style="position: absolute; top: 0; left: 0; width: 300px; height: 300px">
  18
  19   <div id="one"></div>
  20   <div id="two" style="pointer-events: visiblePainted;"></div>
  21   <div id="three" style="height: 20px; pointer-events: none;">
  22     <div id="four"style="margin-top: 10px;"></div>
  23   </div>
  24   <a id="five" style="pointer-events: none;" href="http://mozilla.org/">link</a>
  25   <input id="six" style="pointer-events: none;" type="button" value="button" />
  26   <table>
  27     <tr style="pointer-events: none;">
  28       <td id="seven">no</td>
  29       <td id="eight" style="pointer-events: visiblePainted;">yes</td>
  30       <td id="nine" style="pointer-events: auto;">yes</td>
  31     </td>
  32     <tr style="opacity: 0.5; pointer-events: none;">
  33       <td id="ten">no</td>
  34       <td id="eleven" style="pointer-events: visiblePainted;">yes</td>
  35      <td id="twelve" style="pointer-events: auto;">yes</td>
  36     </td>
  37   </table>
  38   <iframe id="thirteen" style="pointer-events: none;" src="about:blank" width="100" height="100"></iframe>
  39   <script type="application/javascript">
  40     var iframe = document.getElementById("thirteen");
  41     iframe.contentDocument.open();
  42     iframe.contentDocument.writeln("<script type='application/javascript'>");
  43     iframe.contentDocument.writeln("document.addEventListener('mousedown', fail, false);");
  44     iframe.contentDocument.writeln("function fail() { parent.ok(false, 'thirteen: iframe content must not get pointer events with explicit none') }");
  45     iframe.contentDocument.writeln("<"+"/script>");
  46     iframe.contentDocument.close();
  47   </script>
  48
  49 </div>
  50 <pre id="test">
  51 <script type="application/javascript">
  52
  53 SimpleTest.expectAssertions(0, 1);
  54
  55 SimpleTest.waitForExplicitFinish();
  56
  57 function catches_pointer_events(element_id)
  58 {
  59     // we just assume the element is on top here.
  60     var element = document.getElementById(element_id);
  61     var bounds = element.getBoundingClientRect();
  62     var point = { x: bounds.left + bounds.width/2, y: bounds.top + bounds.height/2 };
  63     return element == document.elementFromPoint(point.x, point.y);
  64 }
  65
  66 function synthesizeMouseEvent(type,                // string
  67                               x,                   // float
  68                               y,                   // float
  69                               button,              // long
  70                               clickCount,          // long
  71                               modifiers,           // long
  72                               ignoreWindowBounds)  // boolean
  73 {
  74   var utils = SpecialPowers.getDOMWindowUtils(window);
  75   utils.sendMouseEvent(type, x, y, button, clickCount,
  76                        modifiers, ignoreWindowBounds);
  77 }
  78
  79 function run_test()
  80 {
  81     ok(catches_pointer_events("one"), "one: div should default to catching pointer events");
  82     ok(catches_pointer_events("two"), "two: div should catch pointer events with explicit visiblePainted");
  83     ok(!catches_pointer_events("three"), "three: div should not catch pointer events with explicit none");
  84     ok(!catches_pointer_events("four"), "four: div should not catch pointer events with inherited none");
  85     ok(!catches_pointer_events("five"), "five: link should not catch pointer events with explicit none");
  86     ok(!catches_pointer_events("six"), "six: native-themed form control should not catch pointer events with explicit none");
  87     ok(!catches_pointer_events("seven"), "seven: td should not catch pointer events with inherited none");
  88     ok(catches_pointer_events("eight"), "eight: td should catch pointer events with explicit visiblePainted overriding inherited none");
  89     ok(catches_pointer_events("nine"), "nine: td should catch pointer events with explicit auto overriding inherited none");
  90     ok(!catches_pointer_events("ten"), "ten: td should not catch pointer events with inherited none");
  91     ok(catches_pointer_events("eleven"), "eleven: td should catch pointer events with explicit visiblePainted overriding inherited none");
  92     ok(catches_pointer_events("twelve"), "twelve: td should catch pointer events with explicit auto overriding inherited none");
  93
  94     // elementFromPoint can't be used for iframe
  95     var iframe = document.getElementById("thirteen");
  96     iframe.parentNode.addEventListener('mousedown', handleIFrameClick);
  97     var bounds = iframe.getBoundingClientRect();
  98     var x = bounds.left + bounds.width/2;
  99     var y = bounds.top + bounds.height/2;
 100     synthesizeMouseEvent('mousedown', x, y, 0, 1, 0, true);
 101 }
 102
 103 function handleIFrameClick()
 104 {
 105     ok(true, "thirteen: iframe content must not get pointer events with explicit none");
 106
 107     document.getElementById("display").style.display = "none";
 108     SimpleTest.finish();
 109 }
 110
 111 </script>
 112 </pre>
 113 </body>
 114 </html>