109 lines
2.1 KiB
HTML
109 lines
2.1 KiB
HTML
<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>
|