mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision 697b971060b2d475a73c1c3755232a4674d61cf5
This commit is contained in:
Ms2ger
parent
f60598909a
commit
b97474fbba
236 changed files with 4817 additions and 893 deletions
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffectReadOnly constructor tests</title>
|
||||
<link rel="help" href="http://w3c.github.io/web-animations/#the-keyframeeffect-interfaces">
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#the-keyframeeffect-interfaces">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../testcommon.js"></script>
|
||||
<script src="../resources/keyframe-utils.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="target"></div>
|
||||
|
|
@ -19,28 +19,6 @@
|
|||
|
||||
var target = document.getElementById("target");
|
||||
|
||||
function assert_frames_equal(a, b, name) {
|
||||
assert_equals(Object.keys(a).sort().toString(),
|
||||
Object.keys(b).sort().toString(),
|
||||
"properties on " + name);
|
||||
for (var p in a) {
|
||||
assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
|
||||
}
|
||||
}
|
||||
|
||||
function assert_frame_lists_equal(a, b) {
|
||||
assert_equals(a.length, b.length, "number of frames");
|
||||
for (var i = 0; i < Math.min(a.length, b.length); i++) {
|
||||
assert_frames_equal(a[i], b[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
}
|
||||
|
||||
var gEmptyKeyframeListTests = [
|
||||
[],
|
||||
null,
|
||||
undefined,
|
||||
];
|
||||
|
||||
test(function(t) {
|
||||
gEmptyKeyframeListTests.forEach(function(frames) {
|
||||
assert_equals(new KeyframeEffectReadOnly(target, frames).getFrames().length,
|
||||
|
|
@ -48,14 +26,6 @@ test(function(t) {
|
|||
});
|
||||
}, "a KeyframeEffectReadOnly can be constructed with no frames");
|
||||
|
||||
// [specified easing value, expected easing value]
|
||||
var gEasingValueTests = [
|
||||
["linear", "linear"],
|
||||
["ease-in-out", "ease-in-out"],
|
||||
["Ease\\2d in-out", "ease-in-out"],
|
||||
["ease /**/", "ease"],
|
||||
];
|
||||
|
||||
test(function(t) {
|
||||
gEasingValueTests.forEach(function(subtest) {
|
||||
var easing = subtest[0];
|
||||
|
|
@ -97,18 +67,6 @@ test(function(t) {
|
|||
}, "easing values are parsed correctly when passed to the " +
|
||||
"KeyframeEffectReadOnly constructor in KeyframeTimingOptions");
|
||||
|
||||
var gGoodKeyframeCompositeValueTests = [
|
||||
"replace", "add", "accumulate", undefined
|
||||
];
|
||||
|
||||
var gGoodOptionsCompositeValueTests = [
|
||||
"replace", "add", "accumulate"
|
||||
];
|
||||
|
||||
var gBadCompositeValueTests = [
|
||||
"unrecognised", "replace ", "Replace", null
|
||||
];
|
||||
|
||||
test(function(t) {
|
||||
var getFrame = function(composite) {
|
||||
return { left: [ "10px", "20px" ], composite: composite };
|
||||
|
|
@ -120,8 +78,8 @@ test(function(t) {
|
|||
});
|
||||
gBadCompositeValueTests.forEach(function(composite) {
|
||||
assert_throws(new TypeError, function() {
|
||||
new KeyframeEffectReadOnly(target, getFrame(composite));
|
||||
});
|
||||
new KeyframeEffectReadOnly(target, getFrame(composite));
|
||||
});
|
||||
});
|
||||
}, "composite values are parsed correctly when passed to the " +
|
||||
"KeyframeEffectReadOnly constructor in property-indexed keyframes");
|
||||
|
|
@ -140,8 +98,8 @@ test(function(t) {
|
|||
});
|
||||
gBadCompositeValueTests.forEach(function(composite) {
|
||||
assert_throws(new TypeError, function() {
|
||||
new KeyframeEffectReadOnly(target, getFrames(composite));
|
||||
});
|
||||
new KeyframeEffectReadOnly(target, getFrames(composite));
|
||||
});
|
||||
});
|
||||
}, "composite values are parsed correctly when passed to the " +
|
||||
"KeyframeEffectReadOnly constructor in regular keyframes");
|
||||
|
|
@ -156,130 +114,14 @@ test(function(t) {
|
|||
});
|
||||
gBadCompositeValueTests.forEach(function(composite) {
|
||||
assert_throws(new TypeError, function() {
|
||||
new KeyframeEffectReadOnly(target, {
|
||||
left: ["10px", "20px"]
|
||||
}, { composite: composite });
|
||||
});
|
||||
new KeyframeEffectReadOnly(target, {
|
||||
left: ["10px", "20px"]
|
||||
}, { composite: composite });
|
||||
});
|
||||
});
|
||||
}, "composite values are parsed correctly when passed to the " +
|
||||
"KeyframeEffectReadOnly constructor in KeyframeTimingOptions");
|
||||
|
||||
var gPropertyIndexedKeyframesTests = [
|
||||
{ desc: "a one property two value property-indexed keyframes specification",
|
||||
input: { left: ["10px", "20px"] },
|
||||
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: 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: 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: 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: 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: 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: 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: null, computedOffset: 1, easing: "linear",
|
||||
left: "10px" }] },
|
||||
{ desc: "a one property one non-array value property-indexed keyframes"
|
||||
+ " specification",
|
||||
input: { left: "10px" },
|
||||
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: 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: 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 property-indexed keyframes specification where one"
|
||||
+ " property is missing from the last keyframe",
|
||||
input: [{ offset: 0, left: "10px", top: "20px" },
|
||||
{ offset: 1, left: "30px" }],
|
||||
output: [{ offset: 0, computedOffset: 0, easing: "linear",
|
||||
left: "10px" , top: "20px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
left: "30px" }] },
|
||||
{ desc: "a property-indexed keyframes specification with repeated values"
|
||||
+ " at offset 0 with different easings",
|
||||
input: [{ offset: 0.0, left: "100px", easing: "ease" },
|
||||
{ offset: 0.0, left: "200px", easing: "ease" },
|
||||
{ offset: 0.5, left: "300px", easing: "linear" },
|
||||
{ offset: 1.0, left: "400px", easing: "ease-out" },
|
||||
{ offset: 1.0, left: "500px", easing: "step-end" }],
|
||||
output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease",
|
||||
left: "100px" },
|
||||
{ offset: 0.0, computedOffset: 0.0, easing: "ease",
|
||||
left: "200px" },
|
||||
{ offset: 0.5, computedOffset: 0.5, easing: "linear",
|
||||
left: "300px" },
|
||||
{ offset: 1.0, computedOffset: 1.0, easing: "ease-out",
|
||||
left: "400px" },
|
||||
{ offset: 1.0, computedOffset: 1.0, easing: "step-end",
|
||||
left: "500px" }] },
|
||||
];
|
||||
|
||||
gPropertyIndexedKeyframesTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffectReadOnly(target, subtest.input);
|
||||
|
|
@ -314,208 +156,6 @@ test(function(t) {
|
|||
}, "the KeyframeEffectReadOnly constructor reads keyframe properties in the " +
|
||||
"expected order");
|
||||
|
||||
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", 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",
|
||||
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",
|
||||
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",
|
||||
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: "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" },
|
||||
{ offset: 1, left: "40px" },
|
||||
{ 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: "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" },
|
||||
{ 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: 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: 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: 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" },
|
||||
{ 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",
|
||||
left: "10px" },
|
||||
{ offset: 0.0, computedOffset: 0.0, easing: "ease",
|
||||
top: "20px" },
|
||||
{ offset: 0.5, computedOffset: 0.5, easing: "linear",
|
||||
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" },
|
||||
{ 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",
|
||||
input: [{ offset: 0, margin: "10px", marginRight: "20px" },
|
||||
{ offset: 1, margin: "30px" }],
|
||||
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",
|
||||
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",
|
||||
borderLeft: "1px solid rgb(1, 2, 3)",
|
||||
border: "2px dotted rgb(4, 5, 6)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
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",
|
||||
border: "2px dotted rgb(4, 5, 6)",
|
||||
borderLeft: "1px solid rgb(1, 2, 3)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "linear",
|
||||
border: "3px dashed rgb(7, 8, 9)" }] },
|
||||
];
|
||||
|
||||
gKeyframeSequenceTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffectReadOnly(target, subtest.input);
|
||||
|
|
@ -530,20 +170,13 @@ gKeyframeSequenceTests.forEach(function(subtest) {
|
|||
" roundtrips");
|
||||
});
|
||||
|
||||
var gInvalidEasingInKeyframeSequenceTests = [
|
||||
{ desc: "a blank easing",
|
||||
input: [{ easing: "" }] },
|
||||
{ desc: "an unrecognized easing",
|
||||
input: [{ easing: "unrecognized" }] },
|
||||
{ desc: "an 'initial' easing",
|
||||
input: [{ easing: "initial" }] },
|
||||
{ desc: "an 'inherit' easing",
|
||||
input: [{ easing: "inherit" }] },
|
||||
{ desc: "a variable easing",
|
||||
input: [{ easing: "var(--x)" }] },
|
||||
{ desc: "a multi-value easing",
|
||||
input: [{ easing: "ease-in-out, ease-out" }] }
|
||||
];
|
||||
gInvalidKeyframesTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
assert_throws(subtest.expected, function() {
|
||||
new KeyframeEffectReadOnly(target, subtest.input);
|
||||
});
|
||||
}, "KeyframeEffectReadOnly constructor throws with " + subtest.desc);
|
||||
});
|
||||
|
||||
gInvalidEasingInKeyframeSequenceTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
|
|
@ -556,7 +189,7 @@ gInvalidEasingInKeyframeSequenceTests.forEach(function(subtest) {
|
|||
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffectReadOnly(target,
|
||||
{left: ["10px", "20px"]});
|
||||
{ left: ["10px", "20px"] });
|
||||
|
||||
var timing = effect.timing;
|
||||
assert_equals(timing.delay, 0, "default delay");
|
||||
|
|
@ -576,48 +209,10 @@ test(function(t) {
|
|||
}, "a KeyframeEffectReadOnly constructed without any " +
|
||||
"KeyframeEffectOptions object");
|
||||
|
||||
var gKeyframeEffectOptionTests = [
|
||||
{ desc: "an empty KeyframeEffectOptions object",
|
||||
input: { },
|
||||
expected: { } },
|
||||
{ desc: "a normal KeyframeEffectOptions object",
|
||||
input: { delay: 1000,
|
||||
fill: "auto",
|
||||
iterations: 5.5,
|
||||
duration: "auto",
|
||||
direction: "alternate" },
|
||||
expected: { delay: 1000,
|
||||
fill: "auto",
|
||||
iterations: 5.5,
|
||||
duration: "auto",
|
||||
direction: "alternate" } },
|
||||
{ desc: "a double value",
|
||||
input: 3000,
|
||||
expected: { duration: 3000 } },
|
||||
{ desc: "+Infinity",
|
||||
input: Infinity,
|
||||
expected: { duration: Infinity } },
|
||||
{ desc: "an Infinity duration",
|
||||
input: { duration: Infinity },
|
||||
expected: { duration: Infinity } },
|
||||
{ desc: "an auto duration",
|
||||
input: { duration: "auto" },
|
||||
expected: { duration: "auto" } },
|
||||
{ desc: "an Infinity iterations",
|
||||
input: { iterations: Infinity },
|
||||
expected: { iterations: Infinity } },
|
||||
{ desc: "an auto fill",
|
||||
input: { fill: "auto" },
|
||||
expected: { fill: "auto" } },
|
||||
{ desc: "a forwards fill",
|
||||
input: { fill: "forwards" },
|
||||
expected: { fill: "forwards" } }
|
||||
];
|
||||
|
||||
gKeyframeEffectOptionTests.forEach(function(stest) {
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffectReadOnly(target,
|
||||
{left: ["10px", "20px"]},
|
||||
{ left: ["10px", "20px"] },
|
||||
stest.input);
|
||||
|
||||
// Helper function to provide default expected values when the test does
|
||||
|
|
@ -641,57 +236,6 @@ gKeyframeEffectOptionTests.forEach(function(stest) {
|
|||
}, "a KeyframeEffectReadOnly constructed by " + stest.desc);
|
||||
});
|
||||
|
||||
var gInvalidKeyframeEffectOptionTests = [
|
||||
{ desc: "-Infinity",
|
||||
input: -Infinity,
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "NaN",
|
||||
input: NaN,
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "a negative value",
|
||||
input: -1,
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "a negative Infinity duration",
|
||||
input: { duration: -Infinity },
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "a NaN duration",
|
||||
input: { duration: NaN },
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "a negative duration",
|
||||
input: { duration: -1 },
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "a string duration",
|
||||
input: { duration: "merrychristmas" },
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "a negative Infinity iterations",
|
||||
input: { iterations: -Infinity},
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "a NaN iterations",
|
||||
input: { iterations: NaN },
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "a negative iterations",
|
||||
input: { iterations: -1 },
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "a blank easing",
|
||||
input: { easing: "" },
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "an unrecognized easing",
|
||||
input: { easing: "unrecognised" },
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "an 'initial' easing",
|
||||
input: { easing: "initial" },
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "an 'inherit' easing",
|
||||
input: { easing: "inherit" },
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "a variable easing",
|
||||
input: { easing: "var(--x)" },
|
||||
expected: { name: "TypeError" } },
|
||||
{ desc: "a multi-value easing",
|
||||
input: { easing: "ease-in-out, ease-out" },
|
||||
expected: { name: "TypeError" } }
|
||||
];
|
||||
|
||||
gInvalidKeyframeEffectOptionTests.forEach(function(stest) {
|
||||
test(function(t) {
|
||||
assert_throws(stest.expected, function() {
|
||||
|
|
@ -703,9 +247,16 @@ gInvalidKeyframeEffectOptionTests.forEach(function(stest) {
|
|||
});
|
||||
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffect(target,
|
||||
{ left: ["10px", "20px"] });
|
||||
var effect = new KeyframeEffectReadOnly(null,
|
||||
{ left: ["10px", "20px"] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
fill: "forwards" });
|
||||
assert_equals(effect.target, null,
|
||||
"Effect created with null target has correct target");
|
||||
}, "a KeyframeEffectReadOnly constructed with null target");
|
||||
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffect(target, null);
|
||||
assert_class_string(effect, "KeyframeEffect");
|
||||
assert_class_string(effect.timing, "AnimationEffectTiming");
|
||||
}, "KeyframeEffect constructor creates an AnimationEffectTiming timing object");
|
||||
|
|
@ -718,7 +269,5 @@ test(function(t) {
|
|||
});
|
||||
}, "KeyframeEffect constructor propagates exceptions generated by accessing"
|
||||
+ " the options object");
|
||||
|
||||
done();
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,445 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>currentIteration of KeyframeEffectReadOnly getComputedTiming() tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffectreadonly-getcomputedtiming">
|
||||
<link rel="author" title="Daisuke Akatsuka" href="mailto:daisuke@mozilla-japan.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
function executeTests(tests, description) {
|
||||
tests.forEach(function(currentTest) {
|
||||
var testParams = '';
|
||||
for (var attr in currentTest.input) {
|
||||
testParams += ' ' + attr + ':' + currentTest.input[attr];
|
||||
}
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, currentTest.input);
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration,
|
||||
currentTest.before);
|
||||
anim.currentTime = currentTest.input.delay || 0;
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration,
|
||||
currentTest.active);
|
||||
if (typeof currentTest.after !== 'undefined') {
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration,
|
||||
currentTest.after);
|
||||
}
|
||||
}, description + testParams);
|
||||
});
|
||||
}
|
||||
|
||||
async_test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, { delay: 1 });
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, null);
|
||||
anim.finished.then(t.step_func(function() {
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, null);
|
||||
t.done();
|
||||
}));
|
||||
}, 'Test currentIteration during before and after phase when fill is none');
|
||||
|
||||
var gTests_zero_iterations = [
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 0,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 0,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 0,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 2.5,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 2,
|
||||
active: 2,
|
||||
after: 2
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 2.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 2,
|
||||
active: 2,
|
||||
after: 2
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 2.5,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 2,
|
||||
active: 2,
|
||||
after: 2
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 3,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 3,
|
||||
active: 3,
|
||||
after: 3
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 3,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 3,
|
||||
active: 3,
|
||||
after: 3
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 3,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 3,
|
||||
active: 3,
|
||||
after: 3
|
||||
}
|
||||
];
|
||||
|
||||
var gTests_integer_iterations = [
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 0,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 2,
|
||||
after: 2
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 0,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 2
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 0,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 2.5,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 2,
|
||||
active: 5,
|
||||
after: 5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 2.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 2,
|
||||
active: 2,
|
||||
after: 5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 2.5,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 2,
|
||||
active: 2
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 3,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 3,
|
||||
active: 5,
|
||||
after: 5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 3,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 3,
|
||||
active: 3,
|
||||
after: 5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 3,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 3,
|
||||
active: 3
|
||||
}
|
||||
];
|
||||
|
||||
var gTests_fractional_iterations = [
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 0,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 3,
|
||||
after: 3
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 0,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 3
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 0,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 2.5,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 2,
|
||||
active: 5,
|
||||
after: 5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 2.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 2,
|
||||
active: 2,
|
||||
after: 5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 2.5,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 2,
|
||||
active: 2
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 3,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 3,
|
||||
active: 6,
|
||||
after: 6
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 3,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 3,
|
||||
active: 3,
|
||||
after: 6
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 3,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 3,
|
||||
active: 3
|
||||
}
|
||||
];
|
||||
|
||||
var gTests_infinity_iterations = [
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 0,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: Infinity,
|
||||
after: Infinity
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 0,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 0,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 2.5,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 2,
|
||||
active: Infinity,
|
||||
after: Infinity
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 2.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 2,
|
||||
active: 2
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 2.5,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 2,
|
||||
active: 2
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 3,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 3,
|
||||
active: Infinity,
|
||||
after: Infinity
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 3,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 3,
|
||||
active: 3
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 3,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 3,
|
||||
active: 3
|
||||
}
|
||||
];
|
||||
|
||||
executeTests(gTests_zero_iterations, "Test zero iterations:");
|
||||
executeTests(gTests_integer_iterations, "Test integer iterations:");
|
||||
executeTests(gTests_fractional_iterations, "Test fractional iterations:");
|
||||
executeTests(gTests_infinity_iterations, "Test infinity iterations:");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -1,445 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>progress of KeyframeEffectReadOnly getComputedTiming() tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffectreadonly-getcomputedtiming">
|
||||
<link rel="author" title="Daisuke Akatsuka" href="mailto:daisuke@mozilla-japan.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
function executeTests(tests, description) {
|
||||
tests.forEach(function(currentTest) {
|
||||
var testParams = '';
|
||||
for (var attr in currentTest.input) {
|
||||
testParams += ' ' + attr + ':' + currentTest.input[attr];
|
||||
}
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, currentTest.input);
|
||||
assert_equals(anim.effect.getComputedTiming().progress,
|
||||
currentTest.before);
|
||||
anim.currentTime = currentTest.input.delay || 0;
|
||||
assert_equals(anim.effect.getComputedTiming().progress,
|
||||
currentTest.active);
|
||||
if (typeof currentTest.after !== 'undefined') {
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().progress,
|
||||
currentTest.after);
|
||||
}
|
||||
}, description + testParams);
|
||||
});
|
||||
}
|
||||
|
||||
async_test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, { delay: 1 });
|
||||
assert_equals(anim.effect.getComputedTiming().progress, null);
|
||||
anim.finished.then(t.step_func(function() {
|
||||
assert_equals(anim.effect.getComputedTiming().progress, null);
|
||||
t.done();
|
||||
}));
|
||||
}, 'Test progress during before and after phase when fill is none');
|
||||
|
||||
var gTests_zero_iterations = [
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 0,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 0,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 0,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 2.5,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0.5,
|
||||
active: 0.5,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 2.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0.5,
|
||||
active: 0.5,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 2.5,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0.5,
|
||||
active: 0.5,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 3,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 3,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 0,
|
||||
iterationStart: 3,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
}
|
||||
];
|
||||
|
||||
var gTests_integer_iterations = [
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 0,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 1,
|
||||
after: 1
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 0,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 1
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 0,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 2.5,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0.5,
|
||||
active: 0.5,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 2.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0.5,
|
||||
active: 0.5,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 2.5,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0.5,
|
||||
active: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 3,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 1,
|
||||
after: 1
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 3,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 1
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3,
|
||||
iterationStart: 3,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0
|
||||
}
|
||||
];
|
||||
|
||||
var gTests_fractional_iterations = [
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 0,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0.5,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 0,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 0,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 2.5,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0.5,
|
||||
active: 1,
|
||||
after: 1
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 2.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0.5,
|
||||
active: 0.5,
|
||||
after: 1
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 2.5,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0.5,
|
||||
active: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 3,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0.5,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 3,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 3.5,
|
||||
iterationStart: 3,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0
|
||||
}
|
||||
];
|
||||
|
||||
var gTests_infinity_iterations = [
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 0,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 1,
|
||||
after: 1
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 0,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 0,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 2.5,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0.5,
|
||||
active: 0.5,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 2.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0.5,
|
||||
active: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 2.5,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0.5,
|
||||
active: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 3,
|
||||
duration: 0,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 1,
|
||||
after: 1
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 3,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: Infinity,
|
||||
iterationStart: 3,
|
||||
duration: Infinity,
|
||||
delay: 1,
|
||||
fill: 'both' },
|
||||
before: 0,
|
||||
active: 0
|
||||
}
|
||||
];
|
||||
|
||||
executeTests(gTests_zero_iterations, "Test zero iterations:");
|
||||
executeTests(gTests_integer_iterations, "Test integer iterations:");
|
||||
executeTests(gTests_fractional_iterations, "Test fractional iterations:");
|
||||
executeTests(gTests_infinity_iterations, "Test infinity iterations:");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffect setFrames() tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-keyframeeffect-setframes">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../testcommon.js"></script>
|
||||
<script src="../resources/keyframe-utils.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
var target = document.getElementById('target');
|
||||
|
||||
test(function(t) {
|
||||
gEmptyKeyframeListTests.forEach(function(frame) {
|
||||
var effect = new KeyframeEffect(target, {});
|
||||
effect.setFrames(frame);
|
||||
assert_frame_lists_equal(effect.getFrames(), []);
|
||||
});
|
||||
}, 'Keyframes can be replaced with an empty keyframe');
|
||||
|
||||
gPropertyIndexedKeyframesTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffect(target, {});
|
||||
effect.setFrames(subtest.input);
|
||||
assert_frame_lists_equal(effect.getFrames(), subtest.output);
|
||||
}, 'Keyframes can be replaced with ' + subtest.desc);
|
||||
});
|
||||
|
||||
gKeyframeSequenceTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffect(target, {});
|
||||
effect.setFrames(subtest.input);
|
||||
assert_frame_lists_equal(effect.getFrames(), subtest.output);
|
||||
}, 'Keyframes can be replaced with ' + subtest.desc);
|
||||
});
|
||||
|
||||
gInvalidKeyframesTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffect(target, {});
|
||||
assert_throws(subtest.expected, function() {
|
||||
effect.setFrames(subtest.input);
|
||||
});
|
||||
}, 'KeyframeEffect constructor throws with ' + subtest.desc);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Writable effect.target tests</title>
|
||||
<link rel="help"
|
||||
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-target">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
var gKeyFrames = { 'marginLeft': ['0px', '100px'] };
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
|
||||
effect.target = div;
|
||||
|
||||
var anim = new Animation(effect, document.timeline);
|
||||
anim.play();
|
||||
|
||||
anim.currentTime = 50 * MS_PER_SEC;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '50px',
|
||||
'Value at 50% progress');
|
||||
}, 'Test setting target before constructing the associated animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
div.style.marginLeft = '10px';
|
||||
var effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
|
||||
var anim = new Animation(effect, document.timeline);
|
||||
anim.play();
|
||||
|
||||
anim.currentTime = 50 * MS_PER_SEC;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '10px',
|
||||
'Value at 50% progress before setting new target');
|
||||
effect.target = div;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '50px',
|
||||
'Value at 50% progress after setting new target');
|
||||
}, 'Test setting target from null to a valid target');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
div.style.marginLeft = '10px';
|
||||
var anim = div.animate(gKeyFrames, 100 * MS_PER_SEC);
|
||||
|
||||
anim.currentTime = 50 * MS_PER_SEC;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '50px',
|
||||
'Value at 50% progress before clearing the target')
|
||||
|
||||
anim.effect.target = null;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '10px',
|
||||
'Value after clearing the target')
|
||||
}, 'Test setting target from a valid target to null');
|
||||
|
||||
test(function(t) {
|
||||
var a = createDiv(t);
|
||||
var b = createDiv(t);
|
||||
a.style.marginLeft = '10px';
|
||||
b.style.marginLeft = '20px';
|
||||
var anim = a.animate(gKeyFrames, 100 * MS_PER_SEC);
|
||||
|
||||
anim.currentTime = 50 * MS_PER_SEC;
|
||||
assert_equals(getComputedStyle(a).marginLeft, '50px',
|
||||
'Value of 1st element (currently targeted) before ' +
|
||||
'changing the effect target');
|
||||
assert_equals(getComputedStyle(b).marginLeft, '20px',
|
||||
'Value of 2nd element (currently not targeted) before ' +
|
||||
'changing the effect target');
|
||||
anim.effect.target = b;
|
||||
assert_equals(getComputedStyle(a).marginLeft, '10px',
|
||||
'Value of 1st element (currently not targeted) after ' +
|
||||
'changing the effect target');
|
||||
assert_equals(getComputedStyle(b).marginLeft, '50px',
|
||||
'Value of 2nd element (currently targeted) after ' +
|
||||
'changing the effect target');
|
||||
|
||||
// This makes sure the animation property is changed correctly on new
|
||||
// targeted element.
|
||||
anim.currentTime = 75 * MS_PER_SEC;
|
||||
assert_equals(getComputedStyle(b).marginLeft, '75px',
|
||||
'Value of 2nd target (currently targeted) after ' +
|
||||
'changing the animation current time.');
|
||||
}, 'Test setting target from a valid target to another target');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue