<!DOCTYPE html>
<html>
<head>
<style>
#test_section {
width: 300px;
height: 300px;
overflow: auto;
border: 1px solid silver;
}
#test_section > article {
width: 1000px;
height: 1000px;
position: relative;
}
#top-left {
position: absolute;
top: 0;
left: 0;
}
#bottom-right {
position: absolute;
bottom: 0;
right: 0;
}
#test_input {
width: 300px;
font-size: 1em;
padding: 5px 10px 15px 20px;
border: 1px solid silver;
}
#test_input_search {
width: 300px;
font-size: 1em;
padding: 5px 10px 15px 20px;
border: 1px solid silver;
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<section id="test_section">
<article>
<span id="top-left">top left</span>
<span id="bottom-right">bottom right</span>
</article>
</section>
<section>
<input id="test_input" type="text" value="Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit">
<input id="test_input_search" type="search" value="Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit">
</section>
<p>
Tests that large scrollLeft/Top values scroll to maximum possible value, i.e, Element.scrollWidth/Height - Element.clientWidth/Height.
</p>
<script>
testScrollToMax('test_section');
testScrollToMax('test_input');
testScrollToMax('test_input_search');
function testScrollToMax(id) {
var el = document.getElementById(id);
expectedScrollLeft = el.scrollWidth - el.clientWidth;
expectedScrollTop = el.scrollHeight - el.clientHeight;
el.scrollLeft = 100000000;
el.scrollTop = 100000000;
if (el.scrollLeft == expectedScrollLeft) {
testPassed('Setting ' + el.id + '.scrollLeft = 100000000 ' +
'scrolls all the way to the right.');
} else {
testFailed('Setting ' + el.id + '.scrollLeft = 100000000 ' +
'scrolls to ' + el.scrollLeft + ', expected ' +
expectedScrollLeft + '.');
}
if (el.scrollTop == expectedScrollTop) {
testPassed('Setting ' + el.id + '.scrollTop = 100000000 ' +
'scrolls all the way to the bottom.');
} else {
testFailed('Setting ' + el.id + '.scrollTop = 100000000 ' +
'scrolls to ' + el.scrollTop + ', expected ' +
expectedScrollTop + '.');
}
}
</script>
</body>
</html>