Javascript assignment of some element styles fail




5 years ago
5 years ago


(Reporter: darrick, Unassigned)


23 Branch
Mac OS X

Firefox Tracking Flags

(Not tracked)



(1 attachment)



5 years ago
Created attachment 792865 [details]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:23.0) Gecko/20100101 Firefox/23.0 (Beta/Release)
Build ID: 20130814063812

Steps to reproduce:

Bug: Using javascript to assign = "right" fails.  Only"float", "right") works.  This fails for both float "left" and "right".  CSS fields other than float may be affected as well.

Using Firefox 23.0.1 on Mac OS 10.8.4.  Seen the same result on a desktop PC running Window 7 with Firefox 23.

Steps to repro:

1. Load the attached HTML file into Firefox. (test.html)
2. Observe how the page is rendered.

Actual results:

Box "1" is on the left of the page, while box "2" is floated right as expected. Note the console output of  The "float" member is indeed set to "right".  However, the element in the DOM tree does not have a style attribute.  Firebug shows the HTML structure to be:

<div id="one" class="box">1</div>
<div id="two" class="box" style="float: right;">2</div>

Calling = "right" fails apply the style, while"float", "right") works.  Note that either method works in Webkit and IE. 

Expected results:

Both boxes should be float right and the HTML DOM should reflect the style:

<div id="one" class="box" style="float: right;">1</div>
<div id="two" class="box" style="float: right;">2</div>

Open attached test.html in another browser to see expected result.
"float" is a reserved word in JavaScript so the CSSOM property is named
"cssFloat".  See the NOTE on this page:
Last Resolved: 5 years ago
Resolution: --- → INVALID

Comment 2

5 years ago
(In reply to Mats Palmgren (:mats) from comment #1)
> "float" is a reserved word in JavaScript so the CSSOM property is named
> "cssFloat".  See the NOTE on this page:

This conflicts with the Reserved word definition:

"Reserved Words actually only apply to Identifiers (vs. IdentifierNames) . As described in, these are all IdentifierNames which do not exclude ReservedWords.

a = { import: "test" }.
function import() {} // Illegal."

style.float is an IdentifierName and legal according to the reserved word definition.
Yes, the behavior of reserved words in JS changed at some point.  The CSSOM was designed back when style.float was not valid JavaScript, which is why it uses "cssFloat" instead....
Or it might have been that it was a reserved word in OMG IDL, or Java.  (Yes, I think some people cared about such things then.)
You need to log in before you can comment on or make changes to this bug.