table-progression-srl-001.html (3147B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: sideways-rl Table Row/Rowgroup/Cell Ordering</title> 4 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 6 <link rel="match" href="table-progression-001-ref.html"> 7 <meta name="assert" content="This test checks that sideways-rl tables order rows/rowgroups right to left 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-4/#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-4/#direction" title="2.1 Specifying Directionality: the 'direction' property"> 10 11 <style> 12 .test { 13 writing-mode: sideways-rl; 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 /* These rules must have no effect. */ 39 .test thead, 40 .test tfoot, 41 .test tbody, 42 .test tr, 43 .test td { 44 writing-mode: horizontal-tb; /* For UAs not supporting sideways-lr */ 45 writing-mode: sideways-lr; 46 direction: rtl; 47 } 48 .test[dir=rtl] thead, 49 .test[dir=rtl] tfoot, 50 .test[dir=rtl] tbody, 51 .test[dir=rtl] tr, 52 .test[dir=rtl] td { 53 writing-mode: horizontal-tb; 54 direction: ltr; 55 } 56 </style> 57 58 <p>Test passes if the following three tables look identical. 59 60 <table class="test"> 61 <thead> 62 <tr> 63 <td class="navy"> 64 <td class="blue"> 65 <td colspan=2> 66 <tfoot> 67 <tr> 68 <td colspan=2> 69 <td class="aqua"> 70 <td class="teal"> 71 <tbody> 72 <tr> 73 <td rowspan=3> 74 <td colspan=2> 75 <td class="purp"> 76 <tr> 77 <td class="pink"> 78 <td rowspan=2 colspan=2> 79 <tr> 80 <td class="yllw"> 81 <tbody> 82 <tr> 83 <td class="orng"> 84 <td colspan=3> 85 </table> 86 87 <table dir=rtl class="test"> 88 <thead> 89 <tr> 90 <td colspan=2> 91 <td class="blue"> 92 <td class="navy"> 93 <tfoot> 94 <tr> 95 <td class="teal"> 96 <td class="aqua"> 97 <td colspan=2> 98 <tbody> 99 <tr> 100 <td class="purp"> 101 <td colspan=2> 102 <td rowspan=3> 103 <tr> 104 <td rowspan=2 colspan=2> 105 <td class="pink"> 106 <tr> 107 <td class="yllw"> 108 <tbody> 109 <tr> 110 <td colspan=3> 111 <td class="orng"> 112 </table> 113 114 <table class="reference"> 115 <tr> 116 <td rowspan=2> 117 <td class="orng"> 118 <td colspan="3"> 119 <td class="navy"> 120 <tr> 121 <td rowspan="3"> 122 <td class="yllw"> 123 <td class="pink"> 124 <td rowspan="2"> 125 <td class="blue"> 126 <tr> 127 <td class="aqua"> 128 <td rowspan=2 colspan=2> 129 <td rowspan=2> 130 <tr> 131 <td class="teal"> 132 <td class="purp"> 133 </table>