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

I have updated https://drafts.csswg.org/css-backgrounds-3/radius-expansion.html with more testcases and a new proposal. To summarize the context of this issue:

 - When reducing a border radius, we just subtract the distance (and clamp at zero)
 - So the obvious thing to do when expanding a radius, would be to add the distance
 - But that's problematic, because non-rounded corners (radius of 0) should stay non-rounded.
 - So the current spec adds the distance multiplied by an adjustment factor. This factor is 1 if the radius is greater than the spread distance, it's zero if the radius is 0, and it's continuous between these cases.
 - The problem is that, if the original shape is a full ellipsis/circle, then the expanded shape may stop being a full ellipsis/circle.

So, my idea is: in the adjustment factor, instead of only considering the ratio between the radius and the spread distance, also consider the ratio of the element sizes covered by the radius. If the horizontal radius is at least 50% of the width of the element, or the vertical radius is at least 50% of the height, then we want the factor to be 1, even if the spread distance is much bigger than the radius.

BTW, this approach guarantees that, if a corner is circular (same horizontal and vertical radii), the expanded corner will stay circular instead of becoming elliptical.

This is the code in the demo:

```js
for (let corner in radii) {
  let coverage = Math.max(
    2 * radii[corner][0] / testCase.width,
    2 * radii[corner][1] / testCase.height,
  ) || 0;
  r[corner] = radii[corner].map(value => {
    if (value >= testCase.spread || coverage >= 1) {
      return value + testCase.spread;
    }
    let r = (1 - value / testCase.spread) * (1 - coverage);
    return value + testCase.spread * (1 - r**3);
  });
}
```

I think it produces better results than Elika's proposal for `{"width":500,"height":60,"spread":30,"borderRadius":"20px 20px 40px 40px"}` and `{"width":250,"height":35,"spread":50,"borderRadius":"0px 0px 25px 25px"}`.


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


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

Received on Wednesday, 8 February 2023 01:17:39 UTC