blob: b3b59141a8b47817160d0380149576d236a7e161 [file] [log] [blame]
darinb5a817a2003-07-31 00:18:03 +00001<html>
2<head>
3<style>
4div.box {
5 display: -moz-box;
commit-queue@webkit.orga659cc292010-07-21 20:39:15 +00006 display: -webkit-box;
darinb5a817a2003-07-31 00:18:03 +00007 display: box;
8}
9
10div.vertical {
11 -moz-box-orient: vertical;
commit-queue@webkit.orga659cc292010-07-21 20:39:15 +000012 -webkit-box-orient: vertical;
darinb5a817a2003-07-31 00:18:03 +000013 box-orient: vertical;
14}
15
16div.number {
17 border: 2px solid black;
18 padding: 4px;
19 margin: 4px;
20}
21
22.rtl {
23 -moz-box-pack: end;
commit-queue@webkit.orga659cc292010-07-21 20:39:15 +000024 -webkit-box-pack: end;
darinb5a817a2003-07-31 00:18:03 +000025 box-pack: end;
26 direction: rtl;
27}
28
29.rev {
30 -moz-box-direction: reverse;
commit-queue@webkit.orga659cc292010-07-21 20:39:15 +000031 -webkit-box-direction: reverse;
darinb5a817a2003-07-31 00:18:03 +000032 box-direction: reverse;
33}
34
35.first {
36 -moz-box-ordinal-group: 1;
commit-queue@webkit.orga659cc292010-07-21 20:39:15 +000037 -webkit-box-ordinal-group: 1;
darinb5a817a2003-07-31 00:18:03 +000038 box-ordinal-group: 1
39}
40
41.second {
42 -moz-box-ordinal-group: 2;
commit-queue@webkit.orga659cc292010-07-21 20:39:15 +000043 -webkit-box-ordinal-group: 2;
darinb5a817a2003-07-31 00:18:03 +000044 box-ordinal-group: 2
45}
46
47.third {
48 -moz-box-ordinal-group: 3;
commit-queue@webkit.orga659cc292010-07-21 20:39:15 +000049 -webkit-box-ordinal-group: 3;
darinb5a817a2003-07-31 00:18:03 +000050 box-ordinal-group: 3
51}
52
53.fourth {
54 -moz-box-ordinal-group: 4;
commit-queue@webkit.orga659cc292010-07-21 20:39:15 +000055 -webkit-box-ordinal-group: 4;
darinb5a817a2003-07-31 00:18:03 +000056 box-ordinal-group: 4
57}
58
59.fifth {
60 -moz-box-ordinal-group: 5;
commit-queue@webkit.orga659cc292010-07-21 20:39:15 +000061 -webkit-box-ordinal-group: 5;
darinb5a817a2003-07-31 00:18:03 +000062 box-ordinal-group: 5
63}
64
65</style>
66<body>
67<p>
68You should see identical rows of numbers below. Every row should look exactly the same.
69If any objects are out of order, then the test has failed.
70</p>
71<div class="box vertical">
72<div class="box">
73 <div class="number">1</div>
74 <div class="number">2</div>
75 <div class="number">3</div>
76 <div class="number">4</div>
77 <div class="number">5</div>
78</div>
79<div class="box rtl">
80 <div class="number">5</div>
81 <div class="number">4</div>
82 <div class="number">3</div>
83 <div class="number">2</div>
84 <div class="number">1</div>
85</div>
86<div class="box rtl rev">
87 <div class="number">1</div>
88 <div class="number">2</div>
89 <div class="number">3</div>
90 <div class="number">4</div>
91 <div class="number">5</div>
92</div>
93<div class="box">
94 <div class="number third">3</div>
95 <div class="number first">1</div>
96 <div class="number fourth">4</div>
97 <div class="number second">2</div>
98 <div class="number fifth">5</div>
99</div>
100<div class="box rev">
101 <div class="number third">3</div>
102 <div class="number fifth">1</div>
103 <div class="number second">4</div>
104 <div class="number fourth">2</div>
105 <div class="number first">5</div>
106</div>
107</div>
108</body>