зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1245748 - Update handling of 'composite' dictionary members to match changes to the spec; r=heycam, r=bz
Specifically, for the 'composite' member on keyframes, we now indicate "use the composite value specified on the effect" using a missing/undefined 'composite' member as opposed to a null value. MozReview-Commit-ID: ZH45GvCTlP --HG-- extra : rebase_source : 5acf081fb844f81280765a87ec019b7847ca1885
This commit is contained in:
Brian Birtles
Родитель
e8806251b8
Коммит
84a59825cc
|
|
@ -1725,15 +1725,15 @@ KeyframeEffectReadOnly::BuildAnimationPropertyList(
|
|||
{
|
||||
MOZ_ASSERT(aResult.IsEmpty());
|
||||
|
||||
// A frame list specification in the spec is essentially:
|
||||
// See the description of frame lists in the spec:
|
||||
//
|
||||
// (PropertyIndexedKeyframe or sequence<Keyframe> or SharedKeyframeList)
|
||||
// https://w3c.github.io/web-animations/#processing-a-frames-argument
|
||||
//
|
||||
// We don't support SharedKeyframeList yet, but we do the other two. We
|
||||
// manually implement the parts of JS-to-IDL union conversion algorithm
|
||||
// from the Web IDL spec, since we have to represent this an object? so
|
||||
// we can look at the open-ended set of properties on a
|
||||
// PropertyIndexedKeyframe or Keyframe.
|
||||
// We don't support SharedKeyframeList yet, but we do support the other
|
||||
// types of arguments. We manually implement the parts of JS-to-IDL union
|
||||
// conversion algorithm from the Web IDL spec, since we have to represent
|
||||
// this as an object? so we can look at the open-ended set of properties
|
||||
// on these objects.
|
||||
|
||||
if (!aFrames) {
|
||||
// The argument was explicitly null. In this case, the default dictionary
|
||||
|
|
@ -1954,7 +1954,6 @@ KeyframeEffectReadOnly::GetFrames(JSContext*& aCx,
|
|||
keyframeDict.mEasing.Truncate();
|
||||
entry->mTimingFunction->value().AppendToString(keyframeDict.mEasing);
|
||||
}
|
||||
keyframeDict.mComposite.SetValue(CompositeOperation::Replace);
|
||||
|
||||
JS::Rooted<JS::Value> keyframeJSValue(aCx);
|
||||
if (!ToJSValue(aCx, keyframeDict, &keyframeJSValue)) {
|
||||
|
|
|
|||
|
|
@ -173,9 +173,9 @@ test(function(t) {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
var expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "ease",
|
||||
color: "rgb(0, 0, 0)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
color: "rgb(255, 255, 255)" },
|
||||
];
|
||||
|
||||
|
|
@ -244,10 +244,10 @@ test(function(t) {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
var expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "ease",
|
||||
marginTop: "8px", marginRight: "8px",
|
||||
marginBottom: "8px", marginLeft: "8px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
marginTop: "16px", marginRight: "16px",
|
||||
marginBottom: "16px", marginLeft: "16px" },
|
||||
];
|
||||
|
|
@ -268,9 +268,9 @@ test(function(t) {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
var expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "ease",
|
||||
color: "rgb(0, 0, 255)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
color: "rgb(255, 255, 255)" },
|
||||
];
|
||||
|
||||
|
|
@ -290,9 +290,9 @@ test(function(t) {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
var expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "ease",
|
||||
color: "rgb(255, 255, 255)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
color: "rgb(0, 0, 255)" },
|
||||
];
|
||||
|
||||
|
|
@ -312,11 +312,11 @@ test(function(t) {
|
|||
assert_equals(frames.length, 3, "number of frames");
|
||||
|
||||
var expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "ease",
|
||||
color: "rgb(255, 255, 255)" },
|
||||
{ offset: 0.5, computedOffset: 0.5, easing: "ease", composite: "replace",
|
||||
{ offset: 0.5, computedOffset: 0.5, easing: "ease",
|
||||
color: "rgb(0, 0, 255)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
color: "rgb(255, 255, 255)" },
|
||||
];
|
||||
|
||||
|
|
@ -335,13 +335,13 @@ test(function(t) {
|
|||
assert_equals(frames.length, 4, "number of frames");
|
||||
|
||||
var expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "ease",
|
||||
color: "rgb(0, 0, 0)", marginTop: "8px" },
|
||||
{ offset: 0.25, computedOffset: 0.25, easing: "ease", composite: "replace",
|
||||
{ offset: 0.25, computedOffset: 0.25, easing: "ease",
|
||||
color: "rgb(0, 0, 255)" },
|
||||
{ offset: 0.75, computedOffset: 0.75, easing: "ease", composite: "replace",
|
||||
{ offset: 0.75, computedOffset: 0.75, easing: "ease",
|
||||
marginTop: "12px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
color: "rgb(255, 255, 255)", marginTop: "16px" },
|
||||
];
|
||||
|
||||
|
|
@ -361,13 +361,13 @@ test(function(t) {
|
|||
assert_equals(frames.length, 4, "number of frames");
|
||||
|
||||
var expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "linear",
|
||||
color: "rgb(0, 0, 0)", marginTop: "8px" },
|
||||
{ offset: 0.25, computedOffset: 0.25, easing: "step-end", composite: "replace",
|
||||
{ offset: 0.25, computedOffset: 0.25, easing: "step-end",
|
||||
color: "rgb(0, 0, 255)" },
|
||||
{ offset: 0.75, computedOffset: 0.75, easing: "ease-in", composite: "replace",
|
||||
{ offset: 0.75, computedOffset: 0.75, easing: "ease-in",
|
||||
marginTop: "12px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
color: "rgb(255, 255, 255)", marginTop: "16px" },
|
||||
];
|
||||
|
||||
|
|
@ -387,9 +387,9 @@ test(function(t) {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
var expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "ease",
|
||||
color: "rgb(0, 0, 0)", marginTop: "8px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
color: "rgb(255, 255, 255)", marginTop: "16px" },
|
||||
];
|
||||
|
||||
|
|
@ -409,11 +409,11 @@ test(function(t) {
|
|||
assert_equals(frames.length, 3, "number of frames");
|
||||
|
||||
var expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "linear",
|
||||
marginTop: "8px", paddingLeft: "2px" },
|
||||
{ offset: 0, computedOffset: 0, easing: "step-end", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "step-end",
|
||||
color: "rgb(0, 0, 0)", fontSize: "16px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
color: "rgb(255, 255, 255)", fontSize: "32px", marginTop: "16px",
|
||||
paddingLeft: "4px" },
|
||||
];
|
||||
|
|
@ -434,15 +434,15 @@ test(function(t) {
|
|||
assert_equals(frames.length, 5, "number of frames");
|
||||
|
||||
var expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "step-end", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "step-end",
|
||||
marginRight: "0px" },
|
||||
{ offset: 0, computedOffset: 0, easing: "steps(1)", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "steps(1)",
|
||||
marginBottom: "0px" },
|
||||
{ offset: 0, computedOffset: 0, easing: "steps(1, end)", composite: "replace",
|
||||
{ offset: 0, computedOffset: 0, easing: "steps(1, end)",
|
||||
marginTop: "0px" },
|
||||
{ offset: 0.5, computedOffset: 0.5, easing: "step-end", composite: "replace",
|
||||
{ offset: 0.5, computedOffset: 0.5, easing: "step-end",
|
||||
marginTop: "10px", marginRight: "10px", marginBottom: "10px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
marginTop: "20px", marginRight: "20px", marginBottom: "20px" },
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -31,10 +31,8 @@ test(function(t) {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
var expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
|
||||
left: "0px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
|
||||
left: "100px" },
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", left: "0px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", left: "100px" },
|
||||
];
|
||||
|
||||
for (var i = 0; i < frames.length; i++) {
|
||||
|
|
@ -56,10 +54,8 @@ test(function(t) {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
var expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "steps(2, end)", composite: "replace",
|
||||
left: "0px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
|
||||
left: "100px" },
|
||||
{ offset: 0, computedOffset: 0, easing: "steps(2, end)", left: "0px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear", left: "100px" },
|
||||
];
|
||||
|
||||
for (var i = 0; i < frames.length; i++) {
|
||||
|
|
|
|||
|
|
@ -19,19 +19,17 @@ enum CompositeOperation { "replace", "add", "accumulate" };
|
|||
// but we use it for manual JS->IDL and IDL->JS conversions in
|
||||
// KeyframeEffectReadOnly's implementation.
|
||||
|
||||
dictionary BasePropertyIndexedKeyframe
|
||||
{
|
||||
dictionary BasePropertyIndexedKeyframe {
|
||||
DOMString easing = "linear";
|
||||
CompositeOperation? composite = null;
|
||||
CompositeOperation composite;
|
||||
};
|
||||
|
||||
dictionary BaseKeyframe {
|
||||
double? offset = null;
|
||||
DOMString easing = "linear";
|
||||
CompositeOperation? composite = null;
|
||||
CompositeOperation composite;
|
||||
};
|
||||
|
||||
dictionary BaseComputedKeyframe : BaseKeyframe
|
||||
{
|
||||
dictionary BaseComputedKeyframe : BaseKeyframe {
|
||||
double computedOffset;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -109,56 +109,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 });
|
||||
|
|
@ -178,77 +179,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) {
|
||||
|
|
@ -274,7 +275,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; }
|
||||
|
|
@ -289,33 +290,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" },
|
||||
|
|
@ -323,50 +324,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"},
|
||||
|
|
@ -374,9 +375,9 @@ 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" },
|
||||
|
|
@ -390,27 +391,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",
|
||||
|
|
@ -418,12 +419,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",
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче