1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 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>
|