blob: 4a3cb4d7634b08b82a413cf0192a2419df331293 [file] [log] [blame]
<!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=false ] -->
<html>
<head>
<title>Test mixing prefixed and unprefixed events</title>
<style>
#box {
position: absolute;
left: 0;
top: 200px;
height: 100px;
width: 100px;
background-color: blue;
animation-duration: 100ms;
animation-iteration-count: 2;
}
@keyframes move {
from { left: 0px; }
to { left: 100px; }
}
</style>
<script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
var results;
function dump(msg) {
results.innerHTML += msg + "<br/>";
}
function handleEvent(event) {
dump(event.type + ": " + event.animationName);
if (event.type == "animationend" && window.testRunner)
testRunner.notifyDone();
}
function handlePrefixedEvent(event) {
dump("FAIL -- " + event.type + ": " + event.animationName);
}
function init() {
results = document.getElementById("results");
var box = document.getElementById("box");
box.addEventListener("animationstart", handleEvent, false);
box.addEventListener("animationiteration", handleEvent, false);
box.addEventListener("animationend", handleEvent, false);
box.addEventListener("webkitAnimationStart", handlePrefixedEvent, false);
box.addEventListener("webkitAnimationIteration", handlePrefixedEvent, false);
box.addEventListener("webkitAnimationEnd", handlePrefixedEvent, false);
box.style.animationName = "move";
}
window.addEventListener("load", init, false);
</script>
</head>
<body>
This test performs two iterations of an animation. The animation should fire all three events (start, iteration, end).
<div id="box">
</div>
<div id="results">
</div>
</body>
</html>