testing/web-platform/tests/pointerlock/pointerlock_basic-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     #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>