summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.html
parentInitial commit. (diff)
downloadfirefox-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 'testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.html')
-rw-r--r--testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.html56
1 files changed, 56 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.html b/testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.html
new file mode 100644
index 0000000000..bbc60e3fbd
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>CSS Animation using progress based timeline</title>
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-timeline">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<style>
+ main > div {
+ overflow: hidden;
+ width: 100px;
+ height: 100px;
+ }
+ main > div > div {
+ height: 200px;
+ }
+
+ @keyframes top {
+ from { top: 100px; }
+ to { top: 200px; }
+ }
+
+ #scroller1 {
+ scroll-timeline: --top_timeline;
+ }
+
+ #element {
+ animation-name: top;
+ animation-duration: 10s;
+ animation-timing-function: linear;
+ animation-timeline: --top_timeline;
+ position: absolute;
+ }
+ /* Ensure stable expectations if feature is not supported */
+ @supports not (animation-timeline:--foo) {
+ #element { animation-play-state: paused; }
+ }
+</style>
+<main>
+ <div id=scroller1>
+ <div></div>
+ <div id=element></div>
+ </div>
+</main>
+<script>
+ window.onload = async () => {
+ promise_test(async (t) => {
+ await waitForNextFrame();
+ const anim = document.getAnimations()[0];
+ await anim.ready;
+ scroller1.scrollTop = 20;
+ await waitForNextFrame();
+ assert_equals(getComputedStyle(element).top, '120px');
+ }, 'progress based animation timeline works');
+ };
+</script>