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">
15 background-color: lightgrey
;
18 border: grey
1px solid
;
23 background-color: lightyellow
;
26 border: yellow
1px solid
;
37 <p>This test validates that pointer lock will be lost the user agent / window loses focus.
</p>
40 <h2>Manual Test Steps:
</h2>
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>
50 <button onclick=
"lockTarget();">lockTarget
</button>
52 <div id=
"target-wrap">
53 <div id=
"status-log">Click the
"lockTarget" button.
</div>
54 <div id=
"target">Target
</div>
60 <script type=
"text/javascript" >
61 var target = document.querySelector('#target'),
62 status_log = document.querySelector('#status-log');
64 var leaveUATest = async_test(
"Test that pointer lock will be lost when the user agent / window loses focus.");
66 document.addEventListener(
"pointerlockchange", function() {
67 if(document.pointerLockElement) {
68 status_log.innerHTML =
"Please leave the current window.";
70 status_log.innerHTML =
"Pointer lock exited!";
72 leaveUATest.step(function() {
73 assert_equals(document.pointerLockElement, null,
"Pointer lock exited!");
80 function lockTarget() {
81 target.requestPointerLock();