flexbox-invalidation-1.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!DOCTYPE html>
  2. <!--
  3. Any copyright is dedicated to the Public Domain.
  4. http://creativecommons.org/publicdomain/zero/1.0/
  5. -->
  6. <!--
  7. This test verifies that we include our children's overflow areas in the
  8. flex container's overflow area -- invalidating their old location and new
  9. location when the flex container is moved, even if they stick outside the
  10. flex container.
  11. -->
  12. <html class="reftest-wait">
  13. <head>
  14. <script>
  15. function tweak() {
  16. var outer = document.getElementById("outer");
  17. outer.style.marginLeft = "40px";
  18. document.documentElement.removeAttribute("class");
  19. }
  20. window.addEventListener("MozReftestInvalidate", tweak, false);
  21. </script>
  22. <style>
  23. div#flexContainer {
  24. width: 100px;
  25. height: 50px;
  26. background: lightgray;
  27. display: flex;
  28. justify-content: center;
  29. }
  30. div#flexItem {
  31. border: 1px solid black;
  32. height: 200%;
  33. background: purple;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div id="outer">
  39. <div id="flexContainer">
  40. <div id="flexItem">item</div>
  41. </div>
  42. </div>
  43. </body>
  44. </html>