mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 21:58:41 +02:00
6a29f7a20d
Automatic update from web-platform-tests [Animation Worklet] Fix flaky worklet-animation-with-fill-mode.https.html Use a more robust method for waiting on receiving local times on main thread when test is running with threaded compositing. Previously we would wait for one async frame and some more time to ensure we have received the local times on main thread. This can be flaky. Instead wait until local time is no longer null which means worklet has produced at least one frame and that frame has been synced with main. To this end WorkletAnimation now exposes its effect (similar to regular animations) and we use that to access the effect's local time. Bug: 915352 Change-Id: I05ab560d90a55ff68e048b2c8ed19e87435dffeb Reviewed-on: https://chromium-review.googlesource.com/c/1496478 Commit-Queue: Majid Valipour <majidvp@chromium.org> Reviewed-by: Yi Gu <yigu@chromium.org> Cr-Commit-Position: refs/heads/master@{#636970} -- wpt-commits: f8602d068887aebd4d962b77bcce88661ac2c245 wpt-pr: 15623
147 lines
4.3 KiB
HTML
147 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>Test that worklet animation works with different fill modes</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;
|
|
}
|
|
</style>
|
|
|
|
<div id="target" class='target'></div>
|
|
|
|
<script>
|
|
setup(setupAndRegisterTests, {explicit_done: true});
|
|
|
|
function setupAndRegisterTests() {
|
|
registerConstantLocalTimeAnimator(2000).then(() => {
|
|
promise_test(
|
|
effect_with_fill_mode_forwards,
|
|
"Effect with fill mode forwards in after phase produces output that is equivalent to effect's end value.");
|
|
|
|
promise_test(
|
|
effect_without_fill_mode_forwards,
|
|
'Effect without fill mode forwards in after phase (local time beyond end) should deactivate the animation.');
|
|
|
|
promise_test(
|
|
effect_without_fill_forwards_at_end,
|
|
'Effect without fill mode in after phase (local time at end) should deactivate the animation.');
|
|
|
|
promise_test(
|
|
effect_with_fill_backwards,
|
|
"Effect with fill mode backwards in before phase produces output that is equivalent to effect's start value.");
|
|
|
|
promise_test(
|
|
effect_without_fill_backwards,
|
|
'Effect without fill mode backwards in before phase (local time before start) should deactivate the animation.');
|
|
|
|
promise_test(
|
|
effect_without_fill_backwards_at_start,
|
|
'Effect with local time at start point is in active phase.');
|
|
|
|
done();
|
|
});
|
|
}
|
|
|
|
async function effect_with_fill_mode_forwards(t) {
|
|
const effect_with_fill_forwards = new KeyframeEffect(
|
|
target,
|
|
{ opacity: [0.5, 0] },
|
|
{ duration: 1000, fill: 'forwards' });
|
|
const animation = new WorkletAnimation(
|
|
'constant_time',
|
|
effect_with_fill_forwards);
|
|
animation.play();
|
|
await waitForNotNullLocalTime(animation);
|
|
|
|
assert_equals(getComputedStyle(target).opacity, '0');
|
|
|
|
animation.cancel();
|
|
}
|
|
|
|
async function effect_without_fill_mode_forwards(t) {
|
|
const effect_without_fill_forwards = new KeyframeEffect(
|
|
target,
|
|
{ opacity: [0.5, 0] },
|
|
{ duration: 1000 });
|
|
const animation = new WorkletAnimation(
|
|
'constant_time',
|
|
effect_without_fill_forwards);
|
|
animation.play();
|
|
await waitForNotNullLocalTime(animation);
|
|
|
|
assert_equals(getComputedStyle(target).opacity, '1');
|
|
|
|
animation.cancel();
|
|
}
|
|
|
|
async function effect_without_fill_forwards_at_end(t) {
|
|
const effect_without_fill_forwards_at_end = new KeyframeEffect(
|
|
target,
|
|
{ opacity: [0.5, 0] },
|
|
{ duration: 2000 });
|
|
const animation = new WorkletAnimation(
|
|
'constant_time',
|
|
effect_without_fill_forwards_at_end);
|
|
animation.play();
|
|
await waitForNotNullLocalTime(animation);
|
|
|
|
assert_equals(getComputedStyle(target).opacity, '1');
|
|
|
|
animation.cancel();
|
|
}
|
|
|
|
async function effect_with_fill_backwards(t) {
|
|
const effect_with_fill_backwards = new KeyframeEffect(
|
|
target,
|
|
{ opacity: [0.5, 0] },
|
|
{ duration: 1000, delay: 2001, fill: 'backwards' });
|
|
const animation = new WorkletAnimation(
|
|
'constant_time',
|
|
effect_with_fill_backwards);
|
|
animation.play();
|
|
await waitForNotNullLocalTime(animation);
|
|
|
|
assert_equals(getComputedStyle(target).opacity, '0.5');
|
|
|
|
animation.cancel();
|
|
}
|
|
|
|
async function effect_without_fill_backwards(t) {
|
|
const effect_without_fill_backwards = new KeyframeEffect(
|
|
target,
|
|
{ opacity: [0.5, 0] },
|
|
{ duration: 1000, delay: 2001 });
|
|
const animation = new WorkletAnimation(
|
|
'constant_time',
|
|
effect_without_fill_backwards);
|
|
animation.play();
|
|
waitForNotNullLocalTime(animation);
|
|
|
|
assert_equals(getComputedStyle(target).opacity, '1');
|
|
|
|
animation.cancel();
|
|
}
|
|
|
|
async function effect_without_fill_backwards_at_start(t) {
|
|
const effect_without_fill_backwards_at_start = new KeyframeEffect(
|
|
target,
|
|
{ opacity: [0.5, 0] },
|
|
{ duration: 1000, delay: 2000 });
|
|
const animation = new WorkletAnimation(
|
|
'constant_time',
|
|
effect_without_fill_backwards_at_start);
|
|
animation.play();
|
|
await waitForNotNullLocalTime(animation);
|
|
|
|
assert_equals(getComputedStyle(target).opacity, '0.5');
|
|
|
|
animation.cancel();
|
|
}
|
|
</script>
|