[Animation Worklet] Drop assumption on effects being from the same doc

Currently all effects must have the same document to create a worklet animation. However, animating a target which is from a different document, e.g. an iframe, should be allowed. Change-Id: I24ed3597cbbe588f78829fb64e305e3cd07f637c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1574427 Commit-Queue: Yi Gu <yigu@chromium.org> Reviewed-by: Majid Valipour <majidvp@chromium.org> Reviewed-by: Stephen McGruer <smcgruer@chromium.org> Cr-Commit-Position: refs/heads/master@{#653334}
bocoup · Apr 23, 2019 · 0df6ae9 · 0df6ae9
1 parent 7219fca
commit 0df6ae9
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 4 deletions.
diff --git a/animation-worklet/worklet-animation-creation.https.html b/animation-worklet/worklet-animation-creation.https.html
@@ -125,10 +125,10 @@
  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');
+ let workletAnimation = new WorkletAnimation(
+ 'test-animator', [ effect, otherEffect ]);
+ assert_equals(workletAnimation.playState, 'idle');
+ }, 'Creating animation with effects from different documents is allowed');
 
  promise_test(async t => {
  await runInAnimationWorklet(document.getElementById('simple_animate').textContent);

diff --git a/animation-worklet/worklet-animation-with-effects-from-different-frames.https.html b/animation-worklet/worklet-animation-with-effects-from-different-frames.https.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>Worklet animation can animate effects from different frames</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="common.js"></script>
+
+<div id="box"></div>
+
+<script id="simple_animate" type="text/worklet">
+ registerAnimator("test_animator", class {
+ animate(currentTime, effect) {
+ let effects = effect.getChildren();
+ effects[0].localTime = 500;
+ effects[1].localTime = 750;
+ }
+ });
+</script>
+
+<script>
+ promise_test(async t => {
+ await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
+ const effect = new KeyframeEffect(box, [{ opacity: 0 }], { duration: 1000 });
+
+ let iframe = document.createElement('iframe');
+ iframe.src = 'resources/iframe.html';
+ document.body.appendChild(iframe);
+
+ await waitForAnimationFrameWithCondition(_ => {
+ return iframe.contentDocument.getElementById('iframe_box') != null;
+ });
+ let iframe_box = iframe.contentDocument.getElementById('iframe_box');
+ let iframe_effect = new KeyframeEffect(
+ iframe_box, [{ opacity: 0 }], { duration: 1000 }
+ );
+
+ const animation = new WorkletAnimation('test_animator', [effect, iframe_effect]);
+ animation.play();
+
+ await waitForNotNullLocalTime(animation);
+ assert_equals(getComputedStyle(box).opacity, '0.5');
+ assert_equals(getComputedStyle(iframe_box).opacity, '0.25');
+
+ iframe.remove();
+ animation.cancel();
+ }, "Effects from different documents can be animated within one worklet animation");
+</script>