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