| <!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> |
