| <!DOCTYPE html> |
| <title>CSS Test: vertical-rl Table Row/Rowgroup/Cell Ordering</title> |
| <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> |
| <link rel="match" href="table-progression-001-ref.html"> |
| <meta name="assert" content="This test checks that vertical-rl tables order rows/rowgroups right to left and cells top-to-bottom (LTR) or bottom-to-top (RTL) per 'direction'."> |
| <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> |
| |
| <style> |
| .test { |
| -webkit-writing-mode: vertical-rl; |
| } |
| |
| table { |
| border-spacing: 0; |
| margin: 1em; |
| } |
| td { |
| width: 1em; |
| height: 1em; |
| border: solid gray; |
| } |
| |
| .a { background: navy} |
| .b { background: blue } |
| .c { background: aqua } |
| .d { background: teal } |
| .e { background: purple } |
| .f { background: fuchsia } |
| .g { background: yellow } |
| .h { background: orange } |
| </style> |
| |
| <p>Test passes if the following three tables look identical. |
| |
| <table class="test"> |
| <thead> |
| <tr> |
| <td class="a"> |
| <td class="b"> |
| <td colspan=2> |
| <tfoot> |
| <tr> |
| <td colspan=2> |
| <td class="c"> |
| <td class="d"> |
| <tbody> |
| <tr> |
| <td rowspan=3> |
| <td colspan=2> |
| <td class="e"> |
| <tr> |
| <td class="f"> |
| <td rowspan=2 colspan=2> |
| <tr> |
| <td class="g"> |
| <tbody> |
| <tr> |
| <td class="h"> |
| <td colspan=3> |
| </table> |
| |
| <table dir=rtl class="test"> |
| <thead> |
| <tr> |
| <td colspan=2> |
| <td class="b"> |
| <td class="a"> |
| <tfoot> |
| <tr> |
| <td class="d"> |
| <td class="c"> |
| <td colspan=2> |
| <tbody> |
| <tr> |
| <td class="e"> |
| <td colspan=2> |
| <td rowspan=3> |
| <tr> |
| <td rowspan=2 colspan=2> |
| <td class="f"> |
| <tr> |
| <td class="g"> |
| <tbody> |
| <tr> |
| <td colspan=3> |
| <td class="h"> |
| </table> |
| |
| <table class="reference"> |
| <tr> |
| <td rowspan=2> |
| <td class="h"> |
| <td colspan=3"> |
| <td class="a"> |
| <tr> |
| <td rowspan=3"> |
| <td class="g"> |
| <td class="f"> |
| <td rowspan=2"> |
| <td class="b"> |
| <tr> |
| <td class="c"> |
| <td rowspan=2 colspan=2> |
| <td rowspan=2> |
| <tr> |
| <td class="d"> |
| <td class="e"> |
| </table> |
| |
