| <!DOCTYPE html> |
| <script src='../../../../../resources/gesture-util.js'></script> |
| <style> |
| body, html { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| background-color: red; |
| } |
| ::-webkit-scrollbar { |
| width: 0; |
| height: 0; |
| } |
| #spacer { |
| height: 800%; |
| } |
| #bottombar { |
| position: fixed; |
| left: 0; |
| bottom: 0; |
| width: 50%; |
| height: 25%; |
| background-color: green; |
| border: 5px solid black; |
| box-sizing: border-box; |
| } |
| #topbar { |
| position: fixed; |
| left: 0; |
| top: 0; |
| width: 100%; |
| height: 50%; |
| background-color: darkred; |
| border: 5px solid black; |
| box-sizing: border-box; |
| } |
| #inflow { |
| position: absolute; |
| top: 150vh; |
| left: 0; |
| height: 25%; |
| width: 100%; |
| background-color: limegreen; |
| } |
| </style> |
| |
| <div id="inflow"></div> |
| <div id="spacer"></div> |
| <div id="bottombar"></div> |
| <div id="topbar"></div> |
| |
| <script> |
| window.onload = async () => { |
| if (!internals) |
| return; |
| |
| testRunner.waitUntilDone(); |
| internals.setPageScaleFactor(2); |
| |
| // Test that panning the visual viewport while zoomed in causes |
| // position-fixed elements to move. Scroll down 1.5 screen heights so that |
| // the visual viewport scrolls down for 0.5 and then the layout viewport |
| // for 1. |
| await waitForCompositorCommit(); |
| await smoothScroll(1800, 400, 300, GestureSourceType.TOUCHPAD_INPUT, "down", SPEED_INSTANT); |
| await waitForCompositorCommit(); |
| |
| testRunner.notifyDone(); |
| } |
| </script> |
