<!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>