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