<html> <head> <style> div.box { display: -moz-box; display: -khtml-box; display: box; } div.vertical { -moz-box-orient: vertical; -khtml-box-orient: vertical; box-orient: vertical; } div.number { border: 2px solid black; padding: 4px; margin: 4px; } .rtl { -moz-box-pack: end; -khtml-box-pack: end; box-pack: end; direction: rtl; } .rev { -moz-box-direction: reverse; -khtml-box-direction: reverse; box-direction: reverse; } .first { -moz-box-ordinal-group: 1; -khtml-box-ordinal-group: 1; box-ordinal-group: 1 } .second { -moz-box-ordinal-group: 2; -khtml-box-ordinal-group: 2; box-ordinal-group: 2 } .third { -moz-box-ordinal-group: 3; -khtml-box-ordinal-group: 3; box-ordinal-group: 3 } .fourth { -moz-box-ordinal-group: 4; -khtml-box-ordinal-group: 4; box-ordinal-group: 4 } .fifth { -moz-box-ordinal-group: 5; -khtml-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>