anchor-scroll-update-010.html (1634B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Anchored element should update when the nearest scroll container under `contain: layout size` element changes.</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-010-ref.html"> 7 <style> 8 .anchor { 9 width: 20px; 10 height: 20px; 11 background: magenta; 12 } 13 14 .positioned { 15 position-anchor: --a; 16 position: absolute; 17 background: purple; 18 width: 20px; 19 height: 20px; 20 /* Initially not part of --a's nearest scroll container */ 21 left: anchor(--b right); 22 top: anchor(--b top); 23 } 24 25 .abs-cb { 26 position: relative; 27 width: 200px; 28 height: 200px; 29 border: 1px solid; 30 } 31 32 .scroll { 33 overflow: scroll; 34 } 35 36 .outer { 37 width: 200px; 38 height: 200px; 39 } 40 41 .inner { 42 width: 150px; 43 height: 150px; 44 } 45 46 .filler { 47 width: 1px; 48 height: 200px; 49 } 50 51 .contain { 52 contain: layout size; 53 width: 200px; 54 height: 200px; 55 } 56 </style> 57 <div class=abs-cb> 58 <div class=contain> 59 <div id=outer class="scroll outer"> 60 <div class=filler></div> 61 <div class=anchor style="anchor-name: --b"></div> 62 <div id=inner class="scroll inner"> 63 <div class=anchor style="anchor-name: --a"></div> 64 </div> 65 </div> 66 </div> 67 <div class=positioned></div> 68 </div> 69 <script> 70 inner.classList.toggle('scroll'); 71 outer.scrollTop = 100; 72 73 function raf() { 74 return new Promise(resolve => requestAnimationFrame(resolve)); 75 } 76 77 async function runTest() { 78 await raf(); 79 await raf(); 80 document.documentElement.classList.remove('reftest-wait'); 81 } 82 runTest(); 83 </script> 84 </html>