Bug 283981 – Web Inspector: Crash when opened with CSS Variable @keyframes Animation

• Status: NEW
• Component: Web Inspector

Created attachment 473444 [details]
Crash log from Safari Technical Preview

When there's a CSS animation that animates a CSS custom property (CSS Variable) (with or without an `@property` declaration), the browser will crash when Web Inspector gets opened and the animation is triggered.

Tested on Safari 18.1.1 and Safari Technology Preview (Release 208, Safari 18.2, WebKit 20621.1.5.1).

CodePen example: https://codepen.io/shshaw/pen/WbeQOJo

Sample Code:

```
@property --angle {
  inherits: false;
  initial-value: 0turn;
  syntax: "<angle>";
}

.button {
  font-size: 2rem;
  border-radius: 0.25em;
  padding: 0.4em 0.7em;
  margin: 5px 0;
  display: inline-block;
  background: red;
  animation: varAnim 1s linear infinite paused;
}

.button:hover {
  animation-play-state: running;
}

@keyframes varAnim {
  to {
    background: purple;
    /* It doesn't seem to matter what the variable is or if it has the @property declaration. Any kind of custom property animation causes a crash. */
    --angle: 1turn;
  }
}
```

Noting that it doesn't seem to matter if the variable is actually used for anything. Just the presence of a CSS Variable in the `@keyframes` triggers the crash when dev tools is opened. There seems to be a relation with the `animation-play-state` `paused`/`running` change as well.

Video demonstration: https://twitter.com/shshaw/status/1863999886959534469

[Radar WebKit Bug Importer]

<rdar://problem/140880870>