Bug 14646

Summary: WebKit border radius properties are unavailable via JavaScript
Product: WebKit Reporter: David Harrison <harrison>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Normal CC: bdakin, farukates, sam
Priority: P2 Keywords: InRadar
Version: 523.x (Safari 3)   
Hardware: Mac   
OS: OS X 10.5   
Attachments:
Description Flags
test case
none
patch
none
patch
none
patch oliver: review+

Description David Harrison 2007-07-17 12:25:05 PDT
* SUMMARY
Webkit-specific CSS properties such as  -webkit-border-top-right-radius (whether set via shorthand or not) are not retrievable in the DOM. They can be set in the DOM, but their computed style values cannot be retrieved.

* STEPS TO REPRODUCE
See attached zipfile containing a webkit.html demo file of the problem (see source for specifics of how the calls are made), along with a jQuery .js file and a .css file for some basic styling as taken from the dev page I discovered the bug on.

* RESULTS
Using the DOM to retrieve the computed style of these properties returns null.  
EXPECTED: the computed style value should be returned.

* NOTES
Tested in the latest nightly of Webkit (July 14, 2007)
Comment 1 David Harrison 2007-07-17 12:28:01 PDT
Created attachment 15548 [details]
test case

Attached webkit-test.zip

rdar://5340449
Comment 2 Sam Weinig 2007-07-17 14:32:47 PDT
One of the issues that needs to be assessed first is how we want to represent the computed value of a border-radius.  Should we always return a pair?  Should we we only return 1 value if the vertical and horizontal values are the same?
Comment 3 Faruk Ates 2007-07-18 09:13:47 PDT
Sam, how shorthands are to be treated is a separate issue. When making a call to retrieve the computed style of -webkit-border-top-right-radius  (i.e. a non-shorthand, explicit property), it still returns null, when the value is a very simple, straightforward "50px" for instance. 
Comment 4 Sam Weinig 2007-07-18 20:59:14 PDT
Faruk, the value of -webkit-border-top-right-radius is actually not that simple as it is a pair of two values, width and height radii for that corner.  So if you wanted an oblong corner you could use -webkit-border-top-right-radius: 10px 20px;.  That said, I have a fix that returns a primitive value if the width and height are equal and Pair if they differ.  I will post the patch shortlty. 
Comment 5 Sam Weinig 2007-07-18 21:02:41 PDT
Created attachment 15573 [details]
patch
Comment 6 Sam Weinig 2007-07-18 21:02:42 PDT
Created attachment 15574 [details]
patch
Comment 7 Sam Weinig 2007-07-18 21:02:47 PDT
Created attachment 15575 [details]
patch
Comment 8 Sam Weinig 2007-07-18 21:14:25 PDT
Landed in r24436.
Comment 9 Faruk Ates 2007-07-19 10:27:57 PDT
Sam, fantastic, thanks! I didn't know that oblong corners were supported, that's very cool.
Comment 10 Sam Weinig 2007-07-20 13:39:20 PDT
Landed update to the patch in r24486 which uses a CSSValueList instead of a CSSPrimitiveValue with a Pair for radii with unique values.