layer-splitting-2.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!DOCTYPE html>
  2. <html lang="en" class="reftest-wait"
  3. reftest-displayport-x="0"
  4. reftest-displayport-y="0"
  5. reftest-displayport-w="800"
  6. reftest-displayport-h="1000">
  7. <meta charset="utf-8">
  8. <title>Scrolling shouldn't invalidate the fixed layer</title>
  9. <style>
  10. .content {
  11. box-sizing: border-box;
  12. width: 200px;
  13. height: 200px;
  14. border: 1px solid black;
  15. }
  16. .fixed {
  17. position: fixed;
  18. top: 20px;
  19. left: 20px;
  20. }
  21. .reftest-no-paint {
  22. border-color: lime;
  23. }
  24. .distanceFromTop {
  25. margin-top: 240px;
  26. }
  27. body {
  28. margin: 0;
  29. padding: 20px;
  30. height: 3000px;
  31. }
  32. </style>
  33. <div class="distanceFromTop content">
  34. <!--
  35. This is just a non-uniform item that will be scrolled so that it's between
  36. the page background and the fixed layer.
  37. -->
  38. </div>
  39. <div class="fixed reftest-no-paint content">
  40. <!--
  41. This fixed layer gets its own PaintedLayer above the page.
  42. It shouldn't attempt to pull up an opaque background color from the page,
  43. because the page can move under it.
  44. -->
  45. </div>
  46. <script>
  47. function doTest() {
  48. document.documentElement.scrollTop = 100;
  49. document.documentElement.removeAttribute("class");
  50. }
  51. document.documentElement.scrollTop = 0;
  52. document.addEventListener("MozReftestInvalidate", doTest, false);
  53. </script>