wpt / css / css-sizing / stretch / block-height-008.html

Status: FAIL | Duration: 223ms | Subtests: 80/160 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (80/160)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
.child 1PASS
.child 2FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">2 </div> </div> width expected 50 but got 40
.child 3PASS
.child 4FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">4 </div> </div> width expected 47 but got 40
.child 5PASS
.child 6FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">6 </div> </div> width expected 50 but got 40
.child 7PASS
.child 8FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">8 </div> </div> width expected 47 but got 40
.child 9PASS
.child 10FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">10 </div> </div> width expected 50 but got 40
.child 11PASS
.child 12FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">12 </div> </div> width expected 47 but got 40
.child 13PASS
.child 14FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">14 </div> </div> width expected 50 but got 40
.child 15PASS
.child 16FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">16 </div> </div> width expected 47 but got 40
.child 17PASS
.child 18FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">18 </div> </div> width expected 50 but got 40
.child 19PASS
.child 20FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">20 </div> </div> width expected 47 but got 40
.child 21PASS
.child 22FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">22 </div> </div> width expected 50 but got 40
.child 23PASS
.child 24FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">24 </div> </div> width expected 47 but got 40
.child 25PASS
.child 26FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">26 </div> </div> width expected 50 but got 40
.child 27PASS
.child 28FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">28 </div> </div> width expected 47 but got 40
.child 29PASS
.child 30FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">30 </div> </div> width expected 50 but got 40
.child 31PASS
.child 32FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">32 </div> </div> width expected 47 but got 40
.child 33PASS
.child 34FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">34 </div> </div> width expected 50 but got 40
.child 35PASS
.child 36FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">36 </div> </div> width expected 47 but got 40
.child 37PASS
.child 38FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">38 </div> </div> width expected 50 but got 40
.child 39PASS
.child 40FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">40 </div> </div> width expected 47 but got 40
.child 41PASS
.child 42FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">42 </div> </div> width expected 50 but got 40
.child 43PASS
.child 44FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">44 </div> </div> width expected 47 but got 40
.child 45PASS
.child 46FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">46 </div> </div> width expected 50 but got 40
.child 47PASS
.child 48FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">48 </div> </div> width expected 47 but got 40
.child 49PASS
.child 50FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">50 </div> </div> width expected 50 but got 40
.child 51PASS
.child 52FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">52 </div> </div> width expected 47 but got 40
.child 53PASS
.child 54FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">54 </div> </div> width expected 50 but got 40
.child 55PASS
.child 56FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">56 </div> </div> width expected 47 but got 40
.child 57PASS
.child 58FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">58 </div> </div> width expected 50 but got 40
.child 59PASS
.child 60FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">60 </div> </div> width expected 47 but got 40
.child 61PASS
.child 62FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">62 </div> </div> width expected 50 but got 40
.child 63PASS
.child 64FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">64 </div> </div> width expected 47 but got 40
.child 65PASS
.child 66FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">66 </div> </div> width expected 50 but got 40
.child 67PASS
.child 68FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">68 </div> </div> width expected 47 but got 40
.child 69PASS
.child 70FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">70 </div> </div> width expected 50 but got 40
.child 71PASS
.child 72FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">72 </div> </div> width expected 47 but got 40
.child 73PASS
.child 74FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">74 </div> </div> width expected 50 but got 40
.child 75PASS
.child 76FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">76 </div> </div> width expected 47 but got 40
.child 77PASS
.child 78FAILassert_equals: <div class="container" style="border-top: 5px solid;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">78 </div> </div> width expected 50 but got 40
.child 79PASS
.child 80FAILassert_equals: <div class="container" style="border-right: 5px solid;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">80 </div> </div> width expected 47 but got 40
.child 81PASS
.child 82FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">2 </div> </div> width expected 50 but got 40
.child 83PASS
.child 84FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">4 </div> </div> width expected 47 but got 40
.child 85PASS
.child 86FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">6 </div> </div> width expected 50 but got 40
.child 87PASS
.child 88FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">8 </div> </div> width expected 47 but got 40
.child 89PASS
.child 90FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">10 </div> </div> width expected 50 but got 40
.child 91PASS
.child 92FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">12 </div> </div> width expected 47 but got 40
.child 93PASS
.child 94FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">14 </div> </div> width expected 50 but got 40
.child 95PASS
.child 96FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">16 </div> </div> width expected 47 but got 40
.child 97PASS
.child 98FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">18 </div> </div> width expected 50 but got 40
.child 99PASS
.child 100FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">20 </div> </div> width expected 47 but got 40
.child 101PASS
.child 102FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">22 </div> </div> width expected 50 but got 40
.child 103PASS
.child 104FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">24 </div> </div> width expected 47 but got 40
.child 105PASS
.child 106FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">26 </div> </div> width expected 50 but got 40
.child 107PASS
.child 108FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">28 </div> </div> width expected 47 but got 40
.child 109PASS
.child 110FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">30 </div> </div> width expected 50 but got 40
.child 111PASS
.child 112FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">32 </div> </div> width expected 47 but got 40
.child 113PASS
.child 114FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">34 </div> </div> width expected 50 but got 40
.child 115PASS
.child 116FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">36 </div> </div> width expected 47 but got 40
.child 117PASS
.child 118FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">38 </div> </div> width expected 50 but got 40
.child 119PASS
.child 120FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">40 </div> </div> width expected 47 but got 40
.child 121PASS
.child 122FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">42 </div> </div> width expected 50 but got 40
.child 123PASS
.child 124FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">44 </div> </div> width expected 47 but got 40
.child 125PASS
.child 126FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">46 </div> </div> width expected 50 but got 40
.child 127PASS
.child 128FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">48 </div> </div> width expected 47 but got 40
.child 129PASS
.child 130FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">50 </div> </div> width expected 50 but got 40
.child 131PASS
.child 132FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">52 </div> </div> width expected 47 but got 40
.child 133PASS
.child 134FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">54 </div> </div> width expected 50 but got 40
.child 135PASS
.child 136FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">56 </div> </div> width expected 47 but got 40
.child 137PASS
.child 138FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">58 </div> </div> width expected 50 but got 40
.child 139PASS
.child 140FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">60 </div> </div> width expected 47 but got 40
.child 141PASS
.child 142FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">62 </div> </div> width expected 50 but got 40
.child 143PASS
.child 144FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: horizontal-tb; width: stretch; height: 20px;">64 </div> </div> width expected 47 but got 40
.child 145PASS
.child 146FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">66 </div> </div> width expected 50 but got 40
.child 147PASS
.child 148FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-rl; width: stretch; height: 20px;">68 </div> </div> width expected 47 but got 40
.child 149PASS
.child 150FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">70 </div> </div> width expected 50 but got 40
.child 151PASS
.child 152FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: vertical-lr; width: stretch; height: 20px;">72 </div> </div> width expected 47 but got 40
.child 153PASS
.child 154FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">74 </div> </div> width expected 50 but got 40
.child 155PASS
.child 156FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-rl; width: stretch; height: 20px;">76 </div> </div> width expected 47 but got 40
.child 157PASS
.child 158FAILassert_equals: <div class="container" style="border-top: 5px solid; direction: rtl;"> <div class="child" data-expected-width="50" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">78 </div> </div> width expected 50 but got 40
.child 159PASS
.child 160FAILassert_equals: <div class="container" style="border-right: 5px solid; direction: rtl;"> <div class="child" data-expected-width="47" data-expected-height="20" style="writing-mode: sideways-lr; width: stretch; height: 20px;">80 </div> </div> width expected 47 but got 40

/css/css-sizing/stretch/block-height-008.html

<!DOCTYPE html>
<link rel="help"
  href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
<meta name="assert"
  content="margins of the stretched element are accounted for correctly in more writing mode combinations and presence of borders">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>

<style>
  .container {
    width: 50px;
    height: 50px;
    margin: 3px;
    background: magenta;
    position: relative;
  }

  .child {
    margin: 1px 3px 5px 7px;
    background: cyan;
    font-size: 10px;
  }
</style>

<div id="log"></div>
<main id="main" style="display: flex; gap: 15px;">
  <div>vertical-rl
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: horizontal-tb; width: 20px; height: stretch;">1
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: horizontal-tb; width: stretch; height: 20px;">2
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: horizontal-tb; width: 20px; height: stretch;">3
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: horizontal-tb; width: stretch; height: 20px;">4
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-rl; width: 20px; height: stretch;">5
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: vertical-rl; width: stretch; height: 20px;">6
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-rl; width: 20px; height: stretch;">7
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: vertical-rl; width: stretch; height: 20px;">8
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-lr; width: 20px; height: stretch;">9
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: vertical-lr; width: stretch; height: 20px;">10
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-lr; width: 20px; height: stretch;">11
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: vertical-lr; width: stretch; height: 20px;">12
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-rl; width: 20px; height: stretch;">13
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: sideways-rl; width: stretch; height: 20px;">14
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-rl; width: 20px; height: stretch;">15
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: sideways-rl; width: stretch; height: 20px;">16
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-lr; width: 20px; height: stretch;">17
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: sideways-lr; width: stretch; height: 20px;">18
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-lr; width: 20px; height: stretch;">19
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: sideways-lr; width: stretch; height: 20px;">20
        </div>
      </div>
    </div>
  </div>
  <div>vertical-lr
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: horizontal-tb; width: 20px; height: stretch;">21
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: horizontal-tb; width: stretch; height: 20px;">22
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: horizontal-tb; width: 20px; height: stretch;">23
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: horizontal-tb; width: stretch; height: 20px;">24
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-rl; width: 20px; height: stretch;">25
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: vertical-rl; width: stretch; height: 20px;">26
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-rl; width: 20px; height: stretch;">27
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: vertical-rl; width: stretch; height: 20px;">28
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-lr; width: 20px; height: stretch;">29
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: vertical-lr; width: stretch; height: 20px;">30
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-lr; width: 20px; height: stretch;">31
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: vertical-lr; width: stretch; height: 20px;">32
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-rl; width: 20px; height: stretch;">33
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: sideways-rl; width: stretch; height: 20px;">34
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-rl; width: 20px; height: stretch;">35
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: sideways-rl; width: stretch; height: 20px;">36
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-lr; width: 20px; height: stretch;">37
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: sideways-lr; width: stretch; height: 20px;">38
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-lr; width: 20px; height: stretch;">39
        </div>
      </div>
    </div>
    <div style="writing-mode: vertical-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: sideways-lr; width: stretch; height: 20px;">40
        </div>
      </div>
    </div>
  </div>
  <div>sideways-rl
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: horizontal-tb; width: 20px; height: stretch;">41
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: horizontal-tb; width: stretch; height: 20px;">42
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: horizontal-tb; width: 20px; height: stretch;">43
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: horizontal-tb; width: stretch; height: 20px;">44
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-rl; width: 20px; height: stretch;">45
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: vertical-rl; width: stretch; height: 20px;">46
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-rl; width: 20px; height: stretch;">47
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: vertical-rl; width: stretch; height: 20px;">48
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-lr; width: 20px; height: stretch;">49
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: vertical-lr; width: stretch; height: 20px;">50
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-lr; width: 20px; height: stretch;">51
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: vertical-lr; width: stretch; height: 20px;">52
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-rl; width: 20px; height: stretch;">53
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: sideways-rl; width: stretch; height: 20px;">54
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-rl; width: 20px; height: stretch;">55
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: sideways-rl; width: stretch; height: 20px;">56
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-lr; width: 20px; height: stretch;">57
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: sideways-lr; width: stretch; height: 20px;">58
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-lr; width: 20px; height: stretch;">59
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-rl;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: sideways-lr; width: stretch; height: 20px;">60
        </div>
      </div>
    </div>
  </div>
  <div>sideways-lr
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: horizontal-tb; width: 20px; height: stretch;">61
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: horizontal-tb; width: stretch; height: 20px;">62
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: horizontal-tb; width: 20px; height: stretch;">63
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: horizontal-tb; width: stretch; height: 20px;">64
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-rl; width: 20px; height: stretch;">65
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: vertical-rl; width: stretch; height: 20px;">66
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-rl; width: 20px; height: stretch;">67
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: vertical-rl; width: stretch; height: 20px;">68
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-lr; width: 20px; height: stretch;">69
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: vertical-lr; width: stretch; height: 20px;">70
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: vertical-lr; width: 20px; height: stretch;">71
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: vertical-lr; width: stretch; height: 20px;">72
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-rl; width: 20px; height: stretch;">73
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: sideways-rl; width: stretch; height: 20px;">74
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-rl; width: 20px; height: stretch;">75
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: sideways-rl; width: stretch; height: 20px;">76
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-lr; width: 20px; height: stretch;">77
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-top: 5px solid;">
        <div class="child" data-expected-width="50" data-expected-height="20"
          style="writing-mode: sideways-lr; width: stretch; height: 20px;">78
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="20" data-expected-height="44"
          style="writing-mode: sideways-lr; width: 20px; height: stretch;">79
        </div>
      </div>
    </div>
    <div style="writing-mode: sideways-lr;">
      <div class="container" style="border-right: 5px solid;">
        <div class="child" data-expected-width="47" data-expected-height="20"
          style="writing-mode: sideways-lr; width: stretch; height: 20px;">80
        </div>
      </div>
    </div>
  </div>
</main>

<script>
  checkLayout('.child');

  // Add direction:rtl (which shouldn't impact the actual resolved
  // box sizes that 'stretch' produces), and retest:
  for (let container of document.querySelectorAll(".container")) {
    container.style.direction = "rtl";
  }
  checkLayout('.child');

</script>