box-ordinal-with-out-of-flow-1.html 1002 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  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 "-moz-box-ordinal-group" on
  7. absolutely-positioned elements within a -moz-box. Specifically,
  8. we test whether it affects their paint-order (as it should, since
  9. it reorders the frame tree).
  10. -->
  11. <html>
  12. <head>
  13. <style>
  14. #container { display: -moz-box; }
  15. #lowOrdinal {
  16. position: absolute;
  17. -moz-box-ordinal-group: 5;
  18. background: red;
  19. height: 100px; width: 100px;
  20. }
  21. #highOrdinal {
  22. position: absolute;
  23. -moz-box-ordinal-group: 10;
  24. background: lime;
  25. height: 100px; width: 100px;
  26. }
  27. #noOrdinal {
  28. position: absolute;
  29. background: orange;
  30. height: 100px; width: 100px;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div id="container">
  36. <div id="highOrdinal"></div>
  37. <div id="lowOrdinal"></div>
  38. <div id="noOrdinal"></div>
  39. </div>
  40. </body>
  41. </html>