4 <title>Fullscreen and Mouse Lock Scripts
</title>
5 <style type=
"text/css">
7 border: solid black
1px;
15 <script type=
"text/javascript">
17 function enterFullscreen() {
18 console
.log("enterFullscreen()");
19 document
.getElementById('container').webkitRequestFullScreen(
20 Element
.ALLOW_KEYBOARD_INPUT
);
23 function exitFullscreen() {
24 console
.log("exitFullscreen()");
25 document
.webkitCancelFullScreen();
28 // Wait for notification from JS, then notify test of success or failure
29 // callback that the click has registered and the mouse lock state has changed.
30 function lockMouse1(callback
) {
31 console
.log("lockMouse1()");
32 var target
= document
.getElementById("lockTarget1");
35 console
.log("lock failed");
40 function possibleSuccess() {
41 if (document
.pointerLockElement
== target
) {
42 console
.log("lock success");
49 document
.onpointerlockchange
= possibleSuccess
;
50 document
.onpointerlockerror
= failure
;
51 target
.requestPointerLock();
54 // In the PyAuto test the fullscreen is initiated, accepted and enters into a
55 // wait state reading the value of lock_result. One of the two asynchronous
56 // functions in the JS will be executed. The PyAuto code waits for lock_result
57 // to return "success" or "failure". Sample PyAuto code:
58 // lock_result = self._driver.execute_script('lockMouse1AndSetLockResult()')
59 function lockMouseAndSetLockResult(targetId
) {
60 var target
= document
.getElementById(targetId
);
64 console
.log("lock failed");
65 lock_result
= "failure"
67 function possibleSuccess() {
68 if (document
.pointerLockElement
== target
) {
69 console
.log("lock success");
70 lock_result
= "success"
75 document
.onpointerlockchange
= possibleSuccess
;
76 document
.onpointerlockerror
= failure
;
77 target
.requestPointerLock();
80 function lockMouse1AndSetLockResult() {
81 console
.log("lockMouse1AndSetLockResult()");
82 lockMouseAndSetLockResult("lockTarget1");
85 // When mouse lock is initiated and accepted, PyAuto test will wait for the
86 // lock_result to return "success" or "failure" to initiate the next action.
87 function lockMouse2() {
88 console
.log("lockMouse2()");
89 lockMouseAndSetLockResult("lockTarget2");
92 function delayedLockMouse1() {
93 console
.log("delayedLockMouse1()");
94 window
.setTimeout(lockMouse1
, 1010);
95 // Delay must be over 1 second or the click that initiated the delayed action
96 // may still be considered active and treat this as a user gesture.
97 // We want to test a lock not associated with a user gesture.
100 function spamLockMouse2() {
101 console
.log("spamLockMouse2()")
102 window
.setInterval(lockMouse2
, 111);
105 function unlockMouse() {
106 console
.log("unlockMouse()");
107 document
.exitPointerLock();
110 function enterFullscreenAndLockMouse1() {
111 console
.log("enterFullscreenAndLockMouse1()");
116 function lockMouse1AndEnterFullscreen() {
117 console
.log("lockMouse1AndEnterFullscreen()");
122 function moveHTMLCursorTo(x
, y
) {
123 HTMLCursor
.style
.left
= x
+ "px";;
124 HTMLCursor
.style
.top
= y
+ "px";
127 function moveHTMLCursorToCenter() {
128 moveHTMLCursorTo(window
.innerWidth
/ 2, window
.innerHeight
/ 2);
131 function moveHTMLCursorBy(x
, y
) {
133 HTMLCursor
.getBoundingClientRect().left
+ parseInt(x
),
134 HTMLCursor
.getBoundingClientRect().top
+ parseInt(y
));
137 var polyFillMouseEventMovementFromVenderPrefix = function (e
) {
138 e
.movementX
= (e
.movementX
!== undefined ? e
.movementX
:
139 (e
.webkitMovementX
!== undefined ? e
.webkitMovementX
:
140 (e
.mozMovementX
!== undefined ? e
.mozMovementX
:
141 (e
.oMovementX
!== undefined ? e
.oMovementX
:
143 e
.movementY
= (e
.movementY
!== undefined ? e
.movementY
:
144 (e
.webkitMovementY
!== undefined ? e
.webkitMovementY
:
145 (e
.mozMovementY
!== undefined ? e
.mozMovementY
:
146 (e
.oMovementY
!== undefined ? e
.oMovementY
:
150 var clicked_elem_ID
= ""
151 function clickElement(id
) {
152 clicked_elem_ID
= id
;
156 moveHTMLCursorToCenter();
158 document
.addEventListener("mousemove",
159 polyFillMouseEventMovementFromVenderPrefix
);
160 document
.addEventListener("mousemove", function (e
) {
161 if (e
.movementX
!== undefined) {
162 moveHTMLCursorBy(e
.movementX
, e
.movementY
);
163 displaytext
.innerHTML
=
164 "Document mousemove listener:<br>" +
166 "<li>Raw screen position: " + e
.screenX
+ ", " + e
.screenY
+ "</li>" +
168 + HTMLCursor
.getBoundingClientRect().left
+ ", "
169 + HTMLCursor
.getBoundingClientRect().top
+ "</li>" +
170 "<li>Movement: " + e
.movementX
+ ", " + e
.movementY
+ "</li>" +
173 displaytext
.innerHTML
=
174 "<b>You must enable pointer lock in about:flags</b>";
178 document
.addEventListener("keypress", function (e
) {
179 switch (String
.fromCharCode(e
.charCode
)) {
180 case "f": enterFullscreen(); break;
181 case "x": exitFullscreen(); break;
182 case "1": lockMouse1(); break;
183 case "2": lockMouse2(); break;
184 case "d": delayedLockMouse1(); break;
185 case "u": unlockMouse(); break;
186 case "b": enterFullscreenAndLockMouse1(); break;
187 case "B": lockMouse1AndEnterFullscreen(); break;
188 default: moveHTMLCursorToCenter(); break;
195 <body onload=
"init()"
196 title=
"This tooltip should not be shown if the mouse is locked.">
198 <button id=
"enterFullscreen" onclick=
"enterFullscreen();">
199 enterFullscreen() [f]
201 <button id=
"exitFullscreen" onclick=
"exitFullscreen();">
204 <button id=
"lockMouse1" onclick=
"lockMouse1();">
207 <button id=
"lockMouse2" onclick=
"lockMouse2();">
210 <button id=
"delayedLockMouse1" onclick=
"delayedLockMouse1();">
211 delayedLockMouse1() [d]
213 <button id=
"spamLockMouse2" onclick=
"spamLockMouse2();">
216 <button id=
"unlockMouse" onclick=
"unlockMouse();">
219 <button id=
"enterFullscreenAndLockMouse1"
220 onclick=
"enterFullscreenAndLockMouse1()">
221 enterFullscreenAndLockMouse1() [b]
223 <button id=
"lockMouse1AndEnterFullscreen"
224 onclick=
"lockMouse1AndEnterFullscreen()">
225 lockMouse1AndEnterFullscreen() [B]
227 <div id=
"lockTarget1">lockTarget1
</div>
228 <div id=
"lockTarget2">lockTarget2
</div>
229 <form name=
"HTMLCursor" id=
"HTMLCursor">HTMLCursor
</form>
230 <form name=
"displaytext">...
</form>
231 <p>The
<a href=
"#anchor" name=
"anchor" id=
"anchor"
232 onclick=
"clickElement(this.id);">
235 navigates to an anchor on this page. The browser should not exit tab
236 fullscreen or mouse lock.
</p>
238 <p>This text is outside of the container that is made fullscreen. This text
239 should not be visible when fullscreen.
</p>