mirror of
https://github.com/servo/servo.git
synced 2025-08-12 08:55:32 +01:00
Update web-platform-tests to revision bda2059150dca8ab47f088b4cc619fcdc1f262fa
This commit is contained in:
Ms2ger
parent
3535f3f6c2
commit
7c4281f3da
182 changed files with 7692 additions and 1042 deletions
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>delay tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-delay">
|
||||
<link rel="author" title="Daisuke Akatsuka" href="mailto:daisuke@mozilla-japan.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<link rel="stylesheet" href="/resources/testharness.css">
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
|
||||
anim.effect.timing.delay = 100;
|
||||
assert_equals(anim.effect.timing.delay, 100, 'set delay 100');
|
||||
assert_equals(anim.effect.getComputedTiming().delay, 100,
|
||||
'getComputedTiming() after set delay 100');
|
||||
}, 'set delay 100');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
|
||||
anim.effect.timing.delay = -100;
|
||||
assert_equals(anim.effect.timing.delay, -100, 'set delay -100');
|
||||
assert_equals(anim.effect.getComputedTiming().delay, -100,
|
||||
'getComputedTiming() after set delay -100');
|
||||
}, 'set delay -100');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
|
||||
anim.effect.timing.delay = 100;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, null);
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, null);
|
||||
}, 'Test adding a positive delay to an animation without a backwards fill ' +
|
||||
'makes it no longer active');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ fill: 'both',
|
||||
duration: 100 });
|
||||
anim.effect.timing.delay = -50;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.5);
|
||||
}, 'Test seeking an animation by setting a negative delay');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ fill: 'both',
|
||||
duration: 100 });
|
||||
anim.effect.timing.delay = -100;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 1);
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
|
||||
}, 'Test finishing an animation using a large negative delay');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>direction tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-direction">
|
||||
<link rel="author" title="Ryo Kato" href="mailto:foobar094@gmail.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<link rel="stylesheet" href="/resources/testharness.css">
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
|
||||
var directions = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
|
||||
directions.forEach(function(direction) {
|
||||
anim.effect.timing.direction = direction;
|
||||
assert_equals(anim.effect.timing.direction, direction,
|
||||
'set direction to ' + direction);
|
||||
});
|
||||
}, 'set direction to a valid keyword');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>duration tests</title>
|
||||
<link rel="help" href="http://w3c.github.io/web-animations/#dom-animationeffecttiming-duration">
|
||||
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
anim.effect.timing.duration = 123.45;
|
||||
assert_times_equal(anim.effect.timing.duration, 123.45,
|
||||
'set duration 123.45');
|
||||
assert_times_equal(anim.effect.getComputedTiming().duration, 123.45,
|
||||
'getComputedTiming() after set duration 123.45');
|
||||
}, 'set duration 123.45');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
anim.effect.timing.duration = 'auto';
|
||||
assert_equals(anim.effect.timing.duration, 'auto', 'set duration \'auto\'');
|
||||
assert_equals(anim.effect.getComputedTiming().duration, 0,
|
||||
'getComputedTiming() after set duration \'auto\'');
|
||||
}, 'set duration auto');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, { duration: 'auto' });
|
||||
assert_equals(anim.effect.timing.duration, 'auto', 'set duration \'auto\'');
|
||||
assert_equals(anim.effect.getComputedTiming().duration, 0,
|
||||
'getComputedTiming() after set duration \'auto\'');
|
||||
}, 'set auto duration in animate as object');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
anim.effect.timing.duration = Infinity;
|
||||
assert_equals(anim.effect.timing.duration, Infinity, 'set duration Infinity');
|
||||
assert_equals(anim.effect.getComputedTiming().duration, Infinity,
|
||||
'getComputedTiming() after set duration Infinity');
|
||||
}, 'set duration Infinity');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
div.animate({ opacity: [ 0, 1 ] }, -1);
|
||||
});
|
||||
}, 'set negative duration in animate using a duration parameter');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
div.animate({ opacity: [ 0, 1 ] }, -Infinity);
|
||||
});
|
||||
}, 'set negative Infinity duration in animate using a duration parameter');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
div.animate({ opacity: [ 0, 1 ] }, NaN);
|
||||
});
|
||||
}, 'set NaN duration in animate using a duration parameter');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
div.animate({ opacity: [ 0, 1 ] }, { duration: -1 });
|
||||
});
|
||||
}, 'set negative duration in animate using an options object');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
div.animate({ opacity: [ 0, 1 ] }, { duration: -Infinity });
|
||||
});
|
||||
}, 'set negative Infinity duration in animate using an options object');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
div.animate({ opacity: [ 0, 1 ] }, { duration: NaN });
|
||||
});
|
||||
}, 'set NaN duration in animate using an options object');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
div.animate({ opacity: [ 0, 1 ] }, { duration: 'abc' });
|
||||
});
|
||||
}, 'set abc string duration in animate using an options object');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
div.animate({ opacity: [ 0, 1 ] }, { duration: '100' });
|
||||
});
|
||||
}, 'set 100 string duration in animate using an options object');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
anim.effect.timing.duration = -1;
|
||||
});
|
||||
}, 'set negative duration');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
anim.effect.timing.duration = -Infinity;
|
||||
});
|
||||
}, 'set negative Infinity duration');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
anim.effect.timing.duration = NaN;
|
||||
});
|
||||
}, 'set NaN duration');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
anim.effect.timing.duration = 'abc';
|
||||
});
|
||||
}, 'set duration abc');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
anim.effect.timing.duration = '100';
|
||||
});
|
||||
}, 'set duration string 100');
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>easing tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-easing">
|
||||
<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>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
function assert_progress(animation, currentTime, easingFunction) {
|
||||
animation.currentTime = currentTime;
|
||||
var portion = currentTime / animation.effect.timing.duration;
|
||||
assert_approx_equals(animation.effect.getComputedTiming().progress,
|
||||
easingFunction(portion),
|
||||
0.01,
|
||||
'The progress of the animation should be approximately ' +
|
||||
easingFunction(portion) + ' at ' + currentTime + 'ms');
|
||||
}
|
||||
|
||||
gEffectEasingTests.forEach(function(options) {
|
||||
test(function(t) {
|
||||
var target = createDiv(t);
|
||||
var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
|
||||
{ duration: 1000 * MS_PER_SEC,
|
||||
fill: 'forwards' });
|
||||
anim.effect.timing.easing = options.easing;
|
||||
assert_equals(anim.effect.timing.easing, options.easing);
|
||||
|
||||
var easing = options.easingFunction;
|
||||
assert_progress(anim, 0, easing);
|
||||
assert_progress(anim, 250 * MS_PER_SEC, easing);
|
||||
assert_progress(anim, 500 * MS_PER_SEC, easing);
|
||||
assert_progress(anim, 750 * MS_PER_SEC, easing);
|
||||
assert_progress(anim, 1000 * MS_PER_SEC, easing);
|
||||
}, options.desc);
|
||||
});
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
|
||||
assert_throws({ name: 'TypeError' },
|
||||
function() {
|
||||
anim.effect.timing.easing = '';
|
||||
});
|
||||
assert_throws({ name: 'TypeError' },
|
||||
function() {
|
||||
anim.effect.timing.easing = 'test';
|
||||
});
|
||||
}, 'Test invalid easing value');
|
||||
|
||||
test(function(t) {
|
||||
var delay = 1000 * MS_PER_SEC;
|
||||
|
||||
var target = createDiv(t);
|
||||
var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
|
||||
{ duration: 1000 * MS_PER_SEC,
|
||||
fill: 'both',
|
||||
delay: delay,
|
||||
easing: 'steps(2, start)' });
|
||||
|
||||
anim.effect.timing.easing = 'steps(2, end)';
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0,
|
||||
'easing replace to steps(2, end) at before phase');
|
||||
|
||||
anim.currentTime = delay + 750 * MS_PER_SEC;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.5,
|
||||
'change currentTime to active phase');
|
||||
|
||||
anim.effect.timing.easing = 'steps(2, start)';
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 1,
|
||||
'easing replace to steps(2, start) at active phase');
|
||||
|
||||
anim.currentTime = delay + 1500 * MS_PER_SEC;
|
||||
anim.effect.timing.easing = 'steps(2, end)';
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 1,
|
||||
'easing replace to steps(2, end) again at after phase');
|
||||
}, 'Change the easing while the animation is running');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>endDelay tests</title>
|
||||
<link rel="help" href="http://w3c.github.io/web-animations/#dom-animationeffecttiming-enddelay">
|
||||
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
anim.effect.timing.endDelay = 123.45;
|
||||
assert_times_equal(anim.effect.timing.endDelay, 123.45,
|
||||
'set endDelay 123.45');
|
||||
assert_times_equal(anim.effect.getComputedTiming().endDelay, 123.45,
|
||||
'getComputedTiming() after set endDelay 123.45');
|
||||
}, 'set endDelay 123.45');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
anim.effect.timing.endDelay = -1000;
|
||||
assert_equals(anim.effect.timing.endDelay, -1000, 'set endDelay -1000');
|
||||
assert_equals(anim.effect.getComputedTiming().endDelay, -1000,
|
||||
'getComputedTiming() after set endDelay -1000');
|
||||
}, 'set endDelay -1000');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
assert_throws({name: "TypeError"}, function() {
|
||||
anim.effect.timing.endDelay = Infinity;
|
||||
}, 'we can not assign Infinity to timing.endDelay');
|
||||
}, 'set endDelay Infinity');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
assert_throws({name: "TypeError"}, function() {
|
||||
anim.effect.timing.endDelay = -Infinity;
|
||||
}, 'we can not assign negative Infinity to timing.endDelay');
|
||||
}, 'set endDelay negative Infinity');
|
||||
|
||||
async_test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ duration: 100000, endDelay: 50000 });
|
||||
anim.onfinish = t.step_func(function(event) {
|
||||
assert_unreached('onfinish event should not be fired');
|
||||
});
|
||||
|
||||
anim.ready.then(function() {
|
||||
anim.currentTime = 100000;
|
||||
return waitForAnimationFrames(2);
|
||||
}).then(t.step_func(function() {
|
||||
t.done();
|
||||
}));
|
||||
}, 'onfinish event is not fired duration endDelay');
|
||||
|
||||
async_test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ duration: 100000, endDelay: 30000 });
|
||||
var finishedTimelineTime;
|
||||
anim.finished.then(function() {
|
||||
finishedTimelineTime = anim.timeline.currentTime;
|
||||
});
|
||||
|
||||
var receivedEvents = [];
|
||||
anim.onfinish = function(event) {
|
||||
receivedEvents.push(event);
|
||||
}
|
||||
|
||||
anim.ready.then(function() {
|
||||
anim.currentTime = 110000; // during endDelay
|
||||
return waitForAnimationFrames(2);
|
||||
}).then(t.step_func(function() {
|
||||
assert_equals(receivedEvents.length, 0,
|
||||
'onfinish event is should not be fired' +
|
||||
'when currentTime is during endDelay');
|
||||
anim.currentTime = 130000; // after endTime
|
||||
return waitForAnimationFrames(2);
|
||||
})).then(t.step_func_done(function() {
|
||||
assert_equals(receivedEvents.length, 1, 'length of array should be one');
|
||||
assert_equals(receivedEvents[0].timelineTime, finishedTimelineTime,
|
||||
'receivedEvents[0].timelineTime should equal to the animation timeline '
|
||||
+ 'when finished promise is resolved');
|
||||
}));
|
||||
}, 'onfinish event is fired currentTime is after endTime');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>fill tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-fill">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<link rel="stylesheet" href="/resources/testharness.css">
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
["none", "forwards", "backwards", "both", ].forEach(function(fill){
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
|
||||
anim.effect.timing.fill = fill;
|
||||
assert_equals(anim.effect.timing.fill, fill, 'set fill ' + fill);
|
||||
assert_equals(anim.effect.getComputedTiming().fill, fill, 'getComputedTiming() after set fill ' + fill);
|
||||
}, 'set fill ' + fill);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Element.getAnimations tests</title>
|
||||
<link rel="help" href="http://w3c.github.io/web-animations/#animationeffecttiming">
|
||||
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
anim.finish();
|
||||
assert_equals(div.getAnimations().length, 0, 'animation finished');
|
||||
anim.effect.timing.duration += 100000;
|
||||
assert_equals(div.getAnimations()[0], anim, 'set duration 102000');
|
||||
anim.effect.timing.duration = 0;
|
||||
assert_equals(div.getAnimations().length, 0, 'set duration 0');
|
||||
anim.effect.timing.duration = 'auto';
|
||||
assert_equals(div.getAnimations().length, 0, 'set duration \'auto\'');
|
||||
}, 'when duration is changed');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
|
||||
anim.effect.timing.endDelay = -3000;
|
||||
assert_equals(div.getAnimations().length, 0,
|
||||
'set negative endDelay so as endTime is less than currentTime');
|
||||
anim.effect.timing.endDelay = 1000;
|
||||
assert_equals(div.getAnimations()[0], anim,
|
||||
'set positive endDelay so as endTime is more than currentTime');
|
||||
|
||||
anim.effect.timing.duration = 1000;
|
||||
anim.currentTime = 1500;
|
||||
assert_equals(div.getAnimations().length, 0,
|
||||
'set currentTime less than endTime');
|
||||
anim.effect.timing.endDelay = -500;
|
||||
anim.currentTime = 400;
|
||||
assert_equals(div.getAnimations()[0], anim,
|
||||
'set currentTime less than endTime when endDelay is negative value');
|
||||
anim.currentTime = 500;
|
||||
assert_equals(div.getAnimations().length, 0,
|
||||
'set currentTime same as endTime when endDelay is negative value');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(div.getAnimations().length, 0,
|
||||
'set currentTime same as duration when endDelay is negative value');
|
||||
}, 'when endDelay is changed');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
anim.finish();
|
||||
assert_equals(div.getAnimations().length, 0, 'animation finished');
|
||||
anim.effect.timing.iterations = 10;
|
||||
assert_equals(div.getAnimations()[0], anim, 'set iterations 10');
|
||||
anim.effect.timing.iterations = 0;
|
||||
assert_equals(div.getAnimations().length, 0, 'set iterations 0');
|
||||
anim.effect.timing.iterations = Infinity;
|
||||
assert_equals(div.getAnimations().length, 1, 'set iterations Infinity');
|
||||
}, 'when iterations is changed');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ duration: 1000, delay: 500, endDelay: -500 });
|
||||
assert_equals(div.getAnimations()[0], anim, 'when currentTime 0');
|
||||
anim.currentTime = 500;
|
||||
assert_equals(div.getAnimations()[0], anim, 'set currentTime 500');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(div.getAnimations().length, 0, 'set currentTime 1000');
|
||||
}, 'when currentTime changed in duration:1000, delay: 500, endDelay: -500');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ duration: 1000, delay: -500, endDelay: -500 });
|
||||
assert_equals(div.getAnimations().length, 0, 'when currentTime 0');
|
||||
anim.currentTime = 500;
|
||||
assert_equals(div.getAnimations().length, 0, 'set currentTime 500');
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(div.getAnimations().length, 0, 'set currentTime 1000');
|
||||
}, 'when currentTime changed in duration:1000, delay: -500, endDelay: -500');
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>getComputedStyle tests</title>
|
||||
<link rel="help" href="http://w3c.github.io/web-animations/#animationeffecttiming">
|
||||
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
|
||||
anim.finish();
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');
|
||||
anim.effect.timing.duration *= 2;
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'set double duration');
|
||||
anim.effect.timing.duration = 0;
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'set duration 0');
|
||||
anim.effect.timing.duration = 'auto';
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'set duration \'auto\'');
|
||||
}, 'changed duration immediately updates its computed styles');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
|
||||
anim.finish();
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');
|
||||
anim.effect.timing.iterations = 2;
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'set 2 iterations');
|
||||
anim.effect.timing.iterations = 0;
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'set iterations 0');
|
||||
anim.effect.timing.iterations = Infinity;
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'set iterations Infinity');
|
||||
}, 'changed iterations immediately updates its computed styles');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 1, 0 ] },
|
||||
{ duration: 10000, endDelay: 1000, fill: 'none' });
|
||||
|
||||
anim.currentTime = 9000;
|
||||
assert_equals(getComputedStyle(div).opacity, '0.1',
|
||||
'set currentTime during duration');
|
||||
|
||||
anim.currentTime = 10900;
|
||||
assert_equals(getComputedStyle(div).opacity, '1',
|
||||
'set currentTime during endDelay');
|
||||
|
||||
anim.currentTime = 11100;
|
||||
assert_equals(getComputedStyle(div).opacity, '1',
|
||||
'set currentTime after endDelay');
|
||||
}, 'change currentTime when fill is none and endDelay is positive');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 1, 0 ] },
|
||||
{ duration: 10000,
|
||||
endDelay: 1000,
|
||||
fill: 'forwards' });
|
||||
anim.currentTime = 5000;
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5',
|
||||
'set currentTime during duration');
|
||||
|
||||
anim.currentTime = 9999;
|
||||
assert_equals(getComputedStyle(div).opacity, '0.0001',
|
||||
'set currentTime just a little before duration');
|
||||
|
||||
anim.currentTime = 10900;
|
||||
assert_equals(getComputedStyle(div).opacity, '0',
|
||||
'set currentTime during endDelay');
|
||||
|
||||
anim.currentTime = 11100;
|
||||
assert_equals(getComputedStyle(div).opacity, '0',
|
||||
'set currentTime after endDelay');
|
||||
}, 'change currentTime when fill forwards and endDelay is positive');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 1, 0 ] },
|
||||
{ duration: 10000, endDelay: -5000, fill: 'none' });
|
||||
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(div).opacity, '0.9',
|
||||
'set currentTime before endTime');
|
||||
|
||||
anim.currentTime = 10000;
|
||||
assert_equals(getComputedStyle(div).opacity, '1',
|
||||
'set currentTime after endTime');
|
||||
}, 'change currentTime when fill none and endDelay is negative');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 1, 0 ] },
|
||||
{ duration: 10000,
|
||||
endDelay: -5000,
|
||||
fill: 'forwards' });
|
||||
|
||||
anim.currentTime = 1000;
|
||||
assert_equals(getComputedStyle(div).opacity, '0.9',
|
||||
'set currentTime before endTime');
|
||||
|
||||
anim.currentTime = 5000;
|
||||
assert_equals(getComputedStyle(div).opacity, '0',
|
||||
'set currentTime same as endTime');
|
||||
|
||||
anim.currentTime = 9999;
|
||||
assert_equals(getComputedStyle(div).opacity, '0',
|
||||
'set currentTime during duration');
|
||||
|
||||
anim.currentTime = 10000;
|
||||
assert_equals(getComputedStyle(div).opacity, '0',
|
||||
'set currentTime after endTime');
|
||||
}, 'change currentTime when fill forwards and endDelay is negative');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ duration: 10000,
|
||||
direction: 'normal' });
|
||||
|
||||
anim.currentTime = 7000;
|
||||
anim.effect.timing.direction = 'reverse';
|
||||
|
||||
assert_equals(getComputedStyle(div).opacity, '0.3',
|
||||
'change direction from "normal" to "reverse"');
|
||||
}, 'change direction from "normal" to "reverse"');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ iterations: 2,
|
||||
duration: 10000,
|
||||
direction: 'normal' });
|
||||
|
||||
anim.currentTime = 17000;
|
||||
anim.effect.timing.direction = 'alternate';
|
||||
|
||||
assert_equals(getComputedStyle(div).opacity, '0.3',
|
||||
'change direction from "normal" to "alternate"');
|
||||
}, 'change direction from "normal" to "alternate"');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ iterations: 2,
|
||||
duration: 10000,
|
||||
direction: 'normal' });
|
||||
|
||||
anim.currentTime = 17000;
|
||||
anim.effect.timing.direction = 'alternate-reverse';
|
||||
|
||||
assert_equals(getComputedStyle(div).opacity, '0.7',
|
||||
'change direction from "normal" to "alternate-reverse"');
|
||||
}, 'change direction from "normal" to "alternate-reverse"');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ fill: 'backwards',
|
||||
duration: 10000,
|
||||
direction: 'normal' });
|
||||
|
||||
// test for a flip of value at the currentTime = 0
|
||||
anim.effect.timing.direction = 'reverse';
|
||||
|
||||
assert_equals(getComputedStyle(div).opacity, '1',
|
||||
'change direction from "normal" to "reverse" ' +
|
||||
'at the starting point');
|
||||
}, 'change direction from "normal" to "reverse"');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>iterationStart tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-iterationstart">
|
||||
<link rel="author" title="Daisuke Akatsuka" href="mailto:daisuke@mozilla-japan.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ iterationStart: 0.2,
|
||||
iterations: 1,
|
||||
fill: 'both',
|
||||
duration: 100,
|
||||
delay: 1 });
|
||||
anim.effect.timing.iterationStart = 2.5;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.5);
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
|
||||
}, 'Test that changing the iterationStart affects computed timing ' +
|
||||
'when backwards-filling');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ iterationStart: 0.2,
|
||||
iterations: 1,
|
||||
fill: 'both',
|
||||
duration: 100,
|
||||
delay: 0 });
|
||||
anim.effect.timing.iterationStart = 2.5;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.5);
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
|
||||
}, 'Test that changing the iterationStart affects computed timing ' +
|
||||
'during the active phase');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ iterationStart: 0.2,
|
||||
iterations: 1,
|
||||
fill: 'both',
|
||||
duration: 100,
|
||||
delay: 0 });
|
||||
anim.finish();
|
||||
anim.effect.timing.iterationStart = 2.5;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.5);
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 3);
|
||||
}, 'Test that changing the iterationStart affects computed timing ' +
|
||||
'when forwards-filling');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
|
||||
assert_throws({ name: 'TypeError' },
|
||||
function() {
|
||||
anim.effect.timing.iterationStart = -1;
|
||||
});
|
||||
assert_throws({ name: 'TypeError' },
|
||||
function() {
|
||||
div.animate({ opacity: [ 0, 1 ] },
|
||||
{ iterationStart: -1 });
|
||||
});
|
||||
}, 'Test invalid iterationStart value');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>iterations tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-iterations">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<link rel="stylesheet" href="/resources/testharness.css">
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
anim.effect.timing.iterations = 2;
|
||||
assert_equals(anim.effect.timing.iterations, 2, 'set duration 2');
|
||||
assert_equals(anim.effect.getComputedTiming().iterations, 2,
|
||||
'getComputedTiming() after set iterations 2');
|
||||
}, 'set iterations 2');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
anim.effect.timing.iterations = Infinity;
|
||||
assert_equals(anim.effect.timing.iterations, Infinity, 'set duration Infinity');
|
||||
assert_equals(anim.effect.getComputedTiming().iterations, Infinity,
|
||||
'getComputedTiming() after set iterations Infinity');
|
||||
}, 'set iterations Infinity');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
anim.effect.timing.iterations = -1;
|
||||
});
|
||||
}, 'set negative iterations');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
anim.effect.timing.iterations = -Infinity;
|
||||
});
|
||||
}, 'set negative infinity iterations ');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
|
||||
assert_throws({ name: 'TypeError' }, function() {
|
||||
anim.effect.timing.iterations = NaN;
|
||||
});
|
||||
}, 'set NaN iterations');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue