| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="../resources/gesture-util.js"></script> |
| <style> |
| body, html { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| } |
| |
| #rootscroller::-webkit-scrollbar { |
| width: 0px; |
| height: 0px; |
| } |
| |
| #rootscroller { |
| width: 100%; |
| height: 100%; |
| overflow: auto; |
| position: absolute; |
| left: 0; |
| top: 0; |
| background-color: red; |
| } |
| |
| .spacer { |
| width: 100%; |
| height: 100%; |
| } |
| |
| #fixed { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 80%; |
| background-color: grey; |
| } |
| |
| #scroller { |
| margin-left: 10%; |
| width: 80%; |
| height: 200px; |
| overflow: auto; |
| } |
| </style> |
| |
| <div id="rootscroller"> |
| <div class="spacer" style="background-color: PaleGreen"></div> |
| <div class="spacer" style="background-color: Maroon"></div> |
| </div> |
| |
| <div id="fixed"> |
| <p> |
| To test, try scrolling down from the green scroller below. The root |
| scroller shouldn't be scrolled (you shouldn't see red appear). |
| </p> |
| <p> |
| Try again while zoomed in, you should still be able to pan around |
| (scrolling the visual viewport), but you should still not be able to scroll |
| the red region into view. |
| </p> |
| <div id="scroller"> |
| <div class="spacer" style="background-color: PaleGreen"></div> |
| <div class="spacer" style="background-color: PaleGreen"></div> |
| </div> |
| </div> |
| |
| <script> |
| if (window.internals) { |
| internals.settings.setScrollAnimatorEnabled(false); |
| internals.runtimeFlags.implicitRootScrollerEnabled = true; |
| } |
| |
| const rootscroller = document.querySelector('#rootscroller'); |
| const scroller = document.querySelector('#scroller'); |
| |
| async function runTest() { |
| scroller.scrollTop = 10000; |
| internals.setVisualViewportOffset(0, 0); |
| rootscroller.scrollTop = 0; |
| |
| await waitForCompositorCommit(); |
| |
| assert_equals(window.internals.effectiveRootScroller(document), |
| rootscroller, |
| "#rootscroller must be the effective root scroller"); |
| |
| const delta = 3000; |
| |
| // Note: this relies on the fact there is no visual viewport offset. |
| const location = { |
| x: scroller.getBoundingClientRect().left * visualViewport.scale, |
| y: scroller.getBoundingClientRect().top * visualViewport.scale |
| }; |
| await smoothScroll(delta, |
| location.x, |
| location.y, |
| GestureSourceType.TOUCH_INPUT, |
| 'down', |
| SPEED_INSTANT); |
| |
| assert_equals(rootscroller.scrollTop, |
| 0, |
| "RootScroller must not be scrolled"); |
| |
| } |
| |
| window.onload = async () => { |
| if (!window.internals) |
| return; |
| |
| promise_test( async t => { |
| window.internals.setPageScaleFactor(1); |
| await runTest(); |
| }, "Scrolling from fixed scroller while unzoomed."); |
| |
| promise_test( async t => { |
| window.internals.setPageScaleFactor(2); |
| await runTest(); |
| assert_greater_than(visualViewport.offsetTop, |
| 0, |
| "Visual viewport must be scrolled"); |
| }, "Scrolling from fixed scroller while zoomed."); |
| } |
| </script> |
