diff --git a/features/clip-path-animatable.yml b/features/clip-path-animatable.yml
new file mode 100644
index 00000000000..380649857ff
--- /dev/null
+++ b/features/clip-path-animatable.yml
@@ -0,0 +1,6 @@
+name: Animatable clipping paths
+description: The `clip-path` property can be animated using CSS transitions and animations.
+spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path
+group: clipping-shapes-masking
+compat_features:
+  - css.properties.clip-path.is_animatable
diff --git a/features/clip-path-animatable.yml.dist b/features/clip-path-animatable.yml.dist
new file mode 100644
index 00000000000..dd0a26fe364
--- /dev/null
+++ b/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
diff --git a/features/clip-path-boxes.yml b/features/clip-path-boxes.yml
new file mode 100644
index 00000000000..a0192ce4873
--- /dev/null
+++ b/features/clip-path-boxes.yml
@@ -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
diff --git a/features/clip-path-boxes.yml.dist b/features/clip-path-boxes.yml.dist
new file mode 100644
index 00000000000..b53505f8abb
--- /dev/null
+++ b/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
diff --git a/features/clip-path.yml b/features/clip-path.yml
new file mode 100644
index 00000000000..00d82bbf6a2
--- /dev/null
+++ b/features/clip-path.yml
@@ -0,0 +1,19 @@
+name: clip-path
+description: The `clip-path` CSS property and SVG attribute set the visible area of an element. 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
diff --git a/features/clip-path.yml.dist b/features/clip-path.yml.dist
new file mode 100644
index 00000000000..d26b04988d1
--- /dev/null
+++ b/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
diff --git a/features/mask-border.yml b/features/mask-border.yml
new file mode 100644
index 00000000000..b5992d1aed8
--- /dev/null
+++ b/features/mask-border.yml
@@ -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
diff --git a/features/mask-border.yml.dist b/features/mask-border.yml.dist
new file mode 100644
index 00000000000..7e0a4fcccb7
--- /dev/null
+++ b/features/mask-border.yml.dist
@@ -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
diff --git a/features/mask-type.yml b/features/mask-type.yml
new file mode 100644
index 00000000000..0ef23223cd0
--- /dev/null
+++ b/features/mask-type.yml
@@ -0,0 +1,8 @@
+name: mask-type
+description: The `mask-type` CSS property on an SVG `<mask>` element sets whether the mask is a `luminance` or `alpha` mask.
+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
diff --git a/features/mask-type.yml.dist b/features/mask-type.yml.dist
new file mode 100644
index 00000000000..ae01630493f
--- /dev/null
+++ b/features/mask-type.yml.dist
@@ -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
diff --git a/features/masks.yml b/features/masks.yml
index f56fcb08e38..d8302cb98c7 100644
--- a/features/masks.yml
+++ b/features/masks.yml
@@ -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
diff --git a/features/masks.yml.dist b/features/masks.yml.dist
index 784e87b4506..5eb9faea025 100644
--- a/features/masks.yml.dist
+++ b/features/masks.yml.dist
@@ -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
diff --git a/features/shape-outside.yml b/features/shape-outside.yml
new file mode 100644
index 00000000000..f6e2c2c1572
--- /dev/null
+++ b/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
diff --git a/features/shape-outside.yml.dist b/features/shape-outside.yml.dist
new file mode 100644
index 00000000000..8366bf79c4d
--- /dev/null
+++ b/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
diff --git a/features/shapes.yml b/features/shapes.yml
new file mode 100644
index 00000000000..65cf2921d16
--- /dev/null
+++ b/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
diff --git a/features/shapes.yml.dist b/features/shapes.yml.dist
new file mode 100644
index 00000000000..0a820836280
--- /dev/null
+++ b/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
diff --git a/groups/clipping-shapes-masking.yml b/groups/clipping-shapes-masking.yml
new file mode 100644
index 00000000000..462f910de5f
--- /dev/null
+++ b/groups/clipping-shapes-masking.yml
@@ -0,0 +1,3 @@
+# Methods of clipping, masking and creating shapes with CSS and SVG.
+# Based on CSS-Next CSS 4 group
+name: Clipping, shapes and masking