<!DOCTYPE html>
<meta charset=utf-8>
<title>Test chrome-only MutationObserver animation notifications</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<script src="../testcommon.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
<style>
@keyframes anim {
  to { transform: translate(100px); }
}
@keyframes anotherAnim {
  to { transform: translate(0px); }
}
#target {
  width: 100px;
  height: 100px;
  background-color: yellow;
  line-height: 16px;
}
</style>
<div id=container><div id=target></div></div>
<script>
var div = document.getElementById("target");
var gRecords = [];
var gObserver = new MutationObserver(function(newRecords) {
  gRecords.push(...newRecords);
});

// Asynchronous testing framework based on layout/style/test/animation_utils.js.

var gTests = [];
var gCurrentTestName;

function addAsyncAnimTest(aName, aOptions, aTestGenerator) {
  aTestGenerator.testName = aName;
  aTestGenerator.options = aOptions || {};
  gTests.push(aTestGenerator);
}

function runAsyncTest(aTestGenerator) {
  return waitForFrame().then(function() {
    var generator;

    function step(arg) {
      var next;
      try {
        next = generator.next(arg);
      } catch (e) {
        return Promise.reject(e);
      }
      if (next.done) {
        return Promise.resolve(next.value);
      } else {
        return Promise.resolve(next.value).then(step);
      }
    }

    var subtree = aTestGenerator.options.subtree;

    gCurrentTestName = aTestGenerator.testName;
    if (subtree) {
      gCurrentTestName += ":subtree";
    }

    gRecords = [];
    gObserver.disconnect();
    gObserver.observe(aTestGenerator.options.observe,
                      { animations: true, subtree: subtree});

    generator = aTestGenerator();
    return step();
  });
};

function runAllAsyncTests() {
  return gTests.reduce(function(sequence, test) {
    return sequence.then(() => runAsyncTest(test));
  }, Promise.resolve());
}

// Wrap is and ok with versions that prepend the current sub-test name
// to the assertion description.
var old_is = is, old_ok = ok;
is = function(a, b, message) {
  if (gCurrentTestName && message) {
    message = `[${gCurrentTestName}] ${message}`;
  }
  old_is(a, b, message);
}
ok = function(a, message) {
  if (gCurrentTestName && message) {
    message = `[${gCurrentTestName}] ${message}`;
  }
  old_ok(a, message);
}

// Adds an event listener and returns a Promise that is resolved when the
// event listener is called.
function await_event(aElement, aEventName) {
  return new Promise(function(aResolve) {
    function listener(aEvent) {
      aElement.removeEventListener(aEventName, listener);
      aResolve();
    }
    aElement.addEventListener(aEventName, listener, false);
  });
}

function assert_record_list(actual, expected, desc, index, listName) {
  is(actual.length, expected.length, `${desc} - record[${index}].${listName} length`);
  if (actual.length != expected.length) {
    return;
  }
  for (var i = 0; i < actual.length; i++) {
    ok(actual.indexOf(expected[i]) != -1,
       `${desc} - record[${index}].${listName} contains expected Animation`);
  }
}

function assert_records(expected, desc) {
  var records = gRecords;
  gRecords = [];
  is(records.length, expected.length, `${desc} - number of records`);
  if (records.length != expected.length) {
    return;
  }
  for (var i = 0; i < records.length; i++) {
    assert_record_list(records[i].addedAnimations, expected[i].added, desc, i, "addedAnimations");
    assert_record_list(records[i].changedAnimations, expected[i].changed, desc, i, "changedAnimations");
    assert_record_list(records[i].removedAnimations, expected[i].removed, desc, i, "removedAnimations");
  }
}

// -- Tests ------------------------------------------------------------------

// We run all tests first targeting the div and observing the div, then again
// targeting the div and observing its parent while using the subtree:true
// MutationObserver option.

[
  { observe: div,            target: div, subtree: false },
  { observe: div.parentNode, target: div, subtree: true  },
].forEach(function(aOptions) {

  var e = aOptions.target;

  // Test that starting a single transition that completes normally
  // dispatches an added notification and then a removed notification.
  addAsyncAnimTest("single_transition", aOptions, function*() {
    // Start a transition.
    e.style = "transition: background-color 100s; background-color: lime;";

    // Register for the end of the transition.
    var transitionEnd = await_event(e, "transitionend");

    // The transition should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after transition start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                   "records after transition start");

    // Advance until near the end of the transition, then wait for it to finish.
    animations[0].currentTime = 99900;
    yield transitionEnd;

    // After the transition has finished, the Animation should disappear.
    is(e.getAnimations().length, 0,
       "getAnimations().length after transition end");

    // Wait for the change MutationRecord for seeking the Animation to be
    // delivered, followed by the the removal MutationRecord.
    yield waitForFrame();
    assert_records([{ added: [], changed: animations, removed: [] },
                    { added: [], changed: [], removed: animations }],
                   "records after transition end");

    e.style = "";
  });

  // Test that starting a single transition that is cancelled by resetting
  // the transition-property property dispatches an added notification and
  // then a removed notification.
  addAsyncAnimTest("single_transition_cancelled_property", aOptions, function*() {
    // Start a long transition.
    e.style = "transition: background-color 100s; background-color: lime;";

    // The transition should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after transition start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                   "records after transition start");

    // Cancel the transition by setting transition-property.
    e.style.transitionProperty = "none";

    // Wait for the single MutationRecord for the Animation removal to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                   "records after transition end");

    e.style = "";
  });

  // Test that starting a single transition that is cancelled by setting
  // style to the currently animated value dispatches an added
  // notification and then a removed notification.
  addAsyncAnimTest("single_transition_cancelled_value", aOptions, function*() {
    // Start a long transition with a predictable value.
    e.style = "transition: background-color 100s steps(2, end) -51s; background-color: lime;";

    // The transition should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after transition start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                   "records after transition start");

    // Cancel the transition by setting the current animation value.
    var value = "rgb(128, 255, 0)";
    is(getComputedStyle(e).backgroundColor, value, "half-way transition value");
    e.style.backgroundColor = value;

    // Wait for the single MutationRecord for the Animation removal to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                   "records after transition end");

    e.style = "";
  });

  // Test that starting a single transition that is cancelled by setting
  // style to a non-interpolable value dispatches an added notification
  // and then a removed notification.
  addAsyncAnimTest("single_transition_cancelled_noninterpolable", aOptions, function*() {
    // Start a long transition.
    e.style = "transition: line-height 100s; line-height: 100px;";

    // The transition should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after transition start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                   "records after transition start");

    // Cancel the transition by setting line-height to a non-interpolable value.
    e.style.lineHeight = "normal";

    // Wait for the single MutationRecord for the Animation removal to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                   "records after transition end");

    e.style = "";
  });

  // Test that starting a single transition and then reversing it
  // dispatches an added notification, then a simultaneous removed and
  // added notification, then a removed notification once finished.
  addAsyncAnimTest("single_transition_reversed", aOptions, function*() {
    // Start a long transition.
    e.style = "transition: background-color 100s step-start; background-color: lime;";

    // The transition should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after transition start");

    var firstAnimation = animations[0];

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: [firstAnimation], changed: [], removed: [] }],
                   "records after transition start");

    // Wait for the Animation to be playing, then seek well into
    // the transition.
    yield firstAnimation.ready;
    firstAnimation.currentTime = 50 * MS_PER_SEC;

    // Reverse the transition by setting the background-color back to its
    // original value.
    e.style.backgroundColor = "yellow";

    // The reversal should cause the creation of a new Animation.
    animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after transition reversal");

    var secondAnimation = animations[0];

    ok(firstAnimation != secondAnimation,
       "second Animation should be different from the first");

    // Wait for the change Mutation record from seeking the first animation
    // to be delivered, followed by a subsequent MutationRecord for the removal
    // of the original Animation and the addition of the new Animation.
    yield waitForFrame();
    assert_records([{ added: [], changed: [firstAnimation], removed: [] },
                    { added: [secondAnimation], changed: [],
                      removed: [firstAnimation] }],
                   "records after transition reversal");

    // Cancel the transition.
    e.style.transitionProperty = "none";

    // Wait for the single MutationRecord for the Animation removal to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: [secondAnimation] }],
                   "records after transition end");

    e.style = "";
  });

  // Test that multiple transitions starting and ending on an element
  // at the same time get batched up into a single MutationRecord.
  addAsyncAnimTest("multiple_transitions", aOptions, function*() {
    // Start three long transitions.
    e.style = "transition-duration: 100s; " +
              "transition-property: color, background-color, line-height; " +
              "color: blue; background-color: lime; line-height: 24px;";

    // The transitions should cause the creation of three Animations.
    var animations = e.getAnimations();
    is(animations.length, 3, "getAnimations().length after transition starts");

    // Wait for the single MutationRecord for the Animation additions to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                   "records after transition starts");

    // Wait for the Animations to get going.
    yield animations[0].ready;
    is(animations.filter(p => p.playState == "running").length, 3,
       "number of running Animations");

    // Seek well into each animation.
    animations.forEach(p => p.currentTime = 50 * MS_PER_SEC);

    // Prepare the set of expected change MutationRecords, one for each
    // animation that was seeked.
    var seekRecords = animations.map(
      p => ({ added: [], changed: [p], removed: [] })
    );

    // Cancel one of the transitions by setting transition-property.
    e.style.transitionProperty = "background-color, line-height";

    var colorAnimation  = animations.filter(p => p.playState != "running");
    var otherAnimations = animations.filter(p => p.playState == "running");

    is(colorAnimation.length, 1,
       "number of non-running Animations after cancelling one");
    is(otherAnimations.length, 2,
       "number of running Animations after cancelling one");

    // Wait for the MutationRecords to be delivered: one for each animation
    // that was seeked, followed by one for the removal of the color animation.
    yield waitForFrame();
    assert_records(seekRecords.concat(
                    { added: [], changed: [], removed: colorAnimation }),
                   "records after color transition end");

    // Cancel the remaining transitions.
    e.style.transitionProperty = "none";

    // Wait for the MutationRecord for the other two Animation
    // removals to be delivered.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: otherAnimations }],
                   "records after other transition ends");

    e.style = "";
  });

  // Test that starting a single animation that completes normally
  // dispatches an added notification and then a removed notification.
  addAsyncAnimTest("single_animation", aOptions, function*() {
    // Start an animation.
    e.style = "animation: anim 100s;";

    // Register for the end of the animation.
    var animationEnd = await_event(e, "animationend");

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                   "records after animation start");

    // Advance until near the end of the animation, then wait for it to finish.
    animations[0].currentTime = 99900;
    yield animationEnd;

    // After the animation has finished, the Animation should disappear.
    is(e.getAnimations().length, 0,
       "getAnimations().length after animation end");

    // Wait for the change MutationRecord from seeking the Animation to
    // be delivered, followed by a further MutationRecord for the Animation
    // removal.
    yield waitForFrame();
    assert_records([{ added: [], changed: animations, removed: [] },
                    { added: [], changed: [], removed: animations }],
                   "records after animation end");

    e.style = "";
  });

  // Test that starting a single animation that is cancelled by resetting
  // the animation-name property dispatches an added notification and
  // then a removed notification.
  addAsyncAnimTest("single_animation_cancelled_name", aOptions, function*() {
    // Start a long animation.
    e.style = "animation: anim 100s;";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                   "records after animation start");

    // Cancel the animation by setting animation-name.
    e.style.animationName = "none";

    // Wait for the single MutationRecord for the Animation removal to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                   "records after animation end");

    e.style = "";
  });

  // Test that starting a single animation that is cancelled by updating
  // the animation-duration property dispatches an added notification and
  // then a removed notification.
  addAsyncAnimTest("single_animation_cancelled_duration", aOptions, function*() {
    // Start a long animation.
    e.style = "animation: anim 100s;";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                   "records after animation start");

    // Advance the animation by a second.
    animations[0].currentTime += 1 * MS_PER_SEC;

    // Cancel the animation by setting animation-duration to a value less
    // than a second.
    e.style.animationDuration = "0.1s";

    // Wait for the change MutationRecord from seeking the Animation to
    // be delivered, followed by a further MutationRecord for the Animation
    // removal.
    yield waitForFrame();
    assert_records([{ added: [], changed: animations, removed: [] },
                    { added: [], changed: [], removed: animations }],
                   "records after animation end");

    e.style = "";
  });

  // Test that starting a single animation that is cancelled by updating
  // the animation-delay property dispatches an added notification and
  // then a removed notification.
  addAsyncAnimTest("single_animation_cancelled_delay", aOptions, function*() {
    // Start a long animation.
    e.style = "animation: anim 100s;";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                   "records after animation start");

    // Cancel the animation by setting animation-delay.
    e.style.animationDelay = "-200s";

    // Wait for the single MutationRecord for the Animation removal to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                   "records after animation end");

    e.style = "";
  });

  // Test that starting a single animation that is cancelled by updating
  // the animation-fill-mode property dispatches an added notification and
  // then a removed notification.
  addAsyncAnimTest("single_animation_cancelled_fill", aOptions, function*() {
    // Start a short, filled animation.
    e.style = "animation: anim 100s forwards;";

    // Register for the end of the animation.
    var animationEnd = await_event(e, "animationend");

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                   "records after animation start");

    // Advance until near the end of the animation, then wait for it to finish.
    animations[0].currentTime = 99900;
    yield animationEnd;

    // The only MutationRecord at this point should be the change from
    // seeking the Animation.
    assert_records([{ added: [], changed: animations, removed: [] }],
                   "records after animation starts filling");

    // Cancel the animation by setting animation-fill-mode.
    e.style.animationFillMode = "none";

    // Wait for the single MutationRecord for the Animation removal to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                   "records after animation end");

    e.style = "";
  });

  // Test that starting a single animation that is cancelled by updating
  // the animation-iteration-count property dispatches an added notification
  // and then a removed notification.
  addAsyncAnimTest("single_animation_cancelled_iteration_count",
                   aOptions, function*() {
    // Start a short, repeated animation.
    e.style = "animation: anim 0.5s infinite;";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                   "records after animation start");

    // Advance the animation until we are past the first iteration.
    animations[0].currentTime += 1 * MS_PER_SEC;

    // The only MutationRecord at this point should be the change from
    // seeking the Animation.
    yield waitForFrame();
    assert_records([{ added: [], changed: animations, removed: [] }],
                   "records after seeking animations");

    // Cancel the animation by setting animation-iteration-count.
    e.style.animationIterationCount = "1";

    // Wait for the single MutationRecord for the Animation removal to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                   "records after animation end");

    e.style = "";
  });

  // Test that updating an animation property dispatches a changed notification.
  [
    { name: "duration",  prop: "animationDuration",       val: "200s"    },
    { name: "timing",    prop: "animationTimingFunction", val: "linear"  },
    { name: "iteration", prop: "animationIterationCount", val: "2"       },
    { name: "direction", prop: "animationDirection",      val: "reverse" },
    { name: "state",     prop: "animationPlayState",      val: "paused"  },
    { name: "delay",     prop: "animationDelay",          val: "-1s"     },
    { name: "fill",      prop: "animationFillMode",       val: "both"    },
  ].forEach(function(aChangeTest) {
    addAsyncAnimTest(`single_animation_change_${aChangeTest.name}`, aOptions, function*() {
      // Start a long animation.
      e.style = "animation: anim 100s;";

      // The animation should cause the creation of a single Animation.
      var animations = e.getAnimations();
      is(animations.length, 1, "getAnimations().length after animation start");

      // Wait for the single MutationRecord for the Animation addition to
      // be delivered.
      yield waitForFrame();
      assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");

      // Change a property of the animation such that it keeps running.
      e.style[aChangeTest.prop] = aChangeTest.val;

      // Wait for the single MutationRecord for the Animation change to
      // be delivered.
      yield waitForFrame();
      assert_records([{ added: [], changed: animations, removed: [] }],
                     "records after animation change");

      // Cancel the animation.
      e.style.animationName = "none";

      // Wait for the addition, change and removal MutationRecords to be delivered.
      yield waitForFrame();
      assert_records([{ added: [], changed: [], removed: animations }],
                      "records after animation end");

      e.style = "";
    });
  });

  // Test that calling finish() on a paused (but otherwise finished) animation
  // dispatches a changed notification.
  addAsyncAnimTest("finish_from_pause", aOptions, function*() {
    // Start a long animation
    e.style = "animation: anim 100s forwards";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");

    // Wait until the animation is playing.
    yield animations[0].ready;

    // Finish and pause.
    animations[0].finish();
    animations[0].pause();

    // Wait for the pause to complete.
    yield animations[0].ready;
    is(animations[0].playState, "paused",
       "playState after finishing and pausing");

    // We should have two MutationRecords for the Animation changes:
    // one for the finish, one for the pause.
    assert_records([{ added: [], changed: animations, removed: [] },
                    { added: [], changed: animations, removed: [] }],
                    "records after finish() and pause()");

    // Call finish() again.
    animations[0].finish();
    is(animations[0].playState, "finished",
       "playState after finishing from paused state");

    // Wait for the single MutationRecord for the Animation change to
    // be delivered. Even though the currentTime does not change, the
    // playState will change.
    yield waitForFrame();
    assert_records([{ added: [], changed: animations, removed: [] }],
                    "records after finish() and pause()");

    // Cancel the animation.
    e.style = "";

    // Wait for the single removal notification.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
  });

  // Test that calling finish() on a pause-pending (but otherwise finished)
  // animation dispatches a changed notification.
  addAsyncAnimTest("finish_from_pause_pending", aOptions, function*() {
    // Start a long animation
    e.style = "animation: anim 100s forwards";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");

    // Wait until the animation is playing.
    yield animations[0].ready;

    // Finish and pause.
    animations[0].finish();
    animations[0].pause();
    is(animations[0].playState, "pending",
       "playState after finishing and calling pause()");

    // Call finish() again to abort the pause
    animations[0].finish();
    is(animations[0].playState, "finished",
       "playState after finishing and calling pause()");

    // Wait for three MutationRecords for the Animation changes to
    // be delivered: one for each finish(), pause(), finish() operation.
    yield waitForFrame();
    assert_records([{ added: [], changed: animations, removed: [] },
                    { added: [], changed: animations, removed: [] },
                    { added: [], changed: animations, removed: [] }],
                    "records after finish(), pause(), finish()");

    // Cancel the animation.
    e.style = "";

    // Wait for the single removal notification.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
  });

  // Test that calling play() on a paused Animation dispatches a changed
  // notification.
  addAsyncAnimTest("play", aOptions, function*() {
    // Start a long, paused animation
    e.style = "animation: anim 100s paused";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");

    // Wait until the animation is ready
    yield animations[0].ready;

    // Play
    animations[0].play();

    // Wait for the single MutationRecord for the Animation change to
    // be delivered.
    yield animations[0].ready;
    assert_records([{ added: [], changed: animations, removed: [] }],
                    "records after play()");

    // Redundant play
    animations[0].play();

    // Wait to ensure no change is dispatched
    yield waitForFrame();
    assert_records([], "records after redundant play()");

    // Cancel the animation.
    e.style = "";

    // Wait for the single removal notification.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
  });

  // Test that calling play() on a finished Animation that fills forwards
  // dispatches a changed notification.
  addAsyncAnimTest("play_filling_forwards", aOptions, function*() {
    // Start a long animation with a forwards fill
    e.style = "animation: anim 100s forwards";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");

    // Wait until the animation is ready
    yield animations[0].ready;

    // Seek to the end
    animations[0].finish();

    // Wait for the single MutationRecord for the Animation change to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: [], changed: animations, removed: [] }],
                    "records after finish()");

    // Since we are filling forwards, calling play() should produce a
    // change record since the animation remains relevant.
    animations[0].play();

    // Wait for the single MutationRecord for the Animation change to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: [], changed: animations, removed: [] }],
                    "records after play()");

    // Cancel the animation.
    e.style = "";

    // Wait for the single removal notification.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
  });

  // Test that calling play() on a finished Animation that does *not* fill
  // forwards dispatches an addition notification.
  addAsyncAnimTest("play_after_finish", aOptions, function*() {
    // Start a long animation
    e.style = "animation: anim 100s";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");

    // Wait until the animation is ready
    yield animations[0].ready;

    // Seek to the end
    animations[0].finish();

    // Wait for the single MutationRecord for the Animation removal to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                    "records after finish()");

    // Since we are *not* filling forwards, calling play() is equivalent
    // to creating a new animation since it becomes relevant again.
    animations[0].play();

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after play()");

    // Cancel the animation.
    e.style = "";

    // Wait for the single removal notification.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
  });

  // Test that calling pause() on an Animation dispatches a changed
  // notification.
  addAsyncAnimTest("pause", aOptions, function*() {
    // Start a long animation
    e.style = "animation: anim 100s";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");

    // Wait until the animation is ready
    yield animations[0].ready;

    // Pause
    animations[0].pause();

    // Wait for the single MutationRecord for the Animation change to
    // be delivered.
    yield animations[0].ready;
    assert_records([{ added: [], changed: animations, removed: [] }],
                    "records after pause()");

    // Redundant pause
    animations[0].pause();

    // Wait to ensure no change is dispatched
    yield animations[0].ready;
    assert_records([], "records after redundant pause()");

    // Cancel the animation.
    e.style = "";

    // Wait for the single removal notification.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
  });

  // Test that calling pause() on an Animation that is pause-pending
  // does not dispatch an additional changed notification.
  addAsyncAnimTest("pause_while_pause_pending", aOptions, function*() {
    // Start a long animation
    e.style = "animation: anim 100s";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");

    // Wait until the animation is ready
    yield animations[0].ready;

    // Pause
    animations[0].pause();

    // We are now pause-pending, but pause again
    animations[0].pause();

    // We should only get a single change record
    yield animations[0].ready;
    assert_records([{ added: [], changed: animations, removed: [] }],
                    "records after pause()");

    // Cancel the animation.
    e.style = "";

    // Wait for the single removal notification.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
  });

  // Test that calling play() on an Animation that is pause-pending
  // dispatches a changed notification.
  addAsyncAnimTest("aborted_pause", aOptions, function*() {
    // Start a long animation
    e.style = "animation: anim 100s";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");

    // Wait until the animation is ready
    yield animations[0].ready;

    // Pause
    animations[0].pause();

    // We are now pause-pending. If we play() now, we will abort the pause
    animations[0].play();

    // We should get two change records
    yield animations[0].ready;
    assert_records([{ added: [], changed: animations, removed: [] },
                    { added: [], changed: animations, removed: [] }],
                    "records after aborting a pause()");

    // Cancel the animation.
    e.style = "";

    // Wait for the single removal notification.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
  });

  // Test that a non-cancelling change to an animation followed immediately by a
  // cancelling change will only send an animation removal notification.
  addAsyncAnimTest("coalesce_change_cancel", aOptions, function*() {
    // Start a long animation.
    e.style = "animation: anim 100s;";

    // The animation should cause the creation of a single Animation.
    var animations = e.getAnimations();
    is(animations.length, 1, "getAnimations().length after animation start");

    // Wait for the single MutationRecord for the Animation addition to
    // be delivered.
    yield waitForFrame();
    assert_records([{ added: animations, changed: [], removed: [] }],
                   "records after animation start");

    // Update the animation's delay such that it is still running.
    e.style.animationDelay = "-1s";

    // Then cancel the animation by updating its duration.
    e.style.animationDuration = "0.5s";

    // We should get a single removal notification.
    yield waitForFrame();
    assert_records([{ added: [], changed: [], removed: animations }],
                   "records after animation end");

    e.style = "";
  });

});

addAsyncAnimTest("tree_ordering", { observe: div, subtree: true }, function*() {
  // Add style for pseudo elements
  var extraStyle = document.createElement('style');
  document.head.appendChild(extraStyle);
  var sheet = extraStyle.sheet;
  var rules = { ".before::before": "animation: anim 100s;",
                ".after::after"  : "animation: anim 100s, anim 100s;" };
  for (var selector in rules) {
    sheet.insertRule(selector + '{' + rules[selector] + '}',
                     sheet.cssRules.length);
  }

  // Create a tree with two children:
  //
  //          div
  //       (::before)
  //       (::after)
  //        /     \
  //   childA      childB(::before)
  var childA = document.createElement("div");
  var childB = document.createElement("div");

  div.appendChild(childA);
  div.appendChild(childB);

  // Start an animation on each (using order: childB, div, childA)
  //
  // We include multiple animations on some nodes so that we can test batching
  // works as expected later in this test.
  childB.style = "animation: anim 100s";
  div.style    = "animation: anim 100s, anim 100s, anim 100s";
  childA.style = "animation: anim 100s, anim 100s";

  // Start animations targeting to pseudo element of div and childB.
  childB.classList.add("before");
  div.classList.add("after");
  div.classList.add("before");

  // Check all animations we have in this document
  var docAnims = document.getAnimations();
  is(docAnims.length, 10, "total animations");

  var divAnimations = div.getAnimations();
  var childAAnimations = childA.getAnimations();
  var childBAnimations = childB.getAnimations();
  var divBeforeAnimations =
    [ for (x of docAnims) if (x.effect.target.parentElement == div &&
                              x.effect.target.type == "::before") x ];
  var divAfterAnimations =
    [ for (x of docAnims) if (x.effect.target.parentElement == div &&
                              x.effect.target.type == "::after") x ];
  var childBPseudoAnimations =
    [ for (x of docAnims) if (x.effect.target.parentElement == childB) x ];

  // The order in which we get the corresponding records is currently
  // based on the order we visit these nodes when updating styles.
  //
  // That is because we don't do any document-level batching of animation
  // mutation records when we flush styles. We may introduce that in the
  // future but for now all we are interested in testing here is that the order
  // these records are dispatched is consistent between runs.
  //
  // We currently expect to get records in order div::after, childA, childB,
  // childB::before, div, div::before
  yield waitForFrame();
  assert_records([{ added: divAfterAnimations, changed: [], removed: [] },
                  { added: childAAnimations, changed: [], removed: [] },
                  { added: childBAnimations, changed: [], removed: [] },
                  { added: childBPseudoAnimations, changed: [], removed: [] },
                  { added: divAnimations, changed: [], removed: [] },
                  { added: divBeforeAnimations, changed: [], removed: [] }],
                 "records after simultaneous animation start");

  // The one case where we *do* currently perform document-level (or actually
  // timeline-level) batching is when animations are updated from a refresh
  // driver tick. In particular, this means that when animations finish
  // naturally the removed records should be dispatched according to the
  // position of the elements in the tree.

  // First, flatten the set of animations. we put the animations targeting to
  // pseudo elements last. (Actually, we don't care the order in the list.)
  var animations = [ ...divAnimations,
                     ...childAAnimations,
                     ...childBAnimations,
                     ...divBeforeAnimations,
                     ...divAfterAnimations,
                     ...childBPseudoAnimations ];

  // Fast-forward to *just* before the end of the animation.
  animations.forEach(animation => animation.currentTime = 99999);

  // Prepare the set of expected change MutationRecords, one for each
  // animation that was seeked.
  var seekRecords = animations.map(
    p => ({ added: [], changed: [p], removed: [] })
  );

  yield await_event(div, "animationend");

  // After the changed notifications, which will be dispatched in the order that
  // the animations were seeked, we should get removal MutationRecords in order
  // (div, div::before, div::after), childA, (childB, childB::before).
  // Note: The animations targeting to the pseudo element are appended after
  //       the animations of its parent element.
  divAnimations = [ ...divAnimations,
                    ...divBeforeAnimations,
                    ...divAfterAnimations ];
  childBAnimations = [ ...childBAnimations, ...childBPseudoAnimations ];
  assert_records(seekRecords.concat(
                   { added: [], changed: [], removed: divAnimations },
                   { added: [], changed: [], removed: childAAnimations },
                   { added: [], changed: [], removed: childBAnimations }),
                 "records after finishing");

  // Clean up
  div.classList.remove("before");
  div.classList.remove("after");
  div.style = "";
  childA.remove();
  childB.remove();
  extraStyle.remove();
});

// Run the tests.
SimpleTest.requestLongerTimeout(2);
SimpleTest.waitForExplicitFinish();

runAllAsyncTests().then(function() {
  SimpleTest.finish();
}, function(aError) {
  ok(false, "Something failed: " + aError);
});
</script>