<!DOCTYPE HTML> <html> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=633602 --> <head> <title>Bug 633602 - file_retargetMouseEvents.html</title> <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"> </script> <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script> <script type="application/javascript" src="pointerlock_utils.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> </head> <body> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=633602"> Mozilla Bug 633602 </a> <div id="parent"> <div id="child" style="width: 100%; height: 100%;"> </div> </div> <pre id="test"> <script type="application/javascript"> /* * Test for Bug 633602 * Retarget mouse events to the locked element */ SimpleTest.waitForExplicitFinish(); function MouseEventStats() { this.mouseMove = false; this.mouseDown = false; this.mouseUp = false; this.mouseClick = false; this.mouseScroll = false; this.wheel = false; } var parent = document.getElementById("parent") , child = document.getElementById("child") , parentStats = new MouseEventStats() , childStats = new MouseEventStats(); function runTests () { is(childStats.mouseMove, false, "Child shound not receive mousemove event."); is(childStats.mouseDown, false, "Child should not receive mousedown event."); is(childStats.mouseUp, false, "Child should not receive mouseup event."); is(childStats.mouseClick, false, "Child should not receive click event."); is(childStats.mouseScroll, false, "Child should not receive DOMMouseScroll event."); is(childStats.wheel, false, "Child should not receive wheel event."); ok(parentStats.mouseMove, "Parent should receive mousemove event."); ok(parentStats.mouseDown, "Parent should receive mousedown event."); ok(parentStats.mouseUp, "Parent should receive mouseup event."); ok(parentStats.mouseClick, "Parent should receive click event."); ok(parentStats.mouseScroll, "Parent should receive DOMMouseScroll event."); ok(parentStats.wheel, "Parent should receive wheel event."); } /** * The event listeners for the child element shouldn't be fired * Mouse events will only happen when the pointer is locked * and if the pointer is locked all the mouse events should be * retargetted to the locked element **/ var childMoveTest = function() { childStats.mouseMove = true; } var childDownTest = function() { childStats.mouseDown = true; }; var childUpTest = function() { childStats.mouseUp = true; }; var childClickTest = function() { childStats.mouseClick = true; }; var childScrollTest = function() { childStats.mouseScroll = true; }; var childWheelTest = function() { childStats.wheel = true; }; // Event listeners for the parent element var startMouseTests = function() { info("Got parent mousemove"); parent.removeEventListener("mousemove", startMouseTests); parent.addEventListener("DOMMouseScroll", parentScrollTest); child.addEventListener("DOMMouseScroll", childScrollTest); SimpleTest.executeSoon(function () { synthesizeWheel(child, 5, 5, {'deltaY': 10, 'lineOrPageDeltaY': 10, 'deltaMode': WheelEvent.DOM_DELTA_LINE}); }); }; var parentScrollTest = function (e) { info("Got parent DOMMouseScroll"); parentStats.mouseScroll = true; parent.removeEventListener("DOMMouseScroll", parentScrollTest); child.removeEventListener("DOMMouseScroll", childScrollTest); parent.addEventListener("wheel", parentWheelTest); child.addEventListener("wheel", childWheelTest); SimpleTest.executeSoon(function () { synthesizeWheel(child, 5, 5, {'deltaY': 10, 'lineOrPageDeltaY': 10, 'deltaMode': WheelEvent.DOM_DELTA_LINE}); }); }; var parentWheelTest = function (e) { info("Got parent wheel"); parentStats.wheel = true; parent.removeEventListener("wheel", parentWheelTest); child.removeEventListener("wheel", childWheelTest); parent.addEventListener("mousedown", parentDownTest); child.addEventListener("mousedown", childDownTest); SimpleTest.executeSoon(function () { synthesizeMouseAtCenter(child, {type: "mousedown"}, window); }); }; var parentDownTest = function (e) { info("Got parent mousedown"); parentStats.mouseDown = true; parent.removeEventListener("mousedown", parentDownTest); child.removeEventListener("mousedown", childDownTest); parent.addEventListener("mouseup", parentUpTest); child.addEventListener("mouseup", childUpTest); SimpleTest.executeSoon(function () { synthesizeMouseAtCenter(child, {type: "mouseup"}, window); }); }; var parentUpTest = function (e) { info("Got parent mouseup"); parentStats.mouseUp = true; parent.removeEventListener("mouseup", parentUpTest); child.removeEventListener("mouseup", childUpTest); parent.addEventListener("click", parentClickTest); child.addEventListener("click", childClickTest); SimpleTest.executeSoon(function () { synthesizeMouseAtCenter(child, {}, window); }); }; var parentClickTest = function (e) { info("Got parent click"); parentStats.mouseClick = true; parent.removeEventListener("click", parentClickTest); child.removeEventListener("click", childClickTest); parent.addEventListener("mousemove", parentMoveTest); child.addEventListener("mousemove", childMoveTest); SimpleTest.executeSoon(function () { synthesizeMouseAtCenter(child, {type: "mousemove"}, window); }); }; var parentMoveTest = function (e) { info("Got parent mousemove"); parentStats.mouseMove = true; parent.removeEventListener("mousemove", parentMoveTest); child.removeEventListener("mousemove", childMoveTest); SimpleTest.executeSoon(function () { info("Exit fullscreen"); addFullscreenChangeContinuation("exit", function() { info("Got fullscreenchange for exiting"); runTests(); SimpleTest.finish(); }); document.exitFullscreen(); }); } document.addEventListener("pointerlockchange", function (e) { if (document.pointerLockElement === parent) { info("Got pointerlockchange for entering"); parent.addEventListener("mousemove", startMouseTests); child.addEventListener("mousemove", childMoveTest); SimpleTest.executeSoon(function () { synthesizeMouseAtCenter(parent, {type: "mousemove"}, window); }); } else { info("Got pointerlockchange for exiting"); } }, false); function start() { info("Requesting fullscreen on parent"); addFullscreenChangeContinuation("enter", function() { info("Got fullscreenchange for entering"); parent.requestPointerLock(); }); parent.requestFullscreen(); } </script> </pre> </body> </html>