--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/WebCore/manual-tests/no-repaint-after-wake-from-sleep.html Fri Sep 17 09:02:29 2010 +0300
@@ -0,0 +1,183 @@
+<!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% { -webkit-transform: rotateX(0deg); }
+ 50% { -webkit-transform: rotateX(180deg); }
+ 100% { -webkit-transform: rotateX(360deg); }
+ }
+
+ @-webkit-keyframes y-spin {
+ 0% { -webkit-transform: rotateY(0deg); }
+ 50% { -webkit-transform: rotateY(180deg); }
+ 100% { -webkit-transform: rotateY(360deg); }
+ }
+
+ @-webkit-keyframes back-y-spin {
+ 0% { -webkit-transform: rotateY(360deg); }
+ 50% { -webkit-transform: rotateY(180deg); }
+ 100% { -webkit-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>