pointerlock_fullscreen-manual.html (6380B)
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 #test-element-wrap { 14 position: relative; 15 background-color: lightgrey; 16 width: 400px; 17 height: 200px; 18 border: grey 1px solid; 19 } 20 21 #test-element { 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 won't be exited when fullscreen is entered or exited, unless fullscreen is exited with the same user gesture as pointer lock.</p> 38 <hr/> 39 40 <h2>Manual Test Steps:</h2> 41 <p> 42 <ol> 43 <li>Click the "scriptExitFullscreen" button.</li> 44 <li>If the exitFullscreen doesn't work, use the menu (or any other interaction except for the "esc" key) to exit fullscreen.</li> 45 <li>First test case done.</li> 46 <li>Click the "gestureExitFullscreen" button.</li> 47 <li>Use the "esc" key to exit fullscreen.</li> 48 <li>Second test case done.</li> 49 </ol> 50 </p> 51 <hr/> 52 53 <button onclick="scriptExitFullscreen();">scriptExitFullscreen</button> 54 <button onclick="gestureExitFullscreen();">gestureExitFullscreen</button> 55 56 <div id="test-element-wrap"> 57 <div id="status-log">Waiting... Please click the "scriptExitFullscreen" button.</div> 58 <div id="test-element">Target</div> 59 </div> 60 <hr/> 61 62 <div id="log"></div> 63 64 <script type="text/javascript" > 65 var test_element = document.querySelector('#test-element'), 66 test_element_wrap = document.querySelector('#test-element-wrap') 67 status_log = document.querySelector('#status-log'); 68 var enable_gestureExitFullscreen = false; 69 var gestureExit_pl = false; 70 var gestureExit_fs = false; 71 var gestureLock = false; 72 73 var scriptExitFullscreenTest = async_test("Test that pointer lock won't be exited when fullscreen is entered or exited with script."); 74 var gestureExitFullscreenTest = async_test("Test that pointer lock is exited when fullscreen is entered or exited with the same user gesture."); 75 76 function RequestFullscreen(element) { 77 var requestFullscreen = element.requestFullscreen || element.webkitRequestFullscreen || element.mozRequestFullscreen || element.msRequestFullscreen; 78 requestFullscreen.call(element); 79 } 80 81 function ExitFullscreen() { 82 var exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || document.mozExitFullscreen || document.msExitFullscreen; 83 exitFullscreen.call(document); 84 } 85 86 function FullscreenElement() { 87 var fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement || document.msFullscreenElement; 88 return fullscreenElement ? fullscreenElement : null; 89 } 90 91 document.addEventListener("pointerlockchange", function() { 92 if(!enable_gestureExitFullscreen) { 93 // first test, enable fullscreen and pointer lock 94 if(document.pointerLockElement) { 95 ExitFullscreen(); 96 logStatus(); 97 98 scriptExitFullscreenTest.step(function() { 99 assert_true(FullscreenElement() === null, "fullscreen is sucessfully exited"); 100 assert_equals(document.pointerLockElement, test_element, "pointer is still locked at the target element"); 101 }); 102 scriptExitFullscreenTest.done(); 103 document.exitPointerLock(); 104 } else{ 105 // first test, fullscreen and pointer lock are exited 106 enable_gestureExitFullscreen = true; 107 } 108 } else { 109 gestureLock = true; 110 if(!document.pointerLockElement) { 111 // second test, pointer lock exited 112 gestureExit_pl = true; 113 114 if(gestureExit_fs) { 115 // second test, fullscreen and pointer lock both exited 116 gestureExitFullscreenTest.step(function() { 117 assert_equals(document.pointerLockElement, null, "pointer is sucessfully exited"); 118 assert_true(FullscreenElement() === null, "fullscreen is sucessfully exited"); 119 }); 120 gestureExitFullscreenTest.done(); 121 } 122 } 123 } 124 }); 125 126 document.addEventListener("fullscreenchange", fullscreenChangeHandler); 127 128 document.addEventListener("webkitfullscreenchange",fullscreenChangeHandler); 129 130 function fullscreenChangeHandler() { 131 if(enable_gestureExitFullscreen && gestureLock && !FullscreenElement()) { 132 if(gestureExit_pl) { 133 // second test, fullscreen and pointer lock both exited 134 gestureExitFullscreenTest.step(function() { 135 assert_equals(document.pointerLockElement, null, "pointer is sucessfully exited"); 136 assert_true(FullscreenElement() === null, "fullscreen is sucessfully exited"); 137 }); 138 139 gestureExitFullscreenTest.done(); 140 } else { 141 gestureExit_fs = true; 142 } 143 } 144 } 145 146 function logStatus() { 147 var status = ""; 148 if(document.pointerLockElement) { 149 status = "<p>Pointer is Locked.</p>" 150 } else { 151 status = "<p>Pointer Lock exited.</p>" 152 } 153 if(FullscreenElement()) { 154 status += "<p>Fullscreen is on now.</p>" 155 } else { 156 status += "<p>Fullscreen exited.</p>" 157 } 158 159 status_log.innerHTML = status; 160 } 161 162 function scriptExitFullscreen() { 163 test_element.requestPointerLock(); 164 RequestFullscreen(test_element_wrap); 165 } 166 167 function gestureExitFullscreen() { 168 RequestFullscreen(test_element_wrap); 169 test_element.requestPointerLock(); 170 } 171 </script> 172 </body> 173 </html>