2008-09-01 Dean Jackson <dino@apple.com>
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 1 Sep 2008 23:34:13 +0000 (23:34 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 1 Sep 2008 23:34:13 +0000 (23:34 +0000)
        Reviewed by Sam Weinig.

        https://bugs.webkit.org/show_bug.cgi?id=20571
        Make sure Window object can assign Animation/Transition event
        listeners via attributes.

        Also added a bunch of transition event tests, although
        only transition-end-event-window is directly relevant to this patch.

        (WebCore::JSDOMWindowBase::put):

        Tests: transitions/transition-end-event-all-properties.html
               transitions/transition-end-event-attributes.html
               transitions/transition-end-event-container.html
               transitions/transition-end-event-left.html
               transitions/transition-end-event-multiple-01.html
               transitions/transition-end-event-multiple-02.html
               transitions/transition-end-event-multiple-03.html
               transitions/transition-end-event-multiple-04.html
               transitions/transition-end-event-nested.html
               transitions/transition-end-event-transform.html
               transitions/transition-end-event-window.html

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

26 files changed:
LayoutTests/ChangeLog
LayoutTests/transitions/end-event-helpers.js [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-all-properties-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-all-properties.html [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-attributes-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-attributes.html [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-container-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-container.html [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-left-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-left.html [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-multiple-01-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-multiple-01.html [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-multiple-02-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-multiple-02.html [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-multiple-03-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-multiple-03.html [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-multiple-04-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-multiple-04.html [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-nested-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-nested.html [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-transform-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-transform.html [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-window-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-end-event-window.html [new file with mode: 0644]
WebCore/ChangeLog
WebCore/bindings/js/JSDOMWindowBase.cpp

index 7e21bfa..a8a6450 100644 (file)
@@ -1,3 +1,37 @@
+2008-08-29  Dean Jackson  <dino@apple.com>
+
+        Reviewed by Sam Weinig.
+
+        https://bugs.webkit.org/show_bug.cgi?id=20571
+        Add a bunch of tests for WebKitTransitionEndEvents.
+
+        * transitions/end-event-helpers.js: Added.
+        * transitions/interrupted-all-transition-expected.txt:
+        * transitions/interrupted-all-transition.html:
+        * transitions/opacity-transition-zindex-expected.txt:
+        * transitions/transition-end-event-all-properties-expected.txt: Added.
+        * transitions/transition-end-event-all-properties.html: Added.
+        * transitions/transition-end-event-attributes-expected.txt: Added.
+        * transitions/transition-end-event-attributes.html: Added.
+        * transitions/transition-end-event-container-expected.txt: Added.
+        * transitions/transition-end-event-container.html: Added.
+        * transitions/transition-end-event-left-expected.txt: Added.
+        * transitions/transition-end-event-left.html: Added.
+        * transitions/transition-end-event-multiple-01-expected.txt: Added.
+        * transitions/transition-end-event-multiple-01.html: Added.
+        * transitions/transition-end-event-multiple-02-expected.txt: Added.
+        * transitions/transition-end-event-multiple-02.html: Added.
+        * transitions/transition-end-event-multiple-03-expected.txt: Added.
+        * transitions/transition-end-event-multiple-03.html: Added.
+        * transitions/transition-end-event-multiple-04-expected.txt: Added.
+        * transitions/transition-end-event-multiple-04.html: Added.
+        * transitions/transition-end-event-nested-expected.txt: Added.
+        * transitions/transition-end-event-nested.html: Added.
+        * transitions/transition-end-event-transform-expected.txt: Added.
+        * transitions/transition-end-event-transform.html: Added.
+        * transitions/transition-end-event-window-expected.txt: Added.
+        * transitions/transition-end-event-window.html: Added.
+
 2008-09-01  Geoffrey Garen  <ggaren@apple.com>
 
         Reviewed by Darin Adler.
diff --git a/LayoutTests/transitions/end-event-helpers.js b/LayoutTests/transitions/end-event-helpers.js
new file mode 100644 (file)
index 0000000..b9986b0
--- /dev/null
@@ -0,0 +1,80 @@
+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();
+}
diff --git a/LayoutTests/transitions/transition-end-event-all-properties-expected.txt b/LayoutTests/transitions/transition-end-event-all-properties-expected.txt
new file mode 100644 (file)
index 0000000..76a2762
--- /dev/null
@@ -0,0 +1,10 @@
+Initiating transitions on various properties of all boxes.
+
+Expected Property: Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
+Expected Property: Target: box2 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
+Expected Property: Target: box2 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
+Expected Property: Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.7 -- PASS
+Expected Property: Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.7 -- PASS
+Expected Property: Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.7 -- PASS
+Expected Property: Target: box3 Type: webkitTransitionEnd Elapsed Time: 0.7 -- PASS
+
diff --git a/LayoutTests/transitions/transition-end-event-all-properties.html b/LayoutTests/transitions/transition-end-event-all-properties.html
new file mode 100644 (file)
index 0000000..40da04a
--- /dev/null
@@ -0,0 +1,77 @@
+<html>
+<head>
+  <title>Transition End Events</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      -webkit-transition-duration: 0.5s;
+    }
+    
+    .box1 {
+      left: 50px;
+    }
+    
+    .box2 {
+      background-color: red;
+      left: 50px;
+    }
+    
+    .box3 {
+      width: 150px;
+      background-color: green;
+      left: 50px;
+      height: 120px;
+      -webkit-transition-duration: 0.7s;
+    }
+    
+  </style>
+  <script src="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 = [
+      ["", "box1", "webkitTransitionEnd", 0.5],
+      ["", "box2", "webkitTransitionEnd", 0.5],
+      ["", "box2", "webkitTransitionEnd", 0.5],
+      ["", "box3", "webkitTransitionEnd", 0.7],
+      ["", "box3", "webkitTransitionEnd", 0.7],
+      ["", "box3", "webkitTransitionEnd", 0.7],
+      ["", "box3", "webkitTransitionEnd", 0.7]
+    ];
+    
+    function startTransition()
+    {
+      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);
+  </script>
+</head>
+<body>
+
+<p>Initiating transitions on various properties of all boxes.</p>
+
+<div id="container">
+  <div id="box1" class="box"></div>
+  <div id="box2" class="box"></div>
+  <div id="box3" class="box"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/transition-end-event-attributes-expected.txt b/LayoutTests/transitions/transition-end-event-attributes-expected.txt
new file mode 100644 (file)
index 0000000..dae8e17
--- /dev/null
@@ -0,0 +1,4 @@
+Initiating a 500ms transition on the left property of box1.
+
+Expected Property: left Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
+
diff --git a/LayoutTests/transitions/transition-end-event-attributes.html b/LayoutTests/transitions/transition-end-event-attributes.html
new file mode 100644 (file)
index 0000000..4bac84e
--- /dev/null
@@ -0,0 +1,51 @@
+<html>
+<head>
+  <title>Transition End Events</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      -webkit-transition-property: left;
+      -webkit-transition-duration: 0.5s;
+    }
+  </style>
+  <script src="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]
+    ];
+
+    function startTransition()
+    {
+      var boxes = document.body.getElementsByClassName('box');
+      for (var i = 0; i < boxes.length; ++i) {
+        boxes[i].style.left = '200px';
+      }
+      
+      window.setTimeout(cleanup, 700);
+    }
+    
+    window.addEventListener('load', startTransition, false);
+  </script>
+</head>
+<body>
+
+<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>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/transition-end-event-container-expected.txt b/LayoutTests/transitions/transition-end-event-container-expected.txt
new file mode 100644 (file)
index 0000000..164c660
--- /dev/null
@@ -0,0 +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
+
diff --git a/LayoutTests/transitions/transition-end-event-container.html b/LayoutTests/transitions/transition-end-event-container.html
new file mode 100644 (file)
index 0000000..9494410
--- /dev/null
@@ -0,0 +1,52 @@
+<html>
+<head>
+  <title>Transition End Events</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      -webkit-transition-property: left;
+      -webkit-transition-duration: 0.5s;
+    }
+  </style>
+  <script src="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]
+    ];
+    
+    function startTransition()
+    {
+      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';
+      }
+      
+      window.setTimeout(cleanup, 700);
+    }
+    
+    window.addEventListener('load', startTransition, false);
+  </script>
+</head>
+<body>
+
+<p>Initiating a 500ms transition on the left property of box1 and catching it on the parent.</p>
+
+<div id="container">
+  <div id="box1" class="box"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/transition-end-event-left-expected.txt b/LayoutTests/transitions/transition-end-event-left-expected.txt
new file mode 100644 (file)
index 0000000..dae8e17
--- /dev/null
@@ -0,0 +1,4 @@
+Initiating a 500ms transition on the left property of box1.
+
+Expected Property: left Target: box1 Type: webkitTransitionEnd Elapsed Time: 0.5 -- PASS
+
diff --git a/LayoutTests/transitions/transition-end-event-left.html b/LayoutTests/transitions/transition-end-event-left.html
new file mode 100644 (file)
index 0000000..d2d99e2
--- /dev/null
@@ -0,0 +1,52 @@
+<html>
+<head>
+  <title>Transition End Events</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      -webkit-transition-property: left;
+      -webkit-transition-duration: 0.5s;
+    }
+  </style>
+  <script src="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]
+    ];
+    
+    function startTransition()
+    {
+      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);
+    }
+    
+    window.addEventListener('load', startTransition, false);
+  </script>
+</head>
+<body>
+
+<p>Initiating a 500ms transition on the left property of box1.</p>
+
+<div id="container">
+  <div id="box1" class="box"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/transition-end-event-multiple-01-expected.txt b/LayoutTests/transitions/transition-end-event-multiple-01-expected.txt
new file mode 100644 (file)
index 0000000..3ba7b2a
--- /dev/null
@@ -0,0 +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
+
diff --git a/LayoutTests/transitions/transition-end-event-multiple-01.html b/LayoutTests/transitions/transition-end-event-multiple-01.html
new file mode 100644 (file)
index 0000000..6de228c
--- /dev/null
@@ -0,0 +1,58 @@
+<html>
+<head>
+  <title>Transition End Events</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      -webkit-transition-property: width, left, background-color, height, top;
+      -webkit-transition-duration: 0.5s;
+    }
+  </style>
+  <script src="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],
+    ];
+    
+    function startTransition()
+    {
+      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);
+    }
+    
+    window.addEventListener('load', startTransition, false);
+  </script>
+</head>
+<body>
+
+<p>Initiating a 500ms transition on the left, background-color, width and height properties of box1.</p>
+
+<div id="container">
+  <div id="box1" class="box"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/transition-end-event-multiple-02-expected.txt b/LayoutTests/transitions/transition-end-event-multiple-02-expected.txt
new file mode 100644 (file)
index 0000000..8c378c7
--- /dev/null
@@ -0,0 +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
+
diff --git a/LayoutTests/transitions/transition-end-event-multiple-02.html b/LayoutTests/transitions/transition-end-event-multiple-02.html
new file mode 100644 (file)
index 0000000..47a531f
--- /dev/null
@@ -0,0 +1,77 @@
+<html>
+<head>
+  <title>Transition End Events</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      -webkit-transition-property: width, left, background-color, height, top;
+      -webkit-transition-duration: 0.5s;
+    }
+    
+    .box1 {
+      left: 50px;
+    }
+    
+    .box2 {
+      background-color: red;
+      left: 50px;
+    }
+    
+    .box3 {
+      width: 150px;
+      background-color: green;
+      left: 50px;
+      height: 120px;
+      -webkit-transition-duration: 0.7s;
+    }
+    
+  </style>
+  <script src="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],
+    ];
+
+    function startTransition()
+    {
+      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);
+  </script>
+</head>
+<body>
+
+<p>Initiating transitions on various properties of all boxes.</p>
+
+<div id="container">
+  <div id="box1" class="box"></div>
+  <div id="box2" class="box"></div>
+  <div id="box3" class="box"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/transition-end-event-multiple-03-expected.txt b/LayoutTests/transitions/transition-end-event-multiple-03-expected.txt
new file mode 100644 (file)
index 0000000..7e73f99
--- /dev/null
@@ -0,0 +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
+
diff --git a/LayoutTests/transitions/transition-end-event-multiple-03.html b/LayoutTests/transitions/transition-end-event-multiple-03.html
new file mode 100644 (file)
index 0000000..86e5c95
--- /dev/null
@@ -0,0 +1,102 @@
+<html>
+<head>
+  <title>Transition End Events</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      -webkit-transition-property: width, left, background-color, height, top;
+      -webkit-transition-duration: 0.5s;
+    }
+    
+    .box1 {
+      left: 50px;
+    }
+    
+    .box2 {
+      background-color: red;
+      left: 50px;
+    }
+    
+    .box3 {
+      width: 150px;
+      background-color: green;
+      left: 50px;
+      height: 120px;
+      -webkit-transition-duration: 0.6s;
+    }
+
+    .box4 {
+      left: 100px;
+      height: 140px;
+      -webkit-transition-duration: 0.3s;
+    }
+
+    .box5 {
+      /* nothing */
+    }
+
+  </style>
+  <script src="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]
+    ];
+    
+    function transitionElement(index) {
+      var boxes = document.body.getElementsByClassName('box');
+      boxes[index-1].className = "box box" + index;
+    }
+
+    function startTransitions()
+    {
+      var boxes = document.body.getElementsByClassName('box');
+      for (var i = 0; i < boxes.length; ++i) {
+        boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
+      }
+
+      window.setTimeout(function() { transitionElement(1); }, 100);
+      window.setTimeout(function() { transitionElement(2); }, 150);
+      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);
+  </script>
+</head>
+<body>
+
+<p>Initiating transitions on various properties of all boxes, with different start times on the transitions.</p>
+
+<div id="container">
+  <div id="box1" class="box"></div>
+  <div id="box2" class="box"></div>
+  <div id="box3" class="box"></div>
+  <div id="box4" class="box"></div>
+  <div id="box5" class="box"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/transition-end-event-multiple-04-expected.txt b/LayoutTests/transitions/transition-end-event-multiple-04-expected.txt
new file mode 100644 (file)
index 0000000..a62639d
--- /dev/null
@@ -0,0 +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
+
diff --git a/LayoutTests/transitions/transition-end-event-multiple-04.html b/LayoutTests/transitions/transition-end-event-multiple-04.html
new file mode 100644 (file)
index 0000000..5053c1c
--- /dev/null
@@ -0,0 +1,93 @@
+<html>
+<head>
+  <title>Transition End Events</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      -webkit-transform: translate(0);
+      -webkit-transition-property: -webkit-transform;
+      -webkit-transition-duration: 0.5s;
+    }
+    
+    .box1 {
+      -webkit-transform: translate(50px);
+    }
+    
+    .box2 {
+      -webkit-transform: translate(50px) scale(1.05);
+      -webkit-transition-duration: 0.55s;
+    }
+    
+    .box3 {
+      -webkit-transform: translate(0); /* same as default */
+      -webkit-transition-duration: 0.3s;
+    }
+
+    .box4 {
+      -webkit-transform: translate(100px);
+      -webkit-transition-duration: 0.4s;
+    }
+
+    .box5 {
+      /* nothing */
+    }
+
+  </style>
+  <script src="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]
+    ];
+  
+    function transitionElement(index) {
+      var boxes = document.body.getElementsByClassName('box');
+      boxes[index-1].className = "box box" + index;
+    }
+
+    function startTransitions()
+    {
+      var boxes = document.body.getElementsByClassName('box');
+      for (var i = 0; i < boxes.length; ++i) {
+        boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
+      }
+
+      window.setTimeout(function() { transitionElement(1); }, 100);
+      window.setTimeout(function() { transitionElement(2); }, 150);
+      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);
+  </script>
+</head>
+<body>
+
+<p>Initiating transitions on transform properties of all boxes, starting at different times and with different durations and values.</p>
+
+<div id="container">
+  <div id="box1" class="box"></div>
+  <div id="box2" class="box"></div>
+  <div id="box3" class="box"></div>
+  <div id="box4" class="box"></div>
+  <div id="box5" class="box"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/transition-end-event-nested-expected.txt b/LayoutTests/transitions/transition-end-event-nested-expected.txt
new file mode 100644 (file)
index 0000000..df4137e
--- /dev/null
@@ -0,0 +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
+
diff --git a/LayoutTests/transitions/transition-end-event-nested.html b/LayoutTests/transitions/transition-end-event-nested.html
new file mode 100644 (file)
index 0000000..a16569a
--- /dev/null
@@ -0,0 +1,95 @@
+<html>
+<head>
+  <title>Transition End Events</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      -webkit-transition-property: width, left, background-color, height, top;
+      -webkit-transition-duration: 0.2s;
+    }
+    
+    .box1 {
+      left: 50px;
+    }
+    
+    .box2 {
+      background-color: red;
+    }
+    
+    .box3 {
+      width: 150px;
+      -webkit-transition-duration: 0.3s;
+    }
+    
+  </style>
+  <script src="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],
+    ];
+    
+    function startTransition1()
+    {
+      var box = document.getElementById("box1");
+      box.addEventListener("webkitTransitionEnd", handleEndEvent1, false);
+      box.className = "box box1";
+    }
+
+    function handleEndEvent1(event) {
+      recordEvent(event);
+      setTimeout(startTransition2, 100);
+    }
+
+    function startTransition2()
+    {
+      var box = document.getElementById("box2");
+      box.addEventListener("webkitTransitionEnd", handleEndEvent2, false);
+      box.className = "box box2";
+    }
+
+    function handleEndEvent2(event) {
+      recordEvent(event);
+      setTimeout(startTransition3, 100);
+    }
+
+    function startTransition3()
+    {
+      var box = document.getElementById("box3");
+      box.addEventListener("webkitTransitionEnd", handleEndEvent3, false);
+      box.className = "box box3";
+    }
+
+    function handleEndEvent3(event) {
+      recordEvent(event);
+      window.setTimeout(cleanup, 100);
+    }
+
+    window.addEventListener('load', startTransition1, false);
+  </script>
+</head>
+<body>
+
+<p>Initiating transitions on various properties of all boxes.</p>
+
+<div id="container">
+  <div id="box1" class="box"></div>
+  <div id="box2" class="box"></div>
+  <div id="box3" class="box"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/transition-end-event-transform-expected.txt b/LayoutTests/transitions/transition-end-event-transform-expected.txt
new file mode 100644 (file)
index 0000000..872f5a7
--- /dev/null
@@ -0,0 +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
+
diff --git a/LayoutTests/transitions/transition-end-event-transform.html b/LayoutTests/transitions/transition-end-event-transform.html
new file mode 100644 (file)
index 0000000..e674c35
--- /dev/null
@@ -0,0 +1,53 @@
+<html>
+<head>
+  <title>Transition End Events</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      -webkit-transition-property: -webkit-transform;
+      -webkit-transition-duration: 0.5s;
+      -webkit-transform: translate(100px);
+    }
+  </style>
+  <script src="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]
+    ];
+    
+    function startTransition()
+    {
+      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);
+    }
+    
+    window.addEventListener('load', startTransition, false);
+  </script>
+</head>
+<body>
+
+<p>Initiating a 500ms transition on the transform property of box1.</p>
+
+<div id="container">
+  <div id="box1" class="box"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/transition-end-event-window-expected.txt b/LayoutTests/transitions/transition-end-event-window-expected.txt
new file mode 100644 (file)
index 0000000..47aab59
--- /dev/null
@@ -0,0 +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
+
diff --git a/LayoutTests/transitions/transition-end-event-window.html b/LayoutTests/transitions/transition-end-event-window.html
new file mode 100644 (file)
index 0000000..4275292
--- /dev/null
@@ -0,0 +1,56 @@
+<html>
+<head>
+  <title>Transition End Events</title>
+  <style type="text/css" media="screen">
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      -webkit-transition-property: left;
+      -webkit-transition-duration: 0.5s;
+    }
+  </style>
+  <script src="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]
+    ];
+    
+    function startTransition()
+    {
+      var boxes = document.body.getElementsByClassName('box');
+      for (var i = 0; i < boxes.length; ++i) {
+        // we have to attach an empty handler here otherwise the event isn't
+        // fired (WebCore looks at the document to see if there are any listeners
+        // and ignores the one on Window) - this should be fixed
+        boxes[i].addEventListener("webkitTransitionEnd", function () {}, false);
+        boxes[i].style.left = '200px';
+      }
+      
+      window.setTimeout(cleanup, 700);
+    }
+    
+    window.addEventListener('load', startTransition, false);
+    window.onwebkittransitionend = recordEvent;
+  </script>
+</head>
+<body>
+
+<p>Initiating a 500ms transition on the left property of box1 and catching it on the window.</p>
+
+<div id="container">
+  <div id="box1" class="box"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
index fc71803..7c2a30e 100644 (file)
@@ -1,5 +1,30 @@
 2008-09-01  Dean Jackson  <dino@apple.com>
 
+        Reviewed by Sam Weinig.
+
+        https://bugs.webkit.org/show_bug.cgi?id=20571
+        Make sure Window object can assign Animation/Transition event
+        listeners via attributes.
+
+        Also added a bunch of transition event tests, although
+        only transition-end-event-window is directly relevant to this patch.
+
+        (WebCore::JSDOMWindowBase::put):
+
+        Tests: transitions/transition-end-event-all-properties.html
+               transitions/transition-end-event-attributes.html
+               transitions/transition-end-event-container.html
+               transitions/transition-end-event-left.html
+               transitions/transition-end-event-multiple-01.html
+               transitions/transition-end-event-multiple-02.html
+               transitions/transition-end-event-multiple-03.html
+               transitions/transition-end-event-multiple-04.html
+               transitions/transition-end-event-nested.html
+               transitions/transition-end-event-transform.html
+               transitions/transition-end-event-window.html
+
+2008-09-01  Dean Jackson  <dino@apple.com>
+
         Reviewed by Sam Weinig
 
         Code styling cleanup.
index 16677d9..51bca54 100644 (file)
@@ -749,6 +749,22 @@ void JSDOMWindowBase::put(ExecState* exec, const Identifier& propertyName, JSVal
             if (allowsAccessFrom(exec))
                 setListener(exec, unloadEvent, value);
             return;
+        case OnWebKitAnimationStart:
+            if (allowsAccessFrom(exec))
+                setListener(exec, webkitAnimationStartEvent, value);
+            return;
+        case OnWebKitAnimationIteration:
+            if (allowsAccessFrom(exec))
+                setListener(exec, webkitAnimationIterationEvent, value);
+            return;
+        case OnWebKitAnimationEnd:
+            if (allowsAccessFrom(exec))
+                setListener(exec, webkitAnimationEndEvent, value);
+            return;
+        case OnWebKitTransitionEnd:
+            if (allowsAccessFrom(exec))
+                setListener(exec, webkitTransitionEndEvent, value);
+            return;
         default:
             break;
         }