Bug 230388 - radial-gradient does not accept calc values that combine length and percent
Summary: radial-gradient does not accept calc values that combine length and percent
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Other
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nikos Mouchtaris
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-09-16 23:30 PDT by Tuomas Karkkainen
Modified: 2021-10-05 11:19 PDT (History)
10 users (show)

See Also:


Attachments
sample html file demonstrating the issue (517 bytes, text/html)
2021-09-16 23:30 PDT, Tuomas Karkkainen
no flags Details
Patch (4.00 KB, patch)
2021-10-04 12:48 PDT, Nikos Mouchtaris
no flags Details | Formatted Diff | Diff
Patch (5.20 KB, patch)
2021-10-04 19:11 PDT, Nikos Mouchtaris
simon.fraser: review+
Details | Formatted Diff | Diff
Patch (5.19 KB, patch)
2021-10-04 21:43 PDT, Nikos Mouchtaris
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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].