Revision control

1
<script src="../resources/testharness.js"></script>
2
<script src="../resources/testharnessreport.js"></script>
3
<style>
4
5
div {
6
animation: anim 1s steps(10);
7
}
8
9
@keyframes anim {
10
25% { margin-left: 250px }
11
50% { margin-left: 500px; animation-timing-function: steps(5); }
12
75% { margin-left: 750px }
13
}
14
15
</style>
16
<div></div>
17
<script>
18
19
async_test(async t => {
20
const animation = document.querySelector("div").getAnimations()[0];
21
22
await animation.ready;
23
24
animation.currentTime = 10;
25
assert_equals(internals.timeToNextAnimationTick(animation), 15, "Progress contained in the interval for an implicit 0% keyframe.");
26
27
animation.currentTime = 265;
28
assert_equals(internals.timeToNextAnimationTick(animation), 10, "Progress contained in the interval for an explicit keyframe with an implicit steps() timing-function.");
29
30
animation.currentTime = 510;
31
assert_equals(internals.timeToNextAnimationTick(animation), 40, "Progress contained in the interval for an explicit keyframe with an explicit steps() timing-function.");
32
33
animation.currentTime = 780;
34
assert_equals(internals.timeToNextAnimationTick(animation), 20, "Progress contained in the interval for an implicit 100% keyframe.");
35
36
t.done();
37
}, "Computing the time until the next tick for a CSS Animation with implicit and explicit steps() timing functions.");
38
39
</script>