blob: 663ce9aacfccf1266931fea8c5cd684ff8460f56 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>Tests that unprefixed animation events are correctly fired when listeners are on both versions.</title>
<style>
#box {
position: relative;
left: 100px;
top: 10px;
height: 100px;
width: 100px;
background-color: #999;
}
.animate {
animation-duration: 0.3s;
animation-name: anim;
}
@keyframes anim {
from { left: 200px; }
to { left: 300px; }
}
</style>
<script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
function fail() {
document.getElementById('result').innerHTML = 'FAIL: Got ' + iterationEventReceived + ' animationCount events and '
+ prefixedEventReceived + ' prefixed events.';
}
var startEventReceived = false;
var endEventReceived = false;
var prefixedEventReceived = 0;
document.addEventListener('webkitAnimationStart', function() {
prefixedEventReceived++;
}, false);
document.addEventListener('animationstart', function() {
startEventReceived = true;
}, false);
document.addEventListener('animationiteration', function() {
if (startEventReceived && endEventReceived && prefixedEventReceived == 0) {
document.getElementById('result').innerHTML = 'PASS: All events have been received as expected.';
} else
fail();
if (window.testRunner)
testRunner.notifyDone();
}, false);
document.addEventListener('webkitAnimationIteration', function() {
prefixedEventReceived++;
}, false);
document.addEventListener('webkitAnimationEnd', function() {
prefixedEventReceived++;
}, false);
document.addEventListener('animationend', function() {
endEventReceived = true;
document.getElementById('box').className = '';
// Launch again the animation to catch the animation iteration events this time.
setTimeout(function () {
document.getElementById('box').style.animationIterationCount = "infinite";
document.getElementById('box').className = 'animate';
}, 200);
}, false);
onload = function()
{
// Animation begins once we append the DOM node to the document.
var boxNode = document.createElement('div');
boxNode.id = 'box';
boxNode.className = 'animate';
document.body.appendChild(boxNode);
}
</script>
</head>
<body>
Tests that unprefixed animation events are correctly fired when listeners are on both versions.
<pre id="result">FAIL: No animation events received</pre>
</body>
</html>