table-progression-slr-002.html (2284B)
1 <!DOCTYPE html> 2 <title>CSS Test: sideways-lr Table Column/Colgroup Ordering</title> 3 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 4 <link rel="match" href="table-progression-002-ref.html"> 5 <meta name="assert" content="This test checks that sideways-lr tables order columns bottom-to-top (LTR) or top-to-bottom (RTL) per the table's 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table columns and column groups."> 6 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#block-flow" title="3.1 Block Flow Direction: the 'writing-mode' property"> 7 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#direction" title="2.1 Specifying Directionality: the 'direction' property"> 8 9 <style> 10 .test { 11 writing-mode: sideways-lr; 12 } 13 [dir=rtl] { 14 direction: rtl; 15 } 16 17 18 table { 19 border-spacing: 0; 20 border: solid gray; 21 margin: 1em; 22 float: left; 23 } 24 td { 25 width: 1em; 26 height: 1em; 27 } 28 29 .navy { background: navy} 30 .blue { background: blue } 31 .aqua { background: aqua } 32 .teal { background: teal } 33 34 /* These declarations must have no effect. */ 35 .test col, 36 .test colgroup { 37 writing-mode: horizontal-tb; 38 writing-mode: sideways-rl; 39 direction: rtl; 40 } 41 .test[dir=rtl] col, 42 .test[dir=rtl] colgroup { 43 writing-mode: horizontal-tb; 44 direction: ltr; 45 } 46 </style> 47 48 <p>Test passes if the following patterned boxes all look identical. 49 50 <table class="test"> 51 <col span=2 class="aqua"> 52 <col class="blue"> 53 <col span=2 class="navy"> 54 <tr><td><td><td><td><td> 55 </table> 56 <table class="test"> 57 <colgroup span=2 class="aqua"></colgroup> 58 <colgroup> 59 <col class="blue"> 60 <col span=2 class="navy"> 61 </colgroup> 62 <tr><td><td><td><td><td> 63 </table> 64 65 <table dir=rtl class="test"> 66 <col span=2 class="navy"> 67 <col class="blue"> 68 <col span=2 class="aqua"> 69 <tr><td><td><td><td><td> 70 </table> 71 <table dir=rtl class="test"> 72 <colgroup span=2 class="navy"></colgroup> 73 <colgroup> 74 <col class="blue"> 75 <col span=2 class="aqua"> 76 </colgroup> 77 <tr><td><td><td><td><td> 78 </table> 79 80 <table class="reference"> 81 <tr><td class="navy"> 82 <tr><td class="navy"> 83 <tr><td class="blue"> 84 <tr><td class="aqua"> 85 <tr><td class="aqua"> 86 </table>