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

<script>
if (window.testRunner)
    window.testRunner.dumpAsText();

function hasNotOpaqueCompositedScrollingContentsLayer(layer) {
    if (layer.name == "Scrolling Contents Layer")
        return !layer.contentsOpaque;
    if (layer.children) {
        for (var i = 0; i < layer.children.length; i++) {
            if (hasNotOpaqueCompositedScrollingContentsLayer(layer.children[i]))
                return true;
        }
    }
    return false;
}

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

    var result = "";
    result += "Should not have opaque composited scrolling contents layer: ";
    if (hasNotOpaqueCompositedScrollingContentsLayer(JSON.parse(window.internals.layerTreeAsText(document))))
        result += "Pass.\n";
    else
        result += "Fail.\n";
    window.testRunner.setCustomTextOutput(result);
}
</script>
<style>
#scroller {
    background: white local content-box;
    border: 10px solid rgba(0, 255, 0, 0.5);
    overflow: scroll;
    padding: 10px;
    width: 180px;
    height: 180px;
    will-change: transform;
}
.spacer {
    height: 280px;
}
</style>
<!-- The scroller's Scrolling Contents Layer should be transparent due to the
    content-box clip with a 10px padding leaving a transparent gap between.
-->
<div id="scroller"><div class="spacer"></div></div>
<pre id="layertree"></pre>