<!DOCTYPE html>
<html>
<head>
    <style>
        #test {
            position: absolute;
            top: 100px;
            left: 100px;
            height: 100px;
            width: 100px;
            background: green;
            transition: transform 40ms;
            transform: translate3d(0,0,0);
            animation: slideInUp 50ms;
        }

        #test.trans {
            transform: translateX(200%);
        }

        @keyframes slideInUp {
            0% { 
                transform: translate3d(-100%, 0, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
            }
        }
    </style>
</head>
<body>
    <div id="test"></div>
<p>Should see animationend followed by transitionend.</p>
<pre id="logging"></pre>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        function doLog(s)
        {
            document.getElementById('logging').textContent += s + '\n';
        }
        
        var testDiv = document.getElementById('test');
        testDiv.addEventListener("transitionend", function() {
            doLog("transitionend");
            if (window.testRunner)
                testRunner.notifyDone();
        });

        testDiv.addEventListener("animationend", function() {
            doLog("animationend");
            window.setTimeout(function() {
                testDiv.classList.add('trans');
            }, 0)

            // Watchdog timer.
            window.setTimeout(function() {
                if (window.testRunner)
                    testRunner.notifyDone();
            }, 500)
        });
    </script>
</body>
</html>