Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 159 additions & 12 deletions features/gap-decorations.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,164 @@ group:
- grid
- flexbox
- multi-column
# No BCD keys yet, expecting the following keys:
compat_features:
# 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
- 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-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

# - css.properties.column-rule
# - css.properties.row-rule
# And equivalend long-hands.
# 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
- 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-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-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
171 changes: 171 additions & 0 deletions features/gap-decorations.yml.dist
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,174 @@
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"
Comment on lines +7 to +18
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems weird to me that properties that are over 10 years old are now under a headline status with no browser support at all. Can you elaborate on this?

(I'm wondering if there's some sort data issue here, like missing flex_context keys, or else multiple features, something like gap-decoration-multicol, gap-decoration-flex, etc.)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gap decorations started with the CSS multicol feature, a long time ago. At the time, it was only possible to decorate gaps in a multicol layout, and only vertical gaps (i.e. columns). At the time, also, gap decorations wasn't really considered as a separate feature, but instead was part of multicol.

Starting with Chrome/Edge 149, gap decorations is now its own, separate, feature. It now can be used both vertically and horizontally, and with grid, flex, and multicol.
Additionally, the feature now has a bunch of new properties to define exactly where the decorations start and end, how they cross, or where they appear at all.

My first idea was to only add the brand new BCD keys to gap-decorations.yml and leave other features untouched.
Then I thought it would make more sense to move the gap decorations-related keys that are in multi-column.yml to gap-decorations.yml.
This way, multi-column.yml is only about, well, multi-column (i.e. the column-width and column-count properties), and gap-decorations.yml contains the complete list of keys that make up the feature.

I did this mostly because multi-column.yml uses compute_from to pin its status to just one property.

I can revert if the historical fact that column gap decorations for multicol only seems more important to preserve.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess now that I've had more time to think on this, I think we do in fact have missing data.

If we merged this PR, then if I look up the compatibility information for this feature, it'll imply that I can set column-rule on a CSS grid container and get rules. But that's not true. It seems like something is missing from BCD, if that's the case (perhaps a key for <gap-rule-list> or a grid_context key). I think we need to file one or more bugs upstream, to decide how to represent that.

But even if we had that stuff, gap decorations are conceptually different from multicol. Maybe there's a case to be made for a third reason to allow compat keys to be shared between two features (see https://github.com/web-platform-dx/web-features/pull/4034/changes#diff-1dd2fbbb7774410e5b66e9a554df689ef71981117b2c8fdd6570432cf0a13c59), when a key is an entry point into two or more features.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right. column-rule would work on a CSS grid, only if row-rule is also supported. The addition of row-rule (as well as rule, and a bunch of other long-hand properties) is sign that the "new" gap decorations are supported.

Maybe the best thing to do here is to keep column-rule where it was (in multicol) and only add the new BCD keys to the new feature.

- 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
- 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
34 changes: 0 additions & 34 deletions features/multi-column.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading