<!DOCTYPE html>
<html>
<body>
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<meta name='flags' content='interact'>
<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>