table-progression-vlr-002.html (2374B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: vertical-lr 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-002-ref.html"> 7 <meta name="assert" content="This test checks that vertical-lr tables order columns top-to-bottom (LTR) or bottom-to-top (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"z> 10 11 <style> 12 .test { 13 writing-mode: vertical-lr; 14 } 15 [dir=rtl] { 16 direction: rtl; 17 } 18 19 20 table { 21 border-spacing: 0; 22 border: solid gray; 23 margin: 1em; 24 float: left; 25 } 26 td { 27 width: 1em; 28 height: 1em; 29 } 30 31 .navy { background: navy} 32 .blue { background: blue } 33 .aqua { background: aqua } 34 .teal { background: teal } 35 36 /* These declarations must have no effect. */ 37 .test col, 38 .test colgroup { 39 writing-mode: horizontal-tb; 40 writing-mode: vertical-rl; 41 direction: rtl; 42 } 43 .test[dir=rtl] col, 44 .test[dir=rtl] colgroup { 45 writing-mode: horizontal-tb; 46 direction: ltr; 47 } 48 </style> 49 50 <p>Test passes if the following patterned boxes all look identical. 51 52 <table class="test"> 53 <col span=2 class="navy"> 54 <col class="blue"> 55 <col span=2 class="aqua"> 56 <tr><td><td><td><td><td> 57 </table> 58 <table class="test"> 59 <colgroup span=2 class="navy"></colgroup> 60 <colgroup> 61 <col class="blue"> 62 <col span=2 class="aqua"> 63 </colgroup> 64 <tr><td><td><td><td><td> 65 </table> 66 67 <table dir=rtl class="test"> 68 <col span=2 class="aqua"> 69 <col class="blue"> 70 <col span=2 class="navy"> 71 <tr><td><td><td><td><td> 72 </table> 73 <table dir=rtl class="test"> 74 <colgroup span=2 class="aqua"></colgroup> 75 <colgroup> 76 <col class="blue"> 77 <col span=2 class="navy"> 78 </colgroup> 79 <tr><td><td><td><td><td> 80 </table> 81 82 <table class="reference"> 83 <tr><td class="navy"> 84 <tr><td class="navy"> 85 <tr><td class="blue"> 86 <tr><td class="aqua"> 87 <tr><td class="aqua"> 88 </table>