1317514 - The timing of Animation.oncancel will differ depending on style sheet.

Status: NEW

(Core :: DOM: Animation, defect, P5)

Description

[Mantaroh Yoshinaga[:mantaroh]]

If we use Animation.oncancel API, these timing will differ depending on specified style sheet.

For example, we will create following animations:

---------------------------------------------------
targets = [ document.getElementById("div1"),
            document.getElementById("div1") ];
targets.forEach(div => {
  div.style.animation = 'anim 100s';
  getComputedStyle(div).animation; // flush
  div.getAnimations()[0].oncancel = function() {
    console.log(div.id + ":oncancel");
  };
});
.......after few seconds.......
targets.forEach(div => {
  div.style.display = "none";
});

Example page: http://output.jsbin.com/vaxiba/
---------------------------------------------------

The expected result is:
target1:oncancel
target2:oncancel

However actually result is:
target2:oncancel
target1:oncancel

If these div elements included other element (i.e: we create new div, then we append target1 and target2 to this new div element), we will get expected result.

In current implementation, CSS-Transition and CSS-Animation will sort based on element order before firing event.[1][2] However the implementation of Web Animation won't sort.[3]

[1] https://dxr.mozilla.org/mozilla-central/rev/47e0584afe0ab0b867412189c610b302b6ba0ea7/layout/style/nsAnimationManager.cpp#136
[2] https://dxr.mozilla.org/mozilla-central/rev/47e0584afe0ab0b867412189c610b302b6ba0ea7/layout/style/nsTransitionManager.cpp#336
[3] https://hg.mozilla.org/mozilla-central/filelog/47e0584afe0ab0b867412189c610b302b6ba0ea7/dom/animation/Animation.cpp

Perhaps I think that we will need to dispatch events using to delayed event dispatcher like CSS-Transition/Animation.

Comment 1

[Brian Birtles (:birtles)]

Is that a problem? As long as the result is deterministic I think it's ok? The only reason we added sorting to CSS transition/animation events is because otherwise the order was not deterministic (because we were sampling the animations by iterating through a hashmap).