ManualTests/no-repaint-after-wake-from-sleep.html - WebKit - Git at Google

 <!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>
	<!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>