mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-20 23:37:33 +09:00
import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo
This commit is contained in:
Roy Tam
commit
dcd9973243
150858 changed files with 23884658 additions and 0 deletions
|
|
@ -0,0 +1,142 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Active time tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#calculating-the-active-time">
|
||||
<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';
|
||||
|
||||
test(function(t) {
|
||||
var tests = [ { fill: 'none', progress: null },
|
||||
{ fill: 'backwards', progress: 0 },
|
||||
{ fill: 'forwards', progress: null },
|
||||
{ fill: 'both', progress: 0 } ];
|
||||
tests.forEach(function(test) {
|
||||
var anim = createDiv(t).animate(null, { delay: 1, fill: test.fill });
|
||||
assert_equals(anim.effect.getComputedTiming().progress, test.progress,
|
||||
'Progress in before phase when using \'' + test.fill
|
||||
+ '\' fill');
|
||||
});
|
||||
}, 'Active time in before phase');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, 1000);
|
||||
anim.currentTime = 500;
|
||||
assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
|
||||
}, 'Active time in active phase and no start delay is the local time');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { duration: 1000, delay: 500 });
|
||||
anim.currentTime = 1000;
|
||||
assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
|
||||
}, 'Active time in active phase and positive start delay is the local time'
|
||||
+ ' minus the start delay');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { duration: 1000, delay: -500 });
|
||||
assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
|
||||
}, 'Active time in active phase and negative start delay is the local time'
|
||||
+ ' minus the start delay');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
assert_equals(anim.effect.getComputedTiming().progress, null);
|
||||
}, 'Active time in after phase with no fill is unresolved');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { fill: 'backwards' });
|
||||
assert_equals(anim.effect.getComputedTiming().progress, null);
|
||||
}, 'Active time in after phase with backwards-only fill is unresolved');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { duration: 1000,
|
||||
iterations: 2.3,
|
||||
delay: 500, // Should have no effect
|
||||
fill: 'forwards' });
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
|
||||
assert_times_equal(anim.effect.getComputedTiming().progress, 0.3);
|
||||
}, 'Active time in after phase with forwards fill is the active duration');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { duration: 0,
|
||||
iterations: Infinity,
|
||||
fill: 'forwards' });
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity);
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 1);
|
||||
}, 'Active time in after phase with forwards fill, zero-duration, and '
|
||||
+ ' infinite iteration count is the active duration');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { duration: 1000,
|
||||
iterations: 2.3,
|
||||
delay: 500,
|
||||
endDelay: 4000,
|
||||
fill: 'forwards' });
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
|
||||
assert_times_equal(anim.effect.getComputedTiming().progress, 0.3);
|
||||
}, 'Active time in after phase with forwards fill and positive end delay'
|
||||
+ ' is the active duration');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { duration: 1000,
|
||||
iterations: 2.3,
|
||||
delay: 500,
|
||||
endDelay: -800,
|
||||
fill: 'forwards' });
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 1);
|
||||
assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
|
||||
}, 'Active time in after phase with forwards fill and negative end delay'
|
||||
+ ' is the active duration + end delay');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { duration: 1000,
|
||||
iterations: 2.3,
|
||||
delay: 500,
|
||||
endDelay: -2500,
|
||||
fill: 'forwards' });
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0);
|
||||
}, 'Active time in after phase with forwards fill and negative end delay'
|
||||
+ ' greater in magnitude than the active duration is zero');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { duration: 1000,
|
||||
iterations: 2.3,
|
||||
delay: 500,
|
||||
endDelay: -4000,
|
||||
fill: 'forwards' });
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0);
|
||||
}, 'Active time in after phase with forwards fill and negative end delay'
|
||||
+ ' greater in magnitude than the sum of the active duration and start delay'
|
||||
+ ' is zero');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { duration: 1000,
|
||||
iterations: 2.3,
|
||||
delay: 500,
|
||||
fill: 'both' });
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
|
||||
assert_times_equal(anim.effect.getComputedTiming().progress, 0.3);
|
||||
}, 'Active time in after phase with \'both\' fill is the active duration');
|
||||
|
||||
test(function(t) {
|
||||
// Create an effect with a non-zero duration so we ensure we're not just
|
||||
// testing the after-phase behavior.
|
||||
var effect = new KeyframeEffect(null, null, 1);
|
||||
assert_equals(effect.getComputedTiming().progress, null);
|
||||
}, 'Active time when the local time is unresolved, is unresolved');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,584 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Current iteration tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#current-iteration">
|
||||
<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 runTests(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');
|
||||
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// Zero iteration duration tests
|
||||
//
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
runTests([
|
||||
{
|
||||
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
|
||||
}
|
||||
], 'Test zero iterations');
|
||||
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// Tests where the iteration count is an integer
|
||||
//
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
runTests([
|
||||
{
|
||||
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
|
||||
}
|
||||
], 'Test integer iterations');
|
||||
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// Tests where the iteration count is a fraction
|
||||
//
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
runTests([
|
||||
{
|
||||
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
|
||||
}
|
||||
], 'Test fractional iterations');
|
||||
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// Tests where the iteration count is Infinity
|
||||
//
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
runTests([
|
||||
{
|
||||
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
|
||||
}
|
||||
], 'Test infinity iterations');
|
||||
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// End delay tests
|
||||
//
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
runTests([
|
||||
{
|
||||
input: { duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: 50 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -50 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -100 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -200 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterationStart: 0.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: 50 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 1
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterationStart: 0.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -50 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterationStart: 0.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -100 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 2,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -100 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 1,
|
||||
iterationStart: 2,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -50 },
|
||||
before: 2,
|
||||
active: 2,
|
||||
after: 2
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 1,
|
||||
iterationStart: 2,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -100 },
|
||||
before: 2,
|
||||
active: 2,
|
||||
after: 2
|
||||
},
|
||||
], 'Test end delay');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Tests for phases and states</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#animation-effect-phases-and-states">
|
||||
<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';
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// Phases
|
||||
//
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
function assert_phase_at_time(animation, phase, currentTime) {
|
||||
animation.currentTime = currentTime;
|
||||
|
||||
if (phase === 'active') {
|
||||
// If the fill mode is 'none', then progress will only be non-null if we
|
||||
// are in the active phase.
|
||||
animation.effect.timing.fill = 'none';
|
||||
assert_not_equals(animation.effect.getComputedTiming().progress, null,
|
||||
'Animation effect is in active phase when current time'
|
||||
+ ' is ' + currentTime + 'ms');
|
||||
} else {
|
||||
// The easiest way to distinguish between the 'before' phase and the 'after'
|
||||
// phase is to toggle the fill mode. For example, if the progress is null
|
||||
// will the fill node is 'none' but non-null when the fill mode is
|
||||
// 'backwards' then we are in the before phase.
|
||||
animation.effect.timing.fill = 'none';
|
||||
assert_equals(animation.effect.getComputedTiming().progress, null,
|
||||
'Animation effect is in ' + phase + ' phase when current time'
|
||||
+ ' is ' + currentTime + 'ms'
|
||||
+ ' (progress is null with \'none\' fill mode)');
|
||||
|
||||
animation.effect.timing.fill = phase === 'before'
|
||||
? 'backwards'
|
||||
: 'forwards';
|
||||
assert_not_equals(animation.effect.getComputedTiming().progress, null,
|
||||
'Animation effect is in ' + phase + ' phase when current'
|
||||
+ ' time is ' + currentTime + 'ms'
|
||||
+ ' (progress is non-null with appropriate fill mode)');
|
||||
}
|
||||
}
|
||||
|
||||
test(function(t) {
|
||||
var animation = createDiv(t).animate(null, 1);
|
||||
|
||||
[ { currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'active' },
|
||||
{ currentTime: 1, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
}, 'Phase calculation for a simple animation effect');
|
||||
|
||||
test(function(t) {
|
||||
var animation = createDiv(t).animate(null, { duration: 1, delay: 1 });
|
||||
|
||||
[ { currentTime: 0, phase: 'before' },
|
||||
{ currentTime: 1, phase: 'active' },
|
||||
{ currentTime: 2, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
}, 'Phase calculation for an animation effect with a positive start delay');
|
||||
|
||||
test(function(t) {
|
||||
var animation = createDiv(t).animate(null, { duration: 1, delay: -1 });
|
||||
|
||||
[ { currentTime: -2, phase: 'before' },
|
||||
{ currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
}, 'Phase calculation for an animation effect with a negative start delay');
|
||||
|
||||
test(function(t) {
|
||||
var animation = createDiv(t).animate(null, { duration: 1, endDelay: 1 });
|
||||
|
||||
[ { currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'active' },
|
||||
{ currentTime: 1, phase: 'after' },
|
||||
{ currentTime: 2, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
}, 'Phase calculation for an animation effect with a positive end delay');
|
||||
|
||||
test(function(t) {
|
||||
var animation = createDiv(t).animate(null, { duration: 2, endDelay: -1 });
|
||||
|
||||
[ { currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'active' },
|
||||
{ currentTime: 0.9, phase: 'active' },
|
||||
{ currentTime: 1, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
}, 'Phase calculation for an animation effect with a negative end delay lesser'
|
||||
+ ' in magnitude than the active duration');
|
||||
|
||||
test(function(t) {
|
||||
var animation = createDiv(t).animate(null, { duration: 1, endDelay: -1 });
|
||||
|
||||
[ { currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'after' },
|
||||
{ currentTime: 1, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
}, 'Phase calculation for an animation effect with a negative end delay equal'
|
||||
+ ' in magnitude to the active duration');
|
||||
|
||||
test(function(t) {
|
||||
var animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 });
|
||||
|
||||
[ { currentTime: -2, phase: 'before' },
|
||||
{ currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
}, 'Phase calculation for an animation effect with a negative end delay'
|
||||
+ ' greater in magnitude than the active duration');
|
||||
|
||||
test(function(t) {
|
||||
var animation = createDiv(t).animate(null, { duration: 2,
|
||||
delay: 1,
|
||||
endDelay: -1 });
|
||||
|
||||
[ { currentTime: 0, phase: 'before' },
|
||||
{ currentTime: 1, phase: 'active' },
|
||||
{ currentTime: 2, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
}, 'Phase calculation for an animation effect with a positive start delay'
|
||||
+ ' and a negative end delay lesser in magnitude than the active duration');
|
||||
|
||||
test(function(t) {
|
||||
var animation = createDiv(t).animate(null, { duration: 1,
|
||||
delay: -1,
|
||||
endDelay: -1 });
|
||||
|
||||
[ { currentTime: -2, phase: 'before' },
|
||||
{ currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
}, 'Phase calculation for an animation effect with a negative start delay'
|
||||
+ ' and a negative end delay equal in magnitude to the active duration');
|
||||
|
||||
test(function(t) {
|
||||
var animation = createDiv(t).animate(null, { duration: 1,
|
||||
delay: -1,
|
||||
endDelay: -2 });
|
||||
|
||||
[ { currentTime: -3, phase: 'before' },
|
||||
{ currentTime: -2, phase: 'before' },
|
||||
{ currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
}, 'Phase calculation for an animation effect with a negative start delay'
|
||||
+ ' and a negative end delay equal greater in magnitude than the active'
|
||||
+ ' duration');
|
||||
|
||||
test(function(t) {
|
||||
var animation = createDiv(t).animate(null, 1);
|
||||
animation.playbackRate = -1;
|
||||
|
||||
[ { currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'before' },
|
||||
{ currentTime: 1, phase: 'active' },
|
||||
{ currentTime: 2, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
}, 'Phase calculation for a simple animation effect with negative playback'
|
||||
+ ' rate');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,575 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Simple iteration progress tests</title>
|
||||
<link rel="help"
|
||||
href="https://w3c.github.io/web-animations/#simple-iteration-progress">
|
||||
<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 runTests(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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// Zero iteration duration tests
|
||||
//
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
runTests([
|
||||
{
|
||||
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
|
||||
}
|
||||
], 'Test zero iterations');
|
||||
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// Tests where the iteration count is an integer
|
||||
//
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
runTests([
|
||||
{
|
||||
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
|
||||
}
|
||||
], 'Test integer iterations');
|
||||
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// Tests where the iteration count is a fraction
|
||||
//
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
runTests([
|
||||
{
|
||||
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
|
||||
}
|
||||
], 'Test fractional iterations');
|
||||
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// Tests where the iteration count is Infinity
|
||||
//
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
runTests([
|
||||
{
|
||||
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
|
||||
}
|
||||
], 'Test infinity iterations');
|
||||
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// End delay tests
|
||||
//
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
runTests([
|
||||
{
|
||||
input: { duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: 50 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 1
|
||||
},
|
||||
|
||||
{
|
||||
input: { duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -50 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -100 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -200 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterationStart: 0.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: 50 },
|
||||
before: 0.5,
|
||||
active: 0.5,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterationStart: 0.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -50 },
|
||||
before: 0.5,
|
||||
active: 0.5,
|
||||
after: 1
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterationStart: 0.5,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -100 },
|
||||
before: 0.5,
|
||||
active: 0.5,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 2,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -100 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 1
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 1,
|
||||
iterationStart: 2,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -50 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0.5
|
||||
},
|
||||
|
||||
{
|
||||
input: { iterations: 1,
|
||||
iterationStart: 2,
|
||||
duration: 100,
|
||||
delay: 1,
|
||||
fill: 'both',
|
||||
endDelay: -100 },
|
||||
before: 0,
|
||||
active: 0,
|
||||
after: 0
|
||||
},
|
||||
], 'Test end delay');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue