| <html> |
| <head> |
| <style> |
| div.box { |
| display: -moz-box; |
| display: -webkit-box; |
| display: box; |
| } |
| |
| div.vertical { |
| -moz-box-orient: vertical; |
| -webkit-box-orient: vertical; |
| box-orient: vertical; |
| } |
| |
| div.number { |
| border: 2px solid black; |
| padding: 4px; |
| margin: 4px; |
| } |
| |
| .rtl { |
| -moz-box-pack: end; |
| -webkit-box-pack: end; |
| box-pack: end; |
| direction: rtl; |
| } |
| |
| .rev { |
| -moz-box-direction: reverse; |
| -webkit-box-direction: reverse; |
| box-direction: reverse; |
| } |
| |
| .first { |
| -moz-box-ordinal-group: 1; |
| -webkit-box-ordinal-group: 1; |
| box-ordinal-group: 1 |
| } |
| |
| .second { |
| -moz-box-ordinal-group: 2; |
| -webkit-box-ordinal-group: 2; |
| box-ordinal-group: 2 |
| } |
| |
| .third { |
| -moz-box-ordinal-group: 3; |
| -webkit-box-ordinal-group: 3; |
| box-ordinal-group: 3 |
| } |
| |
| .fourth { |
| -moz-box-ordinal-group: 4; |
| -webkit-box-ordinal-group: 4; |
| box-ordinal-group: 4 |
| } |
| |
| .fifth { |
| -moz-box-ordinal-group: 5; |
| -webkit-box-ordinal-group: 5; |
| box-ordinal-group: 5 |
| } |
| |
| </style> |
| <body> |
| <p> |
| You should see identical rows of numbers below. Every row should look exactly the same. |
| If any objects are out of order, then the test has failed. |
| </p> |
| <div class="box vertical"> |
| <div class="box"> |
| <div class="number">1</div> |
| <div class="number">2</div> |
| <div class="number">3</div> |
| <div class="number">4</div> |
| <div class="number">5</div> |
| </div> |
| <div class="box rtl"> |
| <div class="number">5</div> |
| <div class="number">4</div> |
| <div class="number">3</div> |
| <div class="number">2</div> |
| <div class="number">1</div> |
| </div> |
| <div class="box rtl rev"> |
| <div class="number">1</div> |
| <div class="number">2</div> |
| <div class="number">3</div> |
| <div class="number">4</div> |
| <div class="number">5</div> |
| </div> |
| <div class="box"> |
| <div class="number third">3</div> |
| <div class="number first">1</div> |
| <div class="number fourth">4</div> |
| <div class="number second">2</div> |
| <div class="number fifth">5</div> |
| </div> |
| <div class="box rev"> |
| <div class="number third">3</div> |
| <div class="number fifth">1</div> |
| <div class="number second">4</div> |
| <div class="number fourth">2</div> |
| <div class="number first">5</div> |
| </div> |
| </div> |
| </body> |
