54 lines
1.8 KiB
HTML
54 lines
1.8 KiB
HTML
<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>
|