click-range-slider.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Test that click events are fired for a slider when the range of values is dense enough that the thumb element is repositioned under the cursor on mouse press.</p>

<!-- See bug 84674 -->
<input id="slider" type="range" min="0" max="100" value="50"></input>
<pre id="console"></pre>
<script src="../../resources/js-test.js"></script>
<script>
var clickCount = 0;
var slider;

function onClick(e)
{
    clickCount++;
}

window.onload = function()
{
    if (!window.testRunner)
        return;

    slider = document.getElementById("slider");
    slider.addEventListener("click", onClick);

    // Click respositions the slider thumb element under the cursor.
    // Ensure that the click event still fires.
    var x = slider.offsetLeft + 1;
    var y = slider.offsetTop + slider.clientHeight / 2;

    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseUp();

    eventSender.mouseMoveTo(x + slider.clientWidth - 2, y);
    eventSender.mouseDown();
    eventSender.mouseUp();

    eventSender.mouseMoveTo(x + slider.clientWidth / 2, y);
    eventSender.mouseDown();
    eventSender.mouseUp();

    shouldBe("clickCount", "3");
}
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/events/click-range-slider.html
