LGTM2 On Tue, Sep 15, 2026 at 3:18 AM Mike Taylor <[email protected]> wrote:
> On 9/14/26 5:57 p.m., Helmut Januschka wrote: > > Hi Alex, > > The main pattern this serves is the “circular reveal”, animating clip-path: > circle() so the circle fully covers its box. The required end radius is > the distance from the center to the farthest corner, which authors today > approximate with: > > - a hardcoded circle(141.42%) (only correct for square boxes), or > - computing Math.hypot(width, height) in JS and injecting it via a > custom property. > > The JS workaround is common enough that Chrome View Transitions > documentation > <https://developer.chrome.com/docs/web-platform/view-transitions/same-document> > teaches it for the circle-reveal demo (see the Math.hypot snippet under > “Animating with JavaScript”). > That doc even notes: “The animation ends with the circle having a radius > to the farthest corner. Although, hopefully this will be possible with CSS > in future.” > > With it, the pattern becomes circle(farthest-corner at x y) no JS, no > aspect-ratio assumptions, correct for any box. > > This is also partly an interop fix. The keywords are already part of the > css-shapes-1 > grammar <https://drafts.csswg.org/css-shapes-1/#basic-shape-functions> ( > circle() takes <radial-size>, defined in css-images, which includes > closest-corner and farthest-corner), and they already work in > radial-gradient(), so authors reasonably expect them in circle()/ellipse(). > WebKit shipped support in 2024 and exported the WPTs for it: > WebKit/WebKit#31678 <https://github.com/WebKit/WebKit/pull/31678> > > Positions: > > - WebKit: support (implemented and shipped) - > WebKit/standards-positions#719 > <https://github.com/WebKit/standards-positions/issues/719> > - Mozilla: shipped behind flag - mozilla/standards-positions#1450 > <https://github.com/mozilla/standards-positions/issues/1450> > > Thanks - LGTM1 > > > > Updated the feature entry as well. > > do you have any hints on how i can gather more developer-signal, or > is there any documentation on how to get this? > > Since this is a "catch up" feature, signals aren't a blocking concern (for > me personally, anyways). In general though, you could find blog posts of > developers asking for a feature (or describing their excitement about > it...), issues filed by developers, or comments in existing issues giving > support, etc. Sometimes these can surface in CSSWG discussions, or even TAG > issues. > > cheers, > helmut > > Am Mo., 14. Sept. 2026 um 23:11 Uhr schrieb Alex Russell < > [email protected]>: > >> I'm a little less worried about browser signals here than I am about >> developer signals. Do we have confirmation that this solves an important >> problem for web authors? >> >> Best, >> >> Alex >> >> On Wednesday, September 2, 2026 at 11:36:29 AM UTC-7 Mike Taylor wrote: >> >>> Yes, thanks. :) >>> >>> https://github.com/WebKit/standards-positions >>> https://github.com/mozilla/standards-positions >>> On 9/2/26 2:22 p.m., Chris Harrelson wrote: >>> >>> Hi Helmut, >>> >>> Just to clarify: Mike is asking for Mozilla and Safari standards >>> positions issues, not additional developer signals. >>> >>> On Wed, Sep 2, 2026 at 11:20 AM Helmut Januschka <[email protected]> >>> wrote: >>> >>>> trying to figure out to get signals >>>> >>>> Am Mi., 2. Sept. 2026 um 20:19 Uhr schrieb Helmut Januschka < >>>> [email protected]>: >>>> >>>>> sadly, same as on my other feature entry, i forgot the checkmark, >>>>> fixed! sorry >>>>> >>>>> [email protected] schrieb am Montag, 24. August 2026 um 19:23:24 >>>>> UTC+2: >>>>> >>>>>> On 8/23/26 10:06 a.m., Helmut Januschka wrote: >>>>>> >>>>>> *Contact emails* >>>>>> [email protected] >>>>>> >>>>>> *Specification* >>>>>> https://drafts.csswg.org/css-shapes-1/#basic-shape-functions >>>>>> >>>>>> *Summary* >>>>>> The circle() and ellipse() CSS basic-shape functions accept the >>>>>> closest-corner and farthest-corner radius keywords, in addition to the >>>>>> existing closest-side and farthest-side. These keywords resolve to the >>>>>> Euclidean distance from the shape center to the nearest or farthest >>>>>> corner >>>>>> of the reference box, matching the long-standing behavior of >>>>>> radial-gradient(). They work in clip-path, shape-outside, and >>>>>> offset-path, >>>>>> so the same shape syntax accepted by gradients now works for shapes. CL: >>>>>> https://chromium-review.googlesource.com/c/chromium/src/+/7767079 >>>>>> >>>>>> *Blink component* >>>>>> Blink>CSS >>>>>> <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22> >>>>>> >>>>>> *Web Feature ID* >>>>>> shapes <https://webstatus.dev/features/shapes> >>>>>> >>>>>> *Motivation* >>>>>> The <radial-extent> keywords closest-corner and farthest-corner are >>>>>> defined for radial gradients and have been interoperably supported there >>>>>> for years. The circle() and ellipse() basic-shape syntax in CSS Shapes >>>>>> Module Level 1 shares the <shape-radius> production with gradients, but >>>>>> Blink (and Gecko) only accepted closest-side / farthest-side for the >>>>>> basic >>>>>> shapes. That means authors who want a circle that exactly inscribes the >>>>>> reference box's farthest corner have to hand-compute sqrt(w*w + h*h)/2 or >>>>>> fall back to a radial-gradient() mask, even though the keyword exists in >>>>>> the same value space. This change fills in the missing keywords so basic >>>>>> shapes have the full <radial-extent> set: closest-corner: the distance >>>>>> from >>>>>> the center to the closest corner of the reference box. farthest-corner: >>>>>> the >>>>>> distance from the center to the farthest corner of the reference box. For >>>>>> ellipse(), which accepts two independent <shape-radius> values in current >>>>>> implementations, each axis resolves independently to the corner Euclidean >>>>>> distance. A spec ambiguity exists about whether ellipse() should accept >>>>>> one >>>>>> <radial-extent> covering both axes (per the spec text) or two independent >>>>>> ones (current implementation reality). This was discussed in >>>>>> https://github.com/w3c/csswg-drafts/issues/13814 and the conclusion >>>>>> from the thread was that the existing two-value interpretation is fine to >>>>>> keep. >>>>>> >>>>>> *Initial public proposal* >>>>>> *No information provided* >>>>>> >>>>>> *TAG review* >>>>>> *No information provided* >>>>>> >>>>>> *TAG review status* >>>>>> Not applicable >>>>>> >>>>>> *Goals for experimentation* >>>>>> None >>>>>> >>>>>> *Risks* >>>>>> >>>>>> >>>>>> *Interoperability and Compatibility* >>>>>> *No information provided* >>>>>> >>>>>> *Gecko*: No signal >>>>>> >>>>>> *WebKit*: No signal >>>>>> >>>>>> Can we request signals? >>>>>> >>>>>> >>>>>> *Web developers*: No signals >>>>>> >>>>>> *Other signals*: >>>>>> >>>>>> *WebView application risks* >>>>>> >>>>>> Does this intent deprecate or change behavior of existing APIs, such >>>>>> that it has potentially high risk for Android WebView-based applications? >>>>>> *No information provided* >>>>>> >>>>>> >>>>>> *Debuggability* >>>>>> *No information provided* >>>>>> >>>>>> *Will this feature be supported on all six Blink platforms (Windows, >>>>>> Mac, Linux, ChromeOS, Android, and Android WebView)?* >>>>>> No >>>>>> >>>>>> Why not? >>>>>> >>>>>> >>>>>> *Is this feature fully tested by web-platform-tests >>>>>> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?* >>>>>> Yes >>>>>> >>>>>> >>>>>> *Flag name on about://flags* >>>>>> *No information provided* >>>>>> >>>>>> *Finch feature name* >>>>>> BasicShapeCornerRadius >>>>>> >>>>>> *Rollout plan* >>>>>> Will ship enabled for all users >>>>>> >>>>>> *Requires code in //chrome?* >>>>>> False >>>>>> >>>>>> *Tracking bug* >>>>>> https://crbug.com/361617757 >>>>>> >>>>>> *Estimated milestones* >>>>>> Shipping on desktop 155 >>>>>> Shipping on Android 155 >>>>>> Shipping on WebView 155 >>>>>> Shipping on iOS 155 >>>>>> >>>>>> *Anticipated spec changes* >>>>>> >>>>>> Open questions about a feature may be a source of future web compat >>>>>> or interop issues. Please list open issues (e.g. links to known github >>>>>> issues in the project for the feature specification) whose resolution may >>>>>> introduce web compat/interop risk (e.g., changing to naming or structure >>>>>> of >>>>>> the API in a non-backward-compatible way). >>>>>> *No information provided* >>>>>> >>>>>> *Link to entry on the Chrome Platform Status* >>>>>> >>>>>> https://chromestatus.com/feature/5100672946143232?gate=5910108950364160 >>>>>> >>>>>> This intent message was generated by Chrome Platform Status >>>>>> <https://chromestatus.com/>. >>>>>> >>>>>> -- >>>>>> You received this message because you are subscribed to the Google >>>>>> Groups "blink-dev" group. >>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>> send an email to [email protected]. >>>>>> To view this discussion visit >>>>>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFmjHKSp4M_xW9Y4_1x56p_kLHBsY8_NdBUgYAqLjcKTUUsS2w%40mail.gmail.com >>>>>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFmjHKSp4M_xW9Y4_1x56p_kLHBsY8_NdBUgYAqLjcKTUUsS2w%40mail.gmail.com?utm_medium=email&utm_source=footer> >>>>>> . >>>>>> >>>>>> -- >>>> You received this message because you are subscribed to the Google >>>> Groups "blink-dev" group. >>>> To unsubscribe from this group and stop receiving emails from it, send >>>> an email to [email protected]. >>>> To view this discussion visit >>>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFmjHKQp%3DoqVbRRX_iUxx3hn7_24XDW_vG5Sb1kJEvrQhUEWCg%40mail.gmail.com >>>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFmjHKQp%3DoqVbRRX_iUxx3hn7_24XDW_vG5Sb1kJEvrQhUEWCg%40mail.gmail.com?utm_medium=email&utm_source=footer> >>>> . >>>> >>> -- >>> You received this message because you are subscribed to the Google >>> Groups "blink-dev" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to [email protected]. >>> >>> To view this discussion visit >>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw-XQD4u7_3N5i9z7MupFRq_jJVQ5WK5ABwJyr6t6o9_bg%40mail.gmail.com >>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw-XQD4u7_3N5i9z7MupFRq_jJVQ5WK5ABwJyr6t6o9_bg%40mail.gmail.com?utm_medium=email&utm_source=footer> >>> . >>> >>> -- > You received this message because you are subscribed to the Google Groups > "blink-dev" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion visit > https://groups.google.com/a/chromium.org/d/msgid/blink-dev/f68dc11f-78a5-4b7f-a0f3-cc397934aa2c%40chromium.org > <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/f68dc11f-78a5-4b7f-a0f3-cc397934aa2c%40chromium.org?utm_medium=email&utm_source=footer> > . > -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOmohS%2B2u4AdJRMbLmnTe9m5Ja%2B9vkSLYQy0KZLL2VQ059Tsbg%40mail.gmail.com.
