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">
10 div
{ height: 10px; width: 10px; background: black
; }
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">
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>
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" />
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>
32 <tr style=
"opacity: 0.5; pointer-events: none;">
34 <td id=
"eleven" style=
"pointer-events: visiblePainted;">yes
</td>
35 <td id=
"twelve" style=
"pointer-events: auto;">yes
</td>
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();
51 <script type=
"application/javascript">
53 SimpleTest.expectAssertions(
0,
1);
55 SimpleTest.waitForExplicitFinish();
57 function catches_pointer_events(element_id)
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);
66 function synthesizeMouseEvent(type, // string
72 ignoreWindowBounds) // boolean
74 var utils = SpecialPowers.getDOMWindowUtils(window);
75 utils.sendMouseEvent(type, x, y, button, clickCount,
76 modifiers, ignoreWindowBounds);
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");
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);
103 function handleIFrameClick()
105 ok(true,
"thirteen: iframe content must not get pointer events with explicit none");
107 document.getElementById(
"display").style.display =
"none";