LayoutTests/animations/animation-welcome-safari.html

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
   3 <head>
   4
   5 <style type="text/css">
   6
   7 #red, #green, #blue { position: absolute; width: 200px; height: 200px; opacity: 0}
   8
   9 #red { background-color: red; }
  10
  11 #green { background-color: green; }
  12
  13 #blue { background-color: blue; }
  14
  15 @-webkit-keyframes red {
  16         from {
  17                 opacity: 0;
  18                 -webkit-transform: scale(3);
  19         }
  20         22% {
  21                 opacity: 1;
  22                 -webkit-transform: scale(1.1);
  23         }
  24         30% {
  25                 opacity: 1;
  26                 -webkit-transform: scale(1);
  27         }
  28         82% {
  29                 opacity: 1;
  30                 -webkit-transform: scale(0.92);
  31         }
  32         to {
  33                 opacity: 0;
  34                 -webkit-transform: scale(0.2);
  35         }
  36 }
  37
  38 @-webkit-keyframes green {
  39         from {
  40                 opacity: 0;
  41                 -webkit-transform: scale(2.6);
  42         }
  43         20% {
  44                 opacity: 1;
  45                 -webkit-transform: scale(1);
  46         }
  47         77% {
  48                 opacity: 1;
  49                 -webkit-transform: scale(0.9);
  50         }
  51         to {
  52                 opacity: 0;
  53                 -webkit-transform: scale(0.1);
  54         }
  55 }
  56
  57 /* safari keyframes */
  58 @-webkit-keyframes blue {
  59         from {
  60                 -webkit-transform: scale(1.2);
  61                 opacity: 0;
  62         }
  63         20% {
  64                 -webkit-transform: scale(0.8);
  65                 opacity: 1;
  66         }
  67         84% {
  68                 -webkit-transform: scale(0.6);
  69                 opacity: 1;
  70         }
  71         to {
  72                 -webkit-transform: scale(0.2);
  73                 opacity: 0;
  74         }
  75 }
  76
  77 body.go #red {
  78         -webkit-animation-delay: 0.1s;
  79         -webkit-animation-duration: 1s;
  80         -webkit-animation-name: red;
  81 }
  82
  83 body.go #green {
  84         -webkit-animation-delay: 0.7s;
  85         -webkit-animation-duration: 1s;
  86         -webkit-animation-name: green;
  87 }
  88
  89 body.go #blue {
  90         -webkit-animation-delay: 1.2s;
  91         -webkit-animation-duration: 1s;
  92         -webkit-animation-name: blue;
  93 }
  94 </style>
  95
  96 <script type="text/javascript" charset="utf-8">
  97    if (window.layoutTestController) {
  98         layoutTestController.dumpAsText();
  99         layoutTestController.waitUntilDone();
 100     }
 101
 102     var animationStarted = false;
 103
 104     setTimeout(function(event){
 105         var result;
 106         if (animationStarted)
 107             result = "PASS start of the animation";
 108         else
 109             result = "FAIL start of the animation";
 110         document.getElementById('result').innerHTML = result;
 111
 112     }, 200);
 113
 114     document.addEventListener("webkitAnimationStart", function(event){
 115         animationStarted = true;
 116     }, false);
 117
 118     document.addEventListener("webkitAnimationEnd", function(event) {
 119         if (window.layoutTestController)
 120             layoutTestController.notifyDone();
 121     }, false);
 122
 123     window.addEventListener("load", function () {
 124         document.body.className = "go";
 125     }, false);
 126
 127 </script>
 128
 129 </head>
 130 <body>
 131     <div id="red"></div>
 132     <div id="green"></div>
 133     <div id="blue"></div>
 134 <div id="result">
 135 </div>
 136 </div>
 137
 138 </body>
 139 </html>