tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

pointerlock_remove_target.html (2653B)

      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 <script src="/resources/testdriver.js"></script>
      8 <script src="/resources/testdriver-actions.js"></script>
      9 <script src="/resources/testdriver-vendor.js"></script>
     10 <style type="text/css">
     11    button {
     12        color: blue;
     13    }
     14 
     15    #target-wrap {
     16        position: relative;
     17        background-color: lightgrey;
     18        width: 200px;
     19        height: 100px;
     20        border: grey 1px solid;
     21    }
     22 
     23    #target {
     24        position: relative;
     25        background-color: lightyellow;
     26        width: 100px;
     27        height: 30px;
     28        border: yellow 1px solid;
     29    }
     30 
     31    #status-log {
     32        margin: 10px 0;
     33        color: green;
     34    }
     35 </style>
     36 </head>
     37 <body>
     38    <h2>Description</h2>
     39    <p>This test validates that pointer lock will be lost when the target is disconnected.</p>
     40    <hr/>
     41 
     42    <h2>Manual Test Steps:</h2>
     43    <p>
     44        <ol>
     45            <li>Click the "lockTarget" button to request a pointer lock.</li>
     46            <li>Test is done.</li>
     47        </ol>
     48    </p>
     49    <hr/>
     50 
     51    <button id="Button" onclick="lockTarget();">lockTarget</button>
     52 
     53    <div id="target-wrap">
     54        <div id="status-log">Click the "lockTarget" button.</div>
     55        <div id="target">Target</div>
     56    </div>
     57    <hr/>
     58 
     59    <div id="log"></div>
     60 
     61    <script type="text/javascript" >
     62        var target = document.querySelector('#target'),
     63            target_wrap = document.querySelector('#target-wrap')
     64            status_log = document.querySelector('#status-log');
     65 
     66        var removeTargetTest = async_test("Test that pointer lock will be lost when taking the target element out of the DOM.");
     67 
     68        document.addEventListener("pointerlockchange", function() {
     69            if(document.pointerLockElement) {
     70                status_log.innerHTML = "Target is locked!";
     71 
     72                target_wrap.removeChild(target);
     73            } else {
     74                status_log.innerHTML = "Pointer lock exited!";
     75 
     76                removeTargetTest.step(function() {
     77                    assert_equals(document.pointerLockElement, null, "Pointer lock exited!");
     78                });
     79 
     80                removeTargetTest.done();
     81            }
     82        });
     83 
     84        function lockTarget() {
     85            target.requestPointerLock();
     86        }
     87 
     88        // Inject mouse inputs.
     89        new test_driver.Actions()
     90                       .pointerMove(0, 0, {origin: Button})
     91                       .pointerDown()
     92                       .pointerUp()
     93                       .send();
     94    </script>
     95    </body>
     96 </html>