summaryrefslogtreecommitdiffstats
path: root/dom/animation/test/style/file_animation-setting-effect.html
blob: cf50cf2cee46498683c3837f83e51b8977004227 (plain)
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
<!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Tests for setting effects by using Animation.effect</title>
    <script src='../testcommon.js'></script>
  </head>
  <body>
    <script type='text/javascript'>

'use strict';

test(function(t) {
  var target = addDiv(t);
  var anim = new Animation();
  anim.effect = new KeyframeEffectReadOnly(target,
                                           { marginLeft: [ '0px', '100px' ] },
                                           100 * MS_PER_SEC);
  anim.currentTime = 50 * MS_PER_SEC;
  assert_equals(getComputedStyle(target).marginLeft, '50px');
}, 'After setting target effect on an animation with null effect, the ' +
   'animation still works');

test(function(t) {
  var target = addDiv(t);
  target.style.marginLeft = '10px';
  var anim = target.animate({ marginLeft: [ '0px', '100px' ] },
                            100 * MS_PER_SEC);
  anim.currentTime = 50 * MS_PER_SEC;
  assert_equals(getComputedStyle(target).marginLeft, '50px');

  anim.effect = null;
  assert_equals(getComputedStyle(target).marginLeft, '10px');
}, 'After setting null target effect, the computed style of the target ' +
   'element becomes the initial value');

test(function(t) {
  var target = addDiv(t);
  var animA = target.animate({ marginLeft: [ '0px', '100px' ] },
                             100 * MS_PER_SEC);
  var animB = new Animation();
  animA.currentTime = 50 * MS_PER_SEC;
  animB.currentTime = 20 * MS_PER_SEC;
  assert_equals(getComputedStyle(target).marginLeft, '50px',
                'original computed style of the target element');

  animB.effect = animA.effect;
  assert_equals(getComputedStyle(target).marginLeft, '20px',
                'new computed style of the target element');
}, 'After setting the target effect from an existing animation, the computed ' +
   'style of the target effect should reflect the time of the updated ' +
   'animation.');

test(function(t) {
  var target = addDiv(t);
  target.style.marginTop = '-10px';
  var animA = target.animate({ marginLeft: [ '0px', '100px' ] },
                             100 * MS_PER_SEC);
  var animB = target.animate({ marginTop: [ '0px', '100px' ] },
                             50 * MS_PER_SEC);
  animA.currentTime = 50 * MS_PER_SEC;
  animB.currentTime = 10 * MS_PER_SEC;
  assert_equals(getComputedStyle(target).marginLeft, '50px',
                'original margin-left of the target element');
  assert_equals(getComputedStyle(target).marginTop, '20px',
                'original margin-top of the target element');

  animB.effect = animA.effect;
  assert_equals(getComputedStyle(target).marginLeft, '10px',
                'new margin-left of the target element');
  assert_equals(getComputedStyle(target).marginTop, '-10px',
                'new margin-top of the target element');
}, 'After setting target effect with an animation to another animation which ' +
   'also has an target effect and both animation effects target to the same ' +
   'element, the computed style of this element should reflect the time and ' +
   'effect of the animation that was set');

test(function(t) {
  var targetA = addDiv(t);
  var targetB = addDiv(t);
  targetB.style.marginLeft = '-10px';
  var animA = targetA.animate({ marginLeft: [ '0px', '100px' ] },
                              100 * MS_PER_SEC);
  var animB = targetB.animate({ marginLeft: [ '0px', '100px' ] },
                              50 * MS_PER_SEC);
  animA.currentTime = 50 * MS_PER_SEC;
  animB.currentTime = 10 * MS_PER_SEC;
  assert_equals(getComputedStyle(targetA).marginLeft, '50px',
                'original margin-left of the first element');
  assert_equals(getComputedStyle(targetB).marginLeft, '20px',
                'original margin-left of the second element');

  animB.effect = animA.effect;
  assert_equals(getComputedStyle(targetA).marginLeft, '10px',
                'new margin-left of the first element');
  assert_equals(getComputedStyle(targetB).marginLeft, '-10px',
                'new margin-left of the second element');
}, 'After setting target effect with an animation to another animation which ' +
   'also has an target effect and these animation effects target to ' +
   'different elements, the computed styles of the two elements should ' +
   'reflect the time and effect of the animation that was set');

test(function(t) {
  var target = addDiv(t);
  var animA = target.animate({ marginLeft: [ '0px', '100px' ] },
                             50 * MS_PER_SEC);
  var animB = target.animate({ marginTop: [ '0px', '50px' ] },
                             100 * MS_PER_SEC);
  animA.currentTime = 20 * MS_PER_SEC;
  animB.currentTime = 30 * MS_PER_SEC;
  assert_equals(getComputedStyle(target).marginLeft, '40px');
  assert_equals(getComputedStyle(target).marginTop, '15px');

  var effectA = animA.effect;
  animA.effect = animB.effect;
  animB.effect = effectA;
  assert_equals(getComputedStyle(target).marginLeft, '60px');
  assert_equals(getComputedStyle(target).marginTop, '10px');
}, 'After swapping effects of two playing animations, both animations are ' +
   'still running with the same current time');

done();
    </script>
  </body>
</html>