--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/type-per-property.html
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/type-per-property.html
@@ -859,278 +859,246 @@ for (var property in gCSSProperties) {
testFunction(property, testData);
});
}
function discrete(from, to) {
return function(property, options) {
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = [from, to];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: [from, to] },
{ 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 + " uses discrete animation when animating 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.
var idlName = propertyToIDL(property);
var keyframes = {};
- keyframes[idlName] = [from, to];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: [from, to] },
{ 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 + " uses discrete animation when animating 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.
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = [from, to];
- keyframes.easing = "cubic-bezier(0.68,0,1,0.01)";
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: [from, to],
+ easing: "cubic-bezier(0.68,0,1,0.01)" },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: from.toLowerCase() },
{ time: 940, expected: from.toLowerCase() },
{ time: 960, expected: to.toLowerCase() }]);
}, property + " uses discrete animation when animating between '"
+ from + "' and '" + to + "' with keyframe easing");
}
}
function length() {
return function(property, options) {
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = ["10px", "50px"];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: ["10px", "50px"] },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "10px" },
{ time: 500, expected: "30px" },
{ time: 1000, expected: "50px" }]);
}, property + " supports animating as a length");
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = ["1rem", "5rem"];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: ["1rem", "5rem"] },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "10px" },
{ time: 500, expected: "30px" },
{ time: 1000, expected: "50px" }]);
}, property + " supports animating as a length of rem");
}
}
function percentage() {
return function(property, options) {
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = ["10%", "50%"];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: ["10%", "50%"] },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "10%" },
{ time: 500, expected: "30%" },
{ time: 1000, expected: "50%" }]);
}, property + " supports animating as a percentage");
}
}
function integer() {
return function(property, options) {
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = [-2, 2];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: [-2, 2] },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "-2" },
{ time: 500, expected: "0" },
{ time: 1000, expected: "2" }]);
}, property + " supports animating as an integer");
}
}
function positiveNumber() {
return function(property, options) {
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = [1.1, 1.5];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: [1.1, 1.5] },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "1.1" },
{ time: 500, expected: "1.3" },
{ time: 1000, expected: "1.5" }]);
}, property + " supports animating as a positive number");
}
}
function lengthPercentageOrCalc() {
return function(property, options) {
length()(property, options);
percentage()(property, options);
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = ["10px", "20%"];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: ["10px", "20%"] },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "10px" },
{ time: 500, expected: "calc(5px + 10%)" },
{ time: 1000, expected: "20%" }]);
}, property + " supports animating as combination units 'px' and '%'");
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = ["10%", "2em"];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: ["10%", "2em"] },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "10%" },
{ time: 500, expected: "calc(10px + 5%)" },
{ time: 1000, expected: "20px" }]);
}, property + " supports animating as combination units '%' and 'em'");
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = ["1em", "2rem"];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: ["1em", "2rem"] },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "10px" },
{ time: 500, expected: "15px" },
{ time: 1000, expected: "20px" }]);
}, property + " supports animating as combination units 'em' and 'rem'");
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = ["10px", "calc(1em + 20%)"];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: ["10px", "calc(1em + 20%)"] },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "10px" },
{ time: 500, expected: "calc(10px + 10%)" },
{ time: 1000, expected: "calc(10px + 20%)" }]);
}, property + " supports animating as combination units 'px' and 'calc'");
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = ["calc(10px + 10%)", "calc(1em + 1rem + 20%)"];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
- { duration: 1000, fill: "both" });
+ var animation = target.animate(
+ { [idlName]: ["calc(10px + 10%)", "calc(1em + 1rem + 20%)"] },
+ { duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0,
expected: "calc(10px + 10%)" },
{ time: 500,
expected: "calc(15px + 15%)" },
{ time: 1000,
expected: "calc(20px + 20%)" }]);
}, property + " supports animating as a calc");
}
}
function visibility() {
return function(property, options) {
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = ["visible", "hidden"];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: ["visible", "hidden"] },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "visible" },
{ time: 999, expected: "visible" },
{ time: 1000, expected: "hidden" }]);
}, property + " uses visibility animation when animating "
+ "from 'visible' to 'hidden'");
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = ["hidden", "visible"];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: ["hidden", "visible"] },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "hidden" },
{ time: 1, expected: "visible" },
{ time: 1000, expected: "visible" }]);
}, property + " uses visibility animation when animating "
+ "from 'hidden' to 'visible'");
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = ["hidden", "collapse"];
var target = createTestElement(t, options.tagName);
- var animation = target.animate(keyframes,
+ var animation = target.animate({ [idlName]: ["hidden", "collapse"] },
{ duration: 1000, fill: "both" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "hidden" },
{ time: 499, expected: "hidden" },
{ time: 500, expected: "collapse" },
{ time: 1000, expected: "collapse" }]);
}, property + " uses visibility animation when animating "
+ "from 'hidden' to 'collapse'");
test(function(t) {
// Easing: http://cubic-bezier.com/#.68,-.55,.26,1.55
// With this curve, the value is less than 0 till about 34%
// also more than 1 since about 63%
var idlName = propertyToIDL(property);
- var keyframes = {};
- keyframes[idlName] = ["visible", "hidden"];
var target = createTestElement(t, options.tagName);
var animation =
- target.animate(keyframes,
+ target.animate({ [idlName]: ["visible", "hidden"] },
{ duration: 1000, fill: "both",
easing: "cubic-bezier(0.68, -0.55, 0.26, 1.55)" });
testAnimationSamples(animation, idlName,
[{ time: 0, expected: "visible" },
{ time: 1, expected: "visible" },
{ time: 330, expected: "visible" },
{ time: 340, expected: "visible" },
{ time: 620, expected: "visible" },