web-animations / web-animations-js-legacy

The original emulator of the Web Animations specification. Please use web-animations-js instead:
https://github.com/web-animations/web-animations-js
Apache License 2.0
707 stars 84 forks source link

_pauseAnimationsForTesting incorrectly changes player currentTime #628

Open ericwilligers opened 10 years ago

ericwilligers commented 10 years ago

If a player does not have start time 0, and/or the player does not have playback rate 1, calling document.timeline._pauseAnimationsForTesting with the current timeline time will change the player's currentTime, and will change the animated element's computed style.

var target = document.getElementById('target');

var targetPlayer;

window.setTimeout(function() {
  var keyframes = [
    { width: '200px'},
    { width: '300px'}
  ];
  targetPlayer = target.animate(keyframes, 5000);
  targetPlayer.playbackRate = 0.25;
}, 2000);

function describeTarget() {
  console.log('document.timeline.currentTime = ' + document.timeline.currentTime);
  console.log('targetPlayer.startTime = ' + targetPlayer.startTime);
  console.log('targetPlayer.currentTime = ' + targetPlayer.currentTime);
  console.log('getComputedStyle(target).width = ' + getComputedStyle(target).width);
}

window.setTimeout(function() {
  describeTarget();
  var currentTime = document.timeline.currentTime;
  document.timeline._pauseAnimationsForTesting(currentTime);
  console.log('*** AFTER CALLING document.timeline._pauseAnimationsForTesting('+currentTime+') ***');
  describeTarget();

}, 4000);

leads to (with numbers rounded)

document.timeline.currentTime = 4000
targetPlayer.startTime = 2000
targetPlayer.currentTime = 500
getComputedStyle(target).width = 210
*** AFTER CALLING document.timeline._pauseAnimationsForTesting(4000) ***
document.timeline.currentTime = 4000
targetPlayer.startTime = 2000
targetPlayer.currentTime = 4000
getComputedStyle(target).width = 280