position-absolute-with-negative-sized-imcb.html (7566B)
1 <!DOCTYPE html> 2 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 3 <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-insets"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11478"> 5 <meta name="assert" content=" 6 If the insets of an abspos are big enough that would make the inset-modified 7 containing block (IMCB) have a negative size, the weaker inset is adjusted 8 so that the IMCB size becomes zero instead. 9 "> 10 11 <style> 12 .rtl { 13 direction: rtl; 14 } 15 .container { 16 display: inline-block; 17 margin: 8px; 18 border: 1px solid; 19 position: relative; 20 width: 20px; 21 height: 20px; 22 } 23 .abspos { 24 position: absolute; 25 background: orange; 26 } 27 .abspos.case1 { 28 margin: auto; 29 width: 18px; 30 height: 18px; 31 } 32 .abspos.case2 { 33 inset: 18px; 34 margin: auto; 35 } 36 .abspos.case3 { 37 inset: 18px; 38 margin: -10px; 39 } 40 .abspos.case4 { 41 width: 10px; 42 height: 10px; 43 place-self: unsafe center; 44 } 45 </style> 46 47 48 <!-- Case 1: Auto margins, fixed size, varying insets --> 49 <div class="container"> 50 <div class="abspos case1" style="inset: 0px" 51 data-expected-width="18" data-expected-height="18" 52 data-offset-x="1" data-offset-y="1"></div> 53 </div> 54 <div class="container"> 55 <div class="abspos case1" style="inset: 8px" 56 data-expected-width="18" data-expected-height="18" 57 data-offset-x="8" data-offset-y="1"></div> 58 </div> 59 <div class="container"> 60 <div class="abspos case1" style="inset: 12px" 61 data-expected-width="18" data-expected-height="18" 62 data-offset-x="12" data-offset-y="3"></div> 63 </div> 64 <div class="container"> 65 <div class="abspos case1" style="inset: 18px" 66 data-expected-width="18" data-expected-height="18" 67 data-offset-x="18" data-offset-y="9"></div> 68 </div> 69 70 <br> 71 72 <!-- Case 1, but RTL --> 73 <div class="container rtl"> 74 <div class="abspos case1" style="inset: 0px" 75 data-expected-width="18" data-expected-height="18" 76 data-offset-x="1" data-offset-y="1"></div> 77 </div> 78 <div class="container rtl"> 79 <div class="abspos case1" style="inset: 8px" 80 data-expected-width="18" data-expected-height="18" 81 data-offset-x="-6" data-offset-y="1"></div> 82 </div> 83 <div class="container rtl"> 84 <div class="abspos case1" style="inset: 12px" 85 data-expected-width="18" data-expected-height="18" 86 data-offset-x="-10" data-offset-y="3"></div> 87 </div> 88 <div class="container rtl"> 89 <div class="abspos case1" style="inset: 18px" 90 data-expected-width="18" data-expected-height="18" 91 data-offset-x="-16" data-offset-y="9"></div> 92 </div> 93 94 <hr> 95 96 <!-- Case 2: Auto margins, fixed insets, varying sizes --> 97 <div class="container"> 98 <div class="abspos case2" style="border: solid orange 6px;" 99 data-expected-width="12" data-expected-height="12" 100 data-offset-x="18" data-offset-y="12"></div> 101 </div> 102 <div class="container"> 103 <div class="abspos case2" style="width: 12px; height: 12px;" 104 data-expected-width="12" data-expected-height="12" 105 data-offset-x="18" data-offset-y="12"></div> 106 </div> 107 <div class="container"> 108 <div class="abspos case2" style="min-width: 12px; min-height: 12px;" 109 data-expected-width="12" data-expected-height="12" 110 data-offset-x="18" data-offset-y="12"></div> 111 </div> 112 <div class="container"> 113 <div class="abspos case2" style="width: min-content; height: min-content;" 114 data-expected-width="12" data-expected-height="12" 115 data-offset-x="18" data-offset-y="12"> 116 <div style="width: 12px; height: 12px"></div> 117 </div> 118 </div> 119 <div class="container"> 120 <div class="abspos case2" style="display: table;" 121 data-expected-width="12" data-expected-height="12" 122 data-offset-x="18" data-offset-y="12"> 123 <div style="width: 12px; height: 12px"></div> 124 </div> 125 </div> 126 127 <br> 128 129 <!-- Case 2, but RTL --> 130 <div class="container rtl"> 131 <div class="abspos case2" style="border: solid orange 6px;" 132 data-expected-width="12" data-expected-height="12" 133 data-offset-x="-10" data-offset-y="12"></div> 134 </div> 135 <div class="container rtl"> 136 <div class="abspos case2" style="width: 12px; height: 12px;" 137 data-expected-width="12" data-expected-height="12" 138 data-offset-x="-10" data-offset-y="12"></div> 139 </div> 140 <div class="container rtl"> 141 <div class="abspos case2" style="min-width: 12px; min-height: 12px;" 142 data-expected-width="12" data-expected-height="12" 143 data-offset-x="-10" data-offset-y="12"></div> 144 </div> 145 <div class="container rtl"> 146 <div class="abspos case2" style="width: min-content; height: min-content;" 147 data-expected-width="12" data-expected-height="12" 148 data-offset-x="-10" data-offset-y="12"> 149 <div style="width: 12px; height: 12px"></div> 150 </div> 151 </div> 152 <div class="container rtl"> 153 <div class="abspos case2" style="display: table;" 154 data-expected-width="12" data-expected-height="12" 155 data-offset-x="-10" data-offset-y="12"> 156 <div style="width: 12px; height: 12px"></div> 157 </div> 158 </div> 159 160 <hr> 161 162 <!-- Case 3: No margins, fixed insets, auto sizes --> 163 <div class="container"> 164 <div class="abspos case3" 165 data-expected-width="20" data-expected-height="20" 166 data-offset-x="8" data-offset-y="8"></div> 167 </div> 168 <div class="container rtl"> 169 <div class="abspos case3" 170 data-expected-width="20" data-expected-height="20" 171 data-offset-x="-8" data-offset-y="8"></div> 172 </div> 173 174 <hr> 175 176 <!-- Case 4: Fixed size, unsafe center alignment, varying insets --> 177 <div class="container"> 178 <div class="abspos case4" style="inset: 5px" 179 data-expected-width="10" data-expected-height="10" 180 data-offset-x="5" data-offset-y="5"></div> 181 </div> 182 <div class="container"> 183 <div class="abspos case4" style="inset: 10px" 184 data-expected-width="10" data-expected-height="10" 185 data-offset-x="5" data-offset-y="5"></div> 186 </div> 187 <div class="container"> 188 <div class="abspos case4" style="inset: 15px" 189 data-expected-width="10" data-expected-height="10" 190 data-offset-x="10" data-offset-y="10"></div> 191 </div> 192 <div class="container"> 193 <div class="abspos case4" style="inset: 20px" 194 data-expected-width="10" data-expected-height="10" 195 data-offset-x="15" data-offset-y="15"></div> 196 </div> 197 <div class="container"> 198 <div class="abspos case4" style="inset: 25px" 199 data-expected-width="10" data-expected-height="10" 200 data-offset-x="20" data-offset-y="20"></div> 201 </div> 202 203 <br> 204 205 <!-- Case 4, but RTL --> 206 <div class="container rtl"> 207 <div class="abspos case4" style="inset: 5px" 208 data-expected-width="10" data-expected-height="10" 209 data-offset-x="5" data-offset-y="5"></div> 210 </div> 211 <div class="container rtl"> 212 <div class="abspos case4" style="inset: 10px" 213 data-expected-width="10" data-expected-height="10" 214 data-offset-x="5" data-offset-y="5"></div> 215 </div> 216 <div class="container rtl"> 217 <div class="abspos case4" style="inset: 15px" 218 data-expected-width="10" data-expected-height="10" 219 data-offset-x="0" data-offset-y="10"></div> 220 </div> 221 <div class="container rtl"> 222 <div class="abspos case4" style="inset: 20px" 223 data-expected-width="10" data-expected-height="10" 224 data-offset-x="-5" data-offset-y="15"></div> 225 </div> 226 <div class="container rtl"> 227 <div class="abspos case4" style="inset: 25px" 228 data-expected-width="10" data-expected-height="10" 229 data-offset-x="-10" data-offset-y="20"></div> 230 </div> 231 232 233 <script src="/resources/testharness.js"></script> 234 <script src="/resources/testharnessreport.js"></script> 235 <script src="/resources/check-layout-th.js"></script> 236 <script> 237 checkLayout(".abspos"); 238 </script>