--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -30305,16 +30305,20 @@
"path": "vibration/invalid-values.html",
"url": "/vibration/invalid-values.html"
},
{
"path": "vibration/silent-ignore.html",
"url": "/vibration/silent-ignore.html"
},
{
+ "path": "web-animations/animation-model/animation-types/animation-types.html",
+ "url": "/web-animations/animation-model/animation-types/animation-types.html"
+ },
+ {
"path": "web-animations/animation-model/animation-types/discrete-animation.html",
"url": "/web-animations/animation-model/animation-types/discrete-animation.html"
},
{
"path": "web-animations/animation-model/keyframe-effects/effect-value-context.html",
"url": "/web-animations/animation-model/keyframe-effects/effect-value-context.html"
},
{
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/animation-types.html
@@ -0,0 +1,132 @@
+<!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>
+<link rel="stylesheet" href="/resources/testharness.css">
+<body>
+<div id="log"></div>
+<script>
+"use strict";
+
+var gCSSProperties = {
+ "align-content": [
+ discrete("flex-start", "flex-end")
+ ],
+ "align-items": [
+ discrete("flex-start", "flex-end")
+ ],
+ "align-self": [
+ discrete("flex-start", "flex-end")
+ ],
+ "justify-content": [
+ discrete("baseline", "last-baseline")
+ ],
+ "justify-items": [
+ discrete("baseline", "last-baseline")
+ ],
+ "justify-self": [
+ discrete("baseline", "last-baseline")
+ ],
+}
+
+for (var property in gCSSProperties) {
+ if (!isSupported(property)) {
+ continue;
+ }
+ var testFunctions = gCSSProperties[property];
+ testFunctions.forEach(function(testFunction) {
+ testFunction(property);
+ });
+}
+
+function discrete(from, to) {
+ return function(property) {
+ var idlName = propertyToIDL(property);
+ 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 }]);
+ }, "Test " + property + " 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 }]);
+ }, "Test " + property + " 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 }]);
+ }, "Test " + property + " with keyframe 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 {
+ // May throw an exception if the keyframe value is not correct.
+ new KeyframeEffectReadOnly(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>