anchor-position-dynamic-001.html (1537B)
1 <!DOCTYPE html> 2 <title>Tests `anchor` function when anchor positions are changed dynamically</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 4 <link rel="author" href="mailto:kojii@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/check-layout-th.js"></script> 8 <script src="support/test-common.js"></script> 9 <style> 10 #container { 11 position: relative; 12 } 13 #a1 { 14 anchor-name: --a1; 15 background: orange; 16 margin-left: 100px; 17 margin-top: 100px; 18 width: 50px; 19 height: 50px; 20 } 21 .after #a1 { 22 width: 100px; 23 height: 100px; 24 } 25 #a2 { 26 anchor-name: --a2; 27 background: purple; 28 margin-left: 250px; 29 margin-top: 350px; 30 width: 100px; 31 height: 100px; 32 } 33 .after #a2 { 34 margin-left: 500px; 35 margin-top: 100px; 36 } 37 #target { 38 background: green; 39 position: absolute; 40 left: anchor(--a1 right); 41 top: anchor(--a1 bottom); 42 right: anchor(--a2 left); 43 bottom: anchor(--a2 top); 44 } 45 #ref { 46 background: red; 47 position: absolute; 48 left: 200px; 49 top: 100px; 50 width: 300px; 51 height: 100px; 52 } 53 </style> 54 <body> 55 <div id="container"> 56 <div id="a1"></div> 57 <div id="a2"></div> 58 <div id="ref"></div> 59 <div id="target" 60 data-offset-x=200 data-offset-y=100 61 data-expected-width=300 data-expected-height=100></div> 62 </div> 63 <script type="module"> 64 document.body.offsetTop; // Force layout. 65 container.classList.add('after'); 66 await checkLayoutForAnchorPos('#target'); 67 </script> 68 </body>