summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/animation-worklet/worklet-animation-with-fill-mode.https.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/animation-worklet/worklet-animation-with-fill-mode.https.html
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/animation-worklet/worklet-animation-with-fill-mode.https.html')
-rw-r--r--testing/web-platform/tests/animation-worklet/worklet-animation-with-fill-mode.https.html147
1 files changed, 147 insertions, 0 deletions
diff --git a/testing/web-platform/tests/animation-worklet/worklet-animation-with-fill-mode.https.html b/testing/web-platform/tests/animation-worklet/worklet-animation-with-fill-mode.https.html
new file mode 100644
index 0000000000..725d10de43
--- /dev/null
+++ b/testing/web-platform/tests/animation-worklet/worklet-animation-with-fill-mode.https.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<title>Test that worklet animation works with different fill modes</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="common.js"></script>
+
+<style>
+.target {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+}
+</style>
+
+<div id="target" class='target'></div>
+
+<script>
+setup(setupAndRegisterTests, {explicit_done: true});
+
+function setupAndRegisterTests() {
+ registerConstantLocalTimeAnimator(2000).then(() => {
+ promise_test(
+ effect_with_fill_mode_forwards,
+ "Effect with fill mode forwards in after phase produces output that is equivalent to effect's end value.");
+
+ promise_test(
+ effect_without_fill_mode_forwards,
+ 'Effect without fill mode forwards in after phase (local time beyond end) should deactivate the animation.');
+
+ promise_test(
+ effect_without_fill_forwards_at_end,
+ 'Effect without fill mode in after phase (local time at end) should deactivate the animation.');
+
+ promise_test(
+ effect_with_fill_backwards,
+ "Effect with fill mode backwards in before phase produces output that is equivalent to effect's start value.");
+
+ promise_test(
+ effect_without_fill_backwards,
+ 'Effect without fill mode backwards in before phase (local time before start) should deactivate the animation.');
+
+ promise_test(
+ effect_without_fill_backwards_at_start,
+ 'Effect with local time at start point is in active phase.');
+
+ done();
+ });
+}
+
+async function effect_with_fill_mode_forwards(t) {
+ const effect_with_fill_forwards = new KeyframeEffect(
+ target,
+ { opacity: [0.5, 0] },
+ { duration: 1000, fill: 'forwards' });
+ const animation = new WorkletAnimation(
+ 'constant_time',
+ effect_with_fill_forwards);
+ animation.play();
+ await waitForNotNullLocalTime(animation);
+
+ assert_equals(getComputedStyle(target).opacity, '0');
+
+ animation.cancel();
+}
+
+async function effect_without_fill_mode_forwards(t) {
+ const effect_without_fill_forwards = new KeyframeEffect(
+ target,
+ { opacity: [0.5, 0] },
+ { duration: 1000 });
+ const animation = new WorkletAnimation(
+ 'constant_time',
+ effect_without_fill_forwards);
+ animation.play();
+ await waitForNotNullLocalTime(animation);
+
+ assert_equals(getComputedStyle(target).opacity, '1');
+
+ animation.cancel();
+}
+
+async function effect_without_fill_forwards_at_end(t) {
+ const effect_without_fill_forwards_at_end = new KeyframeEffect(
+ target,
+ { opacity: [0.5, 0] },
+ { duration: 2000 });
+ const animation = new WorkletAnimation(
+ 'constant_time',
+ effect_without_fill_forwards_at_end);
+ animation.play();
+ await waitForNotNullLocalTime(animation);
+
+ assert_equals(getComputedStyle(target).opacity, '1');
+
+ animation.cancel();
+}
+
+async function effect_with_fill_backwards(t) {
+ const effect_with_fill_backwards = new KeyframeEffect(
+ target,
+ { opacity: [0.5, 0] },
+ { duration: 1000, delay: 2001, fill: 'backwards' });
+ const animation = new WorkletAnimation(
+ 'constant_time',
+ effect_with_fill_backwards);
+ animation.play();
+ await waitForNotNullLocalTime(animation);
+
+ assert_equals(getComputedStyle(target).opacity, '0.5');
+
+ animation.cancel();
+}
+
+async function effect_without_fill_backwards(t) {
+ const effect_without_fill_backwards = new KeyframeEffect(
+ target,
+ { opacity: [0.5, 0] },
+ { duration: 1000, delay: 2001 });
+ const animation = new WorkletAnimation(
+ 'constant_time',
+ effect_without_fill_backwards);
+ animation.play();
+ waitForNotNullLocalTime(animation);
+
+ assert_equals(getComputedStyle(target).opacity, '1');
+
+ animation.cancel();
+}
+
+async function effect_without_fill_backwards_at_start(t) {
+ const effect_without_fill_backwards_at_start = new KeyframeEffect(
+ target,
+ { opacity: [0.5, 0] },
+ { duration: 1000, delay: 2000 });
+ const animation = new WorkletAnimation(
+ 'constant_time',
+ effect_without_fill_backwards_at_start);
+ animation.play();
+ await waitForNotNullLocalTime(animation);
+
+ assert_equals(getComputedStyle(target).opacity, '0.5');
+
+ animation.cancel();
+}
+</script>