Bug 230388

Summary: radial-gradient does not accept calc values that combine length and percent
Product: WebKit Reporter: Tuomas Karkkainen <tuomas.webkit>
Component: CSSAssignee: Nikos Mouchtaris <nmouchtaris>
Status: RESOLVED FIXED    
Severity: Normal CC: esprehn+autocc, ews-watchlist, glenn, graouts, gyuyoung.kim, macpherson, menard, nmouchtaris, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Other   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
sample html file demonstrating the issue
none
Patch
none
Patch
simon.fraser: review+
Patch none

Description Tuomas Karkkainen 2021-09-16 23:30:31 PDT
Created attachment 438446 [details]
sample html file demonstrating the issue

in radial-gradient calc() works when adding lengths together, or percentages together:

radial-gradient(50px calc(50px + 1px), #f0f, #fff)
radial-gradient(50px calc(50% + 1%), #f0f, #fff)

combining length and percentage does not work:

radial-gradient(50px calc(50% + 1px), #f0f, #fff)
Comment 1 Radar WebKit Bug Importer 2021-09-23 23:31:20 PDT
<rdar://problem/83482168>
Comment 2 Nikos Mouchtaris 2021-10-04 12:48:06 PDT
Created attachment 440090 [details]
Patch
Comment 3 Simon Fraser (smfr) 2021-10-04 14:00:13 PDT
Comment on attachment 440090 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=440090&action=review

> LayoutTests/css3/calc/css3-radial-gradients.html:52
> +    background-image: radial-gradient(50px calc(50% + 10px), #f0f, #fff);

You should probably add another test with the simple radial-gradient(50px, 25%) case that doesn't' involve calc.
Comment 4 Nikos Mouchtaris 2021-10-04 19:11:47 PDT
Created attachment 440144 [details]
Patch
Comment 5 Nikos Mouchtaris 2021-10-04 21:43:17 PDT
Created attachment 440156 [details]
Patch
Comment 6 EWS 2021-10-05 11:19:24 PDT
Committed r283561 (242526@main): <https://commits.webkit.org/242526@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 440156 [details].