mirror of
https://github.com/servo/servo.git
synced 2025-08-10 07:55:33 +01:00
Update web-platform-tests to revision 7a767a52741f628430ffbbed46e7f3df68ba3534
Fixes #15648.
This commit is contained in:
parent
a1e4c547f0
commit
4fadf9b0b6
1184 changed files with 22551 additions and 9856 deletions
|
@ -5,6 +5,7 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<script src="../../resources/easing-tests.js"></script>
|
||||
<script src="../../resources/keyframe-utils.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
@ -66,7 +67,25 @@ test(function(t) {
|
|||
"resulting easing for '" + easing + "'");
|
||||
});
|
||||
}, "easing values are parsed correctly when passed to the " +
|
||||
"KeyframeEffectReadOnly constructor in KeyframeTimingOptions");
|
||||
"KeyframeEffectReadOnly constructor in KeyframeEffectOptions");
|
||||
|
||||
test(function(t) {
|
||||
gInvalidEasings.forEach(invalidEasing => {
|
||||
assert_throws(new TypeError, () => {
|
||||
new KeyframeEffectReadOnly(target, { easing: invalidEasing });
|
||||
}, `TypeError is thrown for easing '${invalidEasing}'`);
|
||||
});
|
||||
}, 'invalid easing values are correctly rejected when passed to the ' +
|
||||
'KeyframeEffectReadOnly constructor in regular keyframes');
|
||||
|
||||
test(function(t) {
|
||||
gInvalidEasings.forEach(invalidEasing => {
|
||||
assert_throws(new TypeError, () => {
|
||||
new KeyframeEffectReadOnly(target, null, { easing: invalidEasing });
|
||||
}, `TypeError is thrown for easing '${invalidEasing}'`);
|
||||
});
|
||||
}, 'invalid easing values are correctly rejected when passed to the ' +
|
||||
'KeyframeEffectReadOnly constructor in KeyframeEffectOptions');
|
||||
|
||||
test(function(t) {
|
||||
var getKeyframe = function(composite) {
|
||||
|
|
|
@ -1,683 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Effect-level easing tests</title>
|
||||
<link rel="help" href="http://w3c.github.io/web-animations/#calculating-the-transformed-time">
|
||||
<link rel="author" title="Hiroyuki Ikezoe" href="mailto:hiikezoe@mozilla-japan.org">
|
||||
<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>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
function assert_style_left_at(animation, time, easingFunction) {
|
||||
animation.currentTime = time;
|
||||
var portion = time / animation.effect.timing.duration;
|
||||
assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
|
||||
easingFunction(portion) * 100,
|
||||
0.01,
|
||||
'The left of the animation should be approximately ' +
|
||||
easingFunction(portion) * 100 + ' at ' + time + 'ms');
|
||||
}
|
||||
|
||||
gEffectEasingTests.forEach(function(options) {
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px' }, { left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: options.easing });
|
||||
var easing = options.easingFunction;
|
||||
|
||||
anim.pause();
|
||||
|
||||
assert_style_left_at(anim, 0, easing);
|
||||
assert_style_left_at(anim, 250, easing);
|
||||
assert_style_left_at(anim, 500, easing);
|
||||
assert_style_left_at(anim, 750, easing);
|
||||
assert_style_left_at(anim, 1000, easing);
|
||||
}, options.desc);
|
||||
});
|
||||
|
||||
var gEffectEasingTestsWithKeyframeEasing = [
|
||||
{
|
||||
desc: 'effect easing produces values greater than 1 with keyframe ' +
|
||||
'easing cubic-bezier(0, 0, 0, 0)',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)',
|
||||
keyframeEasing: 'cubic-bezier(0, 0, 0, 0)', // linear
|
||||
easingFunction: cubicBezier(0, 1.5, 1, 1.5)
|
||||
},
|
||||
{
|
||||
desc: 'effect easing produces values greater than 1 with keyframe ' +
|
||||
'easing cubic-bezier(1, 1, 1, 1)',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)',
|
||||
keyframeEasing: 'cubic-bezier(1, 1, 1, 1)', // linear
|
||||
easingFunction: cubicBezier(0, 1.5, 1, 1.5)
|
||||
},
|
||||
{
|
||||
desc: 'effect easing produces negative values 1 with keyframe ' +
|
||||
'easing cubic-bezier(0, 0, 0, 0)',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)',
|
||||
keyframeEasing: 'cubic-bezier(0, 0, 0, 0)', // linear
|
||||
easingFunction: cubicBezier(0, -0.5, 1, -0.5)
|
||||
},
|
||||
{
|
||||
desc: 'effect easing produces negative values 1 with keyframe ' +
|
||||
'easing cubic-bezier(1, 1, 1, 1)',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)',
|
||||
keyframeEasing: 'cubic-bezier(1, 1, 1, 1)', // linear
|
||||
easingFunction: cubicBezier(0, -0.5, 1, -0.5)
|
||||
},
|
||||
];
|
||||
|
||||
gEffectEasingTestsWithKeyframeEasing.forEach(function(options) {
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
[ { left: '0px', easing: options.keyframeEasing },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: options.easing });
|
||||
var easing = options.easingFunction;
|
||||
|
||||
anim.pause();
|
||||
|
||||
assert_style_left_at(anim, 0, easing);
|
||||
assert_style_left_at(anim, 250, easing);
|
||||
assert_style_left_at(anim, 500, easing);
|
||||
assert_style_left_at(anim, 750, easing);
|
||||
assert_style_left_at(anim, 1000, easing);
|
||||
}, options.desc);
|
||||
});
|
||||
|
||||
// Other test cases that effect easing produces values outside of [0,1].
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px', easing: 'step-start' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
||||
anim.pause();
|
||||
|
||||
// The bezier function produces values greater than 1 in (0.23368794, 1)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 230;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 250;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'effect easing produces values greater than 1 with step-start keyframe');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px', easing: 'step-end' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
||||
anim.pause();
|
||||
|
||||
// The bezier function produces values greater than 1 in (0.23368794, 1)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 230;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 250;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'effect easing produces values greater than 1 with step-end keyframe');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px', easing: 'step-start' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
||||
anim.pause();
|
||||
|
||||
// The bezier function produces negative values in (0, 0.766312060)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 750;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 800;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'effect easing produces negative values with step-start keyframe');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate([ { left: '0px', easing: 'step-end' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
||||
anim.pause();
|
||||
|
||||
// The bezier function produces negative values in (0, 0.766312060)
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 750;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 800;
|
||||
assert_equals(getComputedStyle(target).left, '0px');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(target).left, '100px');
|
||||
}, 'effect easing produces negative values with step-end keyframe');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
// http://cubic-bezier.com/#.5,1,.5,0
|
||||
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
||||
var keyframeEasing = function(x) {
|
||||
assert_greater_than_equal(x, 0.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
assert_less_than_equal(x, 1.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
return cubicBezier(0.5, 1, 0.5, 0)(x);
|
||||
}
|
||||
var keyframeEasingExtrapolated = function(x) {
|
||||
assert_greater_than(x, 1.0,
|
||||
'This function should be called in (1.0, infinity) range');
|
||||
// p3x + (p2y - p3y) / (p2x - p3x) * (x - p3x)
|
||||
return 1.0 + (0 - 1) / (0.5 - 1) * (x - 1.0);
|
||||
}
|
||||
var effectEasing = function(x) {
|
||||
return cubicBezier(0, 1.5, 1, 1.5)(x);
|
||||
}
|
||||
|
||||
anim.pause();
|
||||
|
||||
// The effect-easing produces values greater than 1 in (0.23368794, 1)
|
||||
assert_style_left_at(anim, 0, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 230, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 240, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
// Near the extreme point of the effect-easing function
|
||||
assert_style_left_at(anim, 700, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 990, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 1000, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
}, 'effect easing produces values greater than 1 with keyframe easing ' +
|
||||
'producing values greater than 1');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
// http://cubic-bezier.com/#0,1.5,1,1.5
|
||||
[ { left: '0px', easing: 'cubic-bezier(0, 1.5, 1, 1.5)' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
||||
var easing = function(x) {
|
||||
assert_greater_than_equal(x, 0.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
assert_less_than_equal(x, 1.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
return cubicBezier(0, 1.5, 1, 1.5)(x);
|
||||
}
|
||||
var easingExtrapolated = function(x) {
|
||||
assert_greater_than(x, 1.0,
|
||||
'This function should be called in negative range');
|
||||
// For cubic-bezier(0, 1.5, 1, 1.5), the tangent at the
|
||||
// endpoint (x = 1.0) is infinity so we should just return 1.0.
|
||||
return 1.0;
|
||||
}
|
||||
|
||||
anim.pause();
|
||||
|
||||
// The effect-easing produces values greater than 1 in (0.23368794, 1)
|
||||
assert_style_left_at(anim, 0, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
assert_style_left_at(anim, 230, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
assert_style_left_at(anim, 240, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
// Near the extreme point of the effect-easing function
|
||||
assert_style_left_at(anim, 700, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 990, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 1000, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
}, 'effect easing which produces values greater than 1 and the tangent on ' +
|
||||
'the upper boundary is infinity with keyframe easing producing values ' +
|
||||
'greater than 1');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
// http://cubic-bezier.com/#.5,1,.5,0
|
||||
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
||||
var keyframeEasing = function(x) {
|
||||
assert_greater_than_equal(x, 0.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
assert_less_than_equal(x, 1.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
return cubicBezier(0.5, 1, 0.5, 0)(x);
|
||||
}
|
||||
var keyframeEasingExtrapolated = function(x) {
|
||||
assert_less_than(x, 0.0,
|
||||
'This function should be called in negative range');
|
||||
// p0x + (p1y - p0y) / (p1x - p0x) * (x - p0x)
|
||||
return (1 / 0.5) * x;
|
||||
}
|
||||
var effectEasing = function(x) {
|
||||
return cubicBezier(0, -0.5, 1, -0.5)(x);
|
||||
}
|
||||
|
||||
anim.pause();
|
||||
|
||||
// The effect-easing produces negative values in (0, 0.766312060)
|
||||
assert_style_left_at(anim, 0, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 10, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
// Near the extreme point of the effect-easing function
|
||||
assert_style_left_at(anim, 300, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 750, function(x) {
|
||||
return keyframeEasingExtrapolated(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 770, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 1000, function(x) {
|
||||
return keyframeEasing(effectEasing(x));
|
||||
});
|
||||
}, 'effect easing produces negative values with keyframe easing ' +
|
||||
'producing negative values');
|
||||
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
target.style.position = 'absolute';
|
||||
var anim = target.animate(
|
||||
// http://cubic-bezier.com/#0,-0.5,1,-0.5
|
||||
[ { left: '0px', easing: 'cubic-bezier(0, -0.5, 1, -0.5)' },
|
||||
{ left: '100px' } ],
|
||||
{ duration: 1000,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
||||
var easing = function(x) {
|
||||
assert_greater_than_equal(x, 0.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
assert_less_than_equal(x, 1.0,
|
||||
'This function should be called in [0, 1.0] range');
|
||||
return cubicBezier(0, -0.5, 1, -0.5)(x);
|
||||
}
|
||||
var easingExtrapolated = function(x) {
|
||||
assert_less_than(x, 0.0,
|
||||
'This function should be called in negative range');
|
||||
// For cubic-bezier(0, -0.5, 1, -0.5), the tangent at the
|
||||
// endpoint (x = 0.0) is infinity so we should just return 0.0.
|
||||
return 0.0;
|
||||
}
|
||||
|
||||
anim.pause();
|
||||
|
||||
// The effect-easing produces negative values in (0, 0.766312060)
|
||||
assert_style_left_at(anim, 0, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
assert_style_left_at(anim, 10, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
// Near the extreme point of the effect-easing function
|
||||
assert_style_left_at(anim, 300, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 750, function(x) {
|
||||
return easingExtrapolated(easing(x));
|
||||
});
|
||||
assert_style_left_at(anim, 770, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
assert_style_left_at(anim, 1000, function(x) {
|
||||
return easing(easing(x))
|
||||
});
|
||||
}, 'effect easing which produces negative values and the tangent on ' +
|
||||
'the lower boundary is infinity with keyframe easing producing ' +
|
||||
'negative values');
|
||||
|
||||
var gStepTimingFunctionTests = [
|
||||
{
|
||||
description: 'Test bounds point of step-start easing',
|
||||
keyframe: [ { width: '0px' },
|
||||
{ width: '100px' } ],
|
||||
effect: {
|
||||
delay: 1000,
|
||||
duration: 1000,
|
||||
fill: 'both',
|
||||
easing: 'steps(2, start)'
|
||||
},
|
||||
conditions: [
|
||||
{ currentTime: 0, progress: 0 },
|
||||
{ currentTime: 999, progress: 0 },
|
||||
{ currentTime: 1000, progress: 0.5 },
|
||||
{ currentTime: 1499, progress: 0.5 },
|
||||
{ currentTime: 1500, progress: 1 },
|
||||
{ currentTime: 2000, progress: 1 }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: 'Test bounds point of step-start easing with compositor',
|
||||
keyframe: [ { opacity: 0 },
|
||||
{ opacity: 1 } ],
|
||||
effect: {
|
||||
delay: 1000,
|
||||
duration: 1000,
|
||||
fill: 'both',
|
||||
easing: 'steps(2, start)'
|
||||
},
|
||||
conditions: [
|
||||
{ currentTime: 0, progress: 0 },
|
||||
{ currentTime: 999, progress: 0 },
|
||||
{ currentTime: 1000, progress: 0.5 },
|
||||
{ currentTime: 1499, progress: 0.5 },
|
||||
{ currentTime: 1500, progress: 1 },
|
||||
{ currentTime: 2000, progress: 1 }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: 'Test bounds point of step-start easing with reverse direction',
|
||||
keyframe: [ { width: '0px' },
|
||||
{ width: '100px' } ],
|
||||
effect: {
|
||||
delay: 1000,
|
||||
duration: 1000,
|
||||
fill: 'both',
|
||||
direction: 'reverse',
|
||||
easing: 'steps(2, start)'
|
||||
},
|
||||
conditions: [
|
||||
{ currentTime: 0, progress: 1 },
|
||||
{ currentTime: 1001, progress: 1 },
|
||||
{ currentTime: 1500, progress: 1 },
|
||||
{ currentTime: 1501, progress: 0.5 },
|
||||
{ currentTime: 2000, progress: 0 },
|
||||
{ currentTime: 2500, progress: 0 }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: 'Test bounds point of step-start easing ' +
|
||||
'with iterationStart not at a transition point',
|
||||
keyframe: [ { width: '0px' },
|
||||
{ width: '100px' } ],
|
||||
effect: {
|
||||
delay: 1000,
|
||||
duration: 1000,
|
||||
fill: 'both',
|
||||
iterationStart: 0.25,
|
||||
easing: 'steps(2, start)'
|
||||
},
|
||||
conditions: [
|
||||
{ currentTime: 0, progress: 0.5 },
|
||||
{ currentTime: 999, progress: 0.5 },
|
||||
{ currentTime: 1000, progress: 0.5 },
|
||||
{ currentTime: 1249, progress: 0.5 },
|
||||
{ currentTime: 1250, progress: 1 },
|
||||
{ currentTime: 1749, progress: 1 },
|
||||
{ currentTime: 1750, progress: 0.5 },
|
||||
{ currentTime: 2000, progress: 0.5 },
|
||||
{ currentTime: 2500, progress: 0.5 },
|
||||
]
|
||||
},
|
||||
{
|
||||
description: 'Test bounds point of step-start easing ' +
|
||||
'with iterationStart and delay',
|
||||
keyframe: [ { width: '0px' },
|
||||
{ width: '100px' } ],
|
||||
effect: {
|
||||
delay: 1000,
|
||||
duration: 1000,
|
||||
fill: 'both',
|
||||
iterationStart: 0.5,
|
||||
easing: 'steps(2, start)'
|
||||
},
|
||||
conditions: [
|
||||
{ currentTime: 0, progress: 0.5 },
|
||||
{ currentTime: 999, progress: 0.5 },
|
||||
{ currentTime: 1000, progress: 1 },
|
||||
{ currentTime: 1499, progress: 1 },
|
||||
{ currentTime: 1500, progress: 0.5 },
|
||||
{ currentTime: 2000, progress: 1 }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: 'Test bounds point of step-start easing ' +
|
||||
'with iterationStart and reverse direction',
|
||||
keyframe: [ { width: '0px' },
|
||||
{ width: '100px' } ],
|
||||
effect: {
|
||||
delay: 1000,
|
||||
duration: 1000,
|
||||
fill: 'both',
|
||||
iterationStart: 0.5,
|
||||
direction: 'reverse',
|
||||
easing: 'steps(2, start)'
|
||||
},
|
||||
conditions: [
|
||||
{ currentTime: 0, progress: 1 },
|
||||
{ currentTime: 1000, progress: 1 },
|
||||
{ currentTime: 1001, progress: 0.5 },
|
||||
{ currentTime: 1499, progress: 0.5 },
|
||||
{ currentTime: 1500, progress: 1 },
|
||||
{ currentTime: 1999, progress: 1 },
|
||||
{ currentTime: 2000, progress: 0.5 },
|
||||
{ currentTime: 2500, progress: 0.5 }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: 'Test bounds point of step(4, start) easing ' +
|
||||
'with iterationStart 0.75 and delay',
|
||||
keyframe: [ { width: '0px' },
|
||||
{ width: '100px' } ],
|
||||
effect: {
|
||||
duration: 1000,
|
||||
fill: 'both',
|
||||
delay: 1000,
|
||||
iterationStart: 0.75,
|
||||
easing: 'steps(4, start)'
|
||||
},
|
||||
conditions: [
|
||||
{ currentTime: 0, progress: 0.75 },
|
||||
{ currentTime: 999, progress: 0.75 },
|
||||
{ currentTime: 1000, progress: 1 },
|
||||
{ currentTime: 2000, progress: 1 },
|
||||
{ currentTime: 2500, progress: 1 }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: 'Test bounds point of step-start easing ' +
|
||||
'with alternate direction',
|
||||
keyframe: [ { width: '0px' },
|
||||
{ width: '100px' } ],
|
||||
effect: {
|
||||
duration: 1000,
|
||||
fill: 'both',
|
||||
delay: 1000,
|
||||
iterations: 2,
|
||||
iterationStart: 1.5,
|
||||
direction: 'alternate',
|
||||
easing: 'steps(2, start)'
|
||||
},
|
||||
conditions: [
|
||||
{ currentTime: 0, progress: 1 },
|
||||
{ currentTime: 1000, progress: 1 },
|
||||
{ currentTime: 1001, progress: 0.5 },
|
||||
{ currentTime: 2999, progress: 1 },
|
||||
{ currentTime: 3000, progress: 0.5 },
|
||||
{ currentTime: 3500, progress: 0.5 }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: 'Test bounds point of step-start easing ' +
|
||||
'with alternate-reverse direction',
|
||||
keyframe: [ { width: '0px' },
|
||||
{ width: '100px' } ],
|
||||
effect: {
|
||||
duration: 1000,
|
||||
fill: 'both',
|
||||
delay: 1000,
|
||||
iterations: 2,
|
||||
iterationStart: 0.5,
|
||||
direction: 'alternate-reverse',
|
||||
easing: 'steps(2, start)'
|
||||
},
|
||||
conditions: [
|
||||
{ currentTime: 0, progress: 1 },
|
||||
{ currentTime: 1000, progress: 1 },
|
||||
{ currentTime: 1001, progress: 0.5 },
|
||||
{ currentTime: 2999, progress: 1 },
|
||||
{ currentTime: 3000, progress: 0.5 },
|
||||
{ currentTime: 3500, progress: 0.5 }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: 'Test bounds point of step-start easing in keyframe',
|
||||
keyframe: [ { width: '0px', easing: 'steps(2, start)' },
|
||||
{ width: '100px' } ],
|
||||
effect: {
|
||||
delay: 1000,
|
||||
duration: 1000,
|
||||
fill: 'both',
|
||||
},
|
||||
conditions: [
|
||||
{ currentTime: 0, progress: 0, width: '0px' },
|
||||
{ currentTime: 999, progress: 0, width: '0px' },
|
||||
{ currentTime: 1000, progress: 0, width: '50px' },
|
||||
{ currentTime: 1499, progress: 0.499, width: '50px' },
|
||||
{ currentTime: 1500, progress: 0.5, width: '100px' },
|
||||
{ currentTime: 2000, progress: 1, width: '100px' },
|
||||
{ currentTime: 2500, progress: 1, width: '100px' }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: 'Test bounds point of step-end easing ' +
|
||||
'with iterationStart and delay',
|
||||
keyframe: [ { width: '0px' },
|
||||
{ width: '100px' } ],
|
||||
effect: {
|
||||
duration: 1000,
|
||||
fill: 'both',
|
||||
delay: 1000,
|
||||
iterationStart: 0.5,
|
||||
easing: 'steps(2, end)'
|
||||
},
|
||||
conditions: [
|
||||
{ currentTime: 0, progress: 0 },
|
||||
{ currentTime: 999, progress: 0 },
|
||||
{ currentTime: 1000, progress: 0.5 },
|
||||
{ currentTime: 1499, progress: 0.5 },
|
||||
{ currentTime: 1500, progress: 0 },
|
||||
{ currentTime: 1999, progress: 0 },
|
||||
{ currentTime: 2000, progress: 0.5 },
|
||||
{ currentTime: 2500, progress: 0.5 }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: 'Test bounds point of step-end easing ' +
|
||||
'with iterationStart not at a transition point',
|
||||
keyframe: [ { width: '0px' },
|
||||
{ width: '100px' } ],
|
||||
effect: {
|
||||
delay: 1000,
|
||||
duration: 1000,
|
||||
fill: 'both',
|
||||
iterationStart: 0.75,
|
||||
easing: 'steps(2, end)'
|
||||
},
|
||||
conditions: [
|
||||
{ currentTime: 0, progress: 0.5 },
|
||||
{ currentTime: 999, progress: 0.5 },
|
||||
{ currentTime: 1000, progress: 0.5 },
|
||||
{ currentTime: 1249, progress: 0.5 },
|
||||
{ currentTime: 1250, progress: 0 },
|
||||
{ currentTime: 1749, progress: 0 },
|
||||
{ currentTime: 1750, progress: 0.5 },
|
||||
{ currentTime: 2000, progress: 0.5 },
|
||||
{ currentTime: 2500, progress: 0.5 },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
gStepTimingFunctionTests.forEach(function(options) {
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
var animation = target.animate(options.keyframe, options.effect);
|
||||
options.conditions.forEach(function(condition) {
|
||||
animation.currentTime = condition.currentTime;
|
||||
if (typeof condition.progress !== 'undefined') {
|
||||
assert_equals(animation.effect.getComputedTiming().progress,
|
||||
condition.progress,
|
||||
'Progress at ' + animation.currentTime + 'ms');
|
||||
}
|
||||
if (typeof condition.width !== 'undefined') {
|
||||
assert_equals(getComputedStyle(target).width,
|
||||
condition.width,
|
||||
'Progress at ' + animation.currentTime + 'ms');
|
||||
}
|
||||
});
|
||||
}, options.description);
|
||||
});
|
||||
|
||||
gInvalidEasingTests.forEach(function(options) {
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
assert_throws({ name: 'TypeError' },
|
||||
function() {
|
||||
div.animate({ easing: options.easing }, 100 * MS_PER_SEC);
|
||||
});
|
||||
}, 'Invalid keyframe easing value: \'' + options.easing + '\'');
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
|
@ -39,6 +39,7 @@ var gNonAnimatableProps = [
|
|||
'transitionTimingFunction',
|
||||
'display',
|
||||
'unsupportedProperty',
|
||||
'font-size', // Supported property that uses dashes
|
||||
];
|
||||
|
||||
function TestKeyframe(testProp) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue