Google Git
Sign in
webkit / WebKit / c8e4c8da05374fd864cfc2615cff79f382afac83 / . / ManualTests / no-repaint-after-wake-from-sleep.html
blob: 0c0f16153548df5f228abc17db2cbf00c09b179c [file] [log] [blame]
aroben@apple.coma87eda52010-05-17 15:04:36 +0000[diff] [blame]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>