scroll-event-order.html (3392B)
1 <!doctype html> 2 <title>Visual Viewport Scroll Event Order</title> 3 <meta charset=utf-8> 4 <link rel="help" href="https://wicg.github.io/visual-viewport/index.html"> 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="viewport_support.js"></script> 11 <style> 12 #target { 13 width: 100px; 14 height: 100px; 15 background-color: red; 16 position: absolute; 17 top: 300vh; 18 } 19 20 #scroller1,#scroller2 { 21 width: 200px; 22 height: 200px; 23 overflow: auto; 24 } 25 26 #spacer { 27 width: 80px; 28 height: 1000px; 29 background-image: linear-gradient(45deg, #808080 25%, transparent 25%), 30 linear-gradient(-45deg, #808080 25%, transparent 25%), 31 linear-gradient(45deg, transparent 75%, #808080 75%), 32 linear-gradient(-45deg, transparent 75%, #808080 75%); 33 background-size: 40px 40px; 34 background-position: 0 0, 0 20px, 20px -20px, -20px 0px; 35 } 36 </style> 37 38 <body> 39 <div id="target"></div> 40 <div id="scroller1"><div id="spacer"></div></div> 41 <div id="scroller2"><div id="spacer"></div></div> 42 </body> 43 44 <script> 45 46 async function oneRaf() { 47 return new Promise((resolve) => { 48 window.requestAnimationFrame(resolve); 49 }); 50 } 51 52 const scroller1 = document.getElementById('scroller1'); 53 const scroller2 = document.getElementById('scroller2'); 54 55 promise_test(async t => { 56 // Pinch-zoom in so that the scrollIntoView call below causes scrolling in 57 // both the layout and visual viewports within the same rAF. 58 await pinchZoomIn(); 59 assert_greater_than(window.visualViewport.scale, 1, 'Must have zoomed in'); 60 61 await oneRaf(); 62 63 const scroll_events = []; 64 65 // Register the scroll handlers on the window, visualViewport, and both 66 // <div> scrollers. 67 { 68 window.onscroll = () => { scroll_events.push('window-attribute'); } 69 window.addEventListener('scroll', () => { scroll_events.push('window-addEventListener'); }); 70 window.visualViewport.onscroll = () => { scroll_events.push('visualViewport-attribute'); } 71 window.visualViewport.addEventListener('scroll', () => { 72 scroll_events.push('visualViewport-addEventListener'); }); 73 scroller1.addEventListener('scroll', 74 () => { scroll_events.push('scroller1'); }); 75 scroller2.addEventListener('scroll', 76 () => { scroll_events.push('scroller2'); }); 77 } 78 79 // Cause scrolling in each scroller and scrollIntoView so that the layout 80 // and visual viewports both scroll. 81 scroller1.scrollTop = 200; 82 document.getElementById('target').scrollIntoView(); 83 scroller2.scrollTop = 200; 84 85 // Wait a rAF since scroll events are delievered as part of the event loop. 86 await oneRaf(); 87 88 // The scroll events must be delivered in the order they were executed, 89 // scroller1 first, then the viewport (window then visualViewport), then 90 // scroller2. 91 assert_equals(scroll_events.toString(), 92 'scroller1,' + 93 'window-attribute,window-addEventListener,' + 94 'visualViewport-attribute,visualViewport-addEventListener,' + 95 'scroller2'); 96 }, "Scroll event ordering"); 97 98 </script>