third_party/WebKit/LayoutTests/fast/scrolling/editor-command-scroll-page-scale.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/js-test.js"></script>
   3 <script>
   4   var numScrolls;
   5   var pageHeight = 2000;
   6   var pageWidth = 2000;
   7
   8   function reset()
   9   {
  10     window.scrollTo(0, 0);
  11     internals.setPageScaleFactor(2);
  12   }
  13
  14   // Test Document scroll seperately so we ensure it scrolls all the way in one
  15   // shot.
  16   function testDocumentScroll() {
  17     internals.executeCommand(document, 'ScrollToEndOfDocument', '');
  18     shouldBe('window.scrollY', 'pageHeight - window.innerHeight');
  19     shouldBe('window.scrollX', '0');
  20
  21     internals.executeCommand(document, 'ScrollToBeginningOfDocument', '');
  22     shouldBe('window.scrollY', '0');
  23     shouldBe('window.scrollX', '0');
  24   }
  25
  26   function testScroll(forwardCmd, backwardCmd) {
  27     internals.executeCommand(document, forwardCmd, '');
  28
  29     if (window.scrollY === 0) {
  30         debug('FAIL: Command ' + forwardCmd + ' failed to scroll page at all.');
  31         return;
  32     }
  33
  34     numScrolls = Math.ceil((pageHeight - window.innerHeight) / window.scrollY);
  35
  36     for(var i = 0; i < numScrolls - 1; ++i) {
  37       internals.executeCommand(document, forwardCmd, '');
  38     }
  39
  40     shouldBe('window.scrollY', 'pageHeight - window.innerHeight');
  41     shouldBe('window.scrollX', '0');
  42
  43     for(var i = 0; i < numScrolls; ++i) {
  44       internals.executeCommand(document, backwardCmd, '');
  45     }
  46
  47     shouldBe('window.scrollY', '0');
  48     shouldBe('window.scrollX', '0');
  49   }
  50
  51   function runTest()
  52   {
  53     description(
  54         'Test that scrolling editor commands while pinch-zoomed scrolls ' +
  55         'both viewports. To test manually, pinch zoom into the page and ' +
  56         'use the arrow keys, page up/down, home/end to scroll the page. ' +
  57         'You should be able to reach the end of the page bounds (i.e. ' +
  58         'scroll to see the divs at the bounds.)');
  59
  60     if (window.internals) {
  61       reset();
  62       debug('');
  63       debug('Testing Document Scrolling:');
  64       testDocumentScroll();
  65
  66       reset();
  67       debug('');
  68       debug('Testing Page Scrolling:');
  69       testScroll('ScrollPageForward', 'ScrollPageBackward');
  70
  71       reset();
  72       debug('');
  73       debug('Testing Line Scrolling:');
  74       testScroll('ScrollLineDown', 'ScrollLineUp');
  75     }
  76   }
  77
  78   addEventListener('load', runTest);
  79 </script>
  80 <style>
  81   ::-webkit-scrollbar {
  82     width: 0px;
  83     height: 0px;
  84   }
  85
  86   div {
  87     width: 200px;
  88     height: 20px;
  89     background-color: red;
  90   }
  91
  92   html{
  93     padding: 0px;
  94     margin: 0px;
  95     width: 2000px;
  96     height: 2000px;
  97   }
  98
  99   .top {
 100     position: absolute;
 101     top: 0px;
 102     left: 300px;
 103   }
 104
 105   .middle{
 106     position: absolute;
 107     top: 975px;
 108     left: 300px;
 109   }
 110
 111   .bottom {
 112     position: absolute;
 113     top: 1980px;
 114     left: 300px;
 115
 116   }
 117
 118   .left {
 119     position: absolute;
 120     top: 275px;
 121     left: 0px;
 122   }
 123
 124   .right {
 125     position: absolute;
 126     top: 275px;
 127     left: 1800px;
 128   }
 129 </style>
 130 <p id="description" style="width: 800px"></p>
 131 <p id="console" style="width: 800px"></p>
 132 <div class="top">Top of page</div>
 133 <div class="bottom">Bottom of page</div>
 134 <div class="left">Left of page</div>
 135 <div class="right">Right of page</div>
 136 <div class="middle">Middle of page</div>