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