Skip to content

README.md

Latest commit

 

History

History
403 lines (282 loc) · 24.1 KB

README.md

File metadata and controls

403 lines (282 loc) · 24.1 KB

Interop 2026

Interop 2026 is an effort to increase the interoperability of key features of the web platform across browsers. These features, which are of high priority to web developers and end users, have been proposed by the web development community, and have been selected by the Interop Project team (to learn more, see Interop 2026 proposal selection process).

The Interop 2026 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).

Similar to previous years (2022, 2023, 2024, and 2025), 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 2026 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 by the Interop team to work on throughout the year.

Interop 2026 is focused on technology that is already specified in web standards.

Contents

Focus areas

Container style queries

Container style queries, which use the @container at-rule together with one or more style() functions, apply styles to an element based on the computed values of custom properties of its container.

Resources

CSS anchor positioning

Anchor positioning places an element based on the position of another element. For example, you can place a tooltip next to the content it references.

This focus area is a carry over from Interop 2025. See last year's layout focus area description.

Resources

CSS attr()

The attr() CSS function returns the value of an attribute of an HTML element, with the option to return that value as a specific type or with a specific unit. For example: background-color: attr(data-background type(<color>), red);.

Resources

CSS contrast-color()

The contrast-color() CSS function picks a color that has guaranteed contrast against a specified foreground or background color.

Resources

CSS zoom

This focus area is a carry over from Interop 2025. See last year's layout focus area description.

This year, the work will focus on continuing to improve the interoperability of the zoom CSS property, which scales the size of an element. Unlike the transform property, a zoomed element affects page layout.

Resources

Custom highlights

Custom highlights style arbitrary text ranges, without adding extra elements to the DOM.

Resources

Dialogs and popovers

The <dialog> HTML element represents a modal or non-modal dialog box, such as a confirmation prompt or a subwindow used to enter data. The popover HTML attribute creates an overlay to display content on top of other page content. Popovers can be shown declaratively using HTML, or by using the showPopover() method.

This year, the work will focus on:

  • The <dialog closedby> attribute, which sets the user actions that close a dialog. For example, <dialog closedby="any"> allows the dialog to be closed by clicking outside of it.
  • The :open CSS pseudo-class, which matches elements that have open states like <dialog>.
  • The popover="hint" global attribute, which creates a popover that is subordinate to other popovers that have a popover="auto" attribute. You can use this to create tooltips that don't dismiss auto popovers for example.

Resources

Fetch uploads and ranges

The fetch() method makes asynchronous HTTP requests.

This year, the work will focus on:

  • ReadableStream in body, to stream data to the server.
  • Supporting FormData and mime-type for requests and responses.
  • Supporting the Range header.

Resources

IndexedDB

The IndexedDB API is a local storage transactional object database.

The work will focus on the getAllRecords() methods of IDBObjectStore and IDBIndex, which return records and their primary keys from an IndexedDB store or index. The records can be read in batches and in reverse order. The getAllRecords() methods speed up read operations on large datasets.

Resources

JSPI for Wasm

Wasm code (also known as WebAssembly) is a portable binary instruction format. The JavaScript Promise Integration API (JSPI) allows Wasm applications that were written assuming synchronous access to external functionality to operate smoothly in an environment where the functionality is actually asynchronous.

Resources

Media pseudo-classes

The :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked CSS pseudo-classes match <audio> and <video> elements based on their state.

Resources

Navigation API

The navigation API initiates, intercepts, or modifies browser navigation actions.

This year, the work will focus on continuing to improve the interoperability of the Navigation API, and on the precommitHandler option to navigateEvent.intercept(), which defers the commit until a handler has resolved.

Resources

Scoped custom element registries

The CustomElementRegistry() constructor creates a new custom element registry that's separate from the global window.customElements registry. Creating more than one registry is useful for multiple custom elements that have the same tag name to coexist.

Resources

Scroll-driven animations

The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.

Resources

Scroll snap

CSS scroll snap controls the panning and scrolling behavior within a scroll container.

Resources

CSS shape()

The shape() CSS function creates shapes with a series of commands like line, move, and curve. It can be used with clip-path and shape-outside.

Resources

View transitions

View transitions allow you to create animated visual transitions between different states of a document, or between different documents in a multi-page application.

This year, the work will focus on:

  • Continuing to improve the interoperability of same-document view transitions.
  • The blocking="render" attribute for <link>, <script>, and <style> elements, which blocks rendering until the external script or stylesheet has been loaded, or until a specific element is in the DOM.
  • The <link rel="expect"> attribute, which is a hint to the browser to block rendering until the element that the href value references is connected to the document and fully parsed.
  • The :active-view-transition-type() CSS pseudo-class, which matches only when the active view transition was started with the specified type.
  • Cross-document view transitions.

Resources

Web compat

Web compatibility refers to whether a website works as intended in a particular browser version. The tests in this focus area were selected based on evidence that differences between browsers have caused real-world problems for web developers or end users.

This year, the work will focus on web compatibility issues with:

  • ESM module loading
  • The timing of scroll events relative to animation events
  • Unprefixing the -webkit-user-select property

Resources

WebRTC

The WebRTC API establishes real-time communication channels directly between browsers. It is commonly used in video conferencing applications.

This year, the work will focus on:

  • Continuing to improve the interoperability of WebRTC.
  • Fixing the remaining failing tests from the WebRTC Interop 2025 focus area.

Resources

WebTransport

The WebTransport API transmits data between a client and a server, by using the HTTP/3 protocol.

Resources

Investigation efforts

In addition to the above focus areas, Interop 2026 also commits to making progress on the following investigation efforts. Each investigation effort below consists of a set of tasks that will bring the corresponding feature up to the bar that's required for it to possibly become a focus area in the future.

Accessibility testing

This is a continuation of last year's accessibility testing investigation effort, aimed at working towards generating consistent accessibility trees from the same DOM and CSS across browsers, and improving the WPT testing infrastructure for accessibility testing.

Resources

JPEG XL

The JPEG XL image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression.

This investigation effort will focus on making the feature testable. Current tests for this are sparse. Existing decoders have more comprehensive test suites, but we need to figure out the requirements. For example, progressive rendering is an important feature for developers, but how and when browsers should do this (to avoid performance issues) is currently being debated.

Resources

Mobile testing

This is a continuation of last year's mobile testing investigation effort, which was focused on getting mobile browser data onto the wpt.fyi dashboard site.

This year, the work will focus on improving the WPT infrastructure to test mobile-specific features such as dynamic viewport changes.

Resources

WebVTT

This is a continuation of last year's WebVTT testing investigation effort, which aims at fixing as many tests as possible, making any needed changes to WebVTT specification along the way, so browser developers have a more transparent understanding of how their implementation conforms to the standard, hopefully opening up the future possibility for greatly improved interoperability.

Resources