scrollend-event-fires-on-visual-viewport.html (2258B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/visual-viewport/viewport_support.js"></script> 11 <script src="/dom/events/scrolling/scroll_support.js"></script> 12 </head> 13 <body> 14 <style> 15 .large { 16 height: 200vh; 17 width: 200vw; 18 border: solid 1px black; 19 } 20 </style> 21 <div class="large"></div> 22 <script> 23 window.onload = async () => { 24 async function pan_viewport_test(add_event_listener_func) { 25 const preScrollVisualViewportOffsetTop = visualViewport.offsetTop; 26 const preScrollWindowScrollOffset = window.scrollY; 27 28 const scrollend_promise = add_event_listener_func(); 29 30 const scrollAmount = 50; 31 await touchScrollInTarget(scrollAmount, document.documentElement, "up"); 32 await scrollend_promise; 33 34 assert_less_than(visualViewport.offsetTop, 35 preScrollVisualViewportOffsetTop, 36 `visualViewport should be scrolled.`); 37 assert_equals(window.scrollY, preScrollWindowScrollOffset, 38 "the window should not scroll."); 39 // No need to undo scroll; subsequent test has room to scroll further. 40 } 41 42 await waitForCompositorCommit(); 43 await pinchZoomIn(); 44 assert_greater_than(visualViewport.scale, 1, "page should be zoomed in."); 45 46 promise_test(async (t) => { 47 await pan_viewport_test(() => { 48 return new Promise((resolve) => { 49 visualViewport.addEventListener("scrollend", resolve, { once: true}); 50 }); 51 }); 52 }, "scrollend listener added via addEventlistener fires when the visual " + 53 "viewport is panned."); 54 55 promise_test(async (t) => { 56 await pan_viewport_test((t) => { 57 return new Promise((resolve) => { 58 visualViewport.onscrollend = () => { 59 visualViewport.onscrollend = undefined; 60 resolve(); 61 } 62 }); 63 }); 64 }, "visualviewport.onscrollend fires when the visual viewport is panned."); 65 } 66 </script> 67 </body> 68 </html>