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

• Status: NEW
• Component: CSS

[Roman Komarov]

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)

[Radar WebKit Bug Importer]

<rdar://problem/165719132>