Bug 233960

Summary: 'border-radius shorthand is getting expanded in WebKit
Product: WebKit Reporter: Mario Alzugray <m.a.r.i.o.alzugray>
Component: CSSAssignee: Antoine Quint <graouts>
Status: RESOLVED FIXED    
Severity: Normal CC: clopez, esprehn+autocc, ews-watchlist, glenn, graouts, gyuyoung.kim, inspector-bugzilla-changes, koivisto, macpherson, menard, ntim, simon.fraser, webkit-bug-importer, youennf
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 15   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://github.com/web-platform-tests/wpt/pull/31953
Attachments:
Description Flags
Patch
none
Patch ews-feeder: commit-queue-

Description Mario Alzugray 2021-12-07 16:49:00 PST
Setting `el.style['border-radius'] = '25px'` causes webkit to modify the style string to:
<div style="border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;" />

Example:
https://codepen.io/onedayitwillmake/pen/BawKxWm

In Chrome and Firefox the style property left as it was authored. 

The expanded version is also returned in the following scenarios:

`el.style.cssText` or `el.outerHTML`
Comment 1 Antoine Quint 2021-12-08 02:10:40 PST
Created attachment 446338 [details]
Patch
Comment 2 Antoine Quint 2021-12-08 03:29:56 PST
Created attachment 446346 [details]
Patch
Comment 3 EWS Watchlist 2021-12-08 03:30:45 PST
This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess
Comment 4 Antoine Quint 2021-12-08 03:41:56 PST
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/31953
Comment 5 EWS 2021-12-08 05:52:32 PST
Committed r286652 (244965@main): <https://commits.webkit.org/244965@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 446346 [details].
Comment 6 Radar WebKit Bug Importer 2021-12-08 05:53:20 PST
<rdar://problem/86207957>