position-try-order-logical.html (5015B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12869#issuecomment-3406959070"> 3 <link rel="match" href="position-try-order-logical-ref.html"> 4 <style> 5 .container { 6 position: relative; 7 display: inline-block; 8 vertical-align: middle; 9 width: 100px; 10 height: 100px; 11 margin: 10px; 12 border: solid 3px; 13 } 14 15 .anchor { 16 position: absolute; 17 anchor-name: --a; 18 width: 25px; 19 height: 25px; 20 left: 50px; 21 top: 25px; 22 background: dodgerblue; 23 } 24 25 .anchored { 26 position: absolute; 27 position-anchor: --a; 28 left: 100px; /* ensure the element will overflow the IMCB at "base" position */ 29 /* fallbacks: (1) with left inset removed; (2) also flipped in both axes */ 30 position-try-fallbacks: --noinset, --noinset flip-block flip-inline; 31 width: 15px; 32 height: 15px; 33 background: green; 34 } 35 36 @position-try --noinset { 37 /* a fallback that just removes the left inset from the base position */ 38 left: unset; 39 } 40 </style> 41 <div class="container"> 42 <div class="anchor"></div> 43 <div class="anchored" style=" 44 position-area: top left; 45 position-try-order: most-inline-size; 46 writing-mode: vertical-rl;"></div> 47 </div> 48 49 <div class="container"> 50 <div class="anchor"></div> 51 <div class="anchored" style=" 52 position-area: top left; 53 position-try-order: most-inline-size; 54 writing-mode: horizontal-tb;"></div> 55 </div> 56 57 <div class="container"> 58 <div class="anchor"></div> 59 <div class="anchored" style=" 60 position-area: top left; 61 position-try-order: most-block-size; 62 writing-mode: vertical-rl;"></div> 63 </div> 64 65 <div class="container"> 66 <div class="anchor"></div> 67 <div class="anchored" style=" 68 position-area: top left; 69 position-try-order: most-block-size; 70 writing-mode: horizontal-tb;"></div> 71 </div> 72 73 <br> 74 75 <div class="container"> 76 <div class="anchor"></div> 77 <div class="anchored" style=" 78 right: anchor(left); bottom: anchor(top); 79 position-try-order: most-inline-size; 80 writing-mode: vertical-rl;"></div> 81 </div> 82 83 <div class="container"> 84 <div class="anchor"></div> 85 <div class="anchored" style=" 86 right: anchor(left); bottom: anchor(top); 87 position-try-order: most-inline-size; 88 writing-mode: horizontal-tb;"></div> 89 </div> 90 91 <div class="container"> 92 <div class="anchor"></div> 93 <div class="anchored" style=" 94 right: anchor(left); bottom: anchor(top); 95 position-try-order: most-block-size; 96 writing-mode: vertical-rl;"></div> 97 </div> 98 99 <div class="container"> 100 <div class="anchor"></div> 101 <div class="anchored" style=" 102 right: anchor(left); bottom: anchor(top); 103 position-try-order: most-block-size; 104 writing-mode: horizontal-tb;"></div> 105 </div> 106 107 <br> 108 109 <!-- vertical containing block. --> 110 <div class="container" style="writing-mode: vertical-rl;"> 111 <div class="anchor"></div> 112 <div class="anchored" style=" 113 position-area: top left; 114 position-try-order: most-inline-size; 115 writing-mode: vertical-rl;"></div> 116 </div> 117 118 <div class="container" style="writing-mode: vertical-rl;"> 119 <div class="anchor"></div> 120 <div class="anchored" style=" 121 position-area: top left; 122 position-try-order: most-inline-size; 123 writing-mode: horizontal-tb;"></div> 124 </div> 125 126 <div class="container" style="writing-mode: vertical-rl;"> 127 <div class="anchor"></div> 128 <div class="anchored" style=" 129 position-area: top left; 130 position-try-order: most-block-size; 131 writing-mode: vertical-rl;"></div> 132 </div> 133 134 <div class="container" style="writing-mode: vertical-rl;"> 135 <div class="anchor"></div> 136 <div class="anchored" style=" 137 position-area: top left; 138 position-try-order: most-block-size; 139 writing-mode: horizontal-tb;"></div> 140 </div> 141 142 <br> 143 144 <div class="container" style="writing-mode: vertical-rl;"> 145 <div class="anchor"></div> 146 <div class="anchored" style=" 147 right: anchor(left); bottom: anchor(top); 148 position-try-order: most-inline-size; 149 writing-mode: vertical-rl;"></div> 150 </div> 151 152 <div class="container" style="writing-mode: vertical-rl;"> 153 <div class="anchor"></div> 154 <div class="anchored" style=" 155 right: anchor(left); bottom: anchor(top); 156 position-try-order: most-inline-size; 157 writing-mode: horizontal-tb;"></div> 158 </div> 159 160 <div class="container" style="writing-mode: vertical-rl;"> 161 <div class="anchor"></div> 162 <div class="anchored" style=" 163 right: anchor(left); bottom: anchor(top); 164 position-try-order: most-block-size; 165 writing-mode: vertical-rl;"></div> 166 </div> 167 168 <div class="container" style="writing-mode: vertical-rl;"> 169 <div class="anchor"></div> 170 <div class="anchored" style=" 171 right: anchor(left); bottom: anchor(top); 172 position-try-order: most-block-size; 173 writing-mode: horizontal-tb;"></div> 174 </div>