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

Unified Diff: third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/keyframe-effect/constructor.html

Issue 1899623002: Import latest web-platform-tests (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: handle new failures Created 4 years, 8 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
Index: third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/keyframe-effect/constructor.html
diff --git a/third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/keyframe-effect/constructor.html b/third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/keyframe-effect/constructor.html
index 142ec337596dd8b495e9906e12c49f3bb89238c3..cc6312dc5e905a7751af5fbe771f201846ef9e05 100644
--- a/third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/keyframe-effect/constructor.html
+++ b/third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/keyframe-effect/constructor.html
@@ -61,13 +61,8 @@ test(function(t) {
// [specified easing value, expected easing value]
var gEasingValueTests = [
- ["unrecognised", "linear"],
["linear", "linear"],
["ease-in-out", "ease-in-out"],
- ["initial", "linear"],
- ["inherit", "linear"],
- ["var(--x)", "linear"],
- ["ease-in-out, ease-out", "linear"],
["Ease\\2d in-out", "ease-in-out"],
["ease /**/", "ease"],
];
@@ -113,56 +108,57 @@ test(function(t) {
}, "easing values are parsed correctly when passed to the " +
"KeyframeEffectReadOnly constructor in KeyframeTimingOptions");
-var gGoodCompositeValueTests = [
+var gGoodKeyframeCompositeValueTests = [
+ "replace", "add", "accumulate", undefined
+];
+
+var gGoodOptionsCompositeValueTests = [
"replace", "add", "accumulate"
];
var gBadCompositeValueTests = [
- "unrecognised", "replace ", "Replace"
+ "unrecognised", "replace ", "Replace", null
];
test(function(t) {
- gGoodCompositeValueTests.forEach(function(composite) {
- var effect = new KeyframeEffectReadOnly(target, {
- left: ["10px", "20px"],
- composite: composite
- });
+ 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, {
- left: ["10px", "20px"],
- composite: composite
- });
+ new KeyframeEffectReadOnly(target, getFrame(composite));
});
});
}, "composite values are parsed correctly when passed to the " +
"KeyframeEffectReadOnly constructor in PropertyIndexedKeyframes");
test(function(t) {
- gGoodCompositeValueTests.forEach(function(composite) {
- var effect = new KeyframeEffectReadOnly(target, [
+ 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, [
- { offset: 0, left: "10px", composite: composite },
- { offset: 1, left: "20px" }
- ]);
+ new KeyframeEffectReadOnly(target, getFrames(composite));
});
});
}, "composite values are parsed correctly when passed to the " +
"KeyframeEffectReadOnly constructor in Keyframe");
test(function(t) {
- gGoodCompositeValueTests.forEach(function(composite) {
+ gGoodOptionsCompositeValueTests.forEach(function(composite) {
var effect = new KeyframeEffectReadOnly(target, {
left: ["10px", "20px"]
}, { composite: composite });
@@ -182,77 +178,77 @@ test(function(t) {
var gPropertyIndexedKeyframesTests = [
{ desc: "a one property two value PropertyIndexedKeyframes specification",
input: { left: ["10px", "20px"] },
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "20px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
+ { offset: 1, computedOffset: 1, easing: "linear", left: "20px" }] },
{ desc: "a one shorthand property two value PropertyIndexedKeyframes specification",
input: { margin: ["10px", "10px 20px 30px 40px"] },
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", marginTop: "10px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", marginTop: "10px", marginRight: "20px", marginBottom: "30px", marginLeft: "40px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", marginTop: "10px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
+ { offset: 1, computedOffset: 1, easing: "linear", marginTop: "10px", marginRight: "20px", marginBottom: "30px", marginLeft: "40px" }] },
{ desc: "a two property (one shorthand and one of its longhand components) two value PropertyIndexedKeyframes specification",
input: { marginTop: ["50px", "60px"],
margin: ["10px", "10px 20px 30px 40px"] },
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", marginTop: "50px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", marginTop: "60px", marginRight: "20px", marginBottom: "30px", marginLeft: "40px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", marginTop: "50px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
+ { offset: 1, computedOffset: 1, easing: "linear", marginTop: "60px", marginRight: "20px", marginBottom: "30px", marginLeft: "40px" }] },
{ desc: "a two property two value PropertyIndexedKeyframes specification",
input: { left: ["10px", "20px"],
top: ["30px", "40px"] },
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px", top: "30px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "20px", top: "40px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px", top: "30px" },
+ { offset: 1, computedOffset: 1, easing: "linear", left: "20px", top: "40px" }] },
{ desc: "a two property PropertyIndexedKeyframes specification with different numbers of values",
input: { left: ["10px", "20px", "30px"],
top: ["40px", "50px"] },
- output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", composite: "replace", left: "10px", top: "40px" },
- { offset: 0.5, computedOffset: 0.5, easing: "linear", composite: "replace", left: "20px" },
- { offset: 1.0, computedOffset: 1.0, easing: "linear", composite: "replace", left: "30px", top: "50px" }] },
+ output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", left: "10px", top: "40px" },
+ { offset: 0.5, computedOffset: 0.5, easing: "linear", left: "20px" },
+ { offset: 1.0, computedOffset: 1.0, easing: "linear", left: "30px", top: "50px" }] },
{ desc: "a PropertyIndexedKeyframes specification with an invalid value",
input: { left: ["10px", "20px", "30px", "40px", "50px"],
top: ["15px", "25px", "invalid", "45px", "55px"] },
- output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", composite: "replace", left: "10px", top: "15px" },
- { offset: 0.25, computedOffset: 0.25, easing: "linear", composite: "replace", left: "20px", top: "25px" },
- { offset: 0.50, computedOffset: 0.50, easing: "linear", composite: "replace", left: "30px" },
- { offset: 0.75, computedOffset: 0.75, easing: "linear", composite: "replace", left: "40px", top: "45px" },
- { offset: 1.00, computedOffset: 1.00, easing: "linear", composite: "replace", left: "50px", top: "55px" }] },
+ output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", left: "10px", top: "15px" },
+ { offset: 0.25, computedOffset: 0.25, easing: "linear", left: "20px", top: "25px" },
+ { offset: 0.50, computedOffset: 0.50, easing: "linear", left: "30px" },
+ { offset: 0.75, computedOffset: 0.75, easing: "linear", left: "40px", top: "45px" },
+ { offset: 1.00, computedOffset: 1.00, easing: "linear", left: "50px", top: "55px" }] },
{ desc: "a one property two value PropertyIndexedKeyframes specification that needs to stringify its values",
input: { opacity: [0, 1] },
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", opacity: "0" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", opacity: "1" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", opacity: "0" },
+ { offset: 1, computedOffset: 1, easing: "linear", opacity: "1" }] },
{ desc: "a one property one value PropertyIndexedKeyframes specification",
input: { left: ["10px"] },
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "10px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear" },
+ { offset: 1, computedOffset: 1, easing: "linear", left: "10px" }] },
{ desc: "a one property one non-array value PropertyIndexedKeyframes specification",
input: { left: "10px" },
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "10px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear" },
+ { offset: 1, computedOffset: 1, easing: "linear", left: "10px" }] },
{ desc: "a one property two value PropertyIndexedKeyframes specification where the first value is invalid",
input: { left: ["invalid", "10px"] },
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "10px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear" },
+ { offset: 1, computedOffset: 1, easing: "linear", left: "10px" }] },
{ desc: "a one property two value PropertyIndexedKeyframes specification where the second value is invalid",
input: { left: ["10px", "invalid"] },
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
+ { offset: 1, computedOffset: 1, easing: "linear" }] },
{ desc: "a two property PropertyIndexedKeyframes 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", composite: "replace", left: "10px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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 PropertyIndexedKeyframes 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", composite: "replace", left: "10px" , top: "20px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "30px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" , top: "20px" },
+ { offset: 1, computedOffset: 1, easing: "linear", left: "30px" }] },
{ desc: "a PropertyIndexedKeyframes 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", composite: "replace", left: "100px" },
- { offset: 0.0, computedOffset: 0.0, easing: "ease", composite: "replace", left: "200px" },
- { offset: 0.5, computedOffset: 0.5, easing: "linear", composite: "replace", left: "300px" },
- { offset: 1.0, computedOffset: 1.0, easing: "ease-out", composite: "replace", left: "400px" },
- { offset: 1.0, computedOffset: 1.0, easing: "linear", composite: "replace", left: "500px" }] },
+ 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: "linear", left: "500px" }] },
];
gPropertyIndexedKeyframesTests.forEach(function(subtest) {
@@ -278,7 +274,7 @@ test(function(t) {
{ p: "left", v: "20px" },
{ p: "offset", v: "0" },
{ p: "easing", v: "linear" },
- { p: "composite", v: null }].forEach(function(e) {
+ { p: "composite", v: "replace" }].forEach(function(e) {
Object.defineProperty(kf1, e.p, {
enumerable: true,
get: function() { actualOrder.push(e.p); return e.v; }
@@ -293,33 +289,33 @@ var gKeyframeSequenceTests = [
{ desc: "a one property two Keyframe sequence",
input: [{ offset: 0, left: "10px" },
{ offset: 1, left: "20px" }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "20px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
+ { offset: 1, computedOffset: 1, easing: "linear", left: "20px" }] },
{ desc: "a two property two Keyframe sequence",
input: [{ offset: 0, left: "10px", top: "30px" },
{ offset: 1, left: "20px", top: "40px" }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px", top: "30px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "20px", top: "40px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px", top: "30px" },
+ { offset: 1, computedOffset: 1, easing: "linear", left: "20px", top: "40px" }] },
{ desc: "a one shorthand property two Keyframe sequence",
input: [{ offset: 0, margin: "10px" },
{ offset: 1, margin: "20px 30px 40px 50px" }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", marginTop: "10px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", marginTop: "20px", marginRight: "30px", marginBottom: "40px", marginLeft: "50px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", marginTop: "10px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
+ { offset: 1, computedOffset: 1, easing: "linear", marginTop: "20px", marginRight: "30px", marginBottom: "40px", marginLeft: "50px" }] },
{ desc: "a two property (a shorthand and one of its component longhands) two Keyframe sequence",
input: [{ offset: 0, margin: "10px", marginTop: "20px" },
{ offset: 1, marginTop: "70px", margin: "30px 40px 50px 60px" }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", marginTop: "20px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", marginTop: "70px", marginRight: "40px", marginBottom: "50px", marginLeft: "60px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", marginTop: "20px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" },
+ { offset: 1, computedOffset: 1, easing: "linear", marginTop: "70px", marginRight: "40px", marginBottom: "50px", marginLeft: "60px" }] },
{ desc: "a Keyframe sequence with duplicate values for a given interior offset",
input: [{ offset: 0.0, left: "10px" },
{ offset: 0.5, left: "20px" },
{ offset: 0.5, left: "30px" },
{ offset: 0.5, left: "40px" },
{ offset: 1.0, left: "50px" }],
- output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", composite: "replace", left: "10px" },
- { offset: 0.5, computedOffset: 0.5, easing: "linear", composite: "replace", left: "20px" },
- { offset: 0.5, computedOffset: 0.5, easing: "linear", composite: "replace", left: "40px" },
- { offset: 1.0, computedOffset: 1.0, easing: "linear", composite: "replace", left: "50px" }] },
+ output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", left: "10px" },
+ { offset: 0.5, computedOffset: 0.5, easing: "linear", left: "20px" },
+ { offset: 0.5, computedOffset: 0.5, easing: "linear", left: "40px" },
+ { offset: 1.0, computedOffset: 1.0, easing: "linear", left: "50px" }] },
{ desc: "a Keyframe sequence with duplicate values for offsets 0 and 1",
input: [{ offset: 0, left: "10px" },
{ offset: 0, left: "20px" },
@@ -327,50 +323,50 @@ var gKeyframeSequenceTests = [
{ offset: 1, left: "40px" },
{ offset: 1, left: "50px" },
{ offset: 1, left: "60px" }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px" },
- { offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "30px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "40px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "60px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" },
+ { offset: 0, computedOffset: 0, easing: "linear", left: "30px" },
+ { offset: 1, computedOffset: 1, easing: "linear", left: "40px" },
+ { offset: 1, computedOffset: 1, easing: "linear", left: "60px" }] },
{ desc: "a two property four Keyframe sequence",
input: [{ offset: 0, left: "10px" },
{ offset: 0, top: "20px" },
{ offset: 1, top: "30px" },
{ offset: 1, left: "40px" }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", left: "10px", top: "20px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", left: "40px", top: "30px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px", top: "20px" },
+ { offset: 1, computedOffset: 1, easing: "linear", left: "40px", top: "30px" }] },
{ desc: "a one property Keyframe sequence with some omitted offsets",
input: [{ offset: 0.00, left: "10px" },
{ offset: 0.25, left: "20px" },
{ left: "30px" },
{ left: "40px" },
{ offset: 1.00, left: "50px" }],
- output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", composite: "replace", left: "10px" },
- { offset: 0.25, computedOffset: 0.25, easing: "linear", composite: "replace", left: "20px" },
- { offset: 0.50, computedOffset: 0.50, easing: "linear", composite: "replace", left: "30px" },
- { offset: 0.75, computedOffset: 0.75, easing: "linear", composite: "replace", left: "40px" },
- { offset: 1.00, computedOffset: 1.00, easing: "linear", composite: "replace", left: "50px" }] },
+ output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", left: "10px" },
+ { offset: 0.25, computedOffset: 0.25, easing: "linear", left: "20px" },
+ { offset: 0.50, computedOffset: 0.50, easing: "linear", left: "30px" },
+ { offset: 0.75, computedOffset: 0.75, easing: "linear", left: "40px" },
+ { offset: 1.00, computedOffset: 1.00, easing: "linear", left: "50px" }] },
{ desc: "a two property Keyframe sequence with some omitted offsets",
input: [{ offset: 0.00, left: "10px", top: "20px" },
{ offset: 0.25, left: "30px" },
{ left: "40px" },
{ left: "50px", top: "60px" },
{ offset: 1.00, left: "70px", top: "80px" }],
- output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", composite: "replace", left: "10px", top: "20px" },
- { offset: 0.25, computedOffset: 0.25, easing: "linear", composite: "replace", left: "30px" },
- { offset: 0.50, computedOffset: 0.50, easing: "linear", composite: "replace", left: "40px" },
- { offset: 0.75, computedOffset: 0.75, easing: "linear", composite: "replace", left: "50px", top: "60px" },
- { offset: 1.00, computedOffset: 1.00, easing: "linear", composite: "replace", left: "70px", top: "80px" }] },
+ output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", left: "10px", top: "20px" },
+ { offset: 0.25, computedOffset: 0.25, easing: "linear", left: "30px" },
+ { offset: 0.50, computedOffset: 0.50, easing: "linear", left: "40px" },
+ { offset: 0.75, computedOffset: 0.75, easing: "linear", left: "50px", top: "60px" },
+ { offset: 1.00, computedOffset: 1.00, easing: "linear", left: "70px", top: "80px" }] },
{ desc: "a one property Keyframe sequence with all omitted offsets",
input: [{ left: "10px" },
{ left: "20px" },
{ left: "30px" },
{ left: "40px" },
{ left: "50px" }],
- output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", composite: "replace", left: "10px" },
- { offset: 0.25, computedOffset: 0.25, easing: "linear", composite: "replace", left: "20px" },
- { offset: 0.50, computedOffset: 0.50, easing: "linear", composite: "replace", left: "30px" },
- { offset: 0.75, computedOffset: 0.75, easing: "linear", composite: "replace", left: "40px" },
- { offset: 1.00, computedOffset: 1.00, easing: "linear", composite: "replace", left: "50px" }] },
+ output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", left: "10px" },
+ { offset: 0.25, computedOffset: 0.25, easing: "linear", left: "20px" },
+ { offset: 0.50, computedOffset: 0.50, easing: "linear", left: "30px" },
+ { offset: 0.75, computedOffset: 0.75, easing: "linear", left: "40px" },
+ { offset: 1.00, computedOffset: 1.00, easing: "linear", left: "50px" }] },
{ desc: "a Keyframe sequence with different easing values, but the same easing value for a given offset",
input: [{ offset: 0.0, easing: "ease", left: "10px"},
{ offset: 0.0, easing: "ease", top: "20px"},
@@ -378,9 +374,12 @@ var gKeyframeSequenceTests = [
{ offset: 0.5, easing: "linear", top: "40px" },
{ offset: 1.0, easing: "step-end", left: "50px" },
{ offset: 1.0, easing: "step-end", top: "60px" }],
- output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease", composite: "replace", left: "10px", top: "20px" },
- { offset: 0.5, computedOffset: 0.5, easing: "linear", composite: "replace", left: "30px", top: "40px" },
- { offset: 1.0, computedOffset: 1.0, easing: "linear", composite: "replace", left: "50px", top: "60px" }] },
+ output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease",
+ left: "10px", top: "20px" },
+ { offset: 0.5, computedOffset: 0.5, easing: "linear",
+ left: "30px", top: "40px" },
+ { offset: 1.0, computedOffset: 1.0, easing: "linear",
+ left: "50px", top: "60px" }] },
{ desc: "a Keyframe sequence with different composite values, but the same composite value for a given offset",
input: [{ offset: 0.0, composite: "replace", left: "10px" },
{ offset: 0.0, composite: "replace", top: "20px" },
@@ -394,27 +393,27 @@ var gKeyframeSequenceTests = [
{ desc: "a one property two Keyframe sequence that needs to stringify its values",
input: [{ offset: 0, opacity: 0 },
{ offset: 1, opacity: 1 }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", opacity: "0" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", opacity: "1" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", opacity: "0" },
+ { offset: 1, computedOffset: 1, easing: "linear", opacity: "1" }] },
{ desc: "a Keyframe sequence where shorthand precedes longhand",
input: [{ offset: 0, margin: "10px", marginRight: "20px" },
{ offset: 1, margin: "30px" }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", marginBottom: "10px", marginLeft: "10px", marginRight: "20px", marginTop: "10px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", marginBottom: "30px", marginLeft: "30px", marginRight: "30px", marginTop: "30px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", marginBottom: "10px", marginLeft: "10px", marginRight: "20px", marginTop: "10px" },
+ { offset: 1, computedOffset: 1, easing: "linear", marginBottom: "30px", marginLeft: "30px", marginRight: "30px", marginTop: "30px" }] },
{ desc: "a Keyframe sequence where longhand precedes shorthand",
input: [{ offset: 0, marginRight: "20px", margin: "10px" },
{ offset: 1, margin: "30px" }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace", marginBottom: "10px", marginLeft: "10px", marginRight: "20px", marginTop: "10px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", marginBottom: "30px", marginLeft: "30px", marginRight: "30px", marginTop: "30px" }] },
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", marginBottom: "10px", marginLeft: "10px", marginRight: "20px", marginTop: "10px" },
+ { offset: 1, computedOffset: 1, easing: "linear", marginBottom: "30px", marginLeft: "30px", marginRight: "30px", marginTop: "30px" }] },
{ desc: "a Keyframe sequence where lesser shorthand precedes greater shorthand",
input: [{ offset: 0, borderLeft: "1px solid rgb(1, 2, 3)", border: "2px dotted rgb(4, 5, 6)" },
{ offset: 1, border: "3px dashed rgb(7, 8, 9)" }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace",
+ output: [{ offset: 0, computedOffset: 0, easing: "linear",
borderBottomColor: "rgb(4, 5, 6)", borderBottomWidth: "2px",
borderLeftColor: "rgb(1, 2, 3)", borderLeftWidth: "1px",
borderRightColor: "rgb(4, 5, 6)", borderRightWidth: "2px",
borderTopColor: "rgb(4, 5, 6)", borderTopWidth: "2px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
+ { offset: 1, computedOffset: 1, easing: "linear",
borderBottomColor: "rgb(7, 8, 9)", borderBottomWidth: "3px",
borderLeftColor: "rgb(7, 8, 9)", borderLeftWidth: "3px",
borderRightColor: "rgb(7, 8, 9)", borderRightWidth: "3px",
@@ -422,12 +421,12 @@ var gKeyframeSequenceTests = [
{ desc: "a Keyframe sequence where greater shorthand precedes lesser shorthand",
input: [{ offset: 0, border: "2px dotted rgb(4, 5, 6)", borderLeft: "1px solid rgb(1, 2, 3)" },
{ offset: 1, border: "3px dashed rgb(7, 8, 9)" }],
- output: [{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace",
+ output: [{ offset: 0, computedOffset: 0, easing: "linear",
borderBottomColor: "rgb(4, 5, 6)", borderBottomWidth: "2px",
borderLeftColor: "rgb(1, 2, 3)", borderLeftWidth: "1px",
borderRightColor: "rgb(4, 5, 6)", borderRightWidth: "2px",
borderTopColor: "rgb(4, 5, 6)", borderTopWidth: "2px" },
- { offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
+ { offset: 1, computedOffset: 1, easing: "linear",
borderBottomColor: "rgb(7, 8, 9)", borderBottomWidth: "3px",
borderLeftColor: "rgb(7, 8, 9)", borderLeftWidth: "3px",
borderRightColor: "rgb(7, 8, 9)", borderRightWidth: "3px",
@@ -448,6 +447,29 @@ gKeyframeSequenceTests.forEach(function(subtest) {
" 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" }] }
+];
+
+gInvalidEasingInKeyframeSequenceTests.forEach(function(subtest) {
+ test(function(t) {
+ assert_throws(new TypeError, function() {
+ new KeyframeEffectReadOnly(target, subtest.input);
+ });
+ }, "Invalid easing [" + subtest.desc + "] in KeyframeSequence " +
+ "should be thrown");
+});
test(function(t) {
var effect = new KeyframeEffectReadOnly(target,
@@ -501,15 +523,6 @@ var gKeyframeEffectOptionTests = [
{ desc: "an Infinity iterations",
input: { iterations: Infinity },
expected: { iterations: Infinity } },
- { desc: "a negative Infinity iterations",
- input: { iterations: -Infinity },
- expected: { iterations: -Infinity } },
- { desc: "a NaN iterations",
- input: { iterations: NaN },
- expected: { iterations: NaN } },
- { desc: "a negative iterations",
- input: { iterations: -1 },
- expected: { iterations: -1 } },
{ desc: "an auto fill",
input: { fill: "auto" },
expected: { fill: "auto" } },
@@ -566,6 +579,33 @@ var gInvalidKeyframeEffectOptionTests = [
expected: { name: "TypeError" } },
{ desc: "a string duration",
input: { duration: "merrychristmas" },
+ expected: { name: "TypeError" } },
+ { desc: "a negative Infinity iterations",
+ input: { iterations: -Infinity},
+ expected: { name: "TypeError" } },
+ { desc: "a NaN iterations",
+ input: { iterations: NaN },
+ expected: { name: "TypeError" } },
+ { desc: "a negative iterations",
+ input: { iterations: -1 },
+ expected: { name: "TypeError" } },
+ { desc: "a blank easing",
+ input: { easing: "" },
+ expected: { name: "TypeError" } },
+ { desc: "an unrecognized easing",
+ input: { easing: "unrecognised" },
+ expected: { name: "TypeError" } },
+ { desc: "an 'initial' easing",
+ input: { easing: "initial" },
+ expected: { name: "TypeError" } },
+ { desc: "an 'inherit' easing",
+ input: { easing: "inherit" },
+ expected: { name: "TypeError" } },
+ { desc: "a variable easing",
+ input: { easing: "var(--x)" },
+ expected: { name: "TypeError" } },
+ { desc: "a multi-value easing",
+ input: { easing: "ease-in-out, ease-out" },
expected: { name: "TypeError" } }
];
@@ -573,7 +613,7 @@ gInvalidKeyframeEffectOptionTests.forEach(function(stest) {
test(function(t) {
assert_throws(stest.expected, function() {
new KeyframeEffectReadOnly(target,
- {left: ["10px", "20px"]},
+ { left: ["10px", "20px"] },
stest.input);
});
}, "Invalid KeyframeEffectReadOnly option by " + stest.desc);

Powered by Google App Engine
This is Rietveld 408576698