607381 - FireFox 4 does not accept camelCase syntax when adding transition styles prepended with 'moz' using JavaScript.

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Kyle Olson]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.18.1 (KHTML, like Gecko) Version/5.0.2 Safari/533.18.5
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b6) Gecko/20100101 Firefox/4.0b6

FireFox 4 beta accepts adding transition property styles (and other CSS Transition styles) using the following syntaxes in JavaScript:
element.style.MozTransitionProperty
element.style.TransitionProperty
element.style.transitionProperty

But it does not accept:
element.style.mozTransitionProperty

(With a lowercase “m”).


Reproducible: Always

Steps to Reproduce:
1. Add a transition style to an element in JavaScript using element.style.mozTransitionProperty, for instance. Also add a transition-duration.
2. Try to animate that element by changing the property set as the transition-property.
3. Notice the element does not animate.
4. Try setting the style with the syntax:  element.style.MozTransitionProperty (with a capitalized first character).
5. Try animating that property again.
6. Observe it working as expected.

(View URL attached to see my test case)
Actual Results:  
“MozTransitionProperty” works, but “mozTransitionProperty” does not.

Expected Results:  
both syntaxes: “MozTransitionProperty” and “mozTransitionProperty” should work.

For consistency’s sake, if “fontStyle” works, then “mozTransitionProperty” should work as well. This camelCase syntax is pretty widely accepted across many browsers, including FireFox in any other instance I’ve tested.

Furthermore, WebKit, which defined the standard for CSS Transitions, uses the camelCase syntax for adding transition styles to elements through JavaScript (e.g. “webkitTransitionProperty”) along with the CamelCase (with capital first character) syntax (e.g. “WebkitTransitionProperty”). In the interest of building a better web, implementing new standards in your software should not be drastically different than existing implementations of those same same standards.

Comment 1

[j.j.]

The rule to map CSS property names into IDL attributes is plain and simple:
Any "-" appearing in the property name is removed and the following letter is uppercased.

This is the same with *any* CSS property, with or without -moz-prefix.
There is no special rule for transitions and should not be.