<!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>