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