From ccfbbe405a31e53ea696e76fadd49e09b5517cb3 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 22 Aug 2024 15:59:26 -0400 Subject: [PATCH 01/11] Add clip-path --- features/clip-path-animatable.yml | 6 ++ features/clip-path-animatable.yml.dist | 13 +++ features/clip-path-boxes.yml | 8 ++ features/clip-path-boxes.yml.dist | 39 ++++++++ features/clip-path.yml | 19 ++++ features/clip-path.yml.dist | 124 +++++++++++++++++++++++++ features/masks.yml | 1 + groups/clipping-shapes-masking.yml | 2 + 8 files changed, 212 insertions(+) create mode 100644 features/clip-path-animatable.yml create mode 100644 features/clip-path-animatable.yml.dist create mode 100644 features/clip-path-boxes.yml create mode 100644 features/clip-path-boxes.yml.dist create mode 100644 features/clip-path.yml create mode 100644 features/clip-path.yml.dist create mode 100644 groups/clipping-shapes-masking.yml diff --git a/features/clip-path-animatable.yml b/features/clip-path-animatable.yml new file mode 100644 index 00000000000..41929579be0 --- /dev/null +++ b/features/clip-path-animatable.yml @@ -0,0 +1,6 @@ +name: Animatable clipping paths +description: Clipping paths in CSS are animated using transitions and CSS animations. +spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path +group: clipping-shapes-masking +compat_features: + - css.properties.clip-path.is_animatable diff --git a/features/clip-path-animatable.yml.dist b/features/clip-path-animatable.yml.dist new file mode 100644 index 00000000000..dd0a26fe364 --- /dev/null +++ b/features/clip-path-animatable.yml.dist @@ -0,0 +1,13 @@ +# Generated from: clip-path-animatable.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: false + support: + chrome: "55" + chrome_android: "55" + edge: "79" + firefox: "49" + firefox_android: "49" +compat_features: + - css.properties.clip-path.is_animatable diff --git a/features/clip-path-boxes.yml b/features/clip-path-boxes.yml new file mode 100644 index 00000000000..681818171cf --- /dev/null +++ b/features/clip-path-boxes.yml @@ -0,0 +1,8 @@ +name: Clip path boxes +description: The `fill-box`, `stroke-box`, and `view-box` values for the `clip-path` set the part of the shape that will be used to clip the element. +spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path +group: clipping-shapes-masking +compat_features: + - css.properties.clip-path.fill-box + - css.properties.clip-path.stroke-box + - css.properties.clip-path.view-box diff --git a/features/clip-path-boxes.yml.dist b/features/clip-path-boxes.yml.dist new file mode 100644 index 00000000000..b53505f8abb --- /dev/null +++ b/features/clip-path-boxes.yml.dist @@ -0,0 +1,39 @@ +# Generated from: clip-path-boxes.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: low + baseline_low_date: 2023-11-02 + support: + chrome: "119" + chrome_android: "119" + edge: "119" + firefox: ≤72 + firefox_android: "79" + safari: "13.1" + safari_ios: "13.4" +compat_features: + # baseline: low + # baseline_low_date: 2023-11-02 + # support: + # chrome: "119" + # chrome_android: "119" + # edge: "119" + # firefox: "51" + # firefox_android: "51" + # safari: "13.1" + # safari_ios: "13.4" + - css.properties.clip-path.fill-box + - css.properties.clip-path.stroke-box + + # baseline: low + # baseline_low_date: 2023-11-02 + # support: + # chrome: "119" + # chrome_android: "119" + # edge: "119" + # firefox: ≤72 + # firefox_android: "79" + # safari: ≤13.1 + # safari_ios: ≤13.4 + - css.properties.clip-path.view-box diff --git a/features/clip-path.yml b/features/clip-path.yml new file mode 100644 index 00000000000..bb85506ca86 --- /dev/null +++ b/features/clip-path.yml @@ -0,0 +1,19 @@ +name: clip-path +description: The `clip-path` CSS property and SVG attribute sets an area of an element that should be displayed. Everything outside the area will be hidden. +spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path +# caniuse groups more clip-path features and tells a spottier support story. +# caniuse: css-clip-path +group: clipping-shapes-masking +compat_features: + - css.properties.clip-path + - css.properties.clip-path.basic_shape + - css.properties.clip-path.html_elements + - css.properties.clip-path.path + - css.properties.clip-path.svg_elements + - svg.global_attributes.clip-path + - api.SVGClipPathElement + - api.SVGClipPathElement.clipPathUnits + - api.SVGClipPathElement.transform + - svg.elements.clipPath + - svg.elements.clipPath.clipPathUnits + - svg.elements.clipPath.systemLanguage diff --git a/features/clip-path.yml.dist b/features/clip-path.yml.dist new file mode 100644 index 00000000000..d26b04988d1 --- /dev/null +++ b/features/clip-path.yml.dist @@ -0,0 +1,124 @@ +# Generated from: clip-path.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2021-01-21 + baseline_high_date: 2023-07-21 + support: + chrome: "88" + chrome_android: "88" + edge: "88" + firefox: "71" + firefox_android: "79" + safari: "13.1" + safari_ios: "13" +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.5" + # firefox_android: "4" + # safari: "3" + # safari_ios: "1" + - api.SVGClipPathElement + - api.SVGClipPathElement.clipPathUnits + - api.SVGClipPathElement.transform + + # baseline: high + # baseline_low_date: 2015-07-29 + # baseline_high_date: 2018-01-29 + # support: + # chrome: "1" + # chrome_android: "18" + # edge: "12" + # firefox: "1.5" + # firefox_android: "4" + # safari: "3" + # safari_ios: "3" + - svg.elements.clipPath + - svg.elements.clipPath.clipPathUnits + + # baseline: high + # baseline_low_date: 2015-07-29 + # baseline_high_date: 2018-01-29 + # support: + # chrome: "1" + # chrome_android: "18" + # edge: "12" + # firefox: "12" + # firefox_android: "14" + # safari: "3" + # safari_ios: "3" + - svg.elements.clipPath.systemLanguage + + # baseline: high + # baseline_low_date: 2017-03-07 + # baseline_high_date: 2019-09-07 + # support: + # chrome: "23" + # chrome_android: "25" + # edge: "12" + # firefox: "52" + # firefox_android: "52" + # safari: "7" + # safari_ios: "7" + - svg.global_attributes.clip-path + + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "55" + # chrome_android: "55" + # edge: "79" + # firefox: "3.5" + # firefox_android: "4" + # safari: "9.1" + # safari_ios: "9.3" + - css.properties.clip-path + - css.properties.clip-path.html_elements + + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "55" + # chrome_android: "55" + # edge: "79" + # firefox: "52" + # firefox_android: "52" + # safari: "9.1" + # safari_ios: "9.3" + - css.properties.clip-path.svg_elements + + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "55" + # chrome_android: "55" + # edge: "79" + # firefox: "54" + # firefox_android: "54" + # safari: "9.1" + # safari_ios: "9.3" + - css.properties.clip-path.basic_shape + + # ⬇️ Same status as overall feature ⬇️ + # baseline: high + # baseline_low_date: 2021-01-21 + # baseline_high_date: 2023-07-21 + # support: + # chrome: "88" + # chrome_android: "88" + # edge: "88" + # firefox: "71" + # firefox_android: "79" + # safari: "13.1" + # safari_ios: "13" + - css.properties.clip-path.path diff --git a/features/masks.yml b/features/masks.yml index f56fcb08e38..e6df69f3bc4 100644 --- a/features/masks.yml +++ b/features/masks.yml @@ -1,4 +1,5 @@ name: Masks description: The `mask` CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image. spec: https://drafts.fxtf.org/css-masking-1/#positioned-masks +group: clipping-shapes-masking caniuse: css-masks diff --git a/groups/clipping-shapes-masking.yml b/groups/clipping-shapes-masking.yml new file mode 100644 index 00000000000..30e7d3f055b --- /dev/null +++ b/groups/clipping-shapes-masking.yml @@ -0,0 +1,2 @@ +name: Clipping, shapes and masking +parent: css From 4c4cea6c715bb92c7899a3b9785b59e815f560b6 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Fri, 23 Aug 2024 11:57:20 -0400 Subject: [PATCH 02/11] Add shape, path-shape, shape-outside --- features/path-shape.yml | 9 +++++++ features/path-shape.yml.dist | 11 +++++++++ features/shape-outside.yml | 17 +++++++++++++ features/shape-outside.yml.dist | 41 +++++++++++++++++++++++++++++++ features/shapes.yml | 16 ++++++++++++ features/shapes.yml.dist | 43 +++++++++++++++++++++++++++++++++ 6 files changed, 137 insertions(+) create mode 100644 features/path-shape.yml create mode 100644 features/path-shape.yml.dist create mode 100644 features/shape-outside.yml create mode 100644 features/shape-outside.yml.dist create mode 100644 features/shapes.yml create mode 100644 features/shapes.yml.dist diff --git a/features/path-shape.yml b/features/path-shape.yml new file mode 100644 index 00000000000..9298a7ee7d0 --- /dev/null +++ b/features/path-shape.yml @@ -0,0 +1,9 @@ +name: "`path()` shape" +description: The `path()` CSS shape function creates an shapes for use with `clip-path`, `shape-outside`, and the `d` property on an SVG. +spec: https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes +group: clipping-shapes-masking +compat_features: + - css.types.basic-shape.path + - css.types.basic-shape.path.clip-path + - css.types.basic-shape.path.d + - css.types.basic-shape.path.shape-outside \ No newline at end of file diff --git a/features/path-shape.yml.dist b/features/path-shape.yml.dist new file mode 100644 index 00000000000..2a2a6723ddd --- /dev/null +++ b/features/path-shape.yml.dist @@ -0,0 +1,11 @@ +# Generated from: path-shape.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: false + support: {} +compat_features: + - css.types.basic-shape.path + - css.types.basic-shape.path.clip-path + - css.types.basic-shape.path.d + - css.types.basic-shape.path.shape-outside diff --git a/features/shape-outside.yml b/features/shape-outside.yml new file mode 100644 index 00000000000..f6e2c2c1572 --- /dev/null +++ b/features/shape-outside.yml @@ -0,0 +1,17 @@ +name: shape-outside +description: The `shape-outside` CSS property, along with `shape-margin` and `shape-image-threshold`, sets the shape around which adjacent content will wrap. +spec: https://drafts.csswg.org/css-shapes-1/#declaring-shapes +group: clipping-shapes-masking +status: + compute_from: css.properties.shape-outside +compat_features: + - css.properties.shape-image-threshold + - css.properties.shape-margin + - css.properties.shape-outside + - css.properties.shape-outside.none + - css.properties.shape-outside.circle + - css.properties.shape-outside.gradient + - css.properties.shape-outside.image + - css.properties.shape-outside.inset + - css.properties.shape-outside.path + - css.properties.shape-outside.polygon diff --git a/features/shape-outside.yml.dist b/features/shape-outside.yml.dist new file mode 100644 index 00000000000..8366bf79c4d --- /dev/null +++ b/features/shape-outside.yml.dist @@ -0,0 +1,41 @@ +# Generated from: shape-outside.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: "37" + chrome_android: "37" + edge: "79" + firefox: "62" + firefox_android: "62" + safari: "10.1" + safari_ios: "10.3" +compat_features: + # ⬇️ Same status as overall feature ⬇️ + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "37" + # chrome_android: "37" + # edge: "79" + # firefox: "62" + # firefox_android: "62" + # safari: "10.1" + # safari_ios: "10.3" + - css.properties.shape-image-threshold + - css.properties.shape-margin + - css.properties.shape-outside + - css.properties.shape-outside.circle + - css.properties.shape-outside.gradient + - css.properties.shape-outside.image + - css.properties.shape-outside.inset + - css.properties.shape-outside.none + - css.properties.shape-outside.polygon + + # baseline: false + # support: {} + - css.properties.shape-outside.path diff --git a/features/shapes.yml b/features/shapes.yml new file mode 100644 index 00000000000..65cf2921d16 --- /dev/null +++ b/features/shapes.yml @@ -0,0 +1,16 @@ +name: shapes +description: The `circle()`, `ellipse()`, `inset()`, `polygon()`, `rect()`, and `xywh()` CSS shape functions create shapes for use with `clip-path` and `shape-outside`. +spec: https://drafts.csswg.org/css-shapes-1/#basic-shape-functions +caniuse: css-shapes +group: clipping-shapes-masking +status: + compute_from: css.types.basic-shape +compat_features: + - css.types.basic-shape + - css.types.basic-shape.animation + - css.types.basic-shape.circle + - css.types.basic-shape.ellipse + - css.types.basic-shape.inset + - css.types.basic-shape.polygon + - css.types.basic-shape.rect + - css.types.basic-shape.xywh diff --git a/features/shapes.yml.dist b/features/shapes.yml.dist new file mode 100644 index 00000000000..0a820836280 --- /dev/null +++ b/features/shapes.yml.dist @@ -0,0 +1,43 @@ +# Generated from: shapes.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: "37" + chrome_android: "37" + edge: "79" + firefox: "54" + firefox_android: "54" + safari: "10.1" + safari_ios: "10.3" +compat_features: + # ⬇️ Same status as overall feature ⬇️ + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "37" + # chrome_android: "37" + # edge: "79" + # firefox: "54" + # firefox_android: "54" + # safari: "10.1" + # safari_ios: "10.3" + - css.types.basic-shape + - css.types.basic-shape.animation + - css.types.basic-shape.circle + - css.types.basic-shape.ellipse + - css.types.basic-shape.inset + - css.types.basic-shape.polygon + + # baseline: false + # support: + # firefox: "122" + # firefox_android: "122" + # safari: "17.2" + # safari_ios: "17.2" + - css.types.basic-shape.rect + - css.types.basic-shape.xywh From 03371d742a7250833af92aa99bf39f1317df8044 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Fri, 23 Aug 2024 11:58:39 -0400 Subject: [PATCH 03/11] Format --- features/path-shape.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/path-shape.yml b/features/path-shape.yml index 9298a7ee7d0..61b1641eb27 100644 --- a/features/path-shape.yml +++ b/features/path-shape.yml @@ -6,4 +6,4 @@ compat_features: - css.types.basic-shape.path - css.types.basic-shape.path.clip-path - css.types.basic-shape.path.d - - css.types.basic-shape.path.shape-outside \ No newline at end of file + - css.types.basic-shape.path.shape-outside From 207327879ddf538ea6427df62f34e59e599e7f7e Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Fri, 23 Aug 2024 13:32:53 -0400 Subject: [PATCH 04/11] Add masking --- features/mask-border.yml | 11 +++++++++++ features/mask-border.yml.dist | 14 ++++++++++++++ features/mask-type.yml | 8 ++++++++ features/mask-type.yml.dist | 19 +++++++++++++++++++ features/masks.yml | 17 +++++++++++++++++ features/masks.yml.dist | 7 +++++++ groups/clipping-shapes-masking.yml | 3 ++- 7 files changed, 78 insertions(+), 1 deletion(-) create mode 100644 features/mask-border.yml create mode 100644 features/mask-border.yml.dist create mode 100644 features/mask-type.yml create mode 100644 features/mask-type.yml.dist diff --git a/features/mask-border.yml b/features/mask-border.yml new file mode 100644 index 00000000000..b5992d1aed8 --- /dev/null +++ b/features/mask-border.yml @@ -0,0 +1,11 @@ +name: mask-border +description: The `mask-border` CSS property sets how the edges of an element are masked. It is a shorthand for `mask-border-outset`, `mask-border-repeat`, `mask-border-slice`, `mask-border-source`, and `mask-border-width`. +spec: https://drafts.fxtf.org/css-masking-1/#mask-borders +group: clipping-shapes-masking +compat_features: + - css.properties.mask-border + - css.properties.mask-border-outset + - css.properties.mask-border-repeat + - css.properties.mask-border-slice + - css.properties.mask-border-source + - css.properties.mask-border-width diff --git a/features/mask-border.yml.dist b/features/mask-border.yml.dist new file mode 100644 index 00000000000..7e0a4fcccb7 --- /dev/null +++ b/features/mask-border.yml.dist @@ -0,0 +1,14 @@ +# Generated from: mask-border.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: false + support: + safari: "17.2" +compat_features: + - css.properties.mask-border + - css.properties.mask-border-outset + - css.properties.mask-border-repeat + - css.properties.mask-border-slice + - css.properties.mask-border-source + - css.properties.mask-border-width diff --git a/features/mask-type.yml b/features/mask-type.yml new file mode 100644 index 00000000000..9c6d151e789 --- /dev/null +++ b/features/mask-type.yml @@ -0,0 +1,8 @@ +name: mask-type +description: The `mask-type` CSS property on an SVG `` sets whether the mask is a `luminance` or `alpha` mask. +spec: https://drafts.fxtf.org/css-masking-1/#the-mask-type +group: clipping-shapes-masking +compat_features: + - css.properties.mask-type + - css.properties.mask-type.alpha + - css.properties.mask-type.luminance diff --git a/features/mask-type.yml.dist b/features/mask-type.yml.dist new file mode 100644 index 00000000000..ae01630493f --- /dev/null +++ b/features/mask-type.yml.dist @@ -0,0 +1,19 @@ +# Generated from: mask-type.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: "24" + chrome_android: "25" + edge: "79" + firefox: "35" + firefox_android: "35" + safari: "7" + safari_ios: "7" +compat_features: + - css.properties.mask-type + - css.properties.mask-type.alpha + - css.properties.mask-type.luminance diff --git a/features/masks.yml b/features/masks.yml index e6df69f3bc4..8efd6035776 100644 --- a/features/masks.yml +++ b/features/masks.yml @@ -3,3 +3,20 @@ description: The `mask` CSS property (and several longhand properties) partially spec: https://drafts.fxtf.org/css-masking-1/#positioned-masks group: clipping-shapes-masking caniuse: css-masks +compat_features: + - css.properties.mask + - css.properties.mask-clip + - css.properties.mask-composite + - css.properties.mask-composite.add + - css.properties.mask-composite.exclude + - css.properties.mask-composite.intersect + - css.properties.mask-composite.subtract + - css.properties.mask-image + - css.properties.mask-mode + - css.properties.mask-mode.alpha + - css.properties.mask-mode.luminance + - css.properties.mask-mode.match-source + - css.properties.mask-origin + - css.properties.mask-position + - css.properties.mask-repeat + - css.properties.mask-size diff --git a/features/masks.yml.dist b/features/masks.yml.dist index 784e87b4506..300d2d02ce5 100644 --- a/features/masks.yml.dist +++ b/features/masks.yml.dist @@ -16,8 +16,15 @@ compat_features: - css.properties.mask - css.properties.mask-clip - css.properties.mask-composite + - css.properties.mask-composite.add + - css.properties.mask-composite.exclude + - css.properties.mask-composite.intersect + - css.properties.mask-composite.subtract - css.properties.mask-image - css.properties.mask-mode + - css.properties.mask-mode.alpha + - css.properties.mask-mode.luminance + - css.properties.mask-mode.match-source - css.properties.mask-origin - css.properties.mask-position - css.properties.mask-repeat diff --git a/groups/clipping-shapes-masking.yml b/groups/clipping-shapes-masking.yml index 30e7d3f055b..3ebbc8d52a5 100644 --- a/groups/clipping-shapes-masking.yml +++ b/groups/clipping-shapes-masking.yml @@ -1,2 +1,3 @@ +# Methods of clipping, masking and creating shapes with CSS and SVG. +# Based on CSS-Next CSS 4 group name: Clipping, shapes and masking -parent: css From 5a0a03f941470e165676a396708aa96f40351ef4 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Fri, 23 Aug 2024 13:35:05 -0400 Subject: [PATCH 05/11] Format --- groups/clipping-shapes-masking.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/groups/clipping-shapes-masking.yml b/groups/clipping-shapes-masking.yml index 3ebbc8d52a5..462f910de5f 100644 --- a/groups/clipping-shapes-masking.yml +++ b/groups/clipping-shapes-masking.yml @@ -1,3 +1,3 @@ -# Methods of clipping, masking and creating shapes with CSS and SVG. +# Methods of clipping, masking and creating shapes with CSS and SVG. # Based on CSS-Next CSS 4 group name: Clipping, shapes and masking From 47a127f1c737d3d6118f5ec984032f7347874e85 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Mon, 9 Sep 2024 14:53:08 -0400 Subject: [PATCH 06/11] Add offset-path to path-shape --- features/path-shape.yml | 1 + features/path-shape.yml.dist | 1 + 2 files changed, 2 insertions(+) diff --git a/features/path-shape.yml b/features/path-shape.yml index 61b1641eb27..e48e5ff2250 100644 --- a/features/path-shape.yml +++ b/features/path-shape.yml @@ -7,3 +7,4 @@ compat_features: - css.types.basic-shape.path.clip-path - css.types.basic-shape.path.d - css.types.basic-shape.path.shape-outside + - css.types.basic-shape.path.offset-path diff --git a/features/path-shape.yml.dist b/features/path-shape.yml.dist index 2a2a6723ddd..602911d4c8b 100644 --- a/features/path-shape.yml.dist +++ b/features/path-shape.yml.dist @@ -8,4 +8,5 @@ compat_features: - css.types.basic-shape.path - css.types.basic-shape.path.clip-path - css.types.basic-shape.path.d + - css.types.basic-shape.path.offset-path - css.types.basic-shape.path.shape-outside From 9a5137fdac6d8432abf1454223d3b7495b7631e6 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Mon, 16 Sep 2024 17:23:40 -0400 Subject: [PATCH 07/11] Reviews --- features/clip-path-animatable.yml | 2 +- features/clip-path-boxes.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/features/clip-path-animatable.yml b/features/clip-path-animatable.yml index 41929579be0..571110b013d 100644 --- a/features/clip-path-animatable.yml +++ b/features/clip-path-animatable.yml @@ -1,5 +1,5 @@ name: Animatable clipping paths -description: Clipping paths in CSS are animated using transitions and CSS animations. +description: Clipping paths in CSS are animated using CSS transitions and animations. spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path group: clipping-shapes-masking compat_features: diff --git a/features/clip-path-boxes.yml b/features/clip-path-boxes.yml index 681818171cf..a0192ce4873 100644 --- a/features/clip-path-boxes.yml +++ b/features/clip-path-boxes.yml @@ -1,5 +1,5 @@ name: Clip path boxes -description: The `fill-box`, `stroke-box`, and `view-box` values for the `clip-path` set the part of the shape that will be used to clip the element. +description: The `fill-box`, `stroke-box`, and `view-box` values for `clip-path` set an edge of the element's box to use as the clipping shape. spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path group: clipping-shapes-masking compat_features: From 735b9906ded3b7b49e9d8cdb44a322580cc8351d Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 17 Sep 2024 14:42:28 -0400 Subject: [PATCH 08/11] Add mask-image keys --- features/masks.yml | 2 ++ features/masks.yml.dist | 2 ++ 2 files changed, 4 insertions(+) diff --git a/features/masks.yml b/features/masks.yml index 8efd6035776..d8302cb98c7 100644 --- a/features/masks.yml +++ b/features/masks.yml @@ -12,6 +12,8 @@ compat_features: - css.properties.mask-composite.intersect - css.properties.mask-composite.subtract - css.properties.mask-image + - css.properties.mask-image.multiple_mask_images + - css.properties.mask-image.svg_masks - css.properties.mask-mode - css.properties.mask-mode.alpha - css.properties.mask-mode.luminance diff --git a/features/masks.yml.dist b/features/masks.yml.dist index 300d2d02ce5..5eb9faea025 100644 --- a/features/masks.yml.dist +++ b/features/masks.yml.dist @@ -21,6 +21,8 @@ compat_features: - css.properties.mask-composite.intersect - css.properties.mask-composite.subtract - css.properties.mask-image + - css.properties.mask-image.multiple_mask_images + - css.properties.mask-image.svg_masks - css.properties.mask-mode - css.properties.mask-mode.alpha - css.properties.mask-mode.luminance From f1758ca7809bfeb628f72a0d223d48549ddde401 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Wed, 18 Sep 2024 11:54:03 -0400 Subject: [PATCH 09/11] Review --- features/clip-path-animatable.yml | 2 +- features/clip-path.yml | 2 +- features/mask-type.yml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/features/clip-path-animatable.yml b/features/clip-path-animatable.yml index 571110b013d..380649857ff 100644 --- a/features/clip-path-animatable.yml +++ b/features/clip-path-animatable.yml @@ -1,5 +1,5 @@ name: Animatable clipping paths -description: Clipping paths in CSS are animated using CSS transitions and animations. +description: The `clip-path` property can be animated using CSS transitions and animations. spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path group: clipping-shapes-masking compat_features: diff --git a/features/clip-path.yml b/features/clip-path.yml index bb85506ca86..359a39d5355 100644 --- a/features/clip-path.yml +++ b/features/clip-path.yml @@ -1,5 +1,5 @@ name: clip-path -description: The `clip-path` CSS property and SVG attribute sets an area of an element that should be displayed. Everything outside the area will be hidden. +description: The `clip-path` CSS property and SVG attribute sets the visible area of an element. Everything outside the area will be hidden. spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path # caniuse groups more clip-path features and tells a spottier support story. # caniuse: css-clip-path diff --git a/features/mask-type.yml b/features/mask-type.yml index 9c6d151e789..0ef23223cd0 100644 --- a/features/mask-type.yml +++ b/features/mask-type.yml @@ -1,5 +1,5 @@ name: mask-type -description: The `mask-type` CSS property on an SVG `` sets whether the mask is a `luminance` or `alpha` mask. +description: The `mask-type` CSS property on an SVG `` element sets whether the mask is a `luminance` or `alpha` mask. spec: https://drafts.fxtf.org/css-masking-1/#the-mask-type group: clipping-shapes-masking compat_features: From d4b7d39d4702db4da832c45af819a6566c3ced40 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Wed, 18 Sep 2024 11:55:52 -0400 Subject: [PATCH 10/11] Remove path-shape --- features/path-shape.yml | 10 ---------- features/path-shape.yml.dist | 12 ------------ 2 files changed, 22 deletions(-) delete mode 100644 features/path-shape.yml delete mode 100644 features/path-shape.yml.dist diff --git a/features/path-shape.yml b/features/path-shape.yml deleted file mode 100644 index e48e5ff2250..00000000000 --- a/features/path-shape.yml +++ /dev/null @@ -1,10 +0,0 @@ -name: "`path()` shape" -description: The `path()` CSS shape function creates an shapes for use with `clip-path`, `shape-outside`, and the `d` property on an SVG. -spec: https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes -group: clipping-shapes-masking -compat_features: - - css.types.basic-shape.path - - css.types.basic-shape.path.clip-path - - css.types.basic-shape.path.d - - css.types.basic-shape.path.shape-outside - - css.types.basic-shape.path.offset-path diff --git a/features/path-shape.yml.dist b/features/path-shape.yml.dist deleted file mode 100644 index 602911d4c8b..00000000000 --- a/features/path-shape.yml.dist +++ /dev/null @@ -1,12 +0,0 @@ -# Generated from: path-shape.yml -# Do not edit this file by hand. Edit the source file instead! - -status: - baseline: false - support: {} -compat_features: - - css.types.basic-shape.path - - css.types.basic-shape.path.clip-path - - css.types.basic-shape.path.d - - css.types.basic-shape.path.offset-path - - css.types.basic-shape.path.shape-outside From 3e4a0a6aa1d30a6b5e21363fb37dfc9b9357cf20 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Wed, 18 Sep 2024 12:41:26 -0400 Subject: [PATCH 11/11] Update clip-path.yml Co-authored-by: Daniel D. Beck --- features/clip-path.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/clip-path.yml b/features/clip-path.yml index 359a39d5355..00d82bbf6a2 100644 --- a/features/clip-path.yml +++ b/features/clip-path.yml @@ -1,5 +1,5 @@ name: clip-path -description: The `clip-path` CSS property and SVG attribute sets the visible area of an element. Everything outside the area will be hidden. +description: The `clip-path` CSS property and SVG attribute set the visible area of an element. Everything outside the area will be hidden. spec: https://drafts.fxtf.org/css-masking-1/#the-clip-path # caniuse groups more clip-path features and tells a spottier support story. # caniuse: css-clip-path