68 lines
1.7 KiB
HTML
68 lines
1.7 KiB
HTML
<!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>
|