anchor-scroll-composited-scrolling-005-crash.html (976B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <title>Tests that scrolling doesn't crash renderer with `overflow: hidden` scroller</title> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> 6 7 <style> 8 #scroller { 9 margin-top: 200px; 10 height: 200px; 11 overflow-y: hidden; 12 } 13 14 #anchor { 15 anchor-name: --a; 16 } 17 18 #spacer { 19 height: 400px; 20 } 21 22 #target { 23 position: fixed; 24 top: anchor(bottom); 25 left: anchor(left); 26 position-anchor: --a; 27 } 28 </style> 29 30 <div id="scroller"> 31 <div id="spacer"></div> 32 <div id="anchor">anchor</div> 33 </div> 34 <div id="target">target</div> 35 36 <script type="module"> 37 const raf = () => new Promise(resolve => requestAnimationFrame(resolve)); 38 39 scroller.scrollTop = 100; 40 41 await raf(); 42 await raf(); 43 44 scroller.scrollTop = 0; 45 46 // Force paint property update on target in the same frame 47 target.style.transform = 'scale(1)'; 48 49 document.documentElement.classList.remove('test-wait'); 50 </script> 51 </html>