зеркало из https://github.com/mozilla/gecko-dev.git
150 строки
5.6 KiB
HTML
150 строки
5.6 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;
|
|
}
|
|
|
|
#locktarget {
|
|
position: relative;
|
|
background-color: grey;
|
|
width: 50px;
|
|
color: white;
|
|
line-height: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
#basic-log {
|
|
margin: 10px 0;
|
|
color: green;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Description</h2>
|
|
<p>This test validates that the pointer properly be locked in a DOM element, and exit afterwards.</p>
|
|
<hr/>
|
|
|
|
<h2>Manual Test Steps:</h2>
|
|
<p>
|
|
<ol>
|
|
<li>Click the "Lock Target" to test if requestPointerLock() and exitPointerLock() causing a pointerlockchange event.</li>
|
|
<li>Confirm the lock with a user action (in Firefox).</li>
|
|
<li>Exit the pointer lock with a user action (usually 'esc'), to test if the cursor is at the same location.</li>
|
|
<li>Click the "ReEnterLock" to test that no engagement gesture is required to reenter pointer lock if pointer lock is exited via exitPointerLock.</li>
|
|
<li>Exit the pointer lock with a user action (usually 'esc').</li>
|
|
<li>Click the "RepeatLock" to validate that each requestPointerLock() will fire a pointerlockchange event.</li>
|
|
<li>Exit the pointer lock with a user action (usually 'esc').</li>
|
|
</ol>
|
|
</p>
|
|
<hr/>
|
|
|
|
<button onclick="LockTarget();">Lock Target</button>
|
|
<button onclick="ReEnterLock();">ReEnter Lock</button>
|
|
<button onclick="RepeatLock();">Repeat Lock</button>
|
|
<div id="basic-log">Waiting... Please click the "Lock Target" button.</div>
|
|
<div id="locktarget">Target</div>
|
|
<hr/>
|
|
|
|
<div id="log"></div>
|
|
|
|
<script type="text/javascript" >
|
|
var locktarget = document.querySelector('#locktarget'),
|
|
lock_log = document.querySelector('#basic-log');
|
|
|
|
var pointerlockchangeIsFiredonRequest = false;
|
|
var posX = posY = 0;
|
|
var event_counter = 0;
|
|
var request_counter = 0;
|
|
|
|
var requestPointerLockTest = async_test("Test that the pointer properly be locked in a DOM element.");
|
|
var exitPointerLockTest = async_test("Test that the pointer lock properly be exited, the cursor is at the same location when exited.");
|
|
var reenterPointerLockTest = async_test("Test that no engagement gesture is required to reenter pointer lock if pointer lock is exited via exitPointerLock.");
|
|
var repeatLockPointerTest = async_test("Test validates that each requestPointerLock() will fire a pointerlockchange event.");
|
|
|
|
document.addEventListener("pointerlockchange", function() {
|
|
event_counter ++;
|
|
|
|
if(event_counter === 1) {
|
|
pointerlockchangeIsFiredonRequest = true;
|
|
runRequestPointerLockTest();
|
|
} else if(event_counter === 2) {
|
|
runExitPointerLockTest();
|
|
} else if(event_counter === 3) {
|
|
runReEnterPointerLockTest()
|
|
} else if(event_counter > 104) {
|
|
runRepeatLockPointerTest();
|
|
}
|
|
});
|
|
|
|
function runRequestPointerLockTest() {
|
|
posX = window.screenX;
|
|
posY = window.screenY;
|
|
|
|
requestPointerLockTest.step(function() {
|
|
assert_true(pointerlockchangeIsFiredonRequest === true, "pointerlockchange is fired when requesting pointerlock");
|
|
assert_true(document.pointerLockElement === locktarget, "pointer is locked at the target element");
|
|
});
|
|
|
|
lock_log.innerHTML = "Pointer is locked on the target element;";
|
|
|
|
requestPointerLockTest.done();
|
|
}
|
|
|
|
function runExitPointerLockTest() {
|
|
locktarget.requestPointerLock(); // To re-enter pointer lock
|
|
|
|
exitPointerLockTest.step(function() {
|
|
assert_true(document.pointerLockElement === null, "pointer is unlocked");
|
|
assert_equals(posX, window.screenX, "mouse cursor X is at the same location that it was when pointer lock was entered");
|
|
assert_equals(posY, window.screenY, "mouse cursor Y is at the same location that it was when pointer lock was entered");
|
|
});
|
|
|
|
lock_log.innerHTML = "Status: Exited pointer lock; Please click the 'Re-enter Lock' button and exit the lock.";
|
|
|
|
exitPointerLockTest.done();
|
|
}
|
|
|
|
function runReEnterPointerLockTest() {
|
|
reenterPointerLockTest.step(function() {
|
|
assert_true(document.pointerLockElement === locktarget, "Pointer is locked again without engagement gesture");
|
|
});
|
|
|
|
lock_log.innerHTML = "Status: Exited pointer lock; Please click the 'Repeat Lock' button and exit the lock.";
|
|
|
|
reenterPointerLockTest.done();
|
|
}
|
|
|
|
function runRepeatLockPointerTest() {
|
|
repeatLockPointerTest.step(function() {
|
|
assert_equals(request_counter + 5, event_counter, "Each requestPointerLock() will fire a pointerlockchange event");
|
|
});
|
|
|
|
lock_log.innerHTML = "Status: Test over.";
|
|
|
|
repeatLockPointerTest.done();
|
|
}
|
|
|
|
function LockTarget() {
|
|
locktarget.requestPointerLock();
|
|
}
|
|
|
|
function ReEnterLock() {
|
|
locktarget.requestPointerLock();
|
|
}
|
|
|
|
function RepeatLock() {
|
|
for(var i = 0; i < 100; i++) {
|
|
request_counter++;
|
|
locktarget.requestPointerLock();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|