Skip to content

Add clip-path with basic shapes - #208

Merged
TylerBrinks merged 1 commit into
TylerBrinks:masterfrom
jhaygood86:feature/clip-path-basic-shapes
Jul 23, 2026
Merged

Add clip-path with basic shapes#208
TylerBrinks merged 1 commit into
TylerBrinks:masterfrom
jhaygood86:feature/clip-path-basic-shapes

Conversation

@jhaygood86

Copy link
Copy Markdown
Contributor

Feature

Adds clip-path (CSS Masking 1 §5.1) with the <basic-shape> functions (CSS Shapes 1 §3):

clip-path: none;
clip-path: circle(50% at center);
clip-path: ellipse(closest-side farthest-side at 30% 40%);
clip-path: inset(10px 20px round 5px);
clip-path: polygon(evenodd, 0 0, 100% 0, 50% 100%);

Implementation

ClipPathValueConverter accepts none or one of polygon() / inset() / circle() / ellipse(), validating each function's argument grammar and preserving the authored text:

  • polygon — optional <fill-rule> (nonzero/evenodd), then a comma list of <length-percentage> <length-percentage> vertices
  • inset — 1–4 <length-percentage> offsets, optional round <border-radius>
  • circle — optional <shape-radius> (a non-negative length-percentage, closest-side, or farthest-side), optional at <position>
  • ellipse — same, with two radii

Negative radii, the wrong number of radii, incomplete vertices, a bare round, and unknown values are all rejected.

The <geometry-box> and url() reference-box forms are out of scope.

Tests

29 cases in PropertyTests/ClipPathProperty.cs: 16 legal shapes, 11 malformed (banana, circle(-5px), ellipse(50%), three-radius ellipse, inset(), inset(10px round), five-offset inset, incomplete polygon vertex, empty polygon, circle(at), two-radius circle), and a text-preservation check.

The legal and illegal cases fail on master (the property is unknown). The full suite (1263 existing tests) stays green, and all seven target frameworks build with no new warnings.

clip-path (CSS Masking 1 5.1) had no support. Add a ClipPathValueConverter
accepting "none" or a <basic-shape> - polygon(), inset(), circle() or
ellipse() (CSS Shapes 1 3) - with its argument grammar validated
(fill-rule and vertex pairs for polygon; 1-4 offsets and an optional
"round" radius for inset; an optional shape-radius and "at <position>"
for circle/ellipse), and preserving the authored text. Negative radii,
wrong radius counts, incomplete vertices and unknown values are
rejected. Registered as an animatable ClipPathProperty.

The <geometry-box> and url() reference-box forms are out of scope.
@jhaygood86
jhaygood86 marked this pull request as ready for review July 22, 2026 22:52
@TylerBrinks
TylerBrinks merged commit 170cce3 into TylerBrinks:master Jul 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants