<!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;
    }

    #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>