Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<body>
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<meta name='flags' content='interact'>
<style type="text/css">
button {
color: blue;
}
#target-wrap {
position: relative;
background-color: lightgrey;
width: 400px;
height: 150px;
border: grey 1px solid;
}
#target-wrap span, #status-log {
color: green;
}
</style>
</head>
<body>
<h2>Description</h2>
<p>This test validates that movementX/Y provided indefinitely even when the mouse cursor would have otherwise hit the edge of a screen.</p>
<hr/>
<h2>Manual Test Steps:</h2>
<p>
<ol>
<li>Click the "lockTarget" button to request a pointer lock.</li>
<li>Move the pointer constantly in a diagonal direction (e.g. up and right).</li>
<li>Test is done.</li>
</ol>
</p>
<hr/>
<button onclick="lockTarget();">lockTarget</button>
<div id="target-wrap">
<div id="status-log">Click the "lockTarget" button.</div>
<p>screenSize: <span id="screenSize-log">NaN</span></p>
<p>movementX_sum: <span id="movementX_sum-log">NaN</span></p>
<p>movementY_sum: <span id="movementY_sum-log">NaN</span></p>
</div>
<hr/>
<div id="log"></div>
<script type="text/javascript" >
var screenSize_log = document.querySelector('#screenSize-log'),
movementX_sum_log = document.querySelector('#movementX_sum-log'),
movementY_sum_log = document.querySelector('#movementY_sum-log'),
status_log = document.querySelector('#status-log'),
target = document.querySelector('#target-wrap');
var movementX_sum = 0,
movementY_sum = 0;
var screenWidth = screen.width,
screenHeight = screen.height;
var enable_logging = false;
screenSize_log.innerHTML = "width: " + screenWidth + " px, " + "height: " + screenHeight + " px"
var movementXYIndefiniteTest = async_test("Test that movementX/Y provided indefinitely even when the mouse cursor would have otherwise hit the edge of a screen.");
document.addEventListener("pointerlockchange", function() {
if(document.pointerLockElement) {
status_log.innerHTML = "Keep moving...";
enable_logging = true;
}
});
document.addEventListener("mousemove", function (e) {
if(enable_logging) {
movementX_sum += Math.abs(e.movementX);
movementY_sum += Math.abs(e.movementY);
movementX_sum_log.innerHTML = movementX_sum + "px";
movementY_sum_log.innerHTML = movementY_sum + "px";
if(movementX_sum > 2 * screen.width && movementY_sum > 2 * screen.height) {
movementXYIndefiniteTest.step(function() {
assert_greater_than(movementX_sum, 2 * screenWidth, "Sum of movementX is greater than 2 times of screen width");
assert_greater_than(movementY_sum, 2 * screenHeight, "Sum of movementY is greater than 2 times of screen height");
});
movementXYIndefiniteTest.done();
status_log.innerHTML = "Test succeeds...";
enable_logging = false;
document.exitPointerLock();
}
}
});
function lockTarget() {
target.requestPointerLock();
}
</script>
</body>
</html>