checkerboard-on-subscroller.html (915B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush"> 3 <style> 4 #outer { 5 position: absolute; 6 overflow: scroll; 7 width: 50vw; 8 height: 90vh; 9 border: 1px solid black; 10 scrollbar-width: none; 11 } 12 #inner { 13 overflow-y: hidden; 14 width: 100%; 15 } 16 .spacer { 17 width: 60vw; 18 height: 5000px; 19 background-color: blue; 20 } 21 </style> 22 <div id="outer"> 23 <div id="inner"> 24 <div class="spacer"></div> 25 </div> 26 </div> 27 <script> 28 document.addEventListener('MozReftestInvalidate', async () => { 29 outer.style.width = "90vw"; 30 await new Promise(resolve => requestAnimationFrame(resolve)); 31 await new Promise(resolve => requestAnimationFrame(resolve)); 32 33 const scrollEndPromise = new Promise(resolve => outer.addEventListener("scrollend", resolve)); 34 outer.scrollBy({ top: 5000, behavior: "smooth" }); 35 await scrollEndPromise; 36 37 document.documentElement.classList.remove('reftest-wait'); 38 }, false); 39 </script> 40 </html>