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