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