anchor-position-dynamic-002.html (1644B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 3 <link rel="author" href="mailto:kojii@chromium.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/check-layout-th.js"></script> 7 <script src="support/test-common.js"></script> 8 <style> 9 #container { 10 position: relative; 11 } 12 #anchor1 { 13 anchor-name: --a1; 14 } 15 #anchor2 { 16 anchor-name: --a2; 17 } 18 #anchor1, #anchor2 { 19 width: 5px; 20 height: 7px; 21 background: orange; 22 } 23 .after #anchor1, .after #anchor2 { 24 width: 10px; 25 } 26 .target { 27 position: absolute; 28 } 29 </style> 30 <body> 31 <div id="container"> 32 <!-- When the anchor is in the same containing block. --> 33 <div id="anchor1"></div> 34 <div class="target" style="left: anchor(--a1 right)" data-offset-x=5></div> 35 <div class="target" style="width: anchor-size(--a1 width)" data-expected-width=5></div> 36 37 <!-- When the anchor is in a different containing block. --> 38 <div> 39 <div id="anchor2"></div> 40 </div> 41 <div class="target" style="left: anchor(--a2 right)" data-offset-x=5></div> 42 <div class="target" style="width: anchor-size(--a2 width)" data-expected-width=5></div> 43 </div> 44 <script type="module"> 45 await checkLayoutForAnchorPos('.target', false); 46 container.classList.add('after'); 47 for (const element of document.getElementsByClassName('target')) { 48 if (element.dataset.offsetX === '5') 49 element.dataset.offsetX = '10'; 50 if (element.dataset.expectedWidth === '5') 51 element.dataset.expectedWidth = '10'; 52 } 53 await checkLayoutForAnchorPos('.after .target', true); 54 </script> 55 </body>