1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.progress</title>
<link rel="help"
href="https://drafts.csswg.org/web-animations-2/#the-progress-of-an-animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
test(t => {
const animation = new Animation(null);
animation.startTime = document.timeline.currentTime;
assert_time_equals_literal(animation.currentTime, 0, 'currentTime is zero');
assert_equals(animation.progress, null, 'progress is unresolved');
}, 'progress of a newly created animation without an effect is unresolved');
test(t => {
// currentTime should be unresolved because the animation has no associated
// timeline.
const animation = new Animation(new KeyframeEffect(createDiv(t), null), null);
assert_equals(animation.currentTime, null, 'currentTime is unresolved');
assert_equals(animation.progress, null, 'progress is unresolved');
}, 'progress of an animation whose currentTime is unresolved is unresolved.');
test(t => {
const animation = new Animation(new KeyframeEffect(createDiv(t), null,
{ duration: 0 }), document.timeline);
// Set the startTime to 20 seconds into the future.
animation.startTime = document.timeline.currentTime + 20 * MS_PER_SEC;
assert_less_than(animation.currentTime, 0, 'currentTime is negative');
assert_approx_equals(animation.progress, 0, 0.01, 'progress is zero');
}, "progress of an animation whose effect's endTime is zero is zero if its " +
"currentTime is negative.");
test(t => {
const animation = new Animation(new KeyframeEffect(createDiv(t), null,
{ duration: 0 }), document.timeline);
animation.startTime = document.timeline.currentTime;
assert_time_equals_literal(animation.currentTime, 0, 'currentTime is zero');
assert_approx_equals(animation.progress, 1, 0.01, 'progress is one');
animation.startTime = document.timeline.currentTime - 20 * MS_PER_SEC;
assert_greater_than(animation.currentTime, 0, 'currentTime greater than zero');
assert_approx_equals(animation.progress, 1, 0.01, 'progress is one');
}, "progress of an animation whose effect's endTime is zero is one if its " +
"currentTime is non-negative.");
test(t => {
const animation = new Animation(new KeyframeEffect(createDiv(t), null,
{ duration: Infinity }), document.timeline);
animation.startTime = document.timeline.currentTime - 20 * MS_PER_SEC;
assert_greater_than(animation.currentTime, 0, 'currentTime is positive');
assert_approx_equals(animation.progress, 0, 0.01, 'progress is zero');
}, "progress of an animation whose effect's endTime is infinity is zero.");
test(t => {
const animation = new Animation(new KeyframeEffect(createDiv(t), null,
200 * MS_PER_SEC), document.timeline);
animation.playbackRate = 2;
animation.startTime = document.timeline.currentTime - 50 * MS_PER_SEC;
assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC, 'currentTime is 100s');
assert_approx_equals(animation.progress, 0.5, 0.01, 'progress is zero');
animation.startTime = document.timeline.currentTime - 100 * MS_PER_SEC;
assert_time_equals_literal(animation.currentTime, 200 * MS_PER_SEC, 'currentTime is 200s');
assert_approx_equals(animation.progress, 1, 0.01, 'progress is one');
animation.startTime = document.timeline.currentTime - 150 * MS_PER_SEC;
assert_time_equals_literal(animation.currentTime, 300 * MS_PER_SEC, 'currentTime is 300s');
assert_approx_equals(animation.progress, 1, 0.01, 'progress is still one');
}, "progress of an animation is calculated by currentTime / effect endTime.");
</script>
</body>
|
