| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <title>CSS Reference: border-block and border-inline logical properties in different writing modes</title> |
| <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com"> |
| <style> |
| #body tr td:nth-child(2) div { |
| writing-mode: horizontal-tb; |
| } |
| #body tr td:nth-child(3) div { |
| writing-mode: horizontal-tb; |
| } |
| #body tr td:nth-child(4) div { |
| writing-mode: vertical-rl; |
| } |
| #body tr td:nth-child(5) div { |
| writing-mode: vertical-rl; |
| } |
| #body tr td:nth-child(6) div { |
| writing-mode: vertical-lr; |
| } |
| #body tr td:nth-child(7) div { |
| writing-mode: vertical-lr; |
| } |
| #body tr td:nth-child(8) div { |
| writing-mode: sideways-lr; |
| } |
| #body tr td:nth-child(9) div { |
| writing-mode: sideways-lr; |
| } |
| |
| |
| #body tr td:nth-child(2n+2) div { |
| direction: ltr; |
| } |
| #body tr td:nth-child(2n+3) div { |
| direction: rtl; |
| } |
| |
| |
| td { |
| padding: 5px; |
| font-size: 13px; |
| background-color: silver; |
| width: 70px; |
| height: 70px; |
| } |
| |
| |
| .top { |
| border-bottom: 2px dotted blue; |
| border-top: 2px dotted orange; |
| } |
| .right { |
| border-left: 2px dotted blue; |
| border-right: 2px dotted orange; |
| } |
| |
| .bottom { |
| border-top: 2px dotted blue; |
| border-bottom: 2px dotted orange; |
| } |
| .left { |
| border-right: 2px dotted blue; |
| border-left: 2px dotted orange; |
| } |
| </style> |
| </head> |
| <body> |
| <p> |
| Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell. |
| </p> |
| <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=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td></tr> |
| <tr id=block-end><th>block-end</th> <td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td></tr> |
| <tr id=inline-start><th>inline-start</th> <td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td></tr> |
| <tr id=inline-end><th>inline-end</th> <td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td></tr> |
| </tbody> |
| </table> |
| |
| </body> |
| </html> |