Update web-platform-tests to revision bda2059150dca8ab47f088b4cc619fcdc1f262fa

This commit is contained in:
Ms2ger 2016-05-30 09:58:25 +02:00
parent 3535f3f6c2
commit 7c4281f3da
182 changed files with 7692 additions and 1042 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>