replaced-element-043.html (29091B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS aspect-ratio: replaced element with various sizing properties</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6071#issuecomment-2243986313"> 7 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11236"> 8 <meta name="assert" content=" 9 Min, max and preferred sizing constraints are transferred to the other axis via the preferred aspect ratio. 10 In case of conflict, 11 - Non-transferred constraints take precedence over transferred ones. 12 - Min constraints take precedence over max ones from the same axis. 13 "> 14 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 15 16 <style> 17 canvas { 18 aspect-ratio: 2; 19 width: auto; 20 height: auto; 21 outline: 1px solid; 22 margin: 2px; 23 vertical-align: middle; 24 } 25 </style> 26 27 <table border="1" cellspacing="0"> 28 <tr> 29 <td><code>width</code></td> 30 <td> 31 <canvas width="15" height="15" style="width: 0" 32 data-expected-width="0" data-expected-height="0"></canvas> 33 <canvas width="15" height="15" style="width: 10px" 34 data-expected-width="10" data-expected-height="5"></canvas> 35 <canvas width="15" height="15" style="width: 20px" 36 data-expected-width="20" data-expected-height="10"></canvas> 37 <canvas width="15" height="15" style="width: 30px" 38 data-expected-width="30" data-expected-height="15"></canvas> 39 <canvas width="15" height="15" style="width: 40px" 40 data-expected-width="40" data-expected-height="20"></canvas> 41 <canvas width="15" height="15" style="width: 50px" 42 data-expected-width="50" data-expected-height="25"></canvas> 43 </td> 44 </tr> 45 <tr> 46 <td><code>height</code></td> 47 <td> 48 <canvas width="15" height="15" style="height: 0px" 49 data-expected-width="0" data-expected-height="0"></canvas> 50 <canvas width="15" height="15" style="height: 5px" 51 data-expected-width="10" data-expected-height="5"></canvas> 52 <canvas width="15" height="15" style="height: 10px" 53 data-expected-width="20" data-expected-height="10"></canvas> 54 <canvas width="15" height="15" style="height: 15px" 55 data-expected-width="30" data-expected-height="15"></canvas> 56 <canvas width="15" height="15" style="height: 20px" 57 data-expected-width="40" data-expected-height="20"></canvas> 58 <canvas width="15" height="15" style="height: 25px" 59 data-expected-width="50" data-expected-height="25"></canvas> 60 </td> 61 </tr> 62 <tr> 63 <td><code>min-width</code></td> 64 <td> 65 <canvas width="15" height="15" style="min-width: 0px" 66 data-expected-width="15" data-expected-height="8"></canvas> 67 <canvas width="15" height="15" style="min-width: 10px" 68 data-expected-width="15" data-expected-height="8"></canvas> 69 <canvas width="15" height="15" style="min-width: 20px" 70 data-expected-width="20" data-expected-height="10"></canvas> 71 <canvas width="15" height="15" style="min-width: 30px" 72 data-expected-width="30" data-expected-height="15"></canvas> 73 <canvas width="15" height="15" style="min-width: 40px" 74 data-expected-width="40" data-expected-height="20"></canvas> 75 <canvas width="15" height="15" style="min-width: 50px" 76 data-expected-width="50" data-expected-height="25"></canvas> 77 </td> 78 </tr> 79 <tr> 80 <td><code>min-height</code></td> 81 <td> 82 <canvas width="15" height="15" style="min-height: 0px" 83 data-expected-width="15" data-expected-height="8"></canvas> 84 <canvas width="15" height="15" style="min-height: 5px" 85 data-expected-width="15" data-expected-height="8"></canvas> 86 <canvas width="15" height="15" style="min-height: 10px" 87 data-expected-width="20" data-expected-height="10"></canvas> 88 <canvas width="15" height="15" style="min-height: 15px" 89 data-expected-width="30" data-expected-height="15"></canvas> 90 <canvas width="15" height="15" style="min-height: 20px" 91 data-expected-width="40" data-expected-height="20"></canvas> 92 <canvas width="15" height="15" style="min-height: 25px" 93 data-expected-width="50" data-expected-height="25"></canvas> 94 </td> 95 </tr> 96 <tr> 97 <td><code>max-width</code></td> 98 <td> 99 <canvas width="15" height="15" style="max-width: 0px" 100 data-expected-width="0" data-expected-height="0"></canvas> 101 <canvas width="15" height="15" style="max-width: 10px" 102 data-expected-width="10" data-expected-height="5"></canvas> 103 <canvas width="15" height="15" style="max-width: 20px" 104 data-expected-width="15" data-expected-height="8"></canvas> 105 <canvas width="15" height="15" style="max-width: 30px" 106 data-expected-width="15" data-expected-height="8"></canvas> 107 <canvas width="15" height="15" style="max-width: 40px" 108 data-expected-width="15" data-expected-height="8"></canvas> 109 <canvas width="15" height="15" style="max-width: 50px" 110 data-expected-width="15" data-expected-height="8"></canvas> 111 </td> 112 </tr> 113 <tr> 114 <td><code>max-height</code></td> 115 <td> 116 <canvas width="15" height="15" style="max-height: 0px" 117 data-expected-width="0" data-expected-height="0"></canvas> 118 <canvas width="15" height="15" style="max-height: 5px" 119 data-expected-width="10" data-expected-height="5"></canvas> 120 <canvas width="15" height="15" style="max-height: 10px" 121 data-expected-width="15" data-expected-height="8"></canvas> 122 <canvas width="15" height="15" style="max-height: 15px" 123 data-expected-width="15" data-expected-height="8"></canvas> 124 <canvas width="15" height="15" style="max-height: 20px" 125 data-expected-width="15" data-expected-height="8"></canvas> 126 <canvas width="15" height="15" style="max-height: 25px" 127 data-expected-width="15" data-expected-height="8"></canvas> 128 </td> 129 </tr> 130 <tr> 131 <td><code>min-width</code>, <code>min-height</code></td> 132 <td> 133 <canvas width="15" height="15" style="min-width: 0px; min-height: 0px" 134 data-expected-width="15" data-expected-height="8"></canvas> 135 <canvas width="15" height="15" style="min-width: 0px; min-height: 5px" 136 data-expected-width="15" data-expected-height="8"></canvas> 137 <canvas width="15" height="15" style="min-width: 0px; min-height: 10px" 138 data-expected-width="20" data-expected-height="10"></canvas> 139 <canvas width="15" height="15" style="min-width: 0px; min-height: 15px" 140 data-expected-width="30" data-expected-height="15"></canvas> 141 <canvas width="15" height="15" style="min-width: 0px; min-height: 20px" 142 data-expected-width="40" data-expected-height="20"></canvas> 143 <canvas width="15" height="15" style="min-width: 0px; min-height: 25px" 144 data-expected-width="50" data-expected-height="25"></canvas> 145 <br> 146 <canvas width="15" height="15" style="min-width: 10px; min-height: 0px" 147 data-expected-width="15" data-expected-height="8"></canvas> 148 <canvas width="15" height="15" style="min-width: 10px; min-height: 5px" 149 data-expected-width="15" data-expected-height="8"></canvas> 150 <canvas width="15" height="15" style="min-width: 10px; min-height: 10px" 151 data-expected-width="20" data-expected-height="10"></canvas> 152 <canvas width="15" height="15" style="min-width: 10px; min-height: 15px" 153 data-expected-width="30" data-expected-height="15"></canvas> 154 <canvas width="15" height="15" style="min-width: 10px; min-height: 20px" 155 data-expected-width="40" data-expected-height="20"></canvas> 156 <canvas width="15" height="15" style="min-width: 10px; min-height: 25px" 157 data-expected-width="50" data-expected-height="25"></canvas> 158 <br> 159 <canvas width="15" height="15" style="min-width: 20px; min-height: 0px" 160 data-expected-width="20" data-expected-height="10"></canvas> 161 <canvas width="15" height="15" style="min-width: 20px; min-height: 5px" 162 data-expected-width="20" data-expected-height="10"></canvas> 163 <canvas width="15" height="15" style="min-width: 20px; min-height: 10px" 164 data-expected-width="20" data-expected-height="10"></canvas> 165 <canvas width="15" height="15" style="min-width: 20px; min-height: 15px" 166 data-expected-width="30" data-expected-height="15"></canvas> 167 <canvas width="15" height="15" style="min-width: 20px; min-height: 20px" 168 data-expected-width="40" data-expected-height="20"></canvas> 169 <canvas width="15" height="15" style="min-width: 20px; min-height: 25px" 170 data-expected-width="50" data-expected-height="25"></canvas> 171 <br> 172 <canvas width="15" height="15" style="min-width: 30px; min-height: 0px" 173 data-expected-width="30" data-expected-height="15"></canvas> 174 <canvas width="15" height="15" style="min-width: 30px; min-height: 5px" 175 data-expected-width="30" data-expected-height="15"></canvas> 176 <canvas width="15" height="15" style="min-width: 30px; min-height: 10px" 177 data-expected-width="30" data-expected-height="15"></canvas> 178 <canvas width="15" height="15" style="min-width: 30px; min-height: 15px" 179 data-expected-width="30" data-expected-height="15"></canvas> 180 <canvas width="15" height="15" style="min-width: 30px; min-height: 20px" 181 data-expected-width="40" data-expected-height="20"></canvas> 182 <canvas width="15" height="15" style="min-width: 30px; min-height: 25px" 183 data-expected-width="50" data-expected-height="25"></canvas> 184 <br> 185 <canvas width="15" height="15" style="min-width: 40px; min-height: 0px" 186 data-expected-width="40" data-expected-height="20"></canvas> 187 <canvas width="15" height="15" style="min-width: 40px; min-height: 5px" 188 data-expected-width="40" data-expected-height="20"></canvas> 189 <canvas width="15" height="15" style="min-width: 40px; min-height: 10px" 190 data-expected-width="40" data-expected-height="20"></canvas> 191 <canvas width="15" height="15" style="min-width: 40px; min-height: 15px" 192 data-expected-width="40" data-expected-height="20"></canvas> 193 <canvas width="15" height="15" style="min-width: 40px; min-height: 20px" 194 data-expected-width="40" data-expected-height="20"></canvas> 195 <canvas width="15" height="15" style="min-width: 40px; min-height: 25px" 196 data-expected-width="50" data-expected-height="25"></canvas> 197 <br> 198 <canvas width="15" height="15" style="min-width: 50px; min-height: 0px" 199 data-expected-width="50" data-expected-height="25"></canvas> 200 <canvas width="15" height="15" style="min-width: 50px; min-height: 5px" 201 data-expected-width="50" data-expected-height="25"></canvas> 202 <canvas width="15" height="15" style="min-width: 50px; min-height: 10px" 203 data-expected-width="50" data-expected-height="25"></canvas> 204 <canvas width="15" height="15" style="min-width: 50px; min-height: 15px" 205 data-expected-width="50" data-expected-height="25"></canvas> 206 <canvas width="15" height="15" style="min-width: 50px; min-height: 20px" 207 data-expected-width="50" data-expected-height="25"></canvas> 208 <canvas width="15" height="15" style="min-width: 50px; min-height: 25px" 209 data-expected-width="50" data-expected-height="25"></canvas> 210 </td> 211 </tr> 212 <tr> 213 <td><code>min-width</code>, <code>max-height</code></td> 214 <td> 215 <canvas width="15" height="15" style="min-width: 0px; max-height: 0px" 216 data-expected-width="0" data-expected-height="0"></canvas> 217 <canvas width="15" height="15" style="min-width: 0px; max-height: 5px" 218 data-expected-width="10" data-expected-height="5"></canvas> 219 <canvas width="15" height="15" style="min-width: 0px; max-height: 10px" 220 data-expected-width="15" data-expected-height="8"></canvas> 221 <canvas width="15" height="15" style="min-width: 0px; max-height: 15px" 222 data-expected-width="15" data-expected-height="8"></canvas> 223 <canvas width="15" height="15" style="min-width: 0px; max-height: 20px" 224 data-expected-width="15" data-expected-height="8"></canvas> 225 <canvas width="15" height="15" style="min-width: 0px; max-height: 25px" 226 data-expected-width="15" data-expected-height="8"></canvas> 227 <br> 228 <canvas width="15" height="15" style="min-width: 10px; max-height: 0px" 229 data-expected-width="10" data-expected-height="0"></canvas> 230 <canvas width="15" height="15" style="min-width: 10px; max-height: 5px" 231 data-expected-width="10" data-expected-height="5"></canvas> 232 <canvas width="15" height="15" style="min-width: 10px; max-height: 10px" 233 data-expected-width="15" data-expected-height="8"></canvas> 234 <canvas width="15" height="15" style="min-width: 10px; max-height: 15px" 235 data-expected-width="15" data-expected-height="8"></canvas> 236 <canvas width="15" height="15" style="min-width: 10px; max-height: 20px" 237 data-expected-width="15" data-expected-height="8"></canvas> 238 <canvas width="15" height="15" style="min-width: 10px; max-height: 25px" 239 data-expected-width="15" data-expected-height="8"></canvas> 240 <br> 241 <canvas width="15" height="15" style="min-width: 20px; max-height: 0px" 242 data-expected-width="20" data-expected-height="0"></canvas> 243 <canvas width="15" height="15" style="min-width: 20px; max-height: 5px" 244 data-expected-width="20" data-expected-height="5"></canvas> 245 <canvas width="15" height="15" style="min-width: 20px; max-height: 10px" 246 data-expected-width="20" data-expected-height="10"></canvas> 247 <canvas width="15" height="15" style="min-width: 20px; max-height: 15px" 248 data-expected-width="20" data-expected-height="10"></canvas> 249 <canvas width="15" height="15" style="min-width: 20px; max-height: 20px" 250 data-expected-width="20" data-expected-height="10"></canvas> 251 <canvas width="15" height="15" style="min-width: 20px; max-height: 25px" 252 data-expected-width="20" data-expected-height="10"></canvas> 253 <br> 254 <canvas width="15" height="15" style="min-width: 30px; max-height: 0px" 255 data-expected-width="30" data-expected-height="0"></canvas> 256 <canvas width="15" height="15" style="min-width: 30px; max-height: 5px" 257 data-expected-width="30" data-expected-height="5"></canvas> 258 <canvas width="15" height="15" style="min-width: 30px; max-height: 10px" 259 data-expected-width="30" data-expected-height="10"></canvas> 260 <canvas width="15" height="15" style="min-width: 30px; max-height: 15px" 261 data-expected-width="30" data-expected-height="15"></canvas> 262 <canvas width="15" height="15" style="min-width: 30px; max-height: 20px" 263 data-expected-width="30" data-expected-height="15"></canvas> 264 <canvas width="15" height="15" style="min-width: 30px; max-height: 25px" 265 data-expected-width="30" data-expected-height="15"></canvas> 266 <br> 267 <canvas width="15" height="15" style="min-width: 40px; max-height: 0px" 268 data-expected-width="40" data-expected-height="0"></canvas> 269 <canvas width="15" height="15" style="min-width: 40px; max-height: 5px" 270 data-expected-width="40" data-expected-height="5"></canvas> 271 <canvas width="15" height="15" style="min-width: 40px; max-height: 10px" 272 data-expected-width="40" data-expected-height="10"></canvas> 273 <canvas width="15" height="15" style="min-width: 40px; max-height: 15px" 274 data-expected-width="40" data-expected-height="15"></canvas> 275 <canvas width="15" height="15" style="min-width: 40px; max-height: 20px" 276 data-expected-width="40" data-expected-height="20"></canvas> 277 <canvas width="15" height="15" style="min-width: 40px; max-height: 25px" 278 data-expected-width="40" data-expected-height="20"></canvas> 279 <br> 280 <canvas width="15" height="15" style="min-width: 50px; max-height: 0px" 281 data-expected-width="50" data-expected-height="0"></canvas> 282 <canvas width="15" height="15" style="min-width: 50px; max-height: 5px" 283 data-expected-width="50" data-expected-height="5"></canvas> 284 <canvas width="15" height="15" style="min-width: 50px; max-height: 10px" 285 data-expected-width="50" data-expected-height="10"></canvas> 286 <canvas width="15" height="15" style="min-width: 50px; max-height: 15px" 287 data-expected-width="50" data-expected-height="15"></canvas> 288 <canvas width="15" height="15" style="min-width: 50px; max-height: 20px" 289 data-expected-width="50" data-expected-height="20"></canvas> 290 <canvas width="15" height="15" style="min-width: 50px; max-height: 25px" 291 data-expected-width="50" data-expected-height="25"></canvas> 292 </td> 293 </tr> 294 <tr> 295 <td><code>max-width</code>, <code>min-height</code></td> 296 <td> 297 <canvas width="15" height="15" style="max-width: 0px; min-height: 0px" 298 data-expected-width="0" data-expected-height="0"></canvas> 299 <canvas width="15" height="15" style="max-width: 0px; min-height: 5px" 300 data-expected-width="0" data-expected-height="5"></canvas> 301 <canvas width="15" height="15" style="max-width: 0px; min-height: 10px" 302 data-expected-width="0" data-expected-height="10"></canvas> 303 <canvas width="15" height="15" style="max-width: 0px; min-height: 15px" 304 data-expected-width="0" data-expected-height="15"></canvas> 305 <canvas width="15" height="15" style="max-width: 0px; min-height: 20px" 306 data-expected-width="0" data-expected-height="20"></canvas> 307 <canvas width="15" height="15" style="max-width: 0px; min-height: 25px" 308 data-expected-width="0" data-expected-height="25"></canvas> 309 <br> 310 <canvas width="15" height="15" style="max-width: 10px; min-height: 0px" 311 data-expected-width="10" data-expected-height="5"></canvas> 312 <canvas width="15" height="15" style="max-width: 10px; min-height: 5px" 313 data-expected-width="10" data-expected-height="5"></canvas> 314 <canvas width="15" height="15" style="max-width: 10px; min-height: 10px" 315 data-expected-width="10" data-expected-height="10"></canvas> 316 <canvas width="15" height="15" style="max-width: 10px; min-height: 15px" 317 data-expected-width="10" data-expected-height="15"></canvas> 318 <canvas width="15" height="15" style="max-width: 10px; min-height: 20px" 319 data-expected-width="10" data-expected-height="20"></canvas> 320 <canvas width="15" height="15" style="max-width: 10px; min-height: 25px" 321 data-expected-width="10" data-expected-height="25"></canvas> 322 <br> 323 <canvas width="15" height="15" style="max-width: 20px; min-height: 0px" 324 data-expected-width="15" data-expected-height="8"></canvas> 325 <canvas width="15" height="15" style="max-width: 20px; min-height: 5px" 326 data-expected-width="15" data-expected-height="8"></canvas> 327 <canvas width="15" height="15" style="max-width: 20px; min-height: 10px" 328 data-expected-width="20" data-expected-height="10"></canvas> 329 <canvas width="15" height="15" style="max-width: 20px; min-height: 15px" 330 data-expected-width="20" data-expected-height="15"></canvas> 331 <canvas width="15" height="15" style="max-width: 20px; min-height: 20px" 332 data-expected-width="20" data-expected-height="20"></canvas> 333 <canvas width="15" height="15" style="max-width: 20px; min-height: 25px" 334 data-expected-width="20" data-expected-height="25"></canvas> 335 <br> 336 <canvas width="15" height="15" style="max-width: 30px; min-height: 0px" 337 data-expected-width="15" data-expected-height="8"></canvas> 338 <canvas width="15" height="15" style="max-width: 30px; min-height: 5px" 339 data-expected-width="15" data-expected-height="8"></canvas> 340 <canvas width="15" height="15" style="max-width: 30px; min-height: 10px" 341 data-expected-width="20" data-expected-height="10"></canvas> 342 <canvas width="15" height="15" style="max-width: 30px; min-height: 15px" 343 data-expected-width="30" data-expected-height="15"></canvas> 344 <canvas width="15" height="15" style="max-width: 30px; min-height: 20px" 345 data-expected-width="30" data-expected-height="20"></canvas> 346 <canvas width="15" height="15" style="max-width: 30px; min-height: 25px" 347 data-expected-width="30" data-expected-height="25"></canvas> 348 <br> 349 <canvas width="15" height="15" style="max-width: 40px; min-height: 0px" 350 data-expected-width="15" data-expected-height="8"></canvas> 351 <canvas width="15" height="15" style="max-width: 40px; min-height: 5px" 352 data-expected-width="15" data-expected-height="8"></canvas> 353 <canvas width="15" height="15" style="max-width: 40px; min-height: 10px" 354 data-expected-width="20" data-expected-height="10"></canvas> 355 <canvas width="15" height="15" style="max-width: 40px; min-height: 15px" 356 data-expected-width="30" data-expected-height="15"></canvas> 357 <canvas width="15" height="15" style="max-width: 40px; min-height: 20px" 358 data-expected-width="40" data-expected-height="20"></canvas> 359 <canvas width="15" height="15" style="max-width: 40px; min-height: 25px" 360 data-expected-width="40" data-expected-height="25"></canvas> 361 <br> 362 <canvas width="15" height="15" style="max-width: 50px; min-height: 0px" 363 data-expected-width="15" data-expected-height="8"></canvas> 364 <canvas width="15" height="15" style="max-width: 50px; min-height: 5px" 365 data-expected-width="15" data-expected-height="8"></canvas> 366 <canvas width="15" height="15" style="max-width: 50px; min-height: 10px" 367 data-expected-width="20" data-expected-height="10"></canvas> 368 <canvas width="15" height="15" style="max-width: 50px; min-height: 15px" 369 data-expected-width="30" data-expected-height="15"></canvas> 370 <canvas width="15" height="15" style="max-width: 50px; min-height: 20px" 371 data-expected-width="40" data-expected-height="20"></canvas> 372 <canvas width="15" height="15" style="max-width: 50px; min-height: 25px" 373 data-expected-width="50" data-expected-height="25"></canvas> 374 </td> 375 </tr> 376 <tr> 377 <td><code>max-width</code>, <code>max-height</code></td> 378 <td> 379 <canvas width="15" height="15" style="max-width: 0px; max-height: 0px" 380 data-expected-width="0" data-expected-height="0"></canvas> 381 <canvas width="15" height="15" style="max-width: 0px; max-height: 5px" 382 data-expected-width="0" data-expected-height="0"></canvas> 383 <canvas width="15" height="15" style="max-width: 0px; max-height: 10px" 384 data-expected-width="0" data-expected-height="0"></canvas> 385 <canvas width="15" height="15" style="max-width: 0px; max-height: 15px" 386 data-expected-width="0" data-expected-height="0"></canvas> 387 <canvas width="15" height="15" style="max-width: 0px; max-height: 20px" 388 data-expected-width="0" data-expected-height="0"></canvas> 389 <canvas width="15" height="15" style="max-width: 0px; max-height: 25px" 390 data-expected-width="0" data-expected-height="0"></canvas> 391 <br> 392 <canvas width="15" height="15" style="max-width: 10px; max-height: 0px" 393 data-expected-width="0" data-expected-height="0"></canvas> 394 <canvas width="15" height="15" style="max-width: 10px; max-height: 5px" 395 data-expected-width="10" data-expected-height="5"></canvas> 396 <canvas width="15" height="15" style="max-width: 10px; max-height: 10px" 397 data-expected-width="10" data-expected-height="5"></canvas> 398 <canvas width="15" height="15" style="max-width: 10px; max-height: 15px" 399 data-expected-width="10" data-expected-height="5"></canvas> 400 <canvas width="15" height="15" style="max-width: 10px; max-height: 20px" 401 data-expected-width="10" data-expected-height="5"></canvas> 402 <canvas width="15" height="15" style="max-width: 10px; max-height: 25px" 403 data-expected-width="10" data-expected-height="5"></canvas> 404 <br> 405 <canvas width="15" height="15" style="max-width: 20px; max-height: 0px" 406 data-expected-width="0" data-expected-height="0"></canvas> 407 <canvas width="15" height="15" style="max-width: 20px; max-height: 5px" 408 data-expected-width="10" data-expected-height="5"></canvas> 409 <canvas width="15" height="15" style="max-width: 20px; max-height: 10px" 410 data-expected-width="15" data-expected-height="8"></canvas> 411 <canvas width="15" height="15" style="max-width: 20px; max-height: 15px" 412 data-expected-width="15" data-expected-height="8"></canvas> 413 <canvas width="15" height="15" style="max-width: 20px; max-height: 20px" 414 data-expected-width="15" data-expected-height="8"></canvas> 415 <canvas width="15" height="15" style="max-width: 20px; max-height: 25px" 416 data-expected-width="15" data-expected-height="8"></canvas> 417 <br> 418 <canvas width="15" height="15" style="max-width: 30px; max-height: 0px" 419 data-expected-width="0" data-expected-height="0"></canvas> 420 <canvas width="15" height="15" style="max-width: 30px; max-height: 5px" 421 data-expected-width="10" data-expected-height="5"></canvas> 422 <canvas width="15" height="15" style="max-width: 30px; max-height: 10px" 423 data-expected-width="15" data-expected-height="8"></canvas> 424 <canvas width="15" height="15" style="max-width: 30px; max-height: 15px" 425 data-expected-width="15" data-expected-height="8"></canvas> 426 <canvas width="15" height="15" style="max-width: 30px; max-height: 20px" 427 data-expected-width="15" data-expected-height="8"></canvas> 428 <canvas width="15" height="15" style="max-width: 30px; max-height: 25px" 429 data-expected-width="15" data-expected-height="8"></canvas> 430 <br> 431 <canvas width="15" height="15" style="max-width: 40px; max-height: 0px" 432 data-expected-width="0" data-expected-height="0"></canvas> 433 <canvas width="15" height="15" style="max-width: 40px; max-height: 5px" 434 data-expected-width="10" data-expected-height="5"></canvas> 435 <canvas width="15" height="15" style="max-width: 40px; max-height: 10px" 436 data-expected-width="15" data-expected-height="8"></canvas> 437 <canvas width="15" height="15" style="max-width: 40px; max-height: 15px" 438 data-expected-width="15" data-expected-height="8"></canvas> 439 <canvas width="15" height="15" style="max-width: 40px; max-height: 20px" 440 data-expected-width="15" data-expected-height="8"></canvas> 441 <canvas width="15" height="15" style="max-width: 40px; max-height: 25px" 442 data-expected-width="15" data-expected-height="8"></canvas> 443 <br> 444 <canvas width="15" height="15" style="max-width: 50px; max-height: 0px" 445 data-expected-width="0" data-expected-height="0"></canvas> 446 <canvas width="15" height="15" style="max-width: 50px; max-height: 5px" 447 data-expected-width="10" data-expected-height="5"></canvas> 448 <canvas width="15" height="15" style="max-width: 50px; max-height: 10px" 449 data-expected-width="15" data-expected-height="8"></canvas> 450 <canvas width="15" height="15" style="max-width: 50px; max-height: 15px" 451 data-expected-width="15" data-expected-height="8"></canvas> 452 <canvas width="15" height="15" style="max-width: 50px; max-height: 20px" 453 data-expected-width="15" data-expected-height="8"></canvas> 454 <canvas width="15" height="15" style="max-width: 50px; max-height: 25px" 455 data-expected-width="15" data-expected-height="8"></canvas> 456 </td> 457 </tr> 458 </table> 459 460 <script src="/resources/testharness.js"></script> 461 <script src="/resources/testharnessreport.js"></script> 462 <script src="/resources/check-layout-th.js"></script> 463 <script> 464 checkLayout("canvas"); 465 </script>