<!DOCTYPE html>
<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 src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
var startEventReceived = false;
var endEventReceived = false;
var prefixedEventReceived = 0;
document.addEventListener('webkitAnimationStart', () => {
prefixedEventReceived++;
});
document.addEventListener('animationstart', () => {
startEventReceived = true;
});
document.addEventListener('webkitAnimationIteration', () => {
prefixedEventReceived++;
});
document.addEventListener('webkitAnimationEnd', () => {
prefixedEventReceived++;
});
document.addEventListener('animationend', () => {
endEventReceived = true;
document.getElementById('box').className = '';
document.getElementById('box').offsetTop; // force style recalc
// Launch again the animation to catch the animation iteration events this time.
document.getElementById('box').style.animationIterationCount = "infinite";
document.getElementById('box').className = 'animate';
});
async_test(t => {
window.addEventListener("load", t.step_func(() => {
// 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);
document.addEventListener('animationiteration', t.step_func_done(() => {
assert_true(startEventReceived);
assert_true(endEventReceived);
assert_equals(prefixedEventReceived, 0);
}));
}));
}, "Tests that unprefixed animation events are correctly fired when listeners are on both versions");
</script>
Codebase Browser
chromium