mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1216872 - Make 100% Keyframe returned by getFrames() have easing:linear. r=birtles

This commit is contained in:
Cameron McCormack 2015-10-22 19:22:38 +11:00
Родитель 50e5a35995
Коммит bce3927621
4 изменённых файлов: 106 добавлений и 115 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
dom/animation/KeyframeEffect.cpp
Просмотреть файл

@ -1663,7 +1663,8 @@ KeyframeEffectReadOnly::GetFrames(JSContext*& aCx,
entry->mProperty = property.mProperty;
entry->mValue = segment.mToValue;
entry->mOffset = segment.mToKey;
entry->mTimingFunction = &segment.mTimingFunction;
entry->mTimingFunction =
segment.mToKey == 1.0f ? nullptr : &segment.mTimingFunction;
entry->mPosition =
segment.mFromKey == segment.mToKey && segment.mToKey == 1.0f ?
ValuePosition::Last :

37
dom/animation/test/css-animations/file_keyframeeffect-getframes.html
Просмотреть файл

@ -175,7 +175,7 @@ test(function(t) {
var expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
color: "rgb(0, 0, 0)" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: "replace",
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
color: "rgb(255, 255, 255)" },
];
@ -195,7 +195,7 @@ test(function(t) {
assert_equals(frames.length, 3, "number of frames");
for (var i = 0; i < frames.length; i++) {
assert_equals(frames[i].easing, easing,
assert_equals(frames[i].easing, i == frames.length - 1 ? "linear" : easing,
"value for 'easing' on ComputedKeyframe #" + i);
}
});
@ -214,7 +214,7 @@ test(function(t) {
"value of 'easing' on ComputedKeyframe #0");
assert_equals(frames[1].easing, "ease-in-out",
"value of 'easing' on ComputedKeyframe #1");
assert_equals(frames[2].easing, "ease-in-out",
assert_equals(frames[2].easing, "linear",
"value of 'easing' on ComputedKeyframe #2");
}, 'KeyframeEffectReadOnly.getFrames() returns frames with expected easing ' +
'values, when the easing is specified on each keyframe');
@ -230,7 +230,7 @@ test(function(t) {
"value of 'easing' on ComputedKeyframe #0");
assert_equals(frames[1].easing, "step-start",
"value of 'easing' on ComputedKeyframe #1");
assert_equals(frames[2].easing, "step-start",
assert_equals(frames[2].easing, "linear",
"value of 'easing' on ComputedKeyframe #2");
}, 'KeyframeEffectReadOnly.getFrames() returns frames with expected easing ' +
'values, when the easing is specified on some keyframes');
@ -247,7 +247,7 @@ test(function(t) {
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
marginTop: "8px", marginRight: "8px",
marginBottom: "8px", marginLeft: "8px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: "replace",
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
marginTop: "16px", marginRight: "16px",
marginBottom: "16px", marginLeft: "16px" },
];
@ -270,7 +270,7 @@ test(function(t) {
var expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
color: "rgb(0, 0, 255)" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: "replace",
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
color: "rgb(255, 255, 255)" },
];
@ -292,7 +292,7 @@ test(function(t) {
var expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
color: "rgb(255, 255, 255)" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: "replace",
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
color: "rgb(0, 0, 255)" },
];
@ -316,7 +316,7 @@ test(function(t) {
color: "rgb(255, 255, 255)" },
{ offset: 0.5, computedOffset: 0.5, easing: "ease", composite: "replace",
color: "rgb(0, 0, 255)" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: "replace",
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
color: "rgb(255, 255, 255)" },
];
@ -341,7 +341,7 @@ test(function(t) {
color: "rgb(0, 0, 255)" },
{ offset: 0.75, computedOffset: 0.75, easing: "ease", composite: "replace",
marginTop: "12px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: "replace",
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
color: "rgb(255, 255, 255)", marginTop: "16px" },
];
@ -358,7 +358,7 @@ test(function(t) {
div.style.animation = 'anim-different-props-and-easing 100s';
var frames = getFrames(div);
assert_equals(frames.length, 5, "number of frames");
assert_equals(frames.length, 4, "number of frames");
var expected = [
{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace",
@ -367,10 +367,8 @@ test(function(t) {
color: "rgb(0, 0, 255)" },
{ offset: 0.75, computedOffset: 0.75, easing: "ease-in", composite: "replace",
marginTop: "12px" },
{ offset: 1, computedOffset: 1, easing: "ease-in", composite: "replace",
marginTop: "16px" },
{ offset: 1, computedOffset: 1, easing: "step-end", composite: "replace",
color: "rgb(255, 255, 255)" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
color: "rgb(255, 255, 255)", marginTop: "16px" },
];
for (var i = 0; i < frames.length; i++) {
@ -391,7 +389,7 @@ test(function(t) {
var expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
color: "rgb(0, 0, 0)", marginTop: "8px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: "replace",
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
color: "rgb(255, 255, 255)", marginTop: "16px" },
];
@ -408,7 +406,7 @@ test(function(t) {
div.style.animation = 'anim-merge-offset-and-easing 100s';
var frames = getFrames(div);
assert_equals(frames.length, 4, "number of frames");
assert_equals(frames.length, 3, "number of frames");
var expected = [
{ offset: 0, computedOffset: 0, easing: "linear", composite: "replace",
@ -416,9 +414,8 @@ test(function(t) {
{ offset: 0, computedOffset: 0, easing: "step-end", composite: "replace",
color: "rgb(0, 0, 0)", fontSize: "16px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
marginTop: "16px", paddingLeft: "4px" },
{ offset: 1, computedOffset: 1, easing: "step-end", composite: "replace",
color: "rgb(255, 255, 255)", fontSize: "32px" },
color: "rgb(255, 255, 255)", fontSize: "32px", marginTop: "16px",
paddingLeft: "4px" },
];
for (var i = 0; i < frames.length; i++) {
@ -445,7 +442,7 @@ test(function(t) {
marginTop: "0px" },
{ offset: 0.5, computedOffset: 0.5, easing: "step-end", composite: "replace",
marginTop: "10px", marginRight: "10px", marginBottom: "10px" },
{ offset: 1, computedOffset: 1, easing: "step-end", composite: "replace",
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
marginTop: "20px", marginRight: "20px", marginBottom: "20px" },
];

4
dom/animation/test/css-transitions/file_keyframeeffect-getframes.html
Просмотреть файл

@ -33,7 +33,7 @@ test(function(t) {
var expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: "replace",
left: "0px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: "replace",
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
left: "100px" },
];
@ -58,7 +58,7 @@ test(function(t) {
var expected = [
{ offset: 0, computedOffset: 0, easing: "steps(2, end)", composite: "replace",
left: "0px" },
{ offset: 1, computedOffset: 1, easing: "steps(2, end)", composite: "replace",
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
left: "100px" },
];

177
testing/web-platform/tests/web-animations/keyframe-effect/constructor.html
Просмотреть файл

@ -21,17 +21,10 @@
var target = document.getElementById("target");
function assert_frames_equal(a, b, name) {
// TODO: Test the value for easing on the 100% keyframe.
function include(p) {
return !(b.offset == 1 && p == "easing");
}
assert_equals(Object.keys(a).sort().filter(include).toString(),
Object.keys(b).sort().filter(include).toString(),
assert_equals(Object.keys(a).sort().toString(),
Object.keys(b).sort().toString(),
"properties on " + name);
for (var p in a) {
if (!include(p)) {
continue;
}
assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
}
}
@ -190,77 +183,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", composite: "replace", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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", 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" }] },
{ 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", 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" }] },
{ 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", composite: "replace", left: "10px", top: "30px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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", 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" }] },
{ 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", 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" }] },
{ 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", composite: "replace", opacity: "0" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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", composite: "replace" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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", composite: "replace" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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", composite: "replace" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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", composite: "replace", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace" }] },
{ 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", composite: "replace", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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", composite: "replace", left: "10px" , top: "20px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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", 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" }] },
];
gPropertyIndexedKeyframesTests.forEach(function(subtest) {
@ -301,33 +294,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", composite: "replace", left: "10px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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", composite: "replace", left: "10px", top: "30px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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", 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" }] },
{ 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", 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" }] },
{ 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", 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" }] },
{ desc: "a Keyframe sequence with duplicate values for offsets 0 and 1",
input: [{ offset: 0, left: "10px" },
{ offset: 0, left: "20px" },
@ -335,50 +328,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", 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" }] },
{ 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", composite: "replace", left: "10px", top: "20px" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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", 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" }] },
{ 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", 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" }] },
{ 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", 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" }] },
{ 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"},
@ -387,8 +380,8 @@ 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", 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" }] },
{ 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" }] },
{ 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" },
@ -396,33 +389,33 @@ var gKeyframeSequenceTests = [
{ 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" }] },
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",
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", composite: "replace", opacity: "0" },
{ offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 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", 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" }] },
{ 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", 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" }] },
{ 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", composite: "replace",
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", composite: "replace",
borderBottomColor: "rgb(7, 8, 9)", borderBottomWidth: "3px",
borderLeftColor: "rgb(7, 8, 9)", borderLeftWidth: "3px",
borderRightColor: "rgb(7, 8, 9)", borderRightWidth: "3px",
@ -430,12 +423,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", composite: "replace",
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", composite: "replace",
borderBottomColor: "rgb(7, 8, 9)", borderBottomWidth: "3px",
borderLeftColor: "rgb(7, 8, 9)", borderLeftWidth: "3px",
borderRightColor: "rgb(7, 8, 9)", borderRightWidth: "3px",