b8d6ebbfa36bffda1ca5aac232548ae1fe78a8d0
[WebKit-https.git] / LayoutTests / imported / mozilla / css-transitions / test_setting-effect.html
1 <!doctype html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <meta charset=utf-8>
3 <script src="../../../resources/testharness.js"></script>
4 <script src="../../../resources/testharnessreport.js"></script>
5 <script src="../resources/testcommon.js"></script>
6 <body>
7 <div id="log"></div>
8 <script>
9 'use strict';
10
11 promise_test(function(t) {
12   var div = addDiv(t);
13   var watcher = new EventWatcher(t, div, [ 'transitionend',
14                                            'transitioncancel' ]);
15   div.style.left = '0px';
16
17   div.style.transition = 'left 100s';
18   flushComputedStyle(div);
19   div.style.left = '100px';
20
21   var transition = div.getAnimations()[0];
22   return transition.ready.then(function() {
23     transition.currentTime = 50 * MS_PER_SEC;
24     transition.effect = null;
25     assert_equals(transition.transitionProperty, 'left');
26     assert_equals(transition.playState, 'finished');
27     assert_equals(getComputedStyle(div).left, '100px');
28     return watcher.wait_for('transitionend');
29   });
30 }, 'Test for removing a transition effect');
31
32 promise_test(function(t) {
33   var div = addDiv(t);
34   var watcher = new EventWatcher(t, div, [ 'transitionend',
35                                            'transitioncancel' ]);
36   div.style.left = '0px';
37
38   div.style.transition = 'left 100s';
39   flushComputedStyle(div);
40   div.style.left = '100px';
41
42   var transition = div.getAnimations()[0];
43   return transition.ready.then(function() {
44     transition.currentTime = 50 * MS_PER_SEC;
45     transition.effect = new KeyframeEffect(div,
46                                            { marginLeft: [ '0px' , '100px'] },
47                                            100 * MS_PER_SEC);
48     assert_equals(transition.transitionProperty, 'left');
49     assert_equals(transition.playState, 'running');
50     assert_equals(getComputedStyle(div).left, '100px');
51     assert_equals(getComputedStyle(div).marginLeft, '50px');
52   });
53 }, 'Test for replacing the transition effect by a new keyframe effect');
54
55 promise_test(function(t) {
56   var div = addDiv(t);
57   var watcher = new EventWatcher(t, div, [ 'transitionend',
58                                            'transitioncancel' ]);
59   div.style.left = '0px';
60   div.style.width = '0px';
61
62   div.style.transition = 'left 100s';
63   flushComputedStyle(div);
64   div.style.left = '100px';
65
66   var transition = div.getAnimations()[0];
67   return transition.ready.then(function() {
68     transition.currentTime = 50 * MS_PER_SEC;
69     transition.effect = new KeyframeEffect(div,
70                                            { marginLeft: [ '0px' , '100px'] },
71                                            20 * MS_PER_SEC);
72     assert_equals(transition.playState, 'finished');
73   });
74 }, 'Test for setting a new keyframe effect with a shorter duration');
75
76 promise_test(function(t) {
77   var div = addDiv(t);
78   var watcher = new EventWatcher(t, div, [ 'transitionend',
79                                            'transitioncancel' ]);
80   div.style.left = '0px';
81   div.style.width = '0px';
82
83   div.style.transition = 'left 100s';
84   flushComputedStyle(div);
85   div.style.left = '100px';
86
87   var transition = div.getAnimations()[0];
88   assert_true(transition.pending);
89
90   transition.effect = new KeyframeEffect(div,
91                                          { marginLeft: [ '0px' , '100px'] },
92                                          100 * MS_PER_SEC);
93   assert_equals(transition.transitionProperty, 'left');
94   assert_true(transition.pending);
95
96   return transition.ready.then(function() {
97     assert_false(transition.pending);
98   });
99 }, 'Test for setting a new keyframe effect to a pending transition');
100
101 </script>
102 </body>