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