[Animation Worklet] Upstream web tests (related to creation, duration…

…, start-delay, and cancel) to WPT web_tests/animations/animationworklet/worklet-animation-cancel.html -> web_tests/external/wpt/animation-worklet/worklet-animation-cancel.https.html web_tests/animations/animationworklet/worklet-animation-cancel-expected.html -> web_tests/external/wpt/animation-worklet/worklet-animation-cancel-ref.html web_tests/animations/animationworklet/worklet-animation-creation.html -> web_tests/external/wpt/animation-worklet/worklet-animation-creation.https.html web_tests/animations/animationworklet/worklet-animation-duration.html -> web_tests/external/wpt/animation-worklet/worklet-animation-duration.https.html web_tests/animations/animationworklet/worklet-animation-duration-expected.html -> web_tests/external/wpt/animation-worklet/worklet-animation-duration-ref.html web_tests/animations/animationworklet/worklet-animation-start-delay.html -> web_tests/external/wpt/animation-worklet/worklet-animation-start-delay.https.html web_tests/animations/animationworklet/worklet-animation-start-delay-expected.html -> web_tests/external/wpt/animation-worklet/worklet-animation-start-delay-ref.html Bug: 915352 Change-Id: I7e0fb6a9d0158ba2c1809c0a7ba25d87136cf405 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1504701 Reviewed-by: Yi Gu <yigu@chromium.org> Commit-Queue: Jordan Taylor <jortaylo@microsoft.com> Cr-Commit-Position: refs/heads/master@{#639960}
bocoup · Mar 12, 2019 · 328607f · 328607f
1 parent 951d16f
commit 328607f
Show file tree

Hide file tree

Showing 7 changed files with 310 additions and 0 deletions.
diff --git a/animation-worklet/worklet-animation-cancel-ref.html b/animation-worklet/worklet-animation-cancel-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Reference for Canceling a playing WorkletAnimation should remove the effect</title>
+<style>
+#box {
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+}
+</style>
+
+<div id="box"></div>
diff --git a/animation-worklet/worklet-animation-cancel.https.html b/animation-worklet/worklet-animation-cancel.https.html
@@ -0,0 +1,45 @@
+<html class="reftest-wait">
+<title>Canceling a playing WorkletAnimation should remove the effect</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
+<meta name="assert" content="Canceling a playing animation should remove the effect">
+<link rel="match" href="worklet-animation-cancel-ref.html">
+
+<script src="/web-animations/testcommon.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<script src="common.js"></script>
+
+<style>
+ #box {
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+ }
+</style>
+
+<div id="box"></div>
+
+<script>
+ registerConstantLocalTimeAnimator(500).then(_ => {
+ const box = document.getElementById('box');
+ const effect = new KeyframeEffect(box,
+ [
+ {transform: 'translateY(0)'},
+ {transform: 'translateY(200px)'}
+ ], {
+ duration: 1000,
+ iterations: Infinity
+ }
+ );
+
+ const animation = new WorkletAnimation('constant_time', effect);
+ animation.play();
+
+ waitForAsyncAnimationFrames(1).then(_ => {
+ // Canceling a playing animation should remove the effect.
+ animation.cancel();
+ waitForAsyncAnimationFrames(1).then(_ => {
+ takeScreenshot();
+ });
+ });
+ });
+</script>
diff --git a/animation-worklet/worklet-animation-creation.https.html b/animation-worklet/worklet-animation-creation.https.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<title>Verify that WorkletAnimation is correctly created</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>
+ .scroller {
+ height: 100px;
+ width: 100px;
+ overflow: scroll;
+ }
+ .content {
+ height: 500px;
+ width: 500px;
+ }
+</style>
+
+<script>
+function CreateKeyframeEffect(element) {
+ return new KeyframeEffect(
+ element,
+ [
+ { transform: 'translateY(0%)' },
+ { transform: 'translateY(100%)' }
+ ],
+ { duration: 3000, fill: 'forwards' }
+ );
+}
+</script>
+<script id="simple_animate" type="text/worklet">
+ registerAnimator("test-animator", class {
+ animate(currentTime, effect) {}
+ });
+</script>
+
+<div id='element'></div>
+<div id='element2'></div>
+<div class='scroller'>
+ <div class='content'></div>
+</div>
+
+<script>
+ promise_test(async t => {
+ await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
+ let effect = CreateKeyframeEffect(document.querySelector('#element'));
+ let workletAnimation = new WorkletAnimation('test-animator', effect);
+ assert_equals(workletAnimation.playState, 'idle');
+ assert_equals(workletAnimation.timeline, document.timeline);
+ }, 'WorkletAnimation creation without timeline should use default documentation timeline');
+
+ promise_test(async t => {
+ await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
+ let effect = CreateKeyframeEffect(document.querySelector('#element'));
+ let workletAnimation = new WorkletAnimation('test-animator', effect);
+ assert_equals(workletAnimation.playState, 'idle');
+ }, 'WorkletAnimation creation with timeline should work');
+
+ promise_test(async t => {
+ await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
+ let effect = CreateKeyframeEffect(document.querySelector('#element'));
+ let options = { my_param: 'foo', my_other_param: true };
+ let workletAnimation = new WorkletAnimation(
+ 'test-animator', effect, document.timeline, options);
+ assert_equals(workletAnimation.playState, 'idle');
+ }, 'WorkletAnimation creation with timeline and options should work');
+
+ promise_test(async t => {
+ await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
+ let effect = CreateKeyframeEffect(document.querySelector('#element'));
+ let scroller = document.querySelector('.scroller');
+ let scrollTimeline = new ScrollTimeline(
+ { scrollSource: scroller, timeRange: 100, orientation: 'inline' });
+ let workletAnimation = new WorkletAnimation(
+ 'test-animator', effect, scrollTimeline);
+ assert_equals(workletAnimation.playState, 'idle');
+ }, 'ScrollTimeline is a valid timeline for a WorkletAnimation');
+
+ promise_test(async t => {
+ await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
+ let constructorFunc = function() { new WorkletAnimation(
+ 'test-animator', []); };
+ assert_throws('NotSupportedError', constructorFunc);
+ }, 'If there are no effects specified, object construction should fail');
+
+ promise_test(async t => {
+ await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
+ let effect = CreateKeyframeEffect(document.querySelector('#element'));
+
+ let otherDoc = document.implementation.createHTMLDocument();
+ let otherElement = otherDoc.createElement('div');
+ otherDoc.body.appendChild(otherElement);
+ let otherEffect = CreateKeyframeEffect(otherElement);
+
+ let constructorFunc = function() { new WorkletAnimation(
+ 'test-animator', [ effect, otherEffect ]); };
+ assert_throws('NotSupportedError', constructorFunc);
+ }, 'If the effects are from different documents, object construction should fail');
+
+ promise_test(async t => {
+ await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
+ // TODO(crbug.com/781816): Allow KeyframeEffects with no target in AnimationWorklet.
+ let effect = CreateKeyframeEffect(null);
+ let effect2 = CreateKeyframeEffect(document.querySelector('#element'));
+
+ let constructorFunc = function() { new WorkletAnimation(
+ 'test-animator', [ effect, effect2 ]); };
+ assert_throws('NotSupportedError', constructorFunc);
+
+ let constructorFunc2 = function() { new WorkletAnimation(
+ 'test-animator', [ effect2, effect ]); };
+ assert_throws('NotSupportedError', constructorFunc2);
+ }, 'If an effect has no target, object construction should fail');
+
+ promise_test(async t => {
+ await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
+ let effect = CreateKeyframeEffect(document.querySelector('#element'));
+ let constructorFunc = function() {
+ new WorkletAnimation('unregistered-animator', effect);
+ };
+ assert_throws('InvalidStateError', constructorFunc);
+ }, 'Constructing worklet animation for unregisested animator should throw');
+</script>
diff --git a/animation-worklet/worklet-animation-duration-ref.html b/animation-worklet/worklet-animation-duration-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Reference for WorkletAnimation should continue to be in effect forever, even if its duration is passed</title>
+<style>
+#box {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ transform: translateY(100px);
+}
+</style>
+
+<div id="box"></div>
diff --git a/animation-worklet/worklet-animation-duration.https.html b/animation-worklet/worklet-animation-duration.https.html
@@ -0,0 +1,40 @@
+<html>
+<title>WorkletAnimation should continue to be in effect forever, even if its duration is passed</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
+<link rel="match" href="worklet-animation-duration-ref.html">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="common.js"></script>
+
+<div id="box"></div>
+
+<script>
+ promise_test(async t => {
+ await registerConstantLocalTimeAnimator(0.5);
+
+ const box = document.getElementById('box');
+ const effect = new KeyframeEffect(box,
+ [
+ {transform: 'translateY(0px)' },
+ {transform: 'translateY(200px)' }
+ ], {
+ duration: 1,
+ }
+ );
+
+ const animation = new WorkletAnimation('constant_time', effect);
+ animation.play();
+
+ let expected_transform = "matrix(1, 0, 0, 1, 0, 100)";
+ await waitForAnimationFrameWithCondition(_ => {
+ return getComputedStyle(box).transform == expected_transform;
+ });
+
+ // The animation is specified to last for 1 millisecond
+ await new Promise(resolve => step_timeout(resolve, 500));
+
+ assert_equals(getComputedStyle(document.getElementById("box")).transform, expected_transform);
+ }, "WorkletAnimation should continue to be in effect forever, even if its duration is passed");
+</script>
diff --git a/animation-worklet/worklet-animation-start-delay-ref.html b/animation-worklet/worklet-animation-start-delay-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Reference for WorkletAnimation should respect delay given in options</title>
+<style>
+.box {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+}
+</style>
+
+<div class="box"></div>
+<div style="transform: translateX(100px);" class="box"></div>
diff --git a/animation-worklet/worklet-animation-start-delay.https.html b/animation-worklet/worklet-animation-start-delay.https.html
@@ -0,0 +1,64 @@
+<html class="reftest-wait">
+<title>WorkletAnimation should respect delay given in options</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
+<meta name="assert" content="Worklet Animation should respect delay given in options">
+<link rel="match" href="worklet-animation-start-delay-ref.html">
+
+<script src="/web-animations/testcommon.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<script src="common.js"></script>
+
+<style>
+ .box {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+</style>
+
+<div id="t0" class="box"></div>
+<div id="t1" class="box"></div>
+<div id="out"></div>
+<script id="visual_update" type="text/worklet">
+ registerAnimator("t0_animator", class {
+ animate(currentTime, effect) {
+ effect.localTime = 500;
+ }
+ });
+
+ registerAnimator("t1_animator", class {
+ animate(currentTime, effect) {
+ effect.localTime = 5500;
+ }
+ });
+</script>
+
+<script>
+ runInAnimationWorklet(
+ document.getElementById('visual_update').textContent
+ ).then(()=>{
+ const keyframes = [
+ {transform: 'translateX(0)' },
+ {transform: 'translateX(200px)' }
+ ];
+ const options = {
+ duration: 1000,
+ delay: 5000,
+ };
+
+ const $t0 = document.getElementById('t0');
+ const $t0_effect = new KeyframeEffect($t0, keyframes, options);
+ const $t0_animation = new WorkletAnimation('t0_animator', $t0_effect);
+
+ const $t1 = document.getElementById('t1');
+ const $t1_effect = new KeyframeEffect($t1, keyframes, options);
+ const $t1_animation = new WorkletAnimation('t1_animator', $t1_effect);
+
+ $t0_animation.play();
+ $t1_animation.play();
+
+ waitForAsyncAnimationFrames(1).then(_ => {
+ takeScreenshot();
+ });
+ });
+</script>