166 lines
5.7 KiB
HTML
166 lines
5.7 KiB
HTML
<!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-appearance": {
|
|
// https://drafts.csswg.org/css-align/#propdef-align-content
|
|
from: "button",
|
|
to: "none"
|
|
},
|
|
"-moz-border-bottom-colors": {
|
|
from: "rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)",
|
|
to: "rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0)"
|
|
},
|
|
"-moz-border-left-colors": {
|
|
from: "rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)",
|
|
to: "rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0)"
|
|
},
|
|
"-moz-border-right-colors": {
|
|
from: "rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)",
|
|
to: "rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0)"
|
|
},
|
|
"-moz-border-top-colors": {
|
|
from: "rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)",
|
|
to: "rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0)"
|
|
},
|
|
"-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: "5"
|
|
},
|
|
"image-rendering": {
|
|
// https://drafts.csswg.org/css-images-3/#propdef-image-rendering
|
|
from: "-moz-crisp-edges",
|
|
to: "auto"
|
|
},
|
|
"-moz-stack-sizing": {
|
|
// https://developer.mozilla.org/en/docs/Web/CSS/-moz-stack-sizing
|
|
from: "ignore",
|
|
to: "stretch-to-fit"
|
|
},
|
|
"-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 propertyToIDL(property) {
|
|
var prefixMatch = property.match(/^-(\w+)-/);
|
|
if (prefixMatch) {
|
|
var prefix = prefixMatch[1] === "moz" ? "Moz" : prefixMatch[1];
|
|
property = prefix + property.substring(prefixMatch[0].length - 1);
|
|
}
|
|
// https://drafts.csswg.org/cssom/#css-property-to-idl-attribute
|
|
return property.replace(/-([a-z])/gi, function(str, group) {
|
|
return group.toUpperCase();
|
|
});
|
|
}
|
|
|
|
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>
|