snapevents-at-document-bubble-to-window.html (3037B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title> CSS Scroll Snap 2 Test: scrollsnapchange event on the document bubbles</title> 7 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/css-scroll-snap/snap-events/resources/common.js"></script> 11 <script src="/dom/events/scrolling/scroll_support.js"></script> 12 </head> 13 14 <body> 15 <style> 16 :root { 17 margin: 0; 18 padding: 0; 19 scroll-snap-type: y mandatory; 20 } 21 22 div { 23 position: absolute; 24 margin: 0px; 25 } 26 27 #spacer { 28 width: 200vw; 29 height: 200vh; 30 } 31 32 .snap_point { 33 width: 40vw; 34 height: 40vh; 35 scroll-snap-align: start; 36 } 37 38 #snap_point_1 { 39 left: 0px; 40 top: 0px; 41 background-color: red; 42 } 43 44 #snap_point_2 { 45 top: 40vh; 46 left: 40vw; 47 background-color: orange; 48 } 49 50 #snap_point_3 { 51 left: 80vw; 52 top: 80vh; 53 background-color: blue; 54 } 55 </style> 56 <div id="spacer"></div> 57 <div id="snap_point_1" class="snap_point"></div> 58 <div id="snap_point_2" class="snap_point"></div> 59 <div id="snap_point_3" class="snap_point"></div> 60 61 <script> 62 63 promise_test(async(t) => { 64 await waitForCompositorCommit(); 65 66 let scrollsnapchanging_promise = waitForSnapEvent(window, "scrollsnapchanging"); 67 let scrollsnapchange_promise = waitForSnapEvent(window, "scrollsnapchange"); 68 document.scrollingElement.scrollTo(0, snap_point_2.offsetTop); 69 let scrollsnapchanging_evt = await scrollsnapchanging_promise; 70 let scrollsnapchange_evt = await scrollsnapchange_promise; 71 72 assertSnapEvent(scrollsnapchanging_evt, { inline: null, block: snap_point_2 }); 73 assertSnapEvent(scrollsnapchange_evt, { inline: null, block: snap_point_2 }); 74 }, "scrollsnapchange bubbles when fired at the document (addEventListener)."); 75 76 promise_test(async(t) => { 77 await waitForScrollReset(t, document.scrollingElement); 78 await waitForCompositorCommit(); 79 80 let scrollsnapchanging_promise = waitForSnapEvent(window, "scrollsnapchanging", 81 /*scroll_happens=*/true, 82 /*use_onsnap_member=*/true); 83 let scrollsnapchange_promise = waitForSnapEvent(window, "scrollsnapchange", 84 /*scroll_happens=*/true, 85 /*use_onsnap_member=*/true); 86 document.scrollingElement.scrollTo(0, snap_point_2.offsetTop); 87 let scrollsnapchanging_evt = await scrollsnapchanging_promise; 88 let scrollsnapchange_evt = await scrollsnapchange_promise; 89 90 assertSnapEvent(scrollsnapchanging_evt, { inline: null, block: snap_point_2 }); 91 assertSnapEvent(scrollsnapchange_evt, { inline: null, block: snap_point_2 }); 92 }, "scrollsnapchange bubbles when fired at the document (onscrollsnapchange)."); 93 </script> 94 </body> 95 96 </html>