Source code
Revision control
Copy as Markdown
Other Tools
<!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": {
from: "center",
to: "stretch"
},
"-moz-box-direction": {
from: "reverse",
to: "normal"
},
"-moz-box-ordinal-group": {
from: "1",
to: "5"
},
"-moz-box-orient": {
from: "horizontal",
to: "vertical"
},
"-moz-box-pack": {
from: "center",
to: "end"
},
"-moz-float-edge": {
from: "margin-box",
to: "content-box"
},
"-moz-force-broken-image-icon": {
from: "1",
to: "0"
},
"-moz-text-size-adjust": {
from: "none",
to: "auto"
},
"-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) {
// 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) {
// 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>