<!DOCTYPE html> <html lang="en" class="reftest-wait"> <meta charset="utf-8"> <title>Scrollboxes with non-uniform backgrounds should prevent their contents from pulling background colors, even if those contents start out above uniform backgrounds and have an animated position</title> <style> div { min-height: 50px; box-model: border-box; } .first, .second { border: 1px solid blue; margin: 50px 0; position: relative; } .border { border: 1px solid black; } .underlap { border: 1px solid #088; margin-left: 120px; width: 80px; margin-bottom: -30px; } .scrollable { height: auto; overflow: auto; } .scrollarea { width: 5000px; border: none; padding: 10px 0 20px; height: auto; } .scrolled { margin-left: 220px; width: 100px; height: 100px; border-color: red; } .animated-position { position: relative; left: 20px; } body { margin: 0; padding: 0 100px; height: 3000px; } </style> <div class="first" reftest-assigned-layer="page-background"> <!-- This is just a regular box, it should end up in the page background layer. --> </div> <div class="underlap"> <!-- This item intersects with the scrollable box and is positioned below .scrollable, in z-order. --> </div> <div class="scrollable border"> <div class="scrollarea"> <div class="scrolled border animated-position reftest-no-paint"> <!-- This box starts out above solid white background, but it will move so that it intersects .underlap, so it shouldn't pull up a background color to begin with so that it doesn't need to invalidate. --> </div> </div> </div> <div class="second" reftest-assigned-layer="page-background"> <!-- This should share a layer with .first and the page background. --> </div> <script> var scrollable = document.querySelector(".scrollable"); // Make .scrollable start out with active scrolling. scrollable.scrollLeft = 0; scrollable.scrollLeft = 20; var animatedLeft = document.querySelector(".animated-position"); function doTest() { animatedLeft.style.left = "-40px"; document.documentElement.removeAttribute("class"); } // Layerize #animatedLeft animatedLeft.offsetLeft; animatedLeft.style.left = "40px"; animatedLeft.offsetLeft; animatedLeft.style.left = "60px"; animatedLeft.offsetLeft; document.addEventListener("MozReftestInvalidate", doTest, false); setTimeout(doTest, 200); </script>