Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(127)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/animation-types/type-per-property.html

Issue 2610243002: Import wpt@5e1a3b80cea8d36774d2afd78b29a74792e9f15a (Closed)
Patch Set: Rebased Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/animation-types/spacing-keyframes-transform.html ('k') | third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/combining-effects/effect-composition.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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>
« no previous file with comments | « third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/animation-types/spacing-keyframes-transform.html ('k') | third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/combining-effects/effect-composition.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698