Paint local background colors onto foreground layer.

third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-local-background.html

Index: third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-local-background.html
diff --git a/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-local-background.html b/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-local-background.html
new file mode 100644
index 0000000000000000000000000000000000000000..e1be5e1d72a6d4e66dac25d07cec5d4d3df2f8c0
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-local-background.html
@@ -0,0 +1,32 @@
+<script>
+if (window.testRunner)
+    testRunner.waitUntilDone();
+onload = function() {
+    // Double rAF to ensure content is painted before scroll.
+    requestAnimationFrame(function() {

[chrishtr, 2016/08/08 21:16:39]

Do you know why it takes two rAFs in this case?

[flackr, 2016/08/09 18:35:27]

yes, requestAnimationFrame fires at the beginning of the frame before we have
actually painted anything. Doing it twice ensures that we scroll on the second
frame after having already painted the scroller in its initial position. This
trick has been used in many other tests and I think is also used by external
developers when they want to wait for something to have been painted.

+        requestAnimationFrame(function() {
+            document.getElementById('scroller').scrollTo(0, 200);
+            if (window.testRunner)
+                window.testRunner.notifyDone();
+        })
+    });
+}
+</script>
+<style>
+#scroller {
+    background: gray local content-box;
+    border: 10px solid rgba(0, 255, 0, 0.5);
+    overflow: scroll;
+    padding: 10px;
+    width: 200px;
+    height: 200px;
+    will-change: transform;
+}
+
+.spacer {
+    height: 300px;
+}
+</style>
+<div id="scroller">

[chrishtr, 2016/08/08 21:16:39]

Add a comment explaining what this is testing.

[flackr, 2016/08/09 18:35:27]

Done.

+    <div class="spacer"></div>
+</div>