1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_pointer-events.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,114 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<head>
1.7 + <title>Test for pointer-events in HTML</title>
1.8 + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.9 + <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
1.10 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.11 + <style type="text/css">
1.12 +
1.13 + div { height: 10px; width: 10px; background: black; }
1.14 +
1.15 + </style>
1.16 +</head>
1.17 +<!-- need a set timeout because we need things to start after painting suppression ends -->
1.18 +<body onload="setTimeout(run_test, 0)">
1.19 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
1.20 +<div id="display" style="position: absolute; top: 0; left: 0; width: 300px; height: 300px">
1.21 +
1.22 + <div id="one"></div>
1.23 + <div id="two" style="pointer-events: visiblePainted;"></div>
1.24 + <div id="three" style="height: 20px; pointer-events: none;">
1.25 + <div id="four"style="margin-top: 10px;"></div>
1.26 + </div>
1.27 + <a id="five" style="pointer-events: none;" href="http://mozilla.org/">link</a>
1.28 + <input id="six" style="pointer-events: none;" type="button" value="button" />
1.29 + <table>
1.30 + <tr style="pointer-events: none;">
1.31 + <td id="seven">no</td>
1.32 + <td id="eight" style="pointer-events: visiblePainted;">yes</td>
1.33 + <td id="nine" style="pointer-events: auto;">yes</td>
1.34 + </td>
1.35 + <tr style="opacity: 0.5; pointer-events: none;">
1.36 + <td id="ten">no</td>
1.37 + <td id="eleven" style="pointer-events: visiblePainted;">yes</td>
1.38 + <td id="twelve" style="pointer-events: auto;">yes</td>
1.39 + </td>
1.40 + </table>
1.41 + <iframe id="thirteen" style="pointer-events: none;" src="about:blank" width="100" height="100"></iframe>
1.42 + <script type="application/javascript">
1.43 + var iframe = document.getElementById("thirteen");
1.44 + iframe.contentDocument.open();
1.45 + iframe.contentDocument.writeln("<script type='application/javascript'>");
1.46 + iframe.contentDocument.writeln("document.addEventListener('mousedown', fail, false);");
1.47 + iframe.contentDocument.writeln("function fail() { parent.ok(false, 'thirteen: iframe content must not get pointer events with explicit none') }");
1.48 + iframe.contentDocument.writeln("<"+"/script>");
1.49 + iframe.contentDocument.close();
1.50 + </script>
1.51 +
1.52 +</div>
1.53 +<pre id="test">
1.54 +<script type="application/javascript;version=1.8">
1.55 +
1.56 +SimpleTest.expectAssertions(0, 1);
1.57 +
1.58 +SimpleTest.waitForExplicitFinish();
1.59 +
1.60 +function catches_pointer_events(element_id)
1.61 +{
1.62 + // we just assume the element is on top here.
1.63 + var element = document.getElementById(element_id);
1.64 + var bounds = element.getBoundingClientRect();
1.65 + var point = { x: bounds.left + bounds.width/2, y: bounds.top + bounds.height/2 };
1.66 + return element == document.elementFromPoint(point.x, point.y);
1.67 +}
1.68 +
1.69 +function synthesizeMouseEvent(type, // string
1.70 + x, // float
1.71 + y, // float
1.72 + button, // long
1.73 + clickCount, // long
1.74 + modifiers, // long
1.75 + ignoreWindowBounds) // boolean
1.76 +{
1.77 + var utils = SpecialPowers.getDOMWindowUtils(window);
1.78 + utils.sendMouseEvent(type, x, y, button, clickCount,
1.79 + modifiers, ignoreWindowBounds);
1.80 +}
1.81 +
1.82 +function run_test()
1.83 +{
1.84 + ok(catches_pointer_events("one"), "one: div should default to catching pointer events");
1.85 + ok(catches_pointer_events("two"), "two: div should catch pointer events with explicit visiblePainted");
1.86 + ok(!catches_pointer_events("three"), "three: div should not catch pointer events with explicit none");
1.87 + ok(!catches_pointer_events("four"), "four: div should not catch pointer events with inherited none");
1.88 + ok(!catches_pointer_events("five"), "five: link should not catch pointer events with explicit none");
1.89 + ok(!catches_pointer_events("six"), "six: native-themed form control should not catch pointer events with explicit none");
1.90 + ok(!catches_pointer_events("seven"), "seven: td should not catch pointer events with inherited none");
1.91 + ok(catches_pointer_events("eight"), "eight: td should catch pointer events with explicit visiblePainted overriding inherited none");
1.92 + ok(catches_pointer_events("nine"), "nine: td should catch pointer events with explicit auto overriding inherited none");
1.93 + ok(!catches_pointer_events("ten"), "ten: td should not catch pointer events with inherited none");
1.94 + ok(catches_pointer_events("eleven"), "eleven: td should catch pointer events with explicit visiblePainted overriding inherited none");
1.95 + ok(catches_pointer_events("twelve"), "twelve: td should catch pointer events with explicit auto overriding inherited none");
1.96 +
1.97 + // elementFromPoint can't be used for iframe
1.98 + var iframe = document.getElementById("thirteen");
1.99 + iframe.parentNode.addEventListener('mousedown', handleIFrameClick, false);
1.100 + var bounds = iframe.getBoundingClientRect();
1.101 + var x = bounds.left + bounds.width/2;
1.102 + var y = bounds.top + bounds.height/2;
1.103 + synthesizeMouseEvent('mousedown', x, y, 0, 1, 0, true);
1.104 +}
1.105 +
1.106 +function handleIFrameClick()
1.107 +{
1.108 + ok(true, "thirteen: iframe content must not get pointer events with explicit none");
1.109 +
1.110 + document.getElementById("display").style.display = "none";
1.111 + SimpleTest.finish();
1.112 +}
1.113 +
1.114 +</script>
1.115 +</pre>
1.116 +</body>
1.117 +</html>
