summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/scroll-animations/css/scroll-timeline-dynamic.tentative.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/scroll-timeline-dynamic.tentative.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/scroll-timeline-dynamic.tentative.html')
-rw-r--r--testing/web-platform/tests/scroll-animations/css/scroll-timeline-dynamic.tentative.html267
1 files changed, 267 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-dynamic.tentative.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-dynamic.tentative.html
new file mode 100644
index 0000000000..d1f143c7c1
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-dynamic.tentative.html
@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="support/testcommon.js"></script>
+<style>
+ main {
+ timeline-scope: --timeline;
+ }
+
+ main > div {
+ overflow: hidden;
+ width: 100px;
+ height: 100px;
+ }
+ main > div > div {
+ height: 200px;
+ }
+ @keyframes expand {
+ from { width: 100px; }
+ to { width: 200px; }
+ }
+ #element {
+ width: 0px;
+ height: 20px;
+ animation-name: expand;
+ /* Some of the tests in this file assume animations attached to the
+ DocumentTimeline are "stopped" without actually being paused.
+ Using 600s + steps(10, end) achieves this for one minute.*/
+ animation-duration: 600s;
+ animation-timing-function: steps(10, end);
+ }
+</style>
+<main id=main>
+ <div id=scroller1 class=scroller>
+ <div></div>
+ </div>
+ <div id=scroller2 class=scroller>
+ <div></div>
+ </div>
+ <div id=container></div>
+</main>
+<script>
+ // Force layout of scrollers.
+ scroller1.offsetTop;
+ scroller2.offsetTop;
+
+ // Note the steps(10, end) timing function and height:100px. (10px scroll
+ // resolution).
+ scroller1.scrollTop = 20;
+ scroller2.scrollTop = 40;
+
+ function insertElement() {
+ let element = document.createElement('div');
+ element.id = 'element';
+ container.append(element);
+ return element;
+ }
+
+ // Runs a test with dynamically added/removed elements or CSS rules.
+ // Each test is instantiated twice: once for the initial style resolve where
+ // the DOM change was effectuated, and once after scrolling.
+ function dynamic_rule_test(func, description) {
+ // assert_width is an async function which verifies that the computed value
+ // of 'width' is as expected.
+ const instantiate = (assert_width, description) => {
+ promise_test(async (t) => {
+ try {
+ await func(t, assert_width);
+ } finally {
+ while (container.firstChild)
+ container.firstChild.remove();
+ main.style = '';
+ scroller1.style = '';
+ scroller2.style = '';
+ }
+ }, description);
+ };
+
+ // Verify that the computed style is as expected after a full frame update
+ // following the rule change took place.
+ instantiate(async (element, expected) => {
+ await waitForCSSScrollTimelineStyle();
+ assert_equals(getComputedStyle(element).width, expected);
+ }, description + ' [immediate]');
+
+ // Verify the computed style after scrolling a bit.
+ instantiate(async (element, expected) => {
+ await waitForNextFrame();
+ scroller1.scrollTop = scroller1.scrollTop + 10;
+ scroller2.scrollTop = scroller2.scrollTop + 10;
+ await waitForNextFrame();
+ scroller1.scrollTop = scroller1.scrollTop - 10;
+ scroller2.scrollTop = scroller2.scrollTop - 10;
+ await waitForNextFrame();
+ assert_equals(getComputedStyle(element).width, expected);
+ }, description + ' [scroll]');
+ }
+
+ dynamic_rule_test(async (t, assert_width) => {
+ let element = insertElement();
+
+ // This element initially has a DocumentTimeline.
+ await assert_width(element, '100px');
+
+ // Switch to scroll timeline.
+ scroller1.style.scrollTimelineName = '--timeline';
+ element.style.animationTimeline = '--timeline';
+ await assert_width(element, '120px');
+
+ // Switching from ScrollTimeline -> DocumentTimeline should preserve
+ // current time.
+ scroller1.style = '';
+ element.style = '';
+ await assert_width(element, '120px');
+ }, 'Switching between document and scroll timelines');
+
+ dynamic_rule_test(async (t, assert_width) => {
+ let element = insertElement();
+
+ // Flush style and create the animation with play pending.
+ getComputedStyle(element).animation;
+
+ let anim = element.getAnimations()[0];
+ assert_true(anim.pending, "The animation is in play pending");
+
+ // Switch to scroll timeline for a pending animation.
+ scroller1.style.scrollTimelineName = '--timeline';
+ element.style.animationTimeline = '--timeline';
+
+ await anim.ready;
+ assert_false(anim.pending, "The animation is not pending");
+
+ await assert_width(element, '120px');
+ }, 'Switching pending animation from document to scroll timelines');
+
+ dynamic_rule_test(async (t, assert_width) => {
+ let element = insertElement();
+
+ // Note: #scroller1 is at 20%, and #scroller2 is at 40%.
+ scroller1.style.scrollTimelineName = '--timeline1';
+ scroller2.style.scrollTimelineName = '--timeline2';
+ main.style.timelineScope = "--timeline1, --timeline2";
+
+ await assert_width(element, '100px');
+
+ element.style.animationTimeline = '--timeline1';
+ await assert_width(element, '120px');
+
+ element.style.animationTimeline = '--timeline2';
+ await assert_width(element, '140px');
+
+ element.style.animationTimeline = '--timeline1';
+ await assert_width(element, '120px');
+
+ // Switching from ScrollTimeline -> DocumentTimeline should preserve
+ // current time.
+ element.style.animationTimeline = '';
+ await assert_width(element, '120px');
+
+ }, 'Changing computed value of animation-timeline changes effective timeline');
+
+ dynamic_rule_test(async (t, assert_width) => {
+ let element = insertElement();
+
+ scroller1.style.scrollTimelineName = '--timeline';
+
+ // DocumentTimeline applies by default.
+ await assert_width(element, '100px');
+
+ // Wait for the animation to be ready so that we a start time and no hold
+ // time.
+ await element.getAnimations()[0].ready;
+
+ // DocumentTimeline -> none
+ element.style.animationTimeline = '--none';
+ await assert_width(element, '0px');
+
+ // none -> DocumentTimeline
+ element.style.animationTimeline = '';
+ await assert_width(element, '100px');
+
+ // DocumentTimeline -> ScrollTimeline
+ element.style.animationTimeline = '--timeline';
+ await assert_width(element, '120px');
+
+ // ScrollTimeline -> none
+ element.style.animationTimeline = '--none';
+ await assert_width(element, '120px');
+
+ // none -> ScrollTimeline
+ element.style.animationTimeline = '--timeline';
+ await assert_width(element, '120px');
+ }, 'Changing to/from animation-timeline:none');
+
+
+ dynamic_rule_test(async (t, assert_width) => {
+ let element = insertElement();
+
+ element.style.animationDirection = 'reverse';
+ element.style.animationTimeline = '--timeline';
+
+ // Inactive animation-timeline. Animation is inactive.
+ await assert_width(element, '0px');
+
+ // Note: #scroller1 is at 20%.
+ scroller1.style.scrollTimelineName = '--timeline';
+ await assert_width(element, '180px');
+
+ // Note: #scroller2 is at 40%.
+ scroller1.style.scrollTimelineName = '';
+ scroller2.style.scrollTimelineName = '--timeline';
+ await assert_width(element, '160px');
+
+ element.style.animationDirection = '';
+ await assert_width(element, '140px');
+ }, 'Reverse animation direction');
+
+ dynamic_rule_test(async (t, assert_width) => {
+ let element = insertElement();
+ element.style.animationTimeline = '--timeline';
+
+ // Inactive animation-timeline. Animation effect is inactive.
+ await assert_width(element, '0px');
+
+ // Note: #scroller1 is at 20%.
+ scroller1.style.scrollTimelineName = '--timeline';
+ await assert_width(element, '120px');
+
+ element.style.animationPlayState = 'paused';
+
+ // We should still be at the same position after pausing.
+ await assert_width(element, '120px');
+
+ // Note: #scroller2 is at 40%.
+ scroller1.style.scrollTimelineName = '';
+ scroller2.style.scrollTimelineName = '--timeline';
+
+ // Should be at the same position until we unpause.
+ await assert_width(element, '120px');
+
+ // Unpausing should synchronize to the scroll position.
+ element.style.animationPlayState = '';
+ await assert_width(element, '140px');
+ }, 'Change to timeline attachment while paused');
+
+ dynamic_rule_test(async (t, assert_width) => {
+ let element = insertElement();
+
+ // Note: #scroller1 is at 20%.
+ scroller1.style.scrollTimelineName = '--timeline';
+
+ await assert_width(element, '100px');
+
+ element.style.animationTimeline = '--timeline';
+ element.style.animationPlayState = 'paused';
+
+ // Pausing should happen before the timeline is modified. (Tentative).
+ // https://github.com/w3c/csswg-drafts/issues/5653
+ await assert_width(element, '100px');
+
+ element.style.animationPlayState = 'running';
+ await assert_width(element, '120px');
+ }, 'Switching timelines and pausing at the same time');
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2024-10-18 16:02:49 +0000