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