Adds CSS filter effects

features/filter.yml

@@ -0,0 +1,18 @@
+name: filter
+description: The `filter` CSS property applies one or more graphic effects to an element. You can use filter functions, such as `blur()` and `drop-shadow()`, alone or combined to produce different effects.
+spec: https://drafts.fxtf.org/filter-effects-1/#propdef-filter
+group: css
+caniuse: css-filters
+compat_features:
+  - css.properties.filter
+  - css.types.filter-function
+  - css.types.filter-function.blur
+  - css.types.filter-function.brightness
+  - css.types.filter-function.contrast
+  - css.types.filter-function.drop-shadow
+  - css.types.filter-function.grayscale
+  - css.types.filter-function.hue-rotate
+  - css.types.filter-function.invert
+  - css.types.filter-function.opacity
+  - css.types.filter-function.saturate
+  - css.types.filter-function.sepia

features/filter.yml.dist

@@ -0,0 +1,52 @@
+# Generated from: filter.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2016-09-07
+  baseline_high_date: 2019-03-07
+  support:
+    chrome: "53"
+    chrome_android: "53"
+    edge: "12"
+    firefox: "35"
+    firefox_android: "35"
+    safari: "9.1"
+    safari_ios: "9.3"
+compat_features:
+  # baseline: high
+  # baseline_low_date: 2016-09-07
+  # baseline_high_date: 2019-03-07
+  # support:
+  #   chrome: "18"
+  #   chrome_android: "53"
+  #   edge: "12"
+  #   firefox: "35"
+  #   firefox_android: "35"
+  #   safari: "6"
+  #   safari_ios: "6"
+  - css.types.filter-function
+  - css.types.filter-function.blur
+  - css.types.filter-function.brightness
+  - css.types.filter-function.contrast
+  - css.types.filter-function.drop-shadow
+  - css.types.filter-function.grayscale
+  - css.types.filter-function.hue-rotate
+  - css.types.filter-function.invert
+  - css.types.filter-function.opacity
+  - css.types.filter-function.saturate
+  - css.types.filter-function.sepia
+
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2016-09-07
+  # baseline_high_date: 2019-03-07
+  # support:
+  #   chrome: "53"
+  #   chrome_android: "53"
+  #   edge: "12"
+  #   firefox: "35"
+  #   firefox_android: "35"
+  #   safari: "9.1"
+  #   safari_ios: "9.3"
+  - css.properties.filter

features/svg-filters.yml

@@ -110,6 +110,7 @@ compat_features:
   - api.SVGFEFuncGElement
   - api.SVGFEFuncRElement
   - api.SVGFEGaussianBlurElement
+  - api.SVGFEGaussianBlurElement.edgeMode
   - api.SVGFEGaussianBlurElement.height
   - api.SVGFEGaussianBlurElement.in1
   - api.SVGFEGaussianBlurElement.result
@@ -120,6 +121,7 @@ compat_features:
   - api.SVGFEGaussianBlurElement.x
   - api.SVGFEGaussianBlurElement.y
   - api.SVGFEImageElement
+  - api.SVGFEImageElement.crossOrigin
   - api.SVGFEImageElement.height
   - api.SVGFEImageElement.href
   - api.SVGFEImageElement.preserveAspectRatio
@@ -161,6 +163,8 @@ compat_features:
   - api.SVGFESpecularLightingElement
   - api.SVGFESpecularLightingElement.height
   - api.SVGFESpecularLightingElement.in1
+  - api.SVGFESpecularLightingElement.kernelUnitLengthX
+  - api.SVGFESpecularLightingElement.kernelUnitLengthY
   - api.SVGFESpecularLightingElement.result
   - api.SVGFESpecularLightingElement.specularConstant
   - api.SVGFESpecularLightingElement.specularExponent
@@ -204,6 +208,14 @@ compat_features:
   - api.SVGFilterElement.width
   - api.SVGFilterElement.x
   - api.SVGFilterElement.y
+  - css.properties.color-interpolation-filters
+  - css.properties.color-interpolation-filters.auto
+  - css.properties.color-interpolation-filters.linearRGB
+  - css.properties.color-interpolation-filters.sRGB
+  - css.properties.filter.svg_elements
+  - css.properties.flood-color
+  - css.properties.flood-opacity
+  - css.properties.lighting-color
   - svg.elements.feBlend
   - svg.elements.feBlend.in
   - svg.elements.feBlend.in2
@@ -261,9 +273,11 @@ compat_features:
   - svg.elements.feFuncG
   - svg.elements.feFuncR
   - svg.elements.feGaussianBlur
+  - svg.elements.feGaussianBlur.edgeMode
   - svg.elements.feGaussianBlur.in
   - svg.elements.feGaussianBlur.stdDeviation
   - svg.elements.feImage
+  - svg.elements.feImage.crossorigin
   - svg.elements.feImage.href
   - svg.elements.feImage.preserveAspectRatio
   - svg.elements.feMerge
@@ -283,6 +297,7 @@ compat_features:
   - svg.elements.fePointLight.z
   - svg.elements.feSpecularLighting
   - svg.elements.feSpecularLighting.in
+  - svg.elements.feSpecularLighting.kernelUnitLength
   - svg.elements.feSpecularLighting.specularConstant
   - svg.elements.feSpecularLighting.specularExponent
   - svg.elements.feSpecularLighting.surfaceScale
@@ -310,14 +325,6 @@ compat_features:
   - svg.elements.filter.width
   - svg.elements.filter.x
   - svg.elements.filter.y
-  - api.SVGFESpecularLightingElement.kernelUnitLengthX
-  - api.SVGFESpecularLightingElement.kernelUnitLengthY
-  - svg.elements.feSpecularLighting.kernelUnitLength
-  - api.SVGFEGaussianBlurElement.edgeMode
-  - svg.elements.feGaussianBlur.edgeMode
-  - api.SVGFEImageElement.crossOrigin
-  - svg.elements.feImage.crossorigin
   - svg.global_attributes.filter
-  - css.properties.filter.svg_elements
   - svg.global_attributes.flood-color
   - svg.global_attributes.flood-opacity

features/svg-filters.yml.dist

@@ -178,6 +178,9 @@ compat_features:
   - api.SVGFilterElement.width
   - api.SVGFilterElement.x
   - api.SVGFilterElement.y
+  - css.properties.flood-color
+  - css.properties.flood-opacity
+  - css.properties.lighting-color
   - svg.elements.feColorMatrix
   - svg.elements.feColorMatrix.in
   - svg.elements.feColorMatrix.type
@@ -477,6 +480,34 @@ compat_features:
   - svg.elements.feComposite.k3
   - svg.elements.feComposite.k4
 
+  # baseline: high
+  # baseline_low_date: 2020-07-28
+  # baseline_high_date: 2023-01-28
+  # support:
+  #   chrome: ≤80
+  #   chrome_android: "80"
+  #   edge: "80"
+  #   firefox: ≤72
+  #   firefox_android: "79"
+  #   safari: ≤13.1
+  #   safari_ios: ≤13.4
+  - css.properties.color-interpolation-filters
+
+  # baseline: high
+  # baseline_low_date: 2020-07-28
+  # baseline_high_date: 2023-01-28
+  # support:
+  #   chrome: ≤83
+  #   chrome_android: "83"
+  #   edge: "83"
+  #   firefox: ≤72
+  #   firefox_android: "79"
+  #   safari: ≤13.1
+  #   safari_ios: ≤13.4
+  - css.properties.color-interpolation-filters.auto
+  - css.properties.color-interpolation-filters.linearRGB
+  - css.properties.color-interpolation-filters.sRGB
+
   # baseline: high
   # baseline_low_date: 2021-02-23
   # baseline_high_date: 2023-08-23