2014-11-20 23:26:29 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<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;
|
2020-11-04 17:44:01 +00:00
|
|
|
animation-duration: 200ms;
|
2014-11-20 23:26:29 +00:00
|
|
|
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>
|
