Add background-blend-mode and mix-blend-mode (#1648)

features/background-blend-mode.yml

@@ -0,0 +1,8 @@
+name: background-blend-mode
+description: The `background-blend-mode` CSS property blends an element's background image and background color using blend modes like `multiply`, `difference`, or `color`.
+spec: https://drafts.fxtf.org/compositing-2/#background-blend-mode
+caniuse: css-backgroundblendmode
+group: blend-mode
+compat_features:
+  - css.properties.background-blend-mode
+  - css.types.blend-mode

features/background-blend-mode.yml.dist

@@ -0,0 +1,42 @@
+# Generated from: background-blend-mode.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: "35"
+    chrome_android: "59"
+    edge: "79"
+    firefox: "30"
+    firefox_android: "54"
+    safari: "8"
+    safari_ios: "8"
+compat_features:
+  # baseline: high
+  # baseline_low_date: 2020-01-15
+  # baseline_high_date: 2022-07-15
+  # support:
+  #   chrome: "35"
+  #   chrome_android: "35"
+  #   edge: "79"
+  #   firefox: "30"
+  #   firefox_android: "30"
+  #   safari: "8"
+  #   safari_ios: "8"
+  - css.properties.background-blend-mode
+
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2020-01-15
+  # baseline_high_date: 2022-07-15
+  # support:
+  #   chrome: "35"
+  #   chrome_android: "59"
+  #   edge: "79"
+  #   firefox: "30"
+  #   firefox_android: "54"
+  #   safari: "8"
+  #   safari_ios: "8"
+  - css.types.blend-mode

features/isolation.yml

@@ -0,0 +1,6 @@
+name: isolation
+description: The `isolation` CSS property creates a new stacking context, which impacts `z-index` ordering and blend modes.
+spec: https://drafts.fxtf.org/compositing-2/#isolation
+group: blend-mode
+compat_features:
+  - css.properties.isolation

features/isolation.yml.dist

@@ -0,0 +1,17 @@
+# Generated from: isolation.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: "41"
+    chrome_android: "41"
+    edge: "79"
+    firefox: "36"
+    firefox_android: "36"
+    safari: "8"
+    safari_ios: "8"
+compat_features:
+  - css.properties.isolation

features/mix-blend-mode.yml

@@ -0,0 +1,12 @@
+name: mix-blend-mode
+description: The `mix-blend-mode` CSS property blends an element's content with its background or parent elements using blend modes like `multiply`, `difference`, or `color`.
+spec: https://drafts.fxtf.org/compositing-2/#mix-blend-mode
+caniuse: css-mixblendmode
+group: blend-mode
+status:
+  compute_from: css.properties.mix-blend-mode
+compat_features:
+  - css.properties.mix-blend-mode
+  - css.properties.mix-blend-mode.plus-darker
+  - css.properties.mix-blend-mode.plus-lighter
+  - css.properties.mix-blend-mode.svg_elements

features/mix-blend-mode.yml.dist

@@ -0,0 +1,55 @@
+# Generated from: mix-blend-mode.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: "41"
+    chrome_android: "41"
+    edge: "79"
+    firefox: "32"
+    firefox_android: "32"
+    safari: "8"
+    safari_ios: "8"
+compat_features:
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2020-01-15
+  # baseline_high_date: 2022-07-15
+  # support:
+  #   chrome: "41"
+  #   chrome_android: "41"
+  #   edge: "79"
+  #   firefox: "32"
+  #   firefox_android: "32"
+  #   safari: "8"
+  #   safari_ios: "8"
+  - css.properties.mix-blend-mode
+
+  # baseline: low
+  # baseline_low_date: 2022-04-05
+  # support:
+  #   chrome: "100"
+  #   chrome_android: "100"
+  #   edge: "100"
+  #   firefox: "99"
+  #   firefox_android: "99"
+  #   safari: "9.1"
+  #   safari_ios: "9.3"
+  - css.properties.mix-blend-mode.plus-lighter
+
+  # baseline: false
+  # support:
+  #   chrome: "41"
+  #   edge: "79"
+  #   firefox: "32"
+  #   firefox_android: "32"
+  - css.properties.mix-blend-mode.svg_elements
+
+  # baseline: false
+  # support:
+  #   safari: ≤13.1
+  #   safari_ios: ≤13.4
+  - css.properties.mix-blend-mode.plus-darker

groups/blend-mode.yml

@@ -0,0 +1,4 @@
+# https://drafts.fxtf.org/compositing-1/
+# Blend modes control how parts of an element are composited, or visually mixed.
+name: Blend mode
+parent: css