| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Test: vertical-lr upright orientation Table Column/Colgroup Ordering</title> |
| <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> |
| <link rel="match" href="table-progression-002-ref.html"> |
| <meta name="assert" content="This test checks that vertical-lr tables, whether LTR or RTL, order columns top-to-bottom when text-orientation is upright."> |
| <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"> |
| <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#direction"z> |
| <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" title="5.1 Orienting Text: the 'text-orientation' property"> |
| |
| <style> |
| .test { |
| writing-mode: vertical-lr; |
| text-orientation: upright; |
| } |
| [dir=rtl] { |
| direction: rtl; |
| } |
| |
| |
| table { |
| border-spacing: 0; |
| border: solid gray; |
| margin: 1em; |
| float: left; |
| } |
| td { |
| width: 1em; |
| height: 1em; |
| } |
| |
| .navy { background: navy} |
| .blue { background: blue } |
| .aqua { background: aqua } |
| .teal { background: teal } |
| </style> |
| |
| <p>Test passes if the following patterned boxes all look identical. |
| |
| <table class="test"> |
| <col span=2 class="navy"> |
| <col class="blue"> |
| <col span=2 class="aqua"> |
| <tr><td><td><td><td><td> |
| </table> |
| <table class="test"> |
| <colgroup span=2 class="navy"></colgroup> |
| <colgroup> |
| <col class="blue"> |
| <col span=2 class="aqua"> |
| </colgroup> |
| <tr><td><td><td><td><td> |
| </table> |
| |
| <table dir=rtl class="test"> |
| <col span=2 class="navy"> |
| <col class="blue"> |
| <col span=2 class="aqua"> |
| <tr><td><td><td><td><td> |
| </table> |
| <table dir=rtl class="test"> |
| <colgroup span=2 class="navy"></colgroup> |
| <colgroup> |
| <col class="blue"> |
| <col span=2 class="aqua"> |
| </colgroup> |
| <tr><td><td><td><td><td> |
| </table> |
| |
| <table class="reference"> |
| <tr><td class="navy"> |
| <tr><td class="navy"> |
| <tr><td class="blue"> |
| <tr><td class="aqua"> |
| <tr><td class="aqua"> |
| </table> |