layout/style/test/test_pointer-events.html@7e26c7da4463
layout/style/test/test_pointer-events.html
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>Test for pointer-events in HTML</title>
5 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
6 <script type="application/javascript" 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; }
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">
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>
49 </div>
50 <pre id="test">
51 <script type="application/javascript;version=1.8">
53 SimpleTest.expectAssertions(0, 1);
55 SimpleTest.waitForExplicitFinish();
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 }
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 }
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");
94 // elementFromPoint can't be used for iframe
95 var iframe = document.getElementById("thirteen");
96 iframe.parentNode.addEventListener('mousedown', handleIFrameClick, false);
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 }
103 function handleIFrameClick()
104 {
105 ok(true, "thirteen: iframe content must not get pointer events with explicit none");
107 document.getElementById("display").style.display = "none";
108 SimpleTest.finish();
109 }
111 </script>
112 </pre>
113 </body>
114 </html>
