184 lines
5.3 KiB
HTML
184 lines
5.3 KiB
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>
|