diff options
Diffstat (limited to 'tests/wpt/web-platform-tests/web-animations/keyframe-effect')
3 files changed, 266 insertions, 190 deletions
diff --git a/tests/wpt/web-platform-tests/web-animations/keyframe-effect/constructor.html b/tests/wpt/web-platform-tests/web-animations/keyframe-effect/constructor.html index 50cee72ac47..c14d74fa994 100644 --- a/tests/wpt/web-platform-tests/web-animations/keyframe-effect/constructor.html +++ b/tests/wpt/web-platform-tests/web-animations/keyframe-effect/constructor.html @@ -37,17 +37,6 @@ function assert_frame_lists_equal(a, b) { var gEmptyKeyframeListTests = [ [], - [{}], - [{ easing: "ease-in" }], - [{ unknown: "unknown" }, { unknown: "unknown" }], - [{ color: "invalid" }, { color: "invalid" }], - { easing: "ease-in" }, - { unknown: "unknown" }, - { unknown: [] }, - { unknown: ["unknown"] }, - { unknown: ["unknown", "unknown"] }, - { animationName: ["none", "abc"] }, - { color: [] }, null, undefined, ]; @@ -79,7 +68,7 @@ test(function(t) { "resulting easing for '" + easing + "'"); }); }, "easing values are parsed correctly when passed to the " + - "KeyframeEffectReadOnly constructor in PropertyIndexedKeyframes"); + "KeyframeEffectReadOnly constructor in a property-indexed keyframe"); test(function(t) { gEasingValueTests.forEach(function(subtest) { @@ -93,7 +82,7 @@ test(function(t) { "resulting easing for '" + easing + "'"); }); }, "easing values are parsed correctly when passed to the " + - "KeyframeEffectReadOnly constructor in Keyframe"); + "KeyframeEffectReadOnly constructor in regular keyframes"); test(function(t) { gEasingValueTests.forEach(function(subtest) { @@ -135,7 +124,7 @@ test(function(t) { }); }); }, "composite values are parsed correctly when passed to the " + - "KeyframeEffectReadOnly constructor in PropertyIndexedKeyframes"); + "KeyframeEffectReadOnly constructor in property-indexed keyframes"); test(function(t) { var getFrames = function(composite) { @@ -155,7 +144,7 @@ test(function(t) { }); }); }, "composite values are parsed correctly when passed to the " + - "KeyframeEffectReadOnly constructor in Keyframe"); + "KeyframeEffectReadOnly constructor in regular keyframes"); test(function(t) { gGoodOptionsCompositeValueTests.forEach(function(composite) { @@ -176,79 +165,119 @@ test(function(t) { "KeyframeEffectReadOnly constructor in KeyframeTimingOptions"); var gPropertyIndexedKeyframesTests = [ - { desc: "a one property two value PropertyIndexedKeyframes specification", + { desc: "a one property two value property-indexed keyframes specification", input: { left: ["10px", "20px"] }, - output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" }, - { offset: 1, computedOffset: 1, easing: "linear", left: "20px" }] }, - { desc: "a one shorthand property two value PropertyIndexedKeyframes specification", + output: [{ offset: null, computedOffset: 0, easing: "linear", + left: "10px" }, + { offset: null, computedOffset: 1, easing: "linear", + left: "20px" }] }, + { desc: "a one shorthand property two value property-indexed keyframes" + + " specification", input: { margin: ["10px", "10px 20px 30px 40px"] }, - output: [{ offset: 0, computedOffset: 0, easing: "linear", marginTop: "10px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" }, - { offset: 1, computedOffset: 1, easing: "linear", marginTop: "10px", marginRight: "20px", marginBottom: "30px", marginLeft: "40px" }] }, - { desc: "a two property (one shorthand and one of its longhand components) two value PropertyIndexedKeyframes specification", + output: [{ offset: null, computedOffset: 0, easing: "linear", + margin: "10px" }, + { offset: null, computedOffset: 1, easing: "linear", + margin: "10px 20px 30px 40px" }] }, + { desc: "a two property (one shorthand and one of its longhand components)" + + " two value property-indexed keyframes specification", input: { marginTop: ["50px", "60px"], margin: ["10px", "10px 20px 30px 40px"] }, - output: [{ offset: 0, computedOffset: 0, easing: "linear", marginTop: "50px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" }, - { offset: 1, computedOffset: 1, easing: "linear", marginTop: "60px", marginRight: "20px", marginBottom: "30px", marginLeft: "40px" }] }, - { desc: "a two property two value PropertyIndexedKeyframes specification", + output: [{ offset: null, computedOffset: 0, easing: "linear", + marginTop: "50px", margin: "10px" }, + { offset: null, computedOffset: 1, easing: "linear", + marginTop: "60px", margin: "10px 20px 30px 40px" }] }, + { desc: "a two property two value property-indexed keyframes specification", input: { left: ["10px", "20px"], top: ["30px", "40px"] }, - output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px", top: "30px" }, - { offset: 1, computedOffset: 1, easing: "linear", left: "20px", top: "40px" }] }, - { desc: "a two property PropertyIndexedKeyframes specification with different numbers of values", + output: [{ offset: null, computedOffset: 0, easing: "linear", + left: "10px", top: "30px" }, + { offset: null, computedOffset: 1, easing: "linear", + left: "20px", top: "40px" }] }, + { desc: "a two property property-indexed keyframes specification with" + + " different numbers of values", input: { left: ["10px", "20px", "30px"], top: ["40px", "50px"] }, - output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", left: "10px", top: "40px" }, - { offset: 0.5, computedOffset: 0.5, easing: "linear", left: "20px" }, - { offset: 1.0, computedOffset: 1.0, easing: "linear", left: "30px", top: "50px" }] }, - { desc: "a PropertyIndexedKeyframes specification with an invalid value", + output: [{ offset: null, computedOffset: 0.0, easing: "linear", + left: "10px", top: "40px" }, + { offset: null, computedOffset: 0.5, easing: "linear", + left: "20px" }, + { offset: null, computedOffset: 1.0, easing: "linear", + left: "30px", top: "50px" }] }, + { desc: "a property-indexed keyframes specification with an invalid value", input: { left: ["10px", "20px", "30px", "40px", "50px"], top: ["15px", "25px", "invalid", "45px", "55px"] }, - output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", left: "10px", top: "15px" }, - { offset: 0.25, computedOffset: 0.25, easing: "linear", left: "20px", top: "25px" }, - { offset: 0.50, computedOffset: 0.50, easing: "linear", left: "30px" }, - { offset: 0.75, computedOffset: 0.75, easing: "linear", left: "40px", top: "45px" }, - { offset: 1.00, computedOffset: 1.00, easing: "linear", left: "50px", top: "55px" }] }, - { desc: "a one property two value PropertyIndexedKeyframes specification that needs to stringify its values", + output: [{ offset: null, computedOffset: 0.00, easing: "linear", + left: "10px", top: "15px" }, + { offset: null, computedOffset: 0.25, easing: "linear", + left: "20px", top: "25px" }, + { offset: null, computedOffset: 0.50, easing: "linear", + left: "30px", top: "invalid" }, + { offset: null, computedOffset: 0.75, easing: "linear", + left: "40px", top: "45px" }, + { offset: null, computedOffset: 1.00, easing: "linear", + left: "50px", top: "55px" }] }, + { desc: "a one property two value property-indexed keyframes specification" + + " that needs to stringify its values", input: { opacity: [0, 1] }, - output: [{ offset: 0, computedOffset: 0, easing: "linear", opacity: "0" }, - { offset: 1, computedOffset: 1, easing: "linear", opacity: "1" }] }, - { desc: "a one property one value PropertyIndexedKeyframes specification", + output: [{ offset: null, computedOffset: 0, easing: "linear", + opacity: "0" }, + { offset: null, computedOffset: 1, easing: "linear", + opacity: "1" }] }, + { desc: "a one property one value property-indexed keyframes specification", input: { left: ["10px"] }, - output: [{ offset: 0, computedOffset: 0, easing: "linear" }, - { offset: 1, computedOffset: 1, easing: "linear", left: "10px" }] }, - { desc: "a one property one non-array value PropertyIndexedKeyframes specification", + output: [{ offset: null, computedOffset: 1, easing: "linear", + left: "10px" }] }, + { desc: "a one property one non-array value property-indexed keyframes" + + " specification", input: { left: "10px" }, - output: [{ offset: 0, computedOffset: 0, easing: "linear" }, - { offset: 1, computedOffset: 1, easing: "linear", left: "10px" }] }, - { desc: "a one property two value PropertyIndexedKeyframes specification where the first value is invalid", + output: [{ offset: null, computedOffset: 1, easing: "linear", + left: "10px" }] }, + { desc: "a one property two value property-indexed keyframes specification" + + " where the first value is invalid", input: { left: ["invalid", "10px"] }, - output: [{ offset: 0, computedOffset: 0, easing: "linear" }, - { offset: 1, computedOffset: 1, easing: "linear", left: "10px" }] }, - { desc: "a one property two value PropertyIndexedKeyframes specification where the second value is invalid", + output: [{ offset: null, computedOffset: 0, easing: "linear", + left: "invalid" }, + { offset: null, computedOffset: 1, easing: "linear", + left: "10px" }] }, + { desc: "a one property two value property-indexed keyframes specification" + + " where the second value is invalid", input: { left: ["10px", "invalid"] }, - output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" }, - { offset: 1, computedOffset: 1, easing: "linear" }] }, - { desc: "a two property PropertyIndexedKeyframes specification where one property is missing from the first Keyframe", + output: [{ offset: null, computedOffset: 0, easing: "linear", + left: "10px" }, + { offset: null, computedOffset: 1, easing: "linear", + left: "invalid" }] }, + { desc: "a two property property-indexed keyframes specification where one" + + " property is missing from the first keyframe", input: [{ offset: 0, left: "10px" }, { offset: 1, left: "20px", top: "30px" }], output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" }, - { offset: 1, computedOffset: 1, easing: "linear", left: "20px", top: "30px" }] }, - { desc: "a two property PropertyIndexedKeyframes specification where one property is missing from the last Keyframe", + { offset: 1, computedOffset: 1, easing: "linear", + left: "20px", top: "30px" }] }, + { desc: "a two property property-indexed keyframes specification where one" + + " property is missing from the last keyframe", input: [{ offset: 0, left: "10px", top: "20px" }, { offset: 1, left: "30px" }], - output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" , top: "20px" }, - { offset: 1, computedOffset: 1, easing: "linear", left: "30px" }] }, - { desc: "a PropertyIndexedKeyframes specification with repeated values at offset 0 with different easings", + output: [{ offset: 0, computedOffset: 0, easing: "linear", + left: "10px" , top: "20px" }, + { offset: 1, computedOffset: 1, easing: "linear", + left: "30px" }] }, + { desc: "a property-indexed keyframes specification with repeated values" + + " at offset 0 with different easings", input: [{ offset: 0.0, left: "100px", easing: "ease" }, { offset: 0.0, left: "200px", easing: "ease" }, { offset: 0.5, left: "300px", easing: "linear" }, { offset: 1.0, left: "400px", easing: "ease-out" }, { offset: 1.0, left: "500px", easing: "step-end" }], - output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease", left: "100px" }, - { offset: 0.0, computedOffset: 0.0, easing: "ease", left: "200px" }, - { offset: 0.5, computedOffset: 0.5, easing: "linear", left: "300px" }, - { offset: 1.0, computedOffset: 1.0, easing: "ease-out", left: "400px" }, - { offset: 1.0, computedOffset: 1.0, easing: "linear", left: "500px" }] }, + output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease", + left: "100px" }, + { offset: 0.0, computedOffset: 0.0, easing: "ease", + left: "200px" }, + { offset: 0.5, computedOffset: 0.5, easing: "linear", + left: "300px" }, + { offset: 1.0, computedOffset: 1.0, easing: "ease-out", + left: "400px" }, + { offset: 1.0, computedOffset: 1.0, easing: "step-end", + left: "500px" }] }, ]; gPropertyIndexedKeyframesTests.forEach(function(subtest) { @@ -282,41 +311,56 @@ test(function(t) { }); new KeyframeEffectReadOnly(target, [kf1, kf2]); assert_array_equals(actualOrder, expectedOrder, "property access order"); -}, "the KeyframeEffectReadOnly constructor reads Keyframe properties in the " + +}, "the KeyframeEffectReadOnly constructor reads keyframe properties in the " + "expected order"); var gKeyframeSequenceTests = [ - { desc: "a one property two Keyframe sequence", + { desc: "a one property two keyframe sequence", input: [{ offset: 0, left: "10px" }, { offset: 1, left: "20px" }], output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" }, - { offset: 1, computedOffset: 1, easing: "linear", left: "20px" }] }, - { desc: "a two property two Keyframe sequence", + { offset: 1, computedOffset: 1, easing: "linear", left: "20px" }] + }, + { desc: "a two property two keyframe sequence", input: [{ offset: 0, left: "10px", top: "30px" }, { offset: 1, left: "20px", top: "40px" }], - output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px", top: "30px" }, - { offset: 1, computedOffset: 1, easing: "linear", left: "20px", top: "40px" }] }, - { desc: "a one shorthand property two Keyframe sequence", + output: [{ offset: 0, computedOffset: 0, easing: "linear", + left: "10px", top: "30px" }, + { offset: 1, computedOffset: 1, easing: "linear", + left: "20px", top: "40px" }] }, + { desc: "a one shorthand property two keyframe sequence", input: [{ offset: 0, margin: "10px" }, { offset: 1, margin: "20px 30px 40px 50px" }], - output: [{ offset: 0, computedOffset: 0, easing: "linear", marginTop: "10px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" }, - { offset: 1, computedOffset: 1, easing: "linear", marginTop: "20px", marginRight: "30px", marginBottom: "40px", marginLeft: "50px" }] }, - { desc: "a two property (a shorthand and one of its component longhands) two Keyframe sequence", + output: [{ offset: 0, computedOffset: 0, easing: "linear", + margin: "10px" }, + { offset: 1, computedOffset: 1, easing: "linear", + margin: "20px 30px 40px 50px" }] }, + { desc: "a two property (a shorthand and one of its component longhands)" + + " two keyframe sequence", input: [{ offset: 0, margin: "10px", marginTop: "20px" }, { offset: 1, marginTop: "70px", margin: "30px 40px 50px 60px" }], - output: [{ offset: 0, computedOffset: 0, easing: "linear", marginTop: "20px", marginRight: "10px", marginBottom: "10px", marginLeft: "10px" }, - { offset: 1, computedOffset: 1, easing: "linear", marginTop: "70px", marginRight: "40px", marginBottom: "50px", marginLeft: "60px" }] }, - { desc: "a Keyframe sequence with duplicate values for a given interior offset", + output: [{ offset: 0, computedOffset: 0, easing: "linear", + margin: "10px", marginTop: "20px" }, + { offset: 1, computedOffset: 1, easing: "linear", + marginTop: "70px", margin: "30px 40px 50px 60px" }] }, + { desc: "a keyframe sequence with duplicate values for a given interior" + + " offset", input: [{ offset: 0.0, left: "10px" }, { offset: 0.5, left: "20px" }, { offset: 0.5, left: "30px" }, { offset: 0.5, left: "40px" }, { offset: 1.0, left: "50px" }], - output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", left: "10px" }, - { offset: 0.5, computedOffset: 0.5, easing: "linear", left: "20px" }, - { offset: 0.5, computedOffset: 0.5, easing: "linear", left: "40px" }, - { offset: 1.0, computedOffset: 1.0, easing: "linear", left: "50px" }] }, - { desc: "a Keyframe sequence with duplicate values for offsets 0 and 1", + output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", + left: "10px" }, + { offset: 0.5, computedOffset: 0.5, easing: "linear", + left: "20px" }, + { offset: 0.5, computedOffset: 0.5, easing: "linear", + left: "30px" }, + { offset: 0.5, computedOffset: 0.5, easing: "linear", + left: "40px" }, + { offset: 1.0, computedOffset: 1.0, easing: "linear", + left: "50px" }] }, + { desc: "a keyframe sequence with duplicate values for offsets 0 and 1", input: [{ offset: 0, left: "10px" }, { offset: 0, left: "20px" }, { offset: 0, left: "30px" }, @@ -324,50 +368,72 @@ var gKeyframeSequenceTests = [ { offset: 1, left: "50px" }, { offset: 1, left: "60px" }], output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" }, + { offset: 0, computedOffset: 0, easing: "linear", left: "20px" }, { offset: 0, computedOffset: 0, easing: "linear", left: "30px" }, { offset: 1, computedOffset: 1, easing: "linear", left: "40px" }, - { offset: 1, computedOffset: 1, easing: "linear", left: "60px" }] }, - { desc: "a two property four Keyframe sequence", + { offset: 1, computedOffset: 1, easing: "linear", left: "50px" }, + { offset: 1, computedOffset: 1, easing: "linear", left: "60px" }] + }, + { desc: "a two property four keyframe sequence", input: [{ offset: 0, left: "10px" }, { offset: 0, top: "20px" }, { offset: 1, top: "30px" }, { offset: 1, left: "40px" }], - output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px", top: "20px" }, - { offset: 1, computedOffset: 1, easing: "linear", left: "40px", top: "30px" }] }, - { desc: "a one property Keyframe sequence with some omitted offsets", + output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" }, + { offset: 0, computedOffset: 0, easing: "linear", top: "20px" }, + { offset: 1, computedOffset: 1, easing: "linear", top: "30px" }, + { offset: 1, computedOffset: 1, easing: "linear", left: "40px" }] + }, + { desc: "a one property keyframe sequence with some omitted offsets", input: [{ offset: 0.00, left: "10px" }, { offset: 0.25, left: "20px" }, { left: "30px" }, { left: "40px" }, { offset: 1.00, left: "50px" }], - output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", left: "10px" }, - { offset: 0.25, computedOffset: 0.25, easing: "linear", left: "20px" }, - { offset: 0.50, computedOffset: 0.50, easing: "linear", left: "30px" }, - { offset: 0.75, computedOffset: 0.75, easing: "linear", left: "40px" }, - { offset: 1.00, computedOffset: 1.00, easing: "linear", left: "50px" }] }, - { desc: "a two property Keyframe sequence with some omitted offsets", + output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", + left: "10px" }, + { offset: 0.25, computedOffset: 0.25, easing: "linear", + left: "20px" }, + { offset: null, computedOffset: 0.50, easing: "linear", + left: "30px" }, + { offset: null, computedOffset: 0.75, easing: "linear", + left: "40px" }, + { offset: 1.00, computedOffset: 1.00, easing: "linear", + left: "50px" }] }, + { desc: "a two property keyframe sequence with some omitted offsets", input: [{ offset: 0.00, left: "10px", top: "20px" }, { offset: 0.25, left: "30px" }, { left: "40px" }, { left: "50px", top: "60px" }, { offset: 1.00, left: "70px", top: "80px" }], - output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", left: "10px", top: "20px" }, - { offset: 0.25, computedOffset: 0.25, easing: "linear", left: "30px" }, - { offset: 0.50, computedOffset: 0.50, easing: "linear", left: "40px" }, - { offset: 0.75, computedOffset: 0.75, easing: "linear", left: "50px", top: "60px" }, - { offset: 1.00, computedOffset: 1.00, easing: "linear", left: "70px", top: "80px" }] }, - { desc: "a one property Keyframe sequence with all omitted offsets", + output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", + left: "10px", top: "20px" }, + { offset: 0.25, computedOffset: 0.25, easing: "linear", + left: "30px" }, + { offset: null, computedOffset: 0.50, easing: "linear", + left: "40px" }, + { offset: null, computedOffset: 0.75, easing: "linear", + left: "50px", top: "60px" }, + { offset: 1.00, computedOffset: 1.00, easing: "linear", + left: "70px", top: "80px" }] }, + { desc: "a one property keyframe sequence with all omitted offsets", input: [{ left: "10px" }, { left: "20px" }, { left: "30px" }, { left: "40px" }, { left: "50px" }], - output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", left: "10px" }, - { offset: 0.25, computedOffset: 0.25, easing: "linear", left: "20px" }, - { offset: 0.50, computedOffset: 0.50, easing: "linear", left: "30px" }, - { offset: 0.75, computedOffset: 0.75, easing: "linear", left: "40px" }, - { offset: 1.00, computedOffset: 1.00, easing: "linear", left: "50px" }] }, - { desc: "a Keyframe sequence with different easing values, but the same easing value for a given offset", + output: [{ offset: null, computedOffset: 0.00, easing: "linear", + left: "10px" }, + { offset: null, computedOffset: 0.25, easing: "linear", + left: "20px" }, + { offset: null, computedOffset: 0.50, easing: "linear", + left: "30px" }, + { offset: null, computedOffset: 0.75, easing: "linear", + left: "40px" }, + { offset: null, computedOffset: 1.00, easing: "linear", + left: "50px" }] }, + { desc: "a keyframe sequence with different easing values, but the same" + + " easing value for a given offset", input: [{ offset: 0.0, easing: "ease", left: "10px"}, { offset: 0.0, easing: "ease", top: "20px"}, { offset: 0.5, easing: "linear", left: "30px" }, @@ -375,62 +441,79 @@ var gKeyframeSequenceTests = [ { offset: 1.0, easing: "step-end", left: "50px" }, { offset: 1.0, easing: "step-end", top: "60px" }], output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease", - left: "10px", top: "20px" }, + left: "10px" }, + { offset: 0.0, computedOffset: 0.0, easing: "ease", + top: "20px" }, { offset: 0.5, computedOffset: 0.5, easing: "linear", - left: "30px", top: "40px" }, - { offset: 1.0, computedOffset: 1.0, easing: "linear", - left: "50px", top: "60px" }] }, - { desc: "a Keyframe sequence with different composite values, but the same composite value for a given offset", + left: "30px" }, + { offset: 0.5, computedOffset: 0.5, easing: "linear", + top: "40px" }, + { offset: 1.0, computedOffset: 1.0, easing: "step-end", + left: "50px" }, + { offset: 1.0, computedOffset: 1.0, easing: "step-end", + top: "60px" }] }, + { desc: "a keyframe sequence with different composite values, but the" + + " same composite value for a given offset", input: [{ offset: 0.0, composite: "replace", left: "10px" }, { offset: 0.0, composite: "replace", top: "20px" }, { offset: 0.5, composite: "add", left: "30px" }, { offset: 0.5, composite: "add", top: "40px" }, { offset: 1.0, composite: "replace", left: "50px" }, { offset: 1.0, composite: "replace", top: "60px" }], - output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", composite: "replace", left: "10px", top: "20px" }, - { offset: 0.5, computedOffset: 0.5, easing: "linear", composite: "add", left: "30px", top: "40px" }, - { offset: 1.0, computedOffset: 1.0, easing: "linear", composite: "replace", left: "50px", top: "60px" }] }, - { desc: "a one property two Keyframe sequence that needs to stringify its values", + output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", + composite: "replace", left: "10px" }, + { offset: 0.0, computedOffset: 0.0, easing: "linear", + composite: "replace", top: "20px" }, + { offset: 0.5, computedOffset: 0.0, easing: "linear", + composite: "add", left: "30px" }, + { offset: 0.5, computedOffset: 0.0, easing: "linear", + composite: "add", top: "40px" }, + { offset: 1.0, computedOffset: 1.0, easing: "linear", + composite: "replace", left: "50px" }, + { offset: 1.0, computedOffset: 1.0, easing: "linear", + composite: "replace", top: "60px" }] }, + { desc: "a one property two keyframe sequence that needs to stringify" + + " its values", input: [{ offset: 0, opacity: 0 }, { offset: 1, opacity: 1 }], output: [{ offset: 0, computedOffset: 0, easing: "linear", opacity: "0" }, - { offset: 1, computedOffset: 1, easing: "linear", opacity: "1" }] }, - { desc: "a Keyframe sequence where shorthand precedes longhand", + { offset: 1, computedOffset: 1, easing: "linear", opacity: "1" }] + }, + { desc: "a keyframe sequence where shorthand precedes longhand", input: [{ offset: 0, margin: "10px", marginRight: "20px" }, { offset: 1, margin: "30px" }], - output: [{ offset: 0, computedOffset: 0, easing: "linear", marginBottom: "10px", marginLeft: "10px", marginRight: "20px", marginTop: "10px" }, - { offset: 1, computedOffset: 1, easing: "linear", marginBottom: "30px", marginLeft: "30px", marginRight: "30px", marginTop: "30px" }] }, - { desc: "a Keyframe sequence where longhand precedes shorthand", + output: [{ offset: 0, computedOffset: 0, easing: "linear", + margin: "10px", marginRight: "20px" }, + { offset: 1, computedOffset: 1, easing: "linear", + margin: "30px" }] }, + { desc: "a keyframe sequence where longhand precedes shorthand", input: [{ offset: 0, marginRight: "20px", margin: "10px" }, { offset: 1, margin: "30px" }], - output: [{ offset: 0, computedOffset: 0, easing: "linear", marginBottom: "10px", marginLeft: "10px", marginRight: "20px", marginTop: "10px" }, - { offset: 1, computedOffset: 1, easing: "linear", marginBottom: "30px", marginLeft: "30px", marginRight: "30px", marginTop: "30px" }] }, - { desc: "a Keyframe sequence where lesser shorthand precedes greater shorthand", - input: [{ offset: 0, borderLeft: "1px solid rgb(1, 2, 3)", border: "2px dotted rgb(4, 5, 6)" }, + output: [{ offset: 0, computedOffset: 0, easing: "linear", + marginRight: "20px", margin: "10px" }, + { offset: 1, computedOffset: 1, easing: "linear", + margin: "30px" }] }, + { desc: "a keyframe sequence where lesser shorthand precedes greater" + + " shorthand", + input: [{ offset: 0, + borderLeft: "1px solid rgb(1, 2, 3)", + border: "2px dotted rgb(4, 5, 6)" }, { offset: 1, border: "3px dashed rgb(7, 8, 9)" }], output: [{ offset: 0, computedOffset: 0, easing: "linear", - borderBottomColor: "rgb(4, 5, 6)", borderBottomWidth: "2px", - borderLeftColor: "rgb(1, 2, 3)", borderLeftWidth: "1px", - borderRightColor: "rgb(4, 5, 6)", borderRightWidth: "2px", - borderTopColor: "rgb(4, 5, 6)", borderTopWidth: "2px" }, + borderLeft: "1px solid rgb(1, 2, 3)", + border: "2px dotted rgb(4, 5, 6)" }, { offset: 1, computedOffset: 1, easing: "linear", - borderBottomColor: "rgb(7, 8, 9)", borderBottomWidth: "3px", - borderLeftColor: "rgb(7, 8, 9)", borderLeftWidth: "3px", - borderRightColor: "rgb(7, 8, 9)", borderRightWidth: "3px", - borderTopColor: "rgb(7, 8, 9)", borderTopWidth: "3px" }] }, - { desc: "a Keyframe sequence where greater shorthand precedes lesser shorthand", - input: [{ offset: 0, border: "2px dotted rgb(4, 5, 6)", borderLeft: "1px solid rgb(1, 2, 3)" }, + border: "3px dashed rgb(7, 8, 9)" }] }, + { desc: "a keyframe sequence where greater shorthand precedes lesser" + + " shorthand", + input: [{ offset: 0, border: "2px dotted rgb(4, 5, 6)", + borderLeft: "1px solid rgb(1, 2, 3)" }, { offset: 1, border: "3px dashed rgb(7, 8, 9)" }], output: [{ offset: 0, computedOffset: 0, easing: "linear", - borderBottomColor: "rgb(4, 5, 6)", borderBottomWidth: "2px", - borderLeftColor: "rgb(1, 2, 3)", borderLeftWidth: "1px", - borderRightColor: "rgb(4, 5, 6)", borderRightWidth: "2px", - borderTopColor: "rgb(4, 5, 6)", borderTopWidth: "2px" }, + border: "2px dotted rgb(4, 5, 6)", + borderLeft: "1px solid rgb(1, 2, 3)" }, { offset: 1, computedOffset: 1, easing: "linear", - borderBottomColor: "rgb(7, 8, 9)", borderBottomWidth: "3px", - borderLeftColor: "rgb(7, 8, 9)", borderLeftWidth: "3px", - borderRightColor: "rgb(7, 8, 9)", borderRightWidth: "3px", - borderTopColor: "rgb(7, 8, 9)", borderTopWidth: "3px" }] }, + border: "3px dashed rgb(7, 8, 9)" }] }, ]; gKeyframeSequenceTests.forEach(function(subtest) { @@ -467,7 +550,7 @@ gInvalidEasingInKeyframeSequenceTests.forEach(function(subtest) { assert_throws(new TypeError, function() { new KeyframeEffectReadOnly(target, subtest.input); }); - }, "Invalid easing [" + subtest.desc + "] in KeyframeSequence " + + }, "Invalid easing [" + subtest.desc + "] in keyframe sequence " + "should be thrown"); }); diff --git a/tests/wpt/web-platform-tests/web-animations/keyframe-effect/effect-easing.html b/tests/wpt/web-platform-tests/web-animations/keyframe-effect/effect-easing.html index 2ecd028ce9b..81e834e2e50 100644 --- a/tests/wpt/web-platform-tests/web-animations/keyframe-effect/effect-easing.html +++ b/tests/wpt/web-platform-tests/web-animations/keyframe-effect/effect-easing.html @@ -6,6 +6,7 @@ <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="../testcommon.js"></script> +<script src="../resources/effect-easing-tests.js"></script> <body> <div id="log"></div> <div id="target"></div> @@ -22,54 +23,6 @@ function assert_style_left_at(animation, time, easingFunction) { easingFunction(portion) * 100 + ' at ' + time + 'ms'); } -var gEffectEasingTests = [ - { - desc: 'steps(start) function', - easing: 'steps(2, start)', - easingFunction: stepStart(2) - }, - { - desc: 'steps(end) function', - easing: 'steps(2, end)', - easingFunction: stepEnd(2) - }, - { - desc: 'linear function', - easing: 'linear', // cubic-bezier(0, 0, 1.0, 1.0) - easingFunction: cubicBezier(0, 0, 1.0, 1.0) - }, - { - desc: 'ease function', - easing: 'ease', // cubic-bezier(0.25, 0.1, 0.25, 1.0) - easingFunction: cubicBezier(0.25, 0.1, 0.25, 1.0) - }, - { - desc: 'ease-in function', - easing: 'ease-in', // cubic-bezier(0.42, 0, 1.0, 1.0) - easingFunction: cubicBezier(0.42, 0, 1.0, 1.0) - }, - { - desc: 'ease-in-out function', - easing: 'ease-in-out', // cubic-bezier(0.42, 0, 0.58, 1.0) - easingFunction: cubicBezier(0.42, 0, 0.58, 1.0) - }, - { - desc: 'ease-out function', - easing: 'ease-out', // cubic-bezier(0, 0, 0.58, 1.0) - easingFunction: cubicBezier(0, 0, 0.58, 1.0) - }, - { - desc: 'easing function which produces values greater than 1', - easing: 'cubic-bezier(0, 1.5, 1, 1.5)', - easingFunction: cubicBezier(0, 1.5, 1, 1.5) - }, - { - desc: 'easing function which produces negative values', - easing: 'cubic-bezier(0, -0.5 ,1, -0.5)', - easingFunction: cubicBezier(0, -0.5, 1, -0.5) - }, -]; - gEffectEasingTests.forEach(function(options) { test(function(t) { var target = createDiv(t); @@ -694,7 +647,7 @@ var gStepTimingFunctionTests = [ { currentTime: 2500, progress: 0.5 }, ] } -] +]; gStepTimingFunctionTests.forEach(function(options) { test(function(t) { diff --git a/tests/wpt/web-platform-tests/web-animations/keyframe-effect/keyframe-handling.html b/tests/wpt/web-platform-tests/web-animations/keyframe-effect/keyframe-handling.html index 56f484aff7f..de9b7c7ec21 100644 --- a/tests/wpt/web-platform-tests/web-animations/keyframe-effect/keyframe-handling.html +++ b/tests/wpt/web-platform-tests/web-animations/keyframe-effect/keyframe-handling.html @@ -70,6 +70,46 @@ test(function(t) { }, 'Overlapping keyframes between 0 and 1 use the appropriate value on each' + ' side of the overlap point'); +test(function(t) { + var div = createDiv(t); + var anim = div.animate({ visibility: ['hidden','visible'] }, + { duration: 100 * MS_PER_SEC, fill: 'both' }); + + anim.currentTime = 0; + assert_equals(getComputedStyle(div).visibility, 'hidden', + 'Visibility when progress = 0.'); + + anim.currentTime = 10 * MS_PER_SEC + 1; + assert_equals(getComputedStyle(div).visibility, 'visible', + 'Visibility when progress > 0 due to linear easing.'); + + anim.finish(); + assert_equals(getComputedStyle(div).visibility, 'visible', + 'Visibility when progress = 1.'); + +}, "Test visibility clamping behavior."); + +test(function(t) { + var div = createDiv(t); + var anim = div.animate({ visibility: ['hidden', 'visible'] }, + { duration: 100 * MS_PER_SEC, fill: 'both', + easing: 'cubic-bezier(0.25, -0.6, 0, 0.5)' }); + + anim.currentTime = 0; + assert_equals(getComputedStyle(div).visibility, 'hidden', + 'Visibility when progress = 0.'); + + // Timing function is below zero. So we expected visibility is hidden. + anim.currentTime = 10 * MS_PER_SEC + 1; + assert_equals(getComputedStyle(div).visibility, 'hidden', + 'Visibility when progress < 0 due to cubic-bezier easing.'); + + anim.currentTime = 60 * MS_PER_SEC; + assert_equals(getComputedStyle(div).visibility, 'visible', + 'Visibility when progress > 0 due to cubic-bezier easing.'); + +}, "Test visibility clamping behavior with an easing that has a negative component"); + done(); </script> </body> |