Bug 253032

Summary:	animation-name or @keyframe identifiers with quotes are recognized
Product:	WebKit	Reporter:	Ahmad Saleem <ahmad.saleem792>
Component:	Animations	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED WORKSFORME
Severity:	Normal	CC:	dino, graouts, graouts, koivisto
Priority:	P2
Version:	Safari Technology Preview
Hardware:	Unspecified
OS:	Unspecified

Description Ahmad Saleem 2023-02-27 14:45:39 PST

Hi Team,

I came cross following codepen from Chrome's Monorail and Safari Technology Preview 164 is matching Firefox Nightly 112 as of right now but Chrome Canary 113 is totally different:

CodePen Link - https://codepen.io/rupl/pen/BaEjPq?editors=110

*** Safari 16.3 ***

Only last two are pulsating.

*** Safari Technology Preview 164 ***

All are pulsating

*** Chrome Canary 113 ***

Only Green one is pulsating

*** Firefox Nightly 112 ***

All are pulsating

____

Chrome Bug - https://bugs.chromium.org/p/chromium/issues/detail?id=423424

Just wanted to raise to see if we have interop behavior or we are wrong, if latter, so we can track this and fix.

Thanks!

Comment 1 Antoine Quint 2023-02-28 01:48:20 PST

I think the CodePen is wrong and all the referenced material from it outdated.

The current spec for CSS Animations specifies <string> as valid values at https://w3c.github.io/csswg-drafts/css-animations/#typedef-keyframes-name:

<keyframes-name> = <custom-ident> | <string>

There is also this note specifically showing using strings as valid:

For example, the following two @keyframes rules have the same name, so the first will be ignored:
@keyframes foo { /* ... */ }
@keyframes "foo" { /* ... */ } 

I believe Chrome is incorrect while Firefox and Safari are correct.