logical-physical-mapping-001-ref.html (3907B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS Reference: border-block and border-inline logical properties in different writing modes</title> 6 <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com"> 7 <style> 8 #body tr td:nth-child(2) div { 9 writing-mode: horizontal-tb; 10 } 11 #body tr td:nth-child(3) div { 12 writing-mode: horizontal-tb; 13 } 14 #body tr td:nth-child(4) div { 15 writing-mode: vertical-rl; 16 } 17 #body tr td:nth-child(5) div { 18 writing-mode: vertical-rl; 19 } 20 #body tr td:nth-child(6) div { 21 writing-mode: vertical-lr; 22 } 23 #body tr td:nth-child(7) div { 24 writing-mode: vertical-lr; 25 } 26 #body tr td:nth-child(8) div { 27 writing-mode: sideways-lr; 28 } 29 #body tr td:nth-child(9) div { 30 writing-mode: sideways-lr; 31 } 32 33 34 #body tr td:nth-child(2n+2) div { 35 direction: ltr; 36 } 37 #body tr td:nth-child(2n+3) div { 38 direction: rtl; 39 } 40 41 42 td { 43 padding: 5px; 44 font-size: 13px; 45 background-color: silver; 46 width: 70px; 47 height: 70px; 48 } 49 50 51 .top { 52 border-bottom: 2px dotted blue; 53 border-top: 2px dotted orange; 54 } 55 .right { 56 border-left: 2px dotted blue; 57 border-right: 2px dotted orange; 58 } 59 60 .bottom { 61 border-top: 2px dotted blue; 62 border-bottom: 2px dotted orange; 63 } 64 .left { 65 border-right: 2px dotted blue; 66 border-left: 2px dotted orange; 67 } 68 </style> 69 </head> 70 <body> 71 <p> 72 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. 73 </p> 74 <table> 75 <thead> 76 <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> 77 <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> 78 </thead> 79 <tbody id=body> 80 <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> 81 <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> 82 <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> 83 <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> 84 </tbody> 85 </table> 86 87 </body> 88 </html>