anchor-scroll-composited-scrolling-006.html (1221B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Tests anchor-positioned element paint order in composited scrolling</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll"> 5 <link rel="author" href="mailto:xiaochengh@chromium.org"> 6 <link rel="match" href="reference/anchor-scroll-composited-scrolling-006-ref.html"> 7 <style> 8 body { 9 margin: 0; 10 } 11 #scroller { 12 width: 200px; 13 height: 100px; 14 overflow: scroll; 15 will-change: scroll-position; 16 } 17 #spacer { 18 height: 400px; 19 } 20 #anchor { 21 width: 100px; 22 height: 100px; 23 anchor-name: --a; 24 } 25 #target { 26 position: absolute; 27 width: 100px; 28 height: 100px; 29 background: red; 30 left: 0; 31 bottom: anchor(top); 32 position-anchor: --a; 33 } 34 #overlap { 35 position: absolute; 36 width: 100px; 37 height: 100px; 38 top: 150px; 39 left: 0; 40 z-index: 100; 41 background: green; 42 } 43 </style> 44 45 <div id="overlap"></div> 46 <div id="scroller"> 47 <div id="spacer"></div> 48 <div id="anchor"></div> 49 </div> 50 <div id="target"></div> 51 52 <script type="module"> 53 function raf() { return new Promise(resolve => requestAnimationFrame(resolve)); } 54 55 await raf(); 56 await raf(); 57 scroller.scrollTop = 150; 58 59 document.documentElement.classList.remove('reftest-wait'); 60 </script> 61 </html>