| Index: tools/perf/page_sets/tough_animation_cases/css_animations_staggered_triggering_by_inserting_style_element.html
|
| diff --git a/tools/perf/page_sets/tough_animation_cases/css_transitions_staggered_triggering_by_inserting_style.html b/tools/perf/page_sets/tough_animation_cases/css_animations_staggered_triggering_by_inserting_style_element.html
|
| similarity index 65%
|
| copy from tools/perf/page_sets/tough_animation_cases/css_transitions_staggered_triggering_by_inserting_style.html
|
| copy to tools/perf/page_sets/tough_animation_cases/css_animations_staggered_triggering_by_inserting_style_element.html
|
| index 8f0ee54ccea331bd1423e1ddbfd8efb9fb9733e1..43ec540b76c250e0f73f545669b3ace472814963 100644
|
| --- a/tools/perf/page_sets/tough_animation_cases/css_transitions_staggered_triggering_by_inserting_style.html
|
| +++ b/tools/perf/page_sets/tough_animation_cases/css_animations_staggered_triggering_by_inserting_style_element.html
|
| @@ -1,8 +1,12 @@
|
| <!DOCTYPE html>
|
| <meta name="viewport" content="width=device-width, user-scalable=no">
|
| <link rel="stylesheet" type="text/css" href="resources/tablet.css">
|
| -<link rel="stylesheet" type="text/css" href="resources/transition.css">
|
| <script src="resources/perftesthelper.js"></script>
|
| +<style>
|
| +target {
|
| + -webkit-animation: 1000ms linear;
|
| +}
|
| +</style>
|
|
|
| <container id="container"></container>
|
|
|
| @@ -11,16 +15,14 @@ var N = PerfTestHelper.getN(1000);
|
| var duration = 1000;
|
| var targets = [];
|
| var styles = [];
|
| -var keyframeValues = [0, 1];
|
|
|
| for (var i = 0; i < N; i++) {
|
| var target = document.createElement('target');
|
| - target._keyframe = 0;
|
| container.appendChild(target);
|
| targets.push(target);
|
| }
|
|
|
| -function addNewClassStyle(step) {
|
| +function addNewAnimationStyle(step) {
|
| // Clean up overwritten styles.
|
| var i = 0;
|
| for (; i < styles.length && styles[i].lastStep < step; i++) {
|
| @@ -29,24 +31,22 @@ function addNewClassStyle(step) {
|
| styles.splice(0, i);
|
|
|
| var style = document.createElement('style');
|
| - var className = 'style' + step + 'keyframe';
|
| - style.textContent = '.' + className + '0 { opacity: ' + keyframeValues[0] + '; }\n';
|
| - style.textContent += '.' + className + '1 { opacity: ' + keyframeValues[1] + '; }\n';
|
| + var animationName = 'anim' + step;
|
| + style.textContent = '@-webkit-keyframes ' + animationName + ' { 0% { opacity: 0; } 100% { opacity: 1; } }';
|
| container.appendChild(style);
|
| styles.push({
|
| style: style,
|
| lastStep: step + N,
|
| });
|
|
|
| - return className;
|
| + return animationName;
|
| }
|
|
|
| -function startTransitions(startingTargets, startStep, endStep) {
|
| - var newClassName = addNewClassStyle(startStep, endStep);
|
| +function startAnimations(startingTargets, startStep, endStep) {
|
| + var newAnimationName = addNewAnimationStyle(startStep, endStep);
|
| startingTargets.forEach(function(startInfo) {
|
| - startInfo.target._keyframe ^= 1;
|
| - startInfo.target.className = newClassName + startInfo.target._keyframe;
|
| - startInfo.target.style.transitionDelay = -startInfo.fastForward + 'ms';
|
| + startInfo.target.style.animationName = newAnimationName;
|
| + startInfo.target.style.animationDelay = -startInfo.fastForward + 'ms';
|
| });
|
| }
|
|
|
| @@ -65,12 +65,12 @@ requestAnimationFrame(function(time) {
|
| fastForward: elapsed - stepStartTime,
|
| });
|
| }
|
| - startTransitions(restartingTargets, targetStep);
|
| + startAnimations(restartingTargets, targetStep);
|
| previousStep = targetStep;
|
| requestAnimationFrame(staggeredStart);
|
| }
|
| staggeredStart(time);
|
| -});
|
|
|
| -PerfTestHelper.signalReady();
|
| + PerfTestHelper.signalReady();
|
| +});
|
| </script>
|
|
|
Chromium Code Reviews
Issue 666723003:
Add CSS Animations performance tests - trybot-android-nexus5 (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master