blob: 5ddfee933c207f0da5adfcd6f51378a8d1d6b057 [file] [log] [blame]
<!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=false ] -->
<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>