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
|
<!doctype html>
<meta charset=utf-8>
<title>CSSTransition.currentTime</title>
<!-- TODO: Add a more specific link for this once it is specified. -->
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/helper.js"></script>
<div id="log"></div>
<script>
'use strict';
const marginLeft = div => parseFloat(getComputedStyle(div).marginLeft);
promise_test(async t => {
const div = addDiv(t, {
style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
});
getComputedStyle(div).marginLeft;
div.style.marginLeft = '200px';
const animation = div.getAnimations()[0];
assert_equals(
animation.currentTime,
0,
'currentTime should initially be zero'
);
await animation.ready;
const seekTime = 150 * MS_PER_SEC;
animation.currentTime = seekTime;
assert_time_equals_literal(
animation.currentTime,
seekTime,
'currentTime is updated'
);
assert_equals(getComputedStyle(div).marginLeft, '150px');
}, 'currentTime can be used to seek a CSS transition');
promise_test(async t => {
const div = addDiv(t, {
style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
});
const eventWatcher = new EventWatcher(t, div, 'transitionend');
getComputedStyle(div).marginLeft;
div.style.marginLeft = '200px';
const animation = div.getAnimations()[0];
await animation.ready;
const marginLeft = () => parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft(div), 100);
animation.currentTime = 100 * MS_PER_SEC;
assert_equals(marginLeft(div), 100);
animation.currentTime = 150 * MS_PER_SEC;
assert_equals(marginLeft(div), 150);
animation.currentTime = 200 * MS_PER_SEC;
await eventWatcher.wait_for('transitionend');
assert_equals(marginLeft(div), 200);
}, 'Skipping forwards through transition');
promise_test(async t => {
const div = addDiv(t, {
style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
});
const eventWatcher = new EventWatcher(t, div, 'transitionend');
getComputedStyle(div).marginLeft;
div.style.marginLeft = '200px';
const animation = div.getAnimations()[0];
await animation.ready;
// Unlike in the case of CSS animations, we cannot skip to the end and skip
// backwards since when we reach the end the transition effect is removed and
// changes to the Animation object no longer affect the element. For
// this reason we only skip forwards as far as the 50% through point.
animation.currentTime = 150 * MS_PER_SEC;
assert_equals(marginLeft(div), 150);
animation.currentTime = 100 * MS_PER_SEC;
assert_equals(marginLeft(div), 100);
}, 'Skipping backwards through transition');
promise_test(async t => {
const div = addDiv(t, {
style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
});
getComputedStyle(div).marginLeft;
div.style.marginLeft = '200px';
const animation = div.getAnimations()[0];
await animation.ready;
assert_throws_js(
TypeError,
() => {
animation.currentTime = null;
},
'Expect TypeError exception on trying to set Animation.currentTime to null'
);
}, 'Setting currentTime to null on a CSS transition throws');
test(t => {
const div = addDiv(t);
div.style.left = '0px';
getComputedStyle(div).transitionProperty;
div.style.transition = 'left 100s ease-in';
div.style.left = '100px';
const transition = div.getAnimations()[0];
// Seek to the middle. Note, this is not equivalent to 50% progress since the
// timing-function is non-linear.
transition.currentTime = 50 * MS_PER_SEC;
const portion = transition.effect.getComputedTiming().progress;
// Reverse the transition.
div.style.left = '0px';
const reversedTransition = div.getAnimations()[0];
// If the transition reversing behavior does not advance the previous
// transition to the time set by currentTime, start and end values will both
// be 0px and no transition will be produced.
assert_not_equals(reversedTransition, undefined,
"A reversed transition is produced");
const expectedDuration = 100 * MS_PER_SEC * portion;
assert_approx_equals(
reversedTransition.effect.getComputedTiming().activeDuration,
expectedDuration,
1,
"The reversed transition has correctly reduced duration"
);
}, "Transition reversing behavior respects currentTime and uses the " +
"transition's current position.");
</script>
|
