421297 - New restriction on setting element Style properties

Status: UNCONFIRMED

(Core :: DOM: Core & HTML, defect, P5)

Description

[carglue a t ya hoo do tcom]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b3) Gecko/2008020514 Firefox/3.0b3
Build Identifier: 

Beginning with the FF3 betas, the previous way (shortcut) of setting a DOM element's style attribute directly from the JavaScript camel-case property no longer works.  Style properties must now be explicitly set using the style object's setProperty method:

Previous:
         this.editor.node.style.fontSize = fsize + 'px !important;';
         this.editor.node.style.fontFamily = ftype + ' !important;';
         this.editor.node.style.color = color + ' !important;';

New in FF3:
         this.editor.node.style.setProperty('font-size', fsize + 'px', 'important');
         this.editor.node.style.setProperty('font-family', ftype, 'important');
         this.editor.node.style.setProperty('color', color, 'important');

The previous method of assigning style properties worked fine going all the way back to the FF 1.x days.  Not sure if this change was made to help tighten up on spec or because properties access the old way was recently made read-only, etc.  But this is clearly a major change.  And whether or not this change is a "feature" or a bug, I believe a doc note should be added about it in all the relevant places to help web developers, themers and extension authors fix up their stuff before FF3 officially lands.

Side note:  This issue was encountered in a Firefox extension that injects new HTML elements into a web page then tries to update the element's style properties dynamically.

Reproducible: Always

Comment 1

[Robert Longson [:longsonr]]

This is defined by http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties

Perhaps the problem is the !important; bit which I don't think you should be able to do. Does it work if you remove the " !important;" part? 

Comment 2

[carglue a t ya hoo do tcom]

Nope.  I also tried it with the 'important' priority tag stripped off like this:

   this.editor.node.style.fontSize = this.fontsize + 'px';
   this.editor.node.style.fontFamily = ftype;
   this.editor.node.style.color = color;

It still prevents me from modifying the property settings, and the ' !important;' part always worked before.

I have a feeling it might be related to how my (XPCOM) chrome code is trying to change the properties of a wrapped (expando?) target object.  I know I ran into some difficulties before with stuff like that where I was forced to use setAttribute instead of being able to set the object attributes directly as one would do in (non-wrapped) web page javascript.  Whatever it is, something was changed.  The code that I was forced to fix was working since before Firefox 1.5.

Comment 3

[BAM]

Reference bug 441555
If setting the !important attribute on an element's style, setProperty must be used in Firefox 3

Comment 4

[Hallvord R. M. Steen [:hallvors]]

Is this still an issue? Is Firefox different from other browsers here?

Comment 5

[Firefox Bug Husbandry Bot]

https://bugzilla.mozilla.org/show_bug.cgi?id=1472046

Move all DOM bugs that haven’t been updated in more than 3 years and has no one currently assigned to P5.

If you have questions, please contact :mdaly.