resnap-on-reconstructing-frame.html (1668B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> 3 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1948861"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #scroller { 8 scroll-snap-type: y mandatory; 9 width: 500px; 10 height: 200px; 11 overflow-y: scroll; 12 overflow-x: hidden; 13 scrollbar-width: none; 14 } 15 .child { 16 scroll-snap-align: start; 17 width: 500px; 18 height: 100%; 19 } 20 video { 21 height: 100%; 22 } 23 </style> 24 <div id="container"> 25 <div id="scroller"> 26 <div class="child"> 27 <video src="dummy.webm" controls autoplay> 28 </div> 29 <div class="child"> 30 <video src="dummy.webm" controls autoplay> 31 </div> 32 <div class="child"> 33 <video src="dummy.webm" controls autoplay> 34 </div> 35 </div> 36 </div> 37 <script> 38 promise_test(async () => { 39 // Ensure this document has been already loaded. 40 if (document.readyState != "complete") { 41 await new Promise(resolve => window.addEventListener("load", resolve)); 42 } 43 44 assert_equals(scroller.scrollTop, 0); 45 46 const scrollendPromise = new Promise(resolve => { 47 scroller.addEventListener("scrollend", resolve); 48 }); 49 // Try to scroll downward, it will snap to the second green box. 50 scroller.scrollBy({ top: 100, behavior: "smooth" }); 51 await scrollendPromise; 52 53 // Change the parent position style so that the scroll container will 54 // be reconstructed. 55 container.style.position = "fixed"; 56 57 assert_equals(scroller.scrollTop, 200, "Should stay at the last snap point"); 58 }, "Stay at the last snap point even after reconstrucing the scroll container"); 59 </script>