obscured-background-no-repaint.html

<html>
<head>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<style type="text/css">
    #test1 div {
        height: 100px;
        width: 100px;
    }
    #test1 .parent {
        background-image: url(../svg/resources/animated-svg-fixed-size.svg)
    }
    #test1 .child {
        background-color: green;
    }

    #test2 .parent {
        position: relative;
        height: 100px;
        width: 100px;
        background-image: url(../svg/resources/animated-svg-fixed-size.svg);
        background-repeat: no-repeat;
        background-position: center;
    }

    #test2 .child {
        background-color: green;
        height: 75px;
        width: 75px;
    }
    #test3 img {
        background-image: url(../svg/resources/animated-svg-fixed-size.svg)
    }
    #test4 .parent {
        position: relative;
        height: 100px;
        width: 100px;
        background-color: red;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url(../svg/resources/animated-svg-fixed-size.svg)
    }
</style>
<script>
    // Test that obscured animated gif does not trigger repaints.
    if (window.testRunner) {
        testRunner.waitUntilDone();
        testRunner.dumpAsText();
    }

    function finish() {
        var layerTree = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_DETAILED_INVALIDATIONS);
        var invalidatedObjects = {};
        for (var layer of JSON.parse(layerTree).layers) {
            if (layer.invalidations) {
                for (var invalidation of layer.invalidations) {
                    // We don't check no-repeat for background obscuration.
                    if (invalidation.object.includes("id='target2'"))
                        continue;
                    // Ok to invalidate the IFC of block-in-inline.
                    // See |LayoutBox::ForegroundIsKnownToBeOpaqueInRect|.
                    if (invalidation.object.includes("id='target4'") ||
                        invalidation.object.includes("id='imgInBlockInInline'"))
                        continue;
                    invalidatedObjects[invalidation.object] = true;
                }
            }
        }
        // Passes if there is no invalidations other than imgForAdvanceImageAnimation
        // (which ensures we are running the image animation).
        if (Object.keys(invalidatedObjects).length != 1 ||
            !Object.keys(invalidatedObjects)[0].includes('imgForAdvanceImageAnimation'))
            output.textContent = 'FAIL: Unexpected paint invalidations: ' + JSON.stringify(invalidatedObjects) + '\n' + layerTree;
        else
            output.textContent = 'PASS';
        testRunner.notifyDone();
    }

    function start() {
        if (!window.testRunner || !window.internals)
            return;

        // Ensure the deferred decoder has decoded ../resources/apple.jpg.
        testRunner.updateAllLifecyclePhasesAndCompositeThen(function() {
            internals.advanceImageAnimation(imgForAdvanceImageAnimation);
            runAfterLayoutAndPaint(function() {
                internals.startTrackingRepaints(document);
                internals.advanceImageAnimation(imgForAdvanceImageAnimation);
                runAfterLayoutAndPaint(function() {
                    internals.advanceImageAnimation(imgForAdvanceImageAnimation);
                    runAfterLayoutAndPaint(finish);
                });
            });
        });
    }

</script>
</head>
<body onload="start()">
<div id="test1">
    <div id="target1" class="parent">
        <div class="child">
        </div>
    </div>
</div>
<div id="test2">
    <div id="target2" class="parent">
        <div class="child">
        </div>
    </div>
</div>
<div id="test3">
    <img id="target3" src="../resources/apple.jpg">
</div>
<div id="test4">
    <div id="target4" class="parent">
        <a>
            <div></div>
            <div>
                <img id="imgInBlockInInline" src="../resources/apple.jpg">
            </div>
        </a>
    </div>
</div>
<img id="imgForAdvanceImageAnimation" src="../svg/resources/animated-svg-fixed-size.svg">
<pre id="output"></pre>
</body>
</html>
chromium/third_party/blink/web_tests/paint/invalidation/background/obscured-background-no-repaint.html
