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

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 2303013002: Add UMA metric to track usage of sending a mousedown to select elements. (Closed)
Patch Set: W3C auto test import CL. Created 4 years, 3 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/resources/testharness.js ('k') | third_party/WebKit/LayoutTests/imported/wpt/web-animations/testcommon.js » ('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
new file mode 100644
index 0000000000000000000000000000000000000000..683b0093ac4929aec9a8d67b4f0d06b838ef5241
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/animation-types/type-per-property.html
@@ -0,0 +1,569 @@
+<!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/resources/testharness.js ('k') | third_party/WebKit/LayoutTests/imported/wpt/web-animations/testcommon.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698