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