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