| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Test: vertical-lr Table Column/Colgroup Ordering</title> |
| <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> |
| <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2016-01-15 --> |
| <link rel="match" href="table-progression-002-ref.html"> |
| <meta name="assert" content="This test checks that vertical-lr tables order columns top-to-bottom (LTR) or bottom-to-top (RTL) per the table's 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table columns and column groups."> |
| <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> |
| |
| <style> |
| .test { |
| writing-mode: vertical-lr; |
| } |
| [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 } |
| |
| /* These declarations must have no effect. */ |
| .test col, |
| .test colgroup { |
| writing-mode: horizontal-tb; |
| writing-mode: vertical-rl; |
| direction: rtl; |
| } |
| .test[dir=rtl] col, |
| .test[dir=rtl] colgroup { |
| direction: ltr; |
| } |
| </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="aqua"> |
| <col class="blue"> |
| <col span=2 class="navy"> |
| <tr><td><td><td><td><td> |
| </table> |
| <table dir=rtl class="test"> |
| <colgroup span=2 class="aqua"></colgroup> |
| <colgroup> |
| <col class="blue"> |
| <col span=2 class="navy"> |
| </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> |
