overflow-scroll-composited-non-stacking-child.html

<!DOCTYPE html>
<html>
<head>
<script src="../resources/text-based-repaint.js"></script>
<style>

body { overflow: hidden; }
.icon {
    position: absolute;
    background-color: #fdb;
    left: 200px;
    top: 10px;
    width: 40px;
    height: 40px;
}
.scroller {
    overflow: scroll;
    margin-left: 10px;
    margin-top: 60px;
    width: 260px;
    height: 150px;
    padding: 20px;
    border: 5px solid #bce;
}
.list, .commit {
    position: relative;
    width: 180px;
    height: 250px;
}
.back {
    position: absolute;
    z-index: -1;
    background-color: #cdc;
    left: 50px;
    top: 40px;
    width: 180px;
    height: 100px;
}

</style>
</head>
<body onload="runRepaintTest()">
<div class="icon" style="will-change: transform;"></div>
<div class="scroller">
    <div class="list">
        <div class="commit">
            <div class="back"></div>
        </div>
    </div>
</div>
<script>
function repaintTest() {
    document.querySelector(".scroller").scrollTop = 50;
}
</script>
</body>
</html>

chromium/third_party/blink/web_tests/paint/invalidation/scroll/overflow-scroll-composited-non-stacking-child.html