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

<!DOCTYPE HTML>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<meta name="fuzzy" content="0-1;0-400">
<style>
body {
    margin: 0;
}

#scroller {
    overflow: scroll;
    height: 300px;
    width: 300px;
    background-color: red;
}

#outer {
    height: 550px;
    width: 300px;
    background-color: blue;
}

#scrolled {
    height: 1000px;
    width: 250px;
    background-color: green;
}

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

onload = function() {
    runAfterLayoutAndPaint(function() {
        outer.style.clipPath = "polygon(50px 450px, 400px 450px, 400px 150px, 50px 150px)";
    }, true);
};
</script>

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