test_animation-setting-effect.html

Enable keyboard shortcuts

<!doctype html>

<html>

  <head>

    <meta charset=utf-8>

    <title>Tests for setting effects by using Animation.effect</title>

    <script src="/resources/testharness.js"></script>

    <script src="/resources/testharnessreport.js"></script>

    <script src='../testcommon.js'></script>

  </head>

  <body>

    <div id="log"></div>

    <script type='text/javascript'>

'use strict';

test(function(t) {

  var target = addDiv(t);

  var anim = new Animation();

  anim.effect = new KeyframeEffect(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');

    </script>

  </body>

</html>