Skip to content

Instantly share code, notes, and snippets.

@Manishearth

Manishearth/logical-test.html

Created November 8, 2016 20:08
Show Gist options
  • Save Manishearth/2a07bf51f850d292a5f1ce4364754a32 to your computer and use it in GitHub Desktop.
Save Manishearth/2a07bf51f850d292a5f1ce4364754a32 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
logical-test.html
<!DOCTYPE html>
<html>
<head>
<style>
#block-start div {
border-block-start-color: red;
border-block-start-width: 2px;
border-block-start-style: dotted;
}
#block-end div {
border-block-end-color: red;
border-block-end-width: 2px;
border-block-end-style: dotted;
}
#inline-start div {
border-inline-start-color: red;
border-inline-start-width: 2px;
border-inline-start-style: dotted;
}
#inline-end div {
border-inline-end-color: red;
border-inline-end-width: 2px;
border-inline-end-style: dotted;
}
#body tr td:nth-child(2) {
writing-mode: horizontal-tb;
}
#body tr td:nth-child(3) {
writing-mode: horizontal-tb;
}
#body tr td:nth-child(4) {
writing-mode: vertical-rl;
}
#body tr td:nth-child(5) {
writing-mode: vertical-rl;
}
#body tr td:nth-child(6) {
writing-mode: vertical-lr;
}
#body tr td:nth-child(7) {
writing-mode: vertical-lr;
}
/* gecko */
/*
#body tr td:nth-child(8) {
writing-mode: sideways-lr;
}
#body tr td:nth-child(9) {
writing-mode: sideways-lr;
}*/
/* servo */
#body tr td:nth-child(8) {
writing-mode: vertical-lr;
text-orientation: sideways;
}
#body tr td:nth-child(9) {
writing-mode: vertical-lr;
text-orientation: sideways;
}
#body tr td:nth-child(2n+2) {
direction: ltr;
}
#body tr td:nth-child(2n+3) {
direction: rtl;
}
td {
padding: 10px;
background-color: yellow;
}
.top {
border-bottom: 2px dotted green;
}
.right {
border-left: 2px dotted green;
}
.bottom {
border-top: 2px dotted green;
}
.left {
border-right: 2px dotted green;
}
</style>
</head>
<body>
<table>
<thead>
<tr><th>writing mode</th><th colspan=2>horizontal-tb</th><th colspan=2>vertical-rl</th><th colspan=2>vertical-lr</th><th colspan=2>sideways-lr</th></tr>
<tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr>
</thead>
<tbody id=body>
<tr id=block-start><th>block-start</th> <td><div class=top>top</div></td><td><div class=top>top</div></td><td><div class=right>right</div></td><td><div class=right>right</div></td><td><div class=left>left</div></td><td><div class=left>left</div></td><td><div class=left>left</div></td><td><div class=left>left</div></td></tr>
<tr id=block-end><th>block-end</th> <td><div class=bottom>bottom</div></td><td><div class=bottom>bottom</div></td><td><div class=left>left</div></td><td><div class=left>left</div></td><td><div class=right>right</div></td><td><div class=right>right</div></td><td><div class=right>right</div></td><td><div class=right>right</div></td></tr>
<tr id=inline-start><th>inline-start</th> <td><div class=left>left</div></td><td><div class=right>right</div></td><td><div class=top>top</div></td><td><div class=bottom>bottom</div></td><td><div class=top>top</div></td><td><div class=bottom>bottom</div></td><td><div class=bottom>bottom</div></td><td><div class=top>top</div></td></tr>
<tr id=inline-end><th>inline-end</th> <td><div class=right>right</div></td><td><div class=left>left</div></td><td><div class=bottom>bottom</div></td><td><div class=top>top</div></td><td><div class=bottom>bottom</div></td><td><div class=top>top</div></td><td><div class=top>top</div></td><td><div class=bottom>bottom</div></td></tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment