| Index: tools/perf/page_sets/tough_animation_cases/css_animations_staggered_triggering_by_updating_class.html
|
| diff --git a/tools/perf/page_sets/tough_animation_cases/web_animations_staggered_triggering.html b/tools/perf/page_sets/tough_animation_cases/css_animations_staggered_triggering_by_updating_class.html
|
| similarity index 69%
|
| copy from tools/perf/page_sets/tough_animation_cases/web_animations_staggered_triggering.html
|
| copy to tools/perf/page_sets/tough_animation_cases/css_animations_staggered_triggering_by_updating_class.html
|
| index 52946627386247c53cd86dea0d3dc7535bbe3fa8..f3618c4e3a6b909fe290a4e64addec94e92edf83 100644
|
| --- a/tools/perf/page_sets/tough_animation_cases/web_animations_staggered_triggering.html
|
| +++ b/tools/perf/page_sets/tough_animation_cases/css_animations_staggered_triggering_by_updating_class.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>
|
|
|
| @@ -12,21 +12,20 @@ var duration = 1000;
|
|
|
| var targets = [];
|
| function startAnimation(i) {
|
| - if (!targets[i]) {
|
| - targets[i] = document.createElement('target');
|
| - container.appendChild(targets[i]);
|
| + if (targets[i]) {
|
| + targets[i].classList.toggle('reverse');
|
| + return;
|
| }
|
| - targets[i].animate([
|
| - {opacity: 0},
|
| - {opacity: 1},
|
| - ], duration);
|
| + var target = document.createElement('target');
|
| + container.appendChild(target);
|
| + targets[i] = target;
|
| }
|
|
|
| requestAnimationFrame(function(t) {
|
| var base = t;
|
| var i = 0;
|
|
|
| - requestAnimationFrame(function staggeredStart(t) {
|
| + function staggeredStart(t) {
|
| var elapsed = t - base;
|
| for (; i < N && i < N * elapsed / duration; i++) {
|
| startAnimation(i);
|
| @@ -38,6 +37,7 @@ requestAnimationFrame(function(t) {
|
| elapsed = 0;
|
| }
|
| requestAnimationFrame(staggeredStart);
|
| - });
|
| + }
|
| + requestAnimationFrame(staggeredStart);
|
| });
|
| </script>
|
|
|