| Index: tools/perf/page_sets/tough_animation_cases/css_animations_staggered_chaining_by_updating_inline_style.html
|
| diff --git a/tools/perf/page_sets/tough_animation_cases/web_animations_staggered_chaining.html b/tools/perf/page_sets/tough_animation_cases/css_animations_staggered_chaining_by_updating_inline_style.html
|
| similarity index 59%
|
| copy from tools/perf/page_sets/tough_animation_cases/web_animations_staggered_chaining.html
|
| copy to tools/perf/page_sets/tough_animation_cases/css_animations_staggered_chaining_by_updating_inline_style.html
|
| index ea725bf8b0fc4bf158cc3be4c61e08f2e34fc059..87662c16d18682d2e0e06278acd2392e44c23101 100644
|
| --- a/tools/perf/page_sets/tough_animation_cases/web_animations_staggered_chaining.html
|
| +++ b/tools/perf/page_sets/tough_animation_cases/css_animations_staggered_chaining_by_updating_inline_style.html
|
| @@ -1,8 +1,8 @@
|
| <!DOCTYPE html>
|
| <meta name="viewport" content="width=device-width, user-scalable=no">
|
| +<link rel="stylesheet" type="text/css" href="resources/animation.css">
|
| <link rel="stylesheet" type="text/css" href="resources/tablet.css">
|
| <script src="resources/perftesthelper.js"></script>
|
| -<script src="resources/web_animations_api_check.js"></script>
|
|
|
| <container id="container"></container>
|
|
|
| @@ -10,36 +10,30 @@
|
| var N = PerfTestHelper.getN(1000);
|
| var duration = 1000;
|
|
|
| -function startAnimation(element) {
|
| - var player = element.animate([
|
| - {opacity: 0},
|
| - {opacity: 1},
|
| - ], duration);
|
| - player.onfinish = function() {
|
| - startAnimation(element);
|
| - }
|
| -}
|
| -
|
| -function addElement() {
|
| +function startAnimation() {
|
| var target = document.createElement('target');
|
| + target.i = 0;
|
| container.appendChild(target);
|
| - startAnimation(target);
|
| + target.addEventListener('webkitAnimationEnd', function(e) {
|
| + e.target.style.webkitAnimationName = ((e.target.i++) % 2 ? '' : 'reverse-') + 'anim';
|
| + });
|
| }
|
|
|
| requestAnimationFrame(function(t) {
|
| var base = t;
|
| var i = 0;
|
|
|
| - requestAnimationFrame(function staggeredStart(t) {
|
| + function staggeredStart(t) {
|
| elapsed = t - base;
|
| - for (; i < N * Math.min(1, elapsed / duration); i++) {
|
| - addElement();
|
| + for (; i < N * elapsed / duration; i++) {
|
| + startAnimation();
|
| }
|
| if (i < N) {
|
| requestAnimationFrame(staggeredStart);
|
| } else {
|
| PerfTestHelper.signalReady();
|
| }
|
| - });
|
| + }
|
| + requestAnimationFrame(staggeredStart);
|
| });
|
| </script>
|
|
|
Chromium Code Reviews
Issue 665833002:
Add CSS Animations performance tests (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master