position-try-custom-property.html (1587B)
1 <!DOCTYPE html> 2 <title>Variable substitution in @position-try rules</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: 195px; 12 height: 70px; 13 background: yellow; 14 border-bottom: 1px solid black; 15 } 16 .spacer { 17 width: 1px; 18 height: 20px; 19 } 20 .anchor1 { 21 anchor-name: --a1; 22 margin-left: 45px; 23 width: 100px; 24 height: 30px; 25 background: blue; 26 } 27 .target { 28 position: absolute; 29 position-try-fallbacks: --fallback1; 30 width: 40px; 31 height: 15px; 32 margin: 5px; 33 background: orange; 34 --left: anchor(--a1 right); 35 --top: anchor(--a1 top); 36 } 37 .fallback1 { 38 position-try-fallbacks: --fallback1; 39 } 40 .fallback2 { 41 position-try-fallbacks: --fallback2; 42 } 43 @position-try --fallback1 { 44 /* Position to the right of the anchor. */ 45 left: var(--left); 46 top: var(--top); 47 } 48 /* Same as above, but using a shorthand. */ 49 @position-try --fallback2 { 50 inset: var(--top) 0px 0px var(--left); 51 } 52 </style> 53 <body onload="checkLayoutForAnchorPos('.target')"> 54 <div class="cb"> 55 <div class="spacer"></div> 56 <div class="anchor1"></div> 57 <div class="target fallback1" 58 data-offset-x=150 data-offset-y=25></div> 59 </div> 60 <div class="cb"> 61 <div class="spacer"></div> 62 <div class="anchor1"></div> 63 <div class="target fallback2" 64 data-offset-x=150 data-offset-y=25></div> 65 </div> 66 </body>