2008-12-18 Pierre-Olivier Latour <pol@apple.com>
authorpol@apple.com <pol@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 19 Dec 2008 00:39:21 +0000 (00:39 +0000)
committerpol@apple.com <pol@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 19 Dec 2008 00:39:21 +0000 (00:39 +0000)
        Reviewed by Darin Adler.

        Rewrote some of the transition layout tests that were using setTimeout() to use the transition pause API in DRT when available.

        Rewrote the transition layout tests that were specifically testing the transition end event to use common JS code from transition-end-event-helpers.js.

        Fixed some typos.

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

        * transitions/end-event-helpers.js: Removed.
        * transitions/interrupt-transform-transition-expected.txt:
        * transitions/interrupt-transform-transition.html:
        * transitions/opacity-transition-zindex.html:
        * transitions/start-transform-transition.html:
        * transitions/transform-op-list-match-expected.txt:
        * transitions/transform-op-list-match.html:
        * transitions/transform-op-list-no-match-expected.txt:
        * transitions/transform-op-list-no-match.html:
        * transitions/transition-end-event-all-properties-expected.txt:
        * transitions/transition-end-event-all-properties.html:
        * transitions/transition-end-event-attributes-expected.txt:
        * transitions/transition-end-event-attributes.html:
        * transitions/transition-end-event-container-expected.txt:
        * transitions/transition-end-event-container.html:
        * transitions/transition-end-event-helpers.js: Copied from LayoutTests/transitions/end-event-helpers.js.
        (recordTransitionEndEvent):
        (runTransitionTest.processEndEvents.compareEventInfo):
        (runTransitionTest.processEndEvents.examineResults):
        (runTransitionTest.processEndEvents):
        (runTransitionTest.startTest):
        (runTransitionTest.window):
        (runTransitionTest):
        * transitions/transition-end-event-left-expected.txt:
        * transitions/transition-end-event-left.html:
        * transitions/transition-end-event-multiple-01-expected.txt:
        * transitions/transition-end-event-multiple-01.html:
        * transitions/transition-end-event-multiple-02-expected.txt:
        * transitions/transition-end-event-multiple-02.html:
        * transitions/transition-end-event-multiple-03-expected.txt:
        * transitions/transition-end-event-multiple-03.html:
        * transitions/transition-end-event-multiple-04-expected.txt:
        * transitions/transition-end-event-multiple-04.html:
        * transitions/transition-end-event-nested-expected.txt:
        * transitions/transition-end-event-nested.html:
        * transitions/transition-end-event-set-none-expected.txt:
        * transitions/transition-end-event-set-none.html:
        * transitions/transition-end-event-transform-expected.txt:
        * transitions/transition-end-event-transform.html:
        * transitions/transition-end-event-window-expected.txt:
        * transitions/transition-end-event-window.html:
        * transitions/transition-test-helpers.js: Added.
        (runTransitionTest.isCloseEnough):
        (runTransitionTest.checkExpectedValue):
        (runTransitionTest.endTest):
        (runTransitionTest.runTest):
        (runTransitionTest.startTest):
        (runTransitionTest.if):
        * transitions/transition-timing-function-expected.txt: Copied from LayoutTests/transitions/transition-timing-function-software-expected.txt.
        * transitions/transition-timing-function-software-expected.txt: Removed.
        * transitions/transition-timing-function-software.html: Removed.
        * transitions/transition-timing-function.html: Copied from LayoutTests/transitions/transition-timing-function-software.html.
        * transitions/zero-duration-in-list-expected.txt:
        * transitions/zero-duration-in-list.html:

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

40 files changed:
LayoutTests/ChangeLog
LayoutTests/transitions/end-event-helpers.js [deleted file]
LayoutTests/transitions/interrupt-transform-transition-expected.txt
LayoutTests/transitions/interrupt-transform-transition.html
LayoutTests/transitions/opacity-transition-zindex.html
LayoutTests/transitions/start-transform-transition.html
LayoutTests/transitions/transform-op-list-match-expected.txt
LayoutTests/transitions/transform-op-list-match.html
LayoutTests/transitions/transform-op-list-no-match-expected.txt
LayoutTests/transitions/transform-op-list-no-match.html
LayoutTests/transitions/transition-end-event-all-properties-expected.txt
LayoutTests/transitions/transition-end-event-all-properties.html
LayoutTests/transitions/transition-end-event-attributes-expected.txt
LayoutTests/transitions/transition-end-event-attributes.html
LayoutTests/transitions/transition-end-event-container-expected.txt
LayoutTests/transitions/transition-end-event-container.html
LayoutTests/transitions/transition-end-event-helpers.js [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-left-expected.txt
LayoutTests/transitions/transition-end-event-left.html
LayoutTests/transitions/transition-end-event-multiple-01-expected.txt
LayoutTests/transitions/transition-end-event-multiple-01.html
LayoutTests/transitions/transition-end-event-multiple-02-expected.txt
LayoutTests/transitions/transition-end-event-multiple-02.html
LayoutTests/transitions/transition-end-event-multiple-03-expected.txt
LayoutTests/transitions/transition-end-event-multiple-03.html
LayoutTests/transitions/transition-end-event-multiple-04-expected.txt
LayoutTests/transitions/transition-end-event-multiple-04.html
LayoutTests/transitions/transition-end-event-nested-expected.txt
LayoutTests/transitions/transition-end-event-nested.html
LayoutTests/transitions/transition-end-event-set-none-expected.txt
LayoutTests/transitions/transition-end-event-set-none.html
LayoutTests/transitions/transition-end-event-transform-expected.txt
LayoutTests/transitions/transition-end-event-transform.html
LayoutTests/transitions/transition-end-event-window-expected.txt
LayoutTests/transitions/transition-end-event-window.html
LayoutTests/transitions/transition-test-helpers.js [new file with mode: 0644]
LayoutTests/transitions/transition-timing-function-expected.txt [moved from LayoutTests/transitions/transition-timing-function-software-expected.txt with 100% similarity]
LayoutTests/transitions/transition-timing-function.html [moved from LayoutTests/transitions/transition-timing-function-software.html with 100% similarity]
LayoutTests/transitions/zero-duration-in-list-expected.txt
LayoutTests/transitions/zero-duration-in-list.html

index 379b0b3..cadc2b9 100644 (file)
@@ -1,3 +1,70 @@
+2008-12-18  Pierre-Olivier Latour  <pol@apple.com>
+
+        Reviewed by Darin Adler.
+
+        Rewrote some of the transition layout tests that were using setTimeout() to use the transition pause API in DRT when available.
+
+        Rewrote the transition layout tests that were specifically testing the transition end event to use common JS code from transition-end-event-helpers.js.
+
+        Fixed some typos.
+
+        https://bugs.webkit.org/show_bug.cgi?id=22890
+
+        * transitions/end-event-helpers.js: Removed.
+        * transitions/interrupt-transform-transition-expected.txt:
+        * transitions/interrupt-transform-transition.html:
+        * transitions/opacity-transition-zindex.html:
+        * transitions/start-transform-transition.html:
+        * transitions/transform-op-list-match-expected.txt:
+        * transitions/transform-op-list-match.html:
+        * transitions/transform-op-list-no-match-expected.txt:
+        * transitions/transform-op-list-no-match.html:
+        * transitions/transition-end-event-all-properties-expected.txt:
+        * transitions/transition-end-event-all-properties.html:
+        * transitions/transition-end-event-attributes-expected.txt:
+        * transitions/transition-end-event-attributes.html:
+        * transitions/transition-end-event-container-expected.txt:
+        * transitions/transition-end-event-container.html:
+        * transitions/transition-end-event-helpers.js: Copied from LayoutTests/transitions/end-event-helpers.js.
+        (recordTransitionEndEvent):
+        (runTransitionTest.processEndEvents.compareEventInfo):
+        (runTransitionTest.processEndEvents.examineResults):
+        (runTransitionTest.processEndEvents):
+        (runTransitionTest.startTest):
+        (runTransitionTest.window):
+        (runTransitionTest):
+        * transitions/transition-end-event-left-expected.txt:
+        * transitions/transition-end-event-left.html:
+        * transitions/transition-end-event-multiple-01-expected.txt:
+        * transitions/transition-end-event-multiple-01.html:
+        * transitions/transition-end-event-multiple-02-expected.txt:
+        * transitions/transition-end-event-multiple-02.html:
+        * transitions/transition-end-event-multiple-03-expected.txt:
+        * transitions/transition-end-event-multiple-03.html:
+        * transitions/transition-end-event-multiple-04-expected.txt:
+        * transitions/transition-end-event-multiple-04.html:
+        * transitions/transition-end-event-nested-expected.txt:
+        * transitions/transition-end-event-nested.html:
+        * transitions/transition-end-event-set-none-expected.txt:
+        * transitions/transition-end-event-set-none.html:
+        * transitions/transition-end-event-transform-expected.txt:
+        * transitions/transition-end-event-transform.html:
+        * transitions/transition-end-event-window-expected.txt:
+        * transitions/transition-end-event-window.html:
+        * transitions/transition-test-helpers.js: Added.
+        (runTransitionTest.isCloseEnough):
+        (runTransitionTest.checkExpectedValue):
+        (runTransitionTest.endTest):
+        (runTransitionTest.runTest):
+        (runTransitionTest.startTest):
+        (runTransitionTest.if):
+        * transitions/transition-timing-function-expected.txt: Copied from LayoutTests/transitions/transition-timing-function-software-expected.txt.
+        * transitions/transition-timing-function-software-expected.txt: Removed.
+        * transitions/transition-timing-function-software.html: Removed.
+        * transitions/transition-timing-function.html: Copied from LayoutTests/transitions/transition-timing-function-software.html.
+        * transitions/zero-duration-in-list-expected.txt:
+        * transitions/zero-duration-in-list.html:
+
 2008-12-18  Cameron Zwarich  <zwarich@apple.com>
 
         Reviewed by Geoff Garen.
         * fast/js/ignored-result-null-comparison-crash.html: Added.
         * fast/js/resources/ignored-result-null-comparison-crash.js: Added.
 
->>>>>>> .r39306
 2008-12-12  Pierre-Olivier Latour  <pol@apple.com>
 
         Checked-in new results for failing SVG tests so that the bots are green again.
diff --git a/LayoutTests/transitions/end-event-helpers.js b/LayoutTests/transitions/end-event-helpers.js
deleted file mode 100644 (file)
index b9986b0..0000000
+++ /dev/null
@@ -1,80 +0,0 @@
-var results = new Array();
-
-function compareEventInfo(e1, e2) {
-  // sort by property name then event target id
-  // index 0 is the propertyName
-  if (e1[0]<e2[0]) return -1;
-  if (e1[0]>e2[0]) return +1;
-  // index 1 is the target id
-  if (e1[1]<e2[1]) return -1;
-  if (e1[1]>e2[1]) return +1;
-  return 0;
-}
-
-function recordEvent(event) {
-  results.push([
-    event.propertyName,
-    event.target.id,
-    event.type,
-    Math.round(event.elapsedTime * 1000) / 1000 // round off any float errors
-    ]);
-}
-
-function examineResults(expected) {
-  // sort results so events always display in the same order
-  results.sort(compareEventInfo);
-  var result = '<p>';
-  for (var i=0; i < results.length && i < expected.length; ++i) {
-    result += "Expected Property: " + expected[i][0] + " ";
-    result += "Target: " + expected[i][1] + " ";
-    result += "Type: " + expected[i][2] + " ";
-    result += "Elapsed Time: " + expected[i][3] + " -- ";
-    
-    if (expected[i][0] == results[i][0] &&
-        expected[i][1] == results[i][1] &&
-        expected[i][2] == results[i][2] &&
-        expected[i][3] == results[i][3])
-      result += "PASS";
-    else {
-      result += "FAIL -- Received";
-      result += "Property: " + results[i][0] + " ";
-      result += "Target: " + results[i][1] + " ";
-      result += "Type: " + results[i][2] + " ";
-      result += "Elapsed Time: " + results[i][3];
-      
-    }
-    result += "<br>";
-  }
-  result += "</p>";
-  
-  if (expected.length > results.length) {
-    result += "<p>Missing events -- FAIL<br>";
-    for (i=results.length; i < expected.length; ++i) {
-      result += "Missing Property: " + expected[i][0] + " ";
-      result += "Target: " + expected[i][1] + " ";
-      result += "Type: " + expected[i][2] + " ";
-      result += "Elapsed Time: " + expected[i][3] + "<br>";
-    }
-    result += "</p>";
-  } else if (expected.length < results.length) {
-    result += "<p>Unexpected events -- FAIL<br>";
-    for (i=expected.length; i < results.length; ++i) {
-      result += "Unexpected Property: " + results[i][0] + " ";
-      result += "Target: " + results[i][1] + " ";
-      result += "Type: " + results[i][2] + " ";
-      result += "Elapsed Time: " + results[i][3] + "<br>";
-    }
-    result += "</p>";
-  }
-  
-  return result;
-}
-
-function cleanup()
-{
-  document.body.removeChild(document.getElementById('container'));
-  document.getElementById('result').innerHTML = examineResults(expected);
-
-  if (window.layoutTestController)
-      layoutTestController.notifyDone();
-}
index 8b08558..7ea6d7a 100644 (file)
@@ -1,3 +1,3 @@
-Interrupted hardware transition should not jump back to pre-transtion transform
+Interrupted transition should not jump back to pre-transition transform
 
 PASS
index 930ba27..81ea169 100644 (file)
@@ -1,6 +1,6 @@
 <html>
 <head>
-  <title>Interrupted hardware transition</title>
+  <title>Interrupted Transition</title>
   <style type="text/css" media="screen">
     .box {
       position: relative;
       -webkit-transition-duration: 2s;
       -webkit-transform: translate(0, 0);
     }
-
-    .moved {
-/*      -webkit-transform: translateX(300px);*/
-    }
   </style>
   <script type="text/javascript" charset="utf-8">
     if (window.layoutTestController) {
@@ -51,7 +47,7 @@
   </script>
 </head>
 <body onload="startTest()">
-  <p>Interrupted hardware transition should not jump back to pre-transtion transform</p>
+  <p>Interrupted transition should not jump back to pre-transition transform</p>
   <div id="box" class="box">
   </div>
   <div id="result">
index 23c2b35..9cbac07 100644 (file)
     }
   </style>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.waitUntilDone();
-    }
+    if (window.layoutTestController)
+      layoutTestController.waitUntilDone();
 
     function runTest()
     {
       var container = document.getElementById('first');
       container.style.opacity = 1;
+      
       // dump the tree in the middle of the transition
-      window.setTimeout(function() {
-        if (window.layoutTestController)
-            layoutTestController.notifyDone();
-      }, 2500);
+      if (window.layoutTestController) {
+        if (layoutTestController.pauseTransitionAtTimeOnElementWithId)
+          window.setTimeout(function() { layoutTestController.pauseTransitionAtTimeOnElementWithId("opacity", 2.5, "first"); layoutTestController.notifyDone(); }, 0);
+        else
+          window.setTimeout(function() { layoutTestController.notifyDone(); }, 2500);
+      }
     }
     
     window.addEventListener('load', runTest, false);
index 0873b18..88133a6 100644 (file)
@@ -1,6 +1,6 @@
 <html>
 <head>
-  <title>Start hardware transition</title>
+  <title>Start Transform Transition</title>
   <style type="text/css" media="screen">
     .box {
       position: relative;
index e840ee2..3c21e50 100644 (file)
@@ -1,3 +1,5 @@
 Box should spin 540 degrees because that is the specified rotation and the transform operation lists match, so we should animate each operation separately.
 
-PASS
+PASS - "-webkit-transform.0" property for "box" element at 0.5s saw something close to: -0.7071067811865475
+PASS - "-webkit-transform.0" property for "box" element at 1s saw something close to: 6.123233995736766e-17
+
index 51cce3e..a86c591 100644 (file)
       -webkit-transition-property: -webkit-transform;
     }
   </style>
+  <script src="transition-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 changeValues()
+    function DegreesToRotation(angle)
     {
-        var box = document.getElementById('box');
-        box.style.webkitTransitionDuration = "0.1s";
+      return Math.cos(angle * Math.PI / 180);
     }
     
-    function check(expected)
-    {
-        if (result != "PASS")
-            return;
-            
-        var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
-        var a = t.split("(");
-        a = a[1].split(",");
-        var angle = Math.acos(a[0]) * 180 / Math.PI;
-        if (!isEqual(angle, expected))
-            result = "FAIL(was:"+t.m41+", s/b:0)";
-    }
-    
-    function startTimeout()
-    {
-        setTimeout("check(135)", 500);
-        setTimeout("check(90)", 1000);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 1100);
-    }
+    const expectedValues = [
+      // [time, element-id, property, expected-value, tolerance]
+      [0.5, "box", "-webkit-transform.0", DegreesToRotation(135), DegreesToRotation(10)],
+      [1.0, "box", "-webkit-transform.0", DegreesToRotation(90), DegreesToRotation(10)],
+    ];
     
-    function start()
+    function setupTest()
     {
-        var box = document.getElementById('box');
-        box.style.webkitTransform = 'translateX(0px) rotate(540deg)';
-        window.setTimeout("startTimeout()", 0);
+      var box = document.getElementById('box');
+      box.style.webkitTransform = 'translateX(0px) rotate(540deg)';
     }
     
-    window.addEventListener('load', start, false);
+    runTransitionTest(expectedValues, setupTest);
     
   </script>
 </head>
index 6582663..49dde5a 100644 (file)
@@ -1,3 +1,5 @@
 Box should spin only 180 degrees even though the operation specifies a 0 to 540 degree animation. This is because the operation lists don't match, so it falls back to matrix animation, which normalizes the angle to between 0 and 360 degrees.
 
-PASS
+PASS - "-webkit-transform.0" property for "box" element at 0.5s saw something close to: 0.7071067811865476
+PASS - "-webkit-transform.0" property for "box" element at 1s saw something close to: 6.123233995736766e-17
+
index 7583918..d691f13 100644 (file)
       -webkit-transition-property: -webkit-transform;
     }
   </style>
+  <script src="transition-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 changeValues()
+    function DegreesToRotation(angle)
     {
-        var box = document.getElementById('box');
-        box.style.webkitTransitionDuration = "0.1s";
+      return Math.cos(angle * Math.PI / 180);
     }
     
-    function check(expected)
-    {
-        if (result != "PASS")
-            return;
-            
-        var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
-        var a = t.split("(");
-        a = a[1].split(",");
-        var angle = Math.acos(a[0]) * 180 / Math.PI;
-        if (!isEqual(angle, expected))
-            result = "FAIL(was:"+t.m41+", s/b:0)";
-    }
-    
-    function startTimeout()
-    {
-        setTimeout("check(45)", 500);
-        setTimeout("check(90)", 1000);
-        
-        window.setTimeout(function() {
-            document.getElementById('result').innerHTML = result;
-            if (window.layoutTestController)
-                layoutTestController.notifyDone();
-        }, 1100);
-    }
+    const expectedValues = [
+      // [time, element-id, property, expected-value, tolerance]
+      [0.5, "box", "-webkit-transform.0", DegreesToRotation(45), DegreesToRotation(10)],
+      [1.0, "box", "-webkit-transform.0", DegreesToRotation(90), DegreesToRotation(10)],
+    ];
     
-    function start()
+    function setupTest()
     {
-        var box = document.getElementById('box');
-        box.style.webkitTransform = 'rotate(540deg)';
-        window.setTimeout("startTimeout()", 0);
+      var box = document.getElementById('box');
+      box.style.webkitTransform = 'rotate(540deg)';
     }
     
-    window.addEventListener('load', start, false);
+    runTransitionTest(expectedValues, setupTest);
     
   </script>
 </head>
index 8c378c7..57d939f 100644 (file)
@@ -1,10 +1,10 @@
 Initiating transitions on various properties of all boxes.
 
-Expected Property: background-color Target: box2 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: background-color Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.7 -- PASS
-Expected Property: height Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.7 -- PASS
-Expected Property: left Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: left Target: box2 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: left Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.7 -- PASS
-Expected Property: width Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.7 -- PASS
+PASS --- [Expected] Property: background-color Target: box2 Elapsed Time: 0.5
+PASS --- [Expected] Property: background-color Target: box3 Elapsed Time: 0.7
+PASS --- [Expected] Property: height Target: box3 Elapsed Time: 0.7
+PASS --- [Expected] Property: left Target: box1 Elapsed Time: 0.5
+PASS --- [Expected] Property: left Target: box2 Elapsed Time: 0.5
+PASS --- [Expected] Property: left Target: box3 Elapsed Time: 0.7
+PASS --- [Expected] Property: width Target: box3 Elapsed Time: 0.7
 
index 38c7fec..dbf4849 100644 (file)
     }
     
   </style>
-  <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-
-    var expected = [
-      ["background-color", "box2", "webkitTransitionEnd", 0.5],
-      ["background-color", "box3", "webkitTransitionEnd", 0.7],
-      ["height", "box3", "webkitTransitionEnd", 0.7],
-      ["left", "box1", "webkitTransitionEnd", 0.5],
-      ["left", "box2", "webkitTransitionEnd", 0.5],
-      ["left", "box3", "webkitTransitionEnd", 0.7],
-      ["width", "box3", "webkitTransitionEnd", 0.7]
+    
+    var expectedEndEvents = [
+      // [property-name, element-id, elapsed-time, listen]
+      ["background-color", "box2", 0.5, true],
+      ["background-color", "box3", 0.7, true],
+      ["height", "box3",  0.7, true],
+      ["left", "box1", 0.5, true],
+      ["left", "box2", 0.5, true],
+      ["left", "box3", 0.7, true],
+      ["width", "box3", 0.7, true]
     ];
     
-    function startTransition()
+    function setupTest()
     {
       var boxes = document.body.getElementsByClassName('box');
       for (var i = 0; i < boxes.length; ++i) {
-        boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
         boxes[i].className = "box box" + (i+1);
       }
-      
-      window.setTimeout(cleanup, 1000);
     }
     
-    window.addEventListener('load', startTransition, false);
+    runTransitionTest(expectedEndEvents, 1.0, setupTest);
+    
   </script>
 </head>
 <body>
index dae8e17..81e167b 100644 (file)
@@ -1,4 +1,4 @@
 Initiating a 500ms transition on the left property of box1.
 
-Expected Property: left Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
+PASS --- [Expected] Property: left Target: box1 Elapsed Time: 0.5
 
index 4bac84e..b53a22f 100644 (file)
       -webkit-transition-duration: 0.5s;
     }
   </style>
-  <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
     
-    var expected = [
-      ['left', 'box1', 'webkitTransitionEnd', 0.5]
+    var expectedEndEvents = [
+      // [property-name, element-id, elapsed-time, listen]
+      ["left", "box1", 0.5]
     ];
-
-    function startTransition()
+    
+    function setupTest()
     {
-      var boxes = document.body.getElementsByClassName('box');
-      for (var i = 0; i < boxes.length; ++i) {
-        boxes[i].style.left = '200px';
-      }
-      
-      window.setTimeout(cleanup, 700);
+      var box = document.getElementById('box1');
+      box.style.left = '200px';
     }
     
-    window.addEventListener('load', startTransition, false);
+    runTransitionTest(expectedEndEvents, 0.7, setupTest);
+    
   </script>
 </head>
 <body>
@@ -42,7 +36,7 @@
 <p>Initiating a 500ms transition on the left property of box1.</p>
 
 <div id="container">
-  <div id="box1" class="box" onwebkittransitionend="recordEvent(event);"></div>
+  <div id="box1" class="box" onwebkittransitionend="recordTransitionEndEvent(event);"></div>
 </div>
 
 <div id="result"></div>
index 164c660..877a36d 100644 (file)
@@ -1,4 +1,4 @@
 Initiating a 500ms transition on the left property of box1 and catching it on the parent.
 
-Expected Property: left Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
+PASS --- [Expected] Property: left Target: box1 Elapsed Time: 0.5
 
index 9494410..0cdfbd4 100644 (file)
       -webkit-transition-duration: 0.5s;
     }
   </style>
-  <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-
-    var expected = [
-      ["left", "box1", "webkitTransitionEnd", 0.5]
+    
+    var expectedEndEvents = [
+      // [property-name, element-id, elapsed-time, listen]
+      ["left", "box1", 0.5, false]
     ];
     
-    function startTransition()
+    function setupTest()
     {
-      document.getElementById("container").addEventListener("webkitTransitionEnd", recordEvent, false);
-      var boxes = document.body.getElementsByClassName('box');
-      for (var i = 0; i < boxes.length; ++i) {
-        boxes[i].style.left = '200px';
-      }
+      document.getElementById("container").addEventListener("webkitTransitionEnd", recordTransitionEndEvent, false);
       
-      window.setTimeout(cleanup, 700);
+      var box = document.getElementById('box1');
+      box.style.left = '200px';
     }
     
-    window.addEventListener('load', startTransition, false);
+    runTransitionTest(expectedEndEvents, 0.7, setupTest);
   </script>
 </head>
 <body>
diff --git a/LayoutTests/transitions/transition-end-event-helpers.js b/LayoutTests/transitions/transition-end-event-helpers.js
new file mode 100644 (file)
index 0000000..beb349e
--- /dev/null
@@ -0,0 +1,140 @@
+var _recordedEvents = new Array();
+
+/* Call this function to record manually transition end events:
+
+Function parameters:
+    event [required]: the event passed with "webkitTransitionEnd"
+
+*/
+function recordTransitionEndEvent(event)
+{
+  if (event.type != "webkitTransitionEnd")
+    throw("Invalid transition end event!");
+
+  _recordedEvents.push([
+    event.propertyName,
+    event.target.id,
+    Math.round(event.elapsedTime * 1000) / 1000 // round to ms to avoid floating point imprecision
+    ]);
+}
+
+/* This is the helper function to run transition end event tests:
+
+Test page requirements:
+- The body must contain an empty div with id "result"
+- The body must contain a div with with id "container"
+- Call this function directly from the <script> inside the test page
+
+Function parameters:
+    expected [required]: an array of arrays defining the expected parameter values for the recorded transition end events (see below)
+    timeout [required]: 
+    callback [optional]: a function to be executed just before the test starts (none by default)
+
+    Each sub-array must contain these items in this order:
+    - the name of the CSS property that was transitioning
+    - the id of the element on which the CSS property was transitioning
+    - the elapsed time in seconds at which the CSS property finished transitioning
+    - a boolean indicating if an event listener should be automatically added to the element to record the transition end event or if the script calls recordTransitionEndEvent() directly
+
+*/
+function runTransitionTest(expected, timeout, callback)
+{
+  
+  if (window.layoutTestController) {
+    layoutTestController.dumpAsText();
+    layoutTestController.waitUntilDone();
+  }
+  
+  function processEndEvents(expected)
+  {
+
+    function compareEventInfo(e1, e2)
+    {
+      // Sort by property name then event target id
+
+      // Index 0 is the property name
+      if (e1[0]<e2[0]) return -1;
+      if (e1[0]>e2[0]) return +1;
+
+      // Index 1 is the target id
+      if (e1[1]<e2[1]) return -1;
+      if (e1[1]>e2[1]) return +1;
+
+      return 0;
+    }
+
+    function examineResults(results, expected)
+    {
+      // Sort recorded and expected events arrays so they have the same ordering
+      expected.sort(compareEventInfo);
+      results.sort(compareEventInfo);
+
+      var result = '<p>';
+      for (var i=0; i < results.length && i < expected.length; ++i) {
+        var pass = expected[i][0] == results[i][0] && expected[i][1] == results[i][1] && expected[i][2] == results[i][2];
+
+        if (pass)
+          result += "PASS --- ";
+        else
+          result += "FAIL --- ";
+
+        result += "[Expected] Property: " + expected[i][0] + " ";
+        result += "Target: " + expected[i][1] + " ";
+        result += "Elapsed Time: " + expected[i][2];
+
+        if (!pass) {
+          result += " --- ";
+          result += "[Received] Property: " + results[i][0] + " ";
+          result += "Target: " + results[i][1] + " ";
+          result += "Elapsed Time: " + results[i][2];
+        }
+
+        result += "<br>";
+      }
+      result += "</p>";
+
+      if (expected.length > results.length) {
+        result += "<p>FAIL - Missing events<br>";
+        for (i=results.length; i < expected.length; ++i) {
+          result += "[Missing] Property: " + expected[i][0] + " ";
+          result += "Target: " + expected[i][1] + " ";
+          result += "Elapsed Time: " + expected[i][2] + "<br>";
+        }
+        result += "</p>";
+      } else if (expected.length < results.length) {
+        result += "<p>FAIL - Unexpected events<br>";
+        for (i=expected.length; i < results.length; ++i) {
+          result += "[Unexpected] Property: " + results[i][0] + " ";
+          result += "Target: " + results[i][1] + " ";
+          result += "Elapsed Time: " + results[i][2] + "<br>";
+        }
+        result += "</p>";
+      }
+
+      return result;
+    }
+
+    document.body.removeChild(document.getElementById('container'));
+    document.getElementById('result').innerHTML = examineResults(_recordedEvents, expected);
+
+    if (window.layoutTestController)
+        layoutTestController.notifyDone();
+  }
+
+  function startTest(expected, timeout, callback)
+  {
+    if (callback)
+      callback();
+    
+    for (var i=0; i < expected.length; ++i) {
+      if (expected[i][3]) {
+        var box = document.getElementById(expected[i][1]);
+        box.addEventListener("webkitTransitionEnd", recordTransitionEndEvent, false);
+      }
+    }
+    
+    window.setTimeout(function() { processEndEvents(expected); }, timeout * 1000);
+  }
+  
+  window.addEventListener('load', function() { startTest(expected, timeout, callback) }, false);
+}
index dae8e17..81e167b 100644 (file)
@@ -1,4 +1,4 @@
 Initiating a 500ms transition on the left property of box1.
 
-Expected Property: left Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
+PASS --- [Expected] Property: left Target: box1 Elapsed Time: 0.5
 
index d2d99e2..12347d3 100644 (file)
       -webkit-transition-duration: 0.5s;
     }
   </style>
-  <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-
-    var expected = [
-      ["left", "box1", "webkitTransitionEnd", 0.5]
+    
+    var expectedEndEvents = [
+      // [property-name, element-id, elapsed-time, listen]
+      ["left", "box1", 0.5, true]
     ];
     
-    function startTransition()
+    function setupTest()
     {
-      var boxes = document.body.getElementsByClassName('box');
-      for (var i = 0; i < boxes.length; ++i) {
-        boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
-        boxes[i].style.left = '200px';
-      }
-      
-      window.setTimeout(cleanup, 700);
+      var box = document.getElementById('box1');
+      box.style.left = '200px';
     }
     
-    window.addEventListener('load', startTransition, false);
+    runTransitionTest(expectedEndEvents, 0.7, setupTest);
+    
   </script>
 </head>
 <body>
index 3ba7b2a..05e0c9a 100644 (file)
@@ -1,7 +1,7 @@
 Initiating a 500ms transition on the left, background-color, width and height properties of box1.
 
-Expected Property: background-color Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: height Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: left Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: width Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
+PASS --- [Expected] Property: background-color Target: box1 Elapsed Time: 0.5
+PASS --- [Expected] Property: height Target: box1 Elapsed Time: 0.5
+PASS --- [Expected] Property: left Target: box1 Elapsed Time: 0.5
+PASS --- [Expected] Property: width Target: box1 Elapsed Time: 0.5
 
index 6de228c..6b56c44 100644 (file)
       -webkit-transition-duration: 0.5s;
     }
   </style>
-  <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
     
-    var expected = [
-      ["background-color", "box1", "webkitTransitionEnd", 0.5],
-      ["height", "box1", "webkitTransitionEnd", 0.5],
-      ["left", "box1", "webkitTransitionEnd", 0.5],
-      ["width", "box1", "webkitTransitionEnd", 0.5],
+    var expectedEndEvents = [
+      // [property-name, element-id, elapsed-time, listen]
+      ["background-color", "box1", 0.5, false],
+      ["height", "box1", 0.5, false],
+      ["left", "box1", 0.5, false],
+      ["width", "box1", 0.5, false],
     ];
     
-    function startTransition()
+    function setupTest()
     {
-      var boxes = document.body.getElementsByClassName('box');
-      for (var i = 0; i < boxes.length; ++i) {
-        boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
-        boxes[i].style.width = "150px";
-        boxes[i].style.left = '200px';
-        boxes[i].style.backgroundColor = 'red';
-        boxes[i].style.height = '80px';
-      }
-      
-      window.setTimeout(cleanup, 700);
+      var box = document.getElementById("box1");
+      box.addEventListener("webkitTransitionEnd", recordTransitionEndEvent, false);
+      box.style.width = "150px";
+      box.style.left = '200px';
+      box.style.backgroundColor = 'red';
+      box.style.height = '80px';
     }
     
-    window.addEventListener('load', startTransition, false);
+    runTransitionTest(expectedEndEvents, 0.7, setupTest);
+    
   </script>
 </head>
 <body>
index 8c378c7..57d939f 100644 (file)
@@ -1,10 +1,10 @@
 Initiating transitions on various properties of all boxes.
 
-Expected Property: background-color Target: box2 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: background-color Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.7 -- PASS
-Expected Property: height Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.7 -- PASS
-Expected Property: left Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: left Target: box2 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: left Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.7 -- PASS
-Expected Property: width Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.7 -- PASS
+PASS --- [Expected] Property: background-color Target: box2 Elapsed Time: 0.5
+PASS --- [Expected] Property: background-color Target: box3 Elapsed Time: 0.7
+PASS --- [Expected] Property: height Target: box3 Elapsed Time: 0.7
+PASS --- [Expected] Property: left Target: box1 Elapsed Time: 0.5
+PASS --- [Expected] Property: left Target: box2 Elapsed Time: 0.5
+PASS --- [Expected] Property: left Target: box3 Elapsed Time: 0.7
+PASS --- [Expected] Property: width Target: box3 Elapsed Time: 0.7
 
index 47a531f..c802c33 100644 (file)
     }
     
   </style>
-  <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-    var expected = [
-      ["background-color", "box2", "webkitTransitionEnd", 0.5],
-      ["background-color", "box3", "webkitTransitionEnd", 0.7],
-      ["height", "box3", "webkitTransitionEnd", 0.7],
-      ["left", "box1", "webkitTransitionEnd", 0.5],
-      ["left", "box2", "webkitTransitionEnd", 0.5],
-      ["left", "box3", "webkitTransitionEnd", 0.7],
-      ["width", "box3", "webkitTransitionEnd", 0.7],
+    
+    var expectedEndEvents = [
+      // [property-name, element-id, elapsed-time, listen]
+      ["background-color", "box2", 0.5, false],
+      ["background-color", "box3", 0.7, false],
+      ["height", "box3", 0.7, false],
+      ["left", "box1", 0.5, false],
+      ["left", "box2", 0.5, false],
+      ["left", "box3", 0.7, false],
+      ["width", "box3", 0.7, false],
     ];
 
-    function startTransition()
+    function setupTest()
     {
       var boxes = document.body.getElementsByClassName('box');
       for (var i = 0; i < boxes.length; ++i) {
-        boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
+        boxes[i].addEventListener("webkitTransitionEnd", recordTransitionEndEvent, false);
         boxes[i].className = "box box" + (i+1);
       }
-      
-      window.setTimeout(cleanup, 1000);
     }
     
-    window.addEventListener('load', startTransition, false);
+    runTransitionTest(expectedEndEvents, 1.0, setupTest);
+    
   </script>
 </head>
 <body>
index 7e73f99..cc7d54f 100644 (file)
@@ -1,12 +1,12 @@
 Initiating transitions on various properties of all boxes, with different start times on the transitions.
 
-Expected Property: background-color Target: box2 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: background-color Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.6 -- PASS
-Expected Property: height Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.6 -- PASS
-Expected Property: height Target: box4 Type: webkitTransitionEnd Elapsed Time: 0.3 -- PASS
-Expected Property: left Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: left Target: box2 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: left Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.6 -- PASS
-Expected Property: left Target: box4 Type: webkitTransitionEnd Elapsed Time: 0.3 -- PASS
-Expected Property: width Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.6 -- PASS
+PASS --- [Expected] Property: background-color Target: box2 Elapsed Time: 0.5
+PASS --- [Expected] Property: background-color Target: box3 Elapsed Time: 0.6
+PASS --- [Expected] Property: height Target: box3 Elapsed Time: 0.6
+PASS --- [Expected] Property: height Target: box4 Elapsed Time: 0.3
+PASS --- [Expected] Property: left Target: box1 Elapsed Time: 0.5
+PASS --- [Expected] Property: left Target: box2 Elapsed Time: 0.5
+PASS --- [Expected] Property: left Target: box3 Elapsed Time: 0.6
+PASS --- [Expected] Property: left Target: box4 Elapsed Time: 0.3
+PASS --- [Expected] Property: width Target: box3 Elapsed Time: 0.6
 
index 86e5c95..3f27095 100644 (file)
     }
 
   </style>
-  <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-
-    var expected = [
-      ["background-color", "box2", "webkitTransitionEnd", 0.5],
-      ["background-color", "box3", "webkitTransitionEnd", 0.6],
-      ["height", "box3", "webkitTransitionEnd", 0.6],
-      ["height", "box4", "webkitTransitionEnd", 0.3],
-      ["left", "box1", "webkitTransitionEnd", 0.5],
-      ["left", "box2", "webkitTransitionEnd", 0.5],
-      ["left", "box3", "webkitTransitionEnd", 0.6],
-      ["left", "box4", "webkitTransitionEnd", 0.3],
-      ["width", "box3", "webkitTransitionEnd", 0.6]
+    
+    var expectedEndEvents = [
+      // [property-name, element-id, elapsed-time, listen]
+      ["background-color", "box2", 0.5, false],
+      ["background-color", "box3", 0.6, false],
+      ["height", "box3", 0.6, false],
+      ["height", "box4", 0.3, false],
+      ["left", "box1", 0.5, false],
+      ["left", "box2", 0.5, false],
+      ["left", "box3", 0.6, false],
+      ["left", "box4", 0.3, false],
+      ["width", "box3", 0.6, false]
     ];
     
-    function transitionElement(index) {
+    function transitionElement(index)
+    {
       var boxes = document.body.getElementsByClassName('box');
       boxes[index-1].className = "box box" + index;
     }
 
-    function startTransitions()
+    function setupTest()
     {
       var boxes = document.body.getElementsByClassName('box');
       for (var i = 0; i < boxes.length; ++i) {
-        boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
+        boxes[i].addEventListener("webkitTransitionEnd", recordTransitionEndEvent, false);
       }
 
       window.setTimeout(function() { transitionElement(1); }, 100);
       window.setTimeout(function() { transitionElement(3); }, 200);
       window.setTimeout(function() { transitionElement(4); }, 50);
       window.setTimeout(function() { transitionElement(5); }, 150);
-      
-      window.setTimeout(cleanup, 1000);
     }
     
-    window.addEventListener('load', startTransitions, false);
+    runTransitionTest(expectedEndEvents, 1.0, setupTest);
+    
   </script>
 </head>
 <body>
index a62639d..93603c6 100644 (file)
@@ -1,6 +1,6 @@
 Initiating transitions on transform properties of all boxes, starting at different times and with different durations and values.
 
-Expected Property: -webkit-transform Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
-Expected Property: -webkit-transform Target: box2 Type: webkitTransitionEnd Elapsed Time: 0.55 -- PASS
-Expected Property: -webkit-transform Target: box4 Type: webkitTransitionEnd Elapsed Time: 0.4 -- PASS
+PASS --- [Expected] Property: -webkit-transform Target: box1 Elapsed Time: 0.5
+PASS --- [Expected] Property: -webkit-transform Target: box2 Elapsed Time: 0.55
+PASS --- [Expected] Property: -webkit-transform Target: box4 Elapsed Time: 0.4
 
index 5053c1c..c021065 100644 (file)
     }
 
   </style>
-  <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-  
-    var expected = [
-      ["-webkit-transform", "box1", "webkitTransitionEnd", 0.5],
-      ["-webkit-transform", "box2", "webkitTransitionEnd", 0.55],
-      ["-webkit-transform", "box4", "webkitTransitionEnd", 0.4]
+    
+    var expectedEndEvents = [
+      // [property-name, element-id, elapsed-time, listen]
+      ["-webkit-transform", "box1", 0.5, false],
+      ["-webkit-transform", "box2", 0.55, false],
+      ["-webkit-transform", "box4", 0.4, false]
     ];
   
-    function transitionElement(index) {
+    function transitionElement(index)
+    {
       var boxes = document.body.getElementsByClassName('box');
       boxes[index-1].className = "box box" + index;
     }
 
-    function startTransitions()
+    function setupTest()
     {
       var boxes = document.body.getElementsByClassName('box');
       for (var i = 0; i < boxes.length; ++i) {
-        boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
+        boxes[i].addEventListener("webkitTransitionEnd", recordTransitionEndEvent, false);
       }
 
       window.setTimeout(function() { transitionElement(1); }, 100);
       window.setTimeout(function() { transitionElement(3); }, 200);
       window.setTimeout(function() { transitionElement(4); }, 50);
       window.setTimeout(function() { transitionElement(5); }, 150);
-      
-      window.setTimeout(cleanup, 1000);
     }
     
-    window.addEventListener('load', startTransitions, false);
+    runTransitionTest(expectedEndEvents, 1.0, setupTest);
+    
   </script>
 </head>
 <body>
index df4137e..fb9d4ed 100644 (file)
@@ -1,6 +1,6 @@
 Initiating transitions on various properties of all boxes.
 
-Expected Property: background-color Target: box2 Type: webkitTransitionEnd Elapsed Time: 0.2 -- PASS
-Expected Property: left Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.2 -- PASS
-Expected Property: width Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.3 -- PASS
+PASS --- [Expected] Property: background-color Target: box2 Elapsed Time: 0.2
+PASS --- [Expected] Property: left Target: box1 Elapsed Time: 0.2
+PASS --- [Expected] Property: width Target: box3 Elapsed Time: 0.3
 
index a16569a..b340bd4 100644 (file)
     }
     
   </style>
-  <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-
-    var expected = [
-      ["background-color", "box2", "webkitTransitionEnd", 0.2],
-      ["left", "box1", "webkitTransitionEnd", 0.2],
-      ["width", "box3", "webkitTransitionEnd", 0.3],
+    
+    var expectedEndEvents = [
+      // [property-name, element-id, elapsed-time, listen]
+      ["background-color", "box2", 0.2, false],
+      ["left", "box1", 0.2, false],
+      ["width", "box3", 0.3, false],
     ];
     
-    function startTransition1()
+    function handleEndEvent2(event)
     {
-      var box = document.getElementById("box1");
-      box.addEventListener("webkitTransitionEnd", handleEndEvent1, false);
-      box.className = "box box1";
-    }
-
-    function handleEndEvent1(event) {
-      recordEvent(event);
-      setTimeout(startTransition2, 100);
+      recordTransitionEndEvent(event);
     }
 
     function startTransition2()
     {
-      var box = document.getElementById("box2");
+      var box = document.getElementById("box3");
       box.addEventListener("webkitTransitionEnd", handleEndEvent2, false);
-      box.className = "box box2";
+      box.className = "box box3";
     }
 
-    function handleEndEvent2(event) {
-      recordEvent(event);
-      setTimeout(startTransition3, 100);
+    function handleEndEvent1(event)
+    {
+      recordTransitionEndEvent(event);
+      
+      setTimeout(startTransition2, 100);
     }
 
-    function startTransition3()
+    function startTransition1()
     {
-      var box = document.getElementById("box3");
-      box.addEventListener("webkitTransitionEnd", handleEndEvent3, false);
-      box.className = "box box3";
+      var box = document.getElementById("box2");
+      box.addEventListener("webkitTransitionEnd", handleEndEvent1, false);
+      box.className = "box box2";
     }
 
-    function handleEndEvent3(event) {
-      recordEvent(event);
-      window.setTimeout(cleanup, 100);
+    function handleEndEvent(event)
+    {
+      recordTransitionEndEvent(event);
+      
+      setTimeout(startTransition1, 100);
     }
 
-    window.addEventListener('load', startTransition1, false);
+    function setupTest()
+    {
+      var box = document.getElementById("box1");
+      box.addEventListener("webkitTransitionEnd", handleEndEvent, false);
+      box.className = "box box1";
+    }
+    
+    runTransitionTest(expectedEndEvents, 1.0, setupTest);
+    
   </script>
 </head>
 <body>
index 7929dda..75f1a85 100644 (file)
@@ -1,4 +1,4 @@
 Initiating transitions on various properties of all boxes.
 
-Expected Property: left Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.2 -- PASS
+PASS --- [Expected] Property: left Target: box1 Elapsed Time: 0.2
 
index 079d4b9..178bf1f 100644 (file)
       left: 100px;
     }
   </style>
-  <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-
-    var expected = [
-      ["left", "box1", "webkitTransitionEnd", 0.2],
+    
+    var expectedEndEvents = [
+      // [property-name, element-id, elapsed-time, listen]
+      ["left", "box1", 0.2, false],
     ];
     
-    function startTransition1()
+    function startTransition()
     {
       var box = document.getElementById("box1");
-      box.addEventListener("webkitTransitionEnd", handleEndEvent1, false);
-      box.className = "box box1";
+      box.className = "box box2";
     }
-
-    function handleEndEvent1(event) {
-      recordEvent(event);
+    
+    function handleEndEvent(event)
+    {
+      recordTransitionEndEvent(event);
+      
       event.target.style.webkitTransitionProperty = "none";
-      window.setTimeout(startTransition2, 100);
-      window.setTimeout(cleanup, 200);
+      window.setTimeout(startTransition, 100);
     }
 
-    function startTransition2()
+    function setupTest()
     {
       var box = document.getElementById("box1");
-      box.className = "box box2";
+      box.addEventListener("webkitTransitionEnd", handleEndEvent, false);
+      box.className = "box box1";
     }
-
-    window.addEventListener('load', startTransition1, false);
+    
+    runTransitionTest(expectedEndEvents, 0.5, setupTest);
+    
   </script>
 </head>
 <body>
index 872f5a7..887b0d5 100644 (file)
@@ -1,4 +1,4 @@
 Initiating a 500ms transition on the transform property of box1.
 
-Expected Property: -webkit-transform Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
+PASS --- [Expected] Property: -webkit-transform Target: box1 Elapsed Time: 0.5
 
index e674c35..9324ce4 100644 (file)
       -webkit-transform: translate(100px);
     }
   </style>
-  <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-
-    var expected = [
-      ["-webkit-transform", "box1", "webkitTransitionEnd", 0.5]
+    
+    var expectedEndEvents = [
+      // [property-name, element-id, elapsed-time, listen]
+      ["-webkit-transform", "box1", 0.5, true]
     ];
     
-    function startTransition()
+    function setupTest()
     {
-      var boxes = document.body.getElementsByClassName('box');
-      for (var i = 0; i < boxes.length; ++i) {
-        boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
-        boxes[i].style.webkitTransform = 'translate(200px)';
-      }
-      
-      window.setTimeout(cleanup, 700);
+      var box = document.getElementById('box1');
+      box.style.webkitTransform = 'translate(200px)';
     }
     
-    window.addEventListener('load', startTransition, false);
+    runTransitionTest(expectedEndEvents, 0.7, setupTest);
+    
   </script>
 </head>
 <body>
index 47aab59..c5ac667 100644 (file)
@@ -1,4 +1,4 @@
 Initiating a 500ms transition on the left property of box1 and catching it on the window.
 
-Expected Property: left Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
+PASS --- [Expected] Property: left Target: box1 Elapsed Time: 0.5
 
index 2b42ae7..3efc05c 100644 (file)
       -webkit-transition-duration: 0.5s;
     }
   </style>
-  <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
-    if (window.layoutTestController) {
-        layoutTestController.dumpAsText();
-        layoutTestController.waitUntilDone();
-    }
-
-    var expected = [
-      ["left", "box1", "webkitTransitionEnd", 0.5]
+    
+    var expectedEndEvents = [
+      // [property-name, element-id, elapsed-time, listen]
+      ["left", "box1", 0.5, false]
     ];
     
-    function startTransition()
+    function setupTest()
     {
-      var boxes = document.body.getElementsByClassName('box');
-      for (var i = 0; i < boxes.length; ++i) {
-        boxes[i].style.left = '200px';
-      }
+      window.onwebkittransitionend = recordTransitionEndEvent;
       
-      window.setTimeout(cleanup, 700);
+      var box = document.getElementById('box1');
+      box.style.left = '200px';
     }
     
-    window.addEventListener('load', startTransition, false);
-    window.onwebkittransitionend = recordEvent;
+    runTransitionTest(expectedEndEvents, 0.7, setupTest);
+    
   </script>
 </head>
 <body>
diff --git a/LayoutTests/transitions/transition-test-helpers.js b/LayoutTests/transitions/transition-test-helpers.js
new file mode 100644 (file)
index 0000000..eda7687
--- /dev/null
@@ -0,0 +1,137 @@
+/* This is the helper function to run transition tests:
+
+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 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)
+    
+    Each sub-array must contain these items in this order:
+    - 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 [1]
+    - the expected value for the CSS property
+    - the tolerance to use when comparing the effective CSS property value with its expected value
+    
+    [1] If the CSS property name is "-webkit-transform", 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 "-webkit-transform.N", expected value must be a number corresponding to the Nth element of the matrix
+
+*/
+function runTransitionTest(expected, callback)
+{
+    var result = "";
+    var hasPauseTransitionAPI = window.layoutTestController && layoutTestController.pauseTransitionAtTimeOnElementWithId;
+
+    function isCloseEnough(actual, desired, tolerance)
+    {
+        var diff = Math.abs(actual - desired);
+        return diff <= tolerance;
+    }
+
+    function checkExpectedValue(expected, index)
+    {
+        var time = expected[index][0];
+        var elementId = expected[index][1];
+        var property = expected[index][2];
+        var expectedValue = expected[index][3];
+        var tolerance = expected[index][4];
+
+        var computedValue;
+        var pass;
+        if (!property.indexOf("-webkit-transform")) {
+            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(18))]), 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); };
+    }
+
+    function runTest(expected)
+    {
+        var maxTime = 0;
+
+        for (var i = 0; i < expected.length; ++i) {
+            var time = expected[i][0];
+            var elementId = expected[i][1];
+            var property = expected[i][2];
+            if (!property.indexOf("-webkit-transform"))
+            property = "-webkit-transform";
+
+            // We can only use the transition fast-forward mechanism if DRT implements pauseTransitionAtTimeOnElementWithId()
+            if (hasPauseTransitionAPI) {
+                layoutTestController.pauseTransitionAtTimeOnElementWithId(property, time, elementId);
+                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();
+    }
+    
+    function startTest(expected, callback)
+    {
+        if (callback)
+            callback();
+
+        window.setTimeout(function() { runTest(expected); }, 0);
+    }
+    
+    if (window.layoutTestController) {
+        layoutTestController.dumpAsText();
+        layoutTestController.waitUntilDone();
+    }
+    
+    if (!expected)
+        throw("Expected results are missing!");
+    
+    window.addEventListener("load", function() { startTest(expected, callback); }, false);
+}
index c91d114..20d30d5 100644 (file)
@@ -1,3 +1,5 @@
 Tests that with a zero duration transition on top, it does not animate
 
-PASS
+PASS - "left" property for "box" element at 0.25s saw something close to: 50
+PASS - "top" property for "box" element at 0.25s saw something close to: 100
+
index 16484ab..b90e61a 100644 (file)
       -webkit-transition-property: top, left;
     }
   </style>
+  <script src="transition-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;
+    const expectedValues = [
+      // [time, element-id, property, expected-value, tolerance]
+      [0.25, "box", "left", 50, 10],
+      [0.25, "box", "top", 100, 10],
+    ];
     
-    function isEqual(actual, desired, tolerance)
+    function setupTest()
     {
-        if (tolerance == undefined || tolerance == 0)
-            tolerance = defaultTolerance;
-        var diff = Math.abs(actual - desired);
-        return diff < tolerance;
-    }
-    
-    function check()
-    {
-        var style = window.getComputedStyle(document.getElementById('box'));
-        if (!isEqual(parseInt(style.left), 50, defaultTolerance))
-            result = "FAIL (left was:" + style.left + ", should be 50)";
-        else if (!isEqual(parseInt(style.top), 100, defaultTolerance))
-            result = "FAIL (top was:" + style.top + ", should be 100)";
-
-        document.getElementById('result').innerHTML = result;
-        if (window.layoutTestController)
-            layoutTestController.notifyDone();
+      var box = document.getElementById('box');
+      box.style.top = '100px';
+      box.style.left = '100px';
     }
     
-    function startTimeout()
-    {
-        setTimeout(check, 250);
-    }
-
-    function start()
-    {
-        var box = document.getElementById('box');
-        box.style.top = '100px';
-        box.style.left = '100px';
-        setTimeout(startTimeout, 0);    // this gives the style time to resolve
-    }
+    runTransitionTest(expectedValues, setupTest);
     
-    window.addEventListener('load', start, false);
   </script>
 </head>
 <body>