testing/web-platform/tests/pointerlock/pointerlock_leave_Tab-manual.html

   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 tab with keyboard (Ctrl-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 leaveTabTest = async_test("Test that pointer lock will be lost when the current Tab loses focus.");
  65
  66     document.addEventListener("pointerlockchange", function() {
  67         if(document.pointerLockElement) {
  68             status_log.innerHTML = "Please leave the current tab.";
  69         } else {
  70             status_log.innerHTML = "Pointer lock exited!";
  71
  72             leaveTabTest.step(function() {
  73                 assert_true(document.pointerLockElement === null, "Pointer lock exited!");
  74             });
  75
  76             leaveTabTest.done();
  77         }
  78     });
  79
  80     function lockTarget() {
  81         target.requestPointerLock();
  82     }
  83     </script>
  84     </body>
  85 </html>