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