anchor-scroll-update-009.html (1332B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Anchored element should update when anchor's div under `contain: layout size` becomes a scroll container.</title> 4 <link rel="author" href="mailto:dshin@mozilla.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> 6 <link rel="match" href="reference/anchor-scroll-update-009-ref.html"> 7 <style> 8 .abspos-cb { 9 position: relative; 10 width: 200px; 11 height: 200px; 12 border: 1px solid; 13 } 14 15 .positioned { 16 width: 15px; 17 height: 15px; 18 background: purple; 19 20 position: absolute; 21 position-anchor: --a; 22 left: anchor(right); 23 top: anchor(top); 24 } 25 26 .scroller { 27 overflow-y: scroll; 28 height: 100%; 29 } 30 31 .filler { 32 width: 1px; 33 height: 500px; 34 } 35 36 .anchor { 37 width: 15px; 38 height: 15px; 39 background: magenta; 40 anchor-name: --a; 41 } 42 43 .contain { 44 contain: layout size; 45 width: 200px; 46 height: 200px; 47 } 48 </style> 49 <div class=abspos-cb> 50 <div class=positioned></div> 51 <div class=contain><div id=dut> 52 <div class=filler></div> 53 <div class=anchor></div> 54 </div></div> 55 </div> 56 <script> 57 dut.classList.toggle('scroller'); 58 dut.scrollTop = 315; 59 60 function raf() { 61 return new Promise(resolve => requestAnimationFrame(resolve)); 62 } 63 64 async function runTest() { 65 await raf(); 66 await raf(); 67 document.documentElement.classList.remove('reftest-wait'); 68 } 69 runTest(); 70 </script>