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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/imported/wpt/web-animations/resources/keyframe-utils.js

Issue 2015623004: Import wpt@ed94c51f3dfaa5ff4c9c311add1a560408059c51 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 7 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/keyframe-effect/keyframe-handling.html ('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/resources/keyframe-utils.js
diff --git a/third_party/WebKit/LayoutTests/imported/wpt/web-animations/keyframe-effect/constructor.html b/third_party/WebKit/LayoutTests/imported/wpt/web-animations/resources/keyframe-utils.js
similarity index 66%
rename from third_party/WebKit/LayoutTests/imported/wpt/web-animations/keyframe-effect/constructor.html
rename to third_party/WebKit/LayoutTests/imported/wpt/web-animations/resources/keyframe-utils.js
index 2733fa846ae65a2b4d072d27aa585f77b73eea1e..5278ad5fd305ff4a9ff99ddbcfe8ada8fdc264f4 100644
--- a/third_party/WebKit/LayoutTests/imported/wpt/web-animations/keyframe-effect/constructor.html
+++ b/third_party/WebKit/LayoutTests/imported/wpt/web-animations/resources/keyframe-utils.js
@@ -1,33 +1,16 @@
-<!DOCTYPE html>
-<meta charset=utf-8>
-<title>KeyframeEffectReadOnly constructor tests</title>
-<link rel="help" href="http://w3c.github.io/web-animations/#the-keyframeeffect-interfaces">
-<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
-<script src="../../../../resources/testharness.js"></script>
-<script src="../../../../resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
-<body>
-<div id="log"></div>
-<div id="target"></div>
-<style>
-#target {
- border-style: solid; /* so border-*-width values don't compute to 0 */
-}
-</style>
-<script>
"use strict";
-var target = document.getElementById("target");
+// Utility functions and common keyframe test data.
-function assert_frames_equal(a, b, name) {
- assert_equals(Object.keys(a).sort().toString(),
- Object.keys(b).sort().toString(),
- "properties on " + name);
- for (var p in a) {
- assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
- }
-}
+// ------------------------------
+// Helper functions
+// ------------------------------
+/**
+ * Test equality between two lists of computed keyframes
+ * @param {Array.<ComputedKeyframe>} a - actual computed keyframes
+ * @param {Array.<ComputedKeyframe>} b - expected computed keyframes
+ */
function assert_frame_lists_equal(a, b) {
assert_equals(a.length, b.length, "number of frames");
for (var i = 0; i < Math.min(a.length, b.length); i++) {
@@ -35,18 +18,19 @@ function assert_frame_lists_equal(a, b) {
}
}
-var gEmptyKeyframeListTests = [
- [],
- null,
- undefined,
-];
+/** Helper */
+function assert_frames_equal(a, b, name) {
+ assert_equals(Object.keys(a).sort().toString(),
+ Object.keys(b).sort().toString(),
+ "properties on " + name);
+ for (var p in a) {
+ assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
+ }
+}
-test(function(t) {
- gEmptyKeyframeListTests.forEach(function(frames) {
- assert_equals(new KeyframeEffectReadOnly(target, frames).getFrames().length,
- 0, "number of frames for " + JSON.stringify(frames));
- });
-}, "a KeyframeEffectReadOnly can be constructed with no frames");
+// ------------------------------
+// Easing values
+// ------------------------------
// [specified easing value, expected easing value]
var gEasingValueTests = [
@@ -56,46 +40,24 @@ var gEasingValueTests = [
["ease /**/", "ease"],
];
-test(function(t) {
- gEasingValueTests.forEach(function(subtest) {
- var easing = subtest[0];
- var expected = subtest[1];
- var effect = new KeyframeEffectReadOnly(target, {
- left: ["10px", "20px"],
- easing: easing
- });
- assert_equals(effect.getFrames()[0].easing, expected,
- "resulting easing for '" + easing + "'");
- });
-}, "easing values are parsed correctly when passed to the " +
- "KeyframeEffectReadOnly constructor in a property-indexed keyframe");
-
-test(function(t) {
- gEasingValueTests.forEach(function(subtest) {
- var easing = subtest[0];
- var expected = subtest[1];
- var effect = new KeyframeEffectReadOnly(target, [
- { offset: 0, left: "10px", easing: easing },
- { offset: 1, left: "20px" }
- ]);
- assert_equals(effect.getFrames()[0].easing, expected,
- "resulting easing for '" + easing + "'");
- });
-}, "easing values are parsed correctly when passed to the " +
- "KeyframeEffectReadOnly constructor in regular keyframes");
+var gInvalidEasingInKeyframeSequenceTests = [
+ { desc: "a blank easing",
+ input: [{ easing: "" }] },
+ { desc: "an unrecognized easing",
+ input: [{ easing: "unrecognized" }] },
+ { desc: "an 'initial' easing",
+ input: [{ easing: "initial" }] },
+ { desc: "an 'inherit' easing",
+ input: [{ easing: "inherit" }] },
+ { desc: "a variable easing",
+ input: [{ easing: "var(--x)" }] },
+ { desc: "a multi-value easing",
+ input: [{ easing: "ease-in-out, ease-out" }] }
+];
-test(function(t) {
- gEasingValueTests.forEach(function(subtest) {
- var easing = subtest[0];
- var expected = subtest[1];
- var effect = new KeyframeEffectReadOnly(target, {
- left: ["10px", "20px"]
- }, { easing: easing });
- assert_equals(effect.timing.easing, expected,
- "resulting easing for '" + easing + "'");
- });
-}, "easing values are parsed correctly when passed to the " +
- "KeyframeEffectReadOnly constructor in KeyframeTimingOptions");
+// ------------------------------
+// Composite values
+// ------------------------------
var gGoodKeyframeCompositeValueTests = [
"replace", "add", "accumulate", undefined
@@ -109,60 +71,15 @@ var gBadCompositeValueTests = [
"unrecognised", "replace ", "Replace", null
];
-test(function(t) {
- var getFrame = function(composite) {
- return { left: [ "10px", "20px" ], composite: composite };
- };
- gGoodKeyframeCompositeValueTests.forEach(function(composite) {
- var effect = new KeyframeEffectReadOnly(target, getFrame(composite));
- assert_equals(effect.getFrames()[0].composite, composite,
- "resulting composite for '" + composite + "'");
- });
- gBadCompositeValueTests.forEach(function(composite) {
- assert_throws(new TypeError, function() {
- new KeyframeEffectReadOnly(target, getFrame(composite));
- });
- });
-}, "composite values are parsed correctly when passed to the " +
- "KeyframeEffectReadOnly constructor in property-indexed keyframes");
-
-test(function(t) {
- var getFrames = function(composite) {
- return [
- { offset: 0, left: "10px", composite: composite },
- { offset: 1, left: "20px" }
- ];
- };
- gGoodKeyframeCompositeValueTests.forEach(function(composite) {
- var effect = new KeyframeEffectReadOnly(target, getFrames(composite));
- assert_equals(effect.getFrames()[0].composite, composite,
- "resulting composite for '" + composite + "'");
- });
- gBadCompositeValueTests.forEach(function(composite) {
- assert_throws(new TypeError, function() {
- new KeyframeEffectReadOnly(target, getFrames(composite));
- });
- });
-}, "composite values are parsed correctly when passed to the " +
- "KeyframeEffectReadOnly constructor in regular keyframes");
+// ------------------------------
+// Keyframes
+// ------------------------------
-test(function(t) {
- gGoodOptionsCompositeValueTests.forEach(function(composite) {
- var effect = new KeyframeEffectReadOnly(target, {
- left: ["10px", "20px"]
- }, { composite: composite });
- assert_equals(effect.getFrames()[0].composite, composite,
- "resulting composite for '" + composite + "'");
- });
- gBadCompositeValueTests.forEach(function(composite) {
- assert_throws(new TypeError, function() {
- new KeyframeEffectReadOnly(target, {
- left: ["10px", "20px"]
- }, { composite: composite });
- });
- });
-}, "composite values are parsed correctly when passed to the " +
- "KeyframeEffectReadOnly constructor in KeyframeTimingOptions");
+var gEmptyKeyframeListTests = [
+ [],
+ null,
+ undefined,
+];
var gPropertyIndexedKeyframesTests = [
{ desc: "a one property two value property-indexed keyframes specification",
@@ -223,6 +140,20 @@ var gPropertyIndexedKeyframesTests = [
opacity: "0" },
{ offset: null, computedOffset: 1, easing: "linear",
opacity: "1" }] },
+ { desc: "a property-indexed keyframes specification with a CSS variable"
+ + " reference",
+ input: { left: [ "var(--dist)", "calc(var(--dist) + 100px)" ] },
+ output: [{ offset: null, computedOffset: 0.0, easing: "linear",
+ left: "var(--dist)" },
+ { offset: null, computedOffset: 1.0, easing: "linear",
+ left: "calc(var(--dist) + 100px)" }] },
+ { desc: "a property-indexed keyframes specification with a CSS variable"
+ + " reference in a shorthand property",
+ input: { margin: [ "var(--dist)", "calc(var(--dist) + 100px)" ] },
+ output: [{ offset: null, computedOffset: 0.0, easing: "linear",
+ margin: "var(--dist)" },
+ { offset: null, computedOffset: 1.0, easing: "linear",
+ margin: "calc(var(--dist) + 100px)" }] },
{ desc: "a one property one value property-indexed keyframes specification",
input: { left: ["10px"] },
output: [{ offset: null, computedOffset: 1, easing: "linear",
@@ -246,75 +177,13 @@ var gPropertyIndexedKeyframesTests = [
left: "10px" },
{ offset: null, computedOffset: 1, easing: "linear",
left: "invalid" }] },
- { desc: "a two property property-indexed keyframes specification where one"
- + " property is missing from the first keyframe",
- input: [{ offset: 0, left: "10px" },
- { offset: 1, left: "20px", top: "30px" }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
- { offset: 1, computedOffset: 1, easing: "linear",
- left: "20px", top: "30px" }] },
- { desc: "a two property property-indexed keyframes specification where one"
- + " property is missing from the last keyframe",
- input: [{ offset: 0, left: "10px", top: "20px" },
- { offset: 1, left: "30px" }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear",
- left: "10px" , top: "20px" },
- { offset: 1, computedOffset: 1, easing: "linear",
- left: "30px" }] },
- { desc: "a property-indexed keyframes specification with repeated values"
- + " at offset 0 with different easings",
- input: [{ offset: 0.0, left: "100px", easing: "ease" },
- { offset: 0.0, left: "200px", easing: "ease" },
- { offset: 0.5, left: "300px", easing: "linear" },
- { offset: 1.0, left: "400px", easing: "ease-out" },
- { offset: 1.0, left: "500px", easing: "step-end" }],
- output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease",
- left: "100px" },
- { offset: 0.0, computedOffset: 0.0, easing: "ease",
- left: "200px" },
- { offset: 0.5, computedOffset: 0.5, easing: "linear",
- left: "300px" },
- { offset: 1.0, computedOffset: 1.0, easing: "ease-out",
- left: "400px" },
- { offset: 1.0, computedOffset: 1.0, easing: "step-end",
- left: "500px" }] },
];
-gPropertyIndexedKeyframesTests.forEach(function(subtest) {
- test(function(t) {
- var effect = new KeyframeEffectReadOnly(target, subtest.input);
- assert_frame_lists_equal(effect.getFrames(), subtest.output);
- }, "a KeyframeEffectReadOnly can be constructed with " + subtest.desc);
-
- test(function(t) {
- var effect = new KeyframeEffectReadOnly(target, subtest.input);
- var secondEffect = new KeyframeEffectReadOnly(target, effect.getFrames());
- assert_frame_lists_equal(secondEffect.getFrames(), effect.getFrames());
- }, "a KeyframeEffectReadOnly constructed with " + subtest.desc +
- " roundtrips");
-});
-
-test(function(t) {
- var expectedOrder = ["composite", "easing", "offset", "left", "marginLeft"];
- var actualOrder = [];
- var kf1 = {};
- var kf2 = { marginLeft: "10px", left: "20px", offset: 1 };
- [{ p: "marginLeft", v: "10px" },
- { p: "left", v: "20px" },
- { p: "offset", v: "0" },
- { p: "easing", v: "linear" },
- { p: "composite", v: "replace" }].forEach(function(e) {
- Object.defineProperty(kf1, e.p, {
- enumerable: true,
- get: function() { actualOrder.push(e.p); return e.v; }
- });
- });
- new KeyframeEffectReadOnly(target, [kf1, kf2]);
- assert_array_equals(actualOrder, expectedOrder, "property access order");
-}, "the KeyframeEffectReadOnly constructor reads keyframe properties in the " +
- "expected order");
-
var gKeyframeSequenceTests = [
+ { desc: "a one property one keyframe sequence",
+ input: [{ offset: 1, left: "10px" }],
+ output: [{ offset: null, computedOffset: 1, easing: "linear",
+ left: "10px" }] },
{ desc: "a one property two keyframe sequence",
input: [{ offset: 0, left: "10px" },
{ offset: 1, left: "20px" }],
@@ -384,6 +253,10 @@ var gKeyframeSequenceTests = [
{ offset: 1, computedOffset: 1, easing: "linear", top: "30px" },
{ offset: 1, computedOffset: 1, easing: "linear", left: "40px" }]
},
+ { desc: "a single keyframe sequence with omitted offsets",
+ input: [{ left: "10px" }],
+ output: [{ offset: null, computedOffset: 1, easing: "linear",
+ left: "10px" }] },
{ desc: "a one property keyframe sequence with some omitted offsets",
input: [{ offset: 0.00, left: "10px" },
{ offset: 0.25, left: "20px" },
@@ -479,6 +352,21 @@ var gKeyframeSequenceTests = [
output: [{ offset: 0, computedOffset: 0, easing: "linear", opacity: "0" },
{ offset: 1, computedOffset: 1, easing: "linear", opacity: "1" }]
},
+ { desc: "a keyframe sequence with a CSS variable reference",
+ input: [{ left: "var(--dist)" },
+ { left: "calc(var(--dist) + 100px)" }],
+ output: [{ offset: null, computedOffset: 0.0, easing: "linear",
+ left: "var(--dist)" },
+ { offset: null, computedOffset: 1.0, easing: "linear",
+ left: "calc(var(--dist) + 100px)" }] },
+ { desc: "a keyframe sequence with a CSS variable reference in a shorthand"
+ + " property",
+ input: [{ margin: "var(--dist)" },
+ { margin: "calc(var(--dist) + 100px)" }],
+ output: [{ offset: null, computedOffset: 0.0, easing: "linear",
+ margin: "var(--dist)" },
+ { offset: null, computedOffset: 1.0, easing: "linear",
+ margin: "calc(var(--dist) + 100px)" }] },
{ desc: "a keyframe sequence where shorthand precedes longhand",
input: [{ offset: 0, margin: "10px", marginRight: "20px" },
{ offset: 1, margin: "30px" }],
@@ -514,67 +402,72 @@ var gKeyframeSequenceTests = [
borderLeft: "1px solid rgb(1, 2, 3)" },
{ offset: 1, computedOffset: 1, easing: "linear",
border: "3px dashed rgb(7, 8, 9)" }] },
+ { desc: "a two property keyframe sequence where one property is missing"
+ + " from the first keyframe",
+ input: [{ offset: 0, left: "10px" },
+ { offset: 1, left: "20px", top: "30px" }],
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
+ { offset: 1, computedOffset: 1, easing: "linear",
+ left: "20px", top: "30px" }] },
+ { desc: "a two property keyframe sequence where one property is missing"
+ + " from the last keyframe",
+ input: [{ offset: 0, left: "10px", top: "20px" },
+ { offset: 1, left: "30px" }],
+ output: [{ offset: 0, computedOffset: 0, easing: "linear",
+ left: "10px" , top: "20px" },
+ { offset: 1, computedOffset: 1, easing: "linear",
+ left: "30px" }] },
+ { desc: "a keyframe sequence with repeated values at offset 1 with"
+ + " different easings",
+ input: [{ offset: 0.0, left: "100px", easing: "ease" },
+ { offset: 0.0, left: "200px", easing: "ease" },
+ { offset: 0.5, left: "300px", easing: "linear" },
+ { offset: 1.0, left: "400px", easing: "ease-out" },
+ { offset: 1.0, left: "500px", easing: "step-end" }],
+ output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease",
+ left: "100px" },
+ { offset: 0.0, computedOffset: 0.0, easing: "ease",
+ left: "200px" },
+ { offset: 0.5, computedOffset: 0.5, easing: "linear",
+ left: "300px" },
+ { offset: 1.0, computedOffset: 1.0, easing: "ease-out",
+ left: "400px" },
+ { offset: 1.0, computedOffset: 1.0, easing: "step-end",
+ left: "500px" }] },
];
-gKeyframeSequenceTests.forEach(function(subtest) {
- test(function(t) {
- var effect = new KeyframeEffectReadOnly(target, subtest.input);
- assert_frame_lists_equal(effect.getFrames(), subtest.output);
- }, "a KeyframeEffectReadOnly can be constructed with " + subtest.desc);
-
- test(function(t) {
- var effect = new KeyframeEffectReadOnly(target, subtest.input);
- var secondEffect = new KeyframeEffectReadOnly(target, effect.getFrames());
- assert_frame_lists_equal(secondEffect.getFrames(), effect.getFrames());
- }, "a KeyframeEffectReadOnly constructed with " + subtest.desc +
- " roundtrips");
-});
-
-var gInvalidEasingInKeyframeSequenceTests = [
- { desc: "a blank easing",
- input: [{ easing: "" }] },
- { desc: "an unrecognized easing",
- input: [{ easing: "unrecognized" }] },
- { desc: "an 'initial' easing",
- input: [{ easing: "initial" }] },
- { desc: "an 'inherit' easing",
- input: [{ easing: "inherit" }] },
- { desc: "a variable easing",
- input: [{ easing: "var(--x)" }] },
- { desc: "a multi-value easing",
- input: [{ easing: "ease-in-out, ease-out" }] }
+var gInvalidKeyframesTests = [
+ { desc: "keyframes with an out-of-bounded positive offset",
+ input: [ { opacity: 0 },
+ { opacity: 0.5, offset: 2 },
+ { opacity: 1 } ],
+ expected: { name: "TypeError" } },
+ { desc: "keyframes with an out-of-bounded negative offset",
+ input: [ { opacity: 0 },
+ { opacity: 0.5, offset: -1 },
+ { opacity: 1 } ],
+ expected: { name: "TypeError" } },
+ { desc: "keyframes not loosely sorted by offset",
+ input: [ { opacity: 0, offset: 1 },
+ { opacity: 1, offset: 0 } ],
+ expected: { name: "TypeError" } },
+ { desc: "property-indexed keyframes with an invalid easing value",
+ input: { opacity: [ 0, 0.5, 1 ],
+ easing: "inherit" },
+ expected: { name: "TypeError" } },
+ { desc: "a keyframe sequence with an invalid easing value",
+ input: [ { opacity: 0, easing: "jumpy" },
+ { opacity: 1 } ],
+ expected: { name: "TypeError" } },
+ { desc: "keyframes with an invalid composite value",
+ input: [ { opacity: 0, composite: "alternate" },
+ { opacity: 1 } ],
+ expected: { name: "TypeError" } }
];
-gInvalidEasingInKeyframeSequenceTests.forEach(function(subtest) {
- test(function(t) {
- assert_throws(new TypeError, function() {
- new KeyframeEffectReadOnly(target, subtest.input);
- });
- }, "Invalid easing [" + subtest.desc + "] in keyframe sequence " +
- "should be thrown");
-});
-
-test(function(t) {
- var effect = new KeyframeEffectReadOnly(target,
- {left: ["10px", "20px"]});
-
- var timing = effect.timing;
- assert_equals(timing.delay, 0, "default delay");
- assert_equals(timing.endDelay, 0, "default endDelay");
- assert_equals(timing.fill, "auto", "default fill");
- assert_equals(timing.iterations, 1.0, "default iterations");
- assert_equals(timing.iterationStart, 0.0, "default iterationStart");
- assert_equals(timing.duration, "auto", "default duration");
- assert_equals(timing.direction, "normal", "default direction");
- assert_equals(timing.easing, "linear", "default easing");
-
- assert_equals(effect.composite, "replace", "default composite");
- assert_equals(effect.iterationComposite, "replace",
- "default iterationComposite");
- assert_equals(effect.spacing, "distribute",
- "default spacing");
-}, "a KeyframeEffectReadOnly constructed without any " +
- "KeyframeEffectOptions object");
+// ------------------------------
+// KeyframeEffectOptions
+// ------------------------------
var gKeyframeEffectOptionTests = [
{ desc: "an empty KeyframeEffectOptions object",
@@ -614,33 +507,6 @@ var gKeyframeEffectOptionTests = [
expected: { fill: "forwards" } }
];
-gKeyframeEffectOptionTests.forEach(function(stest) {
- test(function(t) {
- var effect = new KeyframeEffectReadOnly(target,
- {left: ["10px", "20px"]},
- stest.input);
-
- // Helper function to provide default expected values when the test does
- // not supply them.
- var expected = function(field, defaultValue) {
- return field in stest.expected ? stest.expected[field] : defaultValue;
- };
-
- var timing = effect.timing;
- assert_equals(timing.delay, expected("delay", 0),
- "timing delay");
- assert_equals(timing.fill, expected("fill", "auto"),
- "timing fill");
- assert_equals(timing.iterations, expected("iterations", 1),
- "timing iterations");
- assert_equals(timing.duration, expected("duration", "auto"),
- "timing duration");
- assert_equals(timing.direction, expected("direction", "normal"),
- "timing direction");
-
- }, "a KeyframeEffectReadOnly constructed by " + stest.desc);
-});
-
var gInvalidKeyframeEffectOptionTests = [
{ desc: "-Infinity",
input: -Infinity,
@@ -691,34 +557,3 @@ var gInvalidKeyframeEffectOptionTests = [
input: { easing: "ease-in-out, ease-out" },
expected: { name: "TypeError" } }
];
-
-gInvalidKeyframeEffectOptionTests.forEach(function(stest) {
- test(function(t) {
- assert_throws(stest.expected, function() {
- new KeyframeEffectReadOnly(target,
- { left: ["10px", "20px"] },
- stest.input);
- });
- }, "Invalid KeyframeEffectReadOnly option by " + stest.desc);
-});
-
-test(function(t) {
- var effect = new KeyframeEffect(target,
- { left: ["10px", "20px"] });
-
- assert_class_string(effect, "KeyframeEffect");
- assert_class_string(effect.timing, "AnimationEffectTiming");
-}, "KeyframeEffect constructor creates an AnimationEffectTiming timing object");
-
-test(function(t) {
- var test_error = { name: "test" };
-
- assert_throws(test_error, function() {
- new KeyframeEffect(target, { get left() { throw test_error }})
- });
-}, "KeyframeEffect constructor propagates exceptions generated by accessing"
- + " the options object");
-
-done();
-</script>
-</body>
« no previous file with comments | « third_party/WebKit/LayoutTests/imported/wpt/web-animations/keyframe-effect/keyframe-handling.html ('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