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