<style>
* {
    font-size: 16px;
    font-family: Times;
    padding: 0;
    border-spacing: 0;
    line-height: 10px;
}
.vertical {
    -webkit-writing-mode: vertical-rl;
    writing-mode: tb-rl;
}
.horizontal {
     -webkit-writing-mode: horizontal-tb;
     writing-mode: lr-tb;
}
.container {
    width: 100px;
    height: 50px;
    position: absolute;
    background-color: grey;
}
.positioned-child {
    position: absolute;
    background-color: blue;
}
.leaf {
    background-color: green;
}
.content {
    height: 20px;
    width: 20px;
}
</style>
<!-- Each pair of cases below should render the same. -->
<div class="container" style="top: 50px">
    <div class="positioned-child"><div class="content"></div><div class="leaf" style="width: 100%;"><div class="content"></div></div></div>
</div>
<div class="container" style="top: 125px">
    <div class="positioned-child"><div class="content"></div><table class="leaf" style="width: 100%;"><tr><td><div class="content"></div></table></div>
</div>
<div class="container vertical" style="top: 200px">
    <div class="positioned-child"><div class="content"></div><table class="leaf" style="height: 100%;"><tr><td><div class="content"></div></table></div>
</div>
<div class="container vertical" style="top: 275px">
    <div class="positioned-child"><div class="content"></div><div class="leaf" style="height: 100%;"><div class="content"></div></div></div>
</div>
<div class="container vertical" style="top: 350px">
    <div class="positioned-child"><div class="content"></div><table class="leaf horizontal" style="width: 100%;"><tr><td><div class="content"></div></table></div>
</div>
<div class="container vertical" style="top: 425px">
    <div class="positioned-child"><div class="content"></div><div class="leaf horizontal" style="width: 100%;"><div class="content"></div></div></div>
</div>