Add clipping, shapes and masking

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

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

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

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

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

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

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

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

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

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