-
Notifications
You must be signed in to change notification settings - Fork 54
/
setting-current-time.html
200 lines (171 loc) · 6.66 KB
/
setting-current-time.html
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<meta charset=utf-8>
<title>Setting the current time of an animation</title>
<link rel="help" href="https://drafts.csswg.org/web-animations-1/#setting-the-current-time-of-an-animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="testcommon.js"></script>
<style>
.scroller {
overflow: auto;
height: 200px;
width: 100px;
}
.contents {
height: 1000px;
width: 100%;
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
const scroller = animation.timeline.scrollSource;
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
scroller.scrollTop = 0.25 * maxScroll;
animation.play();
await animation.ready;
assert_throws_js(TypeError, () => {
animation.currentTime = null;
});
}, 'Setting animation current time to null throws TypeError.');
test(t => {
const animation = createScrollLinkedAnimation(t);
const scroller = animation.timeline.scrollSource;
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
scroller.scrollTop = 0.25 * maxScroll;
animation.currentTime = 333;
assert_times_equal(
animation.currentTime,
333,
"Animation current time should be equal to the set value."
);
}, 'Set animation current time to a valid value without playing.');
promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
const scroller = animation.timeline.scrollSource;
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
scroller.scrollTop = 0.25 * maxScroll;
animation.play();
await animation.ready;
animation.currentTime = 333;
assert_times_equal(
animation.currentTime,
333,
"Animation current time should be equal to the set value."
);
}, 'Set animation current time to a valid value while playing.');
promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
const scroller = animation.timeline.scrollSource;
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
const range = animation.timeline.timeRange;
scroller.scrollTop = 0.25 * maxScroll;
animation.play();
await animation.ready;
const largerThanDuration = animation.effect.getTiming().duration * 2;
animation.currentTime = largerThanDuration;
assert_greater_than_equal(largerThanDuration, range, "Make sure that the" +
" test value is after the end of the effect and the timeline");
assert_equals(animation.playState, "finished");
assert_times_equal(
animation.currentTime,
largerThanDuration,
"Animation current time should be equal to the set value."
);
}, 'Set animation current time to a value beyond effect end.');
promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
const scroller = animation.timeline.scrollSource;
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
const range = animation.timeline.timeRange;
scroller.scrollTop = 0.25 * maxScroll;
animation.play();
await animation.ready;
animation.currentTime = -100;
assert_equals(animation.playState, "running");
assert_times_equal(
animation.currentTime,
-100,
"Animation current time should be equal to the set value."
);
}, 'Set animation current time to a negative value.');
test(t => {
const animation = createScrollLinkedAnimation(t);
const scroller = animation.timeline.scrollSource;
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
scroller.scrollTop = 0.25 * maxScroll;
animation.play();
animation.currentTime = 300;
assert_equals(animation.playState, "running");
assert_true(animation.pending);
assert_time_equals_literal(animation.currentTime, 300);
}, "Setting current time while play pending overrides the current time");
promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
const scroller = animation.timeline.scrollSource;
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
scroller.scrollTop = 0.25 * maxScroll;
animation.play();
await animation.ready;
animation.currentTime = 333;
assert_times_equal(
animation.currentTime,
333,
"Animation current time should be equal to the set value."
);
// Cancel the animation and play it again, check that current time has reset
// to scroll offset based current time.
animation.cancel();
animation.play();
await animation.ready;
assert_times_equal(
animation.currentTime,
animation.timeline.currentTime,
"Animation current time should return to a value matching its" +
" timeline current time after animation is cancelled and played again."
);
}, 'Setting animation.currentTime then restarting the animation should' +
' reset the current time.');
promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
const scroller = animation.timeline.scrollSource;
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
scroller.scrollTop = 0.25 * maxScroll;
animation.play();
await animation.ready;
const originalCurrentTime = animation.currentTime;
// Set the current time to something other than where the scroll offset.
animation.currentTime = 500;
// Setting current time is internally setting the start time to
// scrollTimeline.currentTime - newAnimationCurrentTime.
// Which results in current time of (timeline.currentTime - start_time).
// This behavior puts the animation in a strange "out of sync" state between
// the scroller and the animation effect, this is currently expected
// behavior.
const expectedStartTime = originalCurrentTime - animation.currentTime;
assert_times_equal(
animation.startTime,
expectedStartTime,
"Animation current time should be updated when setting the current time" +
" to a time within the range of the animation.");
scroller.scrollTop = 0.7 * maxScroll;
assert_times_equal(
animation.startTime,
expectedStartTime,
"Animation start time should remain unchanged when the scroller changes" +
" position."
);
assert_times_equal(
animation.currentTime,
animation.timeline.currentTime - animation.startTime,
"Animation current time should return to a value equal to" +
" (timeline.currentTime - animation.startTime) after timeline scroll" +
" source has been scrolled."
);
}, 'Set Animation current time then scroll.');
</script>
</body>