repaint-composited-child-in-scrolled-container.html

<!DOCTYPE html>
<script src="../resources/text-based-repaint.js" type="text/javascript"></script>
<style>
#outer {
    overflow: scroll;
    width: 300px;
    height: 300px;
    /* translucent to prevent compositing. */
    background-color: rgba(0, 0, 255, 0.5);
    position: absolute;
}
#container {
    position: absolute;
    top: 0px;
    left: 50px;
    width: 600px;
    height: 600px;
    background-color: red;
    will-change: transform;
}
</style>
<body onload="runRepaintAndPixelTest()">
<div id="outer">
    <div id="container"><div id="inner"></div></div>
</div>

<script>
function repaintTest() {
    // This test ensures we properly paint composited descendants of clipped
    // ancestors in the invalidateTree step. Composited children can be moved
    // around in respect to their clipping ancestors without needing to be
    // repainted (and will have their clip applied directly by the CC), so
    // Blink needs to ignore their ancestor's clip rects to properly paint.
    // We can't just change the background color, because that gets repainted
    // in style recalc and doesn't tickle the bug.
    document.querySelector('#inner').style.border = '300px solid green';
    document.querySelector('#outer').scrollLeft = 500;
}
</script>

chromium/third_party/blink/web_tests/paint/invalidation/scroll/repaint-composited-child-in-scrolled-container.html