Add clipping, shapes and masking

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
+group: clipping-shapes-masking
+compat_features:
+  - css.properties.clip-path.is_animatable

features/clip-path-animatable.yml.dist

@@ -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

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

features/clip-path-boxes.yml.dist

@@ -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

features/clip-path.yml

@@ -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.
+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

features/clip-path.yml.dist

@@ -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

features/masks.yml

@@ -1,4 +1,5 @@
 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

features/path-shape.yml

@@ -0,0 +1,9 @@
+name: "`path()` shape"
+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

features/path-shape.yml.dist

@@ -0,0 +1,11 @@
+# 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.shape-outside

features/shape-outside.yml

@@ -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

features/shape-outside.yml.dist

@@ -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

features/shapes.yml

@@ -0,0 +1,16 @@
+name: shapes
+description: The `circle()`, `ellipse()`, `inset()`, `polygon()`, `rect()`, and `xywh()` CSS shape functions create shapes for use with `clip-path` and `shape-outside`.
+spec: https://drafts.csswg.org/css-shapes-1/#basic-shape-functions
+caniuse: css-shapes
+group: clipping-shapes-masking
+status:
+  compute_from: css.types.basic-shape
+compat_features:
+  - css.types.basic-shape
+  - css.types.basic-shape.animation
+  - css.types.basic-shape.circle
+  - css.types.basic-shape.ellipse
+  - css.types.basic-shape.inset
+  - css.types.basic-shape.polygon
+  - css.types.basic-shape.rect
+  - css.types.basic-shape.xywh

features/shapes.yml.dist

@@ -0,0 +1,43 @@
+# Generated from: shapes.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: "54"
+    firefox_android: "54"
+    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: "54"
+  #   firefox_android: "54"
+  #   safari: "10.1"
+  #   safari_ios: "10.3"
+  - css.types.basic-shape
+  - css.types.basic-shape.animation
+  - css.types.basic-shape.circle
+  - css.types.basic-shape.ellipse
+  - css.types.basic-shape.inset
+  - css.types.basic-shape.polygon
+
+  # baseline: false
+  # support:
+  #   firefox: "122"
+  #   firefox_android: "122"
+  #   safari: "17.2"
+  #   safari_ios: "17.2"
+  - css.types.basic-shape.rect
+  - css.types.basic-shape.xywh

groups/clipping-shapes-masking.yml

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