<!DOCTYPE HTML>
<html>
<head>
<script src="../http/tests/resources/js-test-pre.js"></script>
<script src="../http/tests/resources/pointer-lock/pointer-lock-test-harness.js"></script>
<script src="../resources/ui-helper.js"></script>
</head>
<body id="body">
<div>
  <div id="target1"></div>
  <div id="target2"></div>
</div>
<script>
    description("Test mouse events are routed to lock target.")
    window.jsTestIsAsync = true;

    targetdiv1 = document.getElementById("target1");
    targetdiv2 = document.getElementById("target2");

    // Expect change event only for all transitions below.
    expectedTargetToBeLockedString = "";
    document.onpointerlockchange = function ()
        {
            testPassed("document.onpointerlockchange event received.");
            shouldBe("document.pointerLockElement", expectedTargetToBeLockedString);
            doNextStep();
        };
    document.onpointerlockerror =
        function () { testFailed("document.onpointerlockerror event received."); finishJSTest(); };

    function eventNotExpected(e) {
        testFailed("Unexpected event " + e.type + " on " + e.currentTarget.id);
        finishJSTest();
    }
    function eventExpected(e) {
      testPassed("event type: " + e.type + ", target: " + e.target.id + ", received on: " + e.currentTarget.id);
    }
    function eventExpectedThenNextStep(e) {
      testPassed("event type: " + e.type + ", target: " + e.target.id + ", received on: " + e.currentTarget.id);
      doNextStep();
    }
    function eventDeltaExpected(e) {
      testPassed("event type: " + e.type + ", movementX: " + e.movementX + ", movementY: " + e.movementY + ", target: " + e.target.id + ", received on: " + e.currentTarget.id);
    }
    function eventDeltaExpectedThenNextStep(e) {
      testPassed("event type: " + e.type + ", movementX: " + e.movementX + ", movementY: " + e.movementY + ", target: " + e.target.id + ", received on: " + e.currentTarget.id);
      doNextStep();
    }

    todo = [
        function () {
            targetdiv1.requestPointerLock();
            expectedTargetToBeLockedString = "targetdiv1";
            // doNextStep() called by onpointerlockchange handler.
        },
        function () {
            debug("     With a lock in place send a wheel event.")
            targetdiv1.onwheel = eventExpectedThenNextStep;
            targetdiv2.onwheel = eventNotExpected;
            document.body.onwheel = eventExpected;
            setTimeout(async () => {
                await UIHelper.ensurePresentationUpdate();
                if (window.eventSender) {
                    window.eventSender.mouseMoveTo(20,20);
                    window.eventSender.leapForward(1000);
                    window.eventSender.mouseScrollBy(0,10);
                }
            }, 0);
        },
        function () {
            debug("     With a lock in place move the mouse.")
            targetdiv1.onmousemove = eventDeltaExpectedThenNextStep;
            targetdiv2.onmousemove = eventNotExpected;
            document.body.onmousemove = eventDeltaExpected;
            if (window.eventSender) {
                window.eventSender.mouseMoveTo(45,50);
            }
        },
        function () {
            debug("     With a lock in place send a click.")
            targetdiv1.onmousemove = null;
            targetdiv2.onmousemove = null;
            document.body.onmousemove = null;

            targetdiv1.onmousedown = eventExpected;
            targetdiv2.onmousedown = eventNotExpected;
            document.body.onmousedown = eventExpected;
            if (window.eventSender) {
                window.eventSender.leapForward(1000);
                window.eventSender.mouseDown();
                window.eventSender.mouseUp();
            }
            doNextStepWithUserGesture();
        },
        function () {
            debug("     With a lock in place send a right click.")
            targetdiv1.oncontextmenu = eventNotExpected;
            targetdiv2.oncontextmenu = eventExpected;
            document.body.oncontextmenu = eventNotExpected;
            if (window.eventSender)
                window.eventSender.contextClick();
            doNextStepWithUserGesture();
        },
        function () {
            targetdiv2.requestPointerLock();
            expectedTargetToBeLockedString = "targetdiv2";
            // doNextStep() called by onpointerlockchange handler.
        },
        function () {
            debug("     With a lock in place send a wheel event.")
            targetdiv1.onwheel = eventNotExpected;
            targetdiv2.onwheel = eventExpectedThenNextStep;
            document.body.onwheel = eventExpected;
            if (window.eventSender) {
                window.eventSender.leapForward(1000);
                window.eventSender.mouseScrollBy(0,10);
            }
        },
        function () {
            debug("     With a lock in place send a click.")
            targetdiv1.onmousedown = eventNotExpected;
            targetdiv2.onmousedown = eventExpected;
            document.body.onmousedown = eventExpected;
            if (window.eventSender) {
                window.eventSender.leapForward(1000);
                window.eventSender.mouseDown();
                window.eventSender.mouseUp();
            }
            doNextStepWithUserGesture();
        },
        function () {
            debug("     Ensure double clicks work as expected, sending 4 clicks.")
            targetdiv1.onmousedown = undefined;
            document.body.onmousedown = undefined;
            targetdiv2.onmousedown = eventExpected;
            targetdiv2.onmouseup = eventExpected;
            targetdiv2.onclick = eventExpected;
            targetdiv2.ondblclick = eventExpected;
            debug("     Creating a click and dblclick.");
            if (window.eventSender) {
                window.eventSender.leapForward(1000);
                window.eventSender.mouseDown();
                window.eventSender.mouseUp();
                window.eventSender.mouseDown();
                window.eventSender.mouseUp();
            }
            debug("     Ensuring no false dblclicks if we continue.");
            if (window.eventSender) {
                window.eventSender.mouseDown();
                window.eventSender.mouseUp();
                window.eventSender.mouseDown();
                window.eventSender.mouseUp();
            }
            doNextStepWithUserGesture();
        },
    ];
    doNextStepWithUserGesture();
</script>
<script src="../http/tests/resources/js-test-post.js"></script>
</body>
</html>