- From: CSS Meeting Bot via GitHub <noreply@w3.org>
- Date: Wed, 01 Oct 2025 16:42:19 +0000
- To: public-css-archive@w3.org
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> <kbabbitt> noamr: wanted to bring this up because it affects existing shipped features<br> <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> <kbabbitt> ... long story short, both oriol and I got to a very similar algo in there<br> <kbabbitt> ... with slight variations<br> <oriol> Testcases: https://drafts.csswg.org/css-backgrounds-3/radius-expansion.html<br> <kbabbitt> ... radius expansion link from the issue<br> <kbabbitt> ... [screen shares example]<br> <kbabbitt> ... we got to 2 versions that look good<br> <kbabbitt> ... corners and shapes that are circular look circular<br> <kbabbitt> ... oriol's version adds a linear factor<br> <kbabbitt> ... my version makes that cubic but very similar<br> <kbabbitt> ... in both, shape of the shadow looks like original shape<br> <kbabbitt> ... and when it's more cornered, corners look like the corner<br> <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> <kbabbitt> ... happy to resolve on either of these two<br> <kbabbitt> ... very similar, just about how percentage of radius from overflow width or height affects this correction<br> <astearns> ack fantasai<br> <oriol> q+<br> <kbabbitt> fantasai: will defer to oriol<br> <astearns> ack oriol<br> <kbabbitt> oriol: to explain a bit better the change we're proposing<br> <kbabbitt> ... what the spec is doing is take radius of element<br> <kbabbitt> ... when spreading shadow it adds this spread distance multiplied by an unknown factor<br> <kbabbitt> ... that factor provides continuity, 0 when radius is 0, otherwise goes to 1<br> <kbabbitt> ... in between we have some smoothness<br> <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> <kbabbitt> ... of the element<br> <kbabbitt> ... and we do this by adding another adjustment factor<br> <kbabbitt> ... we also do this in a way that if components are the same, circular corner, shadow should also have circular corner<br> <kbabbitt> ... difference between noamr's and my proposal... I already had another one which is 1-value^3, then changed to value^3<br> <kbabbitt> ... [missed noamr's version]<br> <kbabbitt> ... noamr's looks slightly better<br> <astearns> ack fantasai<br> <fantasai> https://drafts.csswg.org/css-backgrounds-3/radius-expansion.html<br> <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> <kbabbitt> ... the fifth one and ones that are close to bottom that are rectangular-ish<br> <kbabbitt> ... more than oriol's latest variant, it preserves rectangular-ness<br> <kbabbitt> ... last one looks best<br> <kbabbitt> astearns: proposed resolution is to take the very latest one?<br> <kbabbitt> noamr: last in the list<br> <noamr> Proposed resolution: adopt last version (marked "Noam's old/new spectrum, preserving circular corners")<br> <kbabbitt> oriol: the formula is in the code but I will post the one based on my approach<br> <oriol> https://www.irccloud.com/pastebin/VCY9MZt2/<br> <kbabbitt> oriol: this should be equivalent to what we have<br> <kbabbitt> ... we take the ? coverage which is ratio of how much radius of width or height of element, take the minimum of them<br> <fantasai> for (let corner in radii) {<br> <fantasai> let coverage = Math.min(<br> <fantasai> 2 * radii[corner][0] / testCase.width,<br> <fantasai> 2 * radii[corner][1] / testCase.height,<br> <fantasai> ) || 0;<br> <fantasai> r[corner] = radii[corner].map(value => {<br> <kbabbitt> ... we use the same factor that is in the spec but multiply by this 1-coverage to the power of 3<br> <fantasai> if (value >= testCase.spread || coverage >= 1) {<br> <fantasai> return value + testCase.spread;<br> <fantasai> }<br> <fantasai> let r = 1 - value / testCase.spread;<br> <fantasai> return value + testCase.spread * (1 - r**3 * (1 - coverage ** 3));<br> <fantasai> });<br> <fantasai> }<br> <kbabbitt> ... variables are from the test cases<br> <noamr> Smooth reduction by (1 - coverage ^ 3)<br> <kbabbitt> astearns: Proposed resolution is that we are taking the last option in the testcase]<br> <kbabbitt> RESOLVED: take the last option in the testcase<br> <fantasai> \^_^/<br> <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