Add clipping, shapes and masking #1649

jamesnw · 2024-08-22T20:04:40Z

Targeting the CSS4 "Clipping, shapes & masking" group.

Clip-path (needed for Cover the features listed in the State Of XYZ surveys #1624)
Shapes (needed for Cover the features listed in the State Of XYZ surveys #1624)
Add group to Masks
Merge with masks-
- mask-composite
- mask-mode
New mask stories
- mask-border (different compat story, use case)
- mask-type (only applies to SVG , discrete feature)

captainbrosset · 2024-08-23T09:25:51Z

groups/clipping-shapes-masking.yml

@@ -0,0 +1,2 @@
+name: Clipping, shapes and masking
+parent: css


The potential issue with this group is that it now contains features that apply to both CSS and SVG.
Your features make sense to me, and I'm fine with making them apply to both languages, if others are. But in that case, we need to make this group belong to both CSS and SVG (which is not possible today).

Good point- I've been thinking we will need to address the overlap between CSS and SVG more thoroughly at some point. Allowing for multiple parents for a group would be complex, so I'll remove the parent group here for now.

…asking

jamesnw · 2024-08-23T15:59:47Z

features/path-shape.yml.dist

This is a bit of a surprising result- these features do have some implementation, and I'm not sure if I'm misreading the BCD data, or if there is a bug in generating this.

jamesnw · 2024-08-28T13:45:26Z

I just saw #1129, which is blocked with more conversation in #1128.

…asking

mirisuzanne

I like this way of breaking things out to clarify the support for various parts. Left a few comments on things that I think could be clarified.

mirisuzanne · 2024-09-16T18:21:21Z

features/clip-path-animatable.yml

@@ -0,0 +1,6 @@
+name: Animatable clipping paths
+description: Clipping paths in CSS are animated using transitions and CSS animations.


Suggested change

description: Clipping paths in CSS are animated using transitions and CSS animations.

description: Clipping paths in CSS are animated using CSS transitions and animations.

mirisuzanne · 2024-09-16T18:23:12Z

features/clip-path-animatable.yml

@@ -0,0 +1,6 @@
+name: Animatable clipping paths
+description: Clipping paths in CSS are animated using transitions and CSS animations.
+spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path


The 'current' spec:

Suggested change

spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path

spec: https://www.w3.org/TR/css-masking/#the-clip-path

I would update the other spec links to match.

I'll defer this until resolution of #1785

mirisuzanne · 2024-09-16T18:28:57Z

features/clip-path-boxes.yml

@@ -0,0 +1,8 @@
+name: Clip path boxes
+description: The `fill-box`, `stroke-box`, and `view-box` values for the `clip-path` set the part of the shape that will be used to clip the element.


Suggested change

description: The `fill-box`, `stroke-box`, and `view-box` values for the `clip-path` set the part of the shape that will be used to clip the element.

description: The `fill-box`, `stroke-box`, and `view-box` values for `clip-path` set an edge of the elements box to use as the clipping shape.

I added an apostrophe in element's but wanted to verify that was the intent.

the intent was possessive, but I'm dyslexic. The element has a box. :)

I just wanted to confirm it wasn't like attorneys general or something 😆

…asking

ddbeck · 2024-09-18T14:00:27Z

features/path-shape.yml

@@ -0,0 +1,10 @@
+name: "`path()` shape"


Let's do this feature in a separate PR (from synchronous discussion)

To elaborate here: the BCD data is very messy. It has subfeatures to describe support in d, shape-outside, and offset-path, but also represents that information as partial support on path. It ought to do one or the other. We'll need to fix this in BCD.

(Please @ me on that PR, when you open it.)

Moved to #1799

ddbeck

A couple small requests and elaborations on previous requests

features/clip-path-animatable.yml

features/clip-path.yml

features/mask-type.yml

ddbeck · 2024-09-18T14:58:47Z

features/path-shape.yml

@@ -0,0 +1,10 @@
+name: "`path()` shape"


To elaborate here: the BCD data is very messy. It has subfeatures to describe support in d, shape-outside, and offset-path, but also represents that information as partial support on path. It ought to do one or the other. We'll need to fix this in BCD.

(Please @ me on that PR, when you open it.)

…anch 'main' of github.com:web-platform-dx/web-features into masking

ddbeck

There's a typo to fix, otherwise this is ready to go. Thank you!

features/clip-path.yml

Co-authored-by: Daniel D. Beck <[email protected]>

…asking

Add clip-path

ccfbbe4

github-actions bot added the feature definition Creating or defining new features or groups of features. label Aug 22, 2024

captainbrosset reviewed Aug 23, 2024

View reviewed changes

jamesnw added 3 commits August 23, 2024 10:15

Merge branch 'main' of github.com:web-platform-dx/web-features into m…

44d926c

…asking

Add shape, path-shape, shape-outside

4c4cea6

Format

03371d7

jamesnw commented Aug 23, 2024

View reviewed changes

jamesnw added 2 commits August 23, 2024 13:32

Add masking

2073278

Format

5a0a03f

jamesnw marked this pull request as ready for review August 23, 2024 17:36

jamesnw mentioned this pull request Aug 23, 2024

Cover the features listed in the State Of XYZ surveys #1624

Open

Merge branch 'main' into masking

8008e5d

jamesnw added 2 commits September 9, 2024 14:52

Merge branch 'main' of github.com:web-platform-dx/web-features into m…

945cf79

…asking

Add offset-path to path-shape

47a127f

mirisuzanne reviewed Sep 16, 2024

View reviewed changes

jamesnw added 4 commits September 16, 2024 16:04

Merge branch 'main' of github.com:web-platform-dx/web-features into m…

285b6db

…asking

Reviews

9a5137f

Merge branch 'main' of github.com:web-platform-dx/web-features into m…

f5e1e26

…asking

Add mask-image keys

735b990

ddbeck reviewed Sep 18, 2024

View reviewed changes

ddbeck requested changes Sep 18, 2024

View reviewed changes

jamesnw added 3 commits September 18, 2024 11:52

Merge branch 'masking' of https://github.com/oddbird/web-features; br…

19a4493

…anch 'main' of github.com:web-platform-dx/web-features into masking

Review

f1758ca

Remove path-shape

d4b7d39

jamesnw mentioned this pull request Sep 18, 2024

Add path shape #1799

Merged

jamesnw requested a review from ddbeck September 18, 2024 16:12

ddbeck approved these changes Sep 18, 2024

View reviewed changes

features/clip-path.yml Outdated Show resolved Hide resolved

jamesnw and others added 2 commits September 18, 2024 12:41

Update clip-path.yml

3e4a0a6

Co-authored-by: Daniel D. Beck <[email protected]>

Merge branch 'main' of github.com:web-platform-dx/web-features into m…

2f575f6

…asking

ddbeck merged commit 5b96b7f into web-platform-dx:main Sep 19, 2024
3 checks passed

jamesnw mentioned this pull request Oct 10, 2024

Add clip-path #1129

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add clipping, shapes and masking #1649

Add clipping, shapes and masking #1649

jamesnw commented Aug 22, 2024 •

edited

Loading

captainbrosset Aug 23, 2024

jamesnw Aug 23, 2024

jamesnw Aug 23, 2024

jamesnw commented Aug 28, 2024

mirisuzanne left a comment

mirisuzanne Sep 16, 2024

mirisuzanne Sep 16, 2024

jamesnw Sep 16, 2024

mirisuzanne Sep 16, 2024

jamesnw Sep 16, 2024

mirisuzanne Sep 16, 2024

jamesnw Sep 16, 2024

ddbeck Sep 18, 2024

ddbeck Sep 18, 2024

jamesnw Sep 18, 2024

ddbeck left a comment

ddbeck Sep 18, 2024

ddbeck left a comment

		@@ -0,0 +1,2 @@
		name: Clipping, shapes and masking
		parent: css

		@@ -0,0 +1,6 @@
		name: Animatable clipping paths
		description: Clipping paths in CSS are animated using transitions and CSS animations.

	spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path
	spec: https://www.w3.org/TR/css-masking/#the-clip-path

		@@ -0,0 +1,8 @@
		name: Clip path boxes
		description: The `fill-box`, `stroke-box`, and `view-box` values for the `clip-path` set the part of the shape that will be used to clip the element.

Add clipping, shapes and masking #1649

Add clipping, shapes and masking #1649

Conversation

jamesnw commented Aug 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jamesnw commented Aug 28, 2024

mirisuzanne left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ddbeck left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ddbeck left a comment

Choose a reason for hiding this comment

jamesnw commented Aug 22, 2024 •

edited

Loading