Commit ff071f8a authored by Yi Gu's avatar Yi Gu Committed by Commit Bot

[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: default avatarMajid Valipour <majidvp@chromium.org>
Reviewed-by: default avatarStephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#653334}
parent 8d4a6b12
......@@ -67,13 +67,6 @@ bool ConvertAnimationEffects(
}
}
Document& target_document = keyframe_effects.at(0)->target()->GetDocument();
for (const auto& effect : keyframe_effects) {
if (effect->target()->GetDocument() != target_document) {
error_string = "All effects must target elements in the same document";
return false;
}
}
return true;
}
......
......@@ -125,10 +125,10 @@ function CreateKeyframeEffect(element) {
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);
......
<!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>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment