descendant-with-clip-path.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
#scroller {
    overflow: scroll;
    height: 300px;
    width: 300px;
    background-color: red;
}

#inner {
    height: 1000px;
    width: 250px;
    background-color: blue;
}

#fixed {
    position: fixed;
    height: 100px;
    width: 100px;
    background-color: green;
    top: 400px;
    left: 100px;
}
</style>
<div id="scroller">
    <div id="inner">
        <div id="fixed"></div>
    </div>
</div>
<script>
if (window.internals)
    internals.settings.setPreferCompositingToLCDTextEnabled(true);

onload = function() {
    runAfterLayoutAndPaint(function() {
        inner.style.clipPath = "polygon(40px 550px,432px 302px,409px 237px,46px 156px)";
    }, true);
};
</script>

chromium/third_party/blink/web_tests/compositing/overflow/descendant-with-clip-path.html