From a019d59236be208ef958873a90f150e2750a5f74 Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Mon, 18 May 2026 12:08:35 +0200 Subject: [PATCH 1/3] Add css gap decorations BCD keys --- features/gap-decorations.yml | 138 ++++++++++++++++++++++++++++++++--- 1 file changed, 126 insertions(+), 12 deletions(-) diff --git a/features/gap-decorations.yml b/features/gap-decorations.yml index 1a2191497f0..da3670c78ad 100644 --- a/features/gap-decorations.yml +++ b/features/gap-decorations.yml @@ -5,17 +5,131 @@ group: - grid - flexbox - multi-column -# No BCD keys yet, expecting the following keys: +compat_features: + # Subset of the keys for the column-rule CSS property, which aren't yet in multi-column.yml. + # These were added for the gap decorations feature, for symmetry with the row-rule property. + - css.properties.column-rule-break + - css.properties.column-rule-break.intersection + - css.properties.column-rule-break.none + - css.properties.column-rule-break.normal + - css.properties.column-rule-inset + - css.properties.column-rule-inset-cap + - css.properties.column-rule-inset-cap-end + - css.properties.column-rule-inset-cap-start + - css.properties.column-rule-inset-end + - css.properties.column-rule-inset-junction + - css.properties.column-rule-inset-junction-end + - css.properties.column-rule-inset-junction-start + - css.properties.column-rule-inset-start + - css.properties.column-rule-visibility-items + - css.properties.column-rule-visibility-items.all + - css.properties.column-rule-visibility-items.around + - css.properties.column-rule-visibility-items.between + - css.properties.column-rule-visibility-items.normal -# - css.properties.column-rule -# - css.properties.row-rule -# And equivalend long-hands. + # Keys for the row-rule CSS property. + - css.properties.row-rule-break + - css.properties.row-rule-break.intersection + - css.properties.row-rule-break.none + - css.properties.row-rule-break.normal + - css.properties.row-rule-color + - css.properties.row-rule-color.currentColor + - css.properties.row-rule-color.transparent + - css.properties.row-rule-inset-cap-end + - css.properties.row-rule-inset-cap-start + - css.properties.row-rule-inset-cap + - css.properties.row-rule-inset-end + - css.properties.row-rule-inset-junction-end + - css.properties.row-rule-inset-junction-start + - css.properties.row-rule-inset-junction + - css.properties.row-rule-inset-start + - css.properties.row-rule-inset + - css.properties.row-rule-style + - css.properties.row-rule-style.dashed + - css.properties.row-rule-style.dotted + - css.properties.row-rule-style.double + - css.properties.row-rule-style.groove + - css.properties.row-rule-style.hidden + - css.properties.row-rule-style.inset + - css.properties.row-rule-style.none + - css.properties.row-rule-style.outset + - css.properties.row-rule-style.ridge + - css.properties.row-rule-style.solid + - css.properties.row-rule-visibility-items + - css.properties.row-rule-visibility-items.all + - css.properties.row-rule-visibility-items.around + - css.properties.row-rule-visibility-items.between + - css.properties.row-rule-visibility-items.normal + - css.properties.row-rule-width + - css.properties.row-rule-width.medium + - css.properties.row-rule-width.thick + - css.properties.row-rule-width.thin + - css.properties.row-rule + - css.properties.row-rule.currentColor + - css.properties.row-rule.dashed + - css.properties.row-rule.dotted + - css.properties.row-rule.double + - css.properties.row-rule.groove + - css.properties.row-rule.hidden + - css.properties.row-rule.inset + - css.properties.row-rule.medium + - css.properties.row-rule.none + - css.properties.row-rule.outset + - css.properties.row-rule.ridge + - css.properties.row-rule.solid + - css.properties.row-rule.thick + - css.properties.row-rule.thin + - css.properties.row-rule.transparent -# - css.properties.rule-break -# - css.properties.row-rule-break -# - css.properties.column-rule-break -# - css.properties.rule-outset -# - css.properties.row-rule-outset -# - css.properties.column-rule-outset - -# - css.properties.rule-paint-order + # Keys for the various rule* shorthand CSS properties. + - css.properties.rule + - css.properties.rule.currentColor + - css.properties.rule.dashed + - css.properties.rule.dotted + - css.properties.rule.double + - css.properties.rule.groove + - css.properties.rule.hidden + - css.properties.rule.inset + - css.properties.rule.medium + - css.properties.rule.none + - css.properties.rule.outset + - css.properties.rule.ridge + - css.properties.rule.solid + - css.properties.rule.thick + - css.properties.rule.thin + - css.properties.rule.transparent + - css.properties.rule-break + - css.properties.rule-break.intersection + - css.properties.rule-break.none + - css.properties.rule-break.normal + - css.properties.rule-color + - css.properties.rule-color.currentColor + - css.properties.rule-color.transparent + - css.properties.rule-inset + - css.properties.rule-inset-cap + - css.properties.rule-inset-end + - css.properties.rule-inset-junction + - css.properties.rule-inset-start + - css.properties.rule-overlap + - css.properties.rule-overlap.column-over-row + - css.properties.rule-overlap.row-over-column + - css.properties.rule-style + - css.properties.rule-style.dashed + - css.properties.rule-style.dotted + - css.properties.rule-style.double + - css.properties.rule-style.groove + - css.properties.rule-style.hidden + - css.properties.rule-style.inset + - css.properties.rule-style.none + - css.properties.rule-style.outset + - css.properties.rule-style.ridge + - css.properties.rule-style.solid + - css.properties.rule-visibility-items + - css.properties.rule-visibility-items.all + - css.properties.rule-visibility-items.around + - css.properties.rule-visibility-items.between + - css.properties.rule-visibility-items.normal + - css.properties.rule-width + - css.properties.rule-width.medium + - css.properties.rule-width.thick + - css.properties.rule-width.thin From 1352c7581ebb784faa45c71627e3c3c814844b83 Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Mon, 18 May 2026 12:10:04 +0200 Subject: [PATCH 2/3] dist --- features/gap-decorations.yml.dist | 122 ++++++++++++++++++++++++++++++ 1 file changed, 122 insertions(+) diff --git a/features/gap-decorations.yml.dist b/features/gap-decorations.yml.dist index 7674b64e743..79210ed4c2b 100644 --- a/features/gap-decorations.yml.dist +++ b/features/gap-decorations.yml.dist @@ -4,3 +4,125 @@ status: baseline: false support: {} +compat_features: + - css.properties.column-rule-break + - css.properties.column-rule-break.intersection + - css.properties.column-rule-break.none + - css.properties.column-rule-break.normal + - css.properties.column-rule-inset + - css.properties.column-rule-inset-cap + - css.properties.column-rule-inset-cap-end + - css.properties.column-rule-inset-cap-start + - css.properties.column-rule-inset-end + - css.properties.column-rule-inset-junction + - css.properties.column-rule-inset-junction-end + - css.properties.column-rule-inset-junction-start + - css.properties.column-rule-inset-start + - css.properties.column-rule-visibility-items + - css.properties.column-rule-visibility-items.all + - css.properties.column-rule-visibility-items.around + - css.properties.column-rule-visibility-items.between + - css.properties.column-rule-visibility-items.normal + - css.properties.row-rule + - css.properties.row-rule-break + - css.properties.row-rule-break.intersection + - css.properties.row-rule-break.none + - css.properties.row-rule-break.normal + - css.properties.row-rule-color + - css.properties.row-rule-color.currentColor + - css.properties.row-rule-color.transparent + - css.properties.row-rule-inset + - css.properties.row-rule-inset-cap + - css.properties.row-rule-inset-cap-end + - css.properties.row-rule-inset-cap-start + - css.properties.row-rule-inset-end + - css.properties.row-rule-inset-junction + - css.properties.row-rule-inset-junction-end + - css.properties.row-rule-inset-junction-start + - css.properties.row-rule-inset-start + - css.properties.row-rule-style + - css.properties.row-rule-style.dashed + - css.properties.row-rule-style.dotted + - css.properties.row-rule-style.double + - css.properties.row-rule-style.groove + - css.properties.row-rule-style.hidden + - css.properties.row-rule-style.inset + - css.properties.row-rule-style.none + - css.properties.row-rule-style.outset + - css.properties.row-rule-style.ridge + - css.properties.row-rule-style.solid + - css.properties.row-rule-visibility-items + - css.properties.row-rule-visibility-items.all + - css.properties.row-rule-visibility-items.around + - css.properties.row-rule-visibility-items.between + - css.properties.row-rule-visibility-items.normal + - css.properties.row-rule-width + - css.properties.row-rule-width.medium + - css.properties.row-rule-width.thick + - css.properties.row-rule-width.thin + - css.properties.row-rule.currentColor + - css.properties.row-rule.dashed + - css.properties.row-rule.dotted + - css.properties.row-rule.double + - css.properties.row-rule.groove + - css.properties.row-rule.hidden + - css.properties.row-rule.inset + - css.properties.row-rule.medium + - css.properties.row-rule.none + - css.properties.row-rule.outset + - css.properties.row-rule.ridge + - css.properties.row-rule.solid + - css.properties.row-rule.thick + - css.properties.row-rule.thin + - css.properties.row-rule.transparent + - css.properties.rule + - css.properties.rule-break + - css.properties.rule-break.intersection + - css.properties.rule-break.none + - css.properties.rule-break.normal + - css.properties.rule-color + - css.properties.rule-color.currentColor + - css.properties.rule-color.transparent + - css.properties.rule-inset + - css.properties.rule-inset-cap + - css.properties.rule-inset-end + - css.properties.rule-inset-junction + - css.properties.rule-inset-start + - css.properties.rule-overlap + - css.properties.rule-overlap.column-over-row + - css.properties.rule-overlap.row-over-column + - css.properties.rule-style + - css.properties.rule-style.dashed + - css.properties.rule-style.dotted + - css.properties.rule-style.double + - css.properties.rule-style.groove + - css.properties.rule-style.hidden + - css.properties.rule-style.inset + - css.properties.rule-style.none + - css.properties.rule-style.outset + - css.properties.rule-style.ridge + - css.properties.rule-style.solid + - css.properties.rule-visibility-items + - css.properties.rule-visibility-items.all + - css.properties.rule-visibility-items.around + - css.properties.rule-visibility-items.between + - css.properties.rule-visibility-items.normal + - css.properties.rule-width + - css.properties.rule-width.medium + - css.properties.rule-width.thick + - css.properties.rule-width.thin + - css.properties.rule.currentColor + - css.properties.rule.dashed + - css.properties.rule.dotted + - css.properties.rule.double + - css.properties.rule.groove + - css.properties.rule.hidden + - css.properties.rule.inset + - css.properties.rule.medium + - css.properties.rule.none + - css.properties.rule.outset + - css.properties.rule.ridge + - css.properties.rule.solid + - css.properties.rule.thick + - css.properties.rule.thin + - css.properties.rule.transparent From 1c91c1b9c61585f562f8f37e82ed9276a6b9dfcb Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Mon, 18 May 2026 14:20:05 +0200 Subject: [PATCH 3/3] Moved keys from multi-column to gap-decorations --- features/gap-decorations.yml | 75 ++++++++++++++++++++++--------- features/gap-decorations.yml.dist | 49 ++++++++++++++++++++ features/multi-column.yml | 34 -------------- features/multi-column.yml.dist | 34 -------------- 4 files changed, 103 insertions(+), 89 deletions(-) diff --git a/features/gap-decorations.yml b/features/gap-decorations.yml index da3670c78ad..94d5d619b49 100644 --- a/features/gap-decorations.yml +++ b/features/gap-decorations.yml @@ -6,12 +6,15 @@ group: - flexbox - multi-column compat_features: - # Subset of the keys for the column-rule CSS property, which aren't yet in multi-column.yml. - # These were added for the gap decorations feature, for symmetry with the row-rule property. + # Keys for the column-rule CSS property. + - css.properties.column-rule - css.properties.column-rule-break - css.properties.column-rule-break.intersection - css.properties.column-rule-break.none - css.properties.column-rule-break.normal + - css.properties.column-rule-color + - css.properties.column-rule-color.currentColor + - css.properties.column-rule-color.transparent - css.properties.column-rule-inset - css.properties.column-rule-inset-cap - css.properties.column-rule-inset-cap-end @@ -21,13 +24,44 @@ compat_features: - css.properties.column-rule-inset-junction-end - css.properties.column-rule-inset-junction-start - css.properties.column-rule-inset-start + - css.properties.column-rule-style + - css.properties.column-rule-style.dashed + - css.properties.column-rule-style.dotted + - css.properties.column-rule-style.double + - css.properties.column-rule-style.groove + - css.properties.column-rule-style.hidden + - css.properties.column-rule-style.inset + - css.properties.column-rule-style.none + - css.properties.column-rule-style.outset + - css.properties.column-rule-style.ridge + - css.properties.column-rule-style.solid - css.properties.column-rule-visibility-items - css.properties.column-rule-visibility-items.all - css.properties.column-rule-visibility-items.around - css.properties.column-rule-visibility-items.between - css.properties.column-rule-visibility-items.normal + - css.properties.column-rule-width + - css.properties.column-rule-width.medium + - css.properties.column-rule-width.thick + - css.properties.column-rule-width.thin + - css.properties.column-rule.currentColor + - css.properties.column-rule.dashed + - css.properties.column-rule.dotted + - css.properties.column-rule.double + - css.properties.column-rule.groove + - css.properties.column-rule.hidden + - css.properties.column-rule.inset + - css.properties.column-rule.medium + - css.properties.column-rule.none + - css.properties.column-rule.outset + - css.properties.column-rule.ridge + - css.properties.column-rule.solid + - css.properties.column-rule.thick + - css.properties.column-rule.thin + - css.properties.column-rule.transparent # Keys for the row-rule CSS property. + - css.properties.row-rule - css.properties.row-rule-break - css.properties.row-rule-break.intersection - css.properties.row-rule-break.none @@ -35,15 +69,15 @@ compat_features: - css.properties.row-rule-color - css.properties.row-rule-color.currentColor - css.properties.row-rule-color.transparent + - css.properties.row-rule-inset + - css.properties.row-rule-inset-cap - css.properties.row-rule-inset-cap-end - css.properties.row-rule-inset-cap-start - - css.properties.row-rule-inset-cap - css.properties.row-rule-inset-end + - css.properties.row-rule-inset-junction - css.properties.row-rule-inset-junction-end - css.properties.row-rule-inset-junction-start - - css.properties.row-rule-inset-junction - css.properties.row-rule-inset-start - - css.properties.row-rule-inset - css.properties.row-rule-style - css.properties.row-rule-style.dashed - css.properties.row-rule-style.dotted @@ -64,7 +98,6 @@ compat_features: - css.properties.row-rule-width.medium - css.properties.row-rule-width.thick - css.properties.row-rule-width.thin - - css.properties.row-rule - css.properties.row-rule.currentColor - css.properties.row-rule.dashed - css.properties.row-rule.dotted @@ -83,21 +116,6 @@ compat_features: # Keys for the various rule* shorthand CSS properties. - css.properties.rule - - css.properties.rule.currentColor - - css.properties.rule.dashed - - css.properties.rule.dotted - - css.properties.rule.double - - css.properties.rule.groove - - css.properties.rule.hidden - - css.properties.rule.inset - - css.properties.rule.medium - - css.properties.rule.none - - css.properties.rule.outset - - css.properties.rule.ridge - - css.properties.rule.solid - - css.properties.rule.thick - - css.properties.rule.thin - - css.properties.rule.transparent - css.properties.rule-break - css.properties.rule-break.intersection - css.properties.rule-break.none @@ -133,3 +151,18 @@ compat_features: - css.properties.rule-width.medium - css.properties.rule-width.thick - css.properties.rule-width.thin + - css.properties.rule.currentColor + - css.properties.rule.dashed + - css.properties.rule.dotted + - css.properties.rule.double + - css.properties.rule.groove + - css.properties.rule.hidden + - css.properties.rule.inset + - css.properties.rule.medium + - css.properties.rule.none + - css.properties.rule.outset + - css.properties.rule.ridge + - css.properties.rule.solid + - css.properties.rule.thick + - css.properties.rule.thin + - css.properties.rule.transparent diff --git a/features/gap-decorations.yml.dist b/features/gap-decorations.yml.dist index 79210ed4c2b..fc1b0a0e935 100644 --- a/features/gap-decorations.yml.dist +++ b/features/gap-decorations.yml.dist @@ -5,6 +5,55 @@ status: baseline: false support: {} compat_features: + # baseline: high + # baseline_low_date: 2017-03-07 + # baseline_high_date: 2019-09-07 + # support: + # chrome: "50" + # chrome_android: "50" + # edge: "12" + # firefox: "52" + # firefox_android: "52" + # safari: "9" + # safari_ios: "9" + - css.properties.column-rule + - css.properties.column-rule-color + - css.properties.column-rule-color.currentColor + - css.properties.column-rule-color.transparent + - css.properties.column-rule-style + - css.properties.column-rule-style.dashed + - css.properties.column-rule-style.dotted + - css.properties.column-rule-style.double + - css.properties.column-rule-style.groove + - css.properties.column-rule-style.hidden + - css.properties.column-rule-style.inset + - css.properties.column-rule-style.none + - css.properties.column-rule-style.outset + - css.properties.column-rule-style.ridge + - css.properties.column-rule-style.solid + - css.properties.column-rule-width + - css.properties.column-rule-width.medium + - css.properties.column-rule-width.thick + - css.properties.column-rule-width.thin + - css.properties.column-rule.currentColor + - css.properties.column-rule.dashed + - css.properties.column-rule.dotted + - css.properties.column-rule.double + - css.properties.column-rule.groove + - css.properties.column-rule.hidden + - css.properties.column-rule.inset + - css.properties.column-rule.medium + - css.properties.column-rule.none + - css.properties.column-rule.outset + - css.properties.column-rule.ridge + - css.properties.column-rule.solid + - css.properties.column-rule.thick + - css.properties.column-rule.thin + - css.properties.column-rule.transparent + + # ⬇️ Same status as overall feature ⬇️ + # baseline: false + # support: {} - css.properties.column-rule-break - css.properties.column-rule-break.intersection - css.properties.column-rule-break.none diff --git a/features/multi-column.yml b/features/multi-column.yml index c69a994e9c3..3e2cd54278a 100644 --- a/features/multi-column.yml +++ b/features/multi-column.yml @@ -13,40 +13,6 @@ compat_features: - css.properties.column-gap.multicol_context.calc_values - css.properties.column-gap.multicol_context.percentage_values - css.properties.column-gap.normal - - css.properties.column-rule - - css.properties.column-rule.currentColor - - css.properties.column-rule.dashed - - css.properties.column-rule.dotted - - css.properties.column-rule.double - - css.properties.column-rule.groove - - css.properties.column-rule.hidden - - css.properties.column-rule.inset - - css.properties.column-rule.medium - - css.properties.column-rule.none - - css.properties.column-rule.outset - - css.properties.column-rule.ridge - - css.properties.column-rule.solid - - css.properties.column-rule.thick - - css.properties.column-rule.thin - - css.properties.column-rule.transparent - - css.properties.column-rule-color - - css.properties.column-rule-color.currentColor - - css.properties.column-rule-color.transparent - - css.properties.column-rule-style - - css.properties.column-rule-style.dashed - - css.properties.column-rule-style.dotted - - css.properties.column-rule-style.double - - css.properties.column-rule-style.groove - - css.properties.column-rule-style.hidden - - css.properties.column-rule-style.inset - - css.properties.column-rule-style.none - - css.properties.column-rule-style.outset - - css.properties.column-rule-style.ridge - - css.properties.column-rule-style.solid - - css.properties.column-rule-width - - css.properties.column-rule-width.medium - - css.properties.column-rule-width.thick - - css.properties.column-rule-width.thin - css.properties.column-width - css.properties.column-width.auto - css.properties.columns diff --git a/features/multi-column.yml.dist b/features/multi-column.yml.dist index a32e6037ada..c863b62e01d 100644 --- a/features/multi-column.yml.dist +++ b/features/multi-column.yml.dist @@ -56,40 +56,6 @@ compat_features: # safari_ios: "9" - css.properties.column-count - css.properties.column-count.auto - - css.properties.column-rule - - css.properties.column-rule-color - - css.properties.column-rule-color.currentColor - - css.properties.column-rule-color.transparent - - css.properties.column-rule-style - - css.properties.column-rule-style.dashed - - css.properties.column-rule-style.dotted - - css.properties.column-rule-style.double - - css.properties.column-rule-style.groove - - css.properties.column-rule-style.hidden - - css.properties.column-rule-style.inset - - css.properties.column-rule-style.none - - css.properties.column-rule-style.outset - - css.properties.column-rule-style.ridge - - css.properties.column-rule-style.solid - - css.properties.column-rule-width - - css.properties.column-rule-width.medium - - css.properties.column-rule-width.thick - - css.properties.column-rule-width.thin - - css.properties.column-rule.currentColor - - css.properties.column-rule.dashed - - css.properties.column-rule.dotted - - css.properties.column-rule.double - - css.properties.column-rule.groove - - css.properties.column-rule.hidden - - css.properties.column-rule.inset - - css.properties.column-rule.medium - - css.properties.column-rule.none - - css.properties.column-rule.outset - - css.properties.column-rule.ridge - - css.properties.column-rule.solid - - css.properties.column-rule.thick - - css.properties.column-rule.thin - - css.properties.column-rule.transparent - css.properties.columns # baseline: high