017.html [plain text]

<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>