summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-animations/Element-getAnimations-dynamic-changes.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/css/css-animations/Element-getAnimations-dynamic-changes.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/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html')
-rw-r--r--testing/web-platform/tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html163
1 files changed, 163 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html b/testing/web-platform/tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html
new file mode 100644
index 0000000000..a5e2288427
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>
+Element.getAnimations() - Dynamic changes to the list of CSS animations
+</title>
+<!-- TODO: Add a more specific link for this once it is specified. -->
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testcommon.js"></script>
+<style>
+@keyframes anim1 {
+ to { left: 100px }
+}
+@keyframes anim2 { }
+</style>
+<div id="log"></div>
+<script>
+'use strict';
+
+promise_test(async t => {
+ const div = addDiv(t);
+ div.style.animation = 'anim1 100s';
+ const originalAnimation = div.getAnimations()[0];
+
+ // Wait a moment so we can confirm the startTime doesn't change (and doesn't
+ // simply reflect the current time).
+ await originalAnimation.ready;
+
+ const originalStartTime = originalAnimation.startTime;
+ const originalCurrentTime = originalAnimation.currentTime;
+
+ // Wait a moment so we can confirm the startTime doesn't change (and
+ // doesn't simply reflect the current time).
+ await waitForNextFrame();
+
+ div.style.animationDuration = '200s';
+ const animation = div.getAnimations()[0];
+ assert_equals(animation, originalAnimation,
+ 'The same Animation is returned after updating'
+ + ' animation duration');
+ assert_equals(animation.startTime, originalStartTime,
+ 'Animations returned by getAnimations preserve'
+ + ' their startTime even when they are updated');
+ // Sanity check
+ assert_not_equals(animation.currentTime, originalCurrentTime,
+ 'Animation.currentTime has updated in next'
+ + ' requestAnimationFrame callback');
+}, 'Animations preserve their startTime when changed');
+
+test(t => {
+ const div = addDiv(t);
+ div.style.animation = 'anim1 100s, anim1 100s';
+
+ // Store original state
+ let animations = div.getAnimations();
+ const animation1 = animations[0];
+ const animation2 = animations[1];
+
+ // Update first in list
+ div.style.animationDuration = '200s, 100s';
+ animations = div.getAnimations();
+ assert_equals(animations[0], animation1,
+ 'First Animation is in same position after update');
+ assert_equals(animations[1], animation2,
+ 'Second Animation is in same position after update');
+}, 'Updated Animations maintain their order in the list');
+
+promise_test(async t => {
+ const div = addDiv(t);
+ div.style.animation = 'anim1 200s, anim1 100s';
+
+ // Store original state
+ let animations = div.getAnimations();
+ const animation1 = animations[0];
+ const animation2 = animations[1];
+
+ // Wait before continuing so we can compare start times (otherwise the
+ // new Animation objects and existing Animation objects will all have the same
+ // start time).
+ await waitForAllAnimations(animations);
+ await waitForFrame();
+
+ // Swap duration of first and second in list and prepend animation at the
+ // same time
+ div.style.animation = 'anim1 100s, anim1 100s, anim1 200s';
+ animations = div.getAnimations();
+ assert_true(animations[0] !== animation1 && animations[0] !== animation2,
+ 'New Animation is prepended to start of list');
+ assert_equals(animations[1], animation1,
+ 'First animation is in second position after update');
+ assert_equals(animations[2], animation2,
+ 'Second animation is in third position after update');
+ assert_equals(animations[1].startTime, animations[2].startTime,
+ 'Old animations have the same start time');
+ assert_equals(animations[0].startTime, null,
+ 'New animation has a null start time');
+
+ await animations[0].ready;
+
+ assert_greater_than(animations[0].startTime, animations[1].startTime,
+ 'New animation has later start time');
+}, 'Only the startTimes of existing animations are preserved');
+
+promise_test(async t => {
+ const div = addDiv(t);
+ div.style.animation = 'anim1 100s, anim1 100s';
+ const secondAnimation = div.getAnimations()[1];
+
+ // Wait before continuing so we can compare start times
+ await secondAnimation.ready;
+ await waitForNextFrame();
+
+ // Trim list of animations
+ div.style.animationName = 'anim1';
+ const animations = div.getAnimations();
+ assert_equals(animations.length, 1, 'List of Animations was trimmed');
+ assert_equals(animations[0], secondAnimation,
+ 'Remaining Animation is the second one in the list');
+ assert_equals(typeof(animations[0].startTime), 'number',
+ 'Remaining Animation has resolved startTime');
+ assert_less_than(animations[0].startTime,
+ animations[0].timeline.currentTime,
+ 'Remaining Animation preserves startTime');
+}, 'Animations are removed from the start of the list while preserving'
+ + ' the state of existing Animations');
+
+promise_test(async t => {
+ const div = addDiv(t);
+ div.style.animation = 'anim1 100s';
+ const firstAddedAnimation = div.getAnimations()[0];
+
+ // Wait and add second Animation
+ await firstAddedAnimation.ready;
+ await waitForFrame();
+
+ div.style.animation = 'anim1 100s, anim1 100s';
+ const secondAddedAnimation = div.getAnimations()[0];
+
+ // Wait again and add another Animation
+ await secondAddedAnimation.ready;
+ await waitForFrame();
+
+ div.style.animation = 'anim1 100s, anim2 100s, anim1 100s';
+ const animations = div.getAnimations();
+ assert_not_equals(firstAddedAnimation, secondAddedAnimation,
+ 'New Animations are added to start of the list');
+ assert_equals(animations[0], secondAddedAnimation,
+ 'Second Animation remains in same position after'
+ + ' interleaving');
+ assert_equals(animations[2], firstAddedAnimation,
+ 'First Animation remains in same position after'
+ + ' interleaving');
+ await animations[1].ready;
+
+ assert_greater_than(animations[1].startTime, animations[0].startTime,
+ 'Interleaved animation starts later than existing ' +
+ 'animations');
+ assert_greater_than(animations[0].startTime, animations[2].startTime,
+ 'Original animations retain their start time');
+}, 'Animation state is preserved when interleaving animations in list');
+
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-04 21:51:26 +0000