2010-09-09 Dean Jackson <dino@apple.com>
[WebKit-https.git] / LayoutTests / animations / animation-shorthand.html
1 <html> 
2 <head>
3 <title>Test animation shorthand property</title> 
4 <style type="text/css" media="screen">
5 .box {
6   height: 10px;
7   width: 10px;
8   background-color: blue;
9 }
10 #a {
11 }
12 #b {
13   -webkit-animation: none;
14 }
15 #c {
16   -webkit-animation: anim1 10s;
17 }
18 #d {
19   -webkit-animation: anim1 10s linear;
20 }
21 #e {
22   -webkit-animation: anim1 10s linear 5s;
23 }
24 #f {
25   -webkit-animation: anim1 10s linear 5s 3;
26 }
27 #g {
28   -webkit-animation: anim1 10s linear 5s infinite alternate;
29 }
30 #h {
31   -webkit-animation: anim1 10s linear 5s infinite alternate forwards;
32 }
33 #i {
34   -webkit-animation: anim1 10s linear normal none;
35 }
36 #j {
37   -webkit-animation: anim1 10s linear infinite backwards, anim2 3s none, anim3 5s both;
38 }
39
40 @-webkit-keyframes anim1 { }
41 @-webkit-keyframes anim2 { }
42 </style>
43   <script type="text/javascript" charset="utf-8">
44     if (window.layoutTestController)
45         layoutTestController.dumpAsText();
46   
47     const kProperties = [
48       "webkitAnimationName",
49       "webkitAnimationDuration",
50       "webkitAnimationTimingFunction",
51       "webkitAnimationDelay",
52       "webkitAnimationIterationCount",
53       "webkitAnimationDirection",
54       "webkitAnimationFillMode"
55     ];
56     const kExpectedResults = [
57       { id: 'a',  values: [ "none", "0s", "cubic-bezier(0.25, 0.1, 0.25, 1)", "0s", "1", "normal", "none" ] },
58       { id: 'b',  values: [ "none", "0s", "cubic-bezier(0.25, 0.1, 0.25, 1)", "0s", "1", "normal", "none" ] },
59       { id: 'c',  values: [ "anim1", "10s", "cubic-bezier(0.25, 0.1, 0.25, 1)", "0s", "1", "normal", "none" ] },
60       { id: 'd',  values: [ "anim1", "10s", "linear", "0s", "1", "normal", "none" ] },
61       { id: 'e',  values: [ "anim1", "10s", "linear", "5s", "1", "normal", "none" ] },
62       { id: 'f',  values: [ "anim1", "10s", "linear", "5s", "3", "normal", "none" ] },
63       { id: 'g',  values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate", "none" ] },
64       { id: 'h',  values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate", "forwards" ] },
65       { id: 'i',  values: [ "anim1", "10s", "linear", "0s", "1", "normal", "none" ] },
66       { id: 'j',  values: [ "anim1, anim2, anim3", "10s, 3s, 5s", "linear, cubic-bezier(0.25, 0.1, 0.25, 1), cubic-bezier(0.25, 0.1, 0.25, 1)", "0s, 0s, 0s", "infinite, 1, 1", "normal, normal, normal", "backwards, none, both" ] }
67     ];
68     
69     function start()
70     {
71       var resultsString = "";
72       kExpectedResults.forEach(function(curItem) {
73         var el = document.getElementById(curItem.id);
74         var elStyle = window.getComputedStyle(el);
75         
76         for (var i=0; i < kProperties.length; i++) {
77           var computedValue = elStyle[kProperties[i]];
78           var expectedValue = curItem.values[i];
79           if (computedValue == expectedValue)
80             resultsString += "Testing " + kProperties[i] + " on " + curItem.id + ": PASS" + "<br>";
81           else
82             resultsString += "Testing " + kProperties[i] + " on " + curItem.id + " expected <code>" + expectedValue + "</code> got <code>" + computedValue + "</code>: FAIL" + "<br>";
83           
84         }
85       });
86
87       var results = document.getElementById('result');
88       results.innerHTML = resultsString;
89     }
90     
91     window.addEventListener('load', start, false);
92   </script>
93 </head> 
94 <body>
95 <div id="a" class="box"></div>
96 <div id="b" class="box"></div>
97 <div id="c" class="box"></div>
98 <div id="d" class="box"></div>
99 <div id="e" class="box"></div>
100 <div id="f" class="box"></div>
101 <div id="g" class="box"></div>
102 <div id="h" class="box"></div>
103 <div id="i" class="box"></div>
104 <div id="j" class="box"></div>
105 <div id="result">
106 </div>
107 </body>
108 </html>