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

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Josh Carpenter [:jcarpenter]]

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
}

Comment 1

[Jet Villegas (inactive)]

Dupe of 956573?

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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.

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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().

Comment 4

[Boris Zbarsky [:bzbarsky]]

> I think implicit units on '0' don't work inside of calc().

That's correct.  Per spec they do not.

Comment 5

[Brian Birtles (:birtles, Feb 26~ parental leave)]

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