OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <meta charset=utf-8> | 2 <meta charset=utf-8> |
3 <title>Animation constructor tests</title> | 3 <title>Animation constructor tests</title> |
4 <link rel="help" href="http://w3c.github.io/web-animations/#dom-animation-animat
ion"> | 4 <link rel="help" href="http://w3c.github.io/web-animations/#dom-animation-animat
ion"> |
5 <link rel="author" title="Hiroyuki Ikezoe" href="mailto:hiikezoe@mozilla-japan.o
rg"> | 5 <link rel="author" title="Hiroyuki Ikezoe" href="mailto:hiikezoe@mozilla-japan.o
rg"> |
6 <script src="/resources/testharness.js"></script> | 6 <script src="/resources/testharness.js"></script> |
7 <script src="/resources/testharnessreport.js"></script> | 7 <script src="/resources/testharnessreport.js"></script> |
8 <script src="../../testcommon.js"></script> | 8 <script src="../../testcommon.js"></script> |
9 <body> | 9 <body> |
10 <div id="log"></div> | 10 <div id="log"></div> |
11 <div id="target"></div> | 11 <div id="target"></div> |
12 <script> | 12 <script> |
13 "use strict"; | 13 "use strict"; |
14 | 14 |
15 var gTarget = document.getElementById("target"); | 15 var gTarget = document.getElementById("target"); |
16 var gEffect = new KeyframeEffectReadOnly(gTarget, { opacity: [0, 1] }); | 16 var gEffect = new KeyframeEffectReadOnly(gTarget, { opacity: [0, 1] }); |
17 | 17 |
18 var gTestArguments = [ | 18 var gTestArguments = [ |
19 { | 19 { |
20 effect: null, | 20 effect: null, |
21 timeline: null, | 21 timeline: null, |
| 22 expectedTimeline: null, |
| 23 expectedTimelineDescription: "null", |
22 description: "with null effect and null timeline" | 24 description: "with null effect and null timeline" |
23 }, | 25 }, |
24 { | 26 { |
25 effect: null, | 27 effect: null, |
26 timeline: document.timeline, | 28 timeline: document.timeline, |
| 29 expectedTimeline: document.timeline, |
| 30 expectedTimelineDescription: "document.timeline", |
27 description: "with null effect and non-null timeline" | 31 description: "with null effect and non-null timeline" |
28 }, | 32 }, |
29 { | 33 { |
| 34 effect: null, |
| 35 expectedTimeline: document.timeline, |
| 36 expectedTimelineDescription: "document.timeline", |
| 37 description: "with null effect and no timeline parameter" |
| 38 }, |
| 39 { |
30 effect: gEffect, | 40 effect: gEffect, |
31 timeline: null, | 41 timeline: null, |
| 42 expectedTimeline: null, |
| 43 expectedTimelineDescription: "null", |
32 description: "with non-null effect and null timeline" | 44 description: "with non-null effect and null timeline" |
33 }, | 45 }, |
34 { | 46 { |
35 effect: gEffect, | 47 effect: gEffect, |
36 timeline: document.timeline, | 48 timeline: document.timeline, |
| 49 expectedTimeline: document.timeline, |
| 50 expectedTimelineDescription: "document.timeline", |
37 description: "with non-null effect and non-null timeline" | 51 description: "with non-null effect and non-null timeline" |
38 }, | 52 }, |
| 53 { |
| 54 effect: gEffect, |
| 55 expectedTimeline: document.timeline, |
| 56 expectedTimelineDescription: "document.timeline", |
| 57 description: "with non-null effect and no timeline parameter" |
| 58 }, |
39 ]; | 59 ]; |
40 | 60 |
41 gTestArguments.forEach(function(args) { | 61 gTestArguments.forEach(function(args) { |
42 test(function(t) { | 62 test(function(t) { |
43 var animation = new Animation(args.effect, args.timeline); | 63 var animation = new Animation(args.effect, args.timeline); |
44 | 64 |
45 assert_not_equals(animation, null, | 65 assert_not_equals(animation, null, |
46 "An animation sohuld be created"); | 66 "An animation sohuld be created"); |
47 assert_equals(animation.effect, args.effect, | 67 assert_equals(animation.effect, args.effect, |
48 "Animation returns the same effect passed to " + | 68 "Animation returns the same effect passed to " + |
49 "the Constructor"); | 69 "the Constructor"); |
50 assert_equals(animation.timeline, args.timeline, | 70 assert_equals(animation.timeline, args.expectedTimeline, |
51 "Animation returns the same timeline passed to " + | 71 "Animation timeline should be " + args.expectedTimelineDescrip
tion); |
52 "the Constructor"); | |
53 assert_equals(animation.playState, "idle", | 72 assert_equals(animation.playState, "idle", |
54 "Animation.playState should be initially 'idle'"); | 73 "Animation.playState should be initially 'idle'"); |
55 }, "Animation can be constructed " + args.description); | 74 }, "Animation can be constructed " + args.description); |
56 }); | 75 }); |
57 | 76 |
58 test(function(t) { | 77 test(function(t) { |
59 var effect = new KeyframeEffectReadOnly(null, | 78 var effect = new KeyframeEffectReadOnly(null, |
60 { left: ["10px", "20px"] }, | 79 { left: ["10px", "20px"] }, |
61 { duration: 10000, | 80 { duration: 10000, |
62 fill: "forwards" }); | 81 fill: "forwards" }); |
63 var anim = new Animation(effect, document.timeline); | 82 var anim = new Animation(effect, document.timeline); |
64 anim.pause(); | 83 anim.pause(); |
65 assert_equals(effect.getComputedTiming().progress, 0.0); | 84 assert_equals(effect.getComputedTiming().progress, 0.0); |
66 anim.currentTime += 5000; | 85 anim.currentTime += 5000; |
67 assert_equals(effect.getComputedTiming().progress, 0.5); | 86 assert_equals(effect.getComputedTiming().progress, 0.5); |
68 anim.finish(); | 87 anim.finish(); |
69 assert_equals(effect.getComputedTiming().progress, 1.0); | 88 assert_equals(effect.getComputedTiming().progress, 1.0); |
70 }, "Animation constructed by an effect with null target runs normally"); | 89 }, "Animation constructed by an effect with null target runs normally"); |
71 | 90 |
| 91 async_test(function(t) { |
| 92 var iframe = document.createElement('iframe'); |
| 93 |
| 94 iframe.addEventListener('load', t.step_func(function() { |
| 95 var div = createDiv(t, iframe.contentDocument); |
| 96 var effect = new KeyframeEffectReadOnly(div, null, 10000); |
| 97 var anim = new Animation(effect); |
| 98 assert_equals(anim.timeline, document.timeline); |
| 99 iframe.remove(); |
| 100 t.done(); |
| 101 })); |
| 102 |
| 103 document.body.appendChild(iframe); |
| 104 }, "Animation constructed with a keyframe that target element is in iframe"); |
| 105 |
72 </script> | 106 </script> |
73 </body> | 107 </body> |
OLD | NEW |