sideways-rl-row-progression-1a.html (1354B)
1 <!DOCTYPE html> 2 <title>CSS Test: sideways-rl Table Row/Rowgroup/Cell Ordering</title> 3 <meta name="assert" content="This test checks that sideways-rl tables order rows/rowgroups right to left and cells top-to-bottom (LTR) per 'direction'."> 4 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> 5 <!-- based on equivalent testcase for vertical-rl mode by Elika J. Etemad --> 6 7 <style> 8 .test { 9 writing-mode: sideways-rl; 10 direction: ltr; 11 } 12 13 table { 14 border-spacing: 0; 15 margin: 1em; 16 } 17 td { 18 width: 1em; 19 height: 1em; 20 border: solid gray; 21 } 22 23 .a { background: navy} 24 .b { background: blue } 25 .c { background: aqua } 26 .d { background: teal } 27 .e { background: purple } 28 .f { background: fuchsia } 29 .g { background: yellow } 30 .h { background: orange } 31 </style> 32 33 <table class="test"> 34 <thead> 35 <tr> 36 <td class="a"> 37 <td class="b"> 38 <td colspan=2> 39 </tr> 40 </thead> 41 <tfoot> 42 <tr> 43 <td colspan=2> 44 <td class="c"> 45 <td class="d"> 46 </tr> 47 </tfoot> 48 <tbody> 49 <tr> 50 <td rowspan=3> 51 <td colspan=2> 52 <td class="e"> 53 </tr> 54 <tr> 55 <td class="f"> 56 <td rowspan=2 colspan=2> 57 </tr> 58 <tr> 59 <td class="g"> 60 </tr> 61 </tbody> 62 <tbody> 63 <tr> 64 <td class="h"> 65 <td colspan=3> 66 </tr> 67 </tbody> 68 </table>