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