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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
|
<!doctype html>
<meta charset=utf-8>
<title>KeyframeEffect interface: style change events</title>
<link rel="help"
href="https://drafts.csswg.org/web-animations-1/#model-liveness">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
// Test that each property defined in the KeyframeEffect interface does not
// produce style change events.
//
// There are two types of tests:
//
// MakeInEffectTest
//
// For properties that are able to cause the KeyframeEffect to start
// affecting the CSS 'opacity' property.
//
// This function takes either:
//
// (a) A function that makes the passed-in KeyframeEffect affect the
// 'opacity' property.
//
// (b) An object with the following format:
//
// {
// setup: elem => { /* return Animation */ }
// test: effect => { /* make |effect| affect 'opacity' */ }
// }
//
// If the latter form is used, the setup function should return an Animation
// whose KeyframeEffect does NOT (yet) affect the 'opacity' property (or is
// NOT yet in-effect). Otherwise, the transition we use to detect if a style
// change event has occurred will never have a chance to be triggered (since
// the animated style will clobber both before-change and after-change
// style).
//
// UsePropertyTest
//
// For properties that cannot cause the KeyframeEffect to start affecting the
// CSS 'opacity' property.
//
// The shape of the parameter to the UsePropertyTest is identical to the
// MakeInEffectTest. The only difference is that the function (or 'test'
// function of the object format is used) does not need to make the
// KeyframeEffect affect the CSS 'opacity' property, but simply needs to
// get/set the property under test.
const MakeInEffectTest = testFuncOrObj => {
let test, setup;
if (typeof testFuncOrObj === 'function') {
test = testFuncOrObj;
} else {
test = testFuncOrObj.test;
if (typeof testFuncOrObj.setup === 'function') {
setup = testFuncOrObj.setup;
}
}
if (!setup) {
setup = elem =>
elem.animate({ color: ['blue', 'green'] }, 100 * MS_PER_SEC);
}
return { test, setup };
};
const UsePropertyTest = testFuncOrObj => {
const { test, setup } = MakeInEffectTest(testFuncOrObj);
let coveringAnimation;
return {
setup: elem => {
coveringAnimation = new Animation(
new KeyframeEffect(elem, { opacity: [0, 1] }, 100 * MS_PER_SEC)
);
return setup(elem);
},
test: effect => {
test(effect);
coveringAnimation.play();
},
};
};
const tests = {
getTiming: UsePropertyTest(effect => effect.getTiming()),
getComputedTiming: UsePropertyTest(effect => effect.getComputedTiming()),
updateTiming: MakeInEffectTest({
// Initially put the effect in its before phase (with no fill mode)...
setup: elem =>
elem.animate(
{ opacity: [0.5, 1] },
{
duration: 100 * MS_PER_SEC,
delay: 100 * MS_PER_SEC,
}
),
// ... so that when the delay is removed, it begins to affect the opacity.
test: effect => {
effect.updateTiming({ delay: 0 });
},
}),
get target() {
let targetElem;
return MakeInEffectTest({
setup: (elem, t) => {
targetElem = elem;
const targetB = createDiv(t);
return targetB.animate({ opacity: [0.5, 1] }, 100 * MS_PER_SEC);
},
test: effect => {
effect.target = targetElem;
},
});
},
pseudoElement: MakeInEffectTest({
setup: elem => elem.animate(
{opacity: [0.5, 1]},
{duration: 100 * MS_PER_SEC, pseudoElement: '::before'}
),
test: effect => {
effect.pseudoElement = null;
},
}),
iterationComposite: UsePropertyTest(effect => {
// Get iterationComposite
effect.iterationComposite;
// Set iterationComposite
effect.iterationComposite = 'accumulate';
}),
composite: UsePropertyTest(effect => {
// Get composite
effect.composite;
// Set composite
effect.composite = 'add';
}),
getKeyframes: UsePropertyTest(effect => effect.getKeyframes()),
setKeyframes: MakeInEffectTest(effect =>
effect.setKeyframes({ opacity: [0.5, 1] })
),
get ['KeyframeEffect constructor']() {
let originalElem;
let animation;
return UsePropertyTest({
setup: elem => {
originalElem = elem;
// Return a dummy animation so the caller has something to wait on
return elem.animate(null);
},
test: () =>
new KeyframeEffect(
originalElem,
{ opacity: [0.5, 1] },
100 * MS_PER_SEC
),
});
},
get ['KeyframeEffect copy constructor']() {
let effectToClone;
return UsePropertyTest({
setup: elem => {
effectToClone = new KeyframeEffect(
elem,
{ opacity: [0.5, 1] },
100 * MS_PER_SEC
);
// Return a dummy animation so the caller has something to wait on
return elem.animate(null);
},
test: () => new KeyframeEffect(effectToClone),
});
},
};
// Check that each enumerable property and the constructors follow the
// expected behavior with regards to triggering style change events.
const properties = [
...Object.keys(AnimationEffect.prototype),
...Object.keys(KeyframeEffect.prototype),
'KeyframeEffect constructor',
'KeyframeEffect copy constructor',
];
test(() => {
for (const property of Object.keys(tests)) {
assert_in_array(
property,
properties,
`Test property '${property}' should be one of the properties on ` +
' KeyframeEffect'
);
}
}, 'All property keys are recognized');
for (const key of properties) {
promise_test(async t => {
assert_own_property(tests, key, `Should have a test for '${key}' property`);
const { setup, test } = tests[key];
// Setup target element
const div = createDiv(t);
let gotTransition = false;
div.addEventListener('transitionrun', () => {
gotTransition = true;
});
// Setup animation
const animation = setup(div, t);
// Setup transition start point
div.style.transition = 'opacity 100s';
getComputedStyle(div).opacity;
// Update specified style but don't flush
div.style.opacity = '0.5';
// Trigger the property
test(animation.effect);
// If the test function produced a style change event it will have triggered
// a transition.
// Wait for the animation to start and then for at least one animation
// frame to give the transitionrun event a chance to be dispatched.
await animation.ready;
await waitForAnimationFrames(1);
assert_false(gotTransition, 'A transition should NOT have been triggered');
}, `KeyframeEffect.${key} does NOT trigger a style change event`);
}
</script>
</body>
|
