position-try-order-basic.html (6206B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: Basic position-try-order behavior</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-order-property"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #cb { 8 position: absolute; 9 width: 400px; 10 height: 400px; 11 border: 1px solid black; 12 } 13 #anchor { 14 position: absolute; 15 left: 150px; 16 top: 200px; 17 width: 150px; 18 height: 150px; 19 background-color: coral; 20 anchor-name: --a; 21 } 22 #target, #ref { 23 position: absolute; 24 left: 450px; /* force fallback */ 25 width: 40px; 26 height: 40px; 27 background-color: skyblue; 28 position-anchor: --a; 29 } 30 #ref { 31 background-color: seagreen; 32 } 33 34 /* 35 36 The IMCB for --right is the whole area to the right of the anchor, and similarly 37 for --left, etc. 38 39 ┌──────────────┐ 40 │ xxxx│ 41 │ xxxx│ 42 │ ┌────┐xxxx│ 43 │ │ │xxxx│ 44 │ └────┘xxxx│ 45 │ xxxx│ 46 │ xxxx│ 47 └──────────────┘ 48 49 **/ 50 51 @position-try --right { 52 inset: unset; 53 left: anchor(right); 54 } 55 @position-try --left { 56 inset: unset; 57 right: anchor(left); 58 } 59 @position-try --top { 60 inset: unset; 61 bottom: anchor(top); 62 } 63 @position-try --bottom { 64 inset: unset; 65 top: anchor(bottom); 66 } 67 68 /* 69 70 The IMCB for --right-sweep is the area that would be "swept" by the anchor if it 71 moved right, and similarly for --left-sweep, etc. 72 73 ┌──────────────┐ 74 │ │ 75 │ │ 76 │ ┌────┐xxxx│ 77 │ │ │xxxx│ 78 │ └────┘xxxx│ 79 │ │ 80 │ │ 81 └──────────────┘ 82 83 */ 84 85 @position-try --right-sweep { 86 inset: unset; 87 top: anchor(top); 88 bottom: anchor(bottom); 89 left: anchor(right); 90 align-self: center; 91 } 92 93 @position-try --left-sweep { 94 inset: unset; 95 top: anchor(top); 96 bottom: anchor(bottom); 97 right: anchor(left); 98 align-self: center; 99 } 100 101 @position-try --bottom-sweep { 102 left: anchor(left); 103 right: anchor(right); 104 top: anchor(bottom); 105 justify-self: center; 106 } 107 108 @position-try --top-sweep { 109 left: anchor(left); 110 right: anchor(right); 111 bottom: anchor(top); 112 justify-self: center; 113 } 114 115 </style> 116 <style id=style> 117 </style> 118 <div id=cb> 119 <div id=anchor></div> 120 <div id=target></div> 121 <div id=ref></div> 122 </div> 123 <script> 124 125 // Test that an element with the specified `position_try` gets the same 126 // position as a reference element with `position_try_expected`. 127 function test_order(position_try, position_try_expected) { 128 test((t) => { 129 style.textContent = ` 130 #target { 131 position-try: ${position_try}; 132 } 133 #ref { 134 position-try: ${position_try_expected}; 135 } 136 `; 137 assert_true(CSS.supports('position-try', 'normal --x')); 138 assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); 139 assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); 140 }, `${position_try} | ${position_try_expected}`); 141 } 142 143 // Note: --right, --left, --top, and --bottom all fit, but have different 144 // inset-modifed containing blocks. 145 test_order('--right', '--right'); 146 test_order('--left', '--left'); 147 test_order('--top', '--top'); 148 test_order('--bottom', '--bottom'); 149 150 // position-try-order:normal just picks the first fallback. 151 test_order('--right, --left, --bottom, --top', '--right'); 152 test_order('normal --right, --left, --bottom, --top', '--right'); 153 test_order('normal --top, --left, --bottom, --right', '--top'); 154 155 // --right and --left have the same IMCB block-size. 156 test_order('most-block-size --right, --left', '--right'); 157 test_order('most-height --right, --left', '--right'); 158 // --left has more inline-size than --right. 159 test_order('most-inline-size --right, --left', '--left'); 160 test_order('most-width --right, --left', '--left'); 161 162 // --bottom and --top have the same IMCB inline-size. 163 test_order('most-inline-size --bottom, --top', '--bottom'); 164 test_order('most-width --bottom, --top', '--bottom'); 165 // --top has more block-size than --bottom. 166 test_order('most-block-size --bottom, --top', '--top'); 167 test_order('most-height --bottom, --top', '--top'); 168 169 // --bottom/--top has more IMBC inline-size than --right/--left. 170 test_order('most-inline-size --right, --left, --bottom, --top', '--bottom'); 171 test_order('most-inline-size --right, --left, --top, --bottom', '--top'); 172 173 // --right/--left has more IMBC block-size than --bottom/--top. 174 test_order('most-block-size --bottom, --top, --right, --left', '--right'); 175 test_order('most-block-size --bottom, --top, --left, --right', '--left'); 176 177 // --left-sweep and --bottom-sweep has the same IMBC inline-size ... 178 test_order('most-inline-size --left-sweep, --bottom-sweep', '--left-sweep'); 179 test_order('most-inline-size --bottom-sweep, --left-sweep', '--bottom-sweep'); 180 // ... but not the same block-size. 181 test_order('most-block-size --left-sweep, --bottom-sweep', '--left-sweep'); 182 test_order('most-block-size --bottom-sweep, --left-sweep', '--left-sweep'); 183 184 test_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep'); 185 test_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep'); 186 187 // NOTE: the css-anchor-position-1 spec requires that only a minimum of five 188 // fallback positions be respected. So this test, while intended to test across 189 // all 8 fallbacks, intentionally leaves off 3 of them. 190 test_order(`most-inline-size 191 --right-sweep, --left-sweep, --bottom-sweep, --top-sweep, 192 /* --right, --left, --bottom, --top */ 193 --bottom 194 `, '--bottom'); 195 196 // NOTE: the css-anchor-position-1 spec requires that only a minimum of five 197 // fallback positions be respected. So this test, while intended to test across 198 // all 8 fallbacks, intentionally leaves off 3 of them. 199 test_order(`most-block-size 200 --right-sweep, --left-sweep, --bottom-sweep, --top-sweep, 201 /* --right, --left, --bottom, --top */ 202 --right 203 `, '--right'); 204 205 </script>