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 cc6312dc5e905a7751af5fbe771f201846ef9e05..2733fa846ae65a2b4d072d27aa585f77b73eea1e 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 |
@@ -37,17 +37,6 @@ function assert_frame_lists_equal(a, b) { |
var gEmptyKeyframeListTests = [ |
[], |
- [{}], |
- [{ easing: "ease-in" }], |
- [{ unknown: "unknown" }, { unknown: "unknown" }], |
- [{ color: "invalid" }, { color: "invalid" }], |
- { easing: "ease-in" }, |
- { unknown: "unknown" }, |
- { unknown: [] }, |
- { unknown: ["unknown"] }, |
- { unknown: ["unknown", "unknown"] }, |
- { animationName: ["none", "abc"] }, |
- { color: [] }, |
null, |
undefined, |
]; |
@@ -79,7 +68,7 @@ test(function(t) { |
"resulting easing for '" + easing + "'"); |
}); |
}, "easing values are parsed correctly when passed to the " + |
- "KeyframeEffectReadOnly constructor in PropertyIndexedKeyframes"); |
+ "KeyframeEffectReadOnly constructor in a property-indexed keyframe"); |
test(function(t) { |
gEasingValueTests.forEach(function(subtest) { |
@@ -93,7 +82,7 @@ test(function(t) { |
"resulting easing for '" + easing + "'"); |
}); |
}, "easing values are parsed correctly when passed to the " + |
- "KeyframeEffectReadOnly constructor in Keyframe"); |
+ "KeyframeEffectReadOnly constructor in regular keyframes"); |
test(function(t) { |
gEasingValueTests.forEach(function(subtest) { |
@@ -135,7 +124,7 @@ test(function(t) { |
}); |
}); |
}, "composite values are parsed correctly when passed to the " + |
- "KeyframeEffectReadOnly constructor in PropertyIndexedKeyframes"); |
+ "KeyframeEffectReadOnly constructor in property-indexed keyframes"); |
test(function(t) { |
var getFrames = function(composite) { |
@@ -155,7 +144,7 @@ test(function(t) { |
}); |
}); |
}, "composite values are parsed correctly when passed to the " + |
- "KeyframeEffectReadOnly constructor in Keyframe"); |
+ "KeyframeEffectReadOnly constructor in regular keyframes"); |
test(function(t) { |
gGoodOptionsCompositeValueTests.forEach(function(composite) { |
@@ -176,79 +165,119 @@ test(function(t) { |
"KeyframeEffectReadOnly constructor in KeyframeTimingOptions"); |
var gPropertyIndexedKeyframesTests = [ |
- { desc: "a one property two value PropertyIndexedKeyframes specification", |
+ { desc: "a one property two value property-indexed keyframes specification", |
input: { left: ["10px", "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", |
+ output: [{ offset: null, computedOffset: 0, easing: "linear", |
+ left: "10px" }, |
+ { offset: null, computedOffset: 1, easing: "linear", |
+ left: "20px" }] }, |
+ { desc: "a one shorthand property two value property-indexed keyframes" |
+ + " specification", |
input: { margin: ["10px", "10px 20px 30px 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", |
+ output: [{ offset: null, computedOffset: 0, easing: "linear", |
+ margin: "10px" }, |
+ { offset: null, computedOffset: 1, easing: "linear", |
+ margin: "10px 20px 30px 40px" }] }, |
+ { desc: "a two property (one shorthand and one of its longhand components)" |
+ + " two value property-indexed keyframes specification", |
input: { marginTop: ["50px", "60px"], |
margin: ["10px", "10px 20px 30px 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", |
+ output: [{ offset: null, computedOffset: 0, easing: "linear", |
+ marginTop: "50px", margin: "10px" }, |
+ { offset: null, computedOffset: 1, easing: "linear", |
+ marginTop: "60px", margin: "10px 20px 30px 40px" }] }, |
+ { desc: "a two property two value property-indexed keyframes specification", |
input: { left: ["10px", "20px"], |
top: ["30px", "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", |
+ output: [{ offset: null, computedOffset: 0, easing: "linear", |
+ left: "10px", top: "30px" }, |
+ { offset: null, computedOffset: 1, easing: "linear", |
+ left: "20px", top: "40px" }] }, |
+ { desc: "a two property property-indexed keyframes specification with" |
+ + " different numbers of values", |
input: { left: ["10px", "20px", "30px"], |
top: ["40px", "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", |
+ output: [{ offset: null, computedOffset: 0.0, easing: "linear", |
+ left: "10px", top: "40px" }, |
+ { offset: null, computedOffset: 0.5, easing: "linear", |
+ left: "20px" }, |
+ { offset: null, computedOffset: 1.0, easing: "linear", |
+ left: "30px", top: "50px" }] }, |
+ { desc: "a property-indexed keyframes 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", 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", |
+ output: [{ offset: null, computedOffset: 0.00, easing: "linear", |
+ left: "10px", top: "15px" }, |
+ { offset: null, computedOffset: 0.25, easing: "linear", |
+ left: "20px", top: "25px" }, |
+ { offset: null, computedOffset: 0.50, easing: "linear", |
+ left: "30px", top: "invalid" }, |
+ { offset: null, computedOffset: 0.75, easing: "linear", |
+ left: "40px", top: "45px" }, |
+ { offset: null, computedOffset: 1.00, easing: "linear", |
+ left: "50px", top: "55px" }] }, |
+ { desc: "a one property two value property-indexed keyframes specification" |
+ + " that needs to stringify its values", |
input: { opacity: [0, 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", |
+ output: [{ offset: null, computedOffset: 0, easing: "linear", |
+ opacity: "0" }, |
+ { offset: null, computedOffset: 1, easing: "linear", |
+ opacity: "1" }] }, |
+ { desc: "a one property one value property-indexed keyframes specification", |
input: { 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", |
+ output: [{ offset: null, computedOffset: 1, easing: "linear", |
+ left: "10px" }] }, |
+ { desc: "a one property one non-array value property-indexed keyframes" |
+ + " specification", |
input: { 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", |
+ output: [{ offset: null, computedOffset: 1, easing: "linear", |
+ left: "10px" }] }, |
+ { desc: "a one property two value property-indexed keyframes specification" |
+ + " where the first value is invalid", |
input: { left: ["invalid", "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", |
+ output: [{ offset: null, computedOffset: 0, easing: "linear", |
+ left: "invalid" }, |
+ { offset: null, computedOffset: 1, easing: "linear", |
+ left: "10px" }] }, |
+ { desc: "a one property two value property-indexed keyframes specification" |
+ + " where the second value is invalid", |
input: { left: ["10px", "invalid"] }, |
- 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", |
+ output: [{ offset: null, computedOffset: 0, easing: "linear", |
+ 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 PropertyIndexedKeyframes specification where one property is missing from the last Keyframe", |
+ { 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 PropertyIndexedKeyframes specification with repeated values at offset 0 with different easings", |
+ 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: "linear", 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: "step-end", |
+ left: "500px" }] }, |
]; |
gPropertyIndexedKeyframesTests.forEach(function(subtest) { |
@@ -282,41 +311,56 @@ test(function(t) { |
}); |
new KeyframeEffectReadOnly(target, [kf1, kf2]); |
assert_array_equals(actualOrder, expectedOrder, "property access order"); |
-}, "the KeyframeEffectReadOnly constructor reads Keyframe properties in the " + |
+}, "the KeyframeEffectReadOnly constructor reads keyframe properties in the " + |
"expected order"); |
var gKeyframeSequenceTests = [ |
- { desc: "a one property two Keyframe sequence", |
+ { desc: "a one property two keyframe sequence", |
input: [{ offset: 0, left: "10px" }, |
{ offset: 1, 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", |
+ { 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", left: "10px", top: "30px" }, |
- { offset: 1, computedOffset: 1, easing: "linear", left: "20px", top: "40px" }] }, |
- { desc: "a one shorthand property two Keyframe sequence", |
+ 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", 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", |
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", |
+ margin: "10px" }, |
+ { offset: 1, computedOffset: 1, easing: "linear", |
+ margin: "20px 30px 40px 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", 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", |
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", |
+ margin: "10px", marginTop: "20px" }, |
+ { offset: 1, computedOffset: 1, easing: "linear", |
+ marginTop: "70px", margin: "30px 40px 50px 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", 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", |
+ 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: "30px" }, |
+ { 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" }, |
{ offset: 0, left: "30px" }, |
@@ -324,50 +368,72 @@ var gKeyframeSequenceTests = [ |
{ offset: 1, left: "50px" }, |
{ offset: 1, left: "60px" }], |
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" }, |
+ { offset: 0, computedOffset: 0, easing: "linear", left: "20px" }, |
{ 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", |
+ { offset: 1, computedOffset: 1, easing: "linear", left: "50px" }, |
+ { 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", left: "10px", top: "20px" }, |
- { offset: 1, computedOffset: 1, easing: "linear", left: "40px", top: "30px" }] }, |
- { desc: "a one property Keyframe sequence with some omitted offsets", |
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" }, |
+ { offset: 0, computedOffset: 0, easing: "linear", top: "20px" }, |
+ { offset: 1, computedOffset: 1, easing: "linear", top: "30px" }, |
+ { offset: 1, computedOffset: 1, easing: "linear", left: "40px" }] |
+ }, |
+ { 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", 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", |
+ output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", |
+ left: "10px" }, |
+ { offset: 0.25, computedOffset: 0.25, easing: "linear", |
+ left: "20px" }, |
+ { offset: null, computedOffset: 0.50, easing: "linear", |
+ left: "30px" }, |
+ { offset: null, 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", 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", |
+ output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", |
+ left: "10px", top: "20px" }, |
+ { offset: 0.25, computedOffset: 0.25, easing: "linear", |
+ left: "30px" }, |
+ { offset: null, computedOffset: 0.50, easing: "linear", |
+ left: "40px" }, |
+ { offset: null, 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", 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", |
+ output: [{ offset: null, computedOffset: 0.00, easing: "linear", |
+ left: "10px" }, |
+ { offset: null, computedOffset: 0.25, easing: "linear", |
+ left: "20px" }, |
+ { offset: null, computedOffset: 0.50, easing: "linear", |
+ left: "30px" }, |
+ { offset: null, computedOffset: 0.75, easing: "linear", |
+ left: "40px" }, |
+ { offset: null, 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"}, |
{ offset: 0.5, easing: "linear", left: "30px" }, |
@@ -375,62 +441,79 @@ var gKeyframeSequenceTests = [ |
{ 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", |
- left: "10px", top: "20px" }, |
+ left: "10px" }, |
+ { offset: 0.0, computedOffset: 0.0, easing: "ease", |
+ 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", |
+ left: "30px" }, |
+ { offset: 0.5, computedOffset: 0.5, easing: "linear", |
+ top: "40px" }, |
+ { offset: 1.0, computedOffset: 1.0, easing: "step-end", |
+ left: "50px" }, |
+ { offset: 1.0, computedOffset: 1.0, easing: "step-end", |
+ 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" }, |
{ offset: 0.5, composite: "add", left: "30px" }, |
{ offset: 0.5, composite: "add", top: "40px" }, |
{ offset: 1.0, composite: "replace", left: "50px" }, |
{ offset: 1.0, composite: "replace", top: "60px" }], |
- output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", composite: "replace", left: "10px", top: "20px" }, |
- { offset: 0.5, computedOffset: 0.5, easing: "linear", composite: "add", left: "30px", top: "40px" }, |
- { offset: 1.0, computedOffset: 1.0, easing: "linear", composite: "replace", left: "50px", top: "60px" }] }, |
- { desc: "a one property two Keyframe sequence that needs to stringify its values", |
+ output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", |
+ composite: "replace", left: "10px" }, |
+ { offset: 0.0, computedOffset: 0.0, easing: "linear", |
+ composite: "replace", top: "20px" }, |
+ { offset: 0.5, computedOffset: 0.0, easing: "linear", |
+ composite: "add", left: "30px" }, |
+ { offset: 0.5, computedOffset: 0.0, easing: "linear", |
+ composite: "add", top: "40px" }, |
+ { offset: 1.0, computedOffset: 1.0, easing: "linear", |
+ composite: "replace", left: "50px" }, |
+ { offset: 1.0, computedOffset: 1.0, easing: "linear", |
+ composite: "replace", top: "60px" }] }, |
+ { 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", opacity: "0" }, |
- { offset: 1, computedOffset: 1, easing: "linear", opacity: "1" }] }, |
- { desc: "a Keyframe sequence where shorthand precedes longhand", |
+ { 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", 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", |
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", |
+ margin: "10px", marginRight: "20px" }, |
+ { offset: 1, computedOffset: 1, easing: "linear", |
+ margin: "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", 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)" }, |
+ output: [{ offset: 0, computedOffset: 0, easing: "linear", |
+ marginRight: "20px", margin: "10px" }, |
+ { offset: 1, computedOffset: 1, easing: "linear", |
+ margin: "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", |
- 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" }, |
+ borderLeft: "1px solid rgb(1, 2, 3)", |
+ border: "2px dotted rgb(4, 5, 6)" }, |
{ 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", |
- borderTopColor: "rgb(7, 8, 9)", borderTopWidth: "3px" }] }, |
- { 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)" }, |
+ border: "3px dashed rgb(7, 8, 9)" }] }, |
+ { 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", |
- 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" }, |
+ border: "2px dotted rgb(4, 5, 6)", |
+ borderLeft: "1px solid rgb(1, 2, 3)" }, |
{ 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", |
- borderTopColor: "rgb(7, 8, 9)", borderTopWidth: "3px" }] }, |
+ border: "3px dashed rgb(7, 8, 9)" }] }, |
]; |
gKeyframeSequenceTests.forEach(function(subtest) { |
@@ -467,7 +550,7 @@ gInvalidEasingInKeyframeSequenceTests.forEach(function(subtest) { |
assert_throws(new TypeError, function() { |
new KeyframeEffectReadOnly(target, subtest.input); |
}); |
- }, "Invalid easing [" + subtest.desc + "] in KeyframeSequence " + |
+ }, "Invalid easing [" + subtest.desc + "] in keyframe sequence " + |
"should be thrown"); |
}); |