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 target="_blank"
</a>
<div id="div"></div>
<pre id="test">
<script type="application/javascript">
/*
* Checks if movementX and movementY are present
* in the mouse event object.
* It also checks the values for movementXY.
* They should be equal to the current screenXY minus
* the last screenXY
*/
SimpleTest.waitForExplicitFinish();
SimpleTest.requestFlakyTimeout("We may need to wait for window's moving");
function MouseMovementStats(aEvent) {
this.screenX = aEvent.screenX;
this.screenY = aEvent.screenY;
this.movementX = aEvent.movementX;
this.movementY = aEvent.movementY;
}
var div = document.getElementById("div");
var movementX, movementY;
var firstMouseMove, secondMouseMove, secondPointerMove, secondPointerRawUpdate;
function runTests () {
ok(movementX && movementY, "movementX and " +
"movementY should exist in mouse events objects.");
ok(firstMouseMove, "firstMouseMove should be recorded");
ok(secondMouseMove, "secondMouseMove should be recorded");
ok(secondPointerMove, "secondPointerMove should be recorded");
ok(secondPointerRawUpdate, "secondPointerRawUpdate should be recorded");
is(
secondMouseMove?.movementX,
secondMouseMove?.screenX - firstMouseMove?.screenX,
`movementX should be equal to eNow.screenX (${secondMouseMove.screenX}) - ePrevious.screenX (${firstMouseMove.screenX})`
);
is(
secondPointerMove?.movementX,
secondMouseMove?.movementX,
"movementX of pointermove should be equal to movementX of the corresponding mousemove"
);
is(
secondPointerRawUpdate?.movementX,
secondPointerMove?.movementX,
"movementX of pointerrawupdate should be equal to movementX of the corresponding pointermove"
);
is(
secondMouseMove?.movementY,
secondMouseMove?.screenY - firstMouseMove?.screenY,
`movementY should be equal to eNow.screenY (${secondMouseMove.screenY}) - ePrevious.screenY (${firstMouseMove.screenY})`
);
is(
secondPointerMove?.movementY,
secondMouseMove?.movementY,
"movementY of pointermove should be equal to movementY of the corresponding mousemove"
);
is(
secondPointerRawUpdate?.movementY,
secondPointerMove?.movementY,
"movementY of pointerrawupdate should be equal to movementY of the corresponding pointermove"
);
}
var onFirstMouseMove = function(e) {
info(`Got first ${e.type}`);
div.removeEventListener(e.type, onFirstMouseMove);
firstMouseMove = new MouseMovementStats(e);
movementX = ("movementX" in e);
movementY = ("movementY" in e);
div.addEventListener("mousemove", onSecondMouseMoveOrPointerMove);
div.addEventListener("pointermove", onSecondMouseMoveOrPointerMove);
div.addEventListener("pointerrawupdate", onSecondMouseMoveOrPointerMove);
const divCenterWidth = Math.round(div.getBoundingClientRect().width / 2);
const divCenterHeight = Math.round(div.getBoundingClientRect().height / 2);
// FIXME: We should synthesize another mousemove after the propagation of
// current mousemove ends. However, doing that will fail so that it does
// not make sense what this test checks.
synthesizeMouse(div, (divCenterWidth + 10), (divCenterHeight + 10), {
type: "mousemove"
}, window);
};
var onSecondMouseMoveOrPointerMove = function(e) {
info(`Got second ${e.type}`);
div.removeEventListener(e.type, onSecondMouseMoveOrPointerMove);
switch (e.type) {
case "mousemove":
secondMouseMove = new MouseMovementStats(e);
addFullscreenChangeContinuation("exit", function() {
info("Got fullscreenchange for exiting");
runTests();
SimpleTest.finish();
});
document.exitFullscreen();
break;
case "pointermove":
secondPointerMove = new MouseMovementStats(e);
break;
case "pointerrawupdate":
secondPointerRawUpdate = new MouseMovementStats(e);
break;
}
};
function start() {
info("Requesting fullscreen on parent");
for (const type of ["mousemove", "pointermove", "pointerrawupdate"]) {
addEventListener(type, event => {
info(`${type}: { screenX: ${event.screenX}, screenY: ${
event.screenY
}, movementX: ${event.movementX}, movementY: ${event.movementY} }`);
}, {capture: true});
}
addFullscreenChangeContinuation("enter", function() {
info("Got fullscreenchange for entering");
div.addEventListener("mousemove", onFirstMouseMove);
requestAnimationFrame(
() => synthesizeMouseAtCenter(div, {type: "mousemove"}, window)
);
});
div.requestFullscreen();
}
</script>
</pre>
</body>
</html>