2008-12-10 Pierre-Olivier Latour <pol@apple.com>
authorpol@apple.com <pol@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 11 Dec 2008 00:48:35 +0000 (00:48 +0000)
committerpol@apple.com <pol@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 11 Dec 2008 00:48:35 +0000 (00:48 +0000)
        Reviewed by Darin Adler.

        Rewrote animations/animation-test-helpers.js to take advantage of the pauseAnimationAtTimeOnElementWithId()
        API when available in DRT.

        Updated all animations tests that check for values of animated CSS properties to use these new helper functions.

        https://bugs.webkit.org/show_bug.cgi?id=22796

        * animations/animation-test-helpers.js:
        (isCloseEnough):
        (checkExpectedValue):
        (endTest):
        (startTest):
        (runAnimationTest):
        * animations/big-rotation-expected.txt:
        * animations/big-rotation.html:
        * animations/change-keyframes-expected.txt:
        * animations/change-keyframes-name-expected.txt:
        * animations/change-keyframes-name.html:
        * animations/change-keyframes.html:
        * animations/change-one-anim-expected.txt:
        * animations/change-one-anim.html:
        * animations/generic-from-to-expected.txt:
        * animations/generic-from-to.html:
        * animations/import-expected.txt:
        * animations/import.html:
        * animations/keyframe-timing-functions-expected.txt:
        * animations/keyframe-timing-functions.html:
        * animations/keyframes-comma-separated-expected.txt:
        * animations/keyframes-comma-separated.html:
        * animations/keyframes-expected.txt:
        * animations/keyframes-from-missing.html:
        * animations/keyframes-out-of-order-expected.txt:
        * animations/keyframes-out-of-order.html:
        * animations/keyframes-to-missing.html:
        * animations/keyframes.html:
        * animations/lineheight-animation-expected.txt:
        * animations/lineheight-animation.html:
        * animations/matrix-anim-expected.txt:
        * animations/matrix-anim.html:
        * animations/multiple-animations-expected.txt:
        * animations/multiple-animations.html:
        * animations/multiple-keyframes-expected.txt:
        * animations/multiple-keyframes.html:
        * animations/transition-and-animation-1-expected.txt:
        * animations/transition-and-animation-1.html:
        * animations/transition-and-animation-2-expected.txt:
        * animations/transition-and-animation-2.html:
        * animations/width-using-ems-expected.txt:
        * animations/width-using-ems.html:
        * platform/win/Skipped:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@39187 268f45cc-cd09-0410-ab3c-d52691b4dbfc

39 files changed:
LayoutTests/ChangeLog
LayoutTests/animations/animation-test-helpers.js
LayoutTests/animations/big-rotation-expected.txt
LayoutTests/animations/big-rotation.html
LayoutTests/animations/change-keyframes-expected.txt
LayoutTests/animations/change-keyframes-name-expected.txt
LayoutTests/animations/change-keyframes-name.html
LayoutTests/animations/change-keyframes.html
LayoutTests/animations/change-one-anim-expected.txt
LayoutTests/animations/change-one-anim.html
LayoutTests/animations/generic-from-to-expected.txt
LayoutTests/animations/generic-from-to.html
LayoutTests/animations/import-expected.txt
LayoutTests/animations/import.html
LayoutTests/animations/keyframe-timing-functions-expected.txt
LayoutTests/animations/keyframe-timing-functions.html
LayoutTests/animations/keyframes-comma-separated-expected.txt
LayoutTests/animations/keyframes-comma-separated.html
LayoutTests/animations/keyframes-expected.txt
LayoutTests/animations/keyframes-from-missing.html
LayoutTests/animations/keyframes-out-of-order-expected.txt
LayoutTests/animations/keyframes-out-of-order.html
LayoutTests/animations/keyframes-to-missing.html
LayoutTests/animations/keyframes.html
LayoutTests/animations/lineheight-animation-expected.txt
LayoutTests/animations/lineheight-animation.html
LayoutTests/animations/matrix-anim-expected.txt
LayoutTests/animations/matrix-anim.html
LayoutTests/animations/multiple-animations-expected.txt
LayoutTests/animations/multiple-animations.html
LayoutTests/animations/multiple-keyframes-expected.txt
LayoutTests/animations/multiple-keyframes.html
LayoutTests/animations/transition-and-animation-1-expected.txt
LayoutTests/animations/transition-and-animation-1.html
LayoutTests/animations/transition-and-animation-2-expected.txt
LayoutTests/animations/transition-and-animation-2.html
LayoutTests/animations/width-using-ems-expected.txt
LayoutTests/animations/width-using-ems.html
LayoutTests/platform/win/Skipped

index 2475007..ba60247 100644 (file)
@@ -1,3 +1,58 @@
+2008-12-10  Pierre-Olivier Latour  <pol@apple.com>
+
+        Reviewed by Darin Adler.
+
+        Rewrote animations/animation-test-helpers.js to take advantage of the pauseAnimationAtTimeOnElementWithId()
+        API when available in DRT.
+
+        Updated all animations tests that check for values of animated CSS properties to use these new helper functions.
+
+        https://bugs.webkit.org/show_bug.cgi?id=22796
+
+        * animations/animation-test-helpers.js:
+        (isCloseEnough):
+        (checkExpectedValue):
+        (endTest):
+        (startTest):
+        (runAnimationTest):
+        * animations/big-rotation-expected.txt:
+        * animations/big-rotation.html:
+        * animations/change-keyframes-expected.txt:
+        * animations/change-keyframes-name-expected.txt:
+        * animations/change-keyframes-name.html:
+        * animations/change-keyframes.html:
+        * animations/change-one-anim-expected.txt:
+        * animations/change-one-anim.html:
+        * animations/generic-from-to-expected.txt:
+        * animations/generic-from-to.html:
+        * animations/import-expected.txt:
+        * animations/import.html:
+        * animations/keyframe-timing-functions-expected.txt:
+        * animations/keyframe-timing-functions.html:
+        * animations/keyframes-comma-separated-expected.txt:
+        * animations/keyframes-comma-separated.html:
+        * animations/keyframes-expected.txt:
+        * animations/keyframes-from-missing.html:
+        * animations/keyframes-out-of-order-expected.txt:
+        * animations/keyframes-out-of-order.html:
+        * animations/keyframes-to-missing.html:
+        * animations/keyframes.html:
+        * animations/lineheight-animation-expected.txt:
+        * animations/lineheight-animation.html:
+        * animations/matrix-anim-expected.txt:
+        * animations/matrix-anim.html:
+        * animations/multiple-animations-expected.txt:
+        * animations/multiple-animations.html:
+        * animations/multiple-keyframes-expected.txt:
+        * animations/multiple-keyframes.html:
+        * animations/transition-and-animation-1-expected.txt:
+        * animations/transition-and-animation-1.html:
+        * animations/transition-and-animation-2-expected.txt:
+        * animations/transition-and-animation-2.html:
+        * animations/width-using-ems-expected.txt:
+        * animations/width-using-ems.html:
+        * platform/win/Skipped:
+
 2008-12-10  Alice Liu  <alice.liu@apple.com>
 
         Adding tweak to .conf files needed for 
index 3b59629..464fd97 100644 (file)
-if (window.layoutTestController) {
-  layoutTestController.dumpAsText();
-  layoutTestController.waitUntilDone();
-}
+/* This is the helper function to run animation tests:
 
-result = "";
+Test page requirements:
+- The body must contain an empty div with id "result"
+- Call this function directly from the <script> inside the test page
 
-function isCloseEnough(actual, desired, tolerance)
-{
-    if (tolerance == undefined || tolerance == 0)
-        tolerance = defaultTolerance;
-    var diff = Math.abs(actual - desired);
-    return diff < tolerance;
-}
+Function parameters:
+    expected [required]: an array of arrays defining a set of CSS properties that must have given values at specific times (see below)
+    callback [optional]: a function to be executed just before the test starts (none by default)
+    event [optional]: which DOM event to wait for before starting the test ("webkitAnimationStart" by default)
 
-function checkExpectedValue(index)
-{
-    var property = expected[index][1];
-    var id = expected[index][2];
-    var expectedValue = expected[index][3];
-  
-    var computedStyle = window.getComputedStyle(document.getElementById(id)).getPropertyCSSValue(property);
-
-    var computedValue = computedStyle.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
-    if (isCloseEnough(computedValue, expectedValue))
-        result += "PASS - " + id + " at " + expected[index][0] + " saw something close to: " + expectedValue + "<br>";
-    else
-        result += "FAIL - " + id + " at " + expected[index][0] + " expected: " + expectedValue + " but saw: " + computedValue + "<br>";
-}
+    Each sub-array must contain these items in this order:
+    - the name of the CSS animation (may be null) [1]
+    - the time in seconds at which to snapshot the CSS property
+    - the id of the element on which to get the CSS property value
+    - the name of the CSS property to get [2]
+    - the expected value for the CSS property
+    - the tolerance to use when comparing the effective CSS property value with its expected value
 
-function checkFunctionWithParameter(i)
-{
-  return function() {
-    checkExpectedValue(i);
-  };
-}
+    [1] If null is passed, a regular setTimeout() will be used instead to snapshot the animated property in the future,
+    instead of fast forwarding using the pauseAnimationAtTimeOnElementWithId() JS API from DRT 
+
+    [2] If the CSS property name is "webkitTransform", expected value must be an array of 1 or more numbers corresponding to the matrix elements,
+    or a string which will be compared directly (useful if the expected value is "none")
+    If the CSS property name is "webkitTransform.N", expected value must be a number corresponding to the Nth element of the matrix
 
-function setup()
+*/
+function runAnimationTest(expected, callback, event)
 {
-    for (var i=0; i < expected.length; i++) {
-        window.setTimeout(checkFunctionWithParameter(i), expected[i][0]);
+    var result = "";
+    var hasPauseAnimationAPI = window.layoutTestController && layoutTestController.pauseAnimationAtTimeOnElementWithId;
+
+    function isCloseEnough(actual, desired, tolerance)
+    {
+        var diff = Math.abs(actual - desired);
+        return diff <= tolerance;
     }
-}
 
-function cleanup()
-{
-    document.getElementById('result').innerHTML = result;
-    if (window.layoutTestController)
-        layoutTestController.notifyDone();
-}
\ No newline at end of file
+    function checkExpectedValue(expected, index)
+    {
+        var animationName = expected[index][0];
+        var time = expected[index][1];
+        var elementId = expected[index][2];
+        var property = expected[index][3];
+        var expectedValue = expected[index][4];
+        var tolerance = expected[index][5];
+
+        if (animationName && hasPauseAnimationAPI && !layoutTestController.pauseAnimationAtTimeOnElementWithId(animationName, time, elementId)) {
+            result += "FAIL - animation \"" + animationName + "\" is not running" + "<br>";
+            return;
+        }
+
+        var computedValue;
+        var pass;
+        if (!property.indexOf("webkitTransform")) {
+            computedValue = window.getComputedStyle(document.getElementById(elementId)).webkitTransform;
+
+            if (typeof expectedValue == "string")
+                pass = (computedValue == expectedValue);
+            else if (typeof expectedValue == "number") {
+                var m = computedValue.split("(");
+                var m = m[1].split(",");
+                pass = isCloseEnough(parseFloat(m[parseInt(property.substring(16))]), expectedValue, tolerance);
+            } else {
+                var m = computedValue.split("(");
+                var m = m[1].split(",");
+                for (i = 0; i < expectedValue.length; ++i) {
+                    pass = isCloseEnough(parseFloat(m[i]), expectedValue[i], tolerance);
+                    if (!pass)
+                        break;
+                }
+            }
+        } else if (property == "lineHeight") {
+            computedValue = parseInt(window.getComputedStyle(document.getElementById(elementId)).lineHeight);
+            pass = isCloseEnough(computedValue, expectedValue, tolerance);
+        } else {    
+            var computedStyle = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
+            computedValue = computedStyle.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
+            pass = isCloseEnough(computedValue, expectedValue, tolerance);
+        }
+
+        if (pass)
+            result += "PASS - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s saw something close to: " + expectedValue + "<br>";
+        else
+            result += "FAIL - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s expected: " + expectedValue + " but saw: " + computedValue + "<br>";
+    }
+
+    function endTest()
+    {
+        document.getElementById('result').innerHTML = result;
+
+        if (window.layoutTestController)
+            layoutTestController.notifyDone();
+    }
+
+    function checkExpectedValueCallback(expected, index)
+    {
+        return function() { checkExpectedValue(expected, index); };
+    }
+
+    var testStarted = false;
+    function startTest(expected, callback)
+    {
+        if (testStarted) return;
+        testStarted = true;
+
+        if (callback)
+            callback();
+
+        var maxTime = 0;
+
+        for (var i = 0; i < expected.length; ++i) {
+            var animationName = expected[i][0];
+            var time = expected[i][1];
+
+            // We can only use the animation fast-forward mechanism if there's an animation name
+            // and DRT implements pauseAnimationAtTimeOnElementWithId()
+            if (animationName && hasPauseAnimationAPI)
+                checkExpectedValue(expected, i);
+            else {
+                if (time > maxTime)
+                    maxTime = time;
+
+                window.setTimeout(checkExpectedValueCallback(expected, i), time * 1000);
+            }
+        }
+
+        if (maxTime > 0)
+            window.setTimeout(endTest, maxTime * 1000 + 50);
+        else
+            endTest();
+    }
+    
+    if (window.layoutTestController) {
+        layoutTestController.dumpAsText();
+        layoutTestController.waitUntilDone();
+    }
+    
+    if (!expected)
+        throw("Expected results are missing!");
+    
+    var target = document;
+    if (event == undefined)
+        event = "webkitAnimationStart";
+    else if (event == "load")
+        target = window;
+    target.addEventListener(event, function() { startTest(expected, callback); }, false);
+}
index e0c7196..d5d082a 100644 (file)
@@ -1,3 +1,6 @@
 This test shows rotation of > 180 degrees. The box should make one and a half rotations.
 
-PASS
+PASS - "webkitTransform" property for "box" element at 1s saw something close to: -1,0,0,-1
+PASS - "webkitTransform" property for "box" element at 2s saw something close to: 1,0,0,1
+PASS - "webkitTransform" property for "box" element at 3s saw something close to: -1,0,0,-1
+
index 6a9a5e7..eaba267 100644 (file)
@@ -1,6 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-   "http://www.w3.org/TR/html4/loose.dtd">
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       height: 100px;
       width: 100px;
       background-color: blue;
-      -webkit-animation-duration: 1.03s;
+      -webkit-animation-duration: 3s;
       -webkit-animation-timing-function: linear;
       -webkit-animation-name: "rotate";
     }
     @-webkit-keyframes "rotate" {
         from { -webkit-transform: rotate(0); }
-        to   { -webkit-transform: rotate(558deg); }
+        to   { -webkit-transform: rotate(540deg); }
     }
   </style>
+  <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-      layoutTestController.dumpAsText();
-      layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 0.2;
-    const expected =  [ [ -1,0,0,-1 ],
-                        [ 1,0,0,1 ],
-                        [ -1,0,0,-1 ] ];
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
     
-    function snapshot(which)
-    {
-        if (result != "PASS")
-            return;
-            
-        var s = window.getComputedStyle(document.getElementById('box')).webkitTransform;
-        var a = s.split("(");
-        var a = a[1].split(",");
-        for (i = 0; i < 4; ++i)
-            if (!isEqual(a[i], expected[which][i])) {
-                result = "FAIL(property'"+i+"' was:"+a[i]+", expected:"+expected[which][i]+")";
-                return;
-            }
-    }
-
-    function start()
-    {
-        setTimeout("snapshot(0)", 333);
-        setTimeout("snapshot(1)", 667);
-        setTimeout("snapshot(2)", 1000);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 1100);
-    }
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["rotate", 1, "box", "webkitTransform", [-1,0,0,-1], 0.2],
+      ["rotate", 2, "box", "webkitTransform", [1,0,0,1], 0.2],
+      ["rotate", 3, "box", "webkitTransform", [-1,0,0,-1], 0.2],
+    ];
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues);
     
   </script>
 </head>
index dd46c62..e41c12d 100644 (file)
@@ -1,2 +1,4 @@
 This test performs an animation of the left property and makes sure it is animating. Then it stops the animation, changes the keyframes to an animation of the top property, restarts the animation and makes sure top is animating.
-PASS
+PASS - "left" property for "box" element at 0.5s saw something close to: 200
+PASS - "top" property for "box" element at 1s saw something close to: 100
+
index 0d9f7b2..2a0bbfd 100644 (file)
@@ -1,2 +1,4 @@
 This test starts by making sure the animation is not running, because the animation-name and the name of they @keyframes rule do not match. Then it changes the name of the @keyframes rule so they match and makes sure the animation is now running.
-PASS
+PASS: animation is not running
+PASS - "left" property for "box" element at 0.45s saw something close to: 200
+
index 74602fe..45426ce 100644 (file)
         to   { left: 300px; }
     }
     </style>
+    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 10;
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
-    
-    function snapshot(expected)
-    {
-        if (result != "PASS")
-            return;
-        
-        var prop = parseInt(window.getComputedStyle(document.getElementById('box')).left);
-        if (!isEqual(prop, expected))
-            result = "FAIL('left' property was:"+prop+", expected:"+expected+")";
-    }
     
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      [null, 0.2 + 0.25, "box", "left", 200, 10],
+    ];
+
     function findKeyframesRule(rule)
     {
         var ss = document.styleSheets;
         document.getElementById('box').style.webkitAnimationName = "anim";
     }
     
-    function start()
+    function setup()
     {
-        document.removeEventListener('webkitAnimationStart', start, false);
-        setTimeout("snapshot(200)", 250);
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 300);
+        if (layoutTestController.pauseAnimationAtTimeOnElementWithId("bar", 0.5, "box"))
+            document.getElementById("pre-result").innerHTML = "FAIL: animation is running";
+        else
+            document.getElementById("pre-result").innerHTML = "PASS: animation is not running";
+        
+        setTimeout("change()", 200);
     }
     
-    document.addEventListener('webkitAnimationStart', start, false);
-    setTimeout("snapshot(0)", 100);
-    setTimeout("change()", 200);
+    runAnimationTest(expectedValues, setup, "load");
     
   </script>
 </head>
@@ -95,6 +73,8 @@ name of they @keyframes rule do not match. Then it changes the name of the @keyf
 match and makes sure the animation is now running.
 <div id="box">
 </div>
+<div id="pre-result">
+</div>
 <div id="result">
 </div>
 </body>
index 6a64950..5f8712c 100644 (file)
         to   { left: 300px; }
     }
     </style>
+    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 10;
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
-    
-    function snapshot(property, expected)
-    {
-        if (result != "PASS")
-            return;
-        
-        var prop = parseInt(window.getComputedStyle(document.getElementById('box'))[property]);
-        if (!isEqual(prop, expected))
-            result = "FAIL('"+property+"' property was:"+prop+", expected:"+expected+")";
-    }
     
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      [null, 0.5, "box", "left", 200, 10],
+      [null, 0.5 + 0.5, "box", "top", 100, 10],
+    ];
+
     function findKeyframesRule(rule)
     {
         var ss = document.styleSheets;
         keyframes.insertRule("60% { top: 100px; }");
         keyframes.insertRule("100% { top: 150px; }");
         document.getElementById('box').style.webkitAnimationName = "anim";
-        
-        setTimeout("snapshot('top', 100)", 500);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 600);
     }
     
     function startChange()
         document.getElementById('box').style.webkitAnimationName = "none";
         setTimeout("change()", 0);
     }
-
-    function start()
+    
+    function setup()
     {
-        document.removeEventListener('webkitAnimationStart', start, false);
-        setTimeout("snapshot('left', 200)", 500);
         setTimeout("startChange()", 600);
     }
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues, setup);
     
   </script>
 </head>
index 8c61e7a..1d47d94 100644 (file)
@@ -1,2 +1,4 @@
 This test performs two animations, left and top. It animates over 1 second. At 0.5 second it removes the left animation and the top animation should continue from where it left off.
-PASS
+PASS - "left" property for "box" element at 0.75s saw something close to: 150
+PASS - "top" property for "box" element at 0.75s saw something close to: 225
+
index 64f30e8..e6e60c0 100644 (file)
             to { top: 300px; }
          }
     </style>
+    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
-        if (window.layoutTestController) {
-            layoutTestController.dumpAsText();
-            layoutTestController.waitUntilDone();
-        }
-    
-        result = "PASS";
-        const defaultTolerance = 15;
-    
-        const expected =  [ 1, 0, 0, 1, 0, 0 ];
-    
-        function isEqual(actual, desired, tolerance)
-        {
-            if (tolerance == undefined || tolerance == 0)
-                tolerance = defaultTolerance;
-            var diff = Math.abs(actual - desired);
-            return diff < tolerance;
-        }
+        
+        const expectedValues = [
+          // [animation-name, time, element-id, property, expected-value, tolerance]
+          [null, 0.75, "box", "left", 150, 15],
+          [null, 0.75, "box", "top", 225, 15],
+        ];
 
         function removeAnim()
         {
             target.style.left = left;
         }
         
-        function snapshot()
-        {
-            var target = document.getElementById("box");
-            var left = parseInt(window.getComputedStyle(target).left);
-            var top = parseInt(window.getComputedStyle(target).top);
-
-            if (!isEqual(left, 150)) {
-                result = "FAIL('left' was:"+left+", expected:150)";
-                return;
-            }
-            if (!isEqual(top, 225)) {
-                result = "FAIL('top' was:"+top+", expected:225)";
-                return;
-            }
-        }
-
-        function start(event)
+        function setup()
         {
-            // We only want to continue for one of the two animations running
-            if (event.animationName == "horiz")
-                return;
-
             setTimeout("removeAnim()", 500);
-            setTimeout("snapshot()", 750);
-            
-            window.setTimeout(function() {
-                document.getElementById('result').innerHTML = result;
-                if (window.layoutTestController)
-                    layoutTestController.notifyDone();
-            }, 800);
         }
 
-        document.addEventListener('webkitAnimationStart', start, false);
+        runAnimationTest(expectedValues, setup);
     </script>
 </head>
 <body>
index 025c5ec..c68bf81 100644 (file)
@@ -1,5 +1,5 @@
 This test performs an animation of the left property. It animates over 1 second. It takes 3 snapshots and expects each result to be within a specified range.
-PASS - box at 250 saw something close to: 125
-PASS - box at 500 saw something close to: 150
-PASS - box at 750 saw something close to: 175
+PASS - "left" property for "box" element at 0.25s saw something close to: 125
+PASS - "left" property for "box" element at 0.5s saw something close to: 150
+PASS - "left" property for "box" element at 0.75s saw something close to: 175
 
index 189e22b..8242f64 100644 (file)
   <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
 
-    const defaultTolerance = 5;
-    
-    const expected = [
-      // [time, property, element-id, expected-value]
-      [250, "left", "box", 125],
-      [500, "left", "box", 150],
-      [750, "left", "box", 175],
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim", 0.25, "box", "left", 125, 5],
+      ["anim", 0.50, "box", "left", 150, 5],
+      ["anim", 0.75, "box", "left", 175, 5],
     ];
-
-    function start()
-    {
-        setup();
-        window.setTimeout(function() {
-            document.getElementById('box').style.display = "none";
-            cleanup();
-        }, 900);
-    }
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues);
     
   </script>
 </head>
index 4b36e82..9df9a66 100644 (file)
@@ -1,2 +1,4 @@
 This test performs an animation of the left property. It should stop for 100ms at 100px and 200px We test for those values 50ms after it has stopped at each position. The keyframes are imported so this tests whether they come in correctly.
-PASS
+PASS - "left" property for "box" element at 0.3s saw something close to: 100
+PASS - "left" property for "box" element at 0.7s saw something close to: 200
+
index 3286f20..81a5cb8 100644 (file)
         -webkit-animation-name: "anim";
     }
     </style>
+    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 0.2;
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
     
-    function snapshot(which)
-    {
-        if (result != "PASS")
-            return;
-            
-        var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
-        var expected = which ? 200 : 100;
-        if (!isEqual(left, expected))
-            result = "FAIL(was:"+left+", expected:"+expected+")";
-    }
-
-    function start()
-    {
-        setTimeout("snapshot(0)", 300);
-        setTimeout("snapshot(1)", 700);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 800);
-    }
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim", 0.3, "box", "left", 100, 1],
+      ["anim", 0.7, "box", "left", 200, 1],
+    ];
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues);
     
   </script>
 </head>
index a6ae789..9e4002c 100644 (file)
@@ -1,2 +1,3 @@
 This test should do a linear animation. The timing-function comes from the keyframe, so this is testing whether or not the timing function in keyframes is used. 
-PASS
+PASS - "left" property for "box" element at 0.75s saw something close to: 300
+
index fef2b07..676f0c8 100644 (file)
     }
     
   </style>
+  <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
 
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-
-    result = "PASS";
-    const kDefaultTolerance = 20;
-
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = kDefaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
-  
-    function snapshot()
-    {
-        var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
-        var expected = 300;
-        if (!isEqual(left, expected))
-            result = "FAIL (was: " + left + ", expected: " + expected + ")";
-
-        document.getElementById('result').innerHTML = result;
-        if (window.layoutTestController)
-            layoutTestController.notifyDone();
-    }
-
-    function start()
-    {
-        window.setTimeout(snapshot, 750);
-    }
-  
-    document.addEventListener('webkitAnimationStart', start, false);
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["move", 0.75, "box", "left", 300, 20],
+    ];
+    
+    runAnimationTest(expectedValues);
   </script>
 </head>
 <body>
index c1aa820..98c7178 100644 (file)
@@ -1,2 +1,4 @@
 This test performs an animation of the left property. It should stop for 100ms at 100px and 200px We test for those values 50ms after it has stopped at each position. Keys in two of the keyframes are comma separated, so these should be correctly broken out into separate keyframes.
-PASS
+PASS - "left" property for "box" element at 0.3s saw something close to: 100
+PASS - "left" property for "box" element at 0.7s saw something close to: 200
+
index b20bf6d..f249e4b 100644 (file)
         to   { left: 300px; }
     }
     </style>
+    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 0.2;
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
     
-    function snapshot(which)
-    {
-        if (result != "PASS")
-            return;
-            
-        var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
-        var expected = which ? 200 : 100;
-        if (!isEqual(left, expected))
-            result = "FAIL(was:"+left+", expected:"+expected+")";
-    }
-
-    function start()
-    {
-        setTimeout("snapshot(0)", 300);
-        setTimeout("snapshot(1)", 700);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 800);
-    }
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim", 0.3, "box", "left", 100, 1],
+      ["anim", 0.7, "box", "left", 200, 1],
+    ];
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues);
     
   </script>
 </head>
index 02fc143..cc02e10 100644 (file)
@@ -1,2 +1,4 @@
 This test performs an animation of the left property. It should stop for 100ms at 100px and 200px We test for those values 50ms after it has stopped at each position.
-PASS
+PASS - "left" property for "box" element at 0.3s saw something close to: 100
+PASS - "left" property for "box" element at 0.7s saw something close to: 200
+
index 4f8cf75..1ecaaa5 100644 (file)
     }
     </style>
     <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 0.2;
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
     
-    function snapshot(which)
-    {
-        if (result != "PASS")
-            return;
-            
-        var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
-        var expected = 0;
-        if (!isEqual(left, expected))
-            result = "FAIL(was:"+left+", expected:"+expected+")";
-    }
-
     function start()
     {
-        setTimeout("snapshot(0)", 300);
-        setTimeout("snapshot(1)", 700);
+        layoutTestController.dumpAsText();
         
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 800);
+        if (layoutTestController.pauseAnimationAtTimeOnElementWithId("anim", 0.5, "box"))
+            document.getElementById('result').innerHTML = "FAIL: animation is running";
+        else
+            document.getElementById('result').innerHTML = "PASS";
     }
     
-    window.addEventListener('load', start, false);
+    if (window.layoutTestController)
+        window.addEventListener('load', start, false);
     
   </script>
 </head>
index 9794235..4237bab 100644 (file)
@@ -1,2 +1,4 @@
 This test performs an animation of the left property. It should stop for 100ms at 100px and 200px We test for those values 50ms after it has stopped at each position. The keyframes are out of order and should get correctly sorted.
-PASS
+PASS - "left" property for "box" element at 0.3s saw something close to: 100
+PASS - "left" property for "box" element at 0.7s saw something close to: 200
+
index b15fd83..087a9a3 100644 (file)
         60%  { left: 200px; }
     }
     </style>
+    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 0.2;
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
     
-    function snapshot(which)
-    {
-        if (result != "PASS")
-            return;
-            
-        var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
-        var expected = which ? 200 : 100;
-        if (!isEqual(left, expected))
-            result = "FAIL(was:"+left+", expected:"+expected+")";
-    }
-
-    function start()
-    {
-        setTimeout("snapshot(0)", 300);
-        setTimeout("snapshot(1)", 700);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 800);
-    }
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim", 0.3, "box", "left", 100, 1],
+      ["anim", 0.7, "box", "left", 200, 1],
+    ];
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues);
     
   </script>
 </head>
index 0bc69ab..b4c5680 100644 (file)
     }
     </style>
     <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 0.2;
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
     
-    function snapshot(which)
-    {
-        if (result != "PASS")
-            return;
-            
-        var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
-        var expected = 0;
-        if (!isEqual(left, expected))
-            result = "FAIL(was:"+left+", expected:"+expected+")";
-    }
-
     function start()
     {
-        setTimeout("snapshot(0)", 300);
-        setTimeout("snapshot(1)", 700);
+        layoutTestController.dumpAsText();
         
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 800);
+        if (layoutTestController.pauseAnimationAtTimeOnElementWithId("anim", 0.5, "box"))
+            document.getElementById('result').innerHTML = "FAIL: animation is running";
+        else
+            document.getElementById('result').innerHTML = "PASS";
     }
     
-    window.addEventListener('load', start, false);
+    if (window.layoutTestController)
+        window.addEventListener('load', start, false);
     
   </script>
 </head>
index 5caeda6..89f1765 100644 (file)
         to   { left: 300px; }
     }
     </style>
+    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 0.2;
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
     
-    function snapshot(which)
-    {
-        if (result != "PASS")
-            return;
-            
-        var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
-        var expected = which ? 200 : 100;
-        if (!isEqual(left, expected))
-            result = "FAIL(was:"+left+", expected:"+expected+")";
-    }
-
-    function start()
-    {
-        setTimeout("snapshot(0)", 300);
-        setTimeout("snapshot(1)", 700);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 800);
-    }
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim", 0.3, "box", "left", 100, 1],
+      ["anim", 0.7, "box", "left", 200, 1],
+    ];
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues);
     
   </script>
 </head>
index 9b8589e..4172a8c 100644 (file)
@@ -1,2 +1,3 @@
 This test performs an animation of the line-height property. It tests whether or not we are properly getting the font-size. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
-PASS
+PASS - "lineHeight" property for "box" element at 0.1s saw something close to: 10
+
index f6c31c5..bc93624 100644 (file)
         to   { line-height: 2em; }
     }
     </style>
+    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 1;
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
     
-    function snapshot()
-    {
-        if (result != "PASS")
-            return;
-            
-        var lineHeight = parseInt(window.getComputedStyle(document.getElementById('box')).lineHeight);
-        var expected = 10;
-        if (!isEqual(lineHeight, expected))
-            result = "FAIL(was:"+lineHeight+", expected:"+expected+")";
-    }
-
-    function start()
-    {
-        setTimeout("snapshot()", 100);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 300);
-    }
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim", 0.1, "box", "lineHeight", 10, 1],
+    ];
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues);
     
   </script>
 </head>
index 42f43c3..893fb6a 100644 (file)
@@ -1,2 +1,3 @@
 This test performs an animation of the matrix operator. It animates over 2 seconds. At 1 second it takes a snapshot and expects the result to be within range.
-PASS
+PASS - "webkitTransform" property for "box" element at 0.5s saw something close to: 1,0,0,1
+
index cfcd994..3f036ad 100644 (file)
         to   { -webkit-transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0); }
     }
   </style>
+  <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-      layoutTestController.dumpAsText();
-      layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 0.1;
     
-    const expected =  [ 1, 0, 0, 1, 0, 0 ];
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
     
-    function snapshot(which)
-    {
-        if (result != "PASS")
-            return;
-            
-        var t = window.getComputedStyle(document.getElementById('box')).getPropertyCSSValue('-webkit-transform');
-
-        for (i = 0; i < 6; ++i) {
-            var val = t[0][i].getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
-            if (!isEqual(val, expected[i])) {
-                result = "FAIL(matrix["+i+"] was:"+val+", expected:"+expected[i]+")";
-                return;
-            }
-        }
-    }
-
-    function start()
-    {
-        setTimeout("snapshot(0)", 500);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 600);
-    }
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim", 0.5, "box", "webkitTransform", [1,0,0,1], 0.1],
+    ];
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues);
     
   </script>
 </head>
index 998d077..e30fd62 100644 (file)
@@ -1,8 +1,8 @@
 This test performs animations of the left property on two boxes over 2 seconds. It takes 3 snapshots each and expects each result to be within a specified range.
-PASS - box1 at 400 saw something close to: 20
-PASS - box2 at 500 saw something close to: 20
-PASS - box2 at 1000 saw something close to: 30
-PASS - box1 at 1200 saw something close to: 10
-PASS - box2 at 1500 saw something close to: 25
-PASS - box1 at 1600 saw something close to: 15
+PASS - "left" property for "box1" element at 0.4s saw something close to: 20
+PASS - "left" property for "box2" element at 0.5s saw something close to: 20
+PASS - "left" property for "box2" element at 1s saw something close to: 30
+PASS - "left" property for "box1" element at 1.2s saw something close to: 10
+PASS - "left" property for "box2" element at 1.5s saw something close to: 25
+PASS - "left" property for "box1" element at 1.6s saw something close to: 15
 
index 37f84dd..98ab309 100644 (file)
   <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
 
-    const defaultTolerance = 2;
-    
-    const expected = [
-      // [time, property, element-id, expected-value]
-      [400, "left", "box1", 20],
-      [500, "left", "box2", 20],
-      [1000, "left", "box2", 30],
-      [1200, "left", "box1", 10],
-      [1500, "left", "box2", 25],
-      [1600, "left", "box1", 15],
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim1", 0.4, "box1", "left", 20, 2],
+      ["anim2", 0.5, "box2", "left", 20, 2],
+      ["anim2", 1.0, "box2", "left", 30, 2],
+      ["anim1", 1.2, "box1", "left", 10, 2],
+      ["anim2", 1.5, "box2", "left", 25, 2],
+      ["anim1", 1.6, "box1", "left", 15, 2],
     ];
 
-    var started = false;
-
-    function start()
-    {
-        if (started) return;
-        started = true;
-        setup();
-        window.setTimeout(function() {
-            document.getElementById('box1').style.display = "none";
-            document.getElementById('box2').style.display = "none";
-            cleanup();
-        }, 2100);
-    }
-    
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues);
     
   </script>
 </head>
index 33e5a1e..efbf501 100644 (file)
@@ -1,5 +1,5 @@
 This test performs a keyframed animation of the left property. It animates over 2 seconds. It takes 3 snapshots and expects each result to be within a specified range.
-PASS - box at 400 saw something close to: 20
-PASS - box at 1200 saw something close to: 10
-PASS - box at 1600 saw something close to: 15
+PASS - "left" property for "box" element at 0.4s saw something close to: 20
+PASS - "left" property for "box" element at 1.2s saw something close to: 10
+PASS - "left" property for "box" element at 1.6s saw something close to: 15
 
index 89a86c3..eedaefd 100644 (file)
   <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
 
-    const defaultTolerance = 2;
-    
-    const expected = [
-      // [time, property, element-id, expected-value]
-      [400, "left", "box", 20],
-      [1200, "left", "box", 10],
-      [1600, "left", "box", 15],
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim", 0.4, "box", "left", 20, 2],
+      ["anim", 1.2, "box", "left", 10, 2],
+      ["anim", 1.6, "box", "left", 15, 2],
     ];
-
-    function start()
-    {
-        setup();
-        window.setTimeout(function() {
-            document.getElementById('box').style.display = "none";
-            cleanup();
-        }, 2100);
-    }
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues);
     
   </script>
 </head>
index 4cd89e5..0bb75d2 100644 (file)
@@ -1,2 +1,3 @@
 This test has a transition and animation on the same property (-webkit-transform). But the transition is never triggered, so nothing should be moving when the animation finishes.
-PASS
+PASS - "webkitTransform" property for "box" element at 0.55s saw something close to: none
+
index 0a929ef..28a3067 100644 (file)
         to   { -webkit-transform: translateX(300px); }
     }
     </style>
+    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 0.2;
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
     
-    function snapshot(which)
-    {
-        var m = window.getComputedStyle(document.getElementById('box')).webkitTransform;
-        if (m != "none")
-            result = "FAIL(was:"+m+", expected:none)";
-    }
-
-    function start()
-    {
-        setTimeout("snapshot()", 550);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 600);
-    }
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      [null, 0.55, "box", "webkitTransform", "none", null],
+    ];
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues);
     
   </script>
 </head>
index 868982c..1a332cb 100644 (file)
@@ -1,2 +1,3 @@
 This test has a transition and animation on the same property (-webkit-transform). The animation starts and then the transition is triggered. The transition should start at the position before the animation started (the unanimated position), which is (0,0). If it starts from the start point of the animation (0,100) then there is an error
-PASS
+PASS - "webkitTransform.5" property for "box" element at 0.4s saw something close to: 0
+
index 4722c12..3cb10f7 100644 (file)
         to   { -webkit-transform: translate(400px, 100px) }
     }
     </style>
+    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 0.1;
     
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      [null, 0.4, "box", "webkitTransform.5", 0, 0],
+    ];
     
-    function snapshot()
-    {
-        var m = window.getComputedStyle(document.getElementById('box')).webkitTransform;
-        var a = m.split("(");
-        a = a[1].split(",");
-        
-        if (!isEqual(parseFloat(a[5]), 0))
-            result = "FAIL(was:"+a[5]+", expected:0)";
-    }
-
-    function start()
+    function setup()
     {
         document.getElementById("box").style.webkitTransform = "translateX(400px)";
-        
-        setTimeout("snapshot()", 400);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 500);
     }
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues, setup);
     
   </script>
 </head>
index 9129915..bcf6191 100644 (file)
@@ -1,2 +1,3 @@
 This test performs an animation of the width property using 'em' units. It tests whether or not we are properly getting the default font-size. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
-PASS
+PASS - "width" property for "box" element at 0.333s saw something close to: 133
+
index 75174bd..377dc5c 100644 (file)
         to   { width: 20em; }
     }
     </style>
+    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    
-    result = "PASS";
-    const defaultTolerance = 10;
-    
-    function isEqual(actual, desired, tolerance)
-    {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
     
-    function snapshot(expected)
-    {
-        if (result != "PASS")
-            return;
-            
-        var width = parseInt(window.getComputedStyle(document.getElementById('box')).width);
-        if (!isEqual(width, expected)) {
-            result = "FAIL(was:"+width+", expected:"+expected+")";
-        }
-    }
-
-    function start()
-    {
-        setTimeout("snapshot(133)", 333);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 400);
-    }
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim", 0.333, "box", "width", 133, 10],
+    ];
     
-    document.addEventListener('webkitAnimationStart', start, false);
+    runAnimationTest(expectedValues);
     
   </script>
 </head>
index 79d4fb7..a1a9d08 100644 (file)
@@ -445,6 +445,8 @@ http/tests/xmlhttprequest/upload-onprogress-event.html
 # No transition / animation pause LayoutController API on Windows DRT (https://bugs.webkit.org/show_bug.cgi?id=22239)
 animations/animation-drt-api.html
 animations/animation-drt-api-multiple-keyframes.html
+animations/keyframes-from-missing.html
+animations/keyframes-to-missing.html
 transitions/transition-drt-api.html
 transitions/transition-drt-api-delay.html
 transitions/transition-shorthand-delay.html