diff options
Diffstat (limited to 'devtools/client/inspector/animation/test/doc_negative_playback_rate.html')
-rw-r--r-- | devtools/client/inspector/animation/test/doc_negative_playback_rate.html | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/doc_negative_playback_rate.html b/devtools/client/inspector/animation/test/doc_negative_playback_rate.html new file mode 100644 index 0000000000..a98700712d --- /dev/null +++ b/devtools/client/inspector/animation/test/doc_negative_playback_rate.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <style> + div { + background-color: lime; + height: 100px; + } + </style> + </head> + <body> + <script> + "use strict"; + + const DURATION = 100000; + const KEYFRAMES = { backgroundColor: ["lime", "red"] }; + + function createAnimation(effect, className, playbackRate = -1) { + const div = document.createElement("div"); + div.classList.add(className); + document.body.appendChild(div); + effect.duration = DURATION; + effect.fill = "forwards"; + const animation = div.animate(KEYFRAMES, effect); + animation.updatePlaybackRate(playbackRate); + animation.play(); + } + + createAnimation({}, "normal"); + createAnimation({}, "normal-playbackrate-2", -2); + createAnimation({ delay: 50000 }, "positive-delay"); + createAnimation({ delay: -50000 }, "negative-delay"); + createAnimation({ endDelay: 50000 }, "positive-end-delay"); + createAnimation({ endDelay: -50000 }, "negative-end-delay"); + </script> + </body> +</html> |