table-progression-vlr-001.html (3166B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: vertical-lr Table Row/Rowgroup/Cell 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-001-ref.html"> 7 <meta name="assert" content="This test checks that vertical-lr tables order rows/rowgroups left to right and cells top-to-bottom (LTR) or bottom-to-top (RTL) per 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table rows and row 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 .test { 13 writing-mode: vertical-lr; 14 } 15 [dir=rtl] { 16 direction: rtl; 17 } 18 19 table { 20 border-spacing: 0; 21 margin: 1em; 22 } 23 td { 24 width: 1em; 25 height: 1em; 26 border: solid gray; 27 } 28 29 .navy { background: navy} 30 .blue { background: blue } 31 .aqua { background: aqua } 32 .teal { background: teal } 33 .purp { background: purple } 34 .pink { background: fuchsia } 35 .yllw { background: yellow } 36 .orng { background: orange } 37 38 39 /* These rules must have no effect. */ 40 .test thead, 41 .test tfoot, 42 .test tbody, 43 .test tr, 44 .test td { 45 writing-mode: horizontal-tb; /* For UAs not supporting vertical-rl */ 46 writing-mode: vertical-rl; 47 direction: rtl; 48 } 49 .test[dir=rtl] thead, 50 .test[dir=rtl] tfoot, 51 .test[dir=rtl] tbody, 52 .test[dir=rtl] tr, 53 .test[dir=rtl] td { 54 writing-mode: horizontal-tb; 55 direction: ltr; 56 } 57 </style> 58 59 <p>Test passes if the following three tables look identical. 60 61 <table class="test"> 62 <thead> 63 <tr> 64 <td colspan=2> 65 <td class="aqua"> 66 <td class="teal"> 67 <tfoot> 68 <tr> 69 <td class="navy"> 70 <td class="blue"> 71 <td colspan=2> 72 <tbody> 73 <tr> 74 <td class="orng"> 75 <td colspan=3> 76 <tbody> 77 <tr> 78 <td rowspan=3> 79 <td class="yllw"> 80 <td rowspan=2 colspan=2> 81 <tr> 82 <td class="pink"> 83 <tr> 84 <td colspan=2> 85 <td class="purp"> 86 </table> 87 88 <table dir=rtl class="test"> 89 <thead> 90 <tr> 91 <td class="teal"> 92 <td class="aqua"> 93 <td colspan=2> 94 <tfoot> 95 <tr> 96 <td colspan=2> 97 <td class="blue"> 98 <td class="navy"> 99 <tbody> 100 <tr> 101 <td colspan=3> 102 <td class="orng"> 103 <tbody> 104 <tr> 105 <td rowspan=2 colspan=2> 106 <td class="yllw"> 107 <td rowspan=3> 108 <tr> 109 <td class="pink"> 110 <tr> 111 <td class="purp"> 112 <td colspan=2> 113 </table> 114 115 116 <table class="reference"> 117 <tr> 118 <td rowspan=2> 119 <td class="orng"> 120 <td colspan=3> 121 <td class="navy"> 122 123 <tr> 124 <td rowspan=3> 125 <td class="yllw"> 126 <td class="pink"> 127 <td rowspan=2> 128 <td class="blue"> 129 <tr> 130 <td class="aqua"> 131 <td rowspan=2 colspan=2> 132 <td rowspan=2> 133 <tr> 134 <td class="teal"> 135 <td class="purp"> 136 </table>