Interop 2023 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 2023 is available in the proposal selection summary.
Similar to Interop 2022, 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 2023 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 2023 is tightly focused on technology that is already specified in web standards.
Our dashboard lives at wpt.fyi/interop-2023. 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 2023. Descriptions are taken from issue proposal submissions and MDN documentation.
All tests: view all tests on wpt.fyi
Authors can specify an image to be used in place of the border-style. In this case, the border’s design is taken from the sides and corners of an image specified (CSS border-image).
Container queries allow us to look at a container size and apply styles to the contents based on the size of their container rather than the viewport or other device characteristics. If the container has less space in the surrounding context, you can hide certain elements or use smaller fonts, for example. (Container Queries).
The contain CSS property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree. Containment enables isolating a subsection of the DOM, providing performance benefits by limiting calculations of layout, style, paint, size, or any combination to a DOM subtree rather than the entire page. Containment can also be used to scope CSS counters and quotes.
The math functions allow CSS numeric values to be written as mathematical expressions.
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.
The @property CSS at-rule is part of the CSS Houdini umbrella of APIs, it allows developers to explicitly define their css custom properties, allowing for property type checking, setting default values, and define whether a property can inherit values or not.
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces. This article explains all the fundamentals.
Enable testing for font stack capabilities and enable additional expressiveness with vector color fonts. (Font feature detection and palettes)
The <form> HTML element represents a document section containing interactive controls for submitting information.
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
TODO
The inert attribute on HTML elements makes the browser "ignore" user input events for the element, including focus events and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful when building UIs such as modals where you would want to "trap" the focus inside the modal when it's visible.
CSS Masking allows for partially or fully hiding portions of visual elements, using masking and clipping.
Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width. Media queries are used for the following:
Add support for ES Modules in Web Worker contexts.
Motion Path is a CSS module that allows authors to animate any graphical object along a custom path. CSS Motion Path is now supported in all three engines. But there are remaining test failures. This focus area is to make sure we reach a higher bar of interoperability, and make it more possible for developers to use Motion Path without problems.
Offscreen Canvas provides a canvas that can be rendered off screen, decoupling the DOM and the Canvas API so that the <canvas> element is no longer entirely dependent on the DOM. Rendering operations can also be run inside a worker context, allowing you to run some tasks in a separate thread and avoid heavy work on the main thread.
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). This focus area covers the behavior of pointer and mouse interaction with pages, including how they interact with hit testing and scrolling areas. We have decided to explicitly exclude touch and stylus due to lack of WPT testing support across all browsers.
The scroll-behavior, overscroll-behavior and scroll-snap CSS properties and the CSSOM View scroll-related APIs allow authors to influence how scrolling behaves.
Subgrid makes it possible to nest grids while having the items of the nested grid line up with the main grid.
The transform CSS property lets you rotate, scale, skew, or translate an element.
The URL interface is used to parse, construct, normalize, and encode URLs. It works by providing properties which allow you to easily read and modify the components of a URL. This focus area is to get all browsers to agree on an implementation of URLs as defined in the URL Standard.
The Web Codecs API gives web developers low-level access to the individual frames of a video stream and chunks of audio. It is useful for web applications that require full control over the way media is processed. For example, video or audio editors, and video conferencing.
A focus area for bugs that cause known site compatibility issues, or documented problems for authors creating libraries or sites, but which are not part of a larger feature that's appropriate for its own focus area.
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
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.
This investigation area involves working towards generating consistent accessibility tries from the same DOM + CSS.
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.
You're also welcome to join the conversation in the #interop20xx:matrix.org Matrix channel!