OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <title>CSS Test: vertical-lr Table Row/Rowgroup/Cell Ordering</title> | |
3 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/
contact"> | |
4 <link rel="match" href="table-progression-001-ref.html"> | |
5 <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) pe
r 'direction'."> | |
6 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> | |
7 | |
8 <style> | |
9 .test { | |
10 -webkit-writing-mode: vertical-lr; | |
11 } | |
12 | |
13 table { | |
14 border-spacing: 0; | |
15 margin: 1em; | |
16 } | |
17 td { | |
18 width: 1em; | |
19 height: 1em; | |
20 border: solid gray; | |
21 } | |
22 | |
23 .a { background: navy} | |
24 .b { background: blue } | |
25 .c { background: aqua } | |
26 .d { background: teal } | |
27 .e { background: purple } | |
28 .f { background: fuchsia } | |
29 .g { background: yellow } | |
30 .h { background: orange } | |
31 </style> | |
32 | |
33 <p>Test passes if the following three tables look identical. | |
34 | |
35 <table class="test"> | |
36 <thead> | |
37 <tr> | |
38 <td colspan=2> | |
39 <td class="c"> | |
40 <td class="d"> | |
41 <tfoot> | |
42 <tr> | |
43 <td class="a"> | |
44 <td class="b"> | |
45 <td colspan=2> | |
46 <tbody> | |
47 <tr> | |
48 <td class="h"> | |
49 <td colspan=3> | |
50 <tbody> | |
51 <tr> | |
52 <td rowspan=3> | |
53 <td class="g"> | |
54 <td rowspan=2 colspan=2> | |
55 <tr> | |
56 <td class="f"> | |
57 <tr> | |
58 <td colspan=2> | |
59 <td class="e"> | |
60 </table> | |
61 | |
62 <table dir=rtl class="test"> | |
63 <thead> | |
64 <tr> | |
65 <td class="d"> | |
66 <td class="c"> | |
67 <td colspan=2> | |
68 <tfoot> | |
69 <tr> | |
70 <td colspan=2> | |
71 <td class="b"> | |
72 <td class="a"> | |
73 <tbody> | |
74 <tr> | |
75 <td colspan=3> | |
76 <td class="h"> | |
77 <tbody> | |
78 <tr> | |
79 <td rowspan=2 colspan=2> | |
80 <td class="g"> | |
81 <td rowspan=3> | |
82 <tr> | |
83 <td class="f"> | |
84 <tr> | |
85 <td class="e"> | |
86 <td colspan=2> | |
87 </table> | |
88 | |
89 | |
90 <table class="reference"> | |
91 <tr> | |
92 <td rowspan=2> | |
93 <td class="h"> | |
94 <td colspan="3"> | |
95 <td class="a"> | |
96 <tr> | |
97 <td rowspan="3"> | |
98 <td class="g"> | |
99 <td class="f"> | |
100 <td rowspan="2"> | |
101 <td class="b"> | |
102 <tr> | |
103 <td class="c"> | |
104 <td rowspan=2 colspan=2> | |
105 <td rowspan=2> | |
106 <tr> | |
107 <td class="d"> | |
108 <td class="e"> | |
109 </table> | |
110 | |
OLD | NEW |