third_party/WebKit/LayoutTests/fast/scrolling/scroll-max-value.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             #test_section {
   6                 width: 300px;
   7                 height: 300px;
   8                 overflow: auto;
   9                 border: 1px solid silver;
  10             }
  11             #test_section > article {
  12                 width: 1000px;
  13                 height: 1000px;
  14                 position: relative;
  15             }
  16             #top-left {
  17                 position: absolute;
  18                 top: 0;
  19                 left: 0;
  20             }
  21             #bottom-right {
  22                 position: absolute;
  23                 bottom: 0;
  24                 right: 0;
  25             }
  26             #test_input {
  27               width: 300px;
  28               font-size: 1em;
  29               padding: 5px 10px 15px 20px;
  30               border: 1px solid silver;
  31             }
  32             #test_input_search {
  33               width: 300px;
  34               font-size: 1em;
  35               padding: 5px 10px 15px 20px;
  36               border: 1px solid silver;
  37             }
  38         </style>
  39         <script src="../../resources/js-test.js"></script>
  40     </head>
  41     <body>
  42         <section id="test_section">
  43             <article>
  44                 <span id="top-left">top left</span>
  45                 <span id="bottom-right">bottom right</span>
  46             </article>
  47         </section>
  48         <section>
  49           <input id="test_input" type="text" value="Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit">
  50           <input id="test_input_search" type="search" value="Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit">
  51         </section>
  52         <p>
  53             Tests that large scrollLeft/Top values scroll to maximum possible value, i.e, Element.scrollWidth/Height - Element.clientWidth/Height.
  54         </p>
  55         <script>
  56
  57           testScrollToMax('test_section');
  58           testScrollToMax('test_input');
  59           testScrollToMax('test_input_search');
  60
  61           function testScrollToMax(id) {
  62             var el = document.getElementById(id);
  63             expectedScrollLeft = el.scrollWidth - el.clientWidth;
  64             expectedScrollTop = el.scrollHeight - el.clientHeight;
  65
  66             el.scrollLeft = 100000000;
  67             el.scrollTop = 100000000;
  68
  69             if (el.scrollLeft == expectedScrollLeft) {
  70                 testPassed('Setting ' + el.id + '.scrollLeft = 100000000 ' +
  71                     'scrolls all the way to the right.');
  72             } else {
  73                 testFailed('Setting ' + el.id + '.scrollLeft = 100000000 ' +
  74                    'scrolls to ' + el.scrollLeft + ', expected ' +
  75                     expectedScrollLeft + '.');
  76             }
  77
  78             if (el.scrollTop == expectedScrollTop) {
  79                 testPassed('Setting ' + el.id + '.scrollTop = 100000000 ' +
  80                     'scrolls all the way to the bottom.');
  81             } else {
  82                 testFailed('Setting ' + el.id + '.scrollTop = 100000000 ' +
  83                     'scrolls to ' + el.scrollTop + ', expected ' +
  84                      expectedScrollTop + '.');
  85             }
  86           }
  87         </script>
  88     </body>
  89 </html>