123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <title>Test for Bug 39139</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=0.60, minimum-scale=0.60, maximum-scale=0.60">
- <style type="text/css">
- body {
- font-family: 'Lucida Grande', Verdana, Arial;
- font-size: 12px;
- }
- #stage {
- margin: 150px auto;
- width: 600px;
- height: 400px;
- /*
-
- Setting the perspective of the contents of the stage
- but not the stage itself
-
- */
- -webkit-perspective: 800;
- }
- #rotate {
- margin: 0 auto;
- width: 600px;
- height: 400px;
- /* Ensure that we're in 3D space */
- -webkit-transform-style: preserve-3d;
- /*
- Make the whole set of rows use the x-axis spin animation
- for a duration of 7 seconds, running infinitely and linearly
- */
- -webkit-animation-name: x-spin;
- -webkit-animation-duration: 7s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
- }
- .ring {
- margin: 0 auto;
- height: 110px;
- width: 600px;
- -webkit-transform-style: preserve-3d;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
- }
-
- .ring > :nth-child(odd) {
- background-color: #995C7F;
- }
- .ring > :nth-child(even) {
- background-color: #835A99;
- }
- .poster {
- position: absolute;
- left: 250px;
- width: 100px;
- height: 100px;
- opacity: 0.7;
- color: rgba(0,0,0,0.9);
- -webkit-border-radius: 10px;
- }
-
- .poster > p {
- font-family: 'Georgia', serif;
- font-size: 36px;
- font-weight: bold;
- text-align: center;
- margin-top: 28px;
- }
- /*
- Set up each row to have a different animation duration
- and alternating y-axis rotation directions.
- */
- #ring-1 {
- -webkit-animation-name: y-spin;
- -webkit-animation-duration: 5s;
- }
- #ring-2 {
- -webkit-animation-name: back-y-spin;
- -webkit-animation-duration: 4s;
- }
- #ring-3 {
- -webkit-animation-name: y-spin;
- -webkit-animation-duration: 3s;
- }
- /*
- Here we define each of the three individual animations that
- we will be using to have our 3D rotation effect. The first
- animation will perform a full rotation on the x-axis, we'll
- use that on the whole set of objects. The second and third
- animations will perform a full rotation on the y-axis in
- opposite directions, alternating directions between rows.
-
- Note that you currently have to specify an intermediate step
- for rotations even when you are using individual transformation
- constructs.
- */
- @-webkit-keyframes x-spin {
- 0% { transform: rotateX(0deg); }
- 50% { transform: rotateX(180deg); }
- 100% { transform: rotateX(360deg); }
- }
- @-webkit-keyframes y-spin {
- 0% { transform: rotateY(0deg); }
- 50% { transform: rotateY(180deg); }
- 100% { transform: rotateY(360deg); }
- }
- @-webkit-keyframes back-y-spin {
- 0% { transform: rotateY(360deg); }
- 50% { transform: rotateY(180deg); }
- 100% { transform: rotateY(0deg); }
- }
- </style>
- <script type="text/javascript">
- const POSTERS_PER_ROW = 12;
- const RING_RADIUS = 200;
- function setup_posters (row)
- {
- var posterAngle = 360 / POSTERS_PER_ROW;
- for (var i = 0; i < POSTERS_PER_ROW; i ++) {
- var poster = document.createElement('div');
- poster.className = 'poster';
- // compute and assign the transform for this poster
- var transform = 'rotateY(' + (posterAngle * i) + 'deg) translateZ(' + RING_RADIUS + 'px)';
- poster.style.webkitTransform = transform;
- // setup the number to show inside the poster
- var content = poster.appendChild(document.createElement('p'));
- content.textContent = i;
- // add the poster to the row
- row.appendChild(poster);
- }
- }
- function init ()
- {
- setup_posters(document.getElementById('ring-1'));
- setup_posters(document.getElementById('ring-2'));
- setup_posters(document.getElementById('ring-3'));
- }
- // call init once the document is fully loaded
- window.addEventListener('load', init, false);
- </script>
- </head>
-
- <body>
- <p>This is a test for <a href="https://bugs.webkit.org/show_bug.cgi?id=39139">Bug 39139: Pages
- that use hardware acceleration don't repaint after waking computer from sleep</a>. To test, put
- your computer to sleep (or "Standby", as Windows calls it). When you wake your computer up, the
- animation below should still be running.</p>
- <div id="stage">
- <div id="rotate">
- <div id="ring-1" class="ring"></div>
- <div id="ring-2" class="ring"></div>
- <div id="ring-3" class="ring"></div>
- </div>
- </div>
- </body>
-
- </html>
|