Skip to content

Commit 5b96b7f

Browse files
jamesnwjamesnw
authored
Add clipping, shapes and masking (#1649)
1 parent 594b105 commit 5b96b7f

17 files changed

+410
-0
lines changed

‎features/clip-path-animatable.yml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
name: Animatable clipping paths
2+
description: The `clip-path` property can be animated using CSS transitions and animations.
3+
spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path
4+
group: clipping-shapes-masking
5+
compat_features:
6+
- css.properties.clip-path.is_animatable

‎features/clip-path-animatable.yml.dist

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Generated from: clip-path-animatable.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: false
6+
support:
7+
chrome: "55"
8+
chrome_android: "55"
9+
edge: "79"
10+
firefox: "49"
11+
firefox_android: "49"
12+
compat_features:
13+
- css.properties.clip-path.is_animatable

‎features/clip-path-boxes.yml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
name: Clip path boxes
2+
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.
3+
spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path
4+
group: clipping-shapes-masking
5+
compat_features:
6+
- css.properties.clip-path.fill-box
7+
- css.properties.clip-path.stroke-box
8+
- css.properties.clip-path.view-box

‎features/clip-path-boxes.yml.dist

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Generated from: clip-path-boxes.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: low
6+
baseline_low_date: 2023-11-02
7+
support:
8+
chrome: "119"
9+
chrome_android: "119"
10+
edge: "119"
11+
firefox: ≤72
12+
firefox_android: "79"
13+
safari: "13.1"
14+
safari_ios: "13.4"
15+
compat_features:
16+
# baseline: low
17+
# baseline_low_date: 2023-11-02
18+
# support:
19+
# chrome: "119"
20+
# chrome_android: "119"
21+
# edge: "119"
22+
# firefox: "51"
23+
# firefox_android: "51"
24+
# safari: "13.1"
25+
# safari_ios: "13.4"
26+
- css.properties.clip-path.fill-box
27+
- css.properties.clip-path.stroke-box
28+
29+
# baseline: low
30+
# baseline_low_date: 2023-11-02
31+
# support:
32+
# chrome: "119"
33+
# chrome_android: "119"
34+
# edge: "119"
35+
# firefox: ≤72
36+
# firefox_android: "79"
37+
# safari: ≤13.1
38+
# safari_ios: ≤13.4
39+
- css.properties.clip-path.view-box

‎features/clip-path.yml

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
name: clip-path
2+
description: The `clip-path` CSS property and SVG attribute set the visible area of an element. Everything outside the area will be hidden.
3+
spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path
4+
# caniuse groups more clip-path features and tells a spottier support story.
5+
# caniuse: css-clip-path
6+
group: clipping-shapes-masking
7+
compat_features:
8+
- css.properties.clip-path
9+
- css.properties.clip-path.basic_shape
10+
- css.properties.clip-path.html_elements
11+
- css.properties.clip-path.path
12+
- css.properties.clip-path.svg_elements
13+
- svg.global_attributes.clip-path
14+
- api.SVGClipPathElement
15+
- api.SVGClipPathElement.clipPathUnits
16+
- api.SVGClipPathElement.transform
17+
- svg.elements.clipPath
18+
- svg.elements.clipPath.clipPathUnits
19+
- svg.elements.clipPath.systemLanguage

‎features/clip-path.yml.dist

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# Generated from: clip-path.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: high
6+
baseline_low_date: 2021-01-21
7+
baseline_high_date: 2023-07-21
8+
support:
9+
chrome: "88"
10+
chrome_android: "88"
11+
edge: "88"
12+
firefox: "71"
13+
firefox_android: "79"
14+
safari: "13.1"
15+
safari_ios: "13"
16+
compat_features:
17+
# baseline: high
18+
# baseline_low_date: 2015-07-29
19+
# baseline_high_date: 2018-01-29
20+
# support:
21+
# chrome: "1"
22+
# chrome_android: "18"
23+
# edge: "12"
24+
# firefox: "1.5"
25+
# firefox_android: "4"
26+
# safari: "3"
27+
# safari_ios: "1"
28+
- api.SVGClipPathElement
29+
- api.SVGClipPathElement.clipPathUnits
30+
- api.SVGClipPathElement.transform
31+
32+
# baseline: high
33+
# baseline_low_date: 2015-07-29
34+
# baseline_high_date: 2018-01-29
35+
# support:
36+
# chrome: "1"
37+
# chrome_android: "18"
38+
# edge: "12"
39+
# firefox: "1.5"
40+
# firefox_android: "4"
41+
# safari: "3"
42+
# safari_ios: "3"
43+
- svg.elements.clipPath
44+
- svg.elements.clipPath.clipPathUnits
45+
46+
# baseline: high
47+
# baseline_low_date: 2015-07-29
48+
# baseline_high_date: 2018-01-29
49+
# support:
50+
# chrome: "1"
51+
# chrome_android: "18"
52+
# edge: "12"
53+
# firefox: "12"
54+
# firefox_android: "14"
55+
# safari: "3"
56+
# safari_ios: "3"
57+
- svg.elements.clipPath.systemLanguage
58+
59+
# baseline: high
60+
# baseline_low_date: 2017-03-07
61+
# baseline_high_date: 2019-09-07
62+
# support:
63+
# chrome: "23"
64+
# chrome_android: "25"
65+
# edge: "12"
66+
# firefox: "52"
67+
# firefox_android: "52"
68+
# safari: "7"
69+
# safari_ios: "7"
70+
- svg.global_attributes.clip-path
71+
72+
# baseline: high
73+
# baseline_low_date: 2020-01-15
74+
# baseline_high_date: 2022-07-15
75+
# support:
76+
# chrome: "55"
77+
# chrome_android: "55"
78+
# edge: "79"
79+
# firefox: "3.5"
80+
# firefox_android: "4"
81+
# safari: "9.1"
82+
# safari_ios: "9.3"
83+
- css.properties.clip-path
84+
- css.properties.clip-path.html_elements
85+
86+
# baseline: high
87+
# baseline_low_date: 2020-01-15
88+
# baseline_high_date: 2022-07-15
89+
# support:
90+
# chrome: "55"
91+
# chrome_android: "55"
92+
# edge: "79"
93+
# firefox: "52"
94+
# firefox_android: "52"
95+
# safari: "9.1"
96+
# safari_ios: "9.3"
97+
- css.properties.clip-path.svg_elements
98+
99+
# baseline: high
100+
# baseline_low_date: 2020-01-15
101+
# baseline_high_date: 2022-07-15
102+
# support:
103+
# chrome: "55"
104+
# chrome_android: "55"
105+
# edge: "79"
106+
# firefox: "54"
107+
# firefox_android: "54"
108+
# safari: "9.1"
109+
# safari_ios: "9.3"
110+
- css.properties.clip-path.basic_shape
111+
112+
# ⬇️ Same status as overall feature ⬇️
113+
# baseline: high
114+
# baseline_low_date: 2021-01-21
115+
# baseline_high_date: 2023-07-21
116+
# support:
117+
# chrome: "88"
118+
# chrome_android: "88"
119+
# edge: "88"
120+
# firefox: "71"
121+
# firefox_android: "79"
122+
# safari: "13.1"
123+
# safari_ios: "13"
124+
- css.properties.clip-path.path

‎features/mask-border.yml

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
name: mask-border
2+
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`.
3+
spec: https://drafts.fxtf.org/css-masking-1/#mask-borders
4+
group: clipping-shapes-masking
5+
compat_features:
6+
- css.properties.mask-border
7+
- css.properties.mask-border-outset
8+
- css.properties.mask-border-repeat
9+
- css.properties.mask-border-slice
10+
- css.properties.mask-border-source
11+
- css.properties.mask-border-width

‎features/mask-border.yml.dist

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Generated from: mask-border.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: false
6+
support:
7+
safari: "17.2"
8+
compat_features:
9+
- css.properties.mask-border
10+
- css.properties.mask-border-outset
11+
- css.properties.mask-border-repeat
12+
- css.properties.mask-border-slice
13+
- css.properties.mask-border-source
14+
- css.properties.mask-border-width

‎features/mask-type.yml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
name: mask-type
2+
description: The `mask-type` CSS property on an SVG `<mask>` element sets whether the mask is a `luminance` or `alpha` mask.
3+
spec: https://drafts.fxtf.org/css-masking-1/#the-mask-type
4+
group: clipping-shapes-masking
5+
compat_features:
6+
- css.properties.mask-type
7+
- css.properties.mask-type.alpha
8+
- css.properties.mask-type.luminance

‎features/mask-type.yml.dist

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Generated from: mask-type.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: high
6+
baseline_low_date: 2020-01-15
7+
baseline_high_date: 2022-07-15
8+
support:
9+
chrome: "24"
10+
chrome_android: "25"
11+
edge: "79"
12+
firefox: "35"
13+
firefox_android: "35"
14+
safari: "7"
15+
safari_ios: "7"
16+
compat_features:
17+
- css.properties.mask-type
18+
- css.properties.mask-type.alpha
19+
- css.properties.mask-type.luminance

‎features/masks.yml

+20
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,24 @@
11
name: Masks
22
description: The `mask` CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.
33
spec: https://drafts.fxtf.org/css-masking-1/#positioned-masks
4+
group: clipping-shapes-masking
45
caniuse: css-masks
6+
compat_features:
7+
- css.properties.mask
8+
- css.properties.mask-clip
9+
- css.properties.mask-composite
10+
- css.properties.mask-composite.add
11+
- css.properties.mask-composite.exclude
12+
- css.properties.mask-composite.intersect
13+
- css.properties.mask-composite.subtract
14+
- css.properties.mask-image
15+
- css.properties.mask-image.multiple_mask_images
16+
- css.properties.mask-image.svg_masks
17+
- css.properties.mask-mode
18+
- css.properties.mask-mode.alpha
19+
- css.properties.mask-mode.luminance
20+
- css.properties.mask-mode.match-source
21+
- css.properties.mask-origin
22+
- css.properties.mask-position
23+
- css.properties.mask-repeat
24+
- css.properties.mask-size

‎features/masks.yml.dist

+9
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,17 @@ compat_features:
1616
- css.properties.mask
1717
- css.properties.mask-clip
1818
- css.properties.mask-composite
19+
- css.properties.mask-composite.add
20+
- css.properties.mask-composite.exclude
21+
- css.properties.mask-composite.intersect
22+
- css.properties.mask-composite.subtract
1923
- css.properties.mask-image
24+
- css.properties.mask-image.multiple_mask_images
25+
- css.properties.mask-image.svg_masks
2026
- css.properties.mask-mode
27+
- css.properties.mask-mode.alpha
28+
- css.properties.mask-mode.luminance
29+
- css.properties.mask-mode.match-source
2130
- css.properties.mask-origin
2231
- css.properties.mask-position
2332
- css.properties.mask-repeat

‎features/shape-outside.yml

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
name: shape-outside
2+
description: The `shape-outside` CSS property, along with `shape-margin` and `shape-image-threshold`, sets the shape around which adjacent content will wrap.
3+
spec: https://drafts.csswg.org/css-shapes-1/#declaring-shapes
4+
group: clipping-shapes-masking
5+
status:
6+
compute_from: css.properties.shape-outside
7+
compat_features:
8+
- css.properties.shape-image-threshold
9+
- css.properties.shape-margin
10+
- css.properties.shape-outside
11+
- css.properties.shape-outside.none
12+
- css.properties.shape-outside.circle
13+
- css.properties.shape-outside.gradient
14+
- css.properties.shape-outside.image
15+
- css.properties.shape-outside.inset
16+
- css.properties.shape-outside.path
17+
- css.properties.shape-outside.polygon

‎features/shape-outside.yml.dist

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Generated from: shape-outside.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: high
6+
baseline_low_date: 2020-01-15
7+
baseline_high_date: 2022-07-15
8+
support:
9+
chrome: "37"
10+
chrome_android: "37"
11+
edge: "79"
12+
firefox: "62"
13+
firefox_android: "62"
14+
safari: "10.1"
15+
safari_ios: "10.3"
16+
compat_features:
17+
# ⬇️ Same status as overall feature ⬇️
18+
# baseline: high
19+
# baseline_low_date: 2020-01-15
20+
# baseline_high_date: 2022-07-15
21+
# support:
22+
# chrome: "37"
23+
# chrome_android: "37"
24+
# edge: "79"
25+
# firefox: "62"
26+
# firefox_android: "62"
27+
# safari: "10.1"
28+
# safari_ios: "10.3"
29+
- css.properties.shape-image-threshold
30+
- css.properties.shape-margin
31+
- css.properties.shape-outside
32+
- css.properties.shape-outside.circle
33+
- css.properties.shape-outside.gradient
34+
- css.properties.shape-outside.image
35+
- css.properties.shape-outside.inset
36+
- css.properties.shape-outside.none
37+
- css.properties.shape-outside.polygon
38+
39+
# baseline: false
40+
# support: {}
41+
- css.properties.shape-outside.path

‎features/shapes.yml

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
name: shapes
2+
description: The `circle()`, `ellipse()`, `inset()`, `polygon()`, `rect()`, and `xywh()` CSS shape functions create shapes for use with `clip-path` and `shape-outside`.
3+
spec: https://drafts.csswg.org/css-shapes-1/#basic-shape-functions
4+
caniuse: css-shapes
5+
group: clipping-shapes-masking
6+
status:
7+
compute_from: css.types.basic-shape
8+
compat_features:
9+
- css.types.basic-shape
10+
- css.types.basic-shape.animation
11+
- css.types.basic-shape.circle
12+
- css.types.basic-shape.ellipse
13+
- css.types.basic-shape.inset
14+
- css.types.basic-shape.polygon
15+
- css.types.basic-shape.rect
16+
- css.types.basic-shape.xywh

0 commit comments

Comments
 (0)