1423411 - Rewrite test cases in test_animation-pausing.html with checking playState instead of computed margin style value

Status: NEW

(Core :: DOM: Animation, enhancement, P4)

Description

[Hiroyuki Ikezoe (:hiro)]

From bug 1423078 comment 8;

I think what this test wants to do, is:

1. Use play() to override animation-play-state
2. Make animation-play-state running
3. Make animation-play-state paused
4. Check that the animation is paused.

It's only at (4)--where we're looking at the value of margin-left--that we actually care about how many frames we've rendered.

Although, so long as we're determining if we're paused based on the marginLeft, it would be good to make sure we wait long enough at (1) for the value to become non-zero.

Ideally we should rewrite this test as:

  var animation = div.getAnimations()[0];
  assert_equals(getMarginLeft(cs), 0,
                'Initial value of margin-left is zero');

  // Override animation-play-state using API
  animation.play();
  assert_equals(
    animation.playState,
    'running',
    'Should be running after calling play()'
  );

  // Make animation-play-state also running
  div.style.animationPlayState = 'running';
  cs.animationPlayState; // Trigger style resolution
  assert_equals(
    animation.playState,
    'running',
    'Should still be running after setting animation-play-state: running'
  );

  // Then make animation-play-state paused
  div.style.animationPlayState = 'running';
  assert_equals(animation.playState, 'paused');

If for some reason we need to keep using marginLeft then I think this should
probably be:

  var animation = div.getAnimations()[0];
  assert_equals(getMarginLeft(cs), 0,
                'Initial value of margin-left is zero');

  // Override animation-play-state using API
  animation.play();

  var previousAnimVal;

  return animation.ready.then(waitForNextFrame).then(function() {
    previousAnimVal = getMarginLeft(cs);
    assert_greater_than(previousAnimVal, 0,
                        'Animation should be moved past its first frame');
    // Make animation-play-state also running
    div.style.animationPlayState = 'running';
    cs.animationPlayState; // Trigger style resolution

    // Make animation-play-state paused
    div.style.animationPlayState = 'paused';
    return animation.ready;
  }).then(waitForNextFrame).then(function() {
    assert_equals(getMarginLeft(cs), previousAnimVal,
                  'Animated value of margin-left does not change when'
                  + ' paused by style');
  });