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