Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add clipping, shapes and masking #1649

Merged
merged 18 commits into from
Sep 19, 2024
Merged

Add clipping, shapes and masking #1649

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
ccfbbe4
Add clip-path
jamesnw Aug 22, 2024
44d926c
Merge branch 'main' of github.com:web-platform-dx/web-features into m…
jamesnw Aug 23, 2024
4c4cea6
Add shape, path-shape, shape-outside
jamesnw Aug 23, 2024
03371d7
Format
jamesnw Aug 23, 2024
2073278
Add masking
jamesnw Aug 23, 2024
5a0a03f
Format
jamesnw Aug 23, 2024
8008e5d
Merge branch 'main' into masking
jamesnw Aug 28, 2024
945cf79
Merge branch 'main' of github.com:web-platform-dx/web-features into m…
jamesnw Sep 9, 2024
47a127f
Add offset-path to path-shape
jamesnw Sep 9, 2024
285b6db
Merge branch 'main' of github.com:web-platform-dx/web-features into m…
jamesnw Sep 16, 2024
9a5137f
Reviews
jamesnw Sep 16, 2024
f5e1e26
Merge branch 'main' of github.com:web-platform-dx/web-features into m…
jamesnw Sep 17, 2024
735b990
Add mask-image keys
jamesnw Sep 17, 2024
19a4493
Merge branch 'masking' of https://github.com/oddbird/web-features; br…
jamesnw Sep 18, 2024
f1758ca
Review
jamesnw Sep 18, 2024
d4b7d39
Remove path-shape
jamesnw Sep 18, 2024
3e4a0a6
Update clip-path.yml
jamesnw Sep 18, 2024
2f575f6
Merge branch 'main' of github.com:web-platform-dx/web-features into m…
jamesnw Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions features/clip-path-animatable.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
name: Animatable clipping paths
description: Clipping paths in CSS are animated using CSS transitions and animations.
jamesnw marked this conversation as resolved.
Show resolved Hide resolved
spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I'll defer this until resolution of #1785

group: clipping-shapes-masking
compat_features:
- css.properties.clip-path.is_animatable
13 changes: 13 additions & 0 deletions features/clip-path-animatable.yml.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Generated from: clip-path-animatable.yml
# Do not edit this file by hand. Edit the source file instead!

status:
baseline: false
support:
chrome: "55"
chrome_android: "55"
edge: "79"
firefox: "49"
firefox_android: "49"
compat_features:
- css.properties.clip-path.is_animatable
8 changes: 8 additions & 0 deletions features/clip-path-boxes.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
name: Clip path boxes
description: The `fill-box`, `stroke-box`, and `view-box` values for `clip-path` set an edge of the element's box to use as the clipping shape.
spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path
group: clipping-shapes-masking
compat_features:
- css.properties.clip-path.fill-box
- css.properties.clip-path.stroke-box
- css.properties.clip-path.view-box
39 changes: 39 additions & 0 deletions features/clip-path-boxes.yml.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# Generated from: clip-path-boxes.yml
# Do not edit this file by hand. Edit the source file instead!

status:
baseline: low
baseline_low_date: 2023-11-02
support:
chrome: "119"
chrome_android: "119"
edge: "119"
firefox: ≤72
firefox_android: "79"
safari: "13.1"
safari_ios: "13.4"
compat_features:
# baseline: low
# baseline_low_date: 2023-11-02
# support:
# chrome: "119"
# chrome_android: "119"
# edge: "119"
# firefox: "51"
# firefox_android: "51"
# safari: "13.1"
# safari_ios: "13.4"
- css.properties.clip-path.fill-box
- css.properties.clip-path.stroke-box

# baseline: low
# baseline_low_date: 2023-11-02
# support:
# chrome: "119"
# chrome_android: "119"
# edge: "119"
# firefox: ≤72
# firefox_android: "79"
# safari: ≤13.1
# safari_ios: ≤13.4
- css.properties.clip-path.view-box
19 changes: 19 additions & 0 deletions features/clip-path.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
name: clip-path
description: The `clip-path` CSS property and SVG attribute sets an area of an element that should be displayed. Everything outside the area will be hidden.
jamesnw marked this conversation as resolved.
Show resolved Hide resolved
spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path
# caniuse groups more clip-path features and tells a spottier support story.
# caniuse: css-clip-path
group: clipping-shapes-masking
compat_features:
- css.properties.clip-path
- css.properties.clip-path.basic_shape
- css.properties.clip-path.html_elements
- css.properties.clip-path.path
- css.properties.clip-path.svg_elements
- svg.global_attributes.clip-path
- api.SVGClipPathElement
- api.SVGClipPathElement.clipPathUnits
- api.SVGClipPathElement.transform
- svg.elements.clipPath
- svg.elements.clipPath.clipPathUnits
- svg.elements.clipPath.systemLanguage
124 changes: 124 additions & 0 deletions features/clip-path.yml.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
# Generated from: clip-path.yml
# Do not edit this file by hand. Edit the source file instead!

status:
baseline: high
baseline_low_date: 2021-01-21
baseline_high_date: 2023-07-21
support:
chrome: "88"
chrome_android: "88"
edge: "88"
firefox: "71"
firefox_android: "79"
safari: "13.1"
safari_ios: "13"
compat_features:
# baseline: high
# baseline_low_date: 2015-07-29
# baseline_high_date: 2018-01-29
# support:
# chrome: "1"
# chrome_android: "18"
# edge: "12"
# firefox: "1.5"
# firefox_android: "4"
# safari: "3"
# safari_ios: "1"
- api.SVGClipPathElement
- api.SVGClipPathElement.clipPathUnits
- api.SVGClipPathElement.transform

# baseline: high
# baseline_low_date: 2015-07-29
# baseline_high_date: 2018-01-29
# support:
# chrome: "1"
# chrome_android: "18"
# edge: "12"
# firefox: "1.5"
# firefox_android: "4"
# safari: "3"
# safari_ios: "3"
- svg.elements.clipPath
- svg.elements.clipPath.clipPathUnits

# baseline: high
# baseline_low_date: 2015-07-29
# baseline_high_date: 2018-01-29
# support:
# chrome: "1"
# chrome_android: "18"
# edge: "12"
# firefox: "12"
# firefox_android: "14"
# safari: "3"
# safari_ios: "3"
- svg.elements.clipPath.systemLanguage

# baseline: high
# baseline_low_date: 2017-03-07
# baseline_high_date: 2019-09-07
# support:
# chrome: "23"
# chrome_android: "25"
# edge: "12"
# firefox: "52"
# firefox_android: "52"
# safari: "7"
# safari_ios: "7"
- svg.global_attributes.clip-path

# baseline: high
# baseline_low_date: 2020-01-15
# baseline_high_date: 2022-07-15
# support:
# chrome: "55"
# chrome_android: "55"
# edge: "79"
# firefox: "3.5"
# firefox_android: "4"
# safari: "9.1"
# safari_ios: "9.3"
- css.properties.clip-path
- css.properties.clip-path.html_elements

# baseline: high
# baseline_low_date: 2020-01-15
# baseline_high_date: 2022-07-15
# support:
# chrome: "55"
# chrome_android: "55"
# edge: "79"
# firefox: "52"
# firefox_android: "52"
# safari: "9.1"
# safari_ios: "9.3"
- css.properties.clip-path.svg_elements

# baseline: high
# baseline_low_date: 2020-01-15
# baseline_high_date: 2022-07-15
# support:
# chrome: "55"
# chrome_android: "55"
# edge: "79"
# firefox: "54"
# firefox_android: "54"
# safari: "9.1"
# safari_ios: "9.3"
- css.properties.clip-path.basic_shape

# ⬇️ Same status as overall feature ⬇️
# baseline: high
# baseline_low_date: 2021-01-21
# baseline_high_date: 2023-07-21
# support:
# chrome: "88"
# chrome_android: "88"
# edge: "88"
# firefox: "71"
# firefox_android: "79"
# safari: "13.1"
# safari_ios: "13"
- css.properties.clip-path.path
11 changes: 11 additions & 0 deletions features/mask-border.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
name: mask-border
description: The `mask-border` CSS property sets how the edges of an element are masked. It is a shorthand for `mask-border-outset`, `mask-border-repeat`, `mask-border-slice`, `mask-border-source`, and `mask-border-width`.
spec: https://drafts.fxtf.org/css-masking-1/#mask-borders
group: clipping-shapes-masking
compat_features:
- css.properties.mask-border
- css.properties.mask-border-outset
- css.properties.mask-border-repeat
- css.properties.mask-border-slice
- css.properties.mask-border-source
- css.properties.mask-border-width
14 changes: 14 additions & 0 deletions features/mask-border.yml.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Generated from: mask-border.yml
# Do not edit this file by hand. Edit the source file instead!

status:
baseline: false
support:
safari: "17.2"
compat_features:
- css.properties.mask-border
- css.properties.mask-border-outset
- css.properties.mask-border-repeat
- css.properties.mask-border-slice
- css.properties.mask-border-source
- css.properties.mask-border-width
8 changes: 8 additions & 0 deletions features/mask-type.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
name: mask-type
description: The `mask-type` CSS property on an SVG `<mask>` sets whether the mask is a `luminance` or `alpha` mask.
jamesnw marked this conversation as resolved.
Show resolved Hide resolved
spec: https://drafts.fxtf.org/css-masking-1/#the-mask-type
group: clipping-shapes-masking
compat_features:
- css.properties.mask-type
- css.properties.mask-type.alpha
- css.properties.mask-type.luminance
19 changes: 19 additions & 0 deletions features/mask-type.yml.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# Generated from: mask-type.yml
# Do not edit this file by hand. Edit the source file instead!

status:
baseline: high
baseline_low_date: 2020-01-15
baseline_high_date: 2022-07-15
support:
chrome: "24"
chrome_android: "25"
edge: "79"
firefox: "35"
firefox_android: "35"
safari: "7"
safari_ios: "7"
compat_features:
- css.properties.mask-type
- css.properties.mask-type.alpha
- css.properties.mask-type.luminance
20 changes: 20 additions & 0 deletions features/masks.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,24 @@
name: Masks
description: The `mask` CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.
spec: https://drafts.fxtf.org/css-masking-1/#positioned-masks
group: clipping-shapes-masking
caniuse: css-masks
compat_features:
- css.properties.mask
- css.properties.mask-clip
- css.properties.mask-composite
- css.properties.mask-composite.add
- css.properties.mask-composite.exclude
- css.properties.mask-composite.intersect
- css.properties.mask-composite.subtract
- css.properties.mask-image
- css.properties.mask-image.multiple_mask_images
- css.properties.mask-image.svg_masks
- css.properties.mask-mode
- css.properties.mask-mode.alpha
- css.properties.mask-mode.luminance
- css.properties.mask-mode.match-source
- css.properties.mask-origin
- css.properties.mask-position
- css.properties.mask-repeat
- css.properties.mask-size
9 changes: 9 additions & 0 deletions features/masks.yml.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,17 @@ compat_features:
- css.properties.mask
- css.properties.mask-clip
- css.properties.mask-composite
- css.properties.mask-composite.add
- css.properties.mask-composite.exclude
- css.properties.mask-composite.intersect
- css.properties.mask-composite.subtract
- css.properties.mask-image
- css.properties.mask-image.multiple_mask_images
- css.properties.mask-image.svg_masks
- css.properties.mask-mode
- css.properties.mask-mode.alpha
- css.properties.mask-mode.luminance
- css.properties.mask-mode.match-source
- css.properties.mask-origin
- css.properties.mask-position
- css.properties.mask-repeat
Expand Down
10 changes: 10 additions & 0 deletions features/path-shape.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
name: "`path()` shape"
Copy link
Collaborator

Choose a reason for hiding this comment

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

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

Copy link
Collaborator

Choose a reason for hiding this comment

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

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.)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Moved to #1799

description: The `path()` CSS shape function creates an shapes for use with `clip-path`, `shape-outside`, and the `d` property on an SVG.
spec: https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes
group: clipping-shapes-masking
compat_features:
- css.types.basic-shape.path
- css.types.basic-shape.path.clip-path
- css.types.basic-shape.path.d
- css.types.basic-shape.path.shape-outside
- css.types.basic-shape.path.offset-path
12 changes: 12 additions & 0 deletions features/path-shape.yml.dist
View file
Open in desktop
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

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.

Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# Generated from: path-shape.yml
# Do not edit this file by hand. Edit the source file instead!

status:
baseline: false
support: {}
compat_features:
- css.types.basic-shape.path
- css.types.basic-shape.path.clip-path
- css.types.basic-shape.path.d
- css.types.basic-shape.path.offset-path
- css.types.basic-shape.path.shape-outside
17 changes: 17 additions & 0 deletions features/shape-outside.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
name: shape-outside
description: The `shape-outside` CSS property, along with `shape-margin` and `shape-image-threshold`, sets the shape around which adjacent content will wrap.
spec: https://drafts.csswg.org/css-shapes-1/#declaring-shapes
group: clipping-shapes-masking
status:
compute_from: css.properties.shape-outside
compat_features:
- css.properties.shape-image-threshold
- css.properties.shape-margin
- css.properties.shape-outside
- css.properties.shape-outside.none
- css.properties.shape-outside.circle
- css.properties.shape-outside.gradient
- css.properties.shape-outside.image
- css.properties.shape-outside.inset
- css.properties.shape-outside.path
- css.properties.shape-outside.polygon
41 changes: 41 additions & 0 deletions features/shape-outside.yml.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Generated from: shape-outside.yml
# Do not edit this file by hand. Edit the source file instead!

status:
baseline: high
baseline_low_date: 2020-01-15
baseline_high_date: 2022-07-15
support:
chrome: "37"
chrome_android: "37"
edge: "79"
firefox: "62"
firefox_android: "62"
safari: "10.1"
safari_ios: "10.3"
compat_features:
# ⬇️ Same status as overall feature ⬇️
# baseline: high
# baseline_low_date: 2020-01-15
# baseline_high_date: 2022-07-15
# support:
# chrome: "37"
# chrome_android: "37"
# edge: "79"
# firefox: "62"
# firefox_android: "62"
# safari: "10.1"
# safari_ios: "10.3"
- css.properties.shape-image-threshold
- css.properties.shape-margin
- css.properties.shape-outside
- css.properties.shape-outside.circle
- css.properties.shape-outside.gradient
- css.properties.shape-outside.image
- css.properties.shape-outside.inset
- css.properties.shape-outside.none
- css.properties.shape-outside.polygon

# baseline: false
# support: {}
- css.properties.shape-outside.path
Loading