overflow-hidden-border-radius-force-backing-store.html

<!DOCTYPE html>
<html>
<head>
<style>

#outer {
    position: absolute;
    z-index: 1;
    top: 50px;
    left: 50px;
    width: 300px;
    height: 300px;
    border-radius: 80px;
    overflow: hidden;
}

#inner {
    width: 300px;
    height: 300px;
    overflow: auto;
}

#content {
    height: 1000px;
    will-change: transform;
    background-image: linear-gradient(to bottom,red,orange,yellow, green, blue,indigo,violet);
}

</style>

<script type="text/javascript">
    if (window.testRunner)
        testRunner.dumpAsText();

    function runTest()
    {
        if (!window.internals)
            return;

        document.getElementById('layers').innerHTML = internals.layerTreeAsText(document);
    }
</script>

</head>

<body onload="runTest()">
<!-- Test that an element with overflow:hidden and border-radius correctly renders, when having a scrollable child element.
The test passes if you can see the text "Test" in a scrollable white box. -->
<div id="outer">
    <div id="inner">
        <div id="content">
        </div>
    </div>
</div>

<pre id="layers">Layer tree appears here in DRT.</pre>

</body>
</html>

chromium/third_party/blink/web_tests/fast/borders/overflow-hidden-border-radius-force-backing-store.html