try-tactic-position-area.html (14985B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: try-tactic, position-area</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-fallbacks-try-tactic"> 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: 150px; 17 width: 100px; 18 height: 50px; 19 background-color: coral; 20 } 21 #target, #ref { 22 position: absolute; 23 left: 450px; /* force fallback */ 24 width: 40px; 25 height: 40px; 26 background-color: skyblue; 27 } 28 </style> 29 <style id=style> 30 </style> 31 <div id=cb> 32 <div id=target></div> 33 <div id=ref></div> 34 </div> 35 <script> 36 37 function test_position_area_tactic(try_tactic, property, value, expected, direction = 'ltr', writing_mode = 'horizontal-tb') { 38 test((t) => { 39 t.add_cleanup(() => { 40 style.textContent = ''; 41 document.documentElement.style = ''; 42 }); 43 document.documentElement.style.direction = direction; 44 document.documentElement.style.writingMode = writing_mode; 45 style.textContent = ` 46 @position-try --pf { 47 inset: initial; 48 ${property}:${value}; 49 } 50 #target { 51 position-try-fallbacks: --pf ${try_tactic}; 52 } 53 #ref { 54 inset: initial; 55 ${property}:${expected}; 56 } 57 `; 58 let targetRect = target.getBoundingClientRect(); 59 let refRect = ref.getBoundingClientRect(); 60 for (let prop of ["top", "right", "bottom", "left"]) { 61 assert_equals(targetRect[prop], refRect[prop], `Should render as ${property}: ${expected}: ${prop}`); 62 } 63 }, `${try_tactic}, ${property}:${value}, ${direction} ${writing_mode}`); 64 } 65 66 // Physical: 67 68 test_position_area_tactic('flip-inline', 'position-area', 'left top', 'right top'); 69 test_position_area_tactic('flip-inline', 'position-area', 'left bottom', 'right bottom'); 70 test_position_area_tactic('flip-inline', 'position-area', 'right bottom', 'left bottom'); 71 test_position_area_tactic('flip-inline', 'position-area', 'right top', 'left top'); 72 73 test_position_area_tactic('flip-block', 'position-area', 'left top', 'left bottom'); 74 test_position_area_tactic('flip-block', 'position-area', 'left bottom', 'left top'); 75 test_position_area_tactic('flip-block', 'position-area', 'right bottom', 'right top'); 76 test_position_area_tactic('flip-block', 'position-area', 'right top', 'right bottom'); 77 78 test_position_area_tactic('flip-block flip-inline', 'position-area', 'left top', 'right bottom'); 79 test_position_area_tactic('flip-block flip-inline', 'position-area', 'left bottom', 'right top'); 80 test_position_area_tactic('flip-block flip-inline', 'position-area', 'right bottom', 'left top'); 81 test_position_area_tactic('flip-block flip-inline', 'position-area', 'right top', 'left bottom'); 82 83 test_position_area_tactic('flip-start', 'position-area', 'left top', 'left top'); 84 test_position_area_tactic('flip-start', 'position-area', 'left bottom', 'right top'); 85 test_position_area_tactic('flip-start', 'position-area', 'right bottom', 'right bottom'); 86 test_position_area_tactic('flip-start', 'position-area', 'right top', 'left bottom'); 87 88 test_position_area_tactic('flip-block flip-start', 'position-area', 'left top', 'right top'); 89 test_position_area_tactic('flip-block flip-start', 'position-area', 'left bottom', 'left top'); 90 test_position_area_tactic('flip-block flip-start', 'position-area', 'right bottom', 'left bottom'); 91 test_position_area_tactic('flip-block flip-start', 'position-area', 'right top', 'right bottom'); 92 93 test_position_area_tactic('flip-inline flip-start', 'position-area', 'left top', 'left bottom'); 94 test_position_area_tactic('flip-inline flip-start', 'position-area', 'left bottom', 'right bottom'); 95 test_position_area_tactic('flip-inline flip-start', 'position-area', 'right bottom', 'right top'); 96 test_position_area_tactic('flip-inline flip-start', 'position-area', 'right top', 'left top'); 97 98 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'left top', 'right bottom'); 99 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'left bottom', 'left bottom'); 100 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'right bottom', 'left top'); 101 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'right top', 'right top'); 102 103 // Variations: 104 test_position_area_tactic('flip-block flip-inline', 'position-area', 'span-left span-top', 'span-right span-bottom'); 105 106 // XY: 107 108 test_position_area_tactic('flip-inline', 'position-area', 'x-start y-start', 'x-end y-start'); 109 test_position_area_tactic('flip-inline', 'position-area', 'x-start y-end', 'x-end y-end'); 110 test_position_area_tactic('flip-inline', 'position-area', 'x-end y-end', 'x-start y-end'); 111 test_position_area_tactic('flip-inline', 'position-area', 'x-end y-start', 'x-start y-start'); 112 113 test_position_area_tactic('flip-block', 'position-area', 'x-start y-start', 'x-start y-end'); 114 test_position_area_tactic('flip-block', 'position-area', 'x-start y-end', 'x-start y-start'); 115 test_position_area_tactic('flip-block', 'position-area', 'x-end y-end', 'x-end y-start'); 116 test_position_area_tactic('flip-block', 'position-area', 'x-end y-start', 'x-end y-end'); 117 118 test_position_area_tactic('flip-block flip-inline', 'position-area', 'x-start y-start', 'x-end y-end'); 119 test_position_area_tactic('flip-block flip-inline', 'position-area', 'x-start y-end', 'x-end y-start'); 120 test_position_area_tactic('flip-block flip-inline', 'position-area', 'x-end y-end', 'x-start y-start'); 121 test_position_area_tactic('flip-block flip-inline', 'position-area', 'x-end y-start', 'x-start y-end'); 122 123 test_position_area_tactic('flip-start', 'position-area', 'x-start y-start', 'x-start y-start'); 124 test_position_area_tactic('flip-start', 'position-area', 'x-start y-end', 'x-end y-start'); 125 test_position_area_tactic('flip-start', 'position-area', 'x-end y-end', 'x-end y-end'); 126 test_position_area_tactic('flip-start', 'position-area', 'x-end y-start', 'x-start y-end'); 127 128 test_position_area_tactic('flip-block flip-start', 'position-area', 'x-start y-start', 'x-end y-start'); 129 test_position_area_tactic('flip-block flip-start', 'position-area', 'x-start y-end', 'x-start y-start'); 130 test_position_area_tactic('flip-block flip-start', 'position-area', 'x-end y-end', 'x-start y-end'); 131 test_position_area_tactic('flip-block flip-start', 'position-area', 'x-end y-start', 'x-end y-end'); 132 133 test_position_area_tactic('flip-inline flip-start', 'position-area', 'x-start y-start', 'x-start y-end'); 134 test_position_area_tactic('flip-inline flip-start', 'position-area', 'x-start y-end', 'x-end y-end'); 135 test_position_area_tactic('flip-inline flip-start', 'position-area', 'x-end y-end', 'x-end y-start'); 136 test_position_area_tactic('flip-inline flip-start', 'position-area', 'x-end y-start', 'x-start y-start'); 137 138 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'x-start y-start', 'x-end y-end'); 139 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'x-start y-end', 'x-start y-end'); 140 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'x-end y-end', 'x-start y-start'); 141 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'x-end y-start', 'x-end y-start'); 142 143 // Variations: 144 test_position_area_tactic('flip-block flip-inline', 'position-area', 'span-x-start span-y-start', 'span-x-end span-y-end'); 145 test_position_area_tactic('flip-block flip-inline', 'position-area', 'self-x-start self-y-start', 'self-x-end self-y-end'); 146 test_position_area_tactic('flip-block flip-inline', 'position-area', 'span-self-x-start span-self-y-start', 'span-self-x-end span-self-y-end'); 147 148 // Logical: 149 150 test_position_area_tactic('flip-inline', 'position-area', 'block-start inline-start', 'start end'); 151 test_position_area_tactic('flip-inline', 'position-area', 'block-end inline-start', 'end'); 152 test_position_area_tactic('flip-inline', 'position-area', 'block-end inline-end', 'end start'); 153 test_position_area_tactic('flip-inline', 'position-area', 'block-start inline-end', 'start'); 154 155 test_position_area_tactic('flip-block', 'position-area', 'block-start inline-start', 'end start'); 156 test_position_area_tactic('flip-block', 'position-area', 'block-end inline-start', 'start'); 157 test_position_area_tactic('flip-block', 'position-area', 'block-end inline-end', 'start end'); 158 test_position_area_tactic('flip-block', 'position-area', 'block-start inline-end', 'end'); 159 160 test_position_area_tactic('flip-block flip-inline', 'position-area', 'block-start inline-start', 'end'); 161 test_position_area_tactic('flip-block flip-inline', 'position-area', 'block-end inline-start', 'start end'); 162 test_position_area_tactic('flip-block flip-inline', 'position-area', 'block-end inline-end', 'start'); 163 test_position_area_tactic('flip-block flip-inline', 'position-area', 'block-start inline-end', 'end start'); 164 165 test_position_area_tactic('flip-start', 'position-area', 'block-start inline-start', 'start'); 166 test_position_area_tactic('flip-start', 'position-area', 'block-end inline-start', 'start end'); 167 test_position_area_tactic('flip-start', 'position-area', 'block-end inline-end', 'end'); 168 test_position_area_tactic('flip-start', 'position-area', 'block-start inline-end', 'end start'); 169 170 test_position_area_tactic('flip-block flip-start', 'position-area', 'block-start inline-start', 'start end'); 171 test_position_area_tactic('flip-block flip-start', 'position-area', 'block-end inline-start', 'start'); 172 test_position_area_tactic('flip-block flip-start', 'position-area', 'block-end inline-end', 'end start'); 173 test_position_area_tactic('flip-block flip-start', 'position-area', 'block-start inline-end', 'end'); 174 175 test_position_area_tactic('flip-inline flip-start', 'position-area', 'block-start inline-start', 'end start'); 176 test_position_area_tactic('flip-inline flip-start', 'position-area', 'block-end inline-start', 'end'); 177 test_position_area_tactic('flip-inline flip-start', 'position-area', 'block-end inline-end', 'start end'); 178 test_position_area_tactic('flip-inline flip-start', 'position-area', 'block-start inline-end', 'start'); 179 180 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'block-start inline-start', 'end'); 181 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'block-end inline-start', 'end start'); 182 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'block-end inline-end', 'start'); 183 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'block-start inline-end', 'start end'); 184 185 // Variations: 186 test_position_area_tactic('flip-block flip-inline', 'position-area', 'span-block-start span-inline-start', 'span-end'); 187 test_position_area_tactic('flip-block flip-inline', 'position-area', 'self-block-start self-inline-start', 'self-end'); 188 test_position_area_tactic('flip-block flip-inline', 'position-area', 'span-self-block-start span-self-inline-start', 'span-self-end'); 189 190 // start/end 191 192 test_position_area_tactic('', 'position-area', 'start end', 'start end'); 193 194 test_position_area_tactic('flip-block', 'position-area', 'start end', 'end'); 195 196 test_position_area_tactic('flip-inline', 'position-area', 'start end', 'start'); 197 198 test_position_area_tactic('flip-block flip-inline', 'position-area', 'start end', 'end start'); 199 200 test_position_area_tactic('flip-start', 'position-area', 'start', 'start'); 201 test_position_area_tactic('flip-start', 'position-area', 'end', 'end'); 202 test_position_area_tactic('flip-start', 'position-area', 'start end', 'end start'); 203 204 test_position_area_tactic('flip-block flip-start', 'position-area', 'start end', 'end'); 205 206 test_position_area_tactic('flip-inline flip-start', 'position-area', 'start end', 'start'); 207 208 test_position_area_tactic('flip-block flip-inline flip-start', 'position-area', 'start end', 'start end'); 209 210 // Variations: 211 212 test_position_area_tactic('flip-block flip-inline', 'position-area', 'span-start span-end', 'span-end span-start'); 213 test_position_area_tactic('flip-block flip-inline', 'position-area', 'self-start self-end', 'self-end self-start'); 214 test_position_area_tactic('flip-block flip-inline', 'position-area', 'span-self-start span-self-end', 'span-self-end span-self-start'); 215 216 // center 217 test_position_area_tactic('flip-block', 'position-area', 'left center', 'left center'); 218 test_position_area_tactic('flip-block', 'position-area', 'center top', 'center bottom'); 219 test_position_area_tactic('flip-block', 'position-area', 'center', 'center'); 220 test_position_area_tactic('flip-block', 'position-area', 'start center', 'end center'); 221 test_position_area_tactic('flip-block', 'position-area', 'center start', 'center start'); 222 test_position_area_tactic('flip-inline', 'position-area', 'center start', 'center end'); 223 test_position_area_tactic('flip-start', 'position-area', 'center start', 'start center'); 224 225 // span-all 226 test_position_area_tactic('flip-block', 'position-area', 'left span-all', 'left'); 227 test_position_area_tactic('flip-block', 'position-area', 'span-all top', 'bottom'); 228 test_position_area_tactic('flip-block', 'position-area', 'span-all', 'span-all'); 229 test_position_area_tactic('flip-block', 'position-area', 'start span-all', 'block-end'); 230 test_position_area_tactic('flip-block', 'position-area', 'span-all start', 'inline-start'); 231 test_position_area_tactic('flip-inline', 'position-area', 'span-all start', 'inline-end'); 232 test_position_area_tactic('flip-start', 'position-area', 'span-all start', 'block-start'); 233 234 // Span mix: 235 test_position_area_tactic('flip-block', 'position-area', 'left span-top', 'left span-bottom'); 236 test_position_area_tactic('flip-inline', 'position-area', 'left span-top', 'right span-top'); 237 test_position_area_tactic('flip-start', 'position-area', 'span-block-start inline-end', 'end span-start'); 238 239 // Writing modes: 240 test_position_area_tactic('flip-block', 'position-area', 'left top', 'right top', 'ltr', 'vertical-rl'); 241 242 test_position_area_tactic('', 'position-area', 'x-start y-start', 'x-start y-start', 'rtl'); 243 test_position_area_tactic('flip-block', 'position-area', 'x-start y-start', 'x-start y-end', 'rtl'); 244 test_position_area_tactic('flip-inline', 'position-area', 'x-start y-start', 'x-end y-start', 'rtl'); 245 test_position_area_tactic('flip-block', 'position-area', 'x-end y-start', 'x-start y-start', 'ltr', 'vertical-rl'); 246 test_position_area_tactic('flip-inline', 'position-area', 'x-end y-start', 'x-end y-end', 'ltr', 'vertical-rl'); 247 248 test_position_area_tactic('flip-inline', 'position-area', 'start end', 'start', 'rtl'); 249 test_position_area_tactic('flip-inline', 'position-area', 'start end', 'start', 'ltr', 'vertical-rl'); 250 test_position_area_tactic('flip-block', 'position-area', 'start end', 'end', 'rtl'); 251 test_position_area_tactic('flip-block', 'position-area', 'start end', 'end', 'ltr', 'vertical-rl'); 252 253 </script>