907207 - Javascript assignment of some element styles fail

Status: RESOLVED INVALID

(Core :: DOM: CSS Object Model, defect)

Description

[Darrick Brown]

Attachment: test.html

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 elem.style.float = "right" fails.  Only elem.style.setProperty("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 one.style.  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 elem.style.float = "right" fails apply the style, while elem.style.setProperty("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.

Comment 1

[Mats Palmgren (inactive)]

"float" is a reserved word in JavaScript so the CSSOM property is named
"cssFloat".  See the NOTE on this page:
https://developer.mozilla.org/en-US/docs/Web/CSS/float

Comment 2

[Darrick Brown]

(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:
> https://developer.mozilla.org/en-US/docs/Web/CSS/float

This conflicts with the Reserved word definition:  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words

"Reserved Words actually only apply to Identifiers (vs. IdentifierNames) . As described in es5.github.com/#A.1, these are all IdentifierNames which do not exclude ReservedWords.

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

style.float is an IdentifierName and legal according to the reserved word definition.

Comment 3

[Boris Zbarsky [:bzbarsky]]

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

Comment 4

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

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