Bug 303109

Summary:

[css-sizing] margins with cyclic percentages are nullified instead of resolving only the cyclic percentage against zero

Product:

WebKit

Reporter:

Roman Komarov <kizmarh>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

koivisto, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 26

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
A screenshot of the cyclic percentage bug	none

Roman Komarov

Reported 2025-11-25 14:20:39 PST

Created attachment 477518 [details] A screenshot of the cyclic percentage bug Open https://codepen.io/kizu/pen/RNaQgde, or test the following HTML: <button type="button"> <span style="margin: calc(0% + 50px);">button</span> </button> The `calc(0% + 50px)` should be equal to `50px`, but in Safari it renders as `0`. The spec (https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution) says only to evaluate against zero the cyclic percentage, but not the whole calculation: > […] for margins and paddings (and gutters), a cyclic percentage is resolved against zero for determining intrinsic size contributions. Both Safari and Firefox do this as expected, while Safari results in an incorrect rendering (see the attached screenshot)

Attachments
A screenshot of the cyclic percentage bug (63.51 KB, image/png) 2025-11-25 14:20 PST, Roman Komarov	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2025-12-02 14:21:11 PST

<rdar://problem/165719132>

Note You need to log in before you can comment on or make changes to this bug.