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 464505 5214e7699ab7cf27e474ba38decc05f73d1da516
parent 464504 f990f5b1553623066dde765a18332d55bf1a5d53
child 464506 14546578cf5c45fee4d2a3f60a235301e2d55a85
push id35717
push useraciure@mozilla.com
push dateSun, 17 Mar 2019 09:45:26 +0000
treeherdermozilla-central@e0861be8d6c0 [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