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
|
<!doctype html>
<meta charset=utf-8>
<title>KeyframeEffect.setKeyframes() for CSS animations</title>
<!-- TODO: Add a more specific link for this once it is specified. -->
<link rel="help" href="https://drafts.csswg.org/css-animations-2/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim-simple {
from { left: 0px }
to { left: 100px }
}
</style>
<body>
<div id="log"></div>
<script>
"use strict";
// Note that the sanity check that getKeyframes() normally DOES return the
// updated keyframes is contained in KeyframeEffect-getKeyframes.html.
test(t => {
const div = addDiv(t);
// Add custom @keyframes rule
const stylesheet = document.styleSheets[0];
const keyframes = '@keyframes anim-custom { to { left: 100px } }';
const ruleIndex = stylesheet.insertRule(keyframes, 0);
const keyframesRule = stylesheet.cssRules[ruleIndex];
t.add_cleanup(function() {
stylesheet.deleteRule(ruleIndex);
});
div.style.animation = 'anim-custom 100s';
// Update the keyframes via the API
const animation = div.getAnimations()[0];
animation.effect.setKeyframes({ left: '200px' });
// Then update them via style
keyframesRule.deleteRule(0);
keyframesRule.appendRule('to { left: 300px }');
// The result should be the keyframes as set by the API, not via style.
const frames = animation.effect.getKeyframes();
assert_frames_equal(
frames[frames.length - 1],
{
offset: null,
computedOffset: 1,
easing: 'linear',
composite: 'auto',
left: '200px',
},
'Keyframes reflect the value set via setKeyframes'
);
}, 'KeyframeEffect.setKeyframes() causes subsequent changes to @keyframes'
+ ' rules to be ignored');
test(t => {
const div = addDiv(t);
div.style.animation = 'anim-simple 100s';
const animation = div.getAnimations()[0];
assert_equals(animation.effect.getKeyframes()[0].easing, 'ease');
animation.effect.setKeyframes({ left: ['200px', '300px'] });
assert_equals(animation.effect.getKeyframes()[0].easing, 'linear');
div.style.animationTimingFunction = 'ease-in';
getComputedStyle(div).animationTimingFunction;
assert_equals(
animation.effect.getKeyframes()[0].easing,
'linear',
'Easing should be the easing set by the API'
);
}, 'KeyframeEffect.setKeyframes() causes subsequent changes to'
+ ' animation-timing-function to be ignored');
test(t => {
const div = addDiv(t);
const stylesheet = document.styleSheets[0];
const keyframes = '@keyframes anim-custom { to { left: 100px } }';
const ruleIndex = stylesheet.insertRule(keyframes, 0);
const keyframesRule = stylesheet.cssRules[ruleIndex];
t.add_cleanup(function() {
stylesheet.deleteRule(ruleIndex);
});
div.style.animation = 'anim-custom 100s';
// Try updating in a way that throws an error
const animation = div.getAnimations()[0];
assert_throws_js(TypeError, () => {
animation.effect.setKeyframes({ left: '200px', offset: 'yer' });
});
keyframesRule.deleteRule(0);
keyframesRule.appendRule('to { left: 300px }');
// The result should be the keyframes as set via style.
const frames = animation.effect.getKeyframes();
assert_frames_equal(
frames[frames.length - 1],
{
offset: 1,
computedOffset: 1,
easing: 'ease',
composite: 'auto',
left: '300px',
},
'Keyframes reflect the value set via style'
);
}, 'KeyframeEffect.setKeyframes() should NOT cause subsequent changes to'
+ ' @keyframes rules to be ignored if it threw');
</script>
</body>
|
