Re: [csswg-drafts] [css-backgrounds-3][css-borders-4] The shape of box-shadow should be a circle for a box with border-radius:50% and big spread (#7103)

The CSS Working Group just discussed `[css-backgrounds-3][css-borders-4] The shape of box-shadow should be a circle for a box with border-radius:50% and big spread`, and agreed to the following:

* `RESOLVED: take the last option in the testcase`

<details><summary>The full IRC log of that discussion</summary>
&lt;kbabbitt> noamr: wanted to bring this up because it affects existing shipped features<br>
&lt;kbabbitt> ... a lot of trial and error for this issue, which is about correcting the radius of the shadow and other things like overflow clip margin and outline<br>
&lt;kbabbitt> ... long story short, both oriol and I got to a very similar algo in there<br>
&lt;kbabbitt> ... with slight variations<br>
&lt;oriol> Testcases: https://drafts.csswg.org/css-backgrounds-3/radius-expansion.html<br>
&lt;kbabbitt> ... radius expansion link from the issue<br>
&lt;kbabbitt> ... [screen shares example]<br>
&lt;kbabbitt> ... we got to 2 versions that look good<br>
&lt;kbabbitt> ... corners and shapes that are circular look circular<br>
&lt;kbabbitt> ... oriol's version adds a linear factor<br>
&lt;kbabbitt> ... my version makes that cubic but very similar<br>
&lt;kbabbitt> ... in both, shape of the shadow looks like original shape<br>
&lt;kbabbitt> ... and when it's more cornered, corners look like the corner<br>
&lt;kbabbitt> ... where it's different is in those cases where the long side has a radius but short side doesn't, or has shorter radius<br>
&lt;kbabbitt> ... happy to resolve on either of these two<br>
&lt;kbabbitt> ... very similar, just about how percentage of radius from overflow width or height affects this correction<br>
&lt;astearns> ack fantasai<br>
&lt;oriol> q+<br>
&lt;kbabbitt> fantasai: will defer to oriol<br>
&lt;astearns> ack oriol<br>
&lt;kbabbitt> oriol: to explain a bit better the change we're proposing<br>
&lt;kbabbitt> ... what the spec is doing is take radius of element<br>
&lt;kbabbitt> ... when spreading shadow it adds this spread distance multiplied by an unknown factor<br>
&lt;kbabbitt> ... that factor provides continuity, 0 when radius is 0, otherwise goes to 1<br>
&lt;kbabbitt> ... in between we have some smoothness<br>
&lt;kbabbitt> ... basically this change boils down to ensuring this factor is 1 when the radius is at least 50% of width or height if vertical<br>
&lt;kbabbitt> ... of the element<br>
&lt;kbabbitt> ... and we do this by adding another adjustment factor<br>
&lt;kbabbitt> ... we also do this in a way that if components are the same, circular corner, shadow should also have circular corner<br>
&lt;kbabbitt> ... difference between noamr's and my proposal... I already had another one which is 1-value^3, then changed to value^3<br>
&lt;kbabbitt> ... [missed noamr's version]<br>
&lt;kbabbitt> ... noamr's looks slightly better<br>
&lt;astearns> ack fantasai<br>
&lt;fantasai> https://drafts.csswg.org/css-backgrounds-3/radius-expansion.html<br>
&lt;kbabbitt> fantasai: comparing the examples and having gone through with oriol, I think the very last formula in his testcase is the best one<br>
&lt;kbabbitt> ... the fifth one and ones that are close to bottom that are rectangular-ish<br>
&lt;kbabbitt> ... more than oriol's latest variant, it preserves rectangular-ness<br>
&lt;kbabbitt> ... last one looks best<br>
&lt;kbabbitt> astearns: proposed resolution is to take the very latest one?<br>
&lt;kbabbitt> noamr: last in the list<br>
&lt;noamr> Proposed resolution: adopt last version (marked "Noam's old/new spectrum, preserving circular corners")<br>
&lt;kbabbitt> oriol: the formula is in the code but I will post the one based on my approach<br>
&lt;oriol> https://www.irccloud.com/pastebin/VCY9MZt2/<br>
&lt;kbabbitt> oriol: this should be equivalent to what we have<br>
&lt;kbabbitt> ... we take the ? coverage which is ratio of how much radius of width or height of element, take the minimum of them<br>
&lt;fantasai>   for (let corner in radii) {<br>
&lt;fantasai>    let coverage = Math.min(<br>
&lt;fantasai>     2 * radii[corner][0] / testCase.width,<br>
&lt;fantasai>     2 * radii[corner][1] / testCase.height,<br>
&lt;fantasai>    ) || 0;<br>
&lt;fantasai>    r[corner] = radii[corner].map(value => {<br>
&lt;kbabbitt> ... we use the same factor that is in the spec but multiply by this 1-coverage to the power of 3<br>
&lt;fantasai>     if (value >= testCase.spread || coverage >= 1) {<br>
&lt;fantasai>      return value + testCase.spread;<br>
&lt;fantasai>     }<br>
&lt;fantasai>     let r = 1 - value / testCase.spread;<br>
&lt;fantasai>     return value + testCase.spread * (1 - r**3 * (1 - coverage ** 3));<br>
&lt;fantasai>    });<br>
&lt;fantasai>   }<br>
&lt;kbabbitt> ... variables are from the test cases<br>
&lt;noamr> Smooth reduction by (1 - coverage ^ 3)<br>
&lt;kbabbitt> astearns: Proposed resolution is that we are taking the last option in the testcase]<br>
&lt;kbabbitt> RESOLVED: take the last option in the testcase<br>
&lt;fantasai> \^_^/<br>
&lt;kbabbitt> astearns: thanks noamr and oriol for the work on this, and everyone else who has been contributing over a long time<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7103#issuecomment-3357237507 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 1 October 2025 16:42:20 UTC