<!doctype html>
<html>
<head>
<style>
    #box {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background-color: silver;
    }

    .dot {
        position: absolute;
        top: 0;
        left: 0;
        height: 4px;
        width: 4px;
        background-color: silver;
    }
    
    #box.animating {
        animation: move 1s linear;
    }

    @keyframes move {
        from { transform: translate3d(100px, 2000px, 0); }
        to   { transform: translate3d(100px, 2100px, 0); }
    }

</style>
<script src="../resources/compositing-test-utils.js"></script>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

function dumpLayerTree()
{
    if (!window.internals)
        return;

    var out = document.getElementById('out');
    out.innerText = layerTreeWithoutTransforms(internals.LAYER_TREE_INCLUDES_BACKING_STORE_ATTACHED);
}

function dumpLayersSoon()
{
    setTimeout(function() {
        dumpLayerTree();
        if (window.testRunner)
            testRunner.notifyDone();
    }, 0);
}

function runTest()
{
    makeDots(5, 5, 60);
    let box = document.getElementById('box');
    box.addEventListener('animationstart', dumpLayersSoon, false);
    box.classList.add('animating');
}

window.addEventListener('load', runTest, false);

</script>
</head>
<body>
<p>An in-view element animating off-screen should not have backing store.</p>
<pre id="out"></pre>
<div id="box">
    Some text here to force backing store.
</div>

</body>
</html>