LayoutTests/css3/filters/animation-from-initial-values-with-color-matrix.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>