<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<script>
  var numScrolls;
  var pageHeight = 2000;
  var pageWidth = 2000;

  function reset()
  {
    window.scrollTo(0, 0);
    internals.setPageScaleFactor(2);
  }

  function testArrowKeys()
  {
    // Test up and down.
    window.eventSender.keyDown('downArrow');
    shouldBeGreaterThan('internals.visualViewportScrollY()', '0');

    numScrolls = Math.ceil((pageHeight - internals.visualViewportHeight()) / internals.visualViewportScrollY());

    for(var i = 0; i < numScrolls - 1; ++i) {
      window.eventSender.keyDown('downArrow');
    }

    shouldBe('internals.visualViewportScrollY()', 'pageHeight - internals.visualViewportHeight()');

    for(var i = 0; i < numScrolls; ++i) {
      window.eventSender.keyDown('upArrow');
    }

    shouldBe('internals.visualViewportScrollY()', '0');

    // Now test left and right.

    reset();
    window.eventSender.keyDown('rightArrow');
    numScrolls = Math.ceil((pageWidth - internals.visualViewportWidth()) / internals.visualViewportScrollX());

    for(var i = 0; i < numScrolls - 1; ++i) {
      window.eventSender.keyDown('rightArrow');
    }

    shouldBe('internals.visualViewportScrollX()', 'pageWidth - internals.visualViewportWidth()');

    for(var i = 0; i < numScrolls; ++i) {
      window.eventSender.keyDown('leftArrow');
    }

    shouldBe('internals.visualViewportScrollX()', '0');
  }

  function testHomeEnd()
  {
    window.eventSender.keyDown('end');
    shouldBe('window.scrollY', 'pageHeight - window.innerHeight');
    shouldBe('internals.visualViewportScrollY()', 'pageHeight - internals.visualViewportHeight()');
    window.eventSender.keyDown('home');
    shouldBe('window.scrollY', '0');
    shouldBe('internals.visualViewportScrollY()', '0');
  }

  function testPageUpDown()
  {
    window.eventSender.keyDown('pageDown');
    shouldBeGreaterThan('internals.visualViewportScrollY()', '0');

    numScrolls = Math.ceil((pageHeight - internals.visualViewportHeight()) / internals.visualViewportScrollY());

    for(var i = 0; i < numScrolls - 1; ++i) {
      window.eventSender.keyDown('pageDown');
    }

    shouldBe('internals.visualViewportScrollY()', 'pageHeight - internals.visualViewportHeight()');

    for(var i = 0; i < numScrolls; ++i) {
      window.eventSender.keyDown('pageUp');
    }

    shouldBe('internals.visualViewportScrollY()', '0');
  }

  function testSpacebar()
  {
    window.eventSender.keyDown(' ');
    shouldBeGreaterThan('internals.visualViewportScrollY()', '0');

    numScrolls = Math.ceil((pageHeight - internals.visualViewportHeight()) / internals.visualViewportScrollY());

    for(var i = 0; i < numScrolls - 1; ++i) {
      window.eventSender.keyDown(' ');
    }

    shouldBe('internals.visualViewportScrollY()', 'pageHeight - internals.visualViewportHeight()');

    for(var i = 0; i < numScrolls; ++i) {
      window.eventSender.keyDown(' ', 'shiftKey');
    }

    shouldBe('internals.visualViewportScrollY()', '0');
  }

  function runTest()
  {
    description(
        'Test that keyboard scrolling while the page is scaled scrolls ' +
        'both viewports. To test manually, pinch zoom into the page and ' +
        'use the arrow keys, page up/down, home/end to scroll the page. ' +
        'You should be able to reach the end of the page bounds (i.e. ' +
        'scroll to see the divs at the bounds.)');

    if (window.eventSender && window.internals) {
      reset();
      debug('Testing arrow keys:');
      testArrowKeys();

      reset();
      debug('');
      debug('Testing home and end keys:');
      testHomeEnd();

      reset();
      debug('');
      debug('Testing page up and page down keys:');
      testPageUpDown();

      reset();
      debug('');
      debug('Testing spacebar:');
      testSpacebar();
    }
  }

  addEventListener('load', runTest);
</script>
<style>
  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  div {
    width: 200px;
    height: 20px;
    background-color: red;
  }

  html{
    padding: 0px;
    margin: 0px;
    width: 2000px;
    height: 2000px;
  }

  .top {
    position: absolute;
    top: 0px;
    left: 300px;
  }

  .middle{
    position: absolute;
    top: 975px;
    left: 300px;
  }

  .bottom {
    position: absolute;
    top: 1980px;
    left: 300px;

  }

  .left {
    position: absolute;
    top: 275px;
    left: 0px;
  }

  .right {
    position: absolute;
    top: 275px;
    left: 1800px;
  }
</style>
<p id="description" style="width: 800px"></p>
<p id="console" style="width: 800px"></p>
<div class="top">Top of page</div>
<div class="bottom">Bottom of page</div>
<div class="left">Left of page</div>
<div class="right">Right of page</div>
<div class="middle">Middle of page</div>