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