Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /scroll-animations/view-timelines/animation-events.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html id="top">
<meta charset="utf-8">
<title>View timeline delay</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<style>
#container {
border: 10px solid lightgray;
overflow: auto;
height: 200px;
width: 200px;
}
.spacer {
height: 400px;
}
#target {
background-color: green;
height: 100px;
}
</style>
<body>
<div id="container">
<div class="spacer"></div>
<div id="target"></div>
<div class="spacer"></div>
</div>
</body>
<script type="text/javascript">
const keyframes = {transform: ['translateX(0)', 'translateX(100px)']};
let target = document.getElementById('target');
let scroller = document.querySelector('#container');
let timeline = new ViewTimeline({subject: target});
promise_test(async t => {
let animation = target.animate(keyframes, {
timeline,
fill: 'both'
});
scroller.scrollTo({top: 0});
await waitForCompositorReady();
let finishedPromise = animation.finished;
let finished = false;
let finishEvents = 0;
finishedPromise.then(() => {
finished = true;
});
animation.addEventListener('finish', () => { finishEvents++; });
scroller.scrollTo({top: 100});
await waitForNextFrame();
assert_false(finished, "Animation is not finished before starting");
assert_equals(finishEvents, 0, "No finish event before scrolling");
scroller.scrollTo({top: 400});
await waitForNextFrame();
assert_false(finished, "Animation is not finished while active");
assert_equals(finishEvents, 0, "No finish event while active");
scroller.scrollTo({top: 600});
await waitForNextFrame();
assert_true(finished, "Animation is finished after passing end");
assert_equals(finishEvents, 1, "A finish event is generated after end");
scroller.scrollTo({top: 400});
await waitForNextFrame();
assert_not_equals(finishedPromise, animation.finished,
"A new finish promise is created when back in active range");
finished = false;
animation.finished.then(() => {
finished = true;
});
scroller.scrollTo({top: 600});
await waitForNextFrame();
assert_true(finished, "Finishes after passing end");
assert_equals(finishEvents, 2, "Another finish event is generated after end");
animation.cancel();
}, 'View timeline generates and resolves finish promises and events' );
</script>