| <!DOCTYPE html> |
| <html> |
| <style> |
| body { |
| margin: 0; |
| } |
| .horizontal-box { |
| display: flex; |
| } |
| .horizontal-box div { |
| height: 30px; |
| border: 0; |
| margin-bottom: 10px; |
| flex: 1; |
| } |
| |
| .first { |
| background-color: #0f0; |
| } |
| .second { |
| background-color: #0d0; |
| } |
| .third { |
| background-color: #090; |
| } |
| .fourth { |
| background-color: #060; |
| } |
| .fifth { |
| background-color: #030; |
| } |
| </style> |
| <body> |
| |
| <div class="horizontal-box"> |
| <div class="first" style="order: 0"></div> |
| <div class="second" style=""></div> |
| <div class="third" style="order: 3"></div> |
| <div class="fourth" style="order: 20"></div> |
| </div> |
| |
| <div class="horizontal-box"> |
| <div class="fourth" style="order: 4"></div> |
| <div class="third" style="order: 3"></div> |
| <div class="second" style="order: 2"></div> |
| <div class="first" style="order: 1"></div> |
| </div> |
| |
| <!-- The example from the spec. --> |
| <div class="horizontal-box"> |
| <div class="third" style="order: 1"></div> |
| <div class="first" style=""></div> |
| <div class="fourth" style="order: 1"></div> |
| <div class="second" style="order: 0"></div> |
| </div> |
| |
| <div class="horizontal-box"> |
| <div class="fourth" style="order: 2"></div> |
| <div class="second" style=""></div> |
| <div class="third" style=""></div> |
| <div class="first" style="order: -10"></div> |
| </div> |
| |
| <div class="horizontal-box"> |
| <div class="fourth" style="order: 2000000000"></div> |
| <div class="second" style="order: 1000000000"></div> |
| <div class="third" style="order: 1000000000"></div> |
| <div class="first" style="order: -1000000000"></div> |
| </div> |
| |
| <!-- Floating numbers are ignored and we use the default of 1 instead. --> |
| <div class="horizontal-box"> |
| <div class="second" style="order: 2.5"></div> |
| <div class="fourth" style="order: 2"></div> |
| <div class="first" style="order: -1"></div> |
| <div class="third" style=""></div> |
| </div> |
| |
| <div class="horizontal-box"> |
| <div class="second" style="order: 0"></div> |
| <div class="first" style="order: -1"></div> |
| <div class="fourth" style="order: 1"></div> |
| <div class="third" style=""></div> |
| </div> |
| |
| <!-- Values greater than what can be stored in an int are clamped from |
| -2,147,483,646 (int min + 2) to 2,147,483,647. --> |
| <div class="horizontal-box"> |
| <div class="third" style="order: 4000000000"></div> |
| <div class="fourth" style="order: 3000000000"></div> |
| <div class="first" style=""></div> |
| <div class="second" style="order: 2147483646"></div> |
| </div> |
| |
| <div class="horizontal-box"> |
| <div class="second" style="order: 4000000000"></div> |
| <div class="third" style="order: 3000000000"></div> |
| <div class="first" style=""></div> |
| <div class="fourth" style="order: 2147483647"></div> |
| </div> |
| |
| <div class="horizontal-box"> |
| <div class="third" style="order: -2147483647"></div> |
| <div class="first" style="order: -2147483648"></div> |
| <div class="second" style="order: -2147483649"></div> |
| <div class="fourth" style=""></div> |
| </div> |
| |
| <div class="horizontal-box"> |
| <div class="third" style="order: calc(-2147483640 - 7)"></div> |
| <div class="first" style="order: calc(-2147483640 - 8)"></div> |
| <div class="second" style="order: calc(-2147483640 - 9)"></div> |
| <div class="fourth" style=""></div> |
| </div> |
| |
| <!-- This should not crash. --> |
| <div class="horizontal-box"></div> |
| |
| <div style="position:absolute; left: -10000px;">You should see identical green bars going from light green |
| (left) to dark green (right).</div> |
| |
| </body> |
| </html> |
