diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/scroll-animations/css/scroll-timeline-paused-animations.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/scroll-animations/css/scroll-timeline-paused-animations.html')
| -rw-r--r-- | testing/web-platform/tests/scroll-animations/css/scroll-timeline-paused-animations.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-paused-animations.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-paused-animations.html new file mode 100644 index 0000000000..54518a5e87 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-paused-animations.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Scroll timeline with paused animations</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<link rel="help" href="https://drafts.csswg.org/css-animations/#animation-play-state"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/scroll-animations/scroll-timelines/testcommon.js"></script> +<script src="/css/css-animations/support/testcommon.js"></script> +<script src="support/testcommon.js"></script> +<style> + @keyframes anim { + from { width: 100px; } + to { width: 200px; } + } + + .fill-vh { + width: 100px; + height: 100vh; + } +</style> +<body> +<div id="log"></div> +<script> +'use strict'; + +setup(assert_implements_animation_timeline); + +async function resetScrollPosition() { + // Reset to 0 so we don't affect following tests. + document.scrollingElement.scrollTop = 0; + return waitForNextFrame(); +} + +promise_test(async t => { + const div = addDiv(t, { style: 'width: 50px; height: 100px;' }); + const filling = addDiv(t, { class: 'fill-vh' }); + const scroller = document.scrollingElement; + t.add_cleanup(resetScrollPosition); + + div.style.animation = 'anim 100s linear paused'; + div.style.animationTimeline = 'scroll(root)'; + await waitForCSSScrollTimelineStyle(); + + const anim = div.getAnimations()[0]; + await anim.ready; + assert_percents_equal(anim.currentTime, 0, 'timeline time reset'); + assert_equals(getComputedStyle(div).width, '100px'); + + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = maxScroll; + await waitForNextFrame(); + assert_equals(getComputedStyle(div).width, '100px'); + +}, 'Test that the scroll animation is paused'); + +promise_test(async t => { + const div = addDiv(t, { style: 'width: 50px; height: 100px;' }); + const filling = addDiv(t, { class: 'fill-vh' }); + const scroller = document.scrollingElement; + await waitForNextFrame(); + + div.style.animation = 'anim 100s linear forwards'; + div.style.animationTimeline = 'scroll(root)'; + await waitForCSSScrollTimelineStyle(); + + const anim = div.getAnimations()[0]; + await anim.ready; + assert_percents_equal(anim.currentTime, 0, 'timeline time reset'); + assert_equals(getComputedStyle(div).width, '100px'); + + await waitForNextFrame(); + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = maxScroll; + await waitForNextFrame(); + assert_equals(getComputedStyle(div).width, '200px'); + + div.style.animationPlayState = 'paused'; + assert_equals(anim.playState, 'paused'); + assert_equals(getComputedStyle(div).width, '200px', + 'Current time preserved when pause-pending.'); + assert_true(anim.pending, + 'Pending state after changing animationPlayState'); + await anim.ready; + assert_equals(getComputedStyle(div).width, '200px', + 'Current time preserved when paused.'); + assert_percents_equal(anim.timeline.currentTime, 100); + document.scrollingElement.scrollTop = 0; + await waitForNextFrame(); + assert_percents_equal(anim.timeline.currentTime, 0); + assert_equals(getComputedStyle(div).width, '200px'); +}, 'Test that the scroll animation is paused by updating animation-play-state'); + +</script> +</body> |