<html>
    <head>
        <script>
            function log(msg)
            {
                var res = document.getElementById('res');
                res.innerHTML = res.innerHTML + msg + "<br>";
            }
            function test()
            {
                var slider = document.getElementById('slider');
                if (window.testRunner) {
                    testRunner.dumpAsText();
                    eventSender.mouseMoveTo(slider.offsetLeft + 7, slider.offsetTop + 7);
                    eventSender.mouseDown();
                    log(slider.value)
                    eventSender.mouseMoveTo(slider.offsetLeft + 50, slider.offsetTop + 50);
                    eventSender.mouseUp();
                    log(slider.value)

                    // Try to click outside the slider thumb and drag.
                    eventSender.mouseMoveTo(slider.offsetLeft + 10, slider.offsetTop + 10);
                    eventSender.mouseDown();
                    log(slider.value)
                    eventSender.mouseMoveTo(slider.offsetLeft + 30, slider.offsetTop + 30);
                    eventSender.mouseUp();
                    log(slider.value)
                }
            }
        </script>
    </head>
    <body onload="test()">
        This tests that slider controls get mousedown, mousemove, input, and mouseup events and properly set its value.<br>
        <input type="range" id="slider" onmousedown="log('mousedown')" onmouseup="log('mouseup')" onmousemove="log('mousemove')" oninput="log('input')" value=0 step=5>
        <div id="res"></div>
    </body>
</html>