range-snap-to-datalist.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<p id="description">Tests if clicking close to a tick mark snaps to it. Result will change depending on the return value of LayoutTheme::sliderTickSnappingThreshold().</p>
<div id="console"></div>
<input id="input" type=range min=0 max=1000 step=1 list=target style="width: 100px">
<datalist id="target">
    <option>500</option>
</datalist>
<script>
var input = document.getElementById("input");
function clickSlider(offsetLeft) {
    var centerY = input.offsetTop + input.offsetHeight / 2;
    eventSender.mouseMoveTo(input.offsetLeft + offsetLeft, centerY);
    eventSender.mouseDown();
    eventSender.mouseUp();
}
function resetSliderPosition() {
    clickSlider(0);
    if (input.value !== "0") {
    	testFailed('Failed to reset slider position');
    }
}
function test(position) {
	resetSliderPosition();
	clickSlider(position);
	var value = parseInt(input.value, 10);
	if (value < 500) {
		debug('value for ' + position + ' is &lt;500');
	} else if (value > 500) {
		debug('value for ' + position + ' is &gt;500');
	} else {
		debug('value for ' + position + ' is =500');
	}
}

for (var i = 40; i <= 60; ++i) {
	test(i);
}
</script>

</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/datalist/range-snap-to-datalist.html
