mirror of
https://github.com/servo/servo.git
synced 2025-06-23 08:34:42 +01:00
107 lines
3.5 KiB
HTML
107 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<meta name='flags' content='interact'>
|
|
<meta name="timeout" content="long">
|
|
<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>
|