CSS border-radius can't be set from JavaScript element.style.MozBorderRadius

RESOLVED INVALID

Status

()

Core
CSS Parsing and Computation
RESOLVED INVALID
6 years ago
6 years ago

People

(Reporter: rochal, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 1 obsolete attachment)

442 bytes, text/html
Details
(Reporter)

Description

6 years ago
User Agent: Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1

Steps to reproduce:

On Firefox 7.0.1 I tried to set border-radius on a div using JavaScript, using the code below:

document.getElementById('jsTest').style.BorderRadius = "10px";
document.getElementById('jsTest').style.MozBorderRadius = "10px";

I also set up a demo page, here: http://rocha.la/misc/ff7-radius-bug.htm.


Actual results:

Radius was not set. MozBorderRadius and/or BorderRadius did not change the radius of the border. It still works when applied from CSS, but JavaScript call is not changing the property.


Expected results:

Border radius should be set as it is in Firefox 3.6.

Follwoing code should correctly update the radius of a border: element.style.MozBorderRadius or element.style.BorderRadius

Comment 1

6 years ago
> Radius was not set. MozBorderRadius and/or BorderRadius did not 
> did not change the radius of the border

CSS "-moz-border-radius" (and thus "MozBorderRadius" in scripting) is no longer supported.
Use CSS "border-radius" (means "borderRadius" in scripting).
"BorderRadius" is just wrong.

(The rule is: uppercase (only) the letter after the dash)
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → INVALID

Comment 2

6 years ago
Hoppla! -moz-border-radius isn't droppes yet but soon, see bug 693510 .
In any way, don't use it!
Plain "border-radius" works in amy browser these days, including IE9. See https://developer.mozilla.org/en/CSS/border-radius

So  style.MozBorderRadius  should still work in Fx7 (But don't use it)

style.borderRadius should work.
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---

Comment 3

6 years ago
Created attachment 567371 [details]
wrong, use the next one

Works in any browser.

(Did I mention I hate JQuery? And that I will refuse to work an any bug with a testcase were jQuery is involved in any way?)

Updated

6 years ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago6 years ago
Resolution: --- → INVALID

Comment 4

6 years ago
Created attachment 567372 [details]
testcase (this time the right one, sorry)
Attachment #567371 - Attachment is obsolete: true

Updated

6 years ago
Attachment #567371 - Attachment description: tescase → wrong, please ignore

Updated

6 years ago
Attachment #567371 - Attachment description: wrong, please ignore → wrong, use the next one
(Reporter)

Comment 5

6 years ago
Thanks j.j. In other words, Firefox is no longer backwards compatible as style.MozBorderRadius does not work in Firefox 7.0.1.

Documentation on this change would be more then useful.

Regards

Comment 6

6 years ago
Actually, you are right, I didn't know that!
Support for  style.MozBorderRadius  was dropped with Fx4,
support for  -moz-border-radius  will be dropped soon with bug 693510 (and documented then).

> Documentation on this change would be more then useful.
Indeed! Seems that was forgotten.
Otherwise it's kind of a non-issue because you need  style.borderRadius  anyway for IE9 and Opera.
I searched and found only 1 bug report about this (bug 638911).
Component: General → Style System (CSS)
OS: Windows Vista → All
Product: Firefox → Core
QA Contact: general → style-system
Hardware: x86 → All
Summary: CSS border-radius can't be set from JavaScript → CSS border-radius can't be set from JavaScript element.style.MozBorderRadius
You need to log in before you can comment on or make changes to this bug.