third_party/WebKit/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%    { transform: rotateX(0deg); }
 115         50%   { transform: rotateX(180deg); }
 116         100%  { transform: rotateX(360deg); }
 117       }
 118
 119       @-webkit-keyframes y-spin {
 120         0%    { transform: rotateY(0deg); }
 121         50%   { transform: rotateY(180deg); }
 122         100%  { transform: rotateY(360deg); }
 123       }
 124
 125       @-webkit-keyframes back-y-spin {
 126         0%    { transform: rotateY(360deg); }
 127         50%   { transform: rotateY(180deg); }
 128         100%  { 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>