summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-animations/CSSAnimation-effect.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/CSSAnimation-effect.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/CSSAnimation-effect.tentative.html')
-rw-r--r--testing/web-platform/tests/css/css-animations/CSSAnimation-effect.tentative.html225
1 files changed, 225 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-animations/CSSAnimation-effect.tentative.html b/testing/web-platform/tests/css/css-animations/CSSAnimation-effect.tentative.html
new file mode 100644
index 0000000000..04812d24e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/CSSAnimation-effect.tentative.html
@@ -0,0 +1,225 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSSAnimation.effect</title>
+<meta name="timeout" content="long">
+<!-- TODO: Add a more specific link for this once it is specified. -->
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testcommon.js"></script>
+<style>
+@keyframes anim {
+ from {
+ margin-left: 0px;
+ }
+ to {
+ margin-left: 100px;
+ }
+}
+</style>
+<div id="log"></div>
+<script>
+'use strict';
+
+promise_test(async t => {
+ const div = addDiv(t);
+ div.style.animation = 'anim 100s';
+
+ const watcher = new EventWatcher(t, div, [ 'animationend',
+ 'animationcancel' ],
+ fastEventsTimeout);
+ const animation = div.getAnimations()[0];
+ await animation.ready;
+
+ animation.currentTime = 50 * MS_PER_SEC;
+ animation.effect = null;
+ assert_equals(animation.playState, 'finished');
+ assert_equals(getComputedStyle(div).marginLeft, '0px');
+ await watcher.wait_for('animationend');
+}, 'Setting a null effect on a running animation fires an animationend event');
+
+promise_test(async t => {
+ const div = addDiv(t);
+ div.style.animation = 'anim 100s';
+
+ const animation = div.getAnimations()[0];
+ await animation.ready;
+
+ animation.currentTime = 50 * MS_PER_SEC;
+ animation.effect = new KeyframeEffect(div,
+ { left: [ '0px' , '100px'] },
+ 100 * MS_PER_SEC);
+ assert_equals(getComputedStyle(div).marginLeft, '0px');
+ assert_equals(getComputedStyle(div).left, '50px');
+}, 'Replacing an animation\'s effect with an effect that targets a different ' +
+ 'property should update both properties');
+
+promise_test(async t => {
+ const div = addDiv(t);
+ div.style.animation = 'anim 100s';
+
+ const animation = div.getAnimations()[0];
+ await animation.ready;
+
+ animation.currentTime = 50 * MS_PER_SEC;
+ animation.effect = new KeyframeEffect(div,
+ { left: [ '0px' , '100px'] },
+ 20 * MS_PER_SEC);
+ assert_equals(animation.playState, 'finished');
+}, 'Replacing an animation\'s effect with a shorter one that should have ' +
+ 'already finished, the animation finishes immediately');
+
+promise_test(async t => {
+ const div = addDiv(t);
+ div.style.animation = 'anim 100s';
+
+ const animation = div.getAnimations()[0];
+ assert_true(animation.pending);
+
+ animation.effect = new KeyframeEffect(div,
+ { left: [ '0px' , '100px'] },
+ 100 * MS_PER_SEC);
+ assert_true(animation.pending);
+
+ await animation.ready;
+
+ assert_false(animation.pending);
+}, 'A play-pending animation\'s effect whose effect is replaced still exits ' +
+ 'the pending state');
+
+promise_test(async t => {
+ const div1 = addDiv(t);
+ const div2 = addDiv(t);
+
+ const watcher1 = new EventWatcher(t, div1, 'animationstart',
+ fastEventsTimeout);
+ // Watch |div2| as well to ensure it does *not* get events.
+ const watcher2 = new EventWatcher(t, div2, 'animationstart');
+
+ div1.style.animation = 'anim 100s';
+
+ const animation = div1.getAnimations()[0];
+ animation.effect = new KeyframeEffect(div2,
+ { left: [ '0px', '100px' ] },
+ 100 * MS_PER_SEC);
+
+ await watcher1.wait_for('animationstart');
+
+ assert_equals(animation.effect.target, div2);
+
+ // Then wait a couple of frames and check that no event was dispatched.
+ await waitForAnimationFrames(2);
+}, 'CSS animation events are dispatched at the original element even after'
+ + ' setting an effect with a different target element');
+
+promise_test(async t => {
+ const div = addDiv(t);
+ const watcher = new EventWatcher(t, div, [ 'animationstart',
+ 'animationend',
+ 'animationcancel' ],
+ fastEventsTimeout);
+ div.style.animation = 'anim 100s';
+ const animation = div.getAnimations()[0];
+ animation.finish();
+
+ await watcher.wait_for([ 'animationstart', 'animationend' ]);
+ // Set a longer effect
+ animation.effect = new KeyframeEffect(div,
+ { left: [ '0px', '100px' ] },
+ 200 * MS_PER_SEC);
+ await watcher.wait_for('animationstart');
+}, 'After replacing a finished animation\'s effect with a longer one ' +
+ 'it fires an animationstart event');
+
+test(t => {
+ const div = addDiv(t);
+ div.style.animation = 'anim 100s';
+ div.style.animationComposition = 'add';
+ const animation = div.getAnimations()[0];
+ assert_equals(animation.effect.composite, 'add');
+}, 'Setting animation-composition sets the composite property on the effect');
+
+test(t => {
+ const div = addDiv(t);
+
+ // Create custom keyframes so we can tweak them
+ const stylesheet = document.styleSheets[0];
+ const keyframes = '@keyframes anim-custom { to { left: 100px } }';
+ const ruleIndex = stylesheet.insertRule(keyframes, 0);
+ const keyframesRule = stylesheet.cssRules[ruleIndex];
+
+ t.add_cleanup(function() {
+ stylesheet.deleteRule(ruleIndex);
+ });
+
+ div.style.animation = 'anim-custom 100s';
+
+ // Replace the effect
+ const animation = div.getAnimations()[0];
+ animation.effect = new KeyframeEffect(
+ div,
+ { left: '200px' },
+ 200 * MS_PER_SEC
+ );
+
+ // Update the timing properties
+ div.style.animationDuration = '4s';
+ div.style.animationIterationCount = '6';
+ div.style.animationDirection = 'reverse';
+ div.style.animationDelay = '8s';
+ div.style.animationFillMode = 'both';
+ div.style.animationPlayState = 'paused';
+ div.style.animationComposition = 'add';
+
+ // Update the keyframes
+ keyframesRule.deleteRule(0);
+ keyframesRule.appendRule('to { left: 300px }');
+
+ // Check nothing (except the play state) changed
+ assert_equals(
+ animation.effect.getTiming().duration,
+ 200 * MS_PER_SEC,
+ 'duration should be the value set by the API'
+ );
+ assert_equals(
+ animation.effect.getTiming().iterations,
+ 1,
+ 'iterations should be the value set by the API'
+ );
+ assert_equals(
+ animation.effect.getTiming().direction,
+ 'normal',
+ 'direction should be the value set by the API'
+ );
+ assert_equals(
+ animation.effect.getTiming().delay,
+ 0,
+ 'delay should be the value set by the API'
+ );
+ assert_equals(
+ animation.effect.getTiming().fill,
+ 'auto',
+ 'fill should be the value set by the API'
+ );
+ assert_equals(
+ animation.effect.getKeyframes()[0].left,
+ '200px',
+ 'keyframes should be the value set by the API'
+ );
+ assert_equals(
+ animation.effect.composite,
+ 'replace',
+ 'composite should be the value set by the API'
+ );
+
+ // Unlike the other properties animation-play-state maps to the Animation
+ // not the KeyframeEffect so it should be overridden.
+ assert_equals(
+ animation.playState,
+ 'paused',
+ 'play state should be the value set by style'
+ );
+}, 'Replacing the effect of a CSSAnimation causes subsequent changes to'
+ + ' corresponding animation-* properties to be ignored');
+
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-30 00:45:45 +0000