fractional-scroll-area-invalidation.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!DOCTYPE html>
  2. <html lang="en" reftest-async-scroll>
  3. <meta charset="utf-8">
  4. <title>Make sure the scrolled layer is not invalidated when you scroll all the way to the bottom</title>
  5. <style>
  6. body {
  7. margin: 0;
  8. }
  9. .scrollbox {
  10. margin: 50px;
  11. width: 200px;
  12. height: 200px;
  13. overflow: auto;
  14. }
  15. .scrolled-contents {
  16. height: 150.2px;
  17. padding-top: 150px;
  18. }
  19. .reftest-no-paint {
  20. margin: 0 20px;
  21. border: 1px solid blue;
  22. height: 25px;
  23. }
  24. </style>
  25. <body>
  26. <div class="scrollbox"
  27. reftest-displayport-x="0" reftest-displayport-y="0"
  28. reftest-displayport-w="200" reftest-displayport-h="200"
  29. reftest-async-scroll-x="0" reftest-async-scroll-y="0">
  30. <div class="scrolled-contents">
  31. <div class="reftest-no-paint">
  32. <!-- This element has the magic "reftest-no-paint" class which
  33. constitutes the actual test here. -->
  34. </div>
  35. </div>
  36. </div>
  37. <script>
  38. var scrollbox = document.querySelector(".scrollbox");
  39. scrollbox.scrollTop = 2;
  40. scrollbox.scrollTop = 1;
  41. scrollbox.scrollTop = 0;
  42. function doTest() {
  43. scrollbox.scrollTop = 999;
  44. document.documentElement.removeAttribute("class");
  45. }
  46. document.addEventListener("MozReftestInvalidate", doTest);
  47. </script>