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

        .composited {
            -webkit-transform: translate3d(0, 0, 0);
        }
        
        .composited.changed {
            -webkit-transform: translate3d(50px, 50px, 0);
        }
    </style>
<script>jsTestIsAsync = true;</script>
<script src="../../resources/js-test-pre.js"></script>
<script>
    description("Tests that a transform change on an element with multiple background images doesn't cause a repaint.");
    function startTrackingRepaints()
    {
        if (window.internals)
            window.internals.startTrackingRepaints();
        document.getElementById('test').classList.add('changed');
        setTimeout(logRepaints, 0)
    }

    function logRepaints()
    {
        layerTreeAsText =  window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
        window.internals.stopTrackingRepaints();
        shouldBeTrue("layerTreeAsText.indexOf('(repaint rects') == -1");

        finishJSTest();
    }
    
    var loadedRemaining = 2;
    function imageLoaded()
    {
        if (!--loadedRemaining) {
            document.getElementById('test').classList.add('apply-images');
            setTimeout(startTrackingRepaints, 0);
        }
    }

    function doTest()
    {
        // We have to know that the images to be used by CSS are loaded to avoid spurious repaints later.
        var firstImage = new Image();
        firstImage.onload = imageLoaded;
        firstImage.src = '../images/resources/green-256x256.jpg';

        var secondImage = new Image();
        secondImage.onload = imageLoaded;
        secondImage.src = '../images/resources/dice.png';
    }

    window.addEventListener('load', doTest, false);
</script>
</head>
<body>
    <div id="test" class="composited box">
    </div>
<script src="../../resources/js-test-post.js"></script>
</html>