<!DOCTYPE html>
<html>
<head>
<style>
div {
    position: relative;
}
table {
    margin: 10px 20px 20px 10px;
}
</style>
<script src="../../resources/check-layout.js"></script>
</head>

<body onload="checkLayout('div')">
<div style="-webkit-writing-mode: horizontal-tb">
<table data-offset-x=10 style="-webkit-writing-mode: vertical-rl">
    <tr><td>Hello</td></tr>
</table>
<table data-offset-x=10 style="-webkit-writing-mode: vertical-lr">
    <tr><td>Hello</td></tr>
</table>
</div>

<div style="-webkit-writing-mode: horizontal-bt">
<table data-offset-x=10 style="-webkit-writing-mode: vertical-rl">
    <tr><td>Hello</td></tr>
</table>
<table data-offset-x=10 style="-webkit-writing-mode: vertical-lr">
    <tr><td>Hello</td></tr>
</table>
</div>

<div style="-webkit-writing-mode: vertical-rl">
<table data-offset-y=10 style="-webkit-writing-mode: horizontal-tb">
    <tr><td>Hello</td></tr>
</table>
<table data-offset-y=10 style="-webkit-writing-mode: horizontal-bt">
    <tr><td>Hello</td></tr>
</table>
</div>

<div style="-webkit-writing-mode: vertical-lr">
<table data-offset-y=10 style="-webkit-writing-mode: horizontal-tb">
    <tr><td>Hello</td></tr>
</table>
<table data-offset-y=10 style="-webkit-writing-mode: horizontal-bt">
    <tr><td>Hello</td></tr>
</table>
</div>
</body>
</html>
