Add clip-path

Co-authored-by: Daniel D. Beck <[email protected]>

Author: foolip

features/clip-path.yml

@@ -0,0 +1,21 @@
+name: clip-path
+description: "The `clip-path` CSS property hides part of an element according to a shape."
+spec: https://drafts.fxtf.org/css-masking-1/#clipping-paths
+# https://caniuse.com/css-clip-path is not linked here because the browser
+# versions are very different, mostly due to lack of support for url() for
+# external SVGs being treated as partial support. That is not essential to
+# using the feature, and not even mentioned on MDN.
+# TODO: align with caniuse and link it here.
+status:
+  compute_from:
+    - css.properties.clip-path
+    - css.properties.clip-path.basic_shape
+compat_features:
+  - css.properties.clip-path
+  - css.properties.clip-path.basic_shape
+  - css.properties.clip-path.fill-box
+  - css.properties.clip-path.html_elements
+  - css.properties.clip-path.path
+  - css.properties.clip-path.stroke-box
+  - css.properties.clip-path.svg_elements
+  - css.properties.clip-path.view-box

features/clip-path.yml.dist

@@ -0,0 +1,94 @@
+# Generated from: clip-path.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: "55"
+    chrome_android: "55"
+    edge: "79"
+    firefox: "54"
+    firefox_android: "54"
+    safari: "9.1"
+    safari_ios: "9.3"
+compat_features:
+  # 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
+
+  # ⬇️ Same status as overall feature ⬇️
+  # 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
+
+  # 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
+
+  # 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