summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/scroll-animations/scroll-timelines/scroll-animation-inactive-timeline.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/scroll-animations/scroll-timelines/scroll-animation-inactive-timeline.html')
-rw-r--r--testing/web-platform/tests/scroll-animations/scroll-timelines/scroll-animation-inactive-timeline.html170
1 files changed, 170 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/scroll-timelines/scroll-animation-inactive-timeline.html b/testing/web-platform/tests/scroll-animations/scroll-timelines/scroll-animation-inactive-timeline.html
new file mode 100644
index 0000000000..236452eead
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/scroll-timelines/scroll-animation-inactive-timeline.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test basic functionality of scroll linked animation.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="testcommon.js"></script>
+<style>
+ .scroller {
+ overflow: auto;
+ height: 100px;
+ width: 100px;
+ will-change: transform;
+ }
+
+ .contents {
+ height: 1000px;
+ width: 100%;
+ }
+</style>
+<div id="log"></div>
+<script>
+'use strict';
+
+promise_test(async t => {
+ const animation = createScrollLinkedAnimation(t);
+ const scroller = animation.timeline.source;
+
+ // Ensure we have a valid animation frame time before continuing the test.
+ // This is so that we can properly determine frame advancement after the
+ // style change.
+ await waitForNextFrame();
+
+ // Make the scroll timeline inactive.
+ scroller.style.overflow = 'visible';
+ // Wait for new animation frame which allows the timeline to compute new
+ // current time.
+ await waitForNextFrame();
+ assert_equals(animation.timeline.currentTime, null,
+ 'Sanity check the timeline is inactive.');
+ // Play the animation when the timeline is inactive.
+ animation.play();
+ assert_equals(animation.currentTime, null,
+ 'The current time is null when the timeline is inactive.');
+ assert_percents_equal(animation.startTime, 0,
+ 'The start time is zero in Pending state.');
+ await waitForNextFrame();
+ assert_true(animation.pending,
+ 'Animation has play pending task while timeline is inactive.');
+ assert_equals(animation.playState, 'running',
+ `State is 'running' in Pending state.`);
+}, `Play pending task doesn't run when the timeline is inactive.`);
+
+promise_test(async t => {
+ const animation = createScrollLinkedAnimation(t);
+ const scroller = animation.timeline.source;
+
+ await waitForNextFrame();
+
+ // Make the scroll timeline inactive.
+ scroller.style.overflow = 'visible';
+ // Wait for new animation frame which allows the timeline to compute new
+ // current time.
+ await waitForNextFrame();
+ assert_equals(animation.timeline.currentTime, null,
+ 'Sanity check the timeline is inactive.');
+ // Play the animation when the timeline is inactive.
+ animation.play();
+
+ // Make the scroll timeline active.
+ scroller.style.overflow = 'auto';
+ await animation.ready;
+ // Ready promise is resolved as a result of the timeline becoming active.
+ assert_percents_equal(animation.currentTime, 0,
+ 'Animation current time is resolved when the animation is ready.');
+ assert_percents_equal(animation.startTime, 0,
+ 'Animation start time is resolved when the animation is ready.');
+}, 'Animation start and current times are correct if scroll timeline is ' +
+ 'activated after animation.play call.');
+
+promise_test(async t => {
+ const animation = createScrollLinkedAnimation(t);
+ const scroller = animation.timeline.source;
+ const target = animation.effect.target;
+
+ await waitForNextFrame();
+
+ // Make the scroll timeline inactive.
+ scroller.style.overflow = 'visible';
+ scroller.scrollTop;
+ // Wait for new animation frame which allows the timeline to compute new
+ // current time.
+ await waitForNextFrame();
+ assert_equals(animation.timeline.currentTime, null,
+ 'Sanity check the timeline is inactive.');
+ // Set start time when the timeline is inactive.
+ animation.startTime = CSSNumericValue.parse("0%");
+ assert_equals(animation.currentTime, null,
+ 'Sanity check current time is unresolved when the timeline ' +
+ 'is inactive.');
+
+ // Make the scroll timeline active.
+ scroller.style.overflow = 'auto';
+ // Wait for new animation frame which allows the timeline to compute new
+ // current time.
+ await waitForNextFrame();
+
+ assert_percents_equal(animation.currentTime, 0,
+ 'Animation current time is resolved when the timeline is active.');
+ assert_percents_equal(animation.startTime, 0,
+ 'Animation start time is resolved.');
+ assert_percents_equal(animation.effect.getComputedTiming().localTime, 0,
+ 'Effect local time is resolved when the timeline is active.');
+ assert_equals(Number(getComputedStyle(target).opacity), 0,
+ 'Animation has an effect when the timeline is active.');
+}, 'Animation start and current times are correct if scroll timeline is ' +
+ 'activated after setting start time.');
+
+promise_test(async t => {
+ const animation = createScrollLinkedAnimation(t);
+ const scroller = animation.timeline.source;
+ const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+ const target = animation.effect.target;
+
+ await waitForNextFrame();
+
+ // Advance the scroller.
+ scroller.scrollTop = 0.2 * maxScroll;
+
+ // Wait for new animation frame which allows the timeline to compute new
+ // current time.
+ await waitForNextFrame();
+ // Play the animation when the timeline is active.
+ animation.play();
+ await animation.ready;
+
+ // Make the scroll timeline inactive.
+ scroller.style.overflow = 'visible';
+ scroller.scrollTop;
+ await waitForNextFrame();
+ assert_equals(animation.timeline.currentTime, null,
+ 'Sanity check the timeline is inactive.');
+ assert_equals(animation.playState, 'running',
+ `State is 'running' when the timeline is inactive.`);
+ assert_equals(animation.currentTime, null,
+ 'Current time is unresolved when the timeline is inactive.');
+ assert_percents_equal(animation.startTime, 0,
+ 'Start time is zero when the timeline is inactive.');
+ assert_equals(animation.effect.getComputedTiming().localTime, null,
+ 'Effect local time is null when the timeline is inactive.');
+ assert_equals(Number(getComputedStyle(target).opacity), 1,
+ 'Animation does not have an effect when the timeline is inactive.');
+
+ // Make the scroll timeline active.
+ scroller.style.overflow = 'auto';
+ await waitForNextFrame();
+
+ assert_equals(animation.playState, 'running',
+ `State is 'running' when the timeline is active.`);
+ assert_percents_equal(animation.currentTime, 20,
+ 'Current time is resolved when the timeline is active.');
+ assert_percents_equal(animation.startTime, 0,
+ 'Start time is zero when the timeline is active.');
+ assert_percents_equal(animation.effect.getComputedTiming().localTime, 20,
+ 'Effect local time is resolved when the timeline is active.');
+ assert_equals(Number(getComputedStyle(target).opacity), 0.2,
+ 'Animation has an effect when the timeline is active.');
+}, 'Animation current time is correct when the timeline becomes newly ' +
+ 'inactive and then active again.');
+</script>