sideways-lr-row-progression-1a.html (1418B)
1 <!DOCTYPE html> 2 <title>CSS Test: sideways-lr Table Row/Rowgroup/Cell Ordering</title> 3 <link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com"> 4 <meta name="assert" content="This test checks that sideways-lr tables order rows/rowgroups left to right and cells bottom-to-top (LTR) per 'direction'."> 5 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> 6 <!-- based on vertical-rl Table Row/Rowgroup/Cell Ordering tests by Elika J. Etemad --> 7 8 <style> 9 .test { 10 writing-mode: sideways-lr; 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>