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>
<head>
<meta charset=utf-8>
<title>Test Mozilla-specific discrete animatable properties</title>
<script type="application/javascript" src="../testcommon.js"></script>
</head>
<body>
<script>
"use strict";
const gMozillaSpecificProperties = {
"-moz-box-align": {
// https://developer.mozilla.org/en/docs/Web/CSS/box-align
from: "center",
to: "stretch"
},
"-moz-box-direction": {
// https://developer.mozilla.org/en/docs/Web/CSS/box-direction
from: "reverse",
to: "normal"
},
"-moz-box-ordinal-group": {
// https://developer.mozilla.org/en/docs/Web/CSS/box-ordinal-group
from: "1",
to: "5"
},
"-moz-box-orient": {
// https://www.w3.org/TR/css-flexbox-1/
from: "horizontal",
to: "vertical"
},
"-moz-box-pack": {
// https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-pack
from: "center",
to: "end"
},
"-moz-float-edge": {
// https://developer.mozilla.org/en/docs/Web/CSS/-moz-float-edge
from: "margin-box",
to: "content-box"
},
"-moz-force-broken-image-icon": {
// https://developer.mozilla.org/en/docs/Web/CSS/-moz-force-broken-image-icon
from: "1",
to: "0"
},
"-moz-text-size-adjust": {
// https://drafts.csswg.org/css-size-adjust/#propdef-text-size-adjust
from: "none",
to: "auto"
},
"-webkit-text-stroke-width": {
// https://compat.spec.whatwg.org/#propdef--webkit-text-stroke-width
from: "10px",
to: "50px"
}
}
for (let property in gMozillaSpecificProperties) {
const testData = gMozillaSpecificProperties[property];
const from = testData.from;
const to = testData.to;
const idlName = propertyToIDL(property);
const keyframes = {};
keyframes[idlName] = [from, to];
test(t => {
const div = addDiv(t);
const animation = div.animate(keyframes,
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: from.toLowerCase() },
{ time: 499, expected: from.toLowerCase() },
{ time: 500, expected: to.toLowerCase() },
{ time: 1000, expected: to.toLowerCase() }]);
}, property + " should animate between '"
+ from + "' and '" + to + "' with linear easing");
test(function(t) {
// Easing: http://cubic-bezier.com/#.68,0,1,.01
// With this curve, we don't reach the 50% point until about 95% of
// the time has expired.
const div = addDiv(t);
const animation = div.animate(keyframes,
{ duration: 1000, fill: "both",
easing: "cubic-bezier(0.68,0,1,0.01)" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: from.toLowerCase() },
{ time: 940, expected: from.toLowerCase() },
{ time: 960, expected: to.toLowerCase() }]);
}, property + " should animate between '"
+ from + "' and '" + to + "' with effect easing");
test(function(t) {
// Easing: http://cubic-bezier.com/#.68,0,1,.01
// With this curve, we don't reach the 50% point until about 95% of
// the time has expired.
keyframes.easing = "cubic-bezier(0.68,0,1,0.01)";
const div = addDiv(t);
const animation = div.animate(keyframes,
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: from.toLowerCase() },
{ time: 940, expected: from.toLowerCase() },
{ time: 960, expected: to.toLowerCase() }]);
}, property + " should animate between '"
+ from + "' and '" + to + "' with keyframe easing");
}
function testAnimationSamples(animation, idlName, testSamples) {
const target = animation.effect.target;
testSamples.forEach(testSample => {
animation.currentTime = testSample.time;
assert_equals(getComputedStyle(target)[idlName], testSample.expected,
"The value should be " + testSample.expected +
" at " + testSample.time + "ms");
});
}
done();
</script>
</body>
|
