keyboard-scroll-page-scale.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
  let numScrolls;
  const pageHeight = 2000;
  const pageWidth = 2000;

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

  function testArrowKeys()
  {
    test(() => {
      // Test up and down.
      eventSender.keyDown('ArrowDown');
      assert_greater_than(window.visualViewport.pageTop,
                          0,
                          "Arrow down scrolls visual viewport");

      numScrolls = Math.ceil((pageHeight - window.visualViewport.height) / window.visualViewport.pageTop);

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

      assert_equals(window.visualViewport.pageTop,
                    pageHeight - window.visualViewport.height,
                    "Visual viewport should have fully scrolled to the page bottom");

      for(let i = 0; i < numScrolls; ++i) {
        eventSender.keyDown('ArrowUp');
      }

      assert_equals(window.visualViewport.pageTop,
                    0,
                    "Visual viewport should have fully scrolled to the page top");

      // Now test left and right.

      reset();
      eventSender.keyDown('ArrowRight');
      numScrolls = Math.ceil((pageWidth - window.visualViewport.width) / window.visualViewport.pageLeft);

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

      assert_equals(window.visualViewport.pageLeft,
                    pageWidth - window.visualViewport.width,
                    "Visual viewport should have fully scrolled to page right");

      for(let i = 0; i < numScrolls; ++i) {
        eventSender.keyDown('ArrowLeft');
      }

      assert_equals(window.visualViewport.pageLeft,
                    0,
                    "Visual viewport should have fully scrolled to page left");
    }, "Arrow key scrolling affects visual viewport");
  }

  function testHomeEnd()
  {
    test( () => {
      eventSender.keyDown('End');
      assert_equals(window.scrollY,
                    pageHeight - window.innerHeight,
                    "Layout viewport scrolled fully to page bottom");
      assert_equals(window.visualViewport.pageTop,
                    pageHeight - window.visualViewport.height,
                    "Visual viewport scrolled fully to page bottom");
      eventSender.keyDown('Home');
      assert_equals(window.scrollY,
                    0,
                    "Layout viewport scrolled fully to page top");
      assert_equals(window.visualViewport.pageTop,
                    0,
                    "Visual viewport scrolled fully to page top");
    }, "Home and End keys affect visual viewport");
  }

  function testPageUpDown()
  {
    test( () => {
      eventSender.keyDown('PageDown');
      assert_greater_than(window.visualViewport.pageTop,
                          0,
                          "Page down scrolled visual viewport");

      numScrolls = Math.ceil((pageHeight - window.visualViewport.height) / window.visualViewport.pageTop);

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

      assert_equals(window.visualViewport.pageTop,
                    pageHeight - window.visualViewport.height,
                    "Visual viewport scrolled fully to page bottom");

      for(let i = 0; i < numScrolls; ++i) {
        eventSender.keyDown('PageUp');
      }

      assert_equals(window.visualViewport.pageTop,
                    0,
                    "Visual viewport scrolled fully to page top");
    }, "Page up and down keys affect visual viewport");
  }

  function testSpacebar()
  {
    test( () => {
      eventSender.keyDown(' ');
      assert_greater_than(window.visualViewport.pageTop,
                          0,
                          "Space bar caused visual viewport to scroll");

      numScrolls = Math.ceil((pageHeight - window.visualViewport.height) / window.visualViewport.pageTop);

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

      assert_equals(window.visualViewport.pageTop,
                    pageHeight - window.visualViewport.height,
                    "Visual viewport scrolled fully to page bottom");

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

      assert_equals(window.visualViewport.pageTop,
                    0,
                    "Visual viewport scrolled fully to page top");
    });
  }

  function runTest()
  {
    if (window.eventSender && window.internals) {
      internals.settings.setScrollAnimatorEnabled(false);
      reset();
      testArrowKeys();

      reset();
      testHomeEnd();

      reset();
      testPageUpDown();

      reset();
      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">
  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.
</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>
chromium/third_party/blink/web_tests/fast/scrolling/keyboard-scroll-page-scale.html
