1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/events/test/test_bug967796.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,227 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=967796
1.8 +-->
1.9 +<head>
1.10 + <title>Test for Bug 967796</title>
1.11 + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.12 + <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
1.13 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
1.14 +</head>
1.15 +<body>
1.16 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=967796">Mozilla Bug 967796</a>
1.17 +<p id="display"></p>
1.18 +<div id="content" style="display: none">
1.19 +
1.20 +</div>
1.21 +<pre id="test">
1.22 +<script type="application/javascript">
1.23 +
1.24 +/** Test for Bug 967796 **/
1.25 +
1.26 +SpecialPowers.setBoolPref("dom.w3c_pointer_events.enabled", true); // Enable Pointer Events
1.27 +
1.28 +SimpleTest.waitForExplicitFinish();
1.29 +SimpleTest.waitForFocus(runTests);
1.30 +var outer;
1.31 +var middle;
1.32 +var inner;
1.33 +var outside;
1.34 +var container;
1.35 +var file;
1.36 +var iframe;
1.37 +var checkRelatedTarget = false;
1.38 +var expectedRelatedEnter = null;
1.39 +var expectedRelatedLeave = null;
1.40 +var pointerentercount = 0;
1.41 +var pointerleavecount = 0;
1.42 +var pointerovercount = 0;
1.43 +var pointeroutcount = 0;
1.44 +
1.45 +function sendPointerEvent(t, elem) {
1.46 + var r = elem.getBoundingClientRect();
1.47 + synthesizePointer(elem, r.width / 2, r.height / 2, {type: t});
1.48 +}
1.49 +
1.50 +var expectedPointerEnterTargets = [];
1.51 +var expectedPointerLeaveTargets = [];
1.52 +
1.53 +function runTests() {
1.54 + outer = document.getElementById("outertest");
1.55 + middle = document.getElementById("middletest");
1.56 + inner = document.getElementById("innertest");
1.57 + outside = document.getElementById("outside");
1.58 + container = document.getElementById("container");
1.59 + file = document.getElementById("file");
1.60 + iframe = document.getElementById("iframe");
1.61 +
1.62 + // Make sure ESM thinks pointer is outside the test elements.
1.63 + sendPointerEvent("pointermove", outside);
1.64 +
1.65 + pointerentercount = 0;
1.66 + pointerleavecount = 0;
1.67 + pointerovercount = 0;
1.68 + pointeroutcount = 0;
1.69 + checkRelatedTarget = true;
1.70 + expectedRelatedEnter = outside;
1.71 + expectedRelatedLeave = inner;
1.72 + expectedPointerEnterTargets = ["outertest", "middletest", "innertest"];
1.73 + sendPointerEvent("pointermove", inner);
1.74 + is(pointerentercount, 3, "Unexpected pointerenter event count!");
1.75 + is(pointerovercount, 1, "Unexpected pointerover event count!");
1.76 + is(pointeroutcount, 0, "Unexpected pointerout event count!");
1.77 + is(pointerleavecount, 0, "Unexpected pointerleave event count!");
1.78 + expectedRelatedEnter = inner;
1.79 + expectedRelatedLeave = outside;
1.80 + expectedPointerLeaveTargets = ["innertest", "middletest", "outertest"];
1.81 + sendPointerEvent("pointermove", outside);
1.82 + is(pointerentercount, 3, "Unexpected pointerenter event count!");
1.83 + is(pointerovercount, 1, "Unexpected pointerover event count!");
1.84 + is(pointeroutcount, 1, "Unexpected pointerout event count!");
1.85 + is(pointerleavecount, 3, "Unexpected pointerleave event count!");
1.86 +
1.87 + // Event handling over native anonymous content.
1.88 + var r = file.getBoundingClientRect();
1.89 + expectedRelatedEnter = outside;
1.90 + expectedRelatedLeave = file;
1.91 + synthesizePointer(file, r.width / 6, r.height / 2, {type: "pointermove"});
1.92 + is(pointerentercount, 4, "Unexpected pointerenter event count!");
1.93 + is(pointerovercount, 2, "Unexpected pointerover event count!");
1.94 + is(pointeroutcount, 1, "Unexpected pointerout event count!");
1.95 + is(pointerleavecount, 3, "Unexpected pointerleave event count!");
1.96 +
1.97 + // Moving pointer over type="file" shouldn't cause pointerover/out/enter/leave events
1.98 + synthesizePointer(file, r.width - (r.width / 6), r.height / 2, {type: "pointermove"});
1.99 + is(pointerentercount, 4, "Unexpected pointerenter event count!");
1.100 + is(pointerovercount, 2, "Unexpected pointerover event count!");
1.101 + is(pointeroutcount, 1, "Unexpected pointerout event count!");
1.102 + is(pointerleavecount, 3, "Unexpected pointerleave event count!");
1.103 +
1.104 + expectedRelatedEnter = file;
1.105 + expectedRelatedLeave = outside;
1.106 + sendPointerEvent("pointermove", outside);
1.107 + is(pointerentercount, 4, "Unexpected pointerenter event count!");
1.108 + is(pointerovercount, 2, "Unexpected pointerover event count!");
1.109 + is(pointeroutcount, 2, "Unexpected pointerout event count!");
1.110 + is(pointerleavecount, 4, "Unexpected pointerleave event count!");
1.111 +
1.112 + // Initialize iframe
1.113 + iframe.contentDocument.documentElement.style.overflow = "hidden";
1.114 + iframe.contentDocument.body.style.margin = "0px";
1.115 + iframe.contentDocument.body.style.width = "100%";
1.116 + iframe.contentDocument.body.style.height = "100%";
1.117 + iframe.contentDocument.body.innerHTML =
1.118 + "<div style='width: 100%; height: 50%; border: 1px solid black;'></div>" +
1.119 + "<div style='width: 100%; height: 50%; border: 1px solid black;'></div>";
1.120 + iframe.contentDocument.body.offsetLeft; // flush
1.121 +
1.122 + iframe.contentDocument.body.firstChild.onpointerenter = penter;
1.123 + iframe.contentDocument.body.firstChild.onpointerleave = pleave;
1.124 + iframe.contentDocument.body.lastChild.onpointerenter = penter;
1.125 + iframe.contentDocument.body.lastChild.onpointerleave = pleave;
1.126 + r = iframe.getBoundingClientRect();
1.127 + expectedRelatedEnter = outside;
1.128 + expectedRelatedLeave = iframe;
1.129 + // Move pointer inside the iframe.
1.130 + synthesizePointer(iframe.contentDocument.body, r.width / 2, r.height / 4, {type: "pointermove"},
1.131 + iframe.contentWindow);
1.132 + synthesizePointer(iframe.contentDocument.body, r.width / 2, r.height - (r.height / 4), {type: "pointermove"},
1.133 + iframe.contentWindow);
1.134 + is(pointerentercount, 7, "Unexpected pointerenter event count!");
1.135 + expectedRelatedEnter = iframe;
1.136 + expectedRelatedLeave = outside;
1.137 + sendPointerEvent("pointermove", outside);
1.138 + is(pointerleavecount, 7, "Unexpected pointerleave event count!");
1.139 +
1.140 + // pointerdown must produce pointerenter event
1.141 + expectedRelatedEnter = outside;
1.142 + expectedRelatedLeave = iframe;
1.143 + // Move pointer inside the iframe.
1.144 + synthesizePointer(iframe.contentDocument.body, r.width / 2, r.height / 4, {type: "pointerdown"},
1.145 + iframe.contentWindow);
1.146 + synthesizePointer(iframe.contentDocument.body, r.width / 2, r.height - (r.height / 4), {type: "pointerdown"},
1.147 + iframe.contentWindow);
1.148 + is(pointerentercount, 10, "Unexpected pointerenter event count!");
1.149 +
1.150 + // pointerdown + pointermove must produce single pointerenter event
1.151 + expectedRelatedEnter = outside;
1.152 + expectedRelatedLeave = iframe;
1.153 + synthesizePointer(iframe.contentDocument.body, r.width / 2, r.height / 4, {type: "pointerdown"},
1.154 + iframe.contentWindow);
1.155 + synthesizePointer(iframe.contentDocument.body, r.width / 2 + 1, r.height / 4 + 1, {type: "pointermove"},
1.156 + iframe.contentWindow);
1.157 + is(pointerentercount, 11, "Unexpected pointerenter event count!");
1.158 +
1.159 + SpecialPowers.clearUserPref("dom.w3c_pointer_events.enabled"); // Disable Pointer Events
1.160 +
1.161 + SimpleTest.finish();
1.162 +}
1.163 +
1.164 +function penter(evt) {
1.165 + ++pointerentercount;
1.166 + evt.stopPropagation();
1.167 + if (expectedPointerEnterTargets.length) {
1.168 + var t = expectedPointerEnterTargets.shift();
1.169 + is(evt.target.id, t, "Wrong event target!");
1.170 + }
1.171 + is(evt.bubbles, false, evt.type + " should not bubble!");
1.172 + is(evt.cancelable, false, evt.type + " is cancelable!");
1.173 + is(evt.target, evt.currentTarget, "Wrong event target!");
1.174 + ok(!evt.relatedTarget || evt.target.ownerDocument == evt.relatedTarget.ownerDocument,
1.175 + "Leaking nodes to another document?");
1.176 + if (checkRelatedTarget && evt.target.ownerDocument == document) {
1.177 + is(evt.relatedTarget, expectedRelatedEnter, "Wrong related target (pointerenter)");
1.178 + }
1.179 +}
1.180 +
1.181 +function pleave(evt) {
1.182 + ++pointerleavecount;
1.183 + evt.stopPropagation();
1.184 + if (expectedPointerLeaveTargets.length) {
1.185 + var t = expectedPointerLeaveTargets.shift();
1.186 + is(evt.target.id, t, "Wrong event target!");
1.187 + }
1.188 + is(evt.bubbles, false, evt.type + " should not bubble!");
1.189 + is(evt.cancelable, false, evt.type + " is cancelable!");
1.190 + is(evt.target, evt.currentTarget, "Wrong event target!");
1.191 + ok(!evt.relatedTarget || evt.target.ownerDocument == evt.relatedTarget.ownerDocument,
1.192 + "Leaking nodes to another document?");
1.193 + if (checkRelatedTarget && evt.target.ownerDocument == document) {
1.194 + is(evt.relatedTarget, expectedRelatedLeave, "Wrong related target (pointerleave)");
1.195 + }
1.196 +}
1.197 +
1.198 +function pover(evt) {
1.199 + ++pointerovercount;
1.200 + evt.stopPropagation();
1.201 +}
1.202 +
1.203 +function pout(evt) {
1.204 + ++pointeroutcount;
1.205 + evt.stopPropagation();
1.206 +}
1.207 +
1.208 +</script>
1.209 +</pre>
1.210 +<div id="container" onpointerenter="penter(event)" onpointerleave="pleave(event)"
1.211 + onpointerout="pout(event)" onpointerover="pover(event)">
1.212 + <div id="outside" onpointerout="event.stopPropagation()" onpointerover="event.stopPropagation()">foo</div>
1.213 + <div id="outertest" onpointerenter="penter(event)" onpointerleave="pleave(event)"
1.214 + onpointerout="pout(event)" onpointerover="pover(event)">
1.215 + <div id="middletest" onpointerenter="penter(event)" onpointerleave="pleave(event)"
1.216 + onpointerout="pout(event)" onpointerover="pover(event)">
1.217 + <div id="innertest" onpointerenter="penter(event)" onpointerleave="pleave(event)"
1.218 + onpointerout="pout(event)" onpointerover="pover(event)">foo</div>
1.219 + </div>
1.220 + </div>
1.221 + <input type="file" id="file"
1.222 + onpointerenter="penter(event)" onpointerleave="pleave(event)"
1.223 + onpointerout="pout(event)" onpointerover="pover(event)">
1.224 + <br>
1.225 + <iframe id="iframe" width="50px" height="50px"
1.226 + onpointerenter="penter(event)" onpointerleave="pleave(event)"
1.227 + onpointerout="pout(event)" onpointerover="pover(event)"></iframe>
1.228 +</div>
1.229 +</body>
1.230 +</html>
