v153 · dispatch timing

One rendering iteration, in order

Resizing the frame below crosses a media query breakpoint, whose listener starts a transition. Everything that happens next is recorded with the animation frame it landed in, so the sequence is the browser's, not a description of one.

Trigger a breakpoint crossing

What the browser did, in the order it did it
# what happened frame ms from the resize
Nothing recorded yet.
Press the button.

The frame column is the number of animation frame callbacks that had run when each entry was recorded. Two entries sharing a frame number were produced in the same rendering iteration; a rise between them means an iteration boundary was crossed.

Where each one belongs

These are the steps of HTML's "update the rendering", in order. The ones this run actually observed are marked.

The specification's order is fixed; what varies between engines is whether an event created during an early step is dispatched by the later step in the same pass. That is the whole of this change, and it is why the frame column matters more than the millisecond column.

see also