<!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");

    // 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();
        },
        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.setPointerLockWillFailSynchronously");
            testRunner.setPointerLockWillFailSynchronously();
            expectOnlyErrorEvent("Lock with synchronous failure.");
            targetDiv1.requestPointerLock();
        },
        function () {
            shouldBeDefined("testRunner.setPointerLockWillRespondAsynchronously");
            shouldBeDefined("testRunner.didAcquirePointerLock");
            shouldBeDefined("testRunner.didNotAcquirePointerLock");
            testRunner.setPointerLockWillRespondAsynchronously();
            expectOnlyErrorEvent("Lock with asynchronous failure.");
            targetDiv1.requestPointerLock();
            doNextStep();
        },
        function () {
            testRunner.didNotAcquirePointerLock();
        },
        function () {
            testRunner.setPointerLockWillRespondAsynchronously();
            expectOnlyChangeEvent("Lock with asynchronous success.");
            targetDiv1.requestPointerLock();
            doNextStep();
        },
        function () {
            testRunner.didAcquirePointerLock();
        },
    ];
    doNextStep();
</script>
</body>
</html>