Fix Compositing of Opaque Scrolling Layers and Add Tests

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

Index: third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-background-opaque-to-transparent.html
diff --git a/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-background-opaque-to-transparent.html b/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-background-opaque-to-transparent.html
new file mode 100644
index 0000000000000000000000000000000000000000..34d8fff8f606940fdfca18965daf26d65e3e2d6f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-background-opaque-to-transparent.html
@@ -0,0 +1,76 @@
+<script src="../../resources/run-after-layout-and-paint.js"></script>
+<script>
+    if (window.internals)
+        internals.runtimeFlags.compositeOpaqueScrollersEnabled = true;
+
+    if (window.testRunner) {
+        testRunner.dumpAsTextWithPixelResults();
+        testRunner.waitUntilDone();
+    }
+
+    function hasOpaqueCompositedScrollingContentsLayer(layer) {
+        if (layer.name == "Scrolling Contents Layer")
+            return layer.contentsOpaque;
+        if (layer.children) {
+            for (var i = 0; i < layer.children.length; i++) {
+                if (hasOpaqueCompositedScrollingContentsLayer(layer.children[i]))
+                    return true;
+            }
+        }
+        return false;
+    }
+
+    function hasCompositedScrollingContentsLayer(layer) {
+        if (layer.name == "Scrolling Contents Layer")
+            return true;
+        if (layer.children) {
+            for (var i = 0; i < layer.children.length; i++) {
+                if (hasCompositedScrollingContentsLayer(layer.children[i]))
+                    return true;
+            }
+        }
+        return false;
+    }
+
+    onload = function() {
+        if (!window.testRunner || !window.internals)
+            return;
+
+        var result = "Should have opaque composited scrolling contents layer: ";
+        if (hasOpaqueCompositedScrollingContentsLayer(JSON.parse(window.internals.layerTreeAsText(document))))
+            result += "Pass.\n";
+        else
+            result += "Fail.\n";
+        document.getElementById("test-1-output").innerHTML = result;
+
+        scrollerElement = document.getElementById("scroller");
+        scrollerElement.style.background = "transparent local content-box";
+
+        runAfterLayoutAndPaint(function() {
+            var result = "Should not have opaque composited scrolling contents layer: ";
+            if (!hasCompositedScrollingContentsLayer(JSON.parse(window.internals.layerTreeAsText(document))))
+                result += "Pass.\n";
+            else
+                result += "Fail.\n";
+            document.getElementById("test-2-output").innerHTML = result;
+            runAfterLayoutAndPaint(function() { testRunner.notifyDone(); });
+        });
+    }
+</script>
+<style>
+#scroller {
+    background: red local content-box;
+    border: 10px solid rgba(0, 255, 0, 0.5);
+    overflow: scroll;
+    width: 200px;
+    height: 200px;
+}
+.spacer {
+    height: 300px;
+}
+</style>
+<div id="scroller"><div class="spacer"></div></div>
+<p>Scroller background should be white</p>
+<p id="test-1-output"></p>
+<p id="test-2-output"></p>
+