1 files changed, 65 insertions, 0 deletions
diff --git a/testing/web-platform/tests/animation-worklet/multiple-effects-on-same-target-driven-by-individual-local-time.https.html b/testing/web-platform/tests/animation-worklet/multiple-effects-on-same-target-driven-by-individual-local-time.https.html
new file mode 100644
index 0000000000..edf8488ded
--- /dev/null
+++ b/testing/web-platform/tests/animation-worklet/multiple-effects-on-same-target-driven-by-individual-local-time.https.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<title>Multiple effects on same target driven by individual local time</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;
+  }
+  #target2 {
+    width: 100px;
+    height: 100px;
+    background-color: blue;
+    box-shadow: 4px 4px 25px blue;
+  }
+</style>
+
+<div id="target"></div>
+
+<script id="simple_animate" type="text/worklet">
+  registerAnimator("test_animator", class {
+    animate(currentTime, effect) {
+      let effects = effect.getChildren();
+      effects[0].localTime = 0;
+      effects[1].localTime = 1000;
+    }
+  });
+</script>
+
+<script>
+  promise_test(async t => {
+    await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
+
+    const effect = new KeyframeEffect(
+        document.getElementById("target"),
+        [
+          { background: 'green' },
+          { background: 'blue' },
+        ],
+        { duration: 2000 }
+    );
+    const effect2 = new KeyframeEffect(
+        document.getElementById("target"),
+        [
+          { width: '100px' },
+          { width: '200px' }
+        ],
+        { duration: 2000 }
+    );
+
+    const animation = new WorkletAnimation('test_animator', [effect, effect2]);
+    animation.play();
+    await waitForAsyncAnimationFrames(1);
+
+    assert_equals(getComputedStyle(document.getElementById('target')).backgroundColor, "rgb(0, 128, 0)");
+    assert_equals(getComputedStyle(document.getElementById('target')).width, "150px");
+  }, `Animating multiple effects on the same target using effect specific local time should output values
+  relative to each effects unique local time`);
+</script>
+\ No newline at end of file