Gitiles
Code Review Sign In
gerrit-public.fairphone.software / fp2-dev / platform / external / chromium_org / third_party / WebKit / eac6af9a72cf9c23b628f76bd7593f8abdae2c41 / . / ManualTests / crash-and-no-repaint-after-wake-from-sleep.html
blob: c0ccb12e3a9984f6e78fb5e5ad18358c264e0b2e [file] [log] [blame]
Torne (Richard Coles)5c87bf82012-11-14 11:46:17 +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 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>