try-tactic-alignment.html (7692B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: try-tactic, justify/align-self</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 #ref { 29 background-color: seagreen; 30 } 31 </style> 32 <style id=style> 33 </style> 34 <div id=cb> 35 <div id=target></div> 36 <div id=ref></div> 37 </div> 38 <script> 39 40 // Verify that a given try-tactic + untransformed declaration equals 41 // a reference element using `transformed` directly. 42 function test_justify_flip(try_tactic, untransformed, transformed, direction, writing_mode) { 43 if (direction==undefined) { 44 direction = 'ltr'; 45 } 46 if (writing_mode==undefined) { 47 writing_mode = 'horizontal-tb'; 48 } 49 test((t) => { 50 t.add_cleanup(() => { 51 document.documentElement.style = ''; 52 style.textContent = ''; 53 }); 54 document.documentElement.style.direction = direction; 55 document.documentElement.style.writingMode = writing_mode; 56 style.textContent = ` 57 @position-try --pf { 58 inset: 0; 59 ${untransformed} 60 } 61 #target { 62 position-try-fallbacks: --pf ${try_tactic}; 63 } 64 @position-try --ref { 65 inset: 0; 66 ${transformed} 67 } 68 #ref { 69 position-try-fallbacks: --ref; 70 } 71 `; 72 assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); 73 assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); 74 }, `${try_tactic}, ${untransformed}, ${transformed}, ${direction}, ${writing_mode}`); 75 } 76 77 test_justify_flip( 78 '', 79 'justify-self:start;align-self:start', 80 'justify-self:start;align-self:start'); 81 82 test_justify_flip( 83 'flip-inline', 84 'justify-self:start;align-self:start', 85 'justify-self:end;align-self:start'); 86 87 test_justify_flip( 88 'flip-block', 89 'justify-self:start;align-self:start', 90 'justify-self:start;align-self:end'); 91 92 test_justify_flip( 93 'flip-block flip-inline', 94 'justify-self:start;align-self:start', 95 'justify-self:end;align-self:end'); 96 97 test_justify_flip( 98 'flip-start', 99 'justify-self:start;align-self:end', 100 'justify-self:end;align-self:start'); 101 102 test_justify_flip( 103 'flip-block flip-start', 104 'justify-self:start;align-self:start', 105 'justify-self:end;align-self:start'); 106 107 test_justify_flip( 108 'flip-inline flip-start', 109 'justify-self:start;align-self:start', 110 'justify-self:start;align-self:end'); 111 112 test_justify_flip( 113 'flip-block flip-inline flip-start', 114 'justify-self:start;align-self:start', 115 'justify-self:end;align-self:end'); 116 117 test_justify_flip( 118 'flip-x', 119 'justify-self:start;align-self:start', 120 'justify-self:end;align-self:start'); 121 122 test_justify_flip( 123 'flip-y', 124 'justify-self:start;align-self:start', 125 'justify-self:start;align-self:end'); 126 127 test_justify_flip( 128 'flip-y flip-x', 129 'justify-self:start;align-self:start', 130 'justify-self:end;align-self:end'); 131 132 test_justify_flip( 133 'flip-y flip-start', 134 'justify-self:start;align-self:start', 135 'justify-self:end;align-self:start'); 136 137 test_justify_flip( 138 'flip-x flip-start', 139 'justify-self:start;align-self:start', 140 'justify-self:start;align-self:end'); 141 142 test_justify_flip( 143 'flip-y flip-x flip-start', 144 'justify-self:start;align-self:start', 145 'justify-self:end;align-self:end'); 146 147 // left/right are special cases, because they're supported by 148 // justify-self, but not align-self: 149 150 test_justify_flip( 151 'flip-inline', 152 'justify-self:left;align-self:start', 153 'justify-self:right;align-self:start'); 154 155 test_justify_flip( 156 'flip-x', 157 'justify-self:left;align-self:start', 158 'justify-self:right;align-self:start'); 159 160 test_justify_flip( 161 'flip-start', 162 'justify-self:left;align-self:end', 163 'justify-self:end;align-self:self-start'); 164 165 test_justify_flip( 166 'flip-start', 167 'justify-self:right;align-self:start', 168 'justify-self:start;align-self:self-end'); 169 170 171 // That that all relevant computed values can be transformed: 172 173 function test_computed_value(try_tactic, property, value, expected) { 174 test((t) => { 175 t.add_cleanup(() => { 176 style.textContent = ''; 177 }); 178 style.textContent = ` 179 @position-try --pf { 180 inset: 0; 181 ${property}:${value}; 182 } 183 #target { 184 position-try-fallbacks: --pf ${try_tactic}; 185 } 186 @position-try --ref { 187 inset: 0; 188 ${property}:${expected}; 189 } 190 #ref { 191 position-try-fallbacks: --ref; 192 } 193 `; 194 assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); 195 assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); 196 }, `${try_tactic}, ${property}:${value}`); 197 } 198 199 // No flip: 200 for (let property of ['justify-self', 'align-self']) { 201 test_computed_value('', property, 'start', 'start'); 202 test_computed_value('', property, 'end', 'end'); 203 test_computed_value('', property, 'self-start', 'self-start'); 204 test_computed_value('', property, 'self-end', 'self-end'); 205 test_computed_value('', property, 'flex-start', 'flex-start'); 206 test_computed_value('', property, 'flex-end', 'flex-end'); 207 } 208 209 test_computed_value('flip-inline', 'justify-self', 'start', 'end'); 210 test_computed_value('flip-inline', 'justify-self', 'end', 'start'); 211 test_computed_value('flip-inline', 'justify-self', 'self-start', 'self-end'); 212 test_computed_value('flip-inline', 'justify-self', 'self-end', 'self-start'); 213 test_computed_value('flip-inline', 'justify-self', 'flex-start', 'flex-end'); 214 test_computed_value('flip-inline', 'justify-self', 'flex-end', 'flex-start'); 215 test_computed_value('flip-inline', 'justify-self', 'left', 'right'); 216 test_computed_value('flip-inline', 'justify-self', 'right', 'left'); 217 218 test_computed_value('flip-x', 'justify-self', 'start', 'end'); 219 test_computed_value('flip-x', 'justify-self', 'end', 'start'); 220 test_computed_value('flip-x', 'justify-self', 'self-start', 'self-end'); 221 test_computed_value('flip-x', 'justify-self', 'self-end', 'self-start'); 222 test_computed_value('flip-x', 'justify-self', 'flex-start', 'flex-end'); 223 test_computed_value('flip-x', 'justify-self', 'flex-end', 'flex-start'); 224 test_computed_value('flip-x', 'justify-self', 'left', 'right'); 225 test_computed_value('flip-x', 'justify-self', 'right', 'left'); 226 227 test_computed_value('flip-block', 'align-self', 'start', 'end'); 228 test_computed_value('flip-block', 'align-self', 'end', 'start'); 229 test_computed_value('flip-block', 'align-self', 'self-start', 'self-end'); 230 test_computed_value('flip-block', 'align-self', 'self-end', 'self-start'); 231 test_computed_value('flip-block', 'align-self', 'flex-start', 'flex-end'); 232 test_computed_value('flip-block', 'align-self', 'flex-end', 'flex-start'); 233 234 test_computed_value('flip-y', 'align-self', 'start', 'end'); 235 test_computed_value('flip-y', 'align-self', 'end', 'start'); 236 test_computed_value('flip-y', 'align-self', 'self-start', 'self-end'); 237 test_computed_value('flip-y', 'align-self', 'self-end', 'self-start'); 238 test_computed_value('flip-y', 'align-self', 'flex-start', 'flex-end'); 239 test_computed_value('flip-y', 'align-self', 'flex-end', 'flex-start'); 240 241 test_justify_flip( 242 'flip-start', 243 'justify-self:left;align-self:end', 244 'justify-self:end;align-self:self-start', 245 'ltr', 246 'vertical-rl'); 247 248 test_justify_flip( 249 'flip-start', 250 'justify-self:left;align-self:start', 251 'justify-self:start;align-self:self-end', 252 'rtl'); 253 254 </script>