Bug 1527506 [wpt PR 15341] - [Animation Worklet] Upstream web tests (related to multiple effects) to WPT, a=testonly
authorJordan Taylor <jortaylo@microsoft.com>
Tue, 05 Mar 2019 11:10:15 +0000
changeset 464171 61dabecba34c7c44475acf5efc26c45d6ef8ccca
parent 464170 feaa22c216e3662de6971595db8fba077b272d29
child 464172 aa57afa41078cc77cd2e75775adf189d9fbcb2ab
push id35713
push usercbrindusan@mozilla.com
push dateFri, 15 Mar 2019 21:55:43 +0000
treeherdermozilla-central@66b1aba3fb43 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1527506, 15341, 915352, 1464962, 631342
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1527506 [wpt PR 15341] - [Animation Worklet] Upstream web tests (related to multiple effects) to WPT, a=testonly Automatic update from web-platform-tests [Animation Worklet] Upstream web tests (related to multiple effects) to WPT web_tests/animations/animationworklet/animate-multiple-effects-on-different-targets-via-main-thread.html -> web_tests/external/wpt/animation-worklet/animate-multiple-effects-on-different-targets-via-main-thread.https.html web_tests/animations/animationworklet/multiple-effects-on-same-target-driven-by-individual-local-time.html -> web_tests/external/wpt/animation-worklet/multiple-effects-on-same-target-driven-by-individual-local-time.https.html Bug: 915352 Change-Id: I28385bc6c6c6f479256dd3673f77c843ab93af2e Reviewed-on: https://chromium-review.googlesource.com/c/1464962 Commit-Queue: Jordan Taylor <jortaylo@microsoft.com> Reviewed-by: Yi Gu <yigu@chromium.org> Reviewed-by: Majid Valipour <majidvp@chromium.org> Cr-Commit-Position: refs/heads/master@{#631342} -- wpt-commits: 809890ad1f00003c03ab753f27624a591377a9cf wpt-pr: 15341
testing/web-platform/tests/animation-worklet/animate-multiple-effects-on-different-targets-via-main-thread.https.html
testing/web-platform/tests/animation-worklet/multiple-effects-on-same-target-driven-by-individual-local-time.https.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/animation-worklet/animate-multiple-effects-on-different-targets-via-main-thread.https.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<title>Animate multiple effects on different targets via main thread</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>
+<div id="target2"></div>
+
+<script id="simple_animate" type="text/worklet">
+  registerAnimator("test_animator", class {
+    animate(currentTime, effect) {
+      let effects = effect.getChildren();
+      effects[0].localTime = 1000;
+      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("target2"),
+        [
+          { boxShadow: '4px 4px 25px blue' },
+          { boxShadow: '4px 4px 25px green' }
+        ],
+        { duration: 2000 }
+    );
+
+    const animation = new WorkletAnimation('test_animator', [effect, effect2]);
+    animation.play();
+    await waitForAsyncAnimationFrames(1);
+
+    assert_equals(getComputedStyle(document.getElementById('target')).backgroundColor, "rgb(0, 64, 128)");
+    assert_equals(getComputedStyle(document.getElementById('target2')).boxShadow, "rgb(0, 64, 128) 4px 4px 25px 0px");
+  }, 'Animating multiple effects on different targets via main thread should produce new output values accordingly');
+</script>
\ No newline at end of file
new file mode 100644
--- /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