keyword-sizes-on-abspos.html (12077B)
1 <!DOCTYPE html> 2 <title>Keyword sizes on absolutely positioned box</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#sizing-values"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values"> 6 <link rel="help" href="https://drafts.csswg.org/css-position/#abspos-layout"> 7 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11387"> 8 <meta assert="The various keyword sizes work as expected on absolutely positioned boxes."> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 10 11 <style> 12 .cb { 13 position: relative; 14 width: 100px; 15 height: 100px 16 } 17 18 .test { 19 position: absolute; 20 inset: 0; 21 margin: 5px; 22 border: 3px solid; 23 padding: 2px; 24 font: 20px/1 Ahem; 25 } 26 27 /* Set the preferred size to small amount, to test that the min size works */ 28 .test.min-width { width: 0px } 29 .test.min-height { height: 0px } 30 31 /* Set the preferred size to big amount, to test that the max size works */ 32 .test.max-width { width: 500px } 33 .test.max-height { height: 500px } 34 35 /* stretch isn't widely supported, fall back to vendor-prefixed alternatives */ 36 .width.stretch { width: -moz-available; width: -webkit-fill-available; width: stretch } 37 .min-width.stretch { min-width: -moz-available; min-width: -webkit-fill-available; min-width: stretch } 38 .max-width.stretch { max-width: -moz-available; max-width: -webkit-fill-available; max-width: stretch } 39 .height.stretch { height: -moz-available; height: -webkit-fill-available; height: stretch } 40 .min-height.stretch { min-height: -moz-available; min-height: -webkit-fill-available; min-height: stretch } 41 .max-height.stretch { max-height: -moz-available; max-height: -webkit-fill-available; max-height: stretch } 42 43 canvas { display: block; background: currentcolor } 44 .test.width canvas, .test.min-width canvas, .test.max-width canvas { width: 100% } 45 .test.height canvas, .test.min-height canvas, .test.max-height canvas { height: 100% } 46 </style> 47 <div id="log"></div> 48 49 <div class="cb"> 50 <div class="test width" style="width: initial" data-expected-width="90">XX XX</div> 51 </div> 52 <div class="cb"> 53 <div class="test width" style="width: min-content" data-expected-width="50">XX XX</div> 54 </div> 55 <div class="cb"> 56 <div class="test width" style="width: fit-content" data-expected-width="90">XX XX</div> 57 </div> 58 <div class="cb"> 59 <div class="test width" style="width: max-content" data-expected-width="110">XX XX</div> 60 </div> 61 <div class="cb"> 62 <div class="test width stretch" data-expected-width="90">XX XX</div> 63 </div> 64 65 <div class="cb"> 66 <div class="test min-width" style="min-width: initial" data-expected-width="10">XX XX</div> 67 </div> 68 <div class="cb"> 69 <div class="test min-width" style="min-width: min-content" data-expected-width="50">XX XX</div> 70 </div> 71 <div class="cb"> 72 <div class="test min-width" style="min-width: fit-content" data-expected-width="90">XX XX</div> 73 </div> 74 <div class="cb"> 75 <div class="test min-width" style="min-width: max-content" data-expected-width="110">XX XX</div> 76 </div> 77 <div class="cb"> 78 <div class="test min-width stretch" data-expected-width="90">XX XX</div> 79 </div> 80 81 <div class="cb"> 82 <div class="test max-width" style="max-width: initial" data-expected-width="510">XX XX</div> 83 </div> 84 <div class="cb"> 85 <div class="test max-width" style="max-width: min-content" data-expected-width="50">XX XX</div> 86 </div> 87 <div class="cb"> 88 <div class="test max-width" style="max-width: fit-content" data-expected-width="90">XX XX</div> 89 </div> 90 <div class="cb"> 91 <div class="test max-width" style="max-width: max-content" data-expected-width="110">XX XX</div> 92 </div> 93 <div class="cb"> 94 <div class="test max-width stretch" data-expected-width="90">XX XX</div> 95 </div> 96 97 <div class="cb"> 98 <div class="test width" style="width: initial" data-expected-width="90"> 99 <canvas width="20" height="10" data-expected-width="80" data-expected-height="40"></canvas> 100 </div> 101 </div> 102 <div class="cb"> 103 <div class="test width" style="width: min-content" data-expected-width="10"> 104 <canvas width="20" height="10" data-expected-width="0" data-expected-height="0"></canvas> 105 </div> 106 </div> 107 <div class="cb"> 108 <div class="test width" style="width: fit-content" data-expected-width="30"> 109 <canvas width="20" height="10" data-expected-width="20" data-expected-height="10"></canvas> 110 </div> 111 </div> 112 <div class="cb"> 113 <div class="test width" style="width: max-content" data-expected-width="30"> 114 <canvas width="20" height="10" data-expected-width="20" data-expected-height="10"></canvas> 115 </div> 116 </div> 117 <div class="cb"> 118 <div class="test width stretch" data-expected-width="90"> 119 <canvas width="20" height="10" data-expected-width="80" data-expected-height="40"></canvas> 120 </div> 121 </div> 122 123 <div class="cb"> 124 <div class="test min-width" style="min-width: initial" data-expected-width="10"> 125 <canvas width="20" height="10" data-expected-width="0" data-expected-height="0"></canvas> 126 </div> 127 </div> 128 <div class="cb"> 129 <div class="test min-width" style="min-width: min-content" data-expected-width="10"> 130 <canvas width="20" height="10" data-expected-width="0" data-expected-height="0"></canvas> 131 </div> 132 </div> 133 <div class="cb"> 134 <div class="test min-width" style="min-width: fit-content" data-expected-width="30"> 135 <canvas width="20" height="10" data-expected-width="20" data-expected-height="10"></canvas> 136 </div> 137 </div> 138 <div class="cb"> 139 <div class="test min-width" style="min-width: max-content" data-expected-width="30"> 140 <canvas width="20" height="10" data-expected-width="20" data-expected-height="10"></canvas> 141 </div> 142 </div> 143 <div class="cb"> 144 <div class="test min-width stretch" data-expected-width="90"> 145 <canvas width="20" height="10" data-expected-width="80" data-expected-height="40"></canvas> 146 </div> 147 </div> 148 149 <div class="cb"> 150 <div class="test max-width" style="max-width: initial" data-expected-width="510"> 151 <canvas width="20" height="10" data-expected-width="500" data-expected-height="250"></canvas> 152 </div> 153 </div> 154 <div class="cb"> 155 <div class="test max-width" style="max-width: min-content" data-expected-width="10"> 156 <canvas width="20" height="10" data-expected-width="0" data-expected-height="0"></canvas> 157 </div> 158 </div> 159 <div class="cb"> 160 <div class="test max-width" style="max-width: fit-content" data-expected-width="30"> 161 <canvas width="20" height="10" data-expected-width="20" data-expected-height="10"></canvas> 162 </div> 163 </div> 164 <div class="cb"> 165 <div class="test max-width" style="max-width: max-content" data-expected-width="30"> 166 <canvas width="20" height="10" data-expected-width="20" data-expected-height="10"></canvas> 167 </div> 168 </div> 169 <div class="cb"> 170 <div class="test max-width stretch" data-expected-width="90"> 171 <canvas width="20" height="10" data-expected-width="80" data-expected-height="40"></canvas> 172 </div> 173 </div> 174 175 <div class="cb"> 176 <div class="test height" style="height: initial" data-expected-height="90">XX XX</div> 177 </div> 178 <div class="cb"> 179 <div class="test height" style="height: min-content" data-expected-height="50">XX XX</div> 180 </div> 181 <div class="cb"> 182 <div class="test height" style="height: fit-content" data-expected-height="50">XX XX</div> 183 </div> 184 <div class="cb"> 185 <div class="test height" style="height: max-content" data-expected-height="50">XX XX</div> 186 </div> 187 <div class="cb"> 188 <div class="test height stretch" data-expected-height="90">XX XX</div> 189 </div> 190 191 <div class="cb"> 192 <div class="test min-height" style="min-height: initial" data-expected-height="10">XX XX</div> 193 </div> 194 <div class="cb"> 195 <div class="test min-height" style="min-height: min-content" data-expected-height="50">XX XX</div> 196 </div> 197 <div class="cb"> 198 <div class="test min-height" style="min-height: fit-content" data-expected-height="50">XX XX</div> 199 </div> 200 <div class="cb"> 201 <div class="test min-height" style="min-height: max-content" data-expected-height="50">XX XX</div> 202 </div> 203 <div class="cb"> 204 <div class="test min-height stretch" data-expected-height="90">XX XX</div> 205 </div> 206 207 <div class="cb"> 208 <div class="test max-height" style="max-height: initial" data-expected-height="510">XX XX</div> 209 </div> 210 <div class="cb"> 211 <div class="test max-height" style="max-height: min-content" data-expected-height="50">XX XX</div> 212 </div> 213 <div class="cb"> 214 <div class="test max-height" style="max-height: fit-content" data-expected-height="50">XX XX</div> 215 </div> 216 <div class="cb"> 217 <div class="test max-height" style="max-height: max-content" data-expected-height="50">XX XX</div> 218 </div> 219 <div class="cb"> 220 <div class="test max-height stretch" data-expected-height="90">XX XX</div> 221 </div> 222 223 <div class="cb"> 224 <div class="test height" style="height: initial" data-expected-height="90"> 225 <canvas width="10" height="20" data-expected-width="40" data-expected-height="80"></canvas> 226 </div> 227 </div> 228 <div class="cb"> 229 <div class="test height" style="height: min-content" data-expected-height="30"> 230 <canvas width="10" height="20" data-expected-width="10" data-expected-height="20"></canvas> 231 </div> 232 </div> 233 <div class="cb"> 234 <div class="test height" style="height: fit-content" data-expected-height="30"> 235 <canvas width="10" height="20" data-expected-width="10" data-expected-height="20"></canvas> 236 </div> 237 </div> 238 <div class="cb"> 239 <div class="test height" style="height: max-content" data-expected-height="30"> 240 <canvas width="10" height="20" data-expected-width="10" data-expected-height="20"></canvas> 241 </div> 242 </div> 243 <div class="cb"> 244 <div class="test height stretch" data-expected-height="90"> 245 <canvas width="10" height="20" data-expected-width="40" data-expected-height="80"></canvas> 246 </div> 247 </div> 248 249 <div class="cb"> 250 <div class="test min-height" style="min-height: initial" data-expected-height="10"> 251 <canvas width="10" height="20" data-expected-width="0" data-expected-height="0"></canvas> 252 </div> 253 </div> 254 <div class="cb"> 255 <div class="test min-height" style="min-height: min-content" data-expected-height="10"> 256 <canvas width="10" height="20" data-expected-width="0" data-expected-height="0"></canvas> 257 </div> 258 </div> 259 <div class="cb"> 260 <div class="test min-height" style="min-height: fit-content" data-expected-height="10"> 261 <canvas width="10" height="20" data-expected-width="0" data-expected-height="0"></canvas> 262 </div> 263 </div> 264 <div class="cb"> 265 <div class="test min-height" style="min-height: max-content" data-expected-height="10"> 266 <canvas width="10" height="20" data-expected-width="0" data-expected-height="0"></canvas> 267 </div> 268 </div> 269 <div class="cb"> 270 <div class="test min-height stretch" data-expected-height="90"> 271 <canvas width="10" height="20" data-expected-width="40" data-expected-height="80"></canvas> 272 </div> 273 </div> 274 275 <div class="cb"> 276 <div class="test max-height" style="max-height: initial" data-expected-height="510"> 277 <canvas width="10" height="20" data-expected-width="250" data-expected-height="500"></canvas> 278 </div> 279 </div> 280 <div class="cb"> 281 <div class="test max-height" style="max-height: min-content" data-expected-height="510"> 282 <canvas width="10" height="20" data-expected-width="250" data-expected-height="500"></canvas> 283 </div> 284 </div> 285 <div class="cb"> 286 <div class="test max-height" style="max-height: fit-content" data-expected-height="510"> 287 <canvas width="10" height="20" data-expected-width="250" data-expected-height="500"></canvas> 288 </div> 289 </div> 290 <div class="cb"> 291 <div class="test max-height" style="max-height: max-content" data-expected-height="510"> 292 <canvas width="10" height="20" data-expected-width="250" data-expected-height="500"></canvas> 293 </div> 294 </div> 295 <div class="cb"> 296 <div class="test max-height stretch" data-expected-height="90"> 297 <canvas width="10" height="20" data-expected-width="40" data-expected-height="80"></canvas> 298 </div> 299 </div> 300 301 <script src="/resources/testharness.js"></script> 302 <script src="/resources/testharnessreport.js"></script> 303 <script src="/resources/check-layout-th.js"></script> 304 <script> 305 document.fonts.ready.then(() => checkLayout(".test")); 306 </script>