<!DOCTYPE html>
<html>
<body>
<p>Clicking on the right side of slider should cause the thumb to move.</p>
<input id="slider" type="range" style="height: 10px; margin: 0" min="1" max="3">
<div id="results"></div>
<script>
// Force a layout so the slider starts with the default width.
document.body.offsetLeft;

if (window.testRunner) {
    testRunner.dumpAsText();
}

window.onload = function() {
    document.getElementById("slider").style.width = "100%";
    changeAndCheckRangeValue();
};

function changeAndCheckRangeValue()
{
    if (!window.testRunner)
        return;

    // Click on the right side of the slider.  This should cause the thumb
    // to move to the right side.
    var slider = document.getElementById("slider");
    var x = slider.offsetLeft + (slider.clientWidth * .75);
    var y = slider.offsetTop + (slider.clientHeight / 2);
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseUp();

    document.getElementById("results").innerText = (slider.value == 3) ? "PASSED" : "FAILED";
}

</script>
</body>
</html>