<html>
    <head>
        <script>
            var box1Sum = 0;
            var box2Sum = 0;

            function test()
            {
                if (window.testRunner) {
                    testRunner.dumpAsText();
                    var d1 = document.getElementById('d1');
                    var d2 = document.getElementById('d2');
                    eventSender.dragMode = false;
                    var left = d1.offsetLeft + 10;
                    var top = d1.offsetTop + 10;
                    eventSender.mouseMoveTo(left, top);
                    eventSender.mouseDown();
                    left = d2.offsetLeft - 10;
                    eventSender.mouseMoveTo(left, top);
                    left += 20;
                    eventSender.mouseMoveTo(left, top);
                    eventSender.mouseMoveTo(left++, top);
                    eventSender.mouseMoveTo(left++, top);
                    eventSender.mouseMoveTo(left++, top);
                    eventSender.mouseMoveTo(left++, top);
                    eventSender.mouseMoveTo(left++, top);
                    eventSender.mouseMoveTo(left++, top);
                    eventSender.mouseUp();

                    // We do not count mouse moves since Mac records a move for the mouseUp event and Windows does not
                    // See <rdar://problem/5674087> mouseUp events send onmousemove events on Mac but not on Windows.
                    if ((box1Sum == 2) && (box2Sum > 2))
                        document.getElementById('console').appendChild(document.createTextNode('Test Succeeded!\n'));
                    else
                        document.getElementById('console').appendChild(document.createTextNode('Test Failed!\n'));
                }
            }

            function record(box)
            {
                if (box == 1)
                    box1Sum++;
                else if (box == 2)
                    box2Sum++;
            }
        </script>
    </head>
    <body onload="test()">
    This tests that we continue to get mouse events after dragging past a scrollbar.<br>
    <div id="d1" style="height:120px; width:120px; overflow: auto; display: inline-block; background-color: red;" onmousemove="record(1)">Start a drag in this square, and drag past the scrollbar to the green square.  Start a drag in this square, and drag past the scrollbar to the green square.  </div>
    <div id="d2" style="height:120px; width:120px; display: inline-block; background-color: green;" onmousemove="record(2)"></div><br><br>
    <pre id="console"></pre>
    </body>
</html>
