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>