editor-command-scroll-page-scale.html

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

  if (testRunner)
    testRunner.waitUntilDone();

  const document_test = async_test("Document scrolling commands scroll visual viewport");
  const page_test = async_test("Page scrolling commands scroll visual viewport");
  const line_test = async_test("Line scrolling commands scroll visual viewport");

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

  // Test Document scroll separately so we ensure it scrolls all the way in one
  // shot.
  function testDocumentScroll(test) {
    test.step( () => {
      internals.executeCommand(document, 'ScrollToEndOfDocument', '');
      assert_equals(window.scrollY, pageHeight - window.innerHeight);
      assert_equals(window.visualViewport.pageTop, pageHeight - window.visualViewport.height);
      assert_equals(window.scrollX, 0);

      internals.executeCommand(document, 'ScrollToBeginningOfDocument', '');
      assert_equals(window.scrollY, 0);
      assert_equals(window.visualViewport.pageTop, 0);
      assert_equals(window.scrollX, 0);
      test.done();
    });
  }

  function testScroll(test, forwardCmd, backwardCmd) {
    test.step( () => {
      internals.executeCommand(document, forwardCmd, '');

      assert_greater_than(window.visualViewport.pageTop,
                          0,
                          'Command ' + forwardCmd + ' failed to scroll page at all.');

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

      for(let i = 0; i < numScrolls - 1; ++i) {
        internals.executeCommand(document, forwardCmd, '');
      }

      assert_equals(window.visualViewport.pageTop, pageHeight - window.visualViewport.height);
      assert_equals(window.visualViewport.pageLeft, 0);

      for(let i = 0; i < numScrolls; ++i) {
        internals.executeCommand(document, backwardCmd, '');
      }

      assert_equals(window.visualViewport.pageTop, 0);
      assert_equals(window.visualViewport.pageLeft, 0);
      test.done();
    });
  }

  async function runTest()
  {
    if (window.internals) {
      await waitForCompositorCommit();

      internals.settings.setScrollAnimatorEnabled(false);
      reset();
      testDocumentScroll(document_test);

      reset();
      testScroll(page_test, 'ScrollPageForward', 'ScrollPageBackward');

      reset();
      testScroll(line_test, 'ScrollLineDown', 'ScrollLineUp');
    }
  }

  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 scrolling editor commands while pinch-zoomed 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/editor-command-scroll-page-scale.html
