|
1 <!DOCTYPE html> |
|
2 <!-- |
|
3 Any copyright is dedicated to the Public Domain. |
|
4 http://creativecommons.org/publicdomain/zero/1.0/ |
|
5 --> |
|
6 <!-- Testcase for whether we honor "order" on absolutely-positioned elements |
|
7 within a flex container. Specifically, we test whether it affects their |
|
8 paint-order (as it should, since it reorders the frame tree). --> |
|
9 <html> |
|
10 <head> |
|
11 <style> |
|
12 #container { display: flex; } |
|
13 #lowOrdinal { |
|
14 position: absolute; |
|
15 order: 5; |
|
16 background: red; |
|
17 height: 100px; width: 100px; |
|
18 } |
|
19 #highOrdinal { |
|
20 position: absolute; |
|
21 order: 10; |
|
22 background: lime; |
|
23 height: 100px; width: 100px; |
|
24 } |
|
25 #noOrdinal { |
|
26 position: absolute; |
|
27 background: orange; |
|
28 height: 100px; width: 100px; |
|
29 } |
|
30 </style> |
|
31 </head> |
|
32 <body> |
|
33 <div id="container"> |
|
34 <div id="highOrdinal"></div> |
|
35 <div id="lowOrdinal"></div> |
|
36 <div id="noOrdinal"></div> |
|
37 </div> |
|
38 </body> |
|
39 </html> |