56 lines
1.2 KiB
HTML
56 lines
1.2 KiB
HTML
<script>
|
|
if (window.testRunner)
|
|
window.testRunner.waitUntilDone();
|
|
|
|
var numExpectedAnimations = 4;
|
|
|
|
document.addEventListener("webkitAnimationEnd", function () {
|
|
var r = document.getElementById("results");
|
|
r.innerHTML += "animation " + numExpectedAnimations + " finished<br>";
|
|
numExpectedAnimations--;
|
|
if (!numExpectedAnimations && window.testRunner)
|
|
window.testRunner.notifyDone();
|
|
}, false);
|
|
</script>
|
|
<style>
|
|
@-webkit-keyframes a {
|
|
from {}
|
|
to {
|
|
-webkit-filter: invert(0.9);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes b {
|
|
from {}
|
|
to {
|
|
-webkit-filter: opacity(0.9);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes c {
|
|
from {}
|
|
to {
|
|
-webkit-filter: sepia(0.9);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes d {
|
|
from {}
|
|
to {
|
|
-webkit-filter: grayscale(0.9);
|
|
}
|
|
}
|
|
|
|
.anim {
|
|
position: relative;
|
|
width: 10px;
|
|
height: 10px;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-webkit-animation-duration: 0.1s;
|
|
}
|
|
</style>
|
|
<div class="anim" style="-webkit-animation-name: a;"></div>
|
|
<div class="anim" style="-webkit-animation-name: b;"></div>
|
|
<div class="anim" style="-webkit-animation-name: c;"></div>
|
|
<div class="anim" style="-webkit-animation-name: d;"></div>
|
|
<div id="results"></div> |