<!DOCTYPE html>
<html>
<head>
    <script src="../../resources/js-test-pre.js"></script>
    <script>
        window.jsTestIsAsync = true;

        function initEventHandlers(element) {
            element.addEventListener('mousedown', handleEvent);
            element.addEventListener('mouseup', handleEvent);
            element.addEventListener('click', handleEvent);
        }

        window.events = [];
        function handleEvent(e) {
            window.events.push(e);
        }

        function finish() {
            shouldBe("events.length", "4");
            shouldBeEqualToString("events[0].type", "mousedown");
            shouldBeEqualToString("events[0].target.id", "scrollme");
            shouldBe("events[0].which", "1");
            shouldBeEqualToString("events[1].type", "mouseup");
            shouldBeEqualToString("events[1].target.id", "scrollme");
            shouldBe("events[1].which", "1");
            shouldBeEqualToString("events[2].type", "mousedown");
            shouldBeEqualToString("events[2].target.id", "scrollme");
            shouldBe("events[2].which", "2");
            shouldBeEqualToString("events[3].type", "mouseup");
            shouldBeEqualToString("events[3].target.id", "scrollme");
            shouldBe("events[3].which", "2");
            finishJSTest();
        }

        window.onload = function () {
            var d = document.querySelector('#scrollme');
            initEventHandlers(d);

            if (window.eventSender) {
                eventSender.mouseMoveTo(d.offsetLeft + d.offsetWidth - 4, d.offsetTop + 4);
                eventSender.mouseDown();
                eventSender.mouseUp();
                eventSender.mouseDown(1);
                eventSender.mouseUp(1);
                finish();
            } else
                debug('This test requires eventSender. Click the scrollbar to play manually.');
        };
    </script>
    <script src="../../resources/js-test-post.js"></script>
    <style>
        #scrollme {
            width: 100px;
            height: 100px;
            overflow: auto;
        }
        #scrollme p {
            height: 1000px;
        }
    </style>
</head>
<body>
    <div id="scrollme"><p>This is a scrollable div.</p></div>
    <pre id="console"></pre>
</body>
</html>