position-try-position-anchor.html (1114B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: @position-try can set position-anchor</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> 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 #cb { 10 position: relative; 11 width: 400px; 12 height: 400px; 13 } 14 .anchor { 15 width: 100px; 16 height: 100px; 17 } 18 #anchor-a { 19 anchor-name: --a; 20 /* Makes #anchored overflow when aligned with right edge */ 21 margin-left: 100px; 22 } 23 #anchor-b { 24 anchor-name: --b; 25 } 26 #anchored { 27 position: absolute; 28 left: anchor(right); 29 width: 300px; 30 height: 100px; 31 position-anchor: --a; 32 position-try-fallbacks: --pf; 33 } 34 @position-try --pf { 35 position-anchor: --b; 36 } 37 </style> 38 <body onload="checkLayoutForAnchorPos('#anchored')"> 39 <div id="cb"> 40 <div id="anchor-a" class="anchor"></div> 41 <div id="anchor-b" class="anchor"></div> 42 <div id="anchored" data-offset-x="100"></div> 43 </div>