<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>