Split CSS shape functions (#3340)

Co-authored-by: Daniel D. Beck <daniel@ddbeck.com>

Author: jamesnw

features/rect-xywx.yml

@@ -0,0 +1,9 @@
+name: rect() and xywh()
+description: The `rect()` CSS function creates a rectangle shape with insets from the edges of an element. The `xywh()` CSS function creates a rectangle shifted by an `x` and `y` distance. They can be used with `clip-path` and `shape-outside`.
+spec:
+  - https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-xywh
+  - https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect
+group: clipping-shapes-masking
+compat_features:
+  - css.types.basic-shape.rect
+  - css.types.basic-shape.xywh

features/rect-xywx.yml.dist

@@ -0,0 +1,17 @@
+# Generated from: rect-xywx.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: low
+  baseline_low_date: 2024-01-23
+  support:
+    chrome: "119"
+    chrome_android: "119"
+    edge: "119"
+    firefox: "122"
+    firefox_android: "122"
+    safari: "17.2"
+    safari_ios: "17.2"
+compat_features:
+  - css.types.basic-shape.rect
+  - css.types.basic-shape.xywh

features/shape-function.yml

@@ -0,0 +1,6 @@
+name: shape()
+description: The `shape()` CSS function creates shapes with a series of commands like `line`, `move`, and `curve`. It can be used with `clip-path` and `shape-outside`.
+spec: https://drafts.csswg.org/css-shapes-1/#shape-function
+group: clipping-shapes-masking
+compat_features:
+  - css.types.basic-shape.shape

features/shape-function.yml.dist

@@ -0,0 +1,13 @@
+# Generated from: shape-function.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: false
+  support:
+    chrome: "135"
+    chrome_android: "135"
+    edge: "135"
+    safari: "18.4"
+    safari_ios: "18.4"
+compat_features:
+  - css.types.basic-shape.shape

features/shapes.yml

@@ -1,17 +1,12 @@
 name: shapes
-description: The `circle()`, `ellipse()`, `inset()`, `polygon()`, `rect()`, and `xywh()` CSS shape functions create shapes for use with `clip-path` and `shape-outside`.
+description: The `circle()`, `ellipse()`, `inset()`, and `polygon()` 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.shape
-  - css.types.basic-shape.xywh

features/shapes.yml.dist

@@ -14,43 +14,9 @@ status:
     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: low
-  # baseline_low_date: 2024-01-23
-  # support:
-  #   chrome: "119"
-  #   chrome_android: "119"
-  #   edge: "119"
-  #   firefox: "122"
-  #   firefox_android: "122"
-  #   safari: "17.2"
-  #   safari_ios: "17.2"
-  - css.types.basic-shape.rect
-  - css.types.basic-shape.xywh
-
-  # baseline: false
-  # support:
-  #   chrome: "135"
-  #   chrome_android: "135"
-  #   edge: "135"
-  #   safari: "18.4"
-  #   safari_ios: "18.4"
-  - css.types.basic-shape.shape