Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<html>
<!--
-->
<head>
<script src="/tests/SimpleTest/SimpleTest.js">
</script>
<script 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>
<div id="parent">
<div id="child" style="width: 100%; height: 100%;">
</div>
</div>
<pre id="test">
<script type="application/javascript">
/*
* 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()
, mouseMoveIntervalID;
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() {
clearInterval(mouseMoveIntervalID);
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");
clearInterval(mouseMoveIntervalID);
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);
// Retrigger synthesizeMouseAtCenter until it actually happens.
mouseMoveIntervalID = setInterval(() => {
synthesizeMouseAtCenter(parent, {type: "mousemove"}, window);
}, 100);
} else {
info("Got pointerlockchange for exiting");
}
});
function start() {
info("Requesting fullscreen on parent");
addFullscreenChangeContinuation("enter", function() {
info("Got fullscreenchange for entering");
parent.requestPointerLock();
});
parent.requestFullscreen();
}
</script>
</pre>
</body>
</html>