Bug 1261651 - Avoid using element.animate() in tests - Use Animation constructor isntead; r=miker
MozReview-Commit-ID: Az9jBcW54j8
--- a/devtools/client/animationinspector/test/doc_end_delay.html
+++ b/devtools/client/animationinspector/test/doc_end_delay.html
@@ -11,50 +11,59 @@
</style>
</head>
<body>
<div id="target1" class="target"></div>
<div id="target2" class="target"></div>
<div id="target3" class="target"></div>
<div id="target4" class="target"></div>
<script>
+ /* globals KeyframeEffect, Animation */
"use strict";
- var el = document.getElementById("target1");
- el.animate(
- { opacity: [ 0, 1 ] },
- { id: "endDelay_animation1",
+ let animations = [{
+ id: "target1",
+ frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+ timing: {
+ id: "endDelay_animation1",
duration: 1000000,
endDelay: 500000,
- fill: "none" }
- );
-
- el = document.getElementById("target2");
- el.animate(
- { opacity: [ 0, 1 ] },
- { id: "endDelay_animation2",
+ fill: "none"
+ }
+ }, {
+ id: "target2",
+ frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+ timing: {
+ id: "endDelay_animation2",
duration: 1000000,
endDelay: -500000,
- fill: "none" }
- );
-
- el = document.getElementById("target3");
- el.animate(
- { opacity: [ 0, 1 ] },
- { id: "endDelay_animation3",
+ fill: "none"
+ }
+ }, {
+ id: "target3",
+ frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+ timing: {
+ id: "endDelay_animation3",
duration: 1000000,
endDelay: -1500000,
- fill: "forwards" }
- );
-
- el = document.getElementById("target4");
- el.animate(
- { opacity: [ 0, 1 ] },
- { id: "endDelay_animation4",
+ fill: "forwards"
+ }
+ }, {
+ id: "target4",
+ frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+ timing: {
+ id: "endDelay_animation4",
duration: 100000,
delay: 100000,
endDelay: -1500000,
- fill: "forwards" }
- );
+ fill: "forwards"
+ }
+ }];
+ for (let {id, frames, timing} of animations) {
+ let effect = new KeyframeEffect(document.getElementById(id),
+ frames, timing);
+ let animation = new Animation(effect, document.timeline);
+ animation.play();
+ }
</script>
</body>
</html>
--- a/devtools/client/animationinspector/test/doc_multiple_animation_types.html
+++ b/devtools/client/animationinspector/test/doc_multiple_animation_types.html
@@ -37,24 +37,25 @@
</style>
</head>
<body>
<div class="ball script-animation"></div>
<div class="ball css-animation"></div>
<div class="ball css-transition"></div>
<script>
+ /* globals KeyframeEffect, Animation */
"use strict";
setTimeout(function() {
document.querySelector(".css-transition").style.backgroundColor = "yellow";
}, 0);
- document.querySelector(".script-animation").animate([
- {opacity: 1, offset: 0},
- {opacity: .1, offset: 1}
- ], {
- duration: 10000,
- fill: "forwards"
- });
+ let effect = new KeyframeEffect(
+ document.querySelector(".script-animation"), [
+ {opacity: 1, offset: 0},
+ {opacity: .1, offset: 1}
+ ], { duration: 10000, fill: "forwards" });
+ let animation = new Animation(effect, document.timeline);
+ animation.play();
</script>
</body>
</html>
--- a/devtools/client/animationinspector/test/doc_script_animation.html
+++ b/devtools/client/animationinspector/test/doc_script_animation.html
@@ -23,33 +23,49 @@
</style>
</head>
<body>
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>
<script>
+ /* globals KeyframeEffect, Animation */
"use strict";
- document.getElementById("target1").animate([{ opacity: 0 }, { opacity: 1 }],
- { duration: 100,
- iterations: 2,
- iterationStart: 0.25,
- fill: "both" }
- );
+ let animations = [{
+ id: "target1",
+ frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+ timing: {
+ duration: 100,
+ iterations: 2,
+ iterationStart: 0.25,
+ fill: "both"
+ }
+ }, {
+ id: "target2",
+ frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+ timing: {
+ duration: 100,
+ iterations: 1,
+ iterationStart: 0.25,
+ fill: "both"
+ }
+ }, {
+ id: "target3",
+ frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
+ timing: {
+ duration: 100,
+ iterations: 1.5,
+ iterationStart: 2.5,
+ fill: "both"
+ }
+ }];
- document.getElementById("target2").animate([{ opacity: 0 }, { opacity: 1 }],
- { duration: 100,
- iterations: 1,
- iterationStart: 0.25,
- fill: "both" }
- );
-
- document.getElementById("target3").animate([{ opacity: 0 }, { opacity: 1 }],
- { duration: 100,
- iterations: 1.5,
- iterationStart: 2.5,
- fill: "both" }
- );
+ for (let {id, frames, timing} of animations) {
+ let effect = new KeyframeEffect(document.getElementById(id),
+ frames, timing);
+ let animation = new Animation(effect, document.timeline);
+ animation.play();
+ }
</script>
</body>
</html>
--- a/devtools/client/animationinspector/test/doc_simple_animation.html
+++ b/devtools/client/animationinspector/test/doc_simple_animation.html
@@ -109,20 +109,21 @@
<div class="ball delayed"></div>
<div class="ball multi-finite"></div>
<div class="ball short"></div>
<div class="ball long"></div>
<div class="ball negative-delay"></div>
<div class="ball no-compositor"></div>
<div class="ball" id="endDelayed"></div>
<script>
+ /* globals KeyframeEffect, Animation */
"use strict";
var el = document.getElementById("endDelayed");
- el.animate(
- { opacity: [ 0, 1 ] },
- { duration: 1000000,
- endDelay: 500000,
- fill: "none" }
- );
+ let effect = new KeyframeEffect(el, [
+ { opacity: 0, offset: 0 },
+ { opacity: 1, offset: 1 }
+ ], { duration: 1000000, endDelay: 500000, fill: "none" });
+ let animation = new Animation(effect, document.timeline);
+ animation.play();
</script>
</body>
</html>