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