third_party/WebKit/LayoutTests/fast/scrolling/keyboard-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   function testArrowKeys()
  15   {
  16     // Test up and down.
  17     window.eventSender.keyDown('downArrow');
  18     shouldBeGreaterThan('window.scrollY', '0');
  19
  20     numScrolls = Math.ceil((pageHeight - window.innerHeight) / window.scrollY);
  21
  22     for(var i = 0; i < numScrolls - 1; ++i) {
  23       window.eventSender.keyDown('downArrow');
  24     }
  25
  26     shouldBe('window.scrollY', 'pageHeight - window.innerHeight');
  27
  28     for(var i = 0; i < numScrolls; ++i) {
  29       window.eventSender.keyDown('upArrow');
  30     }
  31
  32     shouldBe('window.scrollY', '0');
  33
  34     // Now test left and right.
  35
  36     reset();
  37     window.eventSender.keyDown('rightArrow');
  38     numScrolls = Math.ceil((pageWidth - window.innerWidth) / window.scrollX);
  39
  40     for(var i = 0; i < numScrolls - 1; ++i) {
  41       window.eventSender.keyDown('rightArrow');
  42     }
  43
  44     shouldBe('window.scrollX', 'pageWidth - window.innerWidth');
  45
  46     for(var i = 0; i < numScrolls; ++i) {
  47       window.eventSender.keyDown('leftArrow');
  48     }
  49
  50     shouldBe('window.scrollX', '0');
  51   }
  52
  53   function testHomeEnd()
  54   {
  55     window.eventSender.keyDown('end');
  56     shouldBe('window.scrollY', 'pageHeight - window.innerHeight');
  57     window.eventSender.keyDown('home');
  58     shouldBe('window.scrollY', '0');
  59   }
  60
  61   function testPageUpDown()
  62   {
  63     window.eventSender.keyDown('pageDown');
  64     shouldBeGreaterThan('window.scrollY', '0');
  65
  66     numScrolls = Math.ceil((pageHeight - window.innerHeight) / window.scrollY);
  67
  68     for(var i = 0; i < numScrolls - 1; ++i) {
  69       window.eventSender.keyDown('pageDown');
  70     }
  71
  72     shouldBe('window.scrollY', 'pageHeight - window.innerHeight');
  73
  74     for(var i = 0; i < numScrolls; ++i) {
  75       window.eventSender.keyDown('pageUp');
  76     }
  77
  78     shouldBe('window.scrollY', '0');
  79   }
  80
  81   function testSpacebar()
  82   {
  83     window.eventSender.keyDown(' ');
  84     shouldBeGreaterThan('window.scrollY', '0');
  85
  86     numScrolls = Math.ceil((pageHeight - window.innerHeight) / window.scrollY);
  87
  88     for(var i = 0; i < numScrolls - 1; ++i) {
  89       window.eventSender.keyDown(' ');
  90     }
  91
  92     shouldBe('window.scrollY', 'pageHeight - window.innerHeight');
  93
  94     for(var i = 0; i < numScrolls; ++i) {
  95       window.eventSender.keyDown(' ', 'shiftKey');
  96     }
  97
  98     shouldBe('window.scrollY', '0');
  99   }
 100
 101   function runTest()
 102   {
 103     description(
 104         'Test that keyboard scrolling while the page is scaled scrolls ' +
 105         'both viewports. To test manually, pinch zoom into the page and ' +
 106         'use the arrow keys, page up/down, home/end to scroll the page. ' +
 107         'You should be able to reach the end of the page bounds (i.e. ' +
 108         'scroll to see the divs at the bounds.)');
 109
 110     if (window.eventSender && window.internals) {
 111       reset();
 112       debug('Testing arrow keys:');
 113       testArrowKeys();
 114
 115       reset();
 116       debug('');
 117       debug('Testing home and end keys:');
 118       testHomeEnd();
 119
 120       reset();
 121       debug('');
 122       debug('Testing page up and page down keys:');
 123       testPageUpDown();
 124
 125       reset();
 126       debug('');
 127       debug('Testing spacebar:');
 128       testSpacebar();
 129     }
 130   }
 131
 132   addEventListener('load', runTest);
 133 </script>
 134 <style>
 135   ::-webkit-scrollbar {
 136     width: 0px;
 137     height: 0px;
 138   }
 139
 140   div {
 141     width: 200px;
 142     height: 20px;
 143     background-color: red;
 144   }
 145
 146   html{
 147     padding: 0px;
 148     margin: 0px;
 149     width: 2000px;
 150     height: 2000px;
 151   }
 152
 153   .top {
 154     position: absolute;
 155     top: 0px;
 156     left: 300px;
 157   }
 158
 159   .middle{
 160     position: absolute;
 161     top: 975px;
 162     left: 300px;
 163   }
 164
 165   .bottom {
 166     position: absolute;
 167     top: 1980px;
 168     left: 300px;
 169
 170   }
 171
 172   .left {
 173     position: absolute;
 174     top: 275px;
 175     left: 0px;
 176   }
 177
 178   .right {
 179     position: absolute;
 180     top: 275px;
 181     left: 1800px;
 182   }
 183 </style>
 184 <p id="description" style="width: 800px"></p>
 185 <p id="console" style="width: 800px"></p>
 186 <div class="top">Top of page</div>
 187 <div class="bottom">Bottom of page</div>
 188 <div class="left">Left of page</div>
 189 <div class="right">Right of page</div>
 190 <div class="middle">Middle of page</div>