<!DOCTYPE html> <html lang="en" reftest-async-scroll> <meta charset="utf-8"> <title>Make sure the scrolled layer is not invalidated when you scroll all the way to the bottom</title> <style> body { margin: 0; } .scrollbox { margin: 50px; width: 200px; height: 200px; overflow: auto; } .scrolled-contents { height: 150.2px; padding-top: 150px; } .reftest-no-paint { margin: 0 20px; border: 1px solid blue; height: 25px; } </style> <body> <div class="scrollbox" reftest-displayport-x="0" reftest-displayport-y="0" reftest-displayport-w="200" reftest-displayport-h="200" reftest-async-scroll-x="0" reftest-async-scroll-y="0"> <div class="scrolled-contents"> <div class="reftest-no-paint"> <!-- This element has the magic "reftest-no-paint" class which constitutes the actual test here. --> </div> </div> </div> <script> var scrollbox = document.querySelector(".scrollbox"); scrollbox.scrollTop = 2; scrollbox.scrollTop = 1; scrollbox.scrollTop = 0; function doTest() { scrollbox.scrollTop = 999; document.documentElement.removeAttribute("class"); } document.addEventListener("MozReftestInvalidate", doTest); </script>