Use testRunner instead of layoutTestController in animations tests
[WebKit-https.git] / LayoutTests / animations / 3d / transform-origin-vs-functions.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2   "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4   <head>
5     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
6     <title>-webkit-transform-origin vs. Transform Functions</title>
7     <style type="text/css" media="screen">
8     #a {
9       top: 0px;
10       left: 0px;
11       position: absolute;
12       -webkit-perspective: 800;
13       width: 800px;
14       height: 600px;
15     }
16     #b1 {
17       top: 80px;
18       left: 300px;
19       width: 200px;
20       height: 200px;
21       position: absolute;
22       background-color: #282;
23       -webkit-animation-duration: 2s;
24       -webkit-animation-iteration-count: infinite;
25       -webkit-animation-timing-function: linear;
26       -webkit-transform-origin: center center 200px;
27     }
28     @-webkit-keyframes b1 {
29         from { -webkit-transform: rotateY(0deg); }
30         5%  { -webkit-transform: rotateY(90deg); }
31         20%  { -webkit-transform: rotateY(90deg); }
32         50%  { -webkit-transform: rotateY(180deg); }
33         75%  { -webkit-transform: rotateY(270deg); }
34         to   { -webkit-transform: rotateY(360deg); }
35     }
36     #b2 {
37       top: 320px;
38       left: 300px;
39       width: 200px;
40       height: 200px;
41       position: absolute;
42       background-color: #282;
43       -webkit-animation-duration: 2s;
44       -webkit-animation-iteration-count: infinite;
45       -webkit-animation-timing-function: linear;
46     }
47     @-webkit-keyframes b2 {
48         from { -webkit-transform: translateZ(200px) rotateY(0deg) translateZ(-200px) }
49         5%  { -webkit-transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
50         20%  { -webkit-transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
51         50%  { -webkit-transform: translateZ(200px) rotateY(180deg) translateZ(-200px) }
52         75%  { -webkit-transform: translateZ(200px) rotateY(270deg) translateZ(-200px) }
53         to   { -webkit-transform: translateZ(200px) rotateY(360deg) translateZ(-200px) }
54     }
55     </style>
56     
57     <script type="text/javascript" charset="utf-8">
58       if (window.testRunner) {
59         testRunner.dumpAsText();
60         testRunner.waitUntilDone();
61       }
62
63       resultEntries = [];
64
65       const expected = {
66           "b1" : [ 0,0,-1,0, 0,1,0,0, 1,0,0,0, 0,0,0,1 ],
67           "b2" : [ 0,0,-1,0, 0,1,0,0, 1,0,0,0, -200,0,200,1 ]
68       };
69
70       const tolerance = 0.2;
71       function isEqual(actual, desired)
72       {
73           var diff = Math.abs(actual - desired);
74           return diff <= tolerance;
75       }
76
77       var numSnapshots = 0;
78
79       function snapshot(id)
80       {
81           var e = document.getElementById(id);
82           var t = window.getComputedStyle(e).webkitTransform;
83           var a = t.split("(");
84           var array = a[1].split(",");
85           var pass = true;
86           for (i = 0; i < 16; ++i) {
87               var actual = parseFloat(array[i]);
88               var expect = expected[id][i];
89               if (!isEqual(actual, expect)) {
90                   resultEntries.push("FAIL(element '"+id+"' matrix["+i+"]' was:"+actual+", expected:"+expect+")<br>");
91                   pass = false;
92               }
93           }
94           
95           if (pass)
96             resultEntries.push("PASS(element '"+id+"' matches expected value)<br>");
97           
98           numSnapshots++;
99           if (numSnapshots == 2) {
100               resultEntries.sort();
101               document.getElementById('result').innerHTML = resultEntries.join("");
102               if (window.testRunner)
103                   testRunner.notifyDone();
104           }
105       }
106       
107       function snapshotOnTimeout(id) {
108           setTimeout("snapshot('" + id + "')", 250);
109       }
110
111       function startAnimation(id)
112       {
113           var element = document.getElementById(id);
114           element.addEventListener('webkitAnimationStart', function() {
115               // delay to give hardware animations a chance to start
116               window.setTimeout("snapshotOnTimeout('" + id + "')", 0);
117           }, false);
118           element.style.webkitAnimationName = id;
119       }
120
121       function start()
122       {
123           startAnimation('b1');
124           startAnimation('b2');
125       }
126
127     </script>
128   </head>
129   <body onload="start()">
130     <div id="a">
131         <div id="b1"> </div>
132         <div style="-webkit-transform:translateZ(-200px); -webkit-transform-style:preserve-3d;">
133             <div id="b2"> </div>
134         </div>
135     </div>
136   </body>
137   <div id="result"> </div>
138 </html>