Bug 243537

Summary:	'animation-foo' declarations in @keyframes should be parse error
Product:	WebKit	Reporter:	Ahmad Saleem <ahmad.saleem792>
Component:	Animations	Assignee:	Antoine Quint <graouts>
Status:	RESOLVED FIXED
Severity:	Normal	CC:	ap, bfulgham, dino, graouts, graouts, karlcow, rniwa, simon.fraser, webkit-bug-importer, zalan
Priority:	P2	Keywords:	BrowserCompat, InRadar
Version:	Safari 15
Hardware:	Mac (Apple Silicon)
OS:	macOS 12

Description Ahmad Saleem 2022-08-04 05:48:55 PDT

Hi Team,

I was looking through CSSOM bug cases where Webkit might be different compared to other browsers and came across following:

Test Case - https://jsfiddle.net/7d1Lyavc/

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

Chrome Commit - https://chromium.googlesource.com/chromium/src/+/936f2a7b9a4fc4184f37e9539ea65fef6fcf528a

*** STEPS TO REPRODUCE ***

Run the JSFiddle

>>> EXPECTED RESULT:

@keyframes foo {
0% {  }
100% {  }
}"

>> ACTUAL RESULT: (In Safari 15.6 on macOS 12.5)

@-webkit-keyframes foo { 
  0% { animation-name: bar; }
  100% { animation-name: baz; }
}

____

Other browsers (Firefox Nightly 105 and Chrome Canary 106) show "Expected Result".

Appreciate if this can be fixed so all browsers are aligned, if it is already fixed in Webkit Nightly or upstream, please mark this as duplicate.

Thanks!

Comment 1 Radar WebKit Bug Importer 2022-08-11 05:49:18 PDT

<rdar://problem/98503617>

Comment 2 Antoine Quint 2022-09-13 08:46:46 PDT

It looks like we're not stripping invalid rules when cssText is resolved.

Comment 3 Antoine Quint 2022-09-13 08:49:05 PDT

Also, what's with the -webkit-keyframes business?!?

Comment 4 Antoine Quint 2022-09-13 09:23:41 PDT

Oh, this is about not rejecting the animation-* properties when parsing @keyframes rules, see https://www.w3.org/TR/css-animations-1/#keyframes:

"The <declaration-list> inside of <keyframe-block> accepts any CSS property except those defined in this specification, but does accept the animation-timing-function property and interprets it specially."

This should be an easy fix.

Comment 5 Antoine Quint 2022-09-13 09:37:27 PDT

I bet we also don't implement this correctly:

"None of the properties interact with the cascade (so using !important on them is invalid and will cause the property to be ignored)."

Comment 6 Antoine Quint 2022-09-13 09:57:17 PDT

Handling of !important is working as expected actually.

Comment 7 Antoine Quint 2022-09-13 10:21:31 PDT

Pull request: https://github.com/WebKit/WebKit/pull/4318

Comment 8 EWS 2022-09-14 00:33:20 PDT

Committed 254468@main (edad56b68bd2): <https://commits.webkit.org/254468@main>

Reviewed commits have been landed. Closing PR #4318 and removing active labels.