Skip to content

Demo: compat key sets authoring (successor to compute_from) #3902

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ddbeck wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Demo: compat key sets authoring (successor to compute_from) #3902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 6 additions & 6 deletions features/absolute-positioning.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ name: Absolute positioning
description: "The `position: absolute` CSS declaration removes an element from the normal flow and positions it relative to its containing block, which is often the root element, or closest positioned ancestor."
spec: https://drafts.csswg.org/css-position-3/#abspos-insets
group: positioning
status:
compute_from: css.properties.position.absolute
compat_features:
- css.properties.position.absolute
- css.properties.place-self.position_absolute_context
- css.properties.align-self.position_absolute_context
- css.properties.justify-self.position_absolute_context
core_name_tbc:
- css.properties.position.absolute # former compute_from
incidentals_name_tbc:
- css.properties.align-self.position_absolute_context
- css.properties.justify-self.position_absolute_context
- css.properties.place-self.position_absolute_context
Comment on lines +9 to +11
Copy link
Copy Markdown
Collaborator Author

@ddbeck ddbeck Mar 30, 2026

Choose a reason for hiding this comment

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

The bulk of these changes will merely expose certain issues in a more findable way. Here, you can see more easily that there should be a separate feature minted. It happens that this is already in progress with #2947.

7 changes: 7 additions & 0 deletions features/autofocus.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,10 @@ status:
firefox_android: "4"
safari: "4"
safari_ios: "3.2"
compat_features:
modifiers_name_tbc:
- api.HTMLElement.autofocus
- api.MathMLElement.autofocus
- api.SVGElement.autofocus
- html.global_attributes.autofocus
- svg.global_attributes.autofocus
Comment on lines +18 to +23
Copy link
Copy Markdown
Collaborator Author

@ddbeck ddbeck Mar 30, 2026

Choose a reason for hiding this comment

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

Here's the first new application for these sets: linting our existing overrides. In autofocus, we've overridden the status to align with caniuse. By assigning the keys to the modifiers_name_tbc set, I'm declaring that all of the keys must meet the level given by the status override.

(We could have an implicit rule that a status override implies that a regular compat_features array is the modifiers_name_tbc set, but this seems too magical to me.)

11 changes: 6 additions & 5 deletions features/backdrop.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ name: "::backdrop"
description: The `::backdrop` CSS pseudo-element is a box underneath an element in the top layer, such as a `<dialog>`. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.
spec: https://drafts.csswg.org/css-position-4/#backdrop
group: selectors
status:
compute_from: css.selectors.backdrop
compat_features:
- css.selectors.backdrop
- css.selectors.backdrop.dialog
- css.selectors.backdrop.inherit_from_originating_element
core_name_tbc:
- css.selectors.backdrop # former compute_from
modifiers_name_tbc:
- css.selectors.backdrop.dialog
Copy link
Copy Markdown
Collaborator Author

@ddbeck ddbeck Mar 30, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

Here's another exposure: key-sharing opportunities. Here we have a key that should probably exist on two features: backdrop and dialog. But the influence each of the key ought to have on the status differ, depending on the feature.

incidentals_name_tbc:
- css.selectors.backdrop.inherit_from_originating_element
26 changes: 13 additions & 13 deletions features/background-sync.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
name: Background sync
description: The background synchronization API registers a service worker callback to run only when the device is no longer offline. You can use this to let users continue using your app while offline and synchronize with a server after reconnecting.
spec: https://wicg.github.io/background-sync/spec/
status:
compute_from: api.SyncManager
compat_features:
- api.Permissions.permission_background-sync
- api.ServiceWorkerGlobalScope.sync_event
- api.ServiceWorkerRegistration.sync
- api.SyncEvent
- api.SyncEvent.SyncEvent
- api.SyncEvent.lastChance
- api.SyncEvent.tag
- api.SyncManager
- api.SyncManager.getTags
- api.SyncManager.register
- api.SyncManager.worker_support
core_name_tbc:
- api.ServiceWorkerGlobalScope.sync_event
- api.ServiceWorkerRegistration.sync
- api.SyncEvent
- api.SyncEvent.SyncEvent
- api.SyncEvent.lastChance
- api.SyncEvent.tag
- api.SyncManager # former compute_from
- api.SyncManager.getTags
- api.SyncManager.register
modifiers_name_tbc:
- api.Permissions.permission_background-sync
- api.SyncManager.worker_support
Comment on lines +16 to +17
Copy link
Copy Markdown
Collaborator Author

@ddbeck ddbeck Mar 30, 2026

Choose a reason for hiding this comment

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

Here's an application: alignment with caniuse. Two keys are excluded from the birthday setting here, but we can now enforce that the remaining keys should be supported in the same set of browsers as the birthday set of keys.

That said, in this case (given the negative standards positions), we could probably eliminate the compute_from, if we coordinated with caniuse.

36 changes: 18 additions & 18 deletions features/border-radius.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@ name: border-radius
description: The `border-radius` CSS property rounds the corners of the border drawn around an element.
spec: https://drafts.csswg.org/css-backgrounds-3/#corners
caniuse: border-radius
status:
compute_from: css.properties.border-radius
group: borders-outlines
compat_features:
- css.properties.border-bottom-left-radius
- css.properties.border-bottom-left-radius.elliptical_corners
- css.properties.border-bottom-left-radius.percentages
- css.properties.border-bottom-right-radius
- css.properties.border-bottom-right-radius.elliptical_corners
- css.properties.border-bottom-right-radius.percentages
- css.properties.border-radius
- css.properties.border-radius.elliptical_borders
- css.properties.border-radius.percentages
- css.properties.border-radius.4_values_for_4_corners
- css.properties.border-top-left-radius
- css.properties.border-top-left-radius.elliptical_corners
- css.properties.border-top-left-radius.percentages
- css.properties.border-top-right-radius
- css.properties.border-top-right-radius.elliptical_corners
- css.properties.border-top-right-radius.percentages
core_name_tbc:
- css.properties.border-bottom-left-radius
- css.properties.border-bottom-left-radius.elliptical_corners
- css.properties.border-bottom-left-radius.percentages
- css.properties.border-bottom-right-radius
- css.properties.border-bottom-right-radius.elliptical_corners
- css.properties.border-bottom-right-radius.percentages
- css.properties.border-radius # former compute_from
- css.properties.border-radius.4_values_for_4_corners
- css.properties.border-radius.elliptical_borders
- css.properties.border-top-left-radius
- css.properties.border-top-left-radius.elliptical_corners
- css.properties.border-top-left-radius.percentages
- css.properties.border-top-right-radius
- css.properties.border-top-right-radius.elliptical_corners
- css.properties.border-top-right-radius.percentages
modifiers_name_tbc:
- css.properties.border-radius.percentages
Copy link
Copy Markdown
Collaborator Author

@ddbeck ddbeck Mar 30, 2026

Choose a reason for hiding this comment

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

Here's another exposure: iffy upstream data. css.properties.border-radius.percentage is probably incorrect. But there's also an application here: we can accept the status level of this key and validate it against the headline status, without taking action on the upstream data immediately.

Later, we can ratchet this key into higher expectations, if and when we fix the upstream data.

169 changes: 85 additions & 84 deletions features/css-object-model.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,88 +2,89 @@ name: CSS object model
description: The CSS object model API reads, creates, and modifies CSS stylesheets and inline styles. Also known as CSSOM.
spec: https://drafts.csswg.org/cssom-1/#css-object-model
group: cssom
status:
compute_from: api.CSS
compat_features:
- api.CSS
- api.CSSGroupingRule
- api.CSSGroupingRule.cssRules
- api.CSSGroupingRule.deleteRule
- api.CSSGroupingRule.insertRule
- api.CSSPageDescriptors
- api.CSSPageDescriptors.margin
- api.CSSPageDescriptors.margin-bottom
- api.CSSPageDescriptors.margin-left
- api.CSSPageDescriptors.margin-right
- api.CSSPageDescriptors.margin-top
- api.CSSPageDescriptors.marginBottom
- api.CSSPageDescriptors.marginLeft
- api.CSSPageDescriptors.marginRight
- api.CSSPageDescriptors.marginTop
- api.CSSPageDescriptors.page-orientation
- api.CSSPageDescriptors.pageOrientation
- api.CSSPageDescriptors.size
- api.CSSPageRule
- api.CSSPageRule.selectorText
- api.CSSPageRule.style
- api.CSSPageRule.style.type_CSSPageDescriptors
- api.CSSRule
- api.CSSRule.cssText
- api.CSSRule.parentRule
- api.CSSRule.parentStyleSheet
- api.CSSRuleList
- api.CSSRuleList.item
- api.CSSRuleList.length
- api.CSSStyleDeclaration
- api.CSSStyleDeclaration.cssText
- api.CSSStyleDeclaration.getPropertyPriority
- api.CSSStyleDeclaration.getPropertyValue
- api.CSSStyleDeclaration.item
- api.CSSStyleDeclaration.length
- api.CSSStyleDeclaration.parentRule
- api.CSSStyleDeclaration.removeProperty
- api.CSSStyleDeclaration.setProperty
- api.CSSStyleDeclaration.@@iterator
- api.CSSStyleRule
- api.CSSStyleRule.selectorText
- api.CSSStyleRule.style
- api.CSSStyleSheet
- api.CSSStyleSheet.cssRules
- api.CSSStyleSheet.deleteRule
- api.CSSStyleSheet.insertRule
- api.CSSStyleSheet.insertRule.index_parameter_optional
- api.CSSStyleSheet.ownerRule
- api.Document.styleSheets
- api.HTMLElement.style
- api.HTMLLinkElement.sheet
- api.HTMLStyleElement.sheet
- api.MediaList
- api.MediaList.appendMedium
- api.MediaList.deleteMedium
- api.MediaList.item
- api.MediaList.length
- api.MediaList.mediaText
- api.MediaList.toString
- api.ProcessingInstruction.sheet
- api.ShadowRoot.styleSheets
- api.StyleSheet
- api.StyleSheet.disabled
- api.StyleSheet.href
- api.StyleSheet.media
- api.StyleSheet.ownerNode
- api.StyleSheet.parentStyleSheet
- api.StyleSheet.title
- api.StyleSheet.type
- api.StyleSheetList
- api.StyleSheetList.item
- api.StyleSheetList.length
- api.CSSMarginRule
- api.CSSMarginRule.name
- api.CSSMarginRule.style
- api.CSSConditionRule
- api.CSSConditionRule.conditionText
- api.CSSMediaRule
- api.CSSMediaRule.media
- api.CSSPseudoElement
- api.CSSPseudoElement.element
- api.CSSPseudoElement.type
core_name_tbc:
Copy link
Copy Markdown
Collaborator Author

@ddbeck ddbeck Mar 30, 2026

Choose a reason for hiding this comment

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

Here's another exposure: a too-large feature. We should break this up into smaller pieces. There are maybe a dozen features like this. But in the mean time, we can declare what we know about this feature—the subset of keys that are "original", the subset that have the same status, and the subset that doesn't—and prevent unwitting changes to those sets.

- api.CSS # former compute_from
- api.CSSMediaRule
- api.CSSMediaRule.media
- api.CSSPageRule
- api.CSSPageRule.style
- api.CSSRule
- api.CSSRule.cssText
- api.CSSRule.parentRule
- api.CSSRule.parentStyleSheet
- api.CSSRuleList
- api.CSSRuleList.item
- api.CSSRuleList.length
- api.CSSStyleDeclaration
- api.CSSStyleDeclaration.cssText
- api.CSSStyleDeclaration.getPropertyPriority
- api.CSSStyleDeclaration.getPropertyValue
- api.CSSStyleDeclaration.item
- api.CSSStyleDeclaration.length
- api.CSSStyleDeclaration.parentRule
- api.CSSStyleDeclaration.removeProperty
- api.CSSStyleDeclaration.setProperty
- api.CSSStyleRule
- api.CSSStyleRule.selectorText
- api.CSSStyleRule.style
- api.CSSStyleSheet
- api.CSSStyleSheet.cssRules
- api.CSSStyleSheet.deleteRule
- api.CSSStyleSheet.insertRule
- api.CSSStyleSheet.ownerRule
- api.Document.styleSheets
- api.HTMLElement.style
- api.HTMLLinkElement.sheet
- api.HTMLStyleElement.sheet
- api.MediaList
- api.MediaList.appendMedium
- api.MediaList.deleteMedium
- api.MediaList.item
- api.MediaList.length
- api.MediaList.mediaText
- api.MediaList.toString
- api.StyleSheet
- api.StyleSheet.disabled
- api.StyleSheet.href
- api.StyleSheet.media
- api.StyleSheet.ownerNode
- api.StyleSheet.parentStyleSheet
- api.StyleSheet.title
- api.StyleSheet.type
- api.StyleSheetList
- api.StyleSheetList.item
- api.StyleSheetList.length
modifiers_name_tbc:
- api.CSSConditionRule
- api.CSSConditionRule.conditionText
- api.CSSGroupingRule
- api.CSSGroupingRule.cssRules
- api.CSSGroupingRule.deleteRule
- api.CSSGroupingRule.insertRule
- api.CSSPageRule.selectorText
- api.CSSStyleDeclaration.@@iterator
- api.CSSStyleSheet.insertRule.index_parameter_optional
- api.ProcessingInstruction.sheet
- api.ShadowRoot.styleSheets
incidentals_name_tbc:
- api.CSSMarginRule
- api.CSSMarginRule.name
- api.CSSMarginRule.style
- api.CSSPageDescriptors
- api.CSSPageDescriptors.margin
- api.CSSPageDescriptors.margin-bottom
- api.CSSPageDescriptors.margin-left
- api.CSSPageDescriptors.margin-right
- api.CSSPageDescriptors.margin-top
- api.CSSPageDescriptors.marginBottom
- api.CSSPageDescriptors.marginLeft
- api.CSSPageDescriptors.marginRight
- api.CSSPageDescriptors.marginTop
- api.CSSPageDescriptors.page-orientation
- api.CSSPageDescriptors.pageOrientation
- api.CSSPageDescriptors.size
- api.CSSPageRule.style.type_CSSPageDescriptors
- api.CSSPseudoElement
- api.CSSPseudoElement.element
- api.CSSPseudoElement.type
67 changes: 34 additions & 33 deletions features/dedicated-workers.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,38 @@ description: The `Worker()` constructor runs a script in its own thread, which c
spec: https://html.spec.whatwg.org/multipage/workers.html#workers
caniuse: webworkers
group: workers
status:
compute_from: api.WorkerGlobalScope.importScripts
compat_features:
- api.DedicatedWorkerGlobalScope
- api.DedicatedWorkerGlobalScope.close
- api.DedicatedWorkerGlobalScope.name
- api.Worker
- api.Worker.Worker
- api.Worker.Worker.mime_checks
- api.Worker.Worker.options_name_parameter
- api.Worker.error_event
- api.Worker.terminate
- api.Worker.worker_support
- api.WorkerGlobalScope
- api.WorkerGlobalScope.error_event
- api.WorkerGlobalScope.importScripts
- api.WorkerGlobalScope.importScripts.mime_checks
- api.WorkerGlobalScope.location
- api.WorkerGlobalScope.navigator
- api.WorkerGlobalScope.rejectionhandled_event
- api.WorkerGlobalScope.self
- api.WorkerGlobalScope.unhandledrejection_event
- api.WorkerLocation
- api.WorkerLocation.hash
- api.WorkerLocation.host
- api.WorkerLocation.hostname
- api.WorkerLocation.href
- api.WorkerLocation.origin
- api.WorkerLocation.pathname
- api.WorkerLocation.port
- api.WorkerLocation.protocol
- api.WorkerLocation.search
- api.WorkerLocation.toString
- api.WorkerNavigator
core_name_tbc:
- api.DedicatedWorkerGlobalScope
- api.DedicatedWorkerGlobalScope.close
- api.Worker
- api.Worker.Worker
- api.Worker.error_event
- api.Worker.terminate
- api.WorkerGlobalScope
- api.WorkerGlobalScope.error_event
- api.WorkerGlobalScope.importScripts # former compute_from
- api.WorkerGlobalScope.location
- api.WorkerLocation
- api.WorkerLocation.hash
- api.WorkerLocation.host
- api.WorkerLocation.hostname
- api.WorkerLocation.href
- api.WorkerLocation.pathname
- api.WorkerLocation.port
- api.WorkerLocation.protocol
- api.WorkerLocation.search
- api.WorkerLocation.toString
- api.WorkerNavigator
modifiers_name_tbc:
- api.DedicatedWorkerGlobalScope.name
- api.Worker.Worker.options_name_parameter
- api.WorkerGlobalScope.importScripts.mime_checks
- api.WorkerGlobalScope.navigator
- api.WorkerGlobalScope.rejectionhandled_event
- api.WorkerGlobalScope.self
- api.WorkerGlobalScope.unhandledrejection_event
- api.WorkerLocation.origin
incidentals_name_tbc:
- api.Worker.Worker.mime_checks
Copy link
Copy Markdown
Collaborator Author

@ddbeck ddbeck Mar 30, 2026

Choose a reason for hiding this comment

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

This demonstrates a good application for incidentals_name_tbc: associating a key with the most-relevant feature, even though that key cannot contribute to the headline status.

In this case, api.Worker.Worker.mime_checks isn't a "feature" that a developer can use, but it is relevant restriction that developers will probably want to respect going forward.

See link-selectors for a closely-related situation.

- api.Worker.worker_support
Loading
Loading