orthogonal-cell-001.html (961B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 4 <title>CSS writing-mode test: orthogonal table cells</title> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1959395"> 6 <link rel="match" href="orthogonal-cell-001-ref.html"> 7 8 <style> 9 table { margin: 10px; } 10 td { background: green; padding: 10px 20px 30px 40px; } 11 div { width: 20px; height: 40px; background: blue; } 12 .htb { writing-mode: horizontal-tb; } 13 .vlr { writing-mode: vertical-lr; } 14 .vrl { writing-mode: vertical-rl; } 15 </style> 16 17 <p>All five green squares should look the same, with a blue rectangle towards the upper right.</p> 18 19 <table> 20 <td><div></div></td> 21 </table> 22 23 <!-- The different writing modes should not disrupt the table cell/row sizing. --> 24 <table class=htb> 25 <td class=vlr><div></div></td> 26 </table> 27 28 <table class=htb> 29 <td class=vrl><div></div></td> 30 </table> 31 32 <table class=vlr> 33 <td class=htb><div></div></td> 34 </table> 35 36 <table class=vrl> 37 <td class=htb><div></div></td> 38 </table>