From 897ee5ad0ede2fdca149e7ae55bd26337e07fe9b Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 22 Aug 2024 12:12:45 -0400 Subject: [PATCH 1/3] Add background-blend-mode and mix-blend-mode --- features/background-blend-mode.yml | 8 ++++ features/background-blend-mode.yml.dist | 42 +++++++++++++++++++ features/mix-blend-mode.yml | 12 ++++++ features/mix-blend-mode.yml.dist | 55 +++++++++++++++++++++++++ groups/blend-mode.yml | 3 ++ 5 files changed, 120 insertions(+) create mode 100644 features/background-blend-mode.yml create mode 100644 features/background-blend-mode.yml.dist create mode 100644 features/mix-blend-mode.yml create mode 100644 features/mix-blend-mode.yml.dist create mode 100644 groups/blend-mode.yml diff --git a/features/background-blend-mode.yml b/features/background-blend-mode.yml new file mode 100644 index 00000000000..6fe91b37a1b --- /dev/null +++ b/features/background-blend-mode.yml @@ -0,0 +1,8 @@ +name: background-blend-mode +description: The `background-blend-mode` CSS property sets how an element's background is visually mixed. +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 diff --git a/features/background-blend-mode.yml.dist b/features/background-blend-mode.yml.dist new file mode 100644 index 00000000000..3c3f7e5892a --- /dev/null +++ b/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 diff --git a/features/mix-blend-mode.yml b/features/mix-blend-mode.yml new file mode 100644 index 00000000000..63f3993c000 --- /dev/null +++ b/features/mix-blend-mode.yml @@ -0,0 +1,12 @@ +name: mix-blend-mode +description: The `mix-blend-mode` CSS property sets how an element's content is visually mixed. +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 diff --git a/features/mix-blend-mode.yml.dist b/features/mix-blend-mode.yml.dist new file mode 100644 index 00000000000..bf62fd8f171 --- /dev/null +++ b/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 diff --git a/groups/blend-mode.yml b/groups/blend-mode.yml new file mode 100644 index 00000000000..77bc7cb98e7 --- /dev/null +++ b/groups/blend-mode.yml @@ -0,0 +1,3 @@ +# https://drafts.fxtf.org/compositing-1/ +# Blend modes control how parts of an element are composited, or visually mixed. +name: Blend mode From 30f6f64218fc9539dd87f4349ac42c5707feaf88 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 22 Aug 2024 15:08:35 -0400 Subject: [PATCH 2/3] Add isolation --- features/isolation.yml | 6 ++++++ features/isolation.yml.dist | 17 +++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 features/isolation.yml create mode 100644 features/isolation.yml.dist diff --git a/features/isolation.yml b/features/isolation.yml new file mode 100644 index 00000000000..a18a1947d6a --- /dev/null +++ b/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 diff --git a/features/isolation.yml.dist b/features/isolation.yml.dist new file mode 100644 index 00000000000..0ac6c18986a --- /dev/null +++ b/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 From d3ef0845841059fb7141b34da305a8ae37c3388d Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 3 Sep 2024 10:30:26 -0400 Subject: [PATCH 3/3] Review response --- features/background-blend-mode.yml | 2 +- features/mix-blend-mode.yml | 2 +- groups/blend-mode.yml | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/features/background-blend-mode.yml b/features/background-blend-mode.yml index 6fe91b37a1b..cf01597e4eb 100644 --- a/features/background-blend-mode.yml +++ b/features/background-blend-mode.yml @@ -1,5 +1,5 @@ name: background-blend-mode -description: The `background-blend-mode` CSS property sets how an element's background is visually mixed. +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 diff --git a/features/mix-blend-mode.yml b/features/mix-blend-mode.yml index 63f3993c000..5c45cf34001 100644 --- a/features/mix-blend-mode.yml +++ b/features/mix-blend-mode.yml @@ -1,5 +1,5 @@ name: mix-blend-mode -description: The `mix-blend-mode` CSS property sets how an element's content is visually mixed. +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 diff --git a/groups/blend-mode.yml b/groups/blend-mode.yml index 77bc7cb98e7..09253e72ea5 100644 --- a/groups/blend-mode.yml +++ b/groups/blend-mode.yml @@ -1,3 +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