Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-15 10:25:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision dc5cbf088edcdb266541d4e5a76149a2c6e716a0

Browse source
This commit is contained in:
Ms2ger 2016-09-09 09:40:35 +02:00
parent 1d40075f03
commit 079092dfea
2381 changed files with 90360 additions and 17722 deletions
Download patch file Download diff file Expand all files Collapse all files

3
tests/wpt/web-platform-tests/pointerlock/OWNERS
View file

@ -1 +1,2 @@
@plehegar
@scheib
@siusin

124
tests/wpt/web-platform-tests/pointerlock/movementX_Y_basic-manual.html Normal file
View file

@ -0,0 +1,124 @@
<!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">
#status-log {
margin: 10px 0;
color: green;
color: green;
}
</style>
</head>
<body>
<h2>Description</h2>
<p>This test if movementX/Y can provide the change in position of the pointer, as if movementX/Y = eNow.screenX/Y-ePrevious.screenX/Y</p>
<hr/>
<h2>Manual Test Steps:</h2>
<p>
<ol>
<li>Click to start Test1.</li>
<li>Move the mouse within the window, slow and fast, like a scribble.</li>
<li>Click again to end test.</li>
</ol>
</p>
<hr/>
<div id="status-log">Waiting... Click to start loging.</div>
<div class="data-log">
<table>
<tr><td></td><td>X</td><td>Y</td></tr>
<tr><td>client_init:</td><td id="clientX_init-log">X</td><td id="clientY_init-log">Y</td></tr>
<tr><td>client_last:</td><td id="clientX_last-log">X</td><td id="clientY_last-log">Y</td></tr>
<tr><td>client_delta:</td><td id="clientX_delta-log">X</td><td id="clientY_delta-log">Y</td></tr>
<tr><td>movement_sum:</td><td id="movementX_sum-log">X</td><td id="movementY_sum-log">Y</td></tr>
<tr><td>movement:</td><td id="movementX-log">X</td><td id="movementY-log">Y</td></tr>
</table>
</div>
<hr/>
<div id="log"></div>
<script type="text/javascript" >
var status_log = document.querySelector('#status-log'),
movementX_log = document.querySelector('#movementX-log'),
movementY_log = document.querySelector('#movementY-log'),
movementX_sum_log = document.querySelector('#movementX_sum-log'),
movementY_sum_log = document.querySelector('#movementY_sum-log'),
clientX_init_log = document.querySelector('#clientX_init-log'),
clientY_init_log = document.querySelector('#clientY_init-log'),
clientX_last_log = document.querySelector('#clientX_last-log'),
clientY_last_log = document.querySelector('#clientY_last-log');
clientX_delta_log = document.querySelector('#clientX_delta-log'),
clientY_delta_log = document.querySelector('#clientY_delta-log');
var click_counter = 0;
var clientX_init, clientY_init, movementX, movementY, movementX_sum, movementY_sum, clientX_last, clientY_last;
var movementX_Y_inside_window_Test = async_test("Test that movementX/Y = eNow.screenX/Y-ePrevious.screenX/Y.");
document.addEventListener("click", function (e) {
click_counter++;
switch(click_counter) {
case 1:
status_log.innerHTML = "inside window: logging...";
break;
case 2:
status_log.innerHTML = "inside window: done";
// approximately(+/- 10)
// a little drift should be tollerated
movementX_Y_inside_window_Test.step(function() {
assert_equals(movementX_sum, clientX_last - clientX_init, "sum of movementX = clientX_init - clientX_last");
assert_equals(movementY_sum, clientY_last - clientY_init, "sum of movementY = clientY_init - clientY_last");
});
movementX_Y_inside_window_Test.done();
break;
}
});
document.addEventListener("mousemove", function (e) {
movementX = e.movementX;
movementY = e.movementY;
if(click_counter === 1) {
if(!clientX_init) {
clientX_init = e.clientX;
clientY_init = e.clientY;
movementX_sum = movementX;
movementY_sum = movementY;
}
movementX_sum += movementX;
movementY_sum += movementY;
clientX_last = e.clientX;
clientY_last = e.clientY;
clientX_delta = clientX_last - clientX_init;
clientY_delta = clientY_last - clientY_init;
updateData();
}
});
function updateData() {
clientX_init_log.innerHTML = clientX_init;
clientY_init_log.innerHTML = clientY_init;
clientX_last_log.innerHTML = clientX_last;
clientY_last_log.innerHTML = clientY_last;
clientX_delta_log.innerHTML = clientX_delta;
clientY_delta_log.innerHTML = clientY_delta;
movementX_log.innerHTML = movementX;
movementY_log.innerHTML = movementY;
movementX_sum_log.innerHTML = movementX_sum;
movementY_sum_log.innerHTML = movementY_sum;
}
</script>
</body>
</html>

140
tests/wpt/web-platform-tests/pointerlock/movementX_Y_no-jumps-manual.html Normal file
View file

@ -0,0 +1,140 @@
<!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">
#status-log {
margin: 10px 0;
color: green;
color: green;
}
</style>
</head>
<body>
<h2>Description</h2>
<p>This test that movementX/Y do not jump by a large value when exiting and re-entering the window.</p>
<hr/>
<h2>Manual Test Steps:</h2>
<p>
<ol>
<li>Make sure the window is not maximized.</li>
<li>Click to start Test.</li>
<li>Move the mouse slowly out of the window.
<li>Move as fast as needed to a different location outside the window at least 100 pixels away</li>
<li>Slowly re-enter the window.</li>
<li>Click again to end tests.</li>
</ol>
</p>
<hr/>
<div id="status-log">Waiting... Click to start loging.</div>
<div class="data-log">
<table>
<tr><td></td><td>X</td><td>Y</td></tr>
<tr><td>client_init:</td><td id="clientX_init-log">X</td><td id="clientY_init-log">Y</td></tr>
<tr><td>client_last:</td><td id="clientX_last-log">X</td><td id="clientY_last-log">Y</td></tr>
<tr><td>client_delta:</td><td id="clientX_delta-log">X</td><td id="clientY_delta-log">Y</td></tr>
<tr><td>movement_sum:</td><td id="movementX_sum-log">X</td><td id="movementY_sum-log">Y</td></tr>
<tr><td>movement:</td><td id="movementX-log">X</td><td id="movementY-log">Y</td></tr>
</table>
</div>
<hr/>
<div id="log"></div>
<script type="text/javascript" >
var status_log = document.querySelector('#status-log'),
movementX_log = document.querySelector('#movementX-log'),
movementY_log = document.querySelector('#movementY-log'),
movementX_sum_log = document.querySelector('#movementX_sum-log'),
movementY_sum_log = document.querySelector('#movementY_sum-log'),
clientX_init_log = document.querySelector('#clientX_init-log'),
clientY_init_log = document.querySelector('#clientY_init-log'),
clientX_last_log = document.querySelector('#clientX_last-log'),
clientY_last_log = document.querySelector('#clientY_last-log');
clientX_delta_log = document.querySelector('#clientX_delta-log'),
clientY_delta_log = document.querySelector('#clientY_delta-log');
var click_counter = 0;
var clientX_init, clientY_init, movementX, movementY, movementX_sum, movementY_sum, clientX_last, clientY_last;
var movementX_Y_outside_window_Test = async_test("Test that movementX/Y do not have large values when re-entering from outside the window.");
document.addEventListener("click", function (e) {
click_counter++;
switch(click_counter) {
case 1:
status_log.innerHTML = "logging...";
break;
case 2:
status_log.innerHTML = "done";
// approximately(+/- 10)
// a little drift should be tollerated
movementX_Y_outside_window_Test.step(function() {
assert_equals(movementX_sum, clientX_last - clientX_init, "sum of movementX = clientX_init - clientX_last");
assert_equals(movementY_sum, clientY_last - clientY_init, "sum of movementY = clientY_init - clientY_last");
});
movementX_Y_outside_window_Test.done();
break;
}
});
document.addEventListener("mousemove", function (e) {
movementX = e.movementX;
movementY = e.movementY;
if(click_counter === 1) {
if(!clientX_init) {
clientX_init = e.clientX;
clientY_init = e.clientY;
movementX_sum = movementX;
movementY_sum = movementY;
}
movementX_Y_outside_window_Test.step(function() {
assert_less_than(Math.abs(movementX), 50, "movementX should not have large jumps in value.");
assert_less_than(Math.abs(movementY), 50, "movementY should not have large jumps in value.");
});
movementX_sum += movementX;
movementY_sum += movementY;
clientX_last = e.clientX;
clientY_last = e.clientY;
clientX_delta = clientX_last - clientX_init;
clientY_delta = clientY_last - clientY_init;
updateData();
}
});
document.addEventListener("mouseenter", function (e) {
if(click_counter === 1) {
movementX_Y_outside_window_Test.step(function() {
assert_greater_than(Math.abs(e.clientX-clientX_last) + Math.abs(e.clientY-clientY_last), 100, "Test requires mouse to be moved at least 100 pixels outside of window.");
});
}
});
function updateData() {
clientX_init_log.innerHTML = clientX_init;
clientY_init_log.innerHTML = clientY_init;
clientX_last_log.innerHTML = clientX_last;
clientY_last_log.innerHTML = clientY_last;
clientX_delta_log.innerHTML = clientX_delta;
clientY_delta_log.innerHTML = clientY_delta;
movementX_log.innerHTML = movementX;
movementY_log.innerHTML = movementY;
movementX_sum_log.innerHTML = movementX_sum;
movementY_sum_log.innerHTML = movementY_sum;
}
</script>
</body>
</html>

149
tests/wpt/web-platform-tests/pointerlock/pointerlock_basic-manual.html Normal file
View file

@ -0,0 +1,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>

173
tests/wpt/web-platform-tests/pointerlock/pointerlock_fullscreen-manual.html Normal file
View file

@ -0,0 +1,173 @@
<!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;
}
#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_true(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_true(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_true(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>

107
tests/wpt/web-platform-tests/pointerlock/pointerlock_indefinite-manual.html Normal file
View file

@ -0,0 +1,107 @@
<!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: 400px;
height: 150px;
border: grey 1px solid;
}
#target-wrap span, #status-log {
color: green;
}
</style>
</head>
<body>
<h2>Description</h2>
<p>This test validates that movementX/Y provided indefinitely even when the mouse cursor would have otherwise hit the edge of a screen.</p>
<hr/>
<h2>Manual Test Steps:</h2>
<p>
<ol>
<li>Click the "lockTarget" button to request a pointer lock.</li>
<li>Move the pointer constantly in a diagonal direction (e.g. up and right).</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>
<p>screenSize: <span id="screenSize-log">NaN</span></p>
<p>movementX_sum: <span id="movementX_sum-log">NaN</span></p>
<p>movementY_sum: <span id="movementY_sum-log">NaN</span></p>
</div>
<hr/>
<div id="log"></div>
<script type="text/javascript" >
var screenSize_log = document.querySelector('#screenSize-log'),
movementX_sum_log = document.querySelector('#movementX_sum-log'),
movementY_sum_log = document.querySelector('#movementY_sum-log'),
status_log = document.querySelector('#status-log'),
target = document.querySelector('#target-wrap');
var movementX_sum = 0,
movementY_sum = 0;
var screenWidth = screen.width,
screenHeight = screen.height;
var enable_logging = false;
screenSize_log.innerHTML = "width: " + screenWidth + " px, " + "height: " + screenHeight + " px"
var movementXYIndefiniteTest = async_test("Test that movementX/Y provided indefinitely even when the mouse cursor would have otherwise hit the edge of a screen.");
document.addEventListener("pointerlockchange", function() {
if(document.pointerLockElement) {
status_log.innerHTML = "Keep moving...";
enable_logging = true;
}
});
document.addEventListener("mousemove", function (e) {
if(enable_logging) {
movementX_sum += Math.abs(e.movementX);
movementY_sum += Math.abs(e.movementY);
movementX_sum_log.innerHTML = movementX_sum + "px";
movementY_sum_log.innerHTML = movementY_sum + "px";
if(movementX_sum > 2 * screen.width && movementY_sum > 2 * screen.height) {
movementXYIndefiniteTest.step(function() {
assert_greater_than(movementX_sum, 2 * screenWidth, "Sum of movementX is greater than 2 times of screen width");
assert_greater_than(movementY_sum, 2 * screenHeight, "Sum of movementY is greater than 2 times of screen height");
});
movementXYIndefiniteTest.done();
status_log.innerHTML = "Test succeeds...";
enable_logging = false;
document.exitPointerLock();
}
}
});
function lockTarget() {
target.requestPointerLock();
}
</script>
</body>
</html>

85
tests/wpt/web-platform-tests/pointerlock/pointerlock_leave_Tab-manual.html Normal file
View file

@ -0,0 +1,85 @@
<!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 the user agent / window loses focus.</p>
<hr/>
<h2>Manual Test Steps:</h2>
<p>
<ol>
<li>Click the "lockTarget" button to request a pointer lock.</li>
<li>Focus to another tab with keyboard (Ctrl-TAB).</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'),
status_log = document.querySelector('#status-log');
var leaveTabTest = async_test("Test that pointer lock will be lost when the current Tab loses focus.");
document.addEventListener("pointerlockchange", function() {
if(document.pointerLockElement) {
status_log.innerHTML = "Please leave the current tab.";
} else {
status_log.innerHTML = "Pointer lock exited!";
leaveTabTest.step(function() {
assert_true(document.pointerLockElement === null, "Pointer lock exited!");
});
leaveTabTest.done();
}
});
function lockTarget() {
target.requestPointerLock();
}
</script>
</body>
</html>

85
tests/wpt/web-platform-tests/pointerlock/pointerlock_leave_UA-manual.html Normal file
View file

@ -0,0 +1,85 @@
<!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 the user agent / window loses focus.</p>
<hr/>
<h2>Manual Test Steps:</h2>
<p>
<ol>
<li>Click the "lockTarget" button to request a pointer lock.</li>
<li>Focus to another window with keyboard (ALT-TAB).</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'),
status_log = document.querySelector('#status-log');
var leaveUATest = async_test("Test that pointer lock will be lost when the user agent / window loses focus.");
document.addEventListener("pointerlockchange", function() {
if(document.pointerLockElement) {
status_log.innerHTML = "Please leave the current window.";
} else {
status_log.innerHTML = "Pointer lock exited!";
leaveUATest.step(function() {
assert_true(document.pointerLockElement === null, "Pointer lock exited!");
});
leaveUATest.done();
}
});
function lockTarget() {
target.requestPointerLock();
}
</script>
</body>
</html>

87
tests/wpt/web-platform-tests/pointerlock/pointerlock_remove_target-manual.html Normal file
View file

@ -0,0 +1,87 @@
<!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>