Index: third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/animation-types/type-per-property.html |
diff --git a/third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/animation-types/type-per-property.html b/third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/animation-types/type-per-property.html |
deleted file mode 100644 |
index 683b0093ac4929aec9a8d67b4f0d06b838ef5241..0000000000000000000000000000000000000000 |
--- a/third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/animation-types/type-per-property.html |
+++ /dev/null |
@@ -1,569 +0,0 @@ |
-<!DOCTYPE html> |
-<meta charset=utf-8> |
-<title>Tests for animation types</title> |
-<link rel="help" href="https://w3c.github.io/web-animations/#animation-types"> |
-<script src="/resources/testharness.js"></script> |
-<script src="/resources/testharnessreport.js"></script> |
-<script src="../../testcommon.js"></script> |
-<style> |
-html { |
- font-size: 10px; |
-} |
-</style> |
-<body> |
-<div id="log"></div> |
-<script> |
-"use strict"; |
- |
-var gCSSProperties = { |
- "align-content": { |
- // https://drafts.csswg.org/css-align/#propdef-align-content |
- tests: [ |
- discrete("flex-start", "flex-end") |
- ] |
- }, |
- "align-items": { |
- // https://drafts.csswg.org/css-align/#propdef-align-items |
- tests: [ |
- discrete("flex-start", "flex-end") |
- ] |
- }, |
- "align-self": { |
- // https://drafts.csswg.org/css-align/#propdef-align-self |
- 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 |
- tests: [ |
- lengthPercentageOrCalc(), |
- discrete("auto", "10px") |
- ] |
- }, |
- "flex-direction": { |
- // https://drafts.csswg.org/css-flexbox/#propdef-flex-direction |
- tests: [ |
- discrete("row", "row-reverse") |
- ] |
- }, |
- "flex-grow": { |
- // https://drafts.csswg.org/css-flexbox/#flex-grow-property |
- tests: [ |
- positiveNumber() |
- ] |
- }, |
- "flex-shrink": { |
- // https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink |
- tests: [ |
- positiveNumber() |
- ] |
- }, |
- "flex-wrap": { |
- // https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap |
- 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 |
- tests: [ |
- discrete("baseline", "last-baseline") |
- ] |
- }, |
- "justify-items": { |
- // https://drafts.csswg.org/css-align/#propdef-justify-items |
- tests: [ |
- discrete("baseline", "last-baseline") |
- ] |
- }, |
- "justify-self": { |
- // https://drafts.csswg.org/css-align/#propdef-justify-self |
- 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 |
- 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 testData = gCSSProperties[property]; |
- testData.tests.forEach(function(testFunction) { |
- 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 = 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) { |
- // 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 = 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) { |
- // 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 = 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, options) { |
- test(function(t) { |
- var idlName = propertyToIDL(property); |
- 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 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, options) { |
- test(function(t) { |
- var idlName = propertyToIDL(property); |
- 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, options) { |
- test(function(t) { |
- var idlName = propertyToIDL(property); |
- 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, options) { |
- test(function(t) { |
- var idlName = propertyToIDL(property); |
- 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, options) { |
- length()(property, options); |
- percentage()(property, options); |
- |
- test(function(t) { |
- var idlName = propertyToIDL(property); |
- 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 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 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 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 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: "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, |
- "The value should be " + testSample.expected + |
- " at " + testSample.time + "ms"); |
- }); |
-} |
- |
-function isSupported(property) { |
- var testKeyframe = new TestKeyframe(propertyToIDL(property)); |
- try { |
- // Since TestKeyframe returns 'undefined' for |property|, |
- // the KeyframeEffect constructor will throw |
- // if the string "undefined" is not a valid value for the property. |
- new KeyframeEffect(null, testKeyframe); |
- } catch(e) {} |
- return testKeyframe.propAccessCount !== 0; |
-} |
- |
-function TestKeyframe(testProp) { |
- var _propAccessCount = 0; |
- |
- Object.defineProperty(this, testProp, { |
- get: function() { _propAccessCount++; }, |
- enumerable: true |
- }); |
- |
- Object.defineProperty(this, 'propAccessCount', { |
- get: function() { return _propAccessCount; } |
- }); |
-} |
- |
-function propertyToIDL(property) { |
- // https://w3c.github.io/web-animations/#animation-property-name-to-idl-attribute-name |
- if (property === "float") { |
- return "cssFloat"; |
- } |
- return property.replace(/-[a-z]/gi, |
- function (str) { |
- return str.substr(1).toUpperCase(); }); |
-} |
- |
-</script> |