From a34d78ba0a79c1eb122c43445f93eeb9b9af005a Mon Sep 17 00:00:00 2001 From: Victor W Allen Date: Fri, 8 Nov 2024 12:55:41 -0800 Subject: [PATCH 1/2] Adds CSS filter effects --- features/filter.yml | 18 ++++++++++++ features/filter.yml.dist | 52 +++++++++++++++++++++++++++++++++++ features/svg-filters.yml | 23 ++++++++++------ features/svg-filters.yml.dist | 31 +++++++++++++++++++++ 4 files changed, 116 insertions(+), 8 deletions(-) create mode 100644 features/filter.yml create mode 100644 features/filter.yml.dist diff --git a/features/filter.yml b/features/filter.yml new file mode 100644 index 00000000000..1208185bb14 --- /dev/null +++ b/features/filter.yml @@ -0,0 +1,18 @@ +name: filter +description: The `filter` CSS property applies one or more graphic effects to an element. Filter functions, such as `blur()` and `drop-shadow()`, can be used 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 diff --git a/features/filter.yml.dist b/features/filter.yml.dist new file mode 100644 index 00000000000..a9c77277f8f --- /dev/null +++ b/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 diff --git a/features/svg-filters.yml b/features/svg-filters.yml index 61ca62782ea..14d8fdf62ef 100644 --- a/features/svg-filters.yml +++ b/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 diff --git a/features/svg-filters.yml.dist b/features/svg-filters.yml.dist index 5e95ebe08d1..ca6c1dcbde6 100644 --- a/features/svg-filters.yml.dist +++ b/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 From e203de06960d1ff09678e4a37c47177512c7b8dd Mon Sep 17 00:00:00 2001 From: Victor Allen Date: Mon, 11 Nov 2024 08:36:01 -0800 Subject: [PATCH 2/2] Update features/filter.yml from feedback Co-authored-by: Daniel D. Beck --- features/filter.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/filter.yml b/features/filter.yml index 1208185bb14..6fe7f93ea78 100644 --- a/features/filter.yml +++ b/features/filter.yml @@ -1,5 +1,5 @@ name: filter -description: The `filter` CSS property applies one or more graphic effects to an element. Filter functions, such as `blur()` and `drop-shadow()`, can be used or combined to produce different effects. +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