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
|
'use strict';
function test_interpolation(settings, expectations) {
test(function(){
assert_true(CSS.supports(settings.property, settings.from), 'Value "' + settings.from + '" is supported by ' + settings.property);
assert_true(CSS.supports(settings.property, settings.to), 'Value "' + settings.to + '" is supported by ' + settings.property);
}, '"' + settings.from + '" and "' + settings.to + '" are valid ' + settings.property + ' values');
const container = document.getElementById('container');
for (let i = 0; i < expectations.length; ++i) {
const progress = expectations[i].at;
const expectation = expectations[i].expect;
const animationId = 'anim' + i;
const targetId = 'target' + i;
const referenceId = 'reference' + i;
test(function(){
assert_true(CSS.supports(settings.property, expectation), 'Value "' + expectation + '" is supported by ' + settings.property);
const target = document.createElementNS('http://www.w3.org/2000/svg', 'g');
target.id = targetId;
container.appendChild(target);
const reference = document.createElementNS('http://www.w3.org/2000/svg', 'g');
reference.id = referenceId;
container.appendChild(reference);
assert_equals(getComputedStyle(target)[settings.property], getComputedStyle(reference)[settings.property]);
// Create an animation of length 2s that starts at -1s so the current time of 0s is
// exactly halfway through the animation. A cubic bezier timing function is used that
// evaluates to |progress| at the current time (halfway through the animation).
// Cubic bezier evaluates to |progress| at 50%.
const y = (8 * progress - 1) / 6;
const timing_function = 'cubic-bezier(0, ' + y + ', 1, ' + y + ')';
const stylesheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
stylesheet.textContent =
'#' + targetId + ' {\n' +
' animation: 2s ' + timing_function + ' -1s paused ' + animationId + ';\n' +
'}\n' +
'@keyframes ' + animationId + ' {\n' +
' 0% { ' + settings.property + ': ' + settings.from + '; }\n' +
' 100% { ' + settings.property + ': ' + settings.to + '; }\n' +
'}\n' +
'#' + referenceId + ' {\n' +
' ' + settings.property + ': ' + expectation + ';\n' +
'}\n';
container.appendChild(stylesheet);
assert_equals(getComputedStyle(target)[settings.property], getComputedStyle(reference)[settings.property]);
assert_equals(getComputedStyle(target)[settings.property], expectation);
container.removeChild(target);
container.removeChild(reference);
container.removeChild(stylesheet);
}, 'Animation between "' + settings.from + '" and "' + settings.to + '" at progress ' + progress);
}
}
function test_no_interpolation(settings) {
const expectFrom = [-1, 0, 0.125].map(function (progress) {
return {at: progress, expect: settings.from};
});
const expectTo = [0.875, 1, 2].map(function (progress) {
return {at: progress, expect: settings.to};
});
test_interpolation(settings, expectFrom.concat(expectTo));
}
|
