multiple-backgrounds-style-change.html

<!DOCTYPE html>
<style>
    .box {
        height: 200px;
        width: 200px;
        border: 1px solid black;
        background-repeat: no-repeat;
        background-size: 100px 100px;
        background-position: 0 0, 100px 100px;
        background-image: url('../../../images/resources/green-256x256.jpg'), url('../../../images/resources/dice.png');
    }

    .composited {
        will-change: transform;
        transform: translate3d(0, 0, 0);
    }

    .composited.changed {
        transform: translate3d(50px, 50px, 0);
    }
</style>
<script src="../resources/text-based-repaint.js"></script>
<script>
    function repaintTest()
    {
        document.getElementById('test').classList.add('changed');
    }

    onload = runRepaintAndPixelTest;
</script>
<div id="test" class="composited box">
</div>

chromium/third_party/blink/web_tests/paint/invalidation/background/multiple-backgrounds-style-change.html