2008-09-15 Dean Jackson <dino@apple.com>
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 15 Sep 2008 20:59:50 +0000 (20:59 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 15 Sep 2008 20:59:50 +0000 (20:59 +0000)
        Reviewed by Tim Hatcher

        Tests for animations.
        https://bugs.webkit.org/show_bug.cgi?id=20789

        * animations/animation-test-helpers.js: Added.
        * animations/generic-from-to-expected.txt: Added.
        * animations/generic-from-to.html: Added.
        * animations/multiple-animations-expected.txt: Added.
        * animations/multiple-animations.html: Added.
        * animations/multiple-keyframes-expected.txt: Added.
        * animations/multiple-keyframes.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/animations/animation-test-helpers.js [new file with mode: 0644]
LayoutTests/animations/generic-from-to-expected.txt [new file with mode: 0644]
LayoutTests/animations/generic-from-to.html [new file with mode: 0644]
LayoutTests/animations/multiple-animations-expected.txt [new file with mode: 0644]
LayoutTests/animations/multiple-animations.html [new file with mode: 0644]
LayoutTests/animations/multiple-keyframes-expected.txt [new file with mode: 0644]
LayoutTests/animations/multiple-keyframes.html [new file with mode: 0644]

index 03b6443..a879755 100644 (file)
@@ -1,3 +1,18 @@
+2008-09-15  Dean Jackson  <dino@apple.com>
+
+        Reviewed by Tim Hatcher
+
+        Tests for animations.
+        https://bugs.webkit.org/show_bug.cgi?id=20789
+
+        * animations/animation-test-helpers.js: Added.
+        * animations/generic-from-to-expected.txt: Added.
+        * animations/generic-from-to.html: Added.
+        * animations/multiple-animations-expected.txt: Added.
+        * animations/multiple-animations.html: Added.
+        * animations/multiple-keyframes-expected.txt: Added.
+        * animations/multiple-keyframes.html: Added.
+
 2008-09-15  Anders Carlsson  <andersca@apple.com>
 
         Reviewed by Maciej.
diff --git a/LayoutTests/animations/animation-test-helpers.js b/LayoutTests/animations/animation-test-helpers.js
new file mode 100644 (file)
index 0000000..3b59629
--- /dev/null
@@ -0,0 +1,50 @@
+if (window.layoutTestController) {
+  layoutTestController.dumpAsText();
+  layoutTestController.waitUntilDone();
+}
+
+result = "";
+
+function isCloseEnough(actual, desired, tolerance)
+{
+    if (tolerance == undefined || tolerance == 0)
+        tolerance = defaultTolerance;
+    var diff = Math.abs(actual - desired);
+    return diff < tolerance;
+}
+
+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>";
+}
+
+function checkFunctionWithParameter(i)
+{
+  return function() {
+    checkExpectedValue(i);
+  };
+}
+
+function setup()
+{
+    for (var i=0; i < expected.length; i++) {
+        window.setTimeout(checkFunctionWithParameter(i), expected[i][0]);
+    }
+}
+
+function cleanup()
+{
+    document.getElementById('result').innerHTML = result;
+    if (window.layoutTestController)
+        layoutTestController.notifyDone();
+}
\ No newline at end of file
diff --git a/LayoutTests/animations/generic-from-to-expected.txt b/LayoutTests/animations/generic-from-to-expected.txt
new file mode 100644 (file)
index 0000000..025c5ec
--- /dev/null
@@ -0,0 +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
+
diff --git a/LayoutTests/animations/generic-from-to.html b/LayoutTests/animations/generic-from-to.html
new file mode 100644 (file)
index 0000000..189e22b
--- /dev/null
@@ -0,0 +1,58 @@
+<!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">
+  <title>Test simple animation</title>
+  <style type="text/css" media="screen">
+    #box {
+      position: relative;
+      left: 100px;
+      top: 10px;
+      height: 100px;
+      width: 100px;
+      background-color: blue;
+      -webkit-animation-duration: 1s;
+      -webkit-animation-timing-function: linear;
+      -webkit-animation-name: "anim";
+    }
+    @-webkit-keyframes "anim" {
+        from { left: 100px; }
+        to   { left: 200px; }
+    }
+  </style>
+  <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],
+    ];
+
+    function start()
+    {
+        setup();
+        window.setTimeout(function() {
+            document.getElementById('box').style.display = "none";
+            cleanup();
+        }, 900);
+    }
+    
+    document.addEventListener('webkitAnimationStart', start, false);
+    
+  </script>
+</head>
+<body>
+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.
+<div id="box">
+</div>
+<div id="result">
+</div>
+</body>
+</html>
diff --git a/LayoutTests/animations/multiple-animations-expected.txt b/LayoutTests/animations/multiple-animations-expected.txt
new file mode 100644 (file)
index 0000000..998d077
--- /dev/null
@@ -0,0 +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
+
diff --git a/LayoutTests/animations/multiple-animations.html b/LayoutTests/animations/multiple-animations.html
new file mode 100644 (file)
index 0000000..37f84dd
--- /dev/null
@@ -0,0 +1,86 @@
+<!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">
+  <title>Test animation with multiple concurrent animations</title>
+  <style type="text/css" media="screen">
+    #box1 {
+      position: relative;
+      left: 10px;
+      top: 10px;
+      height: 100px;
+      width: 100px;
+      background-color: blue;
+      -webkit-animation-duration: 2s;
+      -webkit-animation-timing-function: linear;
+      -webkit-animation-name: anim1;
+    }
+    @-webkit-keyframes anim1 {
+        from { left: 10px; }
+        40% { left: 30px; }
+        60% { left: 10px; }
+        to   { left: 20px; }
+    }
+    #box2 {
+      position: relative;
+      left: 10px;
+      top: 10px;
+      height: 100px;
+      width: 100px;
+      background-color: blue;
+      -webkit-animation-duration: 2s;
+      -webkit-animation-timing-function: linear;
+      -webkit-animation-name: anim2;
+    }
+    @-webkit-keyframes anim2 {
+        from { left: 10px; }
+        50% { left: 30px; }
+        to   { left: 20px; }
+    }
+  </style>
+  <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],
+    ];
+
+    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);
+    
+  </script>
+</head>
+<body>
+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.
+<div id="box1">
+</div>
+<div id="box2">
+</div>
+<div id="result">
+</div>
+</body>
+</html>
diff --git a/LayoutTests/animations/multiple-keyframes-expected.txt b/LayoutTests/animations/multiple-keyframes-expected.txt
new file mode 100644 (file)
index 0000000..33e5a1e
--- /dev/null
@@ -0,0 +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
+
diff --git a/LayoutTests/animations/multiple-keyframes.html b/LayoutTests/animations/multiple-keyframes.html
new file mode 100644 (file)
index 0000000..89a86c3
--- /dev/null
@@ -0,0 +1,60 @@
+<!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">
+  <title>Test animation with multiple keyframes</title>
+  <style type="text/css" media="screen">
+    #box {
+      position: relative;
+      left: 10px;
+      top: 10px;
+      height: 100px;
+      width: 100px;
+      background-color: blue;
+      -webkit-animation-duration: 2s;
+      -webkit-animation-timing-function: linear;
+      -webkit-animation-name: anim;
+    }
+    @-webkit-keyframes anim {
+        from { left: 10px; }
+        40% { left: 30px; }
+        60% { left: 10px; }
+        to   { left: 20px; }
+    }
+  </style>
+  <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],
+    ];
+
+    function start()
+    {
+        setup();
+        window.setTimeout(function() {
+            document.getElementById('box').style.display = "none";
+            cleanup();
+        }, 2100);
+    }
+    
+    document.addEventListener('webkitAnimationStart', start, false);
+    
+  </script>
+</head>
+<body>
+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.
+<div id="box">
+</div>
+<div id="result">
+</div>
+</body>
+</html>