forked from mirrors/gecko-dev
3dca6a5a11
Automatic update from web-platform-tests Replace assert_true(x === y) with assert_equals -- Replace assert_false(x === y) with assert_not_equals -- Replace assert_true(x !== y) with assert_not_equals -- Replace assert_true(x == y) with assert_equals -- Replace assert_false(x == y) with assert_not_equals -- Replace assert_true(x != y) with assert_not_equals -- Fix actual/expected argument order Co-authored-by: Jan-Ivar Bruaroey <jan-ivar@users.noreply.github.com> -- wpt-commits: e2ddf48b78209d0aef4fa513b53a9f28243c9335, d80a3bccd7b88a7810522c6a1e317a53b0daad57, 54ee81d1501b46e990bc1a1cde162949f7d0ba71, d4beec831b7484382a25bca41b1449b68c235d0a, 278cf9fd6cfb113fd72dc5186534db239cde9e29, e1f3c83b5abc4d122e92db3c390aa8c9b8b4b792, 3cabe516b8e1234ccafd4f5e8aef7f9663b2f53f wpt-pr: 25086
149 lines
5.6 KiB
HTML
149 lines
5.6 KiB
HTML
<!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;
|
|
}
|
|
|
|
#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_equals(pointerlockchangeIsFiredonRequest, true, "pointerlockchange is fired when requesting pointerlock");
|
|
assert_equals(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_equals(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_equals(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>
|