18 background-color: #
0f0;
21 background-color: #
0d0;
24 background-color: #
090;
27 background-color: #
060;
30 background-color: #
030;
35 <div class=
"horizontal-box">
36 <div class=
"first" style=
"order: 0"></div>
37 <div class=
"second" style=
""></div>
38 <div class=
"third" style=
"order: 3"></div>
39 <div class=
"fourth" style=
"order: 20"></div>
42 <div class=
"horizontal-box">
43 <div class=
"fourth" style=
"order: 4"></div>
44 <div class=
"third" style=
"order: 3"></div>
45 <div class=
"second" style=
"order: 2"></div>
46 <div class=
"first" style=
"order: 1"></div>
49 <!-- The example from the spec. -->
50 <div class=
"horizontal-box">
51 <div class=
"third" style=
"order: 1"></div>
52 <div class=
"first" style=
""></div>
53 <div class=
"fourth" style=
"order: 1"></div>
54 <div class=
"second" style=
"order: 0"></div>
57 <div class=
"horizontal-box">
58 <div class=
"fourth" style=
"order: 2"></div>
59 <div class=
"second" style=
""></div>
60 <div class=
"third" style=
""></div>
61 <div class=
"first" style=
"order: -10"></div>
64 <div class=
"horizontal-box">
65 <div class=
"fourth" style=
"order: 2000000000"></div>
66 <div class=
"second" style=
"order: 1000000000"></div>
67 <div class=
"third" style=
"order: 1000000000"></div>
68 <div class=
"first" style=
"order: -1000000000"></div>
71 <!-- Floating numbers are ignored and we use the default of 1 instead. -->
72 <div class=
"horizontal-box">
73 <div class=
"second" style=
"order: 2.5"></div>
74 <div class=
"fourth" style=
"order: 2"></div>
75 <div class=
"first" style=
"order: -1"></div>
76 <div class=
"third" style=
""></div>
79 <div class=
"horizontal-box">
80 <div class=
"second" style=
"order: 0"></div>
81 <div class=
"first" style=
"order: -1"></div>
82 <div class=
"fourth" style=
"order: 1"></div>
83 <div class=
"third" style=
""></div>
86 <!-- Values greater than what can be stored in an int are clamped from
87 -2,147,483,646 (int min + 2) to 2,147,483,647. -->
88 <div class=
"horizontal-box">
89 <div class=
"third" style=
"order: 4000000000"></div>
90 <div class=
"fourth" style=
"order: 3000000000"></div>
91 <div class=
"first" style=
""></div>
92 <div class=
"second" style=
"order: 2147483646"></div>
95 <div class=
"horizontal-box">
96 <div class=
"second" style=
"order: 4000000000"></div>
97 <div class=
"third" style=
"order: 3000000000"></div>
98 <div class=
"first" style=
""></div>
99 <div class=
"fourth" style=
"order: 2147483647"></div>
102 <div class=
"horizontal-box">
103 <div class=
"third" style=
"order: -2147483645"></div>
104 <div class=
"first" style=
"order: -2147483646"></div>
105 <div class=
"second" style=
"order: -2147483647"></div>
106 <div class=
"fourth" style=
""></div>
109 <div class=
"horizontal-box">
110 <div class=
"third" style=
"order: calc(-2147483640 - 5)"></div>
111 <div class=
"first" style=
"order: calc(-2147483640 - 6)"></div>
112 <div class=
"second" style=
"order: calc(-2147483640 - 7)"></div>
113 <div class=
"fourth" style=
""></div>
116 <!-- This should not crash. -->
117 <div class=
"horizontal-box"></div>
119 <div style=
"position:absolute; left: -10000px;">You should see identical green bars going from light green
120 (left) to dark green (right).
</div>