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
|
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Tests for setting effects by using Animation.effect</title>
<script src='../testcommon.js'></script>
</head>
<body>
<script type='text/javascript'>
'use strict';
test(function(t) {
var target = addDiv(t);
var anim = new Animation();
anim.effect = new KeyframeEffectReadOnly(target,
{ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
anim.currentTime = 50 * MS_PER_SEC;
assert_equals(getComputedStyle(target).marginLeft, '50px');
}, 'After setting target effect on an animation with null effect, the ' +
'animation still works');
test(function(t) {
var target = addDiv(t);
target.style.marginLeft = '10px';
var anim = target.animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
anim.currentTime = 50 * MS_PER_SEC;
assert_equals(getComputedStyle(target).marginLeft, '50px');
anim.effect = null;
assert_equals(getComputedStyle(target).marginLeft, '10px');
}, 'After setting null target effect, the computed style of the target ' +
'element becomes the initial value');
test(function(t) {
var target = addDiv(t);
var animA = target.animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
var animB = new Animation();
animA.currentTime = 50 * MS_PER_SEC;
animB.currentTime = 20 * MS_PER_SEC;
assert_equals(getComputedStyle(target).marginLeft, '50px',
'original computed style of the target element');
animB.effect = animA.effect;
assert_equals(getComputedStyle(target).marginLeft, '20px',
'new computed style of the target element');
}, 'After setting the target effect from an existing animation, the computed ' +
'style of the target effect should reflect the time of the updated ' +
'animation.');
test(function(t) {
var target = addDiv(t);
target.style.marginTop = '-10px';
var animA = target.animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
var animB = target.animate({ marginTop: [ '0px', '100px' ] },
50 * MS_PER_SEC);
animA.currentTime = 50 * MS_PER_SEC;
animB.currentTime = 10 * MS_PER_SEC;
assert_equals(getComputedStyle(target).marginLeft, '50px',
'original margin-left of the target element');
assert_equals(getComputedStyle(target).marginTop, '20px',
'original margin-top of the target element');
animB.effect = animA.effect;
assert_equals(getComputedStyle(target).marginLeft, '10px',
'new margin-left of the target element');
assert_equals(getComputedStyle(target).marginTop, '-10px',
'new margin-top of the target element');
}, 'After setting target effect with an animation to another animation which ' +
'also has an target effect and both animation effects target to the same ' +
'element, the computed style of this element should reflect the time and ' +
'effect of the animation that was set');
test(function(t) {
var targetA = addDiv(t);
var targetB = addDiv(t);
targetB.style.marginLeft = '-10px';
var animA = targetA.animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
var animB = targetB.animate({ marginLeft: [ '0px', '100px' ] },
50 * MS_PER_SEC);
animA.currentTime = 50 * MS_PER_SEC;
animB.currentTime = 10 * MS_PER_SEC;
assert_equals(getComputedStyle(targetA).marginLeft, '50px',
'original margin-left of the first element');
assert_equals(getComputedStyle(targetB).marginLeft, '20px',
'original margin-left of the second element');
animB.effect = animA.effect;
assert_equals(getComputedStyle(targetA).marginLeft, '10px',
'new margin-left of the first element');
assert_equals(getComputedStyle(targetB).marginLeft, '-10px',
'new margin-left of the second element');
}, 'After setting target effect with an animation to another animation which ' +
'also has an target effect and these animation effects target to ' +
'different elements, the computed styles of the two elements should ' +
'reflect the time and effect of the animation that was set');
test(function(t) {
var target = addDiv(t);
var animA = target.animate({ marginLeft: [ '0px', '100px' ] },
50 * MS_PER_SEC);
var animB = target.animate({ marginTop: [ '0px', '50px' ] },
100 * MS_PER_SEC);
animA.currentTime = 20 * MS_PER_SEC;
animB.currentTime = 30 * MS_PER_SEC;
assert_equals(getComputedStyle(target).marginLeft, '40px');
assert_equals(getComputedStyle(target).marginTop, '15px');
var effectA = animA.effect;
animA.effect = animB.effect;
animB.effect = effectA;
assert_equals(getComputedStyle(target).marginLeft, '60px');
assert_equals(getComputedStyle(target).marginTop, '10px');
}, 'After swapping effects of two playing animations, both animations are ' +
'still running with the same current time');
done();
</script>
</body>
</html>
|
