anchor-position-dynamic-005.html (930B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 3 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 4 <style> 5 #cb { 6 position: relative; 7 width: 100px; 8 height: 100px; 9 overflow: clip; 10 } 11 #anchor { 12 position: absolute; 13 inset: 0; 14 background: green; 15 width: 100px; 16 height: 100px; 17 anchor-name: --a; 18 } 19 #bug { 20 position: absolute; 21 width: 100px; 22 height: 100px; 23 background: red; 24 left: anchor(right); 25 top: anchor(top); 26 position-anchor: --a; 27 } 28 #target { 29 position: absolute; 30 top: anchor(top); 31 } 32 </style> 33 <p>Test passes if there is a filled green square.</p> 34 <div id="cb"> 35 <div id="anchor"></div> 36 <div> 37 <div id=bug></div> 38 </div> 39 <div id=target></div> 40 </div> 41 <script> 42 document.body.offsetTop; 43 document.getElementById('target').style.top = 'calc(anchor(top) + 10px)'; 44 </script>