<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>