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> |