Bug 253032 - animation-name or @keyframe identifiers with quotes are recognized
Summary: animation-name or @keyframe identifiers with quotes are recognized
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2023-02-27 14:45 PST by Ahmad Saleem
Modified: 2023-02-28 01:48 PST (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
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.