strange threading in CSS animation events

[pat...@res3d.com]

Chrome appears to be executing my custom event handler while I'm
stepping over my code, which confuses me as I understood there to be
only one javascript thread per tab. Consider this:

           function animationEnd() {
               console.log('animationEnd')
           }

           debugger
           $('#something').bind('webkitAnimationEnd', animationEnd)
           $('#something').addClass('animated')

=============================

#something.animated {
   -webkit-animation-name: myanimation;
}


The interpreter breaks at the 'debugger' statement, and then as I step
over the 'addClass' line 'animationEnd()' is called before I click
'continue'. How is this possible if there is only one javascript
thread?

Thanks!

[Yury Semikhatsky]

You are right there is only one javascript thread in the render process. When

JS execution is paused we still need to process incoming commands to make

inspected page's UI responsive and to process DevTools' commands like

e.g. 'step over'. To make sure no JS is executed in the page while it is

paused we suspend all possible JS entry points including DOM event listeners

and timers. It looks as if CSS3 animation wasn't handled properly. I filed a bug

on it: https://bugs.webkit.org/show_bug.cgi?id=76377

You can add yourself to the CC list to track its progress.

Thanks,

Yury