flexbox-paint-ordering-3.html 949 B

12345678910111213141516171819202122232425262728293031323334353637383940
  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>