Skip to content

Conversation

clavin
Copy link
Member

@clavin clavin commented Jan 13, 2025

Implementation for RFC 12: Corner Smoothing.

Applying border-radius to an element makes its corners circular. This proposal adds "smoother" round corners, controlled by a prefixed CSS property. Applications can use this feature to further integrate with macOS's design language, or simply for aesthetic purposes.

In this PR

  • A medium patch to Blink
    • Metadata, boilerplate, and a few lines of parsing to add the CSS rule: -electron-corner-smoothing
    • Smoothness added to the representation of contoured rectangles
    • Branches in rendering code to handle smooth corners
    • Renderer preference to disable the CSS rule
    • A lot of plumbing (for the preference & CSS value)
  • Geometric implementation of the rendering procedure described in Desperately Seeking Squircles
  • A new WebContents preference: enableCornerSmoothingCSS
    • Plumbing to get this value into Blink
  • Documentation
  • Image-based render tests
    • Only runs in CI (because image-based testing is very difficult)

Notes: Added a CSS rule for smooth corners.

@electron-cation electron-cation bot added the new-pr 🌱 PR opened recently label Jan 13, 2025
@electron-cation electron-cation bot removed the new-pr 🌱 PR opened recently label Jan 20, 2025
@clavin clavin force-pushed the clavin/corner-smoothing branch from 30be714 to 5436ddc Compare February 6, 2025 00:17
@clavin clavin force-pushed the clavin/corner-smoothing branch from d32ff93 to 8a44af0 Compare February 6, 2025 21:13
@clavin clavin force-pushed the clavin/corner-smoothing branch from c35494d to 17224b1 Compare February 14, 2025 05:35
@clavin clavin added semver/minor backwards-compatible functionality target/35-x-y PR should also be added to the "35-x-y" branch. and removed no-backport labels Feb 17, 2025
@clavin clavin marked this pull request as ready for review February 17, 2025 22:15
@clavin clavin requested a review from a team as a code owner February 17, 2025 22:15
Copy link
Member

@samuelmaddock samuelmaddock left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have some minor feedback. Code quality and documentation is great, really nice work!

@clavin clavin requested a review from samuelmaddock February 27, 2025 22:38
@clavin
Copy link
Member Author

clavin commented Mar 10, 2025

The patch has now drifted, so I'm working on getting it back in sync with main.

The patch went from 694 lines to 505 lines, which is a 27.2% smaller!
@clavin
Copy link
Member Author

clavin commented Mar 10, 2025

✅ Updated the patch to address upstream changes, allowing me to cut out 27.2% (a quarter!) of the changes.

Copy link
Member

@samuelmaddock samuelmaddock left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

API LGTM

@jkleinsc jkleinsc merged commit b75e802 into main Mar 24, 2025
56 checks passed
@jkleinsc jkleinsc deleted the clavin/corner-smoothing branch March 24, 2025 15:46
@release-clerk
Copy link

release-clerk bot commented Mar 24, 2025

Release Notes Persisted

Added a CSS rule for smooth corners.

@reitowo
Copy link
Member

reitowo commented Mar 24, 2025

This breaks the e sync. The patch doesn't apply.

image

@ckerr
Copy link
Member

ckerr commented Mar 24, 2025

@reitowo yep, I came here to check in because I'm seeing the same. I'll TAL

@ckerr
Copy link
Member

ckerr commented Mar 24, 2025

Since this is breaking all main builds rn, we should either revert this or patch it quickly.

Some of the conflicts are just normal context shear, so I started to make a PR to fix that. But there are some new upstream changes that conflict with the patch and are directly relevant, e.g. the changes to how FloatRoundedRect() is called in RoundedInnerRectClipper::RoundedInnerRectClipper() . 🤔

CC @clavin

clavin added a commit that referenced this pull request Mar 24, 2025
codebytere pushed a commit that referenced this pull request Mar 24, 2025
Revert "feat: Corner Smoothing CSS rule (#45185)"

This reverts commit b75e802.
clavin added a commit that referenced this pull request Mar 25, 2025
ckerr pushed a commit that referenced this pull request Mar 31, 2025
* feat: Corner Smoothing CSS rule (Reland)

Reland of #45185

* Fix patch conflicts

* fixup! Fix patch conflicts

* Update expected image

The dashed border is subtly different. The new version is correct and the old one was incorrect.
trop bot added a commit that referenced this pull request Mar 31, 2025
ckerr pushed a commit that referenced this pull request Apr 1, 2025
* feat: Corner Smoothing CSS rule (Reland)

Reland of #45185

Co-authored-by: Calvin <[email protected]>

* Fix patch conflicts

Co-authored-by: clavin <[email protected]>

* fixup! Fix patch conflicts

Co-authored-by: clavin <[email protected]>

* Update expected image

The dashed border is subtly different. The new version is correct and the old one was incorrect.

Co-authored-by: clavin <[email protected]>

---------

Co-authored-by: trop[bot] <37223003+trop[bot]@users.noreply.github.com>
Co-authored-by: Calvin <[email protected]>
Co-authored-by: clavin <[email protected]>
kigh-ota pushed a commit to kigh-ota/electron that referenced this pull request Sep 30, 2025
* feat: Corner Smoothing

* Patch Blink to add CSS rule and Painting

* Add `system-ui` keyword

* Add `cornerSmoothingCSS` web preference

* Add tests

* Documentation

* fixup! Documentation

* fix: initialize smoothness value

* Use a 1.0 scale factor in tests

* Fix tests for CI

* Fix tests

* fixup! Merge branch 'main' into clavin/corner-smoothing

* Add code docs

* Document `system-ui` keyword values

* Address review comments

* fixup! Address review comments

* Address review comments

* Update patch to address upstream changes

The patch went from 694 lines to 505 lines, which is a 27.2% smaller!

* fixup! Update patch to address upstream changes
kigh-ota pushed a commit to kigh-ota/electron that referenced this pull request Sep 30, 2025
Revert "feat: Corner Smoothing CSS rule (electron#45185)"

This reverts commit b75e802.
kigh-ota pushed a commit to kigh-ota/electron that referenced this pull request Sep 30, 2025
* feat: Corner Smoothing CSS rule (Reland)

Reland of electron#45185

* Fix patch conflicts

* fixup! Fix patch conflicts

* Update expected image

The dashed border is subtly different. The new version is correct and the old one was incorrect.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants