resnap-on-oveflow-hidden-container.html (1999B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1946375"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #scroller { 9 display: flex; 10 overflow-x: hidden; 11 scroll-snap-align: start; 12 scroll-snap-type: x mandatory; 13 width: 500px; 14 height: 200px; 15 position: absolute; 16 } 17 .child { 18 display: flex; 19 flex: 0 0 500px; 20 scroll-snap-align: start; 21 width: 500px; 22 height: 100%; 23 align-items: center; 24 justify-content: center; 25 font-size: 30px; 26 } 27 </style> 28 <div id="scroller"> 29 <div class="child" style="background-color: blue;">1</div> 30 <div class="child" style="background-color: green;">2</div> 31 <div class="child" style="background-color: yellow;">3</div> 32 </div> 33 <script> 34 promise_test(async () => { 35 assert_equals(scroller.scrollLeft, 0, "The initial scroll position"); 36 37 const scrollPromise = new Promise(resolve => { 38 scroller.addEventListener("scroll", resolve); 39 }); 40 // Do an async scroll operation to the second child. 41 scroller.scrollTo({ left: 500, behavior: "smooth" }); 42 43 // Wait a scroll event. 44 await scrollPromise; 45 46 // Assuming that the current scroll position is not yet the scroll 47 // destination, i.e. during the async scroll is runnig try to do 48 // a new async scroll operation to the third child. 49 const scrollendPromise = new Promise(resolve => { 50 scroller.addEventListener("scrollend", resolve); 51 }); 52 scroller.scrollTo({ left: 1000, behavior: "smooth" }); 53 await scrollendPromise; 54 55 assert_equals(scroller.scrollLeft, 1000, 56 "Now the scroll position should be 1000px"); 57 58 // Change a child element width so that re-snapping will happen. 59 document.querySelectorAll(".child")[0].style.width = "501px"; 60 61 assert_equals(scroller.scrollLeft, 1000, "The scroll position should stay"); 62 }); 63 </script>