Sampler for closest-corner / farthest-corner in clip-path: circle() and clip-path: ellipse(), updated for the CSSWG resolution in csswg-drafts#10812:
<circle-size> = closest-side | farthest-side | closest-corner | farthest-corner | <length-percentage>
<ellipse-size> = closest-side | farthest-side | closest-corner | farthest-corner | [ closest-side | farthest-side | <length-percentage> ]{2}
Key changes vs. the earlier (WebKit-shipped) behavior:
- corner keywords are only valid in the single-value form of ellipse() (two-value corner forms like ellipse(farthest-corner closest-corner) are now invalid)
- a single-keyword ellipse(*-corner) has the same aspect ratio as the corresponding *-side ellipse, scaled by sqrt(2) to pass through the corner
- a single side keyword or length-percentage like ellipse(farthest-side) / ellipse(10px) is now valid and applies to both axes
Each case includes tabs labeled Rendered and Expected. Rendered is live HTML/CSS using the keyword syntax. Expected is either the reference PNG (circle cases) or live CSS with explicitly computed radii (ellipse cases).