block-height-008.html (25317B)
1 <!DOCTYPE html> 2 <link rel="help" 3 href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> 4 <meta name="assert" 5 content="margins of the stretched element are accounted for correctly in more writing mode combinations and presence of borders"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/check-layout-th.js"></script> 9 10 <style> 11 .container { 12 width: 50px; 13 height: 50px; 14 margin: 3px; 15 background: magenta; 16 position: relative; 17 } 18 19 .child { 20 margin: 1px 3px 5px 7px; 21 background: cyan; 22 font-size: 10px; 23 } 24 </style> 25 26 <div id="log"></div> 27 <main id="main" style="display: flex; gap: 15px;"> 28 <div>vertical-rl 29 <div style="writing-mode: vertical-rl;"> 30 <div class="container" style="border-top: 5px solid;"> 31 <div class="child" data-expected-width="20" data-expected-height="44" 32 style="writing-mode: horizontal-tb; width: 20px; height: stretch;">1 33 </div> 34 </div> 35 </div> 36 <div style="writing-mode: vertical-rl;"> 37 <div class="container" style="border-top: 5px solid;"> 38 <div class="child" data-expected-width="50" data-expected-height="20" 39 style="writing-mode: horizontal-tb; width: stretch; height: 20px;">2 40 </div> 41 </div> 42 </div> 43 <div style="writing-mode: vertical-rl;"> 44 <div class="container" style="border-right: 5px solid;"> 45 <div class="child" data-expected-width="20" data-expected-height="44" 46 style="writing-mode: horizontal-tb; width: 20px; height: stretch;">3 47 </div> 48 </div> 49 </div> 50 <div style="writing-mode: vertical-rl;"> 51 <div class="container" style="border-right: 5px solid;"> 52 <div class="child" data-expected-width="47" data-expected-height="20" 53 style="writing-mode: horizontal-tb; width: stretch; height: 20px;">4 54 </div> 55 </div> 56 </div> 57 <div style="writing-mode: vertical-rl;"> 58 <div class="container" style="border-top: 5px solid;"> 59 <div class="child" data-expected-width="20" data-expected-height="44" 60 style="writing-mode: vertical-rl; width: 20px; height: stretch;">5 61 </div> 62 </div> 63 </div> 64 <div style="writing-mode: vertical-rl;"> 65 <div class="container" style="border-top: 5px solid;"> 66 <div class="child" data-expected-width="50" data-expected-height="20" 67 style="writing-mode: vertical-rl; width: stretch; height: 20px;">6 68 </div> 69 </div> 70 </div> 71 <div style="writing-mode: vertical-rl;"> 72 <div class="container" style="border-right: 5px solid;"> 73 <div class="child" data-expected-width="20" data-expected-height="44" 74 style="writing-mode: vertical-rl; width: 20px; height: stretch;">7 75 </div> 76 </div> 77 </div> 78 <div style="writing-mode: vertical-rl;"> 79 <div class="container" style="border-right: 5px solid;"> 80 <div class="child" data-expected-width="47" data-expected-height="20" 81 style="writing-mode: vertical-rl; width: stretch; height: 20px;">8 82 </div> 83 </div> 84 </div> 85 <div style="writing-mode: vertical-rl;"> 86 <div class="container" style="border-top: 5px solid;"> 87 <div class="child" data-expected-width="20" data-expected-height="44" 88 style="writing-mode: vertical-lr; width: 20px; height: stretch;">9 89 </div> 90 </div> 91 </div> 92 <div style="writing-mode: vertical-rl;"> 93 <div class="container" style="border-top: 5px solid;"> 94 <div class="child" data-expected-width="50" data-expected-height="20" 95 style="writing-mode: vertical-lr; width: stretch; height: 20px;">10 96 </div> 97 </div> 98 </div> 99 <div style="writing-mode: vertical-rl;"> 100 <div class="container" style="border-right: 5px solid;"> 101 <div class="child" data-expected-width="20" data-expected-height="44" 102 style="writing-mode: vertical-lr; width: 20px; height: stretch;">11 103 </div> 104 </div> 105 </div> 106 <div style="writing-mode: vertical-rl;"> 107 <div class="container" style="border-right: 5px solid;"> 108 <div class="child" data-expected-width="47" data-expected-height="20" 109 style="writing-mode: vertical-lr; width: stretch; height: 20px;">12 110 </div> 111 </div> 112 </div> 113 <div style="writing-mode: vertical-rl;"> 114 <div class="container" style="border-top: 5px solid;"> 115 <div class="child" data-expected-width="20" data-expected-height="44" 116 style="writing-mode: sideways-rl; width: 20px; height: stretch;">13 117 </div> 118 </div> 119 </div> 120 <div style="writing-mode: vertical-rl;"> 121 <div class="container" style="border-top: 5px solid;"> 122 <div class="child" data-expected-width="50" data-expected-height="20" 123 style="writing-mode: sideways-rl; width: stretch; height: 20px;">14 124 </div> 125 </div> 126 </div> 127 <div style="writing-mode: vertical-rl;"> 128 <div class="container" style="border-right: 5px solid;"> 129 <div class="child" data-expected-width="20" data-expected-height="44" 130 style="writing-mode: sideways-rl; width: 20px; height: stretch;">15 131 </div> 132 </div> 133 </div> 134 <div style="writing-mode: vertical-rl;"> 135 <div class="container" style="border-right: 5px solid;"> 136 <div class="child" data-expected-width="47" data-expected-height="20" 137 style="writing-mode: sideways-rl; width: stretch; height: 20px;">16 138 </div> 139 </div> 140 </div> 141 <div style="writing-mode: vertical-rl;"> 142 <div class="container" style="border-top: 5px solid;"> 143 <div class="child" data-expected-width="20" data-expected-height="44" 144 style="writing-mode: sideways-lr; width: 20px; height: stretch;">17 145 </div> 146 </div> 147 </div> 148 <div style="writing-mode: vertical-rl;"> 149 <div class="container" style="border-top: 5px solid;"> 150 <div class="child" data-expected-width="50" data-expected-height="20" 151 style="writing-mode: sideways-lr; width: stretch; height: 20px;">18 152 </div> 153 </div> 154 </div> 155 <div style="writing-mode: vertical-rl;"> 156 <div class="container" style="border-right: 5px solid;"> 157 <div class="child" data-expected-width="20" data-expected-height="44" 158 style="writing-mode: sideways-lr; width: 20px; height: stretch;">19 159 </div> 160 </div> 161 </div> 162 <div style="writing-mode: vertical-rl;"> 163 <div class="container" style="border-right: 5px solid;"> 164 <div class="child" data-expected-width="47" data-expected-height="20" 165 style="writing-mode: sideways-lr; width: stretch; height: 20px;">20 166 </div> 167 </div> 168 </div> 169 </div> 170 <div>vertical-lr 171 <div style="writing-mode: vertical-lr;"> 172 <div class="container" style="border-top: 5px solid;"> 173 <div class="child" data-expected-width="20" data-expected-height="44" 174 style="writing-mode: horizontal-tb; width: 20px; height: stretch;">21 175 </div> 176 </div> 177 </div> 178 <div style="writing-mode: vertical-lr;"> 179 <div class="container" style="border-top: 5px solid;"> 180 <div class="child" data-expected-width="50" data-expected-height="20" 181 style="writing-mode: horizontal-tb; width: stretch; height: 20px;">22 182 </div> 183 </div> 184 </div> 185 <div style="writing-mode: vertical-lr;"> 186 <div class="container" style="border-right: 5px solid;"> 187 <div class="child" data-expected-width="20" data-expected-height="44" 188 style="writing-mode: horizontal-tb; width: 20px; height: stretch;">23 189 </div> 190 </div> 191 </div> 192 <div style="writing-mode: vertical-lr;"> 193 <div class="container" style="border-right: 5px solid;"> 194 <div class="child" data-expected-width="47" data-expected-height="20" 195 style="writing-mode: horizontal-tb; width: stretch; height: 20px;">24 196 </div> 197 </div> 198 </div> 199 <div style="writing-mode: vertical-lr;"> 200 <div class="container" style="border-top: 5px solid;"> 201 <div class="child" data-expected-width="20" data-expected-height="44" 202 style="writing-mode: vertical-rl; width: 20px; height: stretch;">25 203 </div> 204 </div> 205 </div> 206 <div style="writing-mode: vertical-lr;"> 207 <div class="container" style="border-top: 5px solid;"> 208 <div class="child" data-expected-width="50" data-expected-height="20" 209 style="writing-mode: vertical-rl; width: stretch; height: 20px;">26 210 </div> 211 </div> 212 </div> 213 <div style="writing-mode: vertical-lr;"> 214 <div class="container" style="border-right: 5px solid;"> 215 <div class="child" data-expected-width="20" data-expected-height="44" 216 style="writing-mode: vertical-rl; width: 20px; height: stretch;">27 217 </div> 218 </div> 219 </div> 220 <div style="writing-mode: vertical-lr;"> 221 <div class="container" style="border-right: 5px solid;"> 222 <div class="child" data-expected-width="47" data-expected-height="20" 223 style="writing-mode: vertical-rl; width: stretch; height: 20px;">28 224 </div> 225 </div> 226 </div> 227 <div style="writing-mode: vertical-lr;"> 228 <div class="container" style="border-top: 5px solid;"> 229 <div class="child" data-expected-width="20" data-expected-height="44" 230 style="writing-mode: vertical-lr; width: 20px; height: stretch;">29 231 </div> 232 </div> 233 </div> 234 <div style="writing-mode: vertical-lr;"> 235 <div class="container" style="border-top: 5px solid;"> 236 <div class="child" data-expected-width="50" data-expected-height="20" 237 style="writing-mode: vertical-lr; width: stretch; height: 20px;">30 238 </div> 239 </div> 240 </div> 241 <div style="writing-mode: vertical-lr;"> 242 <div class="container" style="border-right: 5px solid;"> 243 <div class="child" data-expected-width="20" data-expected-height="44" 244 style="writing-mode: vertical-lr; width: 20px; height: stretch;">31 245 </div> 246 </div> 247 </div> 248 <div style="writing-mode: vertical-lr;"> 249 <div class="container" style="border-right: 5px solid;"> 250 <div class="child" data-expected-width="47" data-expected-height="20" 251 style="writing-mode: vertical-lr; width: stretch; height: 20px;">32 252 </div> 253 </div> 254 </div> 255 <div style="writing-mode: vertical-lr;"> 256 <div class="container" style="border-top: 5px solid;"> 257 <div class="child" data-expected-width="20" data-expected-height="44" 258 style="writing-mode: sideways-rl; width: 20px; height: stretch;">33 259 </div> 260 </div> 261 </div> 262 <div style="writing-mode: vertical-lr;"> 263 <div class="container" style="border-top: 5px solid;"> 264 <div class="child" data-expected-width="50" data-expected-height="20" 265 style="writing-mode: sideways-rl; width: stretch; height: 20px;">34 266 </div> 267 </div> 268 </div> 269 <div style="writing-mode: vertical-lr;"> 270 <div class="container" style="border-right: 5px solid;"> 271 <div class="child" data-expected-width="20" data-expected-height="44" 272 style="writing-mode: sideways-rl; width: 20px; height: stretch;">35 273 </div> 274 </div> 275 </div> 276 <div style="writing-mode: vertical-lr;"> 277 <div class="container" style="border-right: 5px solid;"> 278 <div class="child" data-expected-width="47" data-expected-height="20" 279 style="writing-mode: sideways-rl; width: stretch; height: 20px;">36 280 </div> 281 </div> 282 </div> 283 <div style="writing-mode: vertical-lr;"> 284 <div class="container" style="border-top: 5px solid;"> 285 <div class="child" data-expected-width="20" data-expected-height="44" 286 style="writing-mode: sideways-lr; width: 20px; height: stretch;">37 287 </div> 288 </div> 289 </div> 290 <div style="writing-mode: vertical-lr;"> 291 <div class="container" style="border-top: 5px solid;"> 292 <div class="child" data-expected-width="50" data-expected-height="20" 293 style="writing-mode: sideways-lr; width: stretch; height: 20px;">38 294 </div> 295 </div> 296 </div> 297 <div style="writing-mode: vertical-lr;"> 298 <div class="container" style="border-right: 5px solid;"> 299 <div class="child" data-expected-width="20" data-expected-height="44" 300 style="writing-mode: sideways-lr; width: 20px; height: stretch;">39 301 </div> 302 </div> 303 </div> 304 <div style="writing-mode: vertical-lr;"> 305 <div class="container" style="border-right: 5px solid;"> 306 <div class="child" data-expected-width="47" data-expected-height="20" 307 style="writing-mode: sideways-lr; width: stretch; height: 20px;">40 308 </div> 309 </div> 310 </div> 311 </div> 312 <div>sideways-rl 313 <div style="writing-mode: sideways-rl;"> 314 <div class="container" style="border-top: 5px solid;"> 315 <div class="child" data-expected-width="20" data-expected-height="44" 316 style="writing-mode: horizontal-tb; width: 20px; height: stretch;">41 317 </div> 318 </div> 319 </div> 320 <div style="writing-mode: sideways-rl;"> 321 <div class="container" style="border-top: 5px solid;"> 322 <div class="child" data-expected-width="50" data-expected-height="20" 323 style="writing-mode: horizontal-tb; width: stretch; height: 20px;">42 324 </div> 325 </div> 326 </div> 327 <div style="writing-mode: sideways-rl;"> 328 <div class="container" style="border-right: 5px solid;"> 329 <div class="child" data-expected-width="20" data-expected-height="44" 330 style="writing-mode: horizontal-tb; width: 20px; height: stretch;">43 331 </div> 332 </div> 333 </div> 334 <div style="writing-mode: sideways-rl;"> 335 <div class="container" style="border-right: 5px solid;"> 336 <div class="child" data-expected-width="47" data-expected-height="20" 337 style="writing-mode: horizontal-tb; width: stretch; height: 20px;">44 338 </div> 339 </div> 340 </div> 341 <div style="writing-mode: sideways-rl;"> 342 <div class="container" style="border-top: 5px solid;"> 343 <div class="child" data-expected-width="20" data-expected-height="44" 344 style="writing-mode: vertical-rl; width: 20px; height: stretch;">45 345 </div> 346 </div> 347 </div> 348 <div style="writing-mode: sideways-rl;"> 349 <div class="container" style="border-top: 5px solid;"> 350 <div class="child" data-expected-width="50" data-expected-height="20" 351 style="writing-mode: vertical-rl; width: stretch; height: 20px;">46 352 </div> 353 </div> 354 </div> 355 <div style="writing-mode: sideways-rl;"> 356 <div class="container" style="border-right: 5px solid;"> 357 <div class="child" data-expected-width="20" data-expected-height="44" 358 style="writing-mode: vertical-rl; width: 20px; height: stretch;">47 359 </div> 360 </div> 361 </div> 362 <div style="writing-mode: sideways-rl;"> 363 <div class="container" style="border-right: 5px solid;"> 364 <div class="child" data-expected-width="47" data-expected-height="20" 365 style="writing-mode: vertical-rl; width: stretch; height: 20px;">48 366 </div> 367 </div> 368 </div> 369 <div style="writing-mode: sideways-rl;"> 370 <div class="container" style="border-top: 5px solid;"> 371 <div class="child" data-expected-width="20" data-expected-height="44" 372 style="writing-mode: vertical-lr; width: 20px; height: stretch;">49 373 </div> 374 </div> 375 </div> 376 <div style="writing-mode: sideways-rl;"> 377 <div class="container" style="border-top: 5px solid;"> 378 <div class="child" data-expected-width="50" data-expected-height="20" 379 style="writing-mode: vertical-lr; width: stretch; height: 20px;">50 380 </div> 381 </div> 382 </div> 383 <div style="writing-mode: sideways-rl;"> 384 <div class="container" style="border-right: 5px solid;"> 385 <div class="child" data-expected-width="20" data-expected-height="44" 386 style="writing-mode: vertical-lr; width: 20px; height: stretch;">51 387 </div> 388 </div> 389 </div> 390 <div style="writing-mode: sideways-rl;"> 391 <div class="container" style="border-right: 5px solid;"> 392 <div class="child" data-expected-width="47" data-expected-height="20" 393 style="writing-mode: vertical-lr; width: stretch; height: 20px;">52 394 </div> 395 </div> 396 </div> 397 <div style="writing-mode: sideways-rl;"> 398 <div class="container" style="border-top: 5px solid;"> 399 <div class="child" data-expected-width="20" data-expected-height="44" 400 style="writing-mode: sideways-rl; width: 20px; height: stretch;">53 401 </div> 402 </div> 403 </div> 404 <div style="writing-mode: sideways-rl;"> 405 <div class="container" style="border-top: 5px solid;"> 406 <div class="child" data-expected-width="50" data-expected-height="20" 407 style="writing-mode: sideways-rl; width: stretch; height: 20px;">54 408 </div> 409 </div> 410 </div> 411 <div style="writing-mode: sideways-rl;"> 412 <div class="container" style="border-right: 5px solid;"> 413 <div class="child" data-expected-width="20" data-expected-height="44" 414 style="writing-mode: sideways-rl; width: 20px; height: stretch;">55 415 </div> 416 </div> 417 </div> 418 <div style="writing-mode: sideways-rl;"> 419 <div class="container" style="border-right: 5px solid;"> 420 <div class="child" data-expected-width="47" data-expected-height="20" 421 style="writing-mode: sideways-rl; width: stretch; height: 20px;">56 422 </div> 423 </div> 424 </div> 425 <div style="writing-mode: sideways-rl;"> 426 <div class="container" style="border-top: 5px solid;"> 427 <div class="child" data-expected-width="20" data-expected-height="44" 428 style="writing-mode: sideways-lr; width: 20px; height: stretch;">57 429 </div> 430 </div> 431 </div> 432 <div style="writing-mode: sideways-rl;"> 433 <div class="container" style="border-top: 5px solid;"> 434 <div class="child" data-expected-width="50" data-expected-height="20" 435 style="writing-mode: sideways-lr; width: stretch; height: 20px;">58 436 </div> 437 </div> 438 </div> 439 <div style="writing-mode: sideways-rl;"> 440 <div class="container" style="border-right: 5px solid;"> 441 <div class="child" data-expected-width="20" data-expected-height="44" 442 style="writing-mode: sideways-lr; width: 20px; height: stretch;">59 443 </div> 444 </div> 445 </div> 446 <div style="writing-mode: sideways-rl;"> 447 <div class="container" style="border-right: 5px solid;"> 448 <div class="child" data-expected-width="47" data-expected-height="20" 449 style="writing-mode: sideways-lr; width: stretch; height: 20px;">60 450 </div> 451 </div> 452 </div> 453 </div> 454 <div>sideways-lr 455 <div style="writing-mode: sideways-lr;"> 456 <div class="container" style="border-top: 5px solid;"> 457 <div class="child" data-expected-width="20" data-expected-height="44" 458 style="writing-mode: horizontal-tb; width: 20px; height: stretch;">61 459 </div> 460 </div> 461 </div> 462 <div style="writing-mode: sideways-lr;"> 463 <div class="container" style="border-top: 5px solid;"> 464 <div class="child" data-expected-width="50" data-expected-height="20" 465 style="writing-mode: horizontal-tb; width: stretch; height: 20px;">62 466 </div> 467 </div> 468 </div> 469 <div style="writing-mode: sideways-lr;"> 470 <div class="container" style="border-right: 5px solid;"> 471 <div class="child" data-expected-width="20" data-expected-height="44" 472 style="writing-mode: horizontal-tb; width: 20px; height: stretch;">63 473 </div> 474 </div> 475 </div> 476 <div style="writing-mode: sideways-lr;"> 477 <div class="container" style="border-right: 5px solid;"> 478 <div class="child" data-expected-width="47" data-expected-height="20" 479 style="writing-mode: horizontal-tb; width: stretch; height: 20px;">64 480 </div> 481 </div> 482 </div> 483 <div style="writing-mode: sideways-lr;"> 484 <div class="container" style="border-top: 5px solid;"> 485 <div class="child" data-expected-width="20" data-expected-height="44" 486 style="writing-mode: vertical-rl; width: 20px; height: stretch;">65 487 </div> 488 </div> 489 </div> 490 <div style="writing-mode: sideways-lr;"> 491 <div class="container" style="border-top: 5px solid;"> 492 <div class="child" data-expected-width="50" data-expected-height="20" 493 style="writing-mode: vertical-rl; width: stretch; height: 20px;">66 494 </div> 495 </div> 496 </div> 497 <div style="writing-mode: sideways-lr;"> 498 <div class="container" style="border-right: 5px solid;"> 499 <div class="child" data-expected-width="20" data-expected-height="44" 500 style="writing-mode: vertical-rl; width: 20px; height: stretch;">67 501 </div> 502 </div> 503 </div> 504 <div style="writing-mode: sideways-lr;"> 505 <div class="container" style="border-right: 5px solid;"> 506 <div class="child" data-expected-width="47" data-expected-height="20" 507 style="writing-mode: vertical-rl; width: stretch; height: 20px;">68 508 </div> 509 </div> 510 </div> 511 <div style="writing-mode: sideways-lr;"> 512 <div class="container" style="border-top: 5px solid;"> 513 <div class="child" data-expected-width="20" data-expected-height="44" 514 style="writing-mode: vertical-lr; width: 20px; height: stretch;">69 515 </div> 516 </div> 517 </div> 518 <div style="writing-mode: sideways-lr;"> 519 <div class="container" style="border-top: 5px solid;"> 520 <div class="child" data-expected-width="50" data-expected-height="20" 521 style="writing-mode: vertical-lr; width: stretch; height: 20px;">70 522 </div> 523 </div> 524 </div> 525 <div style="writing-mode: sideways-lr;"> 526 <div class="container" style="border-right: 5px solid;"> 527 <div class="child" data-expected-width="20" data-expected-height="44" 528 style="writing-mode: vertical-lr; width: 20px; height: stretch;">71 529 </div> 530 </div> 531 </div> 532 <div style="writing-mode: sideways-lr;"> 533 <div class="container" style="border-right: 5px solid;"> 534 <div class="child" data-expected-width="47" data-expected-height="20" 535 style="writing-mode: vertical-lr; width: stretch; height: 20px;">72 536 </div> 537 </div> 538 </div> 539 <div style="writing-mode: sideways-lr;"> 540 <div class="container" style="border-top: 5px solid;"> 541 <div class="child" data-expected-width="20" data-expected-height="44" 542 style="writing-mode: sideways-rl; width: 20px; height: stretch;">73 543 </div> 544 </div> 545 </div> 546 <div style="writing-mode: sideways-lr;"> 547 <div class="container" style="border-top: 5px solid;"> 548 <div class="child" data-expected-width="50" data-expected-height="20" 549 style="writing-mode: sideways-rl; width: stretch; height: 20px;">74 550 </div> 551 </div> 552 </div> 553 <div style="writing-mode: sideways-lr;"> 554 <div class="container" style="border-right: 5px solid;"> 555 <div class="child" data-expected-width="20" data-expected-height="44" 556 style="writing-mode: sideways-rl; width: 20px; height: stretch;">75 557 </div> 558 </div> 559 </div> 560 <div style="writing-mode: sideways-lr;"> 561 <div class="container" style="border-right: 5px solid;"> 562 <div class="child" data-expected-width="47" data-expected-height="20" 563 style="writing-mode: sideways-rl; width: stretch; height: 20px;">76 564 </div> 565 </div> 566 </div> 567 <div style="writing-mode: sideways-lr;"> 568 <div class="container" style="border-top: 5px solid;"> 569 <div class="child" data-expected-width="20" data-expected-height="44" 570 style="writing-mode: sideways-lr; width: 20px; height: stretch;">77 571 </div> 572 </div> 573 </div> 574 <div style="writing-mode: sideways-lr;"> 575 <div class="container" style="border-top: 5px solid;"> 576 <div class="child" data-expected-width="50" data-expected-height="20" 577 style="writing-mode: sideways-lr; width: stretch; height: 20px;">78 578 </div> 579 </div> 580 </div> 581 <div style="writing-mode: sideways-lr;"> 582 <div class="container" style="border-right: 5px solid;"> 583 <div class="child" data-expected-width="20" data-expected-height="44" 584 style="writing-mode: sideways-lr; width: 20px; height: stretch;">79 585 </div> 586 </div> 587 </div> 588 <div style="writing-mode: sideways-lr;"> 589 <div class="container" style="border-right: 5px solid;"> 590 <div class="child" data-expected-width="47" data-expected-height="20" 591 style="writing-mode: sideways-lr; width: stretch; height: 20px;">80 592 </div> 593 </div> 594 </div> 595 </div> 596 </main> 597 598 <script> 599 checkLayout('.child'); 600 601 // Add direction:rtl (which shouldn't impact the actual resolved 602 // box sizes that 'stretch' produces), and retest: 603 for (let container of document.querySelectorAll(".container")) { 604 container.style.direction = "rtl"; 605 } 606 checkLayout('.child'); 607 608 </script>