<!DOCTYPE html>

<html>
<head>
    <style type="text/css" media="screen">
        .box {
            height: 100px;
            width: 100px;
            margin: 20px;
            background-color: blue;
            will-change: transform;
            transform: translate3d(0, 0, 0);
        }

        #movers.moved > .box {
            animation: move 1s 1s linear; /* Note 1 sec delay */
        }

        /* Test that we fetch the current style, not the one snapshotted when the animation started */
        #movers.moved > #changedbox {
            transform: translate3d(50px, 0, 0);
        }

        /* Test that fill-mode: backwards works */
        #movers.moved > #filledbox {
            animation: move 1s 1s linear backwards;
        }
        
        @keyframes move {
            from { transform: translateX(100px);   }
            to   { transform: translateX(400px); }
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        var results = [];
        function check(message, expected, actual) {
            if (expected == actual) {
                results.push('PASS - ' + message);
            } else {
                results.push('FAIL - ' + actual);
            }
        }

        onload = function() {
            document.getElementById('movers').className = 'moved';
            document.body.offsetTop;
            check('default', 'matrix(1, 0, 0, 1, 0, 0)', getComputedStyle(document.querySelector('#testbox')).transform);
            check('changed style', 'matrix(1, 0, 0, 1, 50, 0)', getComputedStyle(document.querySelector('#changedbox')).transform);
            check('backwards fill', 'matrix(1, 0, 0, 1, 100, 0)', getComputedStyle(document.querySelector('#filledbox')).transform);
            document.body.innerHTML = results.join('<br>');
            if (window.testRunner)
                testRunner.notifyDone();
        }

    </script>
</head>
<body>
    <p>Test computed style during the delay phase of an accelerated animation.</p>
    <div id="movers">
        <div id="testbox" class="box"></div>
        <div id="changedbox" class="box"></div>
        <div id="filledbox" class="box"></div>
    </div>
    <div id="result">
    </div>
</body>
</html>