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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.overallProgress</title>
<link rel="help"
href="https://drafts.csswg.org/web-animations-2/#the-overall-progress-of-an-animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<script src="../../../scroll-animations/scroll-timelines/testcommon.js"></script>
<body>
<style>
.scroller {
overflow-x: hidden;
overflow-y: auto;
height: 200px;
width: 100px;
will-change: transform;
}
.contents {
height: 1200px;
width: 100%;
}
#target {
height: 100px;
width: 100px;
background-color: green;
margin-top: -1000px;
}
</style>
<div id="log"></div>
<script>
'use strict';
promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
const scroller = animation.timeline.source;
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
assert_equals(animation.currentTime, null,
"The current time is null in Idle state.");
assert_equals(animation.overallProgress, null,
"The overallProgress is null since the currentTime is unresolved.");
animation.play();
assert_true(animation.pending, "Animation is in the pending state.");
assert_equals(animation.currentTime, null,
"The current time remains null while in the pending state.");
assert_equals(animation.overallProgress, null,
"The overallProgress is null since the currentTime is unresolved.");
await animation.ready;
// Verify initial start and current times once ready.
assert_percents_equal(animation.currentTime, 0,
"The current time is resolved when ready.");
assert_equals(animation.overallProgress, 0,
"The overallProgress should be zero.");
scroller.scrollTop = 0.4 * maxScroll;
await waitForNextFrame();
assert_percents_equal(animation.currentTime, 40,
"currentTime reflects overallProgress as a percentage");
assert_approx_equals(animation.overallProgress, 0.4, 0.01,
"The overallProgress should match the scroll progress.");
}, "animation.overallProgress reflects the progress of a scroll animation as " +
"a number between 0 and 1");
promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
const scroller = animation.timeline.source;
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
animation.play();
await animation.ready;
// Verify initial start and current times once ready.
assert_percents_equal(animation.currentTime, 0,
"The current time is resolved when ready.");
assert_equals(animation.overallProgress, 0,
"The overallProgress should be zero.");
scroller.scrollTop = 0.4 * maxScroll;
await waitForNextFrame();
let timing = animation.effect.getComputedTiming();
// iteration duration should be 100%, overallProgress should reflect 40%.
assert_percents_equal(timing.duration, 100);
assert_percents_equal(animation.currentTime, 40,
"currentTime reflects progress as a percentage");
assert_approx_equals(animation.overallProgress, 0.4, 0.01,
"The overallProgress should match the scroll progress.");
timing = animation.effect.getComputedTiming();
animation.effect.updateTiming({ iterations: 2 });
timing = animation.effect.getComputedTiming();
// iteration duration should be 50%, overallProgress should still reflect 40%
// as it measures currentTime / effect endTime.
assert_percents_equal(timing.duration, 50);
assert_percents_equal(animation.currentTime, 40,
"currentTime reflects progress as a percentage");
assert_approx_equals(animation.overallProgress, 0.4, 0.01,
"The overallProgress is should match the scroll progress.");
}, "animation.overallProgress reflects the overall progress of a scroll " +
"with multiple iterations.");
promise_test(async t => {
const scroller = createScroller(t);
const view_timeline = createViewTimeline(t);
const animation = createAnimation(t);
animation.rangeStart = { rangeName: 'contain', offset: CSS.percent(10) };
animation.rangeEnd = { rangeName: 'contain', offset: CSS.percent(90) };
animation.timeline = view_timeline;
await animation.ready;
// Cover range is [0, 300]
// Contain range is [100, 200]
// rangeStart offset of 10% => 110px
// rangeEnd offset of 90% => 190px
const target_pct = 40;
const target_scroll_top = 110 + (target_pct / 100) * (190 - 110);
scroller.scrollTop = target_scroll_top;
await waitForNextFrame();
const start_time = 110 / 300 * 100;
const timeline_time = target_scroll_top / 300 * 100;
const expected_current_time = timeline_time - start_time;
assert_percents_equal(animation.currentTime, expected_current_time,
"currentTime reflects progress as a percentage");
assert_approx_equals(animation.overallProgress, target_pct / 100, 0.01,
"overallProgress should reflect fraction of view timeline range scroll "
+ "through.");
}, "animation.overallProgress reflects the overall progress of a scroll "
+ "that uses a view-timeline.");
promise_test(async t => {
const scroller = createScroller(t);
const view_timeline = createViewTimeline(t);
const animation = createAnimation(t);
animation.rangeStart = { rangeName: 'contain', offset: CSS.percent(10) };
animation.rangeEnd = { rangeName: 'contain', offset: CSS.percent(90) };
animation.timeline = view_timeline;
await animation.ready;
// Cover range is [0, 300]
// Contain range is [100, 200]
// rangeStart offset of 10% => 110px
// rangeEnd offset of 10% => 190px
scroller.scrollTop = 100;
await waitForNextFrame();
let timing = animation.effect.getComputedTiming();
assert_less_than(animation.currentTime.value, 0, "currentTime is negative");
assert_approx_equals(animation.overallProgress, 0, 0.01, "overallProgress " +
"is zero when scroll offset is less than range start.");
scroller.scrollTop = 200;
await waitForNextFrame();
assert_approx_equals(animation.currentTime.value, timing.endTime.value, 0.01,
"currentTime has reached endTime");
assert_approx_equals(animation.overallProgress, 1, 0.01, "overallProgress " +
"is one when scroll offset goes past than range end.");
}, "overallProgress of a view-timeline is bounded between 0 and 1.");
</script>
</body>
|
