CSS Animation timing properties do not accept calc()

RESOLVED FIXED

Status

()

defect
P3
normal
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: svincent, Unassigned)

Tracking

(Blocks 2 bugs)

Trunk
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox57 fixed, firefox58 fixed, firefox59 fixed)

Details

(Reporter)

Description

2 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0
Build ID: 20170413192749

Steps to reproduce:

1. Open https://codepen.io/svincent/pen/PmpxOb?editors=1100
2. Note that a red box appears in the center of a blue outlined box and moves right. You can use the Reset button to restart the animation to see the red box's position more clearly.
3. Uncomment Line 26 of the CSS and observe the animation's behavior. This line states "animation-delay: calc(var(--delay));"


Actual results:

The animation will start at the left edge of the blue container rather than the center.

The calculated values seem to be interpreted as invalid inputs even though they should essentially output an unmodified value.


Expected results:

The animation should behave exactly the same regardless of whether or not lines 25 or 26 are uncommented.
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
It doesn't seem to me there is anything related to variables at all. It seems animation-delay simply doesn't support calc(), and in this specific case, you can remove calc() and just use var(), which would work perfectly.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: CSS Animation timing properties do not accept calc() containing variables → CSS Animation timing properties do not accept calc()
Priority: -- → P3

Comment 2

2 years ago
Not dupe of bug 956573? Also, seems like blocking for bug 1376206.
This appears to be fixed by Stylo.
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
Version: 53 Branch → Trunk
You need to log in before you can comment on or make changes to this bug.