<!DOCTYPE HTML>
<html>
<head>
<script src="../resources/js-test.js"></script>
<script src="../http/tests/resources/pointer-lock/pointer-lock-test-harness.js"></script>
</head>
<body>
<div>
<div id="target1"></div>
<div id="target2"></div>
<iframe id="iframe1"></iframe>
<iframe id="iframe2"></iframe>
</div>
<script>
description("Test expected pointerlockchange and pointerlockerror events.")
window.jsTestIsAsync = true;
targetDiv1 = document.getElementById("target1");
targetDiv2 = document.getElementById("target2");
targetIframe1 = document.getElementById("iframe1");
targetIframe2 = document.getElementById("iframe2");
let error_code;
// Events must not bubble from document.
function errorIfEventsBubble() {
testFailed("Events must not bubble to the window.");
finishJSTest();
}
window.addEventListener("pointerlockchange", errorIfEventsBubble);
window.addEventListener("pointerlockerror", errorIfEventsBubble);
todo = [
function () {
expectNoEvents("Unlock.");
document.exitPointerLock();
doNextStepWithUserGesture();
},
function () {
expectOnlyChangeEvent("Lock targetDiv1.");
targetDiv1.requestPointerLock();
},
function () {
expectOnlyChangeEvent("Unlock again.");
document.exitPointerLock();
},
function () {
expectOnlyChangeEvent("Lock targetDiv1 again.");
targetDiv1.requestPointerLock();
},
function () {
expectOnlyChangeEvent("Lock targetDiv2.");
targetDiv2.requestPointerLock();
},
function () {
expectOnlyChangeEvent("Lock targetDiv2 again.");
targetDiv2.requestPointerLock();
},
function () {
expectOnlyChangeEvent("Unlock targetDiv2.");
document.exitPointerLock();
},
function () {
targetIframe1.src = "about:blank";
targetIframe1.onload = function () { doNextStep(); }
},
function () {
targetIframe2.src = "about:blank";
targetIframe2.onload = function () { doNextStep(); }
},
function () {
expectNoEvents("Lock targetIframe1.");
expectOnlyChangeEvent("Lock targetIframe1 (handler for iframe1).", targetIframe1.contentDocument);
targetIframe1.contentDocument.body.requestPointerLock();
},
function () {
expectNoEvents("Lock targetIframe2.");
expectNoEvents("Lock targetIframe2 (handler for iframe1).", targetIframe1.contentDocument);
expectOnlyErrorEvent("Lock targetIframe2 (handler for iframe2).", targetIframe2.contentDocument);
targetIframe2.contentDocument.body.requestPointerLock().catch(error => {
error_code = error.code;
shouldBe("error_code", "4", "Should reject with a WrongDocumentError");
});
},
function () {
expectNoEvents("Unlock targetIframe2.");
expectOnlyChangeEvent("Unlock targetIframe2 (handler for iframe1).", targetIframe1.contentDocument);
expectNoEvents("Unlock targetIframe2 (handler for iframe2).", targetIframe2.contentDocument);
targetIframe1.contentDocument.exitPointerLock();
},
function () {
shouldBeDefined("testRunner.setPointerLockWillFail");
testRunner.setPointerLockWillFail();
expectOnlyErrorEvent("Lock with synchronous failure.");
targetDiv1.requestPointerLock().catch(error => {
// This is a forced error the type of error returned here is not important.
});
},
function () {
shouldBeDefined("testRunner.setPointerLockWillRespondAsynchronously");
shouldBeDefined("testRunner.dropPointerLock");
shouldBeDefined("testRunner.allowPointerLock");
testRunner.setPointerLockWillRespondAsynchronously();
expectOnlyErrorEvent("Lock with asynchronous failure.");
targetDiv1.requestPointerLock().catch(error => {
error_code = error.code;
shouldBe("error_code", "0", "Should reject with a forced error");
});
doNextStep();
},
function () {
testRunner.dropPointerLock();
},
function () {
testRunner.setPointerLockWillRespondAsynchronously();
expectOnlyChangeEvent("Lock with asynchronous success.");
targetDiv1.requestPointerLock();
doNextStep();
},
function () {
testRunner.allowPointerLock();
},
];
doNextStep();
</script>
</body>
</html>