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 /testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.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 '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.html | 56 |
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> |