[css-transitions-2][css-animations-2] The event order of the cancelled transitions/animations #11064

BorisChiou · 2024-10-22T02:36:54Z

Recently, we noticed a Gecko bug about the event order of transitioncancel in Bug 1923208. Per the example this bug, we may have a case when transitioncancel and transitionrun have the same scheduled time.

The example is something like this, when we are replacing a running transition:

<script>
function run() {
  target.style.marginLeft = "100px; // We start to run a transition.
  setTimeout(() => {
    target.style.marginLeft = "200px"; // We replace the running transition
  }, 500);
}
</script>
<body onload="run()">
  <div id="target" style="transition: margin-left 100s;"></div>
<body>

So basically, in Blink and Webkit, the event order when replacing the transition is:

transitioncancel, transitionrun, .transitionstart

However, in Gecko, the order is:

transitionrun, transitionstart, transitioncancel

These events have the same schedule time, and Gecko puts transitioncancel last.

Per spec, we use the following way to decide the order of them (copied from the comments in the bug):

If the scheduled event times are the same then the algorithm is to sort by composite order. That's going to mean we sort as follows:

  If A and B’s associated animations differ by class, sort by any inter-class composite order as defined for the corresponding classes.
  If A and B are still not sorted, sort by any class-specific composite order defined by the common class of A and B’s associated animations.
  If A and B are still not sorted, sort by the position of their associated animations in the global animation list.

Since the classes are the same ("transition"), we'll sort by the transition-specific composite order, and then we'll hit step 2 there because the cancelled transitions don't have the owning element:
```
  Otherwise, if only one of A or B has an owning element, let the animation with an owning element sort first.
```

So it seems we should put the event of the cancelled transition first because it doesn't have the owning element. However, this is not what we expected because we cancel the transition first, and then create the new transition to replace the old one.

We may need to update the spec words to address the case for cancelled transition, e.g. per Brian's suggestion in this Gecko bug:

When sorting cancel events, use the owning element and transition generation from when the transition was cancelled

Also, we have the similar issue for animationcanel (in css-animations-2), and we probably need to figure out how to use animation-name for a cancelled animation.

cc @birtles

The text was updated successfully, but these errors were encountered:

birtles · 2024-10-30T03:55:07Z

Also, we have the similar issue for animationcancel (in css-animations-2), and we probably need to figure out how to use animation-name for a cancelled animation.

I had a bit of a think about this. For CSS animations we sort by:

Tree order
Position in the animation-name list

So how do we handle cancel events from animations that have been cancelled? Consider a few examples of changes to animation-name list with regards to cancel event ordering:

Case A: If we change animation-name from a, b to c, b we want to ensure the cancel event for a sorts before the start event for c since that's consistent with transitions and conceptually it makes sense to cancel old animations before adding new ones.

Case B: If we change animation-name from a, b, c to c we would probably prefer that the cancel event for a sorts before the cancel event for b. It's not very important but we need to define some order and a, b seems the most obvious one here.

Case C: What if the animation-name is originally a, b, c, then, in a separate style change updated to b, a, c and then later updated again to c? It would probably be most consistent for the cancel event for b to the dispatched before the cancel event to a since b appeared before a in the animation-name at the point when they were cancelled.

Given that, I think we could sort as:

Sort by owning element
Sort by position in the animation list. If either animation has been cancelled, use the position they were in the list when they were cancelled but treat such positions as sorting before all positions in the current list.

So, for example, if both A and B have been cancelled, we just sort by the old positions in the list.

If only A or B has been cancelled, the cancelled animation sorts first.

If neither A nor B have been cancelled, we sort by the positions in the current list.

birtles · 2024-10-30T05:08:39Z

Proposed spec edits:

In CSS Transitions level 2, Animation composite order add some introductory text:

When determining the composite order to sort transition events where either or both of the events is a transitioncancel event, use the owning element and transition generation that were set immediately prior to cancelling the transition.
In CSS Animations level 2, Animation composite order add:

When determining the composite order in order to for sort animation events where either or both of the events is an animationcancel event, treat the CSS Animation(s) for which the event was generated as having an owning element corresponding to the owning element in use at the point where the CSS Animation was cancelled. Furthermore, use the position of the animation in the 'animation-name' property in effect at the time when the CSS Animation was cancelled sorting such that positions of cancelled animations sort before positions of animations that have not been cancelled.

That last sentence in particular probably needs work but that's the gist anyway.

See w3c#11064.

See #11064.

Add some tests for animation events sorting, per the spec issue: w3c/csswg-drafts#11064 (comment), and follow the spec: https://drafts.csswg.org/css-animations-2/#animation-composite-order Differential Revision: https://phabricator.services.mozilla.com/D230610 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1933281 gecko-commit: 495c6765094e8da352e02924e824e5876a64a223 gecko-reviewers: hiro

Add some tests for animation events sorting, per the spec issue: w3c/csswg-drafts#11064 (comment), and follow the spec: https://drafts.csswg.org/css-animations-2/#animation-composite-order Differential Revision: https://phabricator.services.mozilla.com/D230610

Add some tests for animation events sorting, per the spec issue: w3c/csswg-drafts#11064 (comment), and follow the spec: https://drafts.csswg.org/css-animations-2/#animation-composite-order Differential Revision: https://phabricator.services.mozilla.com/D230610 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1933281 gecko-commit: 495c6765094e8da352e02924e824e5876a64a223 gecko-reviewers: hiro

Add some tests for animation events sorting, per the spec issue: w3c/csswg-drafts#11064 (comment), and follow the spec: https://drafts.csswg.org/css-animations-2/#animation-composite-order Differential Revision: https://phabricator.services.mozilla.com/D230610

Add some tests for animation events sorting, per the spec issue: w3c/csswg-drafts#11064 (comment), and follow the spec: https://drafts.csswg.org/css-animations-2/#animation-composite-order Differential Revision: https://phabricator.services.mozilla.com/D230610 UltraBlame original commit: 495c6765094e8da352e02924e824e5876a64a223

BorisChiou added css-animations-2 css-transitions-2 labels Oct 22, 2024

birtles added a commit to birtles/csswg-drafts that referenced this issue Nov 7, 2024

[css-transitions-2] Define order for sorting transitioncancel events

ece8396

See w3c#11064.

birtles added a commit to birtles/csswg-drafts that referenced this issue Nov 11, 2024

[css-animations-2] Define order for sorting animationcancel events

a27f2bb

See w3c#11064.

birtles mentioned this issue Nov 11, 2024

[css-transitions-2][css-animations-2] Define order of transitioncancel and animationcancel events #11176

Merged

birtles closed this as completed in #11176 Nov 12, 2024

birtles added a commit that referenced this issue Nov 12, 2024

[css-transitions-2] Define order for sorting transitioncancel events

d4315ff

See #11064.

birtles added a commit that referenced this issue Nov 12, 2024

[css-animations-2] Define order for sorting animationcancel events

582de32

See #11064.

moz-wptsync-bot mentioned this issue Nov 29, 2024

[Gecko Bug 1933281] Add more wpt for events sorting. web-platform-tests/wpt#49434

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-transitions-2][css-animations-2] The event order of the cancelled transitions/animations #11064

[css-transitions-2][css-animations-2] The event order of the cancelled transitions/animations #11064

BorisChiou commented Oct 22, 2024 •

edited

Loading

birtles commented Oct 30, 2024

birtles commented Oct 30, 2024

[css-transitions-2][css-animations-2] The event order of the cancelled transitions/animations #11064

[css-transitions-2][css-animations-2] The event order of the cancelled transitions/animations #11064

Comments

BorisChiou commented Oct 22, 2024 • edited Loading

birtles commented Oct 30, 2024

birtles commented Oct 30, 2024

BorisChiou commented Oct 22, 2024 •

edited

Loading