pointerlock_leave_UA-manual.html (2183B)
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 #target-wrap { 14 position: relative; 15 background-color: lightgrey; 16 width: 200px; 17 height: 100px; 18 border: grey 1px solid; 19 } 20 21 #target { 22 position: relative; 23 background-color: lightyellow; 24 width: 100px; 25 height: 30px; 26 border: yellow 1px solid; 27 } 28 29 #status-log { 30 margin: 10px 0; 31 color: green; 32 } 33 </style> 34 </head> 35 <body> 36 <h2>Description</h2> 37 <p>This test validates that pointer lock will be lost the user agent / window loses focus.</p> 38 <hr/> 39 40 <h2>Manual Test Steps:</h2> 41 <p> 42 <ol> 43 <li>Click the "lockTarget" button to request a pointer lock.</li> 44 <li>Focus to another window with keyboard (ALT-TAB).</li> 45 <li>Test is done.</li> 46 </ol> 47 </p> 48 <hr/> 49 50 <button onclick="lockTarget();">lockTarget</button> 51 52 <div id="target-wrap"> 53 <div id="status-log">Click the "lockTarget" button.</div> 54 <div id="target">Target</div> 55 </div> 56 <hr/> 57 58 <div id="log"></div> 59 60 <script type="text/javascript" > 61 var target = document.querySelector('#target'), 62 status_log = document.querySelector('#status-log'); 63 64 var leaveUATest = async_test("Test that pointer lock will be lost when the user agent / window loses focus."); 65 66 document.addEventListener("pointerlockchange", function() { 67 if(document.pointerLockElement) { 68 status_log.innerHTML = "Please leave the current window."; 69 } else { 70 status_log.innerHTML = "Pointer lock exited!"; 71 72 leaveUATest.step(function() { 73 assert_equals(document.pointerLockElement, null, "Pointer lock exited!"); 74 }); 75 76 leaveUATest.done(); 77 } 78 }); 79 80 function lockTarget() { 81 target.requestPointerLock(); 82 } 83 </script> 84 </body> 85 </html>