| Index: tools/perf/page_sets/key_power_cases/css-animation.html
|
| diff --git a/tools/perf/page_sets/key_power_cases/css-animation.html b/tools/perf/page_sets/key_power_cases/css-animation.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..d8457ac4ec392548dc2bf2871f0e8ee929e72203
|
| --- /dev/null
|
| +++ b/tools/perf/page_sets/key_power_cases/css-animation.html
|
| @@ -0,0 +1,171 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| + <head>
|
| + <title>CSS Animation Test</title>
|
| + <meta name="viewport" content="initial-scale=0.60, minimum-scale=0.60, maximum-scale=0.60">
|
| + <style type="text/css">
|
| +
|
| + #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>
|
| + <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>
|
|
|
Chromium Code Reviews
Issue 1097463004:
Add key_idle_power_cases for ensuring idle activity on Android (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master