110 lines
2.8 KiB
HTML
110 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<title>Setting localTime to null means effect does not apply (reftest)</title>
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
|
|
<link rel="match" href="worklet-animation-local-time-null-2-ref.html">
|
|
<meta name="timeout" content="long">
|
|
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<script src="/web-animations/testcommon.js"></script>
|
|
<script src="common.js"></script>
|
|
|
|
<style>
|
|
.box {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: green;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
|
|
<div>
|
|
<div class="box" id="target1"></div>
|
|
<div class="box" id="target2"></div>
|
|
<div class="box" id="target3"></div>
|
|
<div class="box" id="target4"></div>
|
|
<div class="box" id="control"></div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
runInAnimationWorklet(`
|
|
registerAnimator("blank_animator", class {
|
|
animate(currentTime, effect) {
|
|
// Unset effect.localTime is equivalent to 'null'
|
|
}
|
|
});
|
|
|
|
registerAnimator("null_animator", class {
|
|
animate(currentTime, effect) {
|
|
effect.localTime = null;
|
|
}
|
|
});
|
|
|
|
registerAnimator("drop_animator", class {
|
|
animate(currentTime, effect) {
|
|
if (currentTime < 500)
|
|
effect.localTime = 500;
|
|
else if (currentTime < 1000)
|
|
effect.localTime = 0;
|
|
else
|
|
effect.localTime = null;
|
|
}
|
|
});
|
|
|
|
registerAnimator("add_animator", class {
|
|
animate(currentTime, effect) {
|
|
if (currentTime < 1000)
|
|
effect.localTime = 500;
|
|
else
|
|
effect.localTime = 0;
|
|
}
|
|
});
|
|
`).then(() => {
|
|
|
|
const start_animation = (animator, targetId, keyframes) => {
|
|
const animation = new WorkletAnimation(animator,
|
|
new KeyframeEffect(
|
|
document.getElementById(targetId),
|
|
keyframes,
|
|
{duration: 1000}
|
|
)
|
|
);
|
|
animation.play();
|
|
return animation;
|
|
};
|
|
|
|
start_animation('blank_animator','target1', [
|
|
{ transform: 'translateY(100px)' },
|
|
{ transform: 'translateY(200px)' }
|
|
]);
|
|
|
|
start_animation('null_animator','target2', [
|
|
{ transform: 'translateY(100px)' },
|
|
{ transform: 'translateY(200px)' }
|
|
]);
|
|
|
|
start_animation('drop_animator','target3', [
|
|
{ transform: 'translateY(100px)' },
|
|
{ transform: 'translateY(200px)' }
|
|
]);
|
|
|
|
start_animation('drop_animator','target4', [
|
|
{ backgroundColor: 'red' },
|
|
{ backgroundColor: 'blue' }
|
|
]);
|
|
|
|
// check that animation worklets are running to stop accidental pass
|
|
const control_anim = start_animation('add_animator','control', [
|
|
{ backgroundColor: 'red', transform: 'translateY(100px)' },
|
|
{ backgroundColor: 'blue', transform: 'translateY(200px)' }
|
|
]);
|
|
|
|
waitForAnimationFrameWithCondition(() => control_anim.currentTime > 1000)
|
|
// long timeout due to laggy compositor thread on debug build.
|
|
.then(() => waitForAsyncAnimationFrames(120))
|
|
.then(takeScreenshot);
|
|
});
|
|
|
|
|
|
</script>
|