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
|
<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<body>
<script>
'use strict';
test(t => {
const anim = addDiv(t).animate(
{ marginLeft: ['0px', '10px'] },
{
duration: 100 * MS_PER_SEC,
iterations: 10,
iterationComposite: 'accumulate',
composite: 'add',
}
);
assert_false(
'iterationComposite' in anim.effect,
'The KeyframeEffect.iterationComposite member is not present'
);
assert_false(
'composite' in anim.effect,
'The KeyframeEffect.composite member is not present'
);
}, 'The iterationComposite and composite members are not present on Animation'
+ ' when the compositing pref is disabled');
test(t => {
const div = addDiv(t);
const anim = div.animate(
{ marginLeft: ['0px', '10px'] },
{
duration: 100 * MS_PER_SEC,
iterations: 10,
iterationComposite: 'accumulate',
}
);
anim.pause();
anim.currentTime = 200 * MS_PER_SEC;
assert_equals(
getComputedStyle(div).marginLeft,
'0px',
'Animated style should NOT accumulate'
);
}, 'KeyframeEffectOptions.iterationComposite should be ignored if the'
+ ' compositing pref is disabled');
test(t => {
const div = addDiv(t);
const anim1 = div.animate(
{ marginLeft: ['0px', '100px'] },
{ duration: 100 * MS_PER_SEC }
);
anim1.pause();
anim1.currentTime = 50 * MS_PER_SEC;
const anim2 = div.animate(
{ marginLeft: ['0px', '100px'] },
{ duration: 100 * MS_PER_SEC, composite: 'add' }
);
anim2.pause();
anim2.currentTime = 50 * MS_PER_SEC;
assert_equals(
getComputedStyle(div).marginLeft,
'50px',
'Animations should NOT add together'
);
}, 'KeyframeEffectOptions.composite should be ignored if the'
+ ' compositing pref is disabled');
test(t => {
const div = addDiv(t);
const anim1 = div.animate({ marginLeft: ['0px', '100px'] }, 100 * MS_PER_SEC);
anim1.pause();
anim1.currentTime = 50 * MS_PER_SEC;
const anim2 = div.animate(
[
{ marginLeft: '0px', composite: 'add' },
{ marginLeft: '100px', composite: 'add' },
],
100 * MS_PER_SEC
);
anim2.pause();
anim2.currentTime = 50 * MS_PER_SEC;
assert_equals(
getComputedStyle(div).marginLeft,
'50px',
'Animations should NOT add together'
);
}, 'composite member is ignored on keyframes when using array notation');
test(t => {
const div = addDiv(t);
const anim1 = div.animate(
{ marginLeft: ['0px', '100px'] },
100 * MS_PER_SEC
);
anim1.pause();
anim1.currentTime = 50 * MS_PER_SEC;
const anim2 = div.animate(
{ marginLeft: ['0px', '100px'], composite: ['add', 'add'] },
100 * MS_PER_SEC
);
anim2.pause();
anim2.currentTime = 50 * MS_PER_SEC;
assert_equals(
getComputedStyle(div).marginLeft,
'50px',
'Animations should NOT add together'
);
}, 'composite member is ignored on keyframes when using object notation');
test(t => {
const anim = addDiv(t).animate(
{ marginLeft: ['0px', '10px'] },
100 * MS_PER_SEC
);
for (let frame of anim.effect.getKeyframes()) {
assert_false(
'composite' in frame,
'The BaseComputedKeyframe.composite member is not present'
);
}
}, 'composite member is hidden from the result of ' +
'KeyframeEffect::getKeyframes()');
done();
</script>
</body>
|
