Closed
Bug 907207
Opened 11 years ago
Closed 11 years ago
Javascript assignment of some element styles fail
Categories
(Core :: DOM: CSS Object Model, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: darrick, Unassigned)
Details
Attachments
(1 file)
559 bytes,
text/plain
|
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 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•11 years ago
|
||
"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
Closed: 11 years ago
Resolution: --- → INVALID
Reporter | ||
Comment 2•11 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.
Comment 3•11 years ago
|
||
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.
Description
•