position-try-001.html (3296B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> 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 .cb { 10 position: relative; 11 width: 190px; 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: --f1, --f2, --f3, --f4; 30 width: 40px; 31 height: 15px; 32 margin: 5px; 33 background: orange; 34 /* Position to the right of the anchor. */ 35 left: anchor(--a1 right); 36 top: anchor(--a1 top); 37 } 38 @position-try --f1 { 39 inset: auto; 40 /* Position to the left of the anchor. */ 41 right: anchor(--a1 left); 42 top: anchor(--a1 top); 43 } 44 @position-try --f2 { 45 inset: auto; 46 /* Position to the bottom of the anchor. */ 47 left: anchor(--a1 left); 48 top: anchor(--a1 bottom); 49 } 50 @position-try --f3 { 51 inset: auto; 52 /* Position to the top of the anchor. */ 53 left: anchor(--a1 left); 54 bottom: anchor(--a1 top); 55 } 56 @position-try --f4 { 57 inset: auto; 58 /* Position to the left with the narrower width. */ 59 left: anchor(--a1 right); 60 top: anchor(--a1 top); 61 width: 35px; 62 height: 40px; 63 } 64 </style> 65 <body onload="checkLayoutForAnchorPos('.target')"> 66 <!-- If the `cb` is wider, the base style fits. --> 67 <div class="cb" style="width: 195px"> 68 <div class="spacer"></div> 69 <div class="anchor1"></div> 70 <div class="target" 71 data-offset-x=150 data-offset-y=25 72 data-expected-width=40 data-expected-height=15></div> 73 </div> 74 <!-- If the `margin-left` is wider, the first `@position-try` fits. --> 75 <div class="cb"> 76 <div class="spacer"></div> 77 <div class="anchor1" style="margin-left: 50px"></div> 78 <div class="target" 79 data-offset-x=5 data-offset-y=25 80 data-expected-width=40 data-expected-height=15></div> 81 </div> 82 <!-- Without a spacer, the 2nd `@position-try` fits. --> 83 <div class="cb"> 84 <div class="anchor1"></div> 85 <div class="target" 86 data-offset-x=50 data-offset-y=35 87 data-expected-width=40 data-expected-height=15></div> 88 </div> 89 <!-- With two spacers, the 3rd `@position-try` fits. --> 90 <div class="cb"> 91 <div class="spacer"></div> 92 <div class="spacer"></div> 93 <div class="anchor1"></div> 94 <div class="target" 95 data-offset-x=50 data-offset-y=20 96 data-expected-width=40 data-expected-height=15></div> 97 </div> 98 <!-- With a spacer, the last `@position-try` fits. --> 99 <div class="cb"> 100 <div class="spacer"></div> 101 <div class="anchor1"></div> 102 <div class="target" 103 data-offset-x=150 data-offset-y=25 104 data-expected-width=35 data-expected-height=40></div> 105 </div> 106 <!-- If the `cb` is narrower, no rules fit. The base style is used. --> 107 <div class="cb" style="width: 185px"> 108 <div class="spacer"></div> 109 <div class="anchor1"></div> 110 <div class="target" 111 data-offset-x=150 data-offset-y=25 112 data-expected-width=40 data-expected-height=15></div> 113 </div> 114 </body>