ManualTests/crash-and-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 Bugs 39295 and 39297</title>
     <meta http-equiv="refresh" content="5">
     <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 combined test for <a href="https://bugs.webkit.org/show_bug.cgi?id=39295">Bug 39295: Crash (preceded by
     assertion) in WKCACFLayerRenderer::setNeedsDisplay when computer wakes from sleep on particular page</a> and <a
     href="https://bugs.webkit.org/show_bug.cgi?id=39297">Bug 39297: WebView doesn't repaint until page reloads when page
     using hardware acceleration loads just after waking from sleep</a>. To test, put your computer to sleep (or
     "Standby", as Windows calls it). When you wake your computer up, the browser should not crash and the animation
     below should still be running without any periods of non-painting of the WebView.</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 Bugs 39295 and 39297</title>
	<meta http-equiv="refresh" content="5">
	<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 combined test for <a href="https://bugs.webkit.org/show_bug.cgi?id=39295">Bug 39295: Crash (preceded by
	assertion) in WKCACFLayerRenderer::setNeedsDisplay when computer wakes from sleep on particular page</a> and <a
	href="https://bugs.webkit.org/show_bug.cgi?id=39297">Bug 39297: WebView doesn't repaint until page reloads when page
	using hardware acceleration loads just after waking from sleep</a>. To test, put your computer to sleep (or
	"Standby", as Windows calls it). When you wake your computer up, the browser should not crash and the animation
	below should still be running without any periods of non-painting of the WebView.</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>