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‎

Lines changed: 6 additions & 0 deletions
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‎

Lines changed: 13 additions & 0 deletions
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‎

Lines changed: 8 additions & 0 deletions
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‎

Lines changed: 39 additions & 0 deletions
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‎

Lines changed: 19 additions & 0 deletions
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‎

Lines changed: 124 additions & 0 deletions
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‎

Lines changed: 11 additions & 0 deletions
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‎

Lines changed: 14 additions & 0 deletions
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‎

Lines changed: 8 additions & 0 deletions
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‎

Lines changed: 19 additions & 0 deletions
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

0 commit comments

Comments
 (0)