pointerlock_basic-manual.html (5744B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <meta name="timeout" content="long"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <meta name='flags' content='interact'> 8 <style type="text/css"> 9 button { 10 color: blue; 11 } 12 13 #locktarget { 14 position: relative; 15 background-color: grey; 16 width: 50px; 17 color: white; 18 line-height: 30px; 19 height: 30px; 20 } 21 22 #basic-log { 23 margin: 10px 0; 24 color: green; 25 } 26 </style> 27 </head> 28 <body> 29 <h2>Description</h2> 30 <p>This test validates that the pointer properly be locked in a DOM element, and exit afterwards.</p> 31 <hr/> 32 33 <h2>Manual Test Steps:</h2> 34 <p> 35 <ol> 36 <li>Click the "Lock Target" to test if requestPointerLock() and exitPointerLock() causing a pointerlockchange event.</li> 37 <li>Confirm the lock with a user action (in Firefox).</li> 38 <li>Exit the pointer lock with a user action (usually 'esc'), to test if the cursor is at the same location.</li> 39 <li>Click the "ReEnterLock" to test that no engagement gesture is required to reenter pointer lock if pointer lock is exited via exitPointerLock.</li> 40 <li>Exit the pointer lock with a user action (usually 'esc').</li> 41 <li>Click the "RepeatLock" to validate that each requestPointerLock() will fire a pointerlockchange event.</li> 42 <li>Exit the pointer lock with a user action (usually 'esc').</li> 43 </ol> 44 </p> 45 <hr/> 46 47 <button onclick="LockTarget();">Lock Target</button> 48 <button onclick="ReEnterLock();">ReEnter Lock</button> 49 <button onclick="RepeatLock();">Repeat Lock</button> 50 <div id="basic-log">Waiting... Please click the "Lock Target" button.</div> 51 <div id="locktarget">Target</div> 52 <hr/> 53 54 <div id="log"></div> 55 56 <script type="text/javascript" > 57 var locktarget = document.querySelector('#locktarget'), 58 lock_log = document.querySelector('#basic-log'); 59 60 var pointerlockchangeIsFiredonRequest = false; 61 var posX = posY = 0; 62 var event_counter = 0; 63 var request_counter = 0; 64 65 var requestPointerLockTest = async_test("Test that the pointer properly be locked in a DOM element."); 66 var exitPointerLockTest = async_test("Test that the pointer lock properly be exited, the cursor is at the same location when exited."); 67 var reenterPointerLockTest = async_test("Test that no engagement gesture is required to reenter pointer lock if pointer lock is exited via exitPointerLock."); 68 var repeatLockPointerTest = async_test("Test validates that each requestPointerLock() will fire a pointerlockchange event."); 69 70 document.addEventListener("pointerlockchange", function() { 71 event_counter ++; 72 73 if(event_counter === 1) { 74 pointerlockchangeIsFiredonRequest = true; 75 runRequestPointerLockTest(); 76 } else if(event_counter === 2) { 77 runExitPointerLockTest(); 78 } else if(event_counter === 3) { 79 runReEnterPointerLockTest() 80 } else if(event_counter > 104) { 81 runRepeatLockPointerTest(); 82 } 83 }); 84 85 function runRequestPointerLockTest() { 86 posX = window.screenX; 87 posY = window.screenY; 88 89 requestPointerLockTest.step(function() { 90 assert_equals(pointerlockchangeIsFiredonRequest, true, "pointerlockchange is fired when requesting pointerlock"); 91 assert_equals(document.pointerLockElement, locktarget, "pointer is locked at the target element"); 92 }); 93 94 lock_log.innerHTML = "Pointer is locked on the target element;"; 95 96 requestPointerLockTest.done(); 97 } 98 99 function runExitPointerLockTest() { 100 locktarget.requestPointerLock(); // To re-enter pointer lock 101 102 exitPointerLockTest.step(function() { 103 assert_equals(document.pointerLockElement, null, "pointer is unlocked"); 104 assert_equals(posX, window.screenX, "mouse cursor X is at the same location that it was when pointer lock was entered"); 105 assert_equals(posY, window.screenY, "mouse cursor Y is at the same location that it was when pointer lock was entered"); 106 }); 107 108 lock_log.innerHTML = "Status: Exited pointer lock; Please click the 'Re-enter Lock' button and exit the lock."; 109 110 exitPointerLockTest.done(); 111 } 112 113 function runReEnterPointerLockTest() { 114 reenterPointerLockTest.step(function() { 115 assert_equals(document.pointerLockElement, locktarget, "Pointer is locked again without engagement gesture"); 116 }); 117 118 lock_log.innerHTML = "Status: Exited pointer lock; Please click the 'Repeat Lock' button and exit the lock."; 119 120 reenterPointerLockTest.done(); 121 } 122 123 function runRepeatLockPointerTest() { 124 repeatLockPointerTest.step(function() { 125 assert_equals(request_counter + 5, event_counter, "Each requestPointerLock() will fire a pointerlockchange event"); 126 }); 127 128 lock_log.innerHTML = "Status: Test over."; 129 130 repeatLockPointerTest.done(); 131 } 132 133 function LockTarget() { 134 locktarget.requestPointerLock(); 135 } 136 137 function ReEnterLock() { 138 locktarget.requestPointerLock(); 139 } 140 141 function RepeatLock() { 142 for(var i = 0; i < 100; i++) { 143 request_counter++; 144 locktarget.requestPointerLock(); 145 } 146 } 147 </script> 148 </body> 149 </html>