interrupt-hidden-smooth-scroll.html (1931B)
1 <!DOCTYPE html> 2 <title>Smooth scrolling of overflow: hidden should be interruptible</title> 3 <link rel="help" href="https://drafts.csswg.org/cssom-view/#concept-smooth-scroll"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/dom/events/scrolling/scroll_support.js"></script> 7 <style> 8 #scroller { 9 overflow-y: hidden; 10 width: 100px; 11 height: 100px; 12 scroll-behavior: smooth; 13 } 14 .green { 15 width: 100px; 16 height: 100px; 17 background: green; 18 } 19 .red { 20 width: 100px; 21 height: 100px; 22 background: red; 23 } 24 </style> 25 <div id="scroller"> 26 <div class="green"></div> 27 <div class="red"></div> 28 <div class="green"></div> 29 </div> 30 <script> 31 promise_test(async () => { 32 await waitForCompositorReady(); 33 }, 'Make sure the page is ready for animation.'); 34 35 let interrupted = false; 36 promise_test(() => { 37 return new Promise(function(resolve, reject) { 38 scroller.onscrollend = (event) => { 39 try { 40 if (interrupted) { 41 assert_equals(scroller.scrollTop, 1, 42 'Scroll should end at 1 when interrupted'); 43 } else { 44 // If the testing environment doesn't support smooth scrolling, this 45 // test will not interrupt the scroll, and we can simply assert that 46 // the scroll ended at 200. 47 assert_equals(scroller.scrollTop, 200, 48 'Scroll should end at 200 if not interrupted'); 49 } 50 resolve(); 51 } catch(e) { 52 reject(e); 53 } 54 }; 55 scroller.onscroll = (event) => { 56 if (scroller.scrollTop > 1 && scroller.scrollTop < 200) { 57 // Interrupt the smooth scroll. 58 scroller.scrollTop = 1; 59 interrupted = true; 60 } 61 }; 62 scroller.scrollTop = 200; 63 }); 64 }, 'scrollTop should be updated after a mid-scroll scrollTop change'); 65 </script>