|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" |
|
2 "http://www.w3.org/TR/html4/strict.dtd"> |
|
3 <html> |
|
4 <head> |
|
5 <title>Test for Bug 39139</title> |
|
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
7 <meta name="viewport" content="initial-scale=0.60, minimum-scale=0.60, maximum-scale=0.60"> |
|
8 <style type="text/css"> |
|
9 |
|
10 body { |
|
11 font-family: 'Lucida Grande', Verdana, Arial; |
|
12 font-size: 12px; |
|
13 } |
|
14 |
|
15 #stage { |
|
16 margin: 150px auto; |
|
17 width: 600px; |
|
18 height: 400px; |
|
19 /* |
|
20 |
|
21 Setting the perspective of the contents of the stage |
|
22 but not the stage itself |
|
23 |
|
24 */ |
|
25 -webkit-perspective: 800; |
|
26 } |
|
27 |
|
28 #rotate { |
|
29 margin: 0 auto; |
|
30 width: 600px; |
|
31 height: 400px; |
|
32 /* Ensure that we're in 3D space */ |
|
33 -webkit-transform-style: preserve-3d; |
|
34 /* |
|
35 Make the whole set of rows use the x-axis spin animation |
|
36 for a duration of 7 seconds, running infinitely and linearly |
|
37 */ |
|
38 -webkit-animation-name: x-spin; |
|
39 -webkit-animation-duration: 7s; |
|
40 -webkit-animation-iteration-count: infinite; |
|
41 -webkit-animation-timing-function: linear; |
|
42 } |
|
43 |
|
44 .ring { |
|
45 margin: 0 auto; |
|
46 height: 110px; |
|
47 width: 600px; |
|
48 -webkit-transform-style: preserve-3d; |
|
49 -webkit-animation-iteration-count: infinite; |
|
50 -webkit-animation-timing-function: linear; |
|
51 } |
|
52 |
|
53 .ring > :nth-child(odd) { |
|
54 background-color: #995C7F; |
|
55 } |
|
56 |
|
57 .ring > :nth-child(even) { |
|
58 background-color: #835A99; |
|
59 } |
|
60 |
|
61 .poster { |
|
62 position: absolute; |
|
63 left: 250px; |
|
64 width: 100px; |
|
65 height: 100px; |
|
66 opacity: 0.7; |
|
67 color: rgba(0,0,0,0.9); |
|
68 -webkit-border-radius: 10px; |
|
69 } |
|
70 |
|
71 .poster > p { |
|
72 font-family: 'Georgia', serif; |
|
73 font-size: 36px; |
|
74 font-weight: bold; |
|
75 text-align: center; |
|
76 margin-top: 28px; |
|
77 } |
|
78 |
|
79 /* |
|
80 Set up each row to have a different animation duration |
|
81 and alternating y-axis rotation directions. |
|
82 */ |
|
83 #ring-1 { |
|
84 -webkit-animation-name: y-spin; |
|
85 -webkit-animation-duration: 5s; |
|
86 } |
|
87 |
|
88 #ring-2 { |
|
89 -webkit-animation-name: back-y-spin; |
|
90 -webkit-animation-duration: 4s; |
|
91 } |
|
92 |
|
93 #ring-3 { |
|
94 -webkit-animation-name: y-spin; |
|
95 -webkit-animation-duration: 3s; |
|
96 } |
|
97 |
|
98 /* |
|
99 |
|
100 Here we define each of the three individual animations that |
|
101 we will be using to have our 3D rotation effect. The first |
|
102 animation will perform a full rotation on the x-axis, we'll |
|
103 use that on the whole set of objects. The second and third |
|
104 animations will perform a full rotation on the y-axis in |
|
105 opposite directions, alternating directions between rows. |
|
106 |
|
107 Note that you currently have to specify an intermediate step |
|
108 for rotations even when you are using individual transformation |
|
109 constructs. |
|
110 |
|
111 */ |
|
112 @-webkit-keyframes x-spin { |
|
113 0% { -webkit-transform: rotateX(0deg); } |
|
114 50% { -webkit-transform: rotateX(180deg); } |
|
115 100% { -webkit-transform: rotateX(360deg); } |
|
116 } |
|
117 |
|
118 @-webkit-keyframes y-spin { |
|
119 0% { -webkit-transform: rotateY(0deg); } |
|
120 50% { -webkit-transform: rotateY(180deg); } |
|
121 100% { -webkit-transform: rotateY(360deg); } |
|
122 } |
|
123 |
|
124 @-webkit-keyframes back-y-spin { |
|
125 0% { -webkit-transform: rotateY(360deg); } |
|
126 50% { -webkit-transform: rotateY(180deg); } |
|
127 100% { -webkit-transform: rotateY(0deg); } |
|
128 } |
|
129 </style> |
|
130 |
|
131 <script type="text/javascript"> |
|
132 |
|
133 const POSTERS_PER_ROW = 12; |
|
134 const RING_RADIUS = 200; |
|
135 |
|
136 function setup_posters (row) |
|
137 { |
|
138 var posterAngle = 360 / POSTERS_PER_ROW; |
|
139 for (var i = 0; i < POSTERS_PER_ROW; i ++) { |
|
140 var poster = document.createElement('div'); |
|
141 poster.className = 'poster'; |
|
142 // compute and assign the transform for this poster |
|
143 var transform = 'rotateY(' + (posterAngle * i) + 'deg) translateZ(' + RING_RADIUS + 'px)'; |
|
144 poster.style.webkitTransform = transform; |
|
145 // setup the number to show inside the poster |
|
146 var content = poster.appendChild(document.createElement('p')); |
|
147 content.textContent = i; |
|
148 // add the poster to the row |
|
149 row.appendChild(poster); |
|
150 } |
|
151 |
|
152 } |
|
153 |
|
154 function init () |
|
155 { |
|
156 setup_posters(document.getElementById('ring-1')); |
|
157 setup_posters(document.getElementById('ring-2')); |
|
158 setup_posters(document.getElementById('ring-3')); |
|
159 } |
|
160 |
|
161 // call init once the document is fully loaded |
|
162 window.addEventListener('load', init, false); |
|
163 |
|
164 </script> |
|
165 </head> |
|
166 |
|
167 <body> |
|
168 |
|
169 <p>This is a test for <a href="https://bugs.webkit.org/show_bug.cgi?id=39139">Bug 39139: Pages |
|
170 that use hardware acceleration don't repaint after waking computer from sleep</a>. To test, put |
|
171 your computer to sleep (or "Standby", as Windows calls it). When you wake your computer up, the |
|
172 animation below should still be running.</p> |
|
173 <div id="stage"> |
|
174 <div id="rotate"> |
|
175 <div id="ring-1" class="ring"></div> |
|
176 <div id="ring-2" class="ring"></div> |
|
177 <div id="ring-3" class="ring"></div> |
|
178 </div> |
|
179 </div> |
|
180 |
|
181 </body> |
|
182 |
|
183 </html> |