Bug 108965 – Keyframe ease written in shorthand is not applied to animation

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

I'm building a web app which outputs CSS animations for the user.  When the insertRule method inserts a keyframe rule into the document, the -webkit-animation-timing-functions are converted to shorthand -webkit-animation.  The dynamically created animations are then saved out to HTML to view in a browser.  The following CSS is parsed and -webkit-animation-timing-function is in the document style sheet as declared, but the easing is not applied to the animation:

@-webkit-keyframes slide {
  0% {
    left: 0px;
    -webkit-animation: ease-out;
  }
  33% {
    left: 300px;
    -webkit-animation: ease-in;
  }
  67% {
    left: 0px;
    -webkit-animation: ease-out;
  }
  100% {
    left: 300px;
  }
}

Step to Repro:
1. Open the 3 test files in the browser.

Actual Behavior:
The static shorthand test fails to apply the easing to the keyframes, but the longhand and dynamically inserted shorthand work.  The dynamically added rules are converted to shorthand when insertRule is used, but the animation still plays.  However, if the document is saved using the cssText and re-opened, the shorthanded easing isn't applied.

Expected Behavior:
Either insertRule should not convert properties to shorthand if they are in a keyframe rule, or the animation renderer should understand shorthand values in the keyframe rule.

[Radar WebKit Bug Importer]

<rdar://problem/13635883>

[Simon Fraser (smfr)]

Can you please attach the 3 test files required to reproduce this bug?

[Simon Fraser (smfr)]

Created attachment 197694 [details]
Testcase

[Simon Fraser (smfr)]

This happens because StylePropertySet::asText() is folding all the longhands into shorthands, but I don't know why.

[Simon Fraser (smfr)]

So for most longhand properties,  value = getPropertyValue(shorthandPropertyID); returns null so it refuses to serialize with the shorthand. But for animation properties, we go through getLayeredShorthandValue() which doesn't seem to do the right thing.

[Ahmad Saleem]

I updated the test slightly to remove -webkit- prefixes from keyframe and animation.

Link - https://jsfiddle.net/n2v59g1L/show

These are all browsers output:

*** Safari 15.6.1 on macOS 12.5.1 ***

Inserted @keyframes test { 0% { width: 10px; animation-timing-function: ease; }}
Got @-webkit-keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

*** Safari Technology Preview 151 ***

Inserted @keyframes test { 0% { width: 10px; animation-timing-function: ease; }}
Got @-webkit-keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

*** Firefox Nightly 105 ***

Inserted @keyframes test { 0% { width: 10px; animation-timing-function: ease; }}
Got @keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

*** Chrome Canary 106 ***

Inserted @keyframes test { 0% { width: 10px; animation-timing-function: ease; }}
Got @keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

______

Just wanted to share updated results. Thanks!

[Ahmad Saleem]

(In reply to Ahmad Saleem from comment #6)
> I updated the test slightly to remove -webkit- prefixes from keyframe and
> animation.
> 
> Link - https://jsfiddle.net/n2v59g1L/show
> 
> These are all browsers output:
> 
> *** Safari 15.6.1 on macOS 12.5.1 ***
> 
> Inserted @keyframes test { 0% { width: 10px; animation-timing-function:
> ease; }}
> Got @-webkit-keyframes test { 0% { width: 10px; animation-timing-function:
> ease; } }
> 
> *** Safari Technology Preview 151 ***
> 
> Inserted @keyframes test { 0% { width: 10px; animation-timing-function:
> ease; }}
> Got @-webkit-keyframes test { 0% { width: 10px; animation-timing-function:
> ease; } }
> 
> *** Firefox Nightly 105 ***
> 
> Inserted @keyframes test { 0% { width: 10px; animation-timing-function:
> ease; }}
> Got @keyframes test { 0% { width: 10px; animation-timing-function: ease; } }
> 
> *** Chrome Canary 106 ***
> 
> Inserted @keyframes test { 0% { width: 10px; animation-timing-function:
> ease; }}
> Got @keyframes test { 0% { width: 10px; animation-timing-function: ease; } }
> 
> ______
> 
> Just wanted to share updated results. Thanks!

Based on attached testcase:

Safari Technology Preview 157 now shows:

Inserted @-webkit-keyframes test { 0% { width: 10px; -webkit-animation-timing-function: ease; }}
Got @keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

Chrome Canary 109:

Inserted @-webkit-keyframes test { 0% { width: 10px; -webkit-animation-timing-function: ease; }}
Got @-webkit-keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

Firefox Nightly 108:

Inserted @-webkit-keyframes test { 0% { width: 10px; -webkit-animation-timing-function: ease; }}
Got @keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

____ Using jsfiddle______

Safari Technology Preview 157:

Inserted @keyframes test { 0% { width: 10px; animation-timing-function: ease; }}
Got @keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

Chrome Canary 109:

Inserted @keyframes test { 0% { width: 10px; animation-timing-function: ease; }}
Got @keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

Firefox Nightly 108:

Inserted @keyframes test { 0% { width: 10px; animation-timing-function: ease; }}
Got @keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

______

Chrome is still pushing -webkit- prefixed output while now STP157 matches Firefox Nightly 109.

[Ahmad Saleem]

Using attached testcase:

WebKit ToT:

Inserted @-webkit-keyframes test { 0% { width: 10px; -webkit-animation-timing-function: ease; }}
Got @keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

Firefox Nightly 113:

Inserted @-webkit-keyframes test { 0% { width: 10px; -webkit-animation-timing-function: ease; }}
Got @keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

Chrome Canary 113:

Inserted @-webkit-keyframes test { 0% { width: 10px; -webkit-animation-timing-function: ease; }}
Got @-webkit-keyframes test { 0% { width: 10px; animation-timing-function: ease; } }

________

Do we need to track it further or we can close this?

[Antoine Quint]

Thanks for looking into this Ahmad. I believe we should close this.