position-area-in-position-try.html (6407B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-area in @position-try</title> 3 <link rel="help" href='https://drafts.csswg.org/css-anchor-position-1/#position-try-fallbacks'> 4 <script src='/resources/testharness.js'></script> 5 <script src='/resources/testharnessreport.js'></script> 6 <style> 7 #cb { 8 position: relative; 9 width: 200px; 10 height: 200px; 11 border: 1px solid black; 12 } 13 #anchor { 14 position: absolute; 15 left: 100px; 16 top: 100px; 17 width: 50px; 18 height: 50px; 19 background-color: tomato; 20 anchor-name: --a; 21 } 22 #target { 23 left: 200px; /* force fallback */ 24 } 25 #target, #ref { 26 position: absolute; 27 width: 40px; 28 height: 40px; 29 background-color: skyblue; 30 position-area: bottom right; 31 position-anchor: --a; 32 } 33 #ref { 34 background-color: seagreen; 35 } 36 </style> 37 <style id=style> 38 </style> 39 <div id=cb> 40 <div id=anchor></div> 41 <div id=target></div> 42 <div id=ref></div> 43 </div> 44 <script> 45 46 // Test that inside-area, when used inside @position-try, works the same 47 // as when it's specified in the base style. 48 function test_position_area_ref(position_area) { 49 test((t) => { 50 t.add_cleanup(() => { 51 style.textContent = ''; 52 }); 53 style.textContent = ` 54 @position-try --pt { 55 inset: unset; /* Undo force fallback */ 56 position-area: ${position_area}; 57 } 58 #target { 59 position-try-fallbacks: --pt; 60 } 61 #ref { 62 position-area: ${position_area}; 63 } 64 `; 65 assert_true(CSS.supports('position-area', 'top left')); 66 assert_true(CSS.supports('position-try-fallbacks', '--x')); 67 assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); 68 assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); 69 }, `${position_area}`); 70 } 71 72 test_position_area_ref('none'); 73 test_position_area_ref('span-all'); 74 test_position_area_ref('span-all span-all'); 75 test_position_area_ref('top left'); 76 test_position_area_ref('top center'); 77 test_position_area_ref('top right'); 78 test_position_area_ref('center left'); 79 test_position_area_ref('center center'); 80 test_position_area_ref('center right'); 81 test_position_area_ref('bottom left'); 82 test_position_area_ref('bottom center'); 83 test_position_area_ref('bottom right'); 84 test_position_area_ref('start start'); 85 test_position_area_ref('start center'); 86 test_position_area_ref('start end'); 87 test_position_area_ref('center start'); 88 test_position_area_ref('center end'); 89 test_position_area_ref('end start'); 90 test_position_area_ref('end center'); 91 test_position_area_ref('end end'); 92 test_position_area_ref('self-start self-start'); 93 test_position_area_ref('self-start center'); 94 test_position_area_ref('self-start self-end'); 95 test_position_area_ref('center self-start'); 96 test_position_area_ref('center self-end'); 97 test_position_area_ref('self-end self-start'); 98 test_position_area_ref('self-end center'); 99 test_position_area_ref('self-end self-end'); 100 test_position_area_ref('y-start x-start'); 101 test_position_area_ref('y-start center'); 102 test_position_area_ref('y-start x-end'); 103 test_position_area_ref('center x-start'); 104 test_position_area_ref('center x-end'); 105 test_position_area_ref('y-end x-start'); 106 test_position_area_ref('y-end center'); 107 test_position_area_ref('y-end x-end'); 108 test_position_area_ref('self-y-start self-x-start'); 109 test_position_area_ref('self-y-start center'); 110 test_position_area_ref('self-y-start self-x-end'); 111 test_position_area_ref('center self-x-start'); 112 test_position_area_ref('center self-x-end'); 113 test_position_area_ref('self-y-end self-x-start'); 114 test_position_area_ref('self-y-end center'); 115 test_position_area_ref('self-y-end self-x-end'); 116 test_position_area_ref('span-self-y-start span-self-x-end'); 117 test_position_area_ref('span-bottom span-all'); 118 119 </script> 120 121 <style> 122 @position-try --top { 123 inset: unset; /* Undo force fallback */ 124 position-area: top; 125 } 126 @position-try --right { 127 inset: unset; /* Undo force fallback */ 128 position-area: right; 129 } 130 @position-try --bottom { 131 inset: unset; /* Undo force fallback */ 132 position-area: bottom; 133 } 134 @position-try --left { 135 inset: unset; /* Undo force fallback */ 136 position-area: left; 137 } 138 </style> 139 <script> 140 141 // Test that an element with the specified position-try-fallbacks is placed 142 // at the same position as a reference element with position-area:`expected`. 143 // This test uses #target/#ref size of 60x60px, which causes overflow if 144 // if we attempt the --right and --bottom positions. 145 function test_position_area_placement(position_try_fallbacks, expected) { 146 test((t) => { 147 style.textContent = ` 148 #target, #ref { 149 width: 60px; 150 height: 60px; 151 } 152 #target { 153 position-try-fallbacks: ${position_try_fallbacks}; 154 } 155 #ref { 156 position-area: ${expected}; 157 } 158 `; 159 assert_true(CSS.supports('position-area', 'top left')); 160 assert_true(CSS.supports('position-try-fallbacks', '--x')); 161 assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); 162 assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); 163 }, `Placement: ${position_try_fallbacks}`); 164 } 165 166 test_position_area_placement('--top', 'top'); 167 test_position_area_placement('--left', 'left'); 168 169 // No space to to the right/bottom: 170 test_position_area_placement('--right, --top', 'top'); 171 test_position_area_placement('--bottom, --top', 'top'); 172 test_position_area_placement('--bottom, --right, --top', 'top'); 173 test_position_area_placement('--bottom, --right, --left, --top', 'left'); 174 test_position_area_placement('--bottom, --left, --top, --right', 'left'); 175 176 // Flipping: 177 test_position_area_placement('--right flip-inline', 'left'); 178 test_position_area_placement('--bottom flip-block', 'top'); 179 test_position_area_placement('--left flip-start', 'top'); 180 test_position_area_placement('--right flip-x', 'left'); 181 test_position_area_placement('--bottom flip-y', 'top'); 182 183 // left + flip-inline => right (no space). 184 test_position_area_placement('--left flip-inline, --top', 'top'); 185 test_position_area_placement('--left flip-x, --top', 'top'); 186 // top + flip-block => bottom (no space). 187 test_position_area_placement('--top flip-block, --left', 'left'); 188 test_position_area_placement('--top flip-y, --left', 'left'); 189 // left + flip-start flip-block => bottom (no space). 190 test_position_area_placement('--left flip-start flip-block, --left', 'left'); 191 test_position_area_placement('--left flip-start flip-y, --left', 'left'); 192 193 </script>