<!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>