Web Animations API: Add layout tests for element.animate() keyframes

LayoutTests/web-animations-api/w3c/resources/keyframes-test.js

 (function(){
 'use strict'
 
 function createElement() {
   var element = document.createElement('div');
   document.documentElement.appendChild(element);
   return element;
 }
 
-function heldTiming(iterationStart) {
+function heldTiming(progress) {
   return {
     duration: 1000,
-    playbackRate: 0,
     fill: 'forwards',
-    iterationStart: iterationStart,
+    delay: -progress * 1000,
   };
 }
 
-function assertAnimationStyles(keyframes, expectations) {
+function assertAnimationStyles(keyframes, expectations, description) {
   for (var progress in expectations) {
     var element = createElement();
     element.animate(keyframes, heldTiming(progress));
     var computedStyle = getComputedStyle(element);
     for (var property in expectations[progress]) {
       assert_equals(computedStyle[property], expectations[progress][property],
-          property + ' at ' + (progress * 100) + '%');
+          property + ' at ' + (progress * 100) + '%' + (description ? ' ' + description : ''));
     }
   }
 }
 
+// Currently our animation timeline is not stable during page load script execution.
+// By deferring the tests to requestAnimationFrame() we can get a stable timeline and
+// avoid flaky test results.

[shans, 2014/04/30 11:46:27]

Considering that we want these to be w3c tests eventually, I'm uncomfortable
with this requirement.

Are we likely to be able to fix animation timeline stability during page load
script execution? Is it fundamental to the model that the timeline is unstable?

[alancutter (OOO until 2018), 2014/05/01 00:05:13]

It's not clear how soon the unstable animation timeline issue will take to
resolve at this stage. It's easy to remove this later, added FIXME to do so.

+function testInRAF(testFunction, description, properties) {
+  async_test(function(testHandle) {
+    requestAnimationFrame(function() {
+      testHandle.step(testFunction);
+      testHandle.done();
+    })
+  }, description, properties);
+}
+
 window.assertAnimationStyles = assertAnimationStyles;
+window.testInRAF = testInRAF;
 })();