Bug 17856 – Computed Style for WebkitBorderRadius in unimplemented

• Component: DOM
• Status: RESOLVED WONTFIX

[Garrett Smith]

getComputedStyle doesn't work with webkitBorderRadius (among others)

I need this for animation. Currently, this fails in webkit.

The following works in Mozilla:
javascript:alert(getComputedStyle(document.body,'').MozBorderRadiusTopright);

The following does not work in Mozilla because Mozilla does not return shorthand values:
javascript:alert(getComputedStyle(document.body,'').MozBorderRadius)

Both should work in webkit:
javascript:alert(getComputedStyle(document.body,''). WebkitBorderRadius sTopright); // "0px"
javascript:alert(getComputedStyle(document.body,''). WebkitBorderRadius); // "0px"

The first one is pretty straightforward.

The second one is a shorthand value, which falls under another category. FF2 and Safari3 return the empty string for:


AFAIK  - Shorthand values are not guaranteed to return any specific format. Is there a spec reference for this? For example, what format should the following return:

getComputedStyle(document.body,'').margin

 "0px" or "0px 0px 0px 0px"? 
 Preferrably a shorthand would return 1 or 4 values, never "0px 0px" or "0px 0px 0px" -- that would complicate scripts.

[Robert Blaut]

WebkitBorderRadius is actually unimplemented in CSSComputedStyleDeclaration::getPropertyCSSValue 

other properties are currently implemented but you should notice differences between Gecko and Webkit:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

So WebkitBorderRadiusTopleft doesn't work but WebkitBorderTopLeftRadius works correctly. Check attached test case.

[Robert Blaut]

Created attachment 26456 [details]
test case

[Alexis Menard (darktears)]

Created attachment 122452 [details]
Updated version to use border-radius.

[Alexis Menard (darktears)]

I strongly encourage to use border-radius CSS property rather the vendor prefixed version. I attached a modified version of the test case which output the result as expected. It's almost a simple search and replace.