Keyframe animations do not work when mixing units inside a calc()

RESOLVED INVALID

Status

()

defect
RESOLVED INVALID
4 years ago
2 years ago

People

(Reporter: jcarpenter, Unassigned)

Tracking

(Blocks 1 bug)

40 Branch
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Reporter

Description

4 years ago
While working on web VR CSS layout in Nightly, observed that keyframe animations do not play if units are mixed within a calc function. Specifically, combining undefined values (eg 0) with centimeters (eg 4cm), causes the animation to fail (does not play).

Observed in Nightly 40.0a1 (special CSS VR branch created by Vlad Vukicevic & Kevin Grandon)

I can reliably reproduce this bug.

- - - - - - - - - - - 

Fails (animation does not play):

@keyframes frameHide {
  from { transform: translate3d(0, 0, 0; }
  to { transform: translate3d(0, 0, calc(0 + 4cm); } <--- mixed units
}

Works (animation plays):

@keyframes frameHide {
  from { transform: translate3d(0, 0, 0; }
  to { transform: translate3d(0, 0, calc(0cm + 4cm); } <--- cm
}
Dupe of 956573?
Component: Layout → CSS Parsing and Computation
Flags: needinfo?(cam)
I don't think so.

This ought to go through, in StyleAnimationValue.cpp, StyleAnimationValue::AddWeighted() -> case eUnit_Transform -> AddTransformLists() -> case eCSSKeyword_translate3d -> AddTransformTranslate() -> AddCSSValueCanonicalCalc().

I'm not sure why it wouldn't work.
Oh, but actually, I think the problem is just that calc(0 + 4cm) is a syntax error.  I think implicit units on '0' don't work inside of calc().
> I think implicit units on '0' don't work inside of calc().

That's correct.  Per spec they do not.
Flags: needinfo?(cam)
Blocks: 1376206
From the spec:

  Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s
  aren’t supported in calc(). That is, width: `calc(0 + 5px);` is invalid, even though both `width: 0;` and
  `width: 5px;` are valid.[1]

[1] https://drafts.csswg.org/css-values-3/#calc-type-checking
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.