OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright 2012 Google Inc. All Rights Reserved. | |
3 | |
4 Licensed under the Apache License, Version 2.0 (the "License"); | |
5 you may not use this file except in compliance with the License. | |
6 You may obtain a copy of the License at | |
7 | |
8 http://www.apache.org/licenses/LICENSE-2.0 | |
9 | |
10 Unless required by applicable law or agreed to in writing, software | |
11 distributed under the License is distributed on an "AS IS" BASIS, | |
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
13 See the License for the specific language governing permissions and | |
14 limitations under the License. | |
15 --> | |
16 | |
17 <!DOCTYPE html><meta charset="UTF-8"> | |
18 <style> | |
19 | |
20 .container { | |
21 -webkit-perspective: 200px; | |
22 perspective: 200px; | |
23 -webkit-perspective-origin: 400px 200px; | |
24 perspective-origin: 400px 200px; | |
25 position: absolute; | |
26 top: 300px; | |
27 } | |
28 | |
29 .anim { | |
30 left: 0px; | |
31 width: 50px; | |
32 height: 50px; | |
33 background-color: lightsteelblue; | |
34 position: absolute; | |
35 -webkit-transform-style: preserve-3d; | |
36 transform-style: preserve-3d; | |
37 font-size: 8px; | |
38 } | |
39 | |
40 .expected { | |
41 width: 50px; | |
42 height: 50px; | |
43 position: absolute; | |
44 background-color: red; | |
45 font-size: 8px; | |
46 -webkit-transform-style: preserve-3d; | |
47 transform-style: preserve-3d; | |
48 } | |
49 </style> | |
50 <div class="container"></div> | |
51 <div style="height: 700px"></div> | |
52 | |
53 <script> | |
54 var expected_failures = [ | |
55 { | |
56 browser_configurations: [{ msie: true }], | |
57 tests: ['Autogenerated'], | |
58 message: 'IE returns matrix3d instead of matrix.', | |
59 } | |
60 ]; | |
61 </script> | |
62 <script src="../bootstrap.js"></script> | |
63 <script> | |
64 "use strict"; | |
65 | |
66 var transformValues = [ | |
67 ['translate3d(0px, 0px, 0px)', 'translate3d(20px, 40px, 60px)', | |
68 'translateZ(20px)'], | |
69 ['translateZ(50px) scale3d(1, 1, 1)', 'translateZ(50px) scale3d(1.5, 3, 5)', '
translateZ(50px) scaleZ(2)'], | |
70 ['rotateX(0deg)', 'rotateX(50deg)'], | |
71 ['rotateY(0deg)', 'rotateY(50deg)'], | |
72 ['rotateZ(0deg)', 'rotateZ(50deg)'], | |
73 ]; | |
74 | |
75 var separation_x = 70; | |
76 var separation_y = 70; | |
77 var max_x = 1000; | |
78 | |
79 var toplevel = document.querySelector("div"); | |
80 | |
81 var animations = []; | |
82 | |
83 var y = 50; | |
84 for (var i = 0; i < transformValues.length; i++) { | |
85 var x = 300; | |
86 for (var j = 0; j < transformValues[i].length; j++) { | |
87 for (var k = 0; k < transformValues[i].length; k++) { | |
88 if (j == k) { | |
89 continue; | |
90 } | |
91 toplevel.appendChild(document.createElement("div")); | |
92 var div = toplevel.lastChild; | |
93 div.className = "expected"; | |
94 div.style.top = y + 'px'; | |
95 div.style.left = x + 'px'; | |
96 div.style[_WebAnimationsTestingUtilities._prefixProperty('transform')] = t
ransformValues[i][k]; | |
97 toplevel.appendChild(document.createElement("div")); | |
98 var div = toplevel.lastChild; | |
99 div.className = "anim"; | |
100 div.style.top = y + 'px'; | |
101 div.style.left = x + 'px'; | |
102 div.textContent = "perspective"; | |
103 div.id = "i_" + i + "_" + j + "_" + k; | |
104 animations.push(new Animation(div, [ | |
105 {transform: transformValues[i][j]}, | |
106 {transform: transformValues[i][k]}, | |
107 ], {duration: 2 * 1000, fill: 'forwards'})); | |
108 | |
109 x += separation_x; | |
110 if (x > max_x) { | |
111 x = 20; | |
112 y += separation_y; | |
113 } | |
114 } | |
115 } | |
116 y += separation_y; | |
117 } | |
118 | |
119 </script> | |
120 <script> | |
121 "use strict"; | |
122 animations.forEach(function(anim) { document.timeline.play(anim); }); | |
123 </script> | |
OLD | NEW |