Paint local background colors onto foreground layer.

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

Index: third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-opaque-background.html
diff --git a/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-opaque-background.html b/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-opaque-background.html
new file mode 100644
index 0000000000000000000000000000000000000000..c667dbf175af2b46ddf8e6f1302d2f1c2f90fa54
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-opaque-background.html
@@ -0,0 +1,27 @@
+<script>
+if (window.testRunner)
+    window.testRunner.dumpAsText();
+onload = function() {
+    if (window.testRunner && window.internals)
+        document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);

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

Please parse this into JSON and check the contentsOpaque value on the scrolling
contents layer explicitly.
Similar example:

https://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/compositi...

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

Done, thanks for the example.

+}
+</script>
+<style>
+#scroller {
+    background: white local content-box;
+    border: 10px solid rgba(0, 255, 0, 0.5);
+    overflow: scroll;
+    width: 200px;
+    height: 200px;
+    will-change: transform;
+}
+.spacer {
+    height: 300px;
+}
+</style>
+<!-- The scroller's Scrolling Contents Layer should be opaque due to the opaque
+    color background. This means that we will be able to draw text with subpixel
+    anti-aliasing.
+-->
+<div id="scroller"><div class="spacer"></div></div>
+<pre id="layertree"></pre>