Interop 2024 is an effort to increase interoperability across browsers in key technical areas that are of high priority to web developers and end users. This effort is part of the web-platform-tests (WPT) project — an automated test suite for web standards — and run by a team of representatives from companies that make substantial contributions to browser rendering engines (including Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla).
The process we went through to arrive at our priority list for Interop 2024 is available in the proposal selection summary.
Similar to Interop 2022 and Interop 2023, the tests we selected will be continuously run on automated testing infrastructure. The test pass rates for each browser rendering engine will be displayed on the Interop 2024 Dashboard — displaying the percentage of passing tests in each chosen area, and an overall total score of tests that pass in every browser. The dashboard will also display scores for group progress on particular Investigation Efforts selected for the Interop team to work on throughout the year.
Interop 2024 is tightly focused on technology that is already specified in web standards.
Our dashboard lives at wpt.fyi/interop-2024. It computes an interop score as the percentage of tests in WPT that pass in all three browser engines.
The following features were selected for Interop 2024.
This focus area comes from work on one of the Interop 2023 investigation areas. The work resulted in tests that mean we can include improving the interoperability of some specific areas relating to the browser’s accessibility tree.
The first area is Accessible Name and Description Computation (accname). Accessible names convey the purpose or intent of the element. This helps users understand what the element is for and how they can interact with it. The accname specification defines how browsers create this accessible name string for an element. The ARIA specification includes a walkthrough of how this name is calculated.
The second area is computed role. The computed role of an element is a string that represents the role of the element as computed by the browser engine. This is used primarily in developer tools and, for example, in the WebDriver function getComputedRole, enabling interoperability testing.
Lastly, there's a new set of tests covering display: contents.
During Interop 2024 the aim is to ensure all browsers create accessible names and computed roles in the same way.
- Accessible Name and Description Computation 1.2 Specification
- MDN: Accessible name
- More accessible markup with display: contents
The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule.
CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor.
CSS nesting helps with the readability, modularity, and maintainability of CSS stylesheets. It also potentially helps reduce the size of CSS files, thereby decreasing the amount of data downloaded by users.
While all engines support nesting, there are differences as implementations happened while the specification was evolving. The work here will ensure that all engines support nesting in the same way, and implement all features of the spec.
- MDN: CSS nesting
- Chrome for Developers: CSS nesting
- Chrome for Developers: CSS nesting relaxed syntax update
This focus area includes the @property at-rule.
This rule lets you define a custom property, including type checking and initial value.
This focus area was included in Interop 2023, work this year is to make it fully interoperable.
Declarative Shadow DOM is a declarative API that allows the creation of shadow roots using only HTML and no JavaScript. This API allows Web Components that use Shadow DOM to make use of Server-Side Rendering (SSR), to get rendered content on screen quickly without requiring JavaScript for shadow root attachment.
Declarative Shadow DOM is already supported by Chrome, Safari, and Firefox. The work will ensure that any differences in implementation are resolved.
The font-size-adjust CSS property provides a way to modify the size of lowercase letters relative to the size of uppercase letters,
which defines the overall font-size.
This property is useful for situations where font fallback can occur.
The work includes basic support for the font-size-adjust property,
support for the from-font keyword, and support for the two value syntax
(which allows the developer to size according to another metric,
not just x-height).
Firefox and Safari have support for basic, from-font and two value.
The Chrome implementation needs updating.
The WebSocket constructor originally required ws: and wss: URLs,
preventing the use of relative URLs and resulting workaround code.
The specification has been updated to allow http(s) schemes, and therefore relative URLs.
These are normalized to ws: and wss:.
The change to the specification has already been implemented in Safari, in Interop 2024 the aim is to land implementations in the other browsers.
IndexedDB is a way to persistently store data inside a user's browser. It lets authors create web applications with rich query abilities regardless of network availability, so applications can work both online and offline.
All engines have good support for version 2 IndexedDB functionality, however there are a number of inconsistencies with newer features (version 3), and it is these that Interop 2024 seeks to address.
The work this year does not include storage buckets.
This focus area covers layout methods included in Interop 2023 — flexbox, grid, and subgrid.
During Interop 24 remaining test failures for these areas will be addressed.
Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers).
In Interop 2022, pointer and mouse events were one of the investigation areas. This led to the inclusion of pointer and mouse events as a focus area in 2023. These work included pointer and mouse interaction with pages, including how they behave with hit testing and scrolling areas.
Includes tests that were not addressed during Interop 2023, and some new tests. The work does not include touch or pen input.
The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.
The Popover API is implemented in Chrome and Safari, with the Firefox implementation due to ship. The work for Interop 2024 is to fix failing tests to ensure interoperable implementations. Work in this area does not include close watcher, hints, the anchor attribute, or the overlay property.
The CSS Relative Color syntax allows a color to be defined relative to another color,
using the from keyword and optionally calc() for any of the color values.
Relative color syntax is interoperable, however implementations don’t include the currentcolor keyword,
the work during Interop 2024 will implement this keyword interoperably.
The requestVideoFrameCallback() method of the HTMLVideoElement API
lets you register a callback that runs in the rendering steps when a new video frame is sent to the compositor.
This enables efficient per-video-frame operations on video,
such as video processing and painting to a canvas, video analysis,
or synchronization with external audio sources.
The work involves implementing the method in Firefox, and fixing bugs in the Chrome and Safari implementations.
- MDN: requestVideoFrameCallback
- MDN: HTMLVideoElement
- web.dev: Perform efficient per-video-frame operations on video with requestVideoFrameCallback()
The scrollbar-width property lets you set the maximum thickness of an element's scrollbars when they are shown.
The scrollbar-gutter property provides a way to reserve space for the scrollbar,
to prevent layout shifts as a scrollbar appears or disappears.
These properties are not currently implemented in all browsers, so the work this year is to make the properties interoperable.
This focus area includes work on the @starting-style CSS rule.
This rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update,
when first displayed on a previously loaded page.
Also included is the transition-behavior property which specifies whether transitions will be started for properties whose animation behavior is discrete.
These properties are currently implemented in Chrome and Edge, the aim is to make them interoperable across all browsers this year.
The :dir() CSS pseudo-class selector matches elements based on directionality,
which is determined based on the HTML dir attribute.
:dir(ltr) matches left-to-right text directionality,
and :dir(rtl) matches elements with right-to-left text directionality.
It is not equivalent to [dir] attribute selectors because it matches against directions inherited from an ancestor with the dir attribute,
and because it matches against the direction computed from use of `dir=auto
(which determines directionality from the first character in the text with strong directionality).
The :dir() pseudo-class was included in Interop 2023 as part of the pseudo-classes focus area.
The work resulted in the need for some specification improvements,
which have now been made.
The work this year will ensure interoperability of :dir() and dir=auto, based on these improvements.
The balance value of text-wrap lets the browser know that you would like it to balance the lines of text. It's typically used in headings or other short text sections to avoid typographic widows.
Currently, browsers differ in their support for the various longhand and shorthand versions of this property. The work this year aims to make these interoperable.
The focus area does not include tests for interactions with float and line-clamp.
- MDN: text-wrap
- Chrome for Developers: CSS text-wrap: balance
- CSS text-wrap: balance
- An end to typographic widows on the web
URLs are a fundamental part of the web platform, however as part of the early web they were under-specified leading to various interoperability problems with URL parsing.
URL was an Interop 2023 focus area, work will continue during Interop 2024 to fix remaining test failures.
An investigation efforts consists of a set of tasks that will bring the feature up to the bar required for a Focus Area in the future. If this involves any standards work, that work must be done in the appropriate standards group, and those doing the work need to join that group.
The following investigation areas were selected for Interop 2023.
Carried over from 2023, this investigation area involves working towards generating consistent accessibility trees from the same DOM and CSS.
Carried over from 2023, this investigation area involves doing the infrastructure work required to allow WPT Interop to accept future Interop proposals that test mobile-specific functionality which can't be scored using the current desktop-only wpt CI.
A new investigation area for 2024.
You're also welcome to join the conversation in the #interop20xx:matrix.org Matrix channel!