2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
5 <style type="text/css">
7 #red, #green, #blue { position: absolute; width: 200px; height: 200px; opacity: 0}
9 #red { background-color: red; }
11 #green { background-color: green; }
13 #blue { background-color: blue; }
15 @-webkit-keyframes red {
18 -webkit-transform: scale(3);
22 -webkit-transform: scale(1.1);
26 -webkit-transform: scale(1);
30 -webkit-transform: scale(0.92);
34 -webkit-transform: scale(0.2);
38 @-webkit-keyframes green {
41 -webkit-transform: scale(2.6);
45 -webkit-transform: scale(1);
49 -webkit-transform: scale(0.9);
53 -webkit-transform: scale(0.1);
57 /* safari keyframes */
58 @-webkit-keyframes blue {
60 -webkit-transform: scale(1.2);
64 -webkit-transform: scale(0.8);
68 -webkit-transform: scale(0.6);
72 -webkit-transform: scale(0.2);
78 -webkit-animation-delay: 0.1s;
79 -webkit-animation-duration: 1s;
80 -webkit-animation-name: red;
84 -webkit-animation-delay: 0.7s;
85 -webkit-animation-duration: 1s;
86 -webkit-animation-name: green;
90 -webkit-animation-delay: 1.2s;
91 -webkit-animation-duration: 1s;
92 -webkit-animation-name: blue;
96 <script type="text/javascript" charset="utf-8">
97 if (window.layoutTestController) {
98 layoutTestController.dumpAsText();
99 layoutTestController.waitUntilDone();
102 var animationStarted = false;
104 setTimeout(function(event){
106 if (animationStarted)
107 result = "PASS start of the animation";
109 result = "FAIL start of the animation";
110 document.getElementById('result').innerHTML = result;
114 document.addEventListener("webkitAnimationStart", function(event){
115 animationStarted = true;
118 document.addEventListener("webkitAnimationEnd", function(event) {
119 if (window.layoutTestController)
120 layoutTestController.notifyDone();
123 window.addEventListener("load", function () {
124 document.body.className = "go";
132 <div id="green"></div>
133 <div id="blue"></div>