Skip to content

GitLab

T
tangled
Commit 419d3dc4 authored by Yi Gu's avatar Yi Gu Committed by Commit Bot
Browse files
Options

[animation worklet] Add tests for fill mode behavior 

Previously upon setting the local time beyond its duration we assumed
the behavior should be the same as we set it to the end point. However,
it's only true if the effect has fill mode: fowards specified. Otherwise
the animation should be deactivated. The expected behavior for the test
is updated.

Added a new test to cover the animation behaviors with fill modes.

Bug: 897167
Change-Id: Iecbf9e86e137ff2b98cdc0f2602222c49470e21e
Reviewed-on: https://chromium-review.googlesource.com/c/1308084
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@{#608813}
parent 0eed991a
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 5 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 419d3dc4
......@@ -5172,7 +5172,7 @@ crbug.com/886566 http/tests/csspaint/invalidation-border-image.html [ Pass Timeo
crbug.com/886566 http/tests/csspaint/invalidation-content-image.html [ Pass Timeout ]
# Enable AnimationWorklet tests for mainthread
crbug.com/887659 animations/animationworklet/worklet-animation-local-time-after-duration.html [ Failure ]
crbug.com/887659 virtual/threaded/animations/animationworklet/worklet-animation-local-time-after-duration.html [ Failure ]
# Sheriff 2018-09-25
crbug.com/888609 [ Mac ] http/tests/devtools/coverage/gutter-css.js [ Pass Timeout ]
......
third_party/WebKit/LayoutTests/animations/animationworklet/worklet-animation-local-time-after-duration-expected.html
View file @ 419d3dc4
......@@ -5,7 +5,6 @@
height: 100px;
background-color: #00ff00;
will-change: transform;
transform: translateY(200px);
}
</style>
......
third_party/WebKit/LayoutTests/animations/animationworklet/worklet-animation-local-time-after-duration.html
View file @ 419d3dc4
......@@ -12,8 +12,8 @@
<script id="visual_update" type="text/worklet">
registerAnimator("test_animator", class {
animate(currentTime, effect) {
// The local time should be trimmed by the duration, e.g. this is equivalent
// to effect.localTime = 1000;
// If an effect doesn't have fill-mode specified, setting its local time
// beyond its duration makes the animation inactive.
effect.localTime = 5000;
}
});
......@@ -32,7 +32,7 @@ runInAnimationWorklet(
const box = document.getElementById('box');
const effect = new KeyframeEffect(box,
[
{ transform: 'translateY(0px)' },
{ transform: 'translateY(100px)' },
{ transform: 'translateY(200px)' }
], {
duration: 1000,
......
third_party/WebKit/LayoutTests/animations/animationworklet/worklet-animation-with-fill-mode.html 0 → 100644
View file @ 419d3dc4
<!DOCTYPE html>
<title>Test that worklet animation works with different fill modes</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
.target {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script>
function CreateTest(target, effect, verify, test_name) {
async_test(t => {
runInAnimationWorklet(
document.getElementById('simple_animate').textContent
).then(_ => {
const animation = new WorkletAnimation('test_animator', effect);
animation.play();
waitTwoAnimationFrames(() => {
// waitTwoAnimationFrames guarantees a compositor frame that could update
// the opacity value in the worklet. Meanwhile, getComputedStyle needs an
// extra frame to fetch the updated value.
window.requestAnimationFrame(t.step_func_done(() => {
verify();
animation.cancel();
}));
});
});
}, test_name);
}
</script>
<script id="simple_animate" type="text/worklet">
registerAnimator("test_animator", class {
animate(currentTime, effect) {
effect.localTime = 2000;
}
});
</script>
<div id="target1" class='target'></div>
<div id="target2" class='target'></div>
<div id="target3" class='target'></div>
<div id="target4" class='target'></div>
<div id="target5" class='target'></div>
<div id="target6" class='target'></div>
<script src="resources/animation-worklet-tests.js"></script>
<script>
const effect_with_fill_forwards = new KeyframeEffect(
target1,
{ opacity: [0.5, 0] },
{ duration: 1000, fill: 'forwards' });
CreateTest(target1,
effect_with_fill_forwards,
function() { assert_equals(getComputedStyle(target1).opacity, '0'); },
"Effect with fill mode forwards in after phase produces output that is equivalent to effect's end value.");
const effect_without_fill_forwards = new KeyframeEffect(
target2,
{ opacity: [0.5, 0] },
{ duration: 1000 });
CreateTest(target2,
effect_without_fill_forwards,
function() { assert_equals(getComputedStyle(target2).opacity, '1'); },
'Effect without fill mode forwards in after phase (local time beyond end) should deactivate the animation.');
const effect_without_fill_forwards_at_end = new KeyframeEffect(
target3,
{ opacity: [0.5, 0] },
{ duration: 2000 });
CreateTest(target3,
effect_without_fill_forwards_at_end,
function() { assert_equals(getComputedStyle(target3).opacity, '1'); },
'Effect without fill mode in after phase (local time at end) should deactivate the animation.');
const effect_with_fill_backwards = new KeyframeEffect(
target4,
{ opacity: [0.5, 0] },
{ duration: 1000, delay: 2001, fill: 'backwards' });
CreateTest(target4,
effect_with_fill_backwards,
function() { assert_equals(getComputedStyle(target4).opacity, '0.5'); },
"Effect with fill mode backwards in before phase produces output that is equivalent to effect's start value.");
const effect_without_fill_backwards = new KeyframeEffect(
target5,
{ opacity: [0.5, 0] },
{ duration: 1000, delay: 2001 });
CreateTest(target5,
effect_without_fill_backwards,
function() { assert_equals(getComputedStyle(target5).opacity, '1'); },
'Effect without fill mode backwards in before phase (local time before start) should deactivate the animation.');
const effect_without_fill_backwards_at_start = new KeyframeEffect(
target6,
{ opacity: [0.5, 0] },
{ duration: 1000, delay: 2000 });
CreateTest(target6,
effect_without_fill_backwards_at_start,
function() { assert_equals(getComputedStyle(target6).opacity, '0.5'); },
'Effect with local time at start point is in active phase.');
</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