scrollsnapchange-scrolling-non-snapping-axis.tentative.html (2665B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> CSS Scroll Snap 2 Test: scrollsnapchange events</title> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/css/css-scroll-snap/snap-events/resources/common.js"></script> 12 <script src="/dom/events/scrolling/scroll_support.js"></script> 13 <script src="/css/css-scroll-snap/support/common.js"></script> 14 </head> 15 <body> 16 <style> 17 .scroller { 18 overflow: scroll; 19 width: 200px; 20 height: 200px; 21 border: solid 1px black; 22 scroll-snap-type: y mandatory; 23 position: absolute; 24 resize: both; 25 } 26 .snaparea { 27 scroll-snap-align: start; 28 height: 50px; 29 width: 50px; 30 color: white; 31 margin-top: 100px; 32 background-color: purple; 33 } 34 .space { 35 height: 300vh; 36 width: 300vw; 37 position: absolute; 38 } 39 </style> 40 <div class="scroller" id="scroller"> 41 <div class="space"></div> 42 <div class="snaparea"> Area2</div> 43 <div class="snaparea"> Area1</div> 44 </div> 45 46 <script> 47 promise_test(async (t) => { 48 await waitForCompositorCommit(); 49 50 scroller.focus(); 51 52 const scrollsnapchange_promise = waitForSnapEvent(scroller, "scrollsnapchange"); 53 await test_driver.send_keys(scroller, KEY_CODE_MAP["ArrowRight"]); 54 const snap_event = await scrollsnapchange_promise; 55 56 assert_equals(snap_event, null, "no scrollsnapchange event fired as " + 57 "scroller doesn't snap in the x axis"); 58 }, "keyboard scroll on non-snapping axis doesn't trigger scrollsnapchange"); 59 60 promise_test(async (t) => { 61 await waitForScrollReset(t, scroller); 62 await waitForCompositorCommit(); 63 scroller.focus(); 64 65 const scrollsnapchange_promise = waitForSnapEvent(scroller, "scrollsnapchange"); 66 const wheel_scroll_amount = 25; 67 new test_driver.Actions().scroll(0, 0, 68 wheel_scroll_amount, 69 0, 70 { origin: scroller }).send(); 71 const snap_event = await scrollsnapchange_promise; 72 assert_equals(snap_event, null, "no scrollsnapchange event fired as " + 73 "scroller doesn't snap in the x axis"); 74 }, "wheel scroll on non-snapping axis doesn't trigger scrollsnapchange"); 75 </script> 76 </body> 77 </html>