diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/animation/test/doc_simple_animation.html | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/animation/test/doc_simple_animation.html | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/doc_simple_animation.html b/devtools/client/inspector/animation/test/doc_simple_animation.html new file mode 100644 index 0000000000..7e145166fe --- /dev/null +++ b/devtools/client/inspector/animation/test/doc_simple_animation.html @@ -0,0 +1,193 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <style> + @property --ball-color { + syntax: "<color>"; + inherits: true; + initial-value: #f06; + } + + .ball { + width: 80px; + height: 80px; + /* Add a border here to avoid layout warnings in Linux debug builds: Bug 1329784 */ + border: 1px solid transparent; + border-radius: 50%; + background: var(--ball-color); + position: absolute; + } + + .still { + top: 0; + left: 10px; + } + + .animated { + top: 100px; + left: 10px; + + animation: simple-animation 2s infinite alternate; + } + + .multi { + top: 200px; + left: 10px; + + animation: simple-animation 2s infinite alternate, + other-animation 5s infinite alternate; + } + + .delayed { + top: 300px; + left: 10px; + background: rebeccapurple; + + animation: simple-animation 3s 60s 10; + } + + .multi-finite { + top: 400px; + left: 10px; + background: yellow; + + animation: simple-animation 3s, + other-animation 4s; + } + + .short { + top: 500px; + left: 10px; + background: red; + + animation: simple-animation 2s normal; + } + + .long { + top: 600px; + left: 10px; + background: blue; + + animation: simple-animation 120s; + } + + .negative-delay { + top: 700px; + left: 10px; + background: gray; + + animation: simple-animation 15s -10s; + animation-fill-mode: forwards; + } + + .no-compositor { + top: 0; + right: 10px; + background: gold; + + animation: no-compositor 10s cubic-bezier(.57,-0.02,1,.31) forwards; + } + + .compositor-all { + animation: compositor-all 2s infinite; + } + + .compositor-notall { + animation: compositor-notall 2s infinite; + } + + .compositor-warning { + animation: compositor-all 2s infinite; + } + + .warning-observer { + width: 10px; + height: 10px; + background-image: -moz-element(#warning); + } + + .longhand { + animation: longhand 10s infinite; + } + + @keyframes simple-animation { + 100% { + transform: translateX(300px); + } + } + + @keyframes other-animation { + 100% { + background: blue; + } + } + + @keyframes no-compositor { + 100% { + margin-right: 600px; + } + } + + @keyframes compositor-all { + to { opacity: 0.5 } + } + + @keyframes compositor-notall { + from { + --ball-color: tomato; + opacity: 0; + width: 0px; + transform: translate(0px); + } + to { + --ball-color: gold; + opacity: 1; + width: 100px; + transform: translate(100px); + } + } + + @keyframes longhand { + from { + background: red; + padding: 0 0 0 10px; + } + to { + background: lime; + padding: 0 0 0 20px; + } + } + </style> +</head> +<body> + <!-- Comment node --> + <div class="ball still"></div> + <div class="ball animated"></div> + <div class="ball multi"></div> + <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 end-delay"></div> + <div class="ball compositor-all"></div> + <div class="ball compositor-notall"></div> + <div class="ball compositor-warning" id="warning"></div> + <div class="ball longhand"></div> + <div class="warning-observer"></div> + <script> + /* globals KeyframeEffect, Animation */ + "use strict"; + + const el = document.querySelector(".end-delay"); + const effect = new KeyframeEffect(el, [ + { opacity: 0, offset: 0 }, + { opacity: 1, offset: 1 }, + ], { duration: 1000000, endDelay: 500000, fill: "none" }); + const animation = new Animation(effect, document.timeline); + animation.play(); + </script> +</body> +</html> |