Re: [csswg-drafts] [cssom] How safe is it really to shorthandify properties? (#8398)

> I think there might be others around web animations. I think if you transition a shorthand you might get multiple CSSTransition objects rather than one?

Yes, that's right. Not only will there be one `CSSTransition` per animated longhand but CSS Transitions will also dispatch one `TransitionEvent` per animated longhand (as exposed by `TransitionEvent`'s [`propertyName`](https://drafts.csswg.org/css-transitions/#Events-TransitionEvent-propertyName) member).

You can see an example here: https://codepen.io/birtles/pen/wvYrdPo

Web Animations is able to handle shorthands, but CSS Transitions is defined in terms of transitions on longhand properties hence the behavior here.

This is probably fine for `white-space` since we only just recently made it possible to transition discrete-value properties, but in general changing longhands to shorthands can break code that is expecting to find a `TransitionEvent` with a given `propertyName` or `CSSTransition` object for a given `transitionProperty`.

For example, code such as the following:

```js
// Trigger a transition on the white-space property
elem.style.whiteSpace = 'normal';
elem.style.transition = 'white-space 2s';
getComputedStyle(elem);
elem.style.whiteSpace = 'pre';

// Fetch the corresponding CSSTransition object
const whiteSpaceTransition = elem
  .getAnimations()
  .find(
    (anim) =>
      anim instanceof CSSTransition && anim.transitionProperty === 'white-space'
  );

whiteSpaceTransition.finished.then(() => {
  // Update the rest of the UI
});
```

This will break once `white-space` becomes a shorthand. Similar code can be written in terms of `TransitionEvent`s.

I suppose we could introduce some sort of mapping in CSS Transitions for "legacy longhands" to maintain the existing behavior.

There's also potential breakage in the keyframes exposed for CSS Animations since they end up getting expanded to longhands as part of the cascade.

-- 
GitHub Notification of comment by birtles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8398#issuecomment-1530746243 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 2 May 2023 01:26:06 UTC