Closed Bug 1360768 Opened 5 years ago Closed 4 years ago

CSS Animation timing properties do not accept calc()

Categories

(Core :: CSS Parsing and Computation, defect, P3)

defect

Tracking

()

RESOLVED FIXED
Tracking Status
firefox57 --- fixed
firefox58 --- fixed
firefox59 --- fixed

People

(Reporter: svincent, Unassigned)

References

(Blocks 2 open bugs)

Details

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