no-repaint-after-wake-from-sleep.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  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. body {
  10. font-family: 'Lucida Grande', Verdana, Arial;
  11. font-size: 12px;
  12. }
  13. #stage {
  14. margin: 150px auto;
  15. width: 600px;
  16. height: 400px;
  17. /*
  18. Setting the perspective of the contents of the stage
  19. but not the stage itself
  20. */
  21. -webkit-perspective: 800;
  22. }
  23. #rotate {
  24. margin: 0 auto;
  25. width: 600px;
  26. height: 400px;
  27. /* Ensure that we're in 3D space */
  28. -webkit-transform-style: preserve-3d;
  29. /*
  30. Make the whole set of rows use the x-axis spin animation
  31. for a duration of 7 seconds, running infinitely and linearly
  32. */
  33. -webkit-animation-name: x-spin;
  34. -webkit-animation-duration: 7s;
  35. -webkit-animation-iteration-count: infinite;
  36. -webkit-animation-timing-function: linear;
  37. }
  38. .ring {
  39. margin: 0 auto;
  40. height: 110px;
  41. width: 600px;
  42. -webkit-transform-style: preserve-3d;
  43. -webkit-animation-iteration-count: infinite;
  44. -webkit-animation-timing-function: linear;
  45. }
  46. .ring > :nth-child(odd) {
  47. background-color: #995C7F;
  48. }
  49. .ring > :nth-child(even) {
  50. background-color: #835A99;
  51. }
  52. .poster {
  53. position: absolute;
  54. left: 250px;
  55. width: 100px;
  56. height: 100px;
  57. opacity: 0.7;
  58. color: rgba(0,0,0,0.9);
  59. -webkit-border-radius: 10px;
  60. }
  61. .poster > p {
  62. font-family: 'Georgia', serif;
  63. font-size: 36px;
  64. font-weight: bold;
  65. text-align: center;
  66. margin-top: 28px;
  67. }
  68. /*
  69. Set up each row to have a different animation duration
  70. and alternating y-axis rotation directions.
  71. */
  72. #ring-1 {
  73. -webkit-animation-name: y-spin;
  74. -webkit-animation-duration: 5s;
  75. }
  76. #ring-2 {
  77. -webkit-animation-name: back-y-spin;
  78. -webkit-animation-duration: 4s;
  79. }
  80. #ring-3 {
  81. -webkit-animation-name: y-spin;
  82. -webkit-animation-duration: 3s;
  83. }
  84. /*
  85. Here we define each of the three individual animations that
  86. we will be using to have our 3D rotation effect. The first
  87. animation will perform a full rotation on the x-axis, we'll
  88. use that on the whole set of objects. The second and third
  89. animations will perform a full rotation on the y-axis in
  90. opposite directions, alternating directions between rows.
  91. Note that you currently have to specify an intermediate step
  92. for rotations even when you are using individual transformation
  93. constructs.
  94. */
  95. @-webkit-keyframes x-spin {
  96. 0% { transform: rotateX(0deg); }
  97. 50% { transform: rotateX(180deg); }
  98. 100% { transform: rotateX(360deg); }
  99. }
  100. @-webkit-keyframes y-spin {
  101. 0% { transform: rotateY(0deg); }
  102. 50% { transform: rotateY(180deg); }
  103. 100% { transform: rotateY(360deg); }
  104. }
  105. @-webkit-keyframes back-y-spin {
  106. 0% { transform: rotateY(360deg); }
  107. 50% { transform: rotateY(180deg); }
  108. 100% { transform: rotateY(0deg); }
  109. }
  110. </style>
  111. <script type="text/javascript">
  112. const POSTERS_PER_ROW = 12;
  113. const RING_RADIUS = 200;
  114. function setup_posters (row)
  115. {
  116. var posterAngle = 360 / POSTERS_PER_ROW;
  117. for (var i = 0; i < POSTERS_PER_ROW; i ++) {
  118. var poster = document.createElement('div');
  119. poster.className = 'poster';
  120. // compute and assign the transform for this poster
  121. var transform = 'rotateY(' + (posterAngle * i) + 'deg) translateZ(' + RING_RADIUS + 'px)';
  122. poster.style.webkitTransform = transform;
  123. // setup the number to show inside the poster
  124. var content = poster.appendChild(document.createElement('p'));
  125. content.textContent = i;
  126. // add the poster to the row
  127. row.appendChild(poster);
  128. }
  129. }
  130. function init ()
  131. {
  132. setup_posters(document.getElementById('ring-1'));
  133. setup_posters(document.getElementById('ring-2'));
  134. setup_posters(document.getElementById('ring-3'));
  135. }
  136. // call init once the document is fully loaded
  137. window.addEventListener('load', init, false);
  138. </script>
  139. </head>
  140. <body>
  141. <p>This is a test for <a href="https://bugs.webkit.org/show_bug.cgi?id=39139">Bug 39139: Pages
  142. that use hardware acceleration don't repaint after waking computer from sleep</a>. To test, put
  143. your computer to sleep (or "Standby", as Windows calls it). When you wake your computer up, the
  144. animation below should still be running.</p>
  145. <div id="stage">
  146. <div id="rotate">
  147. <div id="ring-1" class="ring"></div>
  148. <div id="ring-2" class="ring"></div>
  149. <div id="ring-3" class="ring"></div>
  150. </div>
  151. </div>
  152. </body>
  153. </html>