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>
184