mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-24 01:17:34 +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,315 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<script src="../testcommon.js"></script>
|
||||
<style>
|
||||
|
||||
.animated-div {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
'use strict';
|
||||
|
||||
// --------------------
|
||||
// delay
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().delay, 0,
|
||||
'Initial value of delay');
|
||||
}, 'delay of a new tranisition');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s 10s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().delay, 10000,
|
||||
'Initial value of delay');
|
||||
}, 'Positive delay of a new transition');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s -5s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().delay, -5000,
|
||||
'Initial value of delay');
|
||||
}, 'Negative delay of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// endDelay
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().endDelay, 0,
|
||||
'Initial value of endDelay');
|
||||
}, 'endDelay of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// fill
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().fill, 'backwards',
|
||||
'Fill backwards');
|
||||
}, 'fill of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// iterationStart
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().iterationStart, 0,
|
||||
'Initial value of iterationStart');
|
||||
}, 'iterationStart of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// iterations
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().iterations, 1,
|
||||
'Initial value of iterations');
|
||||
}, 'iterations of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// duration
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().duration, 10000,
|
||||
'Initial value of duration');
|
||||
}, 'duration of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// direction
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().direction, 'normal',
|
||||
'Initial value of direction');
|
||||
}, 'direction of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// easing
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().easing, 'linear',
|
||||
'Initial value of easing');
|
||||
}, 'easing of a new transition');
|
||||
|
||||
|
||||
// ------------------------------
|
||||
// endTime
|
||||
// = max(start delay + active duration + end delay, 0)
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 100s -5s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
var answer = 100000 - 5000; // ms
|
||||
assert_equals(effect.getComputedTiming().endTime, answer,
|
||||
'Initial value of endTime');
|
||||
}, 'endTime of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// activeDuration
|
||||
// = iteration duration * iteration count(==1)
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 100s -5s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().activeDuration, 100000,
|
||||
'Initial value of activeDuration');
|
||||
}, 'activeDuration of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// localTime
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 100s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().localTime, 0,
|
||||
'Initial value of localTime');
|
||||
}, 'localTime of a new transition');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 100s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var anim = div.getAnimations()[0];
|
||||
anim.currentTime = 5000;
|
||||
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
|
||||
'current localTime after setting currentTime');
|
||||
}, 'localTime is always equal to currentTime');
|
||||
|
||||
async_test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 100s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var anim = div.getAnimations()[0];
|
||||
anim.playbackRate = 2; // 2 times faster
|
||||
|
||||
anim.ready.then(t.step_func(function() {
|
||||
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
|
||||
'localTime is equal to currentTime');
|
||||
return waitForFrame();
|
||||
})).then(t.step_func_done(function() {
|
||||
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
|
||||
'localTime is equal to currentTime');
|
||||
}));
|
||||
}, 'localTime reflects playbackRate immediately');
|
||||
|
||||
|
||||
// --------------------
|
||||
// progress
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10.5s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().progress, 0.0,
|
||||
'Initial value of progress');
|
||||
}, 'progress of a new transition');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10.5s 2s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().progress, 0.0,
|
||||
'Initial value of progress');
|
||||
}, 'progress of a new transition with positive delay in before phase');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10.5s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var anim = div.getAnimations()[0];
|
||||
anim.finish()
|
||||
assert_equals(anim.effect.getComputedTiming().progress, null,
|
||||
'finished progress');
|
||||
}, 'progress of a finished transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// currentIteration
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().currentIteration, 0,
|
||||
'Initial value of currentIteration');
|
||||
}, 'currentIteration of a new transition');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s 2s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().currentIteration, 0,
|
||||
'Initial value of currentIteration');
|
||||
}, 'currentIteration of a new transition with positive delay in before phase');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
var anim = div.getAnimations()[0];
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, null,
|
||||
'finished currentIteration');
|
||||
}, 'currentIteration of a finished transition');
|
||||
|
||||
done();
|
||||
</script>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue