1426648 - transitionend event is sometimes double dispatched

Status: RESOLVED INVALID

(Testing :: web-platform-tests, defect)

Description

[Xidorn Quan [:xidorn] UTC+10]

When enabling EventListener-invoke-legacy.html in bug 1351409, there is an issue uncovered by the test verify task that transitionend event can be dispatched twice in that test.

See https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=8c912df2f3a5bdb67b4abcac25bb9e6e65de848a&filter-classifiedState=unclassified&filter-resultStatus=testfailed&filter-resultStatus=busted&filter-resultStatus=exception

Comment 1

[Xidorn Quan [:xidorn] UTC+10]

Brian, any idea how this can happen?

Comment 2

[Brian Birtles (:birtles)]

The linked-to test failure doesn't show any failures so I can't be sure, but having a look at the test:

  elem.style.color = 'red';
  elem.style.transition = 'color 30ms';
  // --> Generates one transition from the current value of 'color' -> 'red'
  requestAnimationFrame(function() {
    elem.style.color = 'green';
    // --> Generates a second transition from 'red' -> 'green'
  });

Whether it actually triggers two transitions will depend on where the first bit of code is running in the event loop but I'm guessing it does here.

And if that transition ends before the next requestAnimationFrame runs (which is highly likely given it is only 30ms long) then you'll get two transitionend events. (Transition timing is updated before we restyle so the subsequent change to 'color' won't have a chance to cancel the original transition before we notice it has finished.)

Basically, you don't need the rAF callback. If you're afraid of no transition being generated because this all happens in the initial restyle for |elem| then you want to do:

  getComputedStyle(elem).color;
  elem.style.color = 'red';
  elem.style.transition = 'color 30ms';

Or simply add the rAF before setting the transition property.

Comment 3

[Xidorn Quan [:xidorn] UTC+10]

Thanks for answering. It seems this is an invalid bug, then. I'll update the patch in bug 1351409 according to your suggestion in comment 2.