--- 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
@@ -12,264 +12,519 @@ html {
}
</style>
<body>
<div id="log"></div>
<script>
"use strict";
var gCSSProperties = {
- "align-content": [
+ "align-content": {
// https://drafts.csswg.org/css-align/#propdef-align-content
- discrete("flex-start", "flex-end")
- ],
- "align-items": [
+ tests: [
+ discrete("flex-start", "flex-end")
+ ]
+ },
+ "align-items": {
// https://drafts.csswg.org/css-align/#propdef-align-items
- discrete("flex-start", "flex-end")
- ],
- "align-self": [
+ tests: [
+ discrete("flex-start", "flex-end")
+ ]
+ },
+ "align-self": {
// https://drafts.csswg.org/css-align/#propdef-align-self
- discrete("flex-start", "flex-end")
- ],
- "flex-basis": [
+ tests: [
+ discrete("flex-start", "flex-end")
+ ]
+ },
+ "clip-rule": {
+ // https://drafts.fxtf.org/css-masking-1/#propdef-clip-rule
+ tests: [
+ discrete("evenodd", "nonzero")
+ ]
+ },
+ "color-interpolation": {
+ // https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty
+ tests: [
+ discrete("linearRGB", "auto")
+ ]
+ },
+ "color-interpolation-filters": {
+ // https://drafts.fxtf.org/filters-1/#propdef-color-interpolation-filters
+ tests: [
+ discrete("sRGB", "linearRGB")
+ ]
+ },
+ "dominant-baseline": {
+ // https://drafts.csswg.org/css-inline/#propdef-dominant-baseline
+ tests: [
+ discrete("ideographic", "alphabetic")
+ ]
+ },
+ "fill-rule": {
+ // https://svgwg.org/svg2-draft/painting.html#FillRuleProperty
+ tests: [
+ discrete("evenodd", "nonzero")
+ ]
+ },
+ "flex-basis": {
// https://drafts.csswg.org/css-flexbox/#propdef-flex-basis
- lengthPercentageOrCalc(),
- discrete("auto", "10px")
- ],
- "flex-direction": [
+ tests: [
+ lengthPercentageOrCalc(),
+ discrete("auto", "10px")
+ ]
+ },
+ "flex-direction": {
// https://drafts.csswg.org/css-flexbox/#propdef-flex-direction
- discrete("row", "row-reverse")
- ],
- "flex-grow": [
+ tests: [
+ discrete("row", "row-reverse")
+ ]
+ },
+ "flex-grow": {
// https://drafts.csswg.org/css-flexbox/#flex-grow-property
- positiveNumber()
- ],
- "flex-shrink": [
+ tests: [
+ positiveNumber()
+ ]
+ },
+ "flex-shrink": {
// https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink
- positiveNumber()
- ],
- "flex-wrap": [
+ tests: [
+ positiveNumber()
+ ]
+ },
+ "flex-wrap": {
// https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap
- discrete("nowrap", "wrap")
- ],
- "justify-content": [
+ tests: [
+ discrete("nowrap", "wrap")
+ ]
+ },
+ "font-style": {
+ // https://drafts.csswg.org/css-fonts/#propdef-font-style
+ tests: [
+ discrete("italic", "oblique")
+ ]
+ },
+ "image-rendering": {
+ // https://drafts.csswg.org/css-images/#propdef-image-rendering
+ tests: [
+ discrete("optimizeQuality", "pixelated")
+ ]
+ },
+ "justify-content": {
// https://drafts.csswg.org/css-align/#propdef-justify-content
- discrete("baseline", "last-baseline")
- ],
- "justify-items": [
+ tests: [
+ discrete("baseline", "last-baseline")
+ ]
+ },
+ "justify-items": {
// https://drafts.csswg.org/css-align/#propdef-justify-items
- discrete("baseline", "last-baseline")
- ],
- "justify-self": [
+ tests: [
+ discrete("baseline", "last-baseline")
+ ]
+ },
+ "justify-self": {
// https://drafts.csswg.org/css-align/#propdef-justify-self
- discrete("baseline", "last-baseline")
- ],
- "order": [
+ tests: [
+ discrete("baseline", "last-baseline")
+ ]
+ },
+ "mask-type": {
+ // https://drafts.fxtf.org/css-masking-1/#propdef-mask-type
+ tests: [
+ discrete("alpha", "luminance")
+ ]
+ },
+ "order": {
// https://drafts.csswg.org/css-flexbox/#propdef-order
- integer()
- ],
+ tests: [
+ integer()
+ ]
+ },
+ "pointer-events": {
+ // https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty
+ tests: [
+ discrete("fill", "none")
+ ]
+ },
+ "ruby-align": {
+ // https://drafts.csswg.org/css-ruby-1/#propdef-ruby-align
+ tests: [
+ discrete("start", "center")
+ ]
+ },
+ "ruby-position": {
+ // https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position
+ tests: [
+ discrete("under", "over")
+ ],
+ tagName: "ruby"
+ },
+ "shape-rendering": {
+ // https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty
+ tests: [
+ discrete("optimizeSpeed", "crispEdges")
+ ]
+ },
+ "stroke-linecap": {
+ // https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty
+ tests: [
+ discrete("round", "square")
+ ]
+ },
+ "stroke-linejoin": {
+ // https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty
+ tests: [
+ discrete("round", "miter")
+ ],
+ tagName: "rect"
+ },
+ "text-anchor": {
+ // https://svgwg.org/svg2-draft/text.html#TextAnchorProperty
+ tests: [
+ discrete("middle", "end")
+ ]
+ },
+ "text-combine-upright": {
+ // https://drafts.csswg.org/css-writing-modes-3/#propdef-text-combine-upright
+ tests: [
+ discrete("all", "digits")
+ ]
+ },
+ "text-decoration-line": {
+ // https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration-line
+ tests: [
+ discrete("underline", "overline")
+ ]
+ },
+ "text-orientation": {
+ // https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation
+ tests: [
+ discrete("upright", "sideways")
+ ]
+ },
+ "text-rendering": {
+ // https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty
+ tests: [
+ discrete("optimizeSpeed", "optimizeLegibility")
+ ]
+ },
+ "vector-effect": {
+ // https://svgwg.org/svg2-draft/coords.html#VectorEffectProperty
+ tests: [
+ discrete("none", "non-scaling-stroke")
+ ]
+ },
+ "visibility": {
+ // https://drafts.csswg.org/css2/visufx.html#propdef-visibility
+ tests: [
+ visibility()
+ ]
+ },
+ "word-break": {
+ // https://drafts.csswg.org/css-text-3/#propdef-word-break
+ tests: [
+ discrete("keep-all", "break-all")
+ ]
+ },
+ "writing-mode": {
+ // https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode
+ tests: [
+ discrete("vertical-rl", "sideways-rl")
+ ]
+ },
}
for (var property in gCSSProperties) {
if (!isSupported(property)) {
continue;
}
- var testFunctions = gCSSProperties[property];
- testFunctions.forEach(function(testFunction) {
- testFunction(property);
+ var testData = gCSSProperties[property];
+ testData.tests.forEach(function(testFunction) {
+ testFunction(property, testData);
});
}
function discrete(from, to) {
- return function(property) {
- var idlName = propertyToIDL(property);
+ return function(property, options) {
test(function(t) {
- var div = createDiv(t);
- var keyframe = {};
- keyframe[idlName] = [from, to];
- var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
- testAnimationSamples(animation, idlName, [{ time: 0, expected: from },
- { time: 499, expected: from },
- { time: 500, expected: to },
- { time: 1000, expected: to }]);
+ var idlName = propertyToIDL(property);
+ var keyframes = {};
+ keyframes[idlName] = [from, to];
+ var target = createElement(t, options.tagName);
+ var animation = target.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 + " uses discrete animation when animating between '"
+ from + "' and '" + to + "' with linear easing");
test(function(t) {
- var div = createDiv(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 keyframe = {};
- keyframe[idlName] = [from, to];
- var animation = div.animate(keyframe,
- { duration: 1000, fill: "both",
- easing: "cubic-bezier(0.68,0,1,0.01)" });
- testAnimationSamples(animation, idlName, [{ time: 0, expected: from },
- { time: 940, expected: from },
- { time: 960, expected: to }]);
+ var idlName = propertyToIDL(property);
+ var keyframes = {};
+ keyframes[idlName] = [from, to];
+ var target = createElement(t, options.tagName);
+ var animation = target.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 + " uses discrete animation when animating between '"
+ from + "' and '" + to + "' with effect easing");
test(function(t) {
- var div = createDiv(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 keyframe = {};
- keyframe[idlName] = [from, to];
- keyframe.easing = "cubic-bezier(0.68,0,1,0.01)";
- var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
- testAnimationSamples(animation, idlName, [{ time: 0, expected: from },
- { time: 940, expected: from },
- { time: 960, expected: to }]);
+ var idlName = propertyToIDL(property);
+ var keyframes = {};
+ keyframes[idlName] = [from, to];
+ keyframes.easing = "cubic-bezier(0.68,0,1,0.01)";
+ var target = createElement(t, options.tagName);
+ var animation = target.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 + " uses discrete animation when animating between '"
+ from + "' and '" + to + "' with keyframe easing");
}
}
function length() {
- return function(property) {
+ return function(property, options) {
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframe = {};
- keyframe[idlName] = ["10px", "50px"];
- var div = createDiv(t);
- var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
+ var keyframes = {};
+ keyframes[idlName] = ["10px", "50px"];
+ var target = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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 keyframe = {};
- keyframe[idlName] = ["1rem", "5rem"];
- var div = createDiv(t);
- var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
+ var keyframes = {};
+ keyframes[idlName] = ["1rem", "5rem"];
+ var target = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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) {
+ return function(property, options) {
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframe = {};
- keyframe[idlName] = ["10%", "50%"];
- var div = createDiv(t);
- var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
+ var keyframes = {};
+ keyframes[idlName] = ["10%", "50%"];
+ var target = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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) {
+ return function(property, options) {
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframe = {};
- keyframe[idlName] = [-2, 2];
- var div = createDiv(t);
- var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
- testAnimationSamples(animation, idlName, [{ time: 0, expected: "-2" },
- { time: 500, expected: "0" },
- { time: 1000, expected: "2" }]);
+ var keyframes = {};
+ keyframes[idlName] = [-2, 2];
+ var target = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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) {
+ return function(property, options) {
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframe = {};
- keyframe[idlName] = [1.1, 1.5];
- var div = createDiv(t);
- var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
+ var keyframes = {};
+ keyframes[idlName] = [1.1, 1.5];
+ var target = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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) {
- length()(property);
- percentage()(property);
+ return function(property, options) {
+ length()(property, options);
+ percentage()(property, options);
test(function(t) {
var idlName = propertyToIDL(property);
- var keyframe = {};
- keyframe[idlName] = ["10px", "20%"];
- var div = createDiv(t);
- var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
+ var keyframes = {};
+ keyframes[idlName] = ["10px", "20%"];
+ var target = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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 keyframe = {};
- keyframe[idlName] = ["10%", "2em"];
- var div = createDiv(t);
- var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
+ var keyframes = {};
+ keyframes[idlName] = ["10%", "2em"];
+ var target = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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 keyframe = {};
- keyframe[idlName] = ["1em", "2rem"];
- var div = createDiv(t);
- var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
+ var keyframes = {};
+ keyframes[idlName] = ["1em", "2rem"];
+ var target = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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 keyframe = {};
- keyframe[idlName] = ["10px", "calc(1em + 20%)"];
- var div = createDiv(t);
- var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
+ var keyframes = {};
+ keyframes[idlName] = ["10px", "calc(1em + 20%)"];
+ var target = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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 keyframe = {};
- keyframe[idlName] = ["calc(10px + 10%)", "calc(1em + 1rem + 20%)"];
- var div = createDiv(t);
- var animation = div.animate(keyframe, { duration: 1000, fill: "both" });
+ var keyframes = {};
+ keyframes[idlName] = ["calc(10px + 10%)", "calc(1em + 1rem + 20%)"];
+ var target = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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 = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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 = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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");
+ [{ 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 = createElement(t, options.tagName);
+ var animation = target.animate(keyframes,
+ { 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 = createElement(t, options.tagName);
+ var animation =
+ target.animate(keyframes,
+ { 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" },
+ { time: 630, expected: "hidden" },
+ { time: 1000, expected: "hidden" }]);
+ }, property + " uses visibility animation when animating "
+ + "from 'visible' to 'hidden' with easeInOutBack easing");
}
}
function testAnimationSamples(animation, idlName, testSamples) {
var target = animation.effect.target;
testSamples.forEach(function(testSample) {
animation.currentTime = testSample.time;
assert_equals(getComputedStyle(target)[idlName], testSample.expected,