diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /devtools/client/inspector/animation/test/doc_multi_timings.html | |
parent | Initial commit. (diff) | |
download | thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/animation/test/doc_multi_timings.html | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/doc_multi_timings.html b/devtools/client/inspector/animation/test/doc_multi_timings.html new file mode 100644 index 0000000000..a999431917 --- /dev/null +++ b/devtools/client/inspector/animation/test/doc_multi_timings.html @@ -0,0 +1,169 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <style> + div { + background-color: lime; + height: 100px; + width: 100px; + } + + .cssanimation-normal { + animation: cssanimation 1000s; + } + + .cssanimation-linear { + animation: cssanimation 1000s linear; + } + + @keyframes cssanimation { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + </style> + </head> + <body> + <div class="cssanimation-normal"></div> + <div class="cssanimation-linear"></div> + <script> + "use strict"; + + const duration = 1000000; + + function createAnimation(keyframes, effect, className) { + const div = document.createElement("div"); + div.classList.add(className); + document.body.appendChild(div); + effect.duration = duration; + div.animate(keyframes, effect); + } + + createAnimation({ opacity: [0, 1] }, + { delay: 500000, id: "test-delay-animation" }, + "delay-positive"); + + createAnimation({ opacity: [0, 1] }, + { delay: -500000, id: "test-negative-delay-animation" }, + "delay-negative"); + + createAnimation({ opacity: [0, 1] }, + { easing: "steps(2)" }, + "easing-step"); + + createAnimation({ opacity: [0, 1] }, + { endDelay: 500000 }, + "enddelay-positive"); + + createAnimation({ opacity: [0, 1] }, + { endDelay: -500000 }, + "enddelay-negative"); + + createAnimation({ opacity: [0, 1] }, + { endDelay: 500000, fill: "forwards" }, + "enddelay-with-fill-forwards"); + + createAnimation({ opacity: [0, 1] }, + { endDelay: 500000, iterations: Infinity }, + "enddelay-with-iterations-infinity"); + + createAnimation({ opacity: [0, 1] }, + { direction: "alternate", iterations: Infinity }, + "direction-alternate-with-iterations-infinity"); + + createAnimation({ opacity: [0, 1] }, + { direction: "alternate-reverse", iterations: Infinity }, + "direction-alternate-reverse-with-iterations-infinity"); + + createAnimation({ opacity: [0, 1] }, + { direction: "reverse", iterations: Infinity }, + "direction-reverse-with-iterations-infinity"); + + createAnimation({ opacity: [0, 1] }, + { fill: "backwards" }, + "fill-backwards"); + + createAnimation({ opacity: [0, 1] }, + { fill: "backwards", delay: 500000, iterationStart: 0.5 }, + "fill-backwards-with-delay-iterationstart"); + + createAnimation({ opacity: [0, 1] }, + { fill: "both" }, + "fill-both"); + + createAnimation({ opacity: [0, 1] }, + { fill: "both", delay: 500000, iterationStart: 0.5 }, + "fill-both-width-delay-iterationstart"); + + createAnimation({ opacity: [0, 1] }, + { fill: "forwards" }, + "fill-forwards"); + + createAnimation({ opacity: [0, 1] }, + { iterationStart: 0.5 }, + "iterationstart"); + + createAnimation({ width: ["100px", "150px"] }, + {}, + "no-compositor"); + + createAnimation([{ opacity: 0, easing: "steps(2)" }, { opacity: 1 }], + {}, + "keyframes-easing-step"); + + createAnimation( + [ + { + opacity: 0, + offset: 0, + }, + { + opacity: 1, + offset: 0.1, + easing: "steps(1)", + }, + { + opacity: 0, + offset: 0.13, + }, + ], + {}, + "narrow-keyframes"); + + createAnimation( + [ + { + offset: 0, + opacity: 1, + }, + { + offset: 0.5, + opacity: 1, + }, + { + offset: 0.5, + easing: "steps(1)", + opacity: 0, + }, + { + offset: 1, + opacity: 1, + }, + ], + {}, + "duplicate-offsets"); + + createAnimation({ opacity: [0, 1] }, + { delay: -250000 }, + "delay-negative-25"); + + createAnimation({ opacity: [0, 1] }, + { delay: -750000 }, + "delay-negative-75"); + </script> + </body> +</html> |