<!DOCTYPE html> <html lang="en" class="reftest-wait" reftest-async-scroll> <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</title> <style> div { min-height: 50px; box-model: border-box; } .first, .second { border: 1px solid blue; margin: 50px 0; } .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; } 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 .scrolled, in z-order. --> </div> <div class="scrollable border" reftest-displayport-x="0" reftest-displayport-y="0" reftest-displayport-w="2000" reftest-displayport-h="200"> <div class="scrollarea"> <div class="scrolled border 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"); function doTest() { scrollable.scrollLeft = 100; document.documentElement.removeAttribute("class"); } // Make .scrollable start out with active scrolling. scrollable.scrollLeft = 0; scrollable.scrollLeft = 10; document.addEventListener("MozReftestInvalidate", doTest, false); // setTimeout(doTest, 500); </script>