table-progression-vlr-003.html (2859B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: vertical-lr upright orientation 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-19 --> 6 <link rel="match" href="table-progression-001-ref.html"> 7 <meta name="assert" content="This test checks that vertical-lr tables, whether LTR or RTL, order rows/rowgroups left to right and cells top-to-bottom when text-orientation is upright."> 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 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" title="5.1 Orienting Text: the 'text-orientation' property"> 11 12 <style> 13 .test { 14 writing-mode: vertical-lr; 15 text-orientation: upright; 16 } 17 [dir=rtl] { 18 direction: rtl; 19 } 20 21 table { 22 border-spacing: 0; 23 margin: 1em; 24 } 25 td { 26 width: 1em; 27 height: 1em; 28 border: solid gray; 29 } 30 31 .navy { background: navy} 32 .blue { background: blue } 33 .aqua { background: aqua } 34 .teal { background: teal } 35 .purp { background: purple } 36 .pink { background: fuchsia } 37 .yllw { background: yellow } 38 .orng { background: orange } 39 </style> 40 41 <p>Test passes if the following three tables look identical. 42 43 <table class="test"> 44 <thead> 45 <tr> 46 <td colspan=2> 47 <td class="aqua"> 48 <td class="teal"> 49 <tfoot> 50 <tr> 51 <td class="navy"> 52 <td class="blue"> 53 <td colspan=2> 54 <tbody> 55 <tr> 56 <td class="orng"> 57 <td colspan=3> 58 <tbody> 59 <tr> 60 <td rowspan=3> 61 <td class="yllw"> 62 <td rowspan=2 colspan=2> 63 <tr> 64 <td class="pink"> 65 <tr> 66 <td colspan=2> 67 <td class="purp"> 68 </table> 69 70 <table class="test" dir=rtl> 71 <thead> 72 <tr> 73 <td colspan=2> 74 <td class="aqua"> 75 <td class="teal"> 76 <tfoot> 77 <tr> 78 <td class="navy"> 79 <td class="blue"> 80 <td colspan=2> 81 <tbody> 82 <tr> 83 <td class="orng"> 84 <td colspan=3> 85 <tbody> 86 <tr> 87 <td rowspan=3> 88 <td class="yllw"> 89 <td rowspan=2 colspan=2> 90 <tr> 91 <td class="pink"> 92 <tr> 93 <td colspan=2> 94 <td class="purp"> 95 </table> 96 97 <table class="reference"> 98 <tr> 99 <td rowspan=2> 100 <td class="orng"> 101 <td colspan="3"> 102 <td class="navy"> 103 <tr> 104 <td rowspan="3"> 105 <td class="yllw"> 106 <td class="pink"> 107 <td rowspan="2"> 108 <td class="blue"> 109 <tr> 110 <td class="aqua"> 111 <td rowspan=2 colspan=2> 112 <td rowspan=2> 113 <tr> 114 <td class="teal"> 115 <td class="purp"> 116 </table>