<!doctype html>
<html>
    <head>
        <title>Mouse Events with button depressed</title>
        <meta name="timeout" content="long">
        <meta name="viewport" content="width=device-width">
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
        <script src="/resources/testdriver.js"></script>
        <script src="/resources/testdriver-actions.js"></script>
        <script src="/resources/testdriver-vendor.js"></script>
        <style>
            div.box {
                border: 2px solid lightgray;
                margin: 25px;
                padding: 25px;
                float: left;
            }
            #lightyellow {
                background-color: lightyellow;
            }
            #lightblue {
                background-color: lightblue;
            }
            #lightgreen {
                background-color: lightgreen;
            }
        </style>
    </head>
    <body onload="run()">
        <h2>Mouse Events</h2>
        <h4>Test Description: This test checks if mouse events set button property correctly
            <ol>
                <li>Put your mouse over the green rectangle</li>
                <li>Press a non-primary button and hold it</li>
                <li>Drag mouse to blue rectangle</li>
                <li>Release mouse button</li>
            </ol>
        </h4>
        <div class="box" id="lightyellow">
            <div class="box" id="lightgreen"></div>
            <div class="box" id="lightblue"></div>
        </div>
        <script>
            var test = async_test("mouse events fired without button state");
            var button = -1;
            var actions_promise;

            function run() {
                var lightgreen = document.getElementById("lightgreen");
                var lightyellow = document.getElementById("lightyellow");
                var lightblue = document.getElementById("lightblue");

                on_event(lightgreen, "contextmenu", function (event) {
                    event.preventDefault();
                });

                on_event(lightgreen, "mousedown", function (event) {
                    test.step(function() {assert_equals(button, -1, "There must only be one mouse down event.");});
                    test.step(function() {assert_not_equals(event.button, 0, "Must not be primary button.");});
                    button = event.button;
                });
                on_event(lightyellow, "click", function (event) {
                    test.step(function() {assert_equals(event.button, button, "Button must be the same as mousedown.");});
                });
                on_event(lightyellow, "mousemove", function (event) {
                    if (button != -1) {
                        test.step(function() {assert_equals(event.button, 0, "Button must be un-initialized for mousemove.");});
                    }
                });
                on_event(lightgreen, "mouseleave", function (event) {
                    if (button != -1) {
                        test.step(function() {assert_equals(event.button, 0, "Button must be un-initialized for mouseleave.");});
                    }
                });
                on_event(lightblue, "mouseenter", function (event) {
                    if (button != -1) {
                        test.step(function() {assert_equals(event.button, 0, "Button must be un-initialized for mouseenter.");});
                    }
                });
                on_event(lightblue, "mouseup", function (event) {
                    if (button != -1) {
                        test.step(function() {assert_equals(event.button, button, "Button must be the same as mousedown.");});
                        // Make sure the test finishes after all the input actions are completed.
                        actions_promise.then( () => {
                            test.done();
                        });
                    }
                });

                // Inject mouse inputs.
                var actions = new test_driver.Actions();
                actions_promise = actions.pointerMove(0, 0, {origin: lightgreen})
                    .pointerDown({button: actions.ButtonType.MIDDLE})
                    .pointerMove(0, 0, {origin: lightyellow})
                    .pointerMove(0, 0, {origin: lightblue})
                    .pointerUp({button: actions.ButtonType.MIDDLE})
                    .send();
            }
        </script>
    </body>
</html>
