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
|
<!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;
}
#locktarget {
position: relative;
background-color: grey;
width: 50px;
color: white;
line-height: 30px;
height: 30px;
}
#basic-log {
margin: 10px 0;
color: green;
}
</style>
</head>
<body>
<h2>Description</h2>
<p>This test validates that the pointer properly be locked in a DOM element, and exit afterwards.</p>
<hr/>
<h2>Manual Test Steps:</h2>
<p>
<ol>
<li>Click the "Lock Target" to test if requestPointerLock() and exitPointerLock() causing a pointerlockchange event.</li>
<li>Confirm the lock with a user action (in Firefox).</li>
<li>Exit the pointer lock with a user action (usually 'esc'), to test if the cursor is at the same location.</li>
<li>Click the "ReEnterLock" to test that no engagement gesture is required to reenter pointer lock if pointer lock is exited via exitPointerLock.</li>
<li>Exit the pointer lock with a user action (usually 'esc').</li>
<li>Click the "RepeatLock" to validate that each requestPointerLock() will fire a pointerlockchange event.</li>
<li>Exit the pointer lock with a user action (usually 'esc').</li>
</ol>
</p>
<hr/>
<button onclick="LockTarget();">Lock Target</button>
<button onclick="ReEnterLock();">ReEnter Lock</button>
<button onclick="RepeatLock();">Repeat Lock</button>
<div id="basic-log">Waiting... Please click the "Lock Target" button.</div>
<div id="locktarget">Target</div>
<hr/>
<div id="log"></div>
<script type="text/javascript" >
var locktarget = document.querySelector('#locktarget'),
lock_log = document.querySelector('#basic-log');
var pointerlockchangeIsFiredonRequest = false;
var posX = posY = 0;
var event_counter = 0;
var request_counter = 0;
var requestPointerLockTest = async_test("Test that the pointer properly be locked in a DOM element.");
var exitPointerLockTest = async_test("Test that the pointer lock properly be exited, the cursor is at the same location when exited.");
var reenterPointerLockTest = async_test("Test that no engagement gesture is required to reenter pointer lock if pointer lock is exited via exitPointerLock.");
var repeatLockPointerTest = async_test("Test validates that each requestPointerLock() will fire a pointerlockchange event.");
document.addEventListener("pointerlockchange", function() {
event_counter ++;
if(event_counter === 1) {
pointerlockchangeIsFiredonRequest = true;
runRequestPointerLockTest();
} else if(event_counter === 2) {
runExitPointerLockTest();
} else if(event_counter === 3) {
runReEnterPointerLockTest()
} else if(event_counter > 104) {
runRepeatLockPointerTest();
}
});
function runRequestPointerLockTest() {
posX = window.screenX;
posY = window.screenY;
requestPointerLockTest.step(function() {
assert_true(pointerlockchangeIsFiredonRequest === true, "pointerlockchange is fired when requesting pointerlock");
assert_true(document.pointerLockElement === locktarget, "pointer is locked at the target element");
});
lock_log.innerHTML = "Pointer is locked on the target element;";
requestPointerLockTest.done();
}
function runExitPointerLockTest() {
locktarget.requestPointerLock(); // To re-enter pointer lock
exitPointerLockTest.step(function() {
assert_true(document.pointerLockElement === null, "pointer is unlocked");
assert_equals(posX, window.screenX, "mouse cursor X is at the same location that it was when pointer lock was entered");
assert_equals(posY, window.screenY, "mouse cursor Y is at the same location that it was when pointer lock was entered");
});
lock_log.innerHTML = "Status: Exited pointer lock; Please click the 'Re-enter Lock' button and exit the lock.";
exitPointerLockTest.done();
}
function runReEnterPointerLockTest() {
reenterPointerLockTest.step(function() {
assert_true(document.pointerLockElement === locktarget, "Pointer is locked again without engagement gesture");
});
lock_log.innerHTML = "Status: Exited pointer lock; Please click the 'Repeat Lock' button and exit the lock.";
reenterPointerLockTest.done();
}
function runRepeatLockPointerTest() {
repeatLockPointerTest.step(function() {
assert_equals(request_counter + 5, event_counter, "Each requestPointerLock() will fire a pointerlockchange event");
});
lock_log.innerHTML = "Status: Test over.";
repeatLockPointerTest.done();
}
function LockTarget() {
locktarget.requestPointerLock();
}
function ReEnterLock() {
locktarget.requestPointerLock();
}
function RepeatLock() {
for(var i = 0; i < 100; i++) {
request_counter++;
locktarget.requestPointerLock();
}
}
</script>
</body>
</html>
|
