| <!DOCTYPE html> |
| <html> |
| <body> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <meta name='flags' content='interact'> |
| <meta name="timeout" content="long"> |
| <style type="text/css"> |
| button { |
| color: blue; |
| } |
| |
| #target-wrap { |
| position: relative; |
| background-color: lightgrey; |
| width: 200px; |
| height: 100px; |
| border: grey 1px solid; |
| } |
| |
| #target { |
| position: relative; |
| background-color: lightyellow; |
| width: 100px; |
| height: 30px; |
| border: yellow 1px solid; |
| } |
| |
| #status-log { |
| margin: 10px 0; |
| color: green; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>Description</h2> |
| <p>This test validates that pointer lock will be lost when the target is disconnected.</p> |
| <hr/> |
| |
| <h2>Manual Test Steps:</h2> |
| <p> |
| <ol> |
| <li>Click the "lockTarget" button to request a pointer lock.</li> |
| <li>Test is done.</li> |
| </ol> |
| </p> |
| <hr/> |
| |
| <button onclick="lockTarget();">lockTarget</button> |
| |
| <div id="target-wrap"> |
| <div id="status-log">Click the "lockTarget" button.</div> |
| <div id="target">Target</div> |
| </div> |
| <hr/> |
| |
| <div id="log"></div> |
| |
| <script type="text/javascript" > |
| var target = document.querySelector('#target'), |
| target_wrap = document.querySelector('#target-wrap') |
| status_log = document.querySelector('#status-log'); |
| |
| var removeTargetTest = async_test("Test that pointer lock will be lost when taking the target element out of the DOM."); |
| |
| document.addEventListener("pointerlockchange", function() { |
| if(document.pointerLockElement) { |
| status_log.innerHTML = "Target is locked!"; |
| |
| target_wrap.removeChild(target); |
| } else { |
| status_log.innerHTML = "Pointer lock exited!"; |
| |
| removeTargetTest.step(function() { |
| assert_true(document.pointerLockElement === null, "Pointer lock exited!"); |
| }); |
| |
| removeTargetTest.done(); |
| } |
| }); |
| |
| function lockTarget() { |
| target.requestPointerLock(); |
| } |
| </script> |
| </body> |
| </html> |