Experimental Chromium Web Platform Features

An API designed for interacting with an AI language model using text, image, and audio inputs. It supports various use cases, from generating image captions and performing visual searches to transcribing audio, classifying sound events, generating text following specific instructions, and extracting information or insights from text. It supports structured outputs which ensure that responses adhere to a predefined format, typically expressed as a JSON schema, to enhance response conformance and facilitate seamless integration with downstream applications that require standardized output formats. This API is also exposed in Chrome Extensions. This feature entry tracks the exposure on the web. An enterprise policy (GenAILocalFoundationalModelSettings) is available to disable the underlying model downloading which would render this API unavailable.

Summarizer API is a JavaScript API for producing summaries of input text, backed by an AI language model. Browsers and operating systems are increasingly expected to gain access to a language model. By exposing this built-in model, we avoid every website needing to download their own multi-gigabyte language model, or send input text to third-party APIs. The summarizer API in particular exposes a high-level API for interfacing with a language model in order to summarize inputs for a variety of use cases (Github), in a way that does not depend on the specific language model in question. An enterprise policy (GenAILocalFoundationalModelSettings) is available to disable the underlying model downloading which would render this API unavailable.

This feature adds logic to ignore the letter-spacing setting for cursive scripts as specified by the web author, in line with the spec, to ensure that letter spacing does not disrupt word structure and aims to produce better user experience for users relying on cursive scripts. The spec suggests that the UA may apply letter spacing to cursive scripts by translating the total extra space into cursive elongation or compression. Otherwise, if the UA cannot expand text from a cursive script without breaking its cursive connections, it must not apply spacing between any pair of that script’s typographic letter units at all. Ignoring letter spacing altogether for cursive scripts is simpler and helps avoid performance issues as handling spacing for such scripts requires complex calculations to maintain cursive connections and account for script-specific factors like elongation glyphs, typefaces, and calligraphy preferences. With this feature, Chromium ensures that cursive scripts will be readable and properly spaced, even if the fonts don’t have advanced typographic features. The scripts that we are proposing to apply this to in Chromium are Arabic, Hanifi Rohingya, Mandaic, Mongolian, N’Ko, Phags Pa, and Syriac as these scripts are considered cursive as per spec.

A JavaScript API to provide language translation capabilities to web pages. Browsers are increasingly offering language translation to their users. Such translation capabilities can also be useful to web developers. This is especially the case when browser's built-in translation abilities cannot help. An enterprise policy (GenAILocalFoundationalModelSettings) is available to disable the underlying model downloading which would render this API unavailable.

Exposes several new mechanisms to customize the behavior of the depth sensing feature within a WebXR session, with the goal of improving the performance of the generation or consumption of the depth buffer. The key mechanisms exposed are: the ability to request the raw or smooth depth buffer, the ability to request that the runtime stop or resume providing the depth buffer, and the ability to expose a depth buffer that does not align with the user's view exactly, so that the user agent does not need to perform unnecessary re-projections every frame.

This is not a web-exposed change. The implementation of CanvasRenderingContext2D's measureText(), fillText(), and strokeText() has a drastic change. This might affect performance, so we'd like to run an origin trial so canvas-heavy applications can try out the new implementation.

A system for creating structured headings within a document. The `headingoffset=` attribute can be added to elements that influences the child `h1`-`h6` elements' heading levels, for example a `headingoffset=1` will mean all `h1` elements will have an effective heading level of 2, and so on. In addition the `:heading` pseudo class will select all headings (tags of `h1` to `h6`) and the `:heading(N)` pseudo class will select headings with an _effective_ level of `N`. This allows for documents with different heading structures (for example user generated content) to be combined to create a well defined heading structure without significantly altering the underlying documents.

Dialog elements can be closed through a variety of mechanisms, sometimes developers want to have the ability to prevent closure. To achieve this dialogs fire a cancel event. Originally this was only fired via a close request (e.g. ESC key press), recently a `requestClose()` JS function was added which also fires the cancel event. The 'request-close' command brings that new ability to the declarative invoker commands API.

Add support for the `column-wrap` and `column-height` CSS properties, from multicol Level 2. https://drafts.csswg.org/css-multicol-2/#cwr https://drafts.csswg.org/css-multicol-2/#ch This allows for vertical column layout, or even 2D column layout. Columns can have an explicit constrained height, apart from being derived from the content-box height of the multicol container, and wrap to a new row of columns when all columns have been filled for one row, rather than creating overflowing columns in the inline direction.

This feature adds setDefaultSinkId() to MediaDevices, which enables the top-level frame to change the default audio output device used by its subframes.

There are a range of error conditions that can be hit when using the Private Aggregation API. For example, the privacy budget could run out, preventing any further histogram contributions. This feature allows developers to register histogram contributions that should only be sent if a particular type of error occurs. This feature supports measuring the frequency of the error conditions and to split these measurements on relevant developer-specified dimensions (e.g. version of deployed code). As the errors themselves may be cross-site information, we cannot simply expose them to the page for users without third-party cookies. Instead, this feature reuses the existing aggregate, noised reporting pipelines through the Aggregation Service.

Exposes find-in-page search results to authors as a highlight pseudo-element, like selections and spelling errors. This allows authors to change the foreground and background colors or add text decorations, which can be especially useful if the UA defaults have insufficient contrast with the page colors or are otherwise unsuitable.

Correct the error type thrown during WebAuthn credential creation for 'payment' credentials. Due to a historic specification mismatch, creating a 'payment' credential in a cross-origin iframe without a user activation would throw a SecurityError instead of a NotAllowedError, which is what is thrown for non-payment credentials. This is a breaking change, albeit a niche one. Code that previously detected the type of error thrown (e.g., `e instanceof SecurityError`) would be affected. Code that just generally handles errors during credential creation (e.g. `catch (e)`) will continue to function correctly.

The <canvas> DOM element, like all DOM elements, accepts a `lang` attribute that is used to define language specific treatment for font selection (when fonts have locale specific glyphs). Browsers respect this attribute. However, when an OffscreenCanvas is created there is no way to set locale information, possibly resulting in a state where an offscreen canvas produces rendered results that differ from the canvas in which it's output is used. This feature adds a `lang` IDL attribute to CanvasTextDrawingStyles to give developers direct control over the language for the text drawing and metrics.

The Container Timing API enables monitoring when annotated sections of the DOM are displayed on screen and have finished their initial paint. A developer will have the ability to mark subsections of the DOM with the containertiming attribute (similar to elementtiming for the Element Timing API) and receive performance entries when that section has been painted for the first time. This API will allow developers to measure the timing of various components in their pages.

Enable styling corners, on top of the existing border-radius, by specifying the shape/curvature of the corner. This allows shapes like squircles, notches, scoops etc., and animating between them.

Custom Functions are similar to custom properties, but instead of returning a single, fixed value, they return values based on other custom properties, parameters, and conditionals.

The CSS if() function provides a concise way to express conditional values. It accepts a series of condition-value pairs, delimited by semicolons. The function evaluates each condition sequentially and returns the value associated with the first true condition. If none of the conditions evaluate to true, the function returns an empty token stream. This allows web authors to express complex conditional logic in a simple and concise way. Example: <style> div { color: var(--color); background-color: if(style(--color: white): black; else: white); } .dark { --color: black; } .light { --color: white; } </style> <div class="dark">dark</div> <div class="light">light</div>

The CSS if() function provides a concise way to express conditional values. It accepts a series of condition-value pairs, delimited by semicolons. The function evaluates each condition sequentially and returns the value associated with the first true condition. If none of the conditions evaluate to true, the function returns an empty token stream. This allows web authors to express complex conditional logic in a simple and concise way. Example: <style> div { color: var(--color); background-color: if(style(--color: white): black; else: white); } .dark { --color: black; } .light { --color: white; } </style> <div class="dark">dark</div> <div class="light">light</div>

The CSS if() function provides a concise way to express conditional values. It accepts a series of condition-value pairs, delimited by semicolons. The function evaluates each condition sequentially and returns the value associated with the first true condition. If none of the conditions evaluate to true, the function returns an empty token stream. This allows web authors to express complex conditional logic in a simple and concise way. Example: <style> div { color: var(--color); background-color: if(style(--color: white): black; else: white); } .dark { --color: black; } .light { --color: white; } </style> <div class="dark">dark</div> <div class="light">light</div>

Exposes a user's preferred font scale to CSS. Currently, it is not practical for a page to detect if the user has changed their preferred font size via the Operating System's preferences. This CSS environment variable will reflect the scale chosen by the user.

This feature adds on-device speech recognition support to the Web Speech API, allowing websites to ensure that neither audio nor transcribed speech are sent to a third-party service for processing. Websites can query the availability of on-device speech recognition for specific languages, prompt users to install the necessary resources for on-device speech recognition, and choose between on-device or cloud-based speech recognition as needed.

This feature enables websites to support contextual biasing for speech recognition by adding a recognition phrase list to the Web Speech API. Developers can provide a list of phrases as well as updating them to apply a bias to the speech recognition models in favor of those phrases. This helps improve accuracy and relevance for domain-specific and personalized speech recognition.

The SVGAElement interface in SVG 2.0 allows manipulation of <a> elements similar to HTML anchor elements. Supporting the rel and relList attributes enhances security and privacy for developers. This alignment with HTML anchor elements ensures consistency and ease of use across web technologies.

A mediation mode for navigator.credentials.get() that causes browser sign-in UI to be displayed to the user if there is a passkey or password for the site that is immediately known to the browser, or else rejects the promise with NotAllowedError if there is no such credential available. This allows the site to avoid showing a sign-in page if the browser can offer a choice of sign-in credentials that are likely to succeed, while still allowing a traditional sign-in page flow for cases where there are no such credentials.

Provide a new HTML element that interacts with the permission flow. The permission prompt is currently triggered directly from JS without the user agent having any strong signal of the user's intent. Having an in-content element that the user uses to trigger the permission flow allows for improved permission prompt UX for users as well as a recovery path from the "denied" permission state for sites. Explainer: https://github.com/WICG/PEPC/blob/main/explainer.md Instructions: https://github.com/WICG/PEPC/blob/main/HOWTO.md Developer facing documentation: https://developer.chrome.com/blog/permission-element-origin-trial

Introduces a new violation type called "Potential Permissions Policy violation", which will only look at Permissions Policy (including report-only policy) and the allow attribute set in iframes to detect the conflict between Permissions Policy enforced vs permissions propagated to iframes.