From e5aaf1358650a6d5d64b51015f96d80d4310bcaa Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 15 Aug 2024 16:01:27 -0400 Subject: [PATCH 1/6] Add SVG Opacity --- features/svg-opacity.yml | 15 ++++++ features/svg-opacity.yml.dist | 97 +++++++++++++++++++++++++++++++++++ 2 files changed, 112 insertions(+) create mode 100644 features/svg-opacity.yml create mode 100644 features/svg-opacity.yml.dist diff --git a/features/svg-opacity.yml b/features/svg-opacity.yml new file mode 100644 index 00000000000..cb115804bb7 --- /dev/null +++ b/features/svg-opacity.yml @@ -0,0 +1,15 @@ +name: SVG opacity +description: The SVG opacity properties and attributes control the transparency of parts of an SVG. +spec: https://www.w3.org/TR/SVG/render.html#ObjectAndGroupOpacityProperties +compat_features: + - css.properties.fill-opacity + - css.properties.flood-opacity + - css.properties.stop-opacity + - css.properties.stroke-opacity + - svg.elements.feFlood.flood-opacity + - svg.elements.stop.stop-opacity + - svg.global_attributes.fill-opacity + - svg.global_attributes.flood-opacity + - svg.global_attributes.opacity + - svg.global_attributes.stroke-opacity +group: css diff --git a/features/svg-opacity.yml.dist b/features/svg-opacity.yml.dist new file mode 100644 index 00000000000..6e7a024b03c --- /dev/null +++ b/features/svg-opacity.yml.dist @@ -0,0 +1,97 @@ +# Generated from: svg-opacity.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2020-09-16 + baseline_high_date: 2023-03-16 + support: + chrome: ≤80 + chrome_android: "80" + edge: "80" + firefox: ≤72 + firefox_android: "79" + safari: ≤13.1 + safari_ios: "14" +compat_features: + # baseline: high + # baseline_low_date: 2015-07-29 + # baseline_high_date: 2018-01-29 + # support: + # chrome: "1" + # chrome_android: "18" + # edge: "12" + # firefox: "1" + # firefox_android: "4" + # safari: "2" + # safari_ios: "1" + - svg.global_attributes.opacity + + # baseline: high + # baseline_low_date: 2015-07-29 + # baseline_high_date: 2018-01-29 + # support: + # chrome: "5" + # chrome_android: "18" + # edge: "12" + # firefox: "3" + # firefox_android: "4" + # safari: "6" + # safari_ios: "6" + - css.properties.flood-opacity + - svg.global_attributes.flood-opacity + + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "5" + # chrome_android: "18" + # edge: "79" + # firefox: "3" + # firefox_android: "4" + # safari: "6" + # safari_ios: "6" + - svg.elements.feFlood.flood-opacity + + # 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.fill-opacity + - css.properties.stroke-opacity + - svg.global_attributes.fill-opacity + - svg.global_attributes.stroke-opacity + + # 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.stop-opacity + + # baseline: high + # baseline_low_date: 2020-09-16 + # baseline_high_date: 2023-03-16 + # support: + # chrome: "1" + # chrome_android: "18" + # edge: "12" + # firefox: "1.5" + # firefox_android: "4" + # safari: "3" + # safari_ios: "14" + - svg.elements.stop.stop-opacity From 6fb89fab01da0e68854e0608322769b3154d4aad Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 15 Aug 2024 16:27:17 -0400 Subject: [PATCH 2/6] Use draft spec --- features/svg-opacity.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/svg-opacity.yml b/features/svg-opacity.yml index cb115804bb7..8eb7ee9cc54 100644 --- a/features/svg-opacity.yml +++ b/features/svg-opacity.yml @@ -1,6 +1,6 @@ name: SVG opacity description: The SVG opacity properties and attributes control the transparency of parts of an SVG. -spec: https://www.w3.org/TR/SVG/render.html#ObjectAndGroupOpacityProperties +spec: https://svgwg.org/svg2-draft/render.html#ObjectAndGroupOpacityProperties compat_features: - css.properties.fill-opacity - css.properties.flood-opacity From 39c1b73dc85faa9f0654d4d64bf3e82495397235 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 3 Sep 2024 14:30:06 -0400 Subject: [PATCH 3/6] Rework svg-opacity --- features/svg-opacity.yml | 9 ++--- features/svg-opacity.yml.dist | 62 +++-------------------------------- groups/svg.yml | 5 +++ 3 files changed, 12 insertions(+), 64 deletions(-) create mode 100644 groups/svg.yml diff --git a/features/svg-opacity.yml b/features/svg-opacity.yml index 8eb7ee9cc54..85c3614b2a3 100644 --- a/features/svg-opacity.yml +++ b/features/svg-opacity.yml @@ -1,15 +1,10 @@ name: SVG opacity -description: The SVG opacity properties and attributes control the transparency of parts of an SVG. +description: The SVG `opacity` properties and attributes control the transparency of a stroke, fill, or entire SVG element. spec: https://svgwg.org/svg2-draft/render.html#ObjectAndGroupOpacityProperties compat_features: - css.properties.fill-opacity - - css.properties.flood-opacity - - css.properties.stop-opacity - css.properties.stroke-opacity - - svg.elements.feFlood.flood-opacity - - svg.elements.stop.stop-opacity - svg.global_attributes.fill-opacity - - svg.global_attributes.flood-opacity - svg.global_attributes.opacity - svg.global_attributes.stroke-opacity -group: css +group: svg diff --git a/features/svg-opacity.yml.dist b/features/svg-opacity.yml.dist index 6e7a024b03c..7478cadabb8 100644 --- a/features/svg-opacity.yml.dist +++ b/features/svg-opacity.yml.dist @@ -3,16 +3,16 @@ status: baseline: high - baseline_low_date: 2020-09-16 - baseline_high_date: 2023-03-16 + baseline_low_date: 2020-07-28 + baseline_high_date: 2023-01-28 support: chrome: ≤80 chrome_android: "80" - edge: "80" + edge: ≤80 firefox: ≤72 firefox_android: "79" safari: ≤13.1 - safari_ios: "14" + safari_ios: ≤13.4 compat_features: # baseline: high # baseline_low_date: 2015-07-29 @@ -27,33 +27,7 @@ compat_features: # safari_ios: "1" - svg.global_attributes.opacity - # baseline: high - # baseline_low_date: 2015-07-29 - # baseline_high_date: 2018-01-29 - # support: - # chrome: "5" - # chrome_android: "18" - # edge: "12" - # firefox: "3" - # firefox_android: "4" - # safari: "6" - # safari_ios: "6" - - css.properties.flood-opacity - - svg.global_attributes.flood-opacity - - # baseline: high - # baseline_low_date: 2020-01-15 - # baseline_high_date: 2022-07-15 - # support: - # chrome: "5" - # chrome_android: "18" - # edge: "79" - # firefox: "3" - # firefox_android: "4" - # safari: "6" - # safari_ios: "6" - - svg.elements.feFlood.flood-opacity - + # ⬇️ Same status as overall feature ⬇️ # baseline: high # baseline_low_date: 2020-07-28 # baseline_high_date: 2023-01-28 @@ -69,29 +43,3 @@ compat_features: - css.properties.stroke-opacity - svg.global_attributes.fill-opacity - svg.global_attributes.stroke-opacity - - # 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.stop-opacity - - # baseline: high - # baseline_low_date: 2020-09-16 - # baseline_high_date: 2023-03-16 - # support: - # chrome: "1" - # chrome_android: "18" - # edge: "12" - # firefox: "1.5" - # firefox_android: "4" - # safari: "3" - # safari_ios: "14" - - svg.elements.stop.stop-opacity diff --git a/groups/svg.yml b/groups/svg.yml new file mode 100644 index 00000000000..8ada2988954 --- /dev/null +++ b/groups/svg.yml @@ -0,0 +1,5 @@ +# SVG (Scalable Vector Graphics) is a language for describing two-dimensional +# graphics. +# +# spec: https://svgwg.org/svg2-draft/ +name: SVG From 65a7ca2e6e33a0e511fdfa0bd0d01e886f1a2327 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 10 Sep 2024 09:42:48 -0400 Subject: [PATCH 4/6] Move opacity, update desc --- features/opacity.yml | 1 + features/opacity.yml.dist | 1 + features/svg-opacity.yml | 5 ++--- features/svg-opacity.yml.dist | 25 ------------------------- 4 files changed, 4 insertions(+), 28 deletions(-) diff --git a/features/opacity.yml b/features/opacity.yml index 6bb8a05b3bf..a77e67201af 100644 --- a/features/opacity.yml +++ b/features/opacity.yml @@ -7,3 +7,4 @@ status: compat_features: - css.properties.opacity - css.properties.opacity.percentages + - svg.global_attributes.opacity diff --git a/features/opacity.yml.dist b/features/opacity.yml.dist index ffaba3b3225..6310e605f06 100644 --- a/features/opacity.yml.dist +++ b/features/opacity.yml.dist @@ -27,6 +27,7 @@ compat_features: # safari: "2" # safari_ios: "1" - css.properties.opacity + - svg.global_attributes.opacity # baseline: high # baseline_low_date: 2020-07-28 diff --git a/features/svg-opacity.yml b/features/svg-opacity.yml index 85c3614b2a3..2056327f624 100644 --- a/features/svg-opacity.yml +++ b/features/svg-opacity.yml @@ -1,10 +1,9 @@ name: SVG opacity -description: The SVG `opacity` properties and attributes control the transparency of a stroke, fill, or entire SVG element. +description: The `fill-opacity`, and `stroke-opacity` SVG attributes and CSS properties control the transparency of a stroke or fill of an SVG element. spec: https://svgwg.org/svg2-draft/render.html#ObjectAndGroupOpacityProperties +group: svg compat_features: - css.properties.fill-opacity - css.properties.stroke-opacity - svg.global_attributes.fill-opacity - - svg.global_attributes.opacity - svg.global_attributes.stroke-opacity -group: svg diff --git a/features/svg-opacity.yml.dist b/features/svg-opacity.yml.dist index 7478cadabb8..a0fa084a6fe 100644 --- a/features/svg-opacity.yml.dist +++ b/features/svg-opacity.yml.dist @@ -14,31 +14,6 @@ status: safari: ≤13.1 safari_ios: ≤13.4 compat_features: - # baseline: high - # baseline_low_date: 2015-07-29 - # baseline_high_date: 2018-01-29 - # support: - # chrome: "1" - # chrome_android: "18" - # edge: "12" - # firefox: "1" - # firefox_android: "4" - # safari: "2" - # safari_ios: "1" - - svg.global_attributes.opacity - - # ⬇️ Same status as overall feature ⬇️ - # 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.fill-opacity - css.properties.stroke-opacity - svg.global_attributes.fill-opacity From b0fb25854ead94d10514dd9cb4b8912c95164d04 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 10 Sep 2024 11:00:05 -0400 Subject: [PATCH 5/6] Rename to opacity-svg --- features/{svg-opacity.yml => opacity-svg.yml} | 2 +- features/{svg-opacity.yml.dist => opacity-svg.yml.dist} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename features/{svg-opacity.yml => opacity-svg.yml} (95%) rename features/{svg-opacity.yml.dist => opacity-svg.yml.dist} (100%) diff --git a/features/svg-opacity.yml b/features/opacity-svg.yml similarity index 95% rename from features/svg-opacity.yml rename to features/opacity-svg.yml index 2056327f624..827084e7889 100644 --- a/features/svg-opacity.yml +++ b/features/opacity-svg.yml @@ -1,4 +1,4 @@ -name: SVG opacity +name: Opacity (SVG) description: The `fill-opacity`, and `stroke-opacity` SVG attributes and CSS properties control the transparency of a stroke or fill of an SVG element. spec: https://svgwg.org/svg2-draft/render.html#ObjectAndGroupOpacityProperties group: svg diff --git a/features/svg-opacity.yml.dist b/features/opacity-svg.yml.dist similarity index 100% rename from features/svg-opacity.yml.dist rename to features/opacity-svg.yml.dist From 3f74da812bef3432001debb7c50206530ac388bf Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 10 Sep 2024 11:02:30 -0400 Subject: [PATCH 6/6] Update dist --- features/opacity-svg.yml.dist | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/opacity-svg.yml.dist b/features/opacity-svg.yml.dist index a0fa084a6fe..1184602e240 100644 --- a/features/opacity-svg.yml.dist +++ b/features/opacity-svg.yml.dist @@ -1,4 +1,4 @@ -# Generated from: svg-opacity.yml +# Generated from: opacity-svg.yml # Do not edit this file by hand. Edit the source file instead! status: