Adding stylesheet rules with shorthand properties automatically expands them

• Component: CSS
• Status: RESOLVED DUPLICATE

[Kevin Haggerty]

I came across some inconsistent behavior in Safari 5.1 and latest WebKit nightly regarding Javascript-inserted CSS style rules that have shorthand notation.

My application allows users to design and style DOM elements, and I am creating style rules and inserting them into document style sheets.  When I save the user's work, I read the style rules from the style sheet, and send them to the server for storage.  However, once I started auto-compacting properties that can be expressed in shorthand notation, I discovered that WebKit is automatically expanding those shorthand rules, so that the output from reading a style rule is not what I passed in.

Reduced test case is here:  http://jsbin.com/ececop/2/edit#javascript,live

You can see there that once the style rule with shorthand is written to a style sheet, the single shorthand property is expanded to 4 separate properties for each of the border-width declarations.  While not a 'breaking' bug, this is radically increasing the size of the stylesheets that my application is creating (imagine that all border properties are expanded and repeated for multiple keyframes over multiple styles, and multiplied again for the @-moz-keyframe and prefix-free @keyframe rules).

Firefox 7 does not exhibit this behavior.

Would love to have this fixed somehow, thanks WebKit Folk!

[Tony Chang]

I think there might already be a bug for this.

[David Barr]

*** This bug has been marked as a duplicate of bug 73002 ***