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

<script src="../../resources/run-after-layout-and-paint.js"></script>
<script src="resources/composited-scroll.js"></script>
<script>
    if (window.testRunner) {
        testRunner.dumpAsTextWithPixelResults();
        testRunner.waitUntilDone();
    }

    onload = function() {
        if (!window.testRunner || !window.internals)
            return;

        var result = "Should not have opaque composited scrolling contents layer: ";
        if (!elementSubtreeHasCompositedScrollLayers(document.getElementById('scroller')))
            result += "Pass.\n";
        else
            result += "Fail.\n";
        document.getElementById("test-1-output").innerHTML = result;

        scrollerElement = document.getElementById("scroller");
        scrollerElement.style.background = "green local content-box";

        runAfterLayoutAndPaint(function() {
            var result = "Should have opaque composited scrolling contents layer: ";
            if (elementSubtreeHasOpaqueCompositedScrollingContentsLayer(document.getElementById('scroller')))
                result += "Pass.\n";
            else
                result += "Fail.\n";
            document.getElementById("test-2-output").innerHTML = result;
            runAfterLayoutAndPaint(function() { testRunner.notifyDone(); });
        });
    }
</script>
<style>
#scroller {
    background: transparent local content-box;
    border: 10px solid rgba(0, 255, 0, 0.5);
    contain: paint;
    overflow: scroll;
    width: 200px;
    height: 200px;
}
.spacer {
    height: 300px;
}
</style>
<div id="scroller"><div class="spacer"></div></div>
<p>Scroller background should be green</p>
<p id="test-1-output"></p>
<p id="test-2-output"></p>