layout/style/test/test_pointer-events.html

Thu, 15 Jan 2015 21:03:48 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 15 Jan 2015 21:03:48 +0100
branch
TOR_BUG_9701
changeset 11
deefc01c0e14
permissions
-rw-r--r--

Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)

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

mercurial