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 created https://people.igalia.com/obrufau/testcases/shadow-radius/ to play.

If you take a look at the source, it's rather easy to add new testcases or algorithms.

I haven't found any algorithm that works great in all cases, but maybe I'm leaning towards "Percentage of same axis,
ceiling to keep ratio if possible", basically:

1. Express the radii as percentages, and then resolve them against the sizes of the shadow (just like in https://github.com/w3c/csswg-drafts/issues/7103#issuecomment-1135036126).
2. But then, for corners that get a different ratio of their components, try to increase one component, to recover the old ratio.
3. However, don't violate the constraint avoided in https://drafts.csswg.org/css-backgrounds-3/#corner-overlap, i.e.
    - The X component of `border-top-left-radius` plus the X component of `border-top-right-radius` shouldn't exceed the width of the shadow.
    - The X component of `border-bottom-left-radius` plus the X component of `border-bottom-right-radius` shouldn't exceed the width of the shadow.
    - The Y component of `border-top-left-radius` plus the Y component of `border-bottom-left-radius` shouldn't exceed the height of the shadow.
    - The Y component of `border-top-right-radius` plus the Y component of `border-bottom-right-radius` shouldn't exceed the height of the shadow.

There can be multiple ways to do (3), in the demo above I distribute space proportionally according to the desired growth.

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


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

Received on Wednesday, 3 August 2022 17:29:12 UTC