Javascript assignment of some element styles fail

RESOLVED INVALID

Status

()

RESOLVED INVALID
5 years ago
5 years ago

People

(Reporter: darrick, Unassigned)

Tracking

23 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

5 years ago
Created attachment 792865 [details]
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.
"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
Status: UNCONFIRMED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → INVALID
(Reporter)

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