Experimental Chromium Web Platform Features

HTML-in-canvas enables customizing the rendering of html using canvas with three new primitives: an attribute to opt-in canvas elements (layoutsubtree), methods to draw child elements (2d: drawElementImage, webgl: texElementImage2D, webgpu: copyElementImageToTexture), and a paint event which fires to handle updates.

Connection Allowlists is a feature designed to provide explicit control over external endpoints by restricting connections initiated via the Fetch API or other web platform APIs from a document or worker. The proposed implementation involves the distribution of an authorized endpoint list from the server through an HTTP response header. Prior to the establishment of any connection by the user agent on behalf of a page, the agent will evaluate the destination against this allowlist; connections to verified endpoints will be permitted, while those failing to match the entries in the list will be blocked. More details on the proposal can be found here: https://github.com/WICG/connection-allowlists Design doc: https://docs.google.com/document/d/1B3LERUObjVDAKBNLpdIxbk8LC96rWUn1q8vtP9pPIuA/edit?usp=sharing

Relative alpha colors refer to an origin color, and only change the alpha channel. The meaning of alpha channels is defined in CSS Color 4 § 4.2 Representing Transparency in Colors: the <alpha-value> syntax.

Implements the border-area value for the CSS background-clip property, as defined in CSS Backgrounds Level 4. background-clip: border-area clips an element's background to the area painted by its border strokes, taking border-width and border-style into account while ignoring transparency from border-color. This enables gradient borders without border-image. WebKit already ships this feature; this implementation brings Chromium to parity.

Extends the CSS light-dark() function to accept image values (url(), image-set(), none) in author stylesheets, allowing image properties like background-image, list-style-image, border-image-source, cursor, and content to automatically switch between images based on the user's preferred color scheme. Previously this was only allowed in UA stylesheets. This aligns with the CSS Color 5 spec and matches Firefox's existing implementation.

The random() function brings generative randomness to CSS, allowing web authors to generate a random numeric value within a specified range. For example, web authors can use random() to scatter elements randomly within their container: .dot { /* Position each dot randomly */ position: absolute; top: random(0%, 100%); left: random(0%, 100%); } This feature also includes caching controls. By default, each random() function resolves to a new, distinct value. Web authors can override this default by passing a <random-key> value as the function's first argument to control how random values are shared across properties and elements.

Adds support for the rect() and xywh() basic shape functions in the CSS shape-outside property. These functions allow developers to define float exclusion shapes using rectangle coordinates, aligning Chrome with Firefox and Safari which already support this feature.

This feature introduces "Platform-Provided Behaviors" to ElementInternals, allowing custom elements to adopt native behaviors without extending native elements or reimplementing complex logic. It modifies attachInternals to accept a list of behaviors, starting with HTMLSubmitButtonBehavior, which wires up form submission on activation.

Expose multiple HTML setting methods that provide a coherent story for dynamically inserting markup into an existing document. - Positional methods (before/after/append/prepend/replaceWith) that take HTML as argument, effectively replacing insertAdjacentHTML. - Streaming methods (stream{Append}HTML{Unsafe}) which return a WritableStream - Sending {runScripts} as part of SetHTMLUnsafeOptions, mimicking createContextualFragment behavior. - Supporting createParserOptions in trusted types, allowing trusted types to override scripting mode and sanitizer.

Extends the SpeechRecognition interface by adding a quality property to SpeechRecognitionOptions. This allows developers to specify the semantic capability required for on-device recognition (via processLocally: true). The proposed quality enum supports three levels—'command', 'dictation', and 'conversation'—mapping to increasing task complexity and hardware requirements. This enables developers to determine if the local device can handle high-stakes use cases (like meeting transcription) or if they should fallback to cloud services, solving the current "black box" issue of on-device model capabilities.

This feature adds a set of primitives to allow elements to anchor to overscroll areas of other elements. It further allows these elements to be revealed with swipe gestures, similar to scrollers.

This feature represents the behavior described in this section of the CSS spec: https://www.w3.org/TR/selectors-4/#useraction-pseudos which says that :hover, :active, and :focus-within match on the parents of elements, but only up to the first top layer element in the parent chain. The change for Chromium is that last "up to the top layer" part of this behavior. Concretely, this means that in the following structure if the user hovers the `<button>`, then the `:hover` pseudo class will match the `<button>` and the popover, but will not match the `<main>` element. ``` <main> <div popover> <button></button> </div> </main> <script>document.querySelector('[popover]').showPopover();</script> ``` The rationale behind this change is that typically top layer elements are rendered "elsewhere", in a location that is disconnected from the parent element visually. So it typically does not make sense to change the styles of the parent element when the top layer element is hovered or activated, for example. The customizable select implementation shipped in Chromium has this logic hard-coded for the specific case of the select `::picker()` popover. That special case logic is being removed in favor of the more general behavior with this feature.

Add support for the `all` value for the CSS text-decoration-skip-ink property, as specified in https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-ink-property. The `text-decoration-skip-ink` property already supports `auto` and `none`. The `all` value extends this by unconditionally applying ink-skipping to all glyphs - including CJK characters - whereas `auto` leaves CJK characters un-skipped because ink-skipping tends to produce undesirable visual results for ideographic scripts at typical underline positions. With `text-decoration-skip-ink: all`, authors who have adjusted `text-underline-position` or `text-underline-offset` to avoid clashing with CJK glyphs can explicitly opt in to ink-skipping for those characters as well.

Use <template for> and processing instruction ranges (<?start> and <?end> to update existing parts of the document without JS.

Allows js-profiling in dedicated workers This feature enables the JavaScript Self‑Profiling (js-profiling) API in Dedicated Workers, while remaining gated by Document Policy. It allows developers to obtain low‑overhead CPU attribution for JavaScript execution in workers, with Document Policy support for workers tracked separately.

Processing instructions (syntax: <?target data>) are an existing DOM construct, exposed in XML, that allows node objects that are not elements but can have some semantic meaning for the processing of a document. For example, they can be used to denote ranges for streaming or highlighting without requiring new DOM elements and changing the DOM structure as far as CSS is concerned, or as directives for the HTML parser about how to buffer and stream.

Adds the loading attribute to <video> and <audio> elements, allowing developers to defer media resource loading until the element is near the viewport using loading="lazy". This matches the existing lazy loading behavior for <img> and <iframe> elements, improving page load performance and reducing data usage. CL: https://chromium-review.googlesource.com/c/chromium/src/+/7511253

`OpaqueRange` represents a live span of text within a form control’s value, such as a `<textarea>` or text-based `<input>`, so developers can work with value text using range-like APIs. It enables operations such as `getBoundingClientRect()`, `getClientRects()`, and integration with the CSS Custom Highlight API for UI such as inline suggestions, highlights, and anchored popovers. It preserves encapsulation by exposing only value offsets while returning `null` for `startContainer` and `endContainer`, so DOM endpoints and internal structure are not exposed.

Allows js-profiling in dedicated workers This feature enables the JavaScript Self‑Profiling (js-profiling) API in Dedicated Workers, while remaining gated by Document Policy. It allows developers to obtain low‑overhead CPU attribution for JavaScript execution in workers, with Document Policy support for workers tracked separately.

Web developers currently have no way to know when a programmatic smooth-scroll has completed. This feature provides a solution to the problem: make the programmatic scroll methods return Promise objects that get resolved on scroll completion with interruption status.

Adds the read-only boolean attribute isReloadNavigation to the Fetch API's Request interface. This attribute indicates whether the current navigation request was initiated as a user-triggered reload (e.g., using the refresh button, location.reload(), or history.go(0)). This signal is primarily exposed on the Request object within a Service Worker's FetchEvent. https://chromium-review.googlesource.com/c/chromium/src/+/7137783

According to the HTML spec, when a drag starts the user agent should send the appropriate events to the drag source to indicate that the pointer event stream has ended, and that it shouldn't expect any more events from this pointer [1]. This code had been partially implemented for mouse events and fully implemented for touch drags on Android. With the work in this feature, we aim to fully satisfy this spec requirement on all other platforms. Practically, this means that after a drag has started the drag source will now receive the `pointercancel`, `pointerout` and `pointerleave` events to indicate that the current event stream has finished. [1] Pointer event spec definition of pointer stream suppression: https://w3c.github.io/pointerevents/#suppressing-a-pointer-event-stream

This change introduces a new CSS property, 'path-length', which maps to the existing SVG 'pathLength' presentation attribute. It applies to SVG geometry elements that support 'pathLength' (including <path>, <circle>, <rect>, <line>, <polyline>, <polygon>, and <ellipse>). Exposing 'pathLength' as a CSS property allows authors to specify it via stylesheets, inline styles, and animations, enabling it to participate in normal CSS cascading, specificity, transitions, and animations. The property affects all computations that depend on the total path length, including stroke dash rendering and text positioning along a <textPath>. CSS declarations override the presentation attribute following standard CSS precedence rules. The initial value of 'path-length' is 'none', which represents the absence of an author-supplied path length and is distinct from an explicit numeric value such as '0'. Existing attribute-only behavior is preserved when the feature is disabled.

This feature adds an AudioContext.playbackStats attribute which returns an AudioPlaybackStats object. This object provides audio playback statistics such as average latency, minimum/maximum latency, underrun duration, and underrun count. This API allows web applications to monitor audio playback quality and detect glitches. Note: This feature was previously tracked as AudioContext.playoutStats. It has been renamed to AudioContext.playbackStats to align with the final Web Audio API specification. The old name is supported as a deprecated alias for backward compatibility.

The `margin-trim` CSS property may be used to omit margins before or after the first or last child of a container. This is supported on regular block containers, in addition to flex, grid, and multicol containers. https://drafts.csswg.org/css-box-4/#margin-trim This is somewhat similar to the effect caused by the margin quirk that is applied to P, H1, H2... elements inside BODY and table cell elements (in quirks mode), but more powerful, generic, and expressive.

Adds support for JSON and style module types as <link rel="modulepreload"> destinations. <link rel="modulepreload"> is already supported in Chromium (see https://chromestatus.com/feature/5762805915451392), but it currently only supports preloading script-like module scripts. This feature addresses a functionality gap, as JSON and CSS module scripts are supported in Chromium elsewhere but are not supported as <link rel="modulepreload"> destinations. Style modules can be preloaded with <link rel="modulepreload" as="style" href="..."> and JSON modules can be preloaded with <link rel="modulepreload" as="json" href="...">.

Restricts access to the system accent color for CSS keywords and `accent-color: auto` to be only within a web app and initial profile context. AccentColor and AccentColorText CSS keywords, pose a significant fingerprinting vector when exposing the user's system colors widely on the web. As such, they're only available in installed web app contexts. Form controls with `accent-color: auto` also match this scope with this feature launch. This introduces more consistent developer and user expectations for system colors and aligns with fingerprinting restrictions for AccentColor[Text].

AudioContext and OfflineAudioContext now take an optional renderSizeHint, which allows users to ask for a particular render quantum size when an integer is passed, to use the default of 128 frames if nothing or "default" is passed, or to ask the User-Agent to pick a good render quantum size if "hardware" is specified.

A new 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.

Autofill is a key feature of the web that reduces friction for millions of users everyday. But getting autofill to work reliably with dynamic forms across multiple implementations requires jumping through many hoops. This feature adds an "autofill" event that would allow developers to modify their forms to fit the autofilled data and let the browser know when they have done so.

A CSS query container can be queried based on its container-name only, and the container does not need any container-type set: <style> #container { container-name: --foo; } @container --foo { input { background-color: green; } } <style> <div id="container"> <div><input></div> </div> Previously, @container required some query in addition to the name.

CSS Grid-Lanes is a layout module where items of varying heights are arranged in columns, filling gaps to create a seamless grid, similar to a brick wall, perfect for accommodating elements with varying aspect ratios. Unlike CSS Grid, Grid-Lanes is better suited for one-dimensional flow layouts, like image galleries, where the focus is on filling the space efficiently rather than aligning items along both axes. Grid-Lanes provides greater design freedom, enabling the creation of dynamic, responsive layouts that adapt to content variations without the need for manual adjustments or a non-standard JavaScript implementation.

Currently when intercepting navigations with the `navigate` event, precommitHandlers and post-commit ordinary handlers are passed separately. This works well when there is only one or the other, but can be a bit clunky when the flow includes a precommitHandler that leads to a post-commit handler. This addition is a small ergonomic improvement that enables registering a post-commit handler while invoking a precommit handler.

Makes the root element's default font size scale in proportion to both the operating system's and browser's text scale setting. This allows pages that follow best practices around font-relative units (i.e. use rem and em for font sizes and page elements that should change with the user's text size preferences) to respect the user's OS-level text scale setting. This also causes the browser to disable existing browser-based mechanisms (i.e. full-page zoom on windows) and heuristics (i.e. text autosizing on mobile). Now web developers can signal to the browser that the page is constructed in a way (i.e. with rem and em) that will scale well across various user-selected font size preferences. Similar to env(preferred-text-scale), which provides authors with a way to access the text scale; this API extends that by enabling scaling via the root element's default font size and opting-out of automatic text scaling.

Functionality added to the WebGPU spec after its first shipment in a browser. A new TRANSIENT_ATTACHMENT GPUTextureUsage lets developers create attachments that allow render pass operations to stay in tile memory, avoiding VRAM traffic and potentially avoiding VRAM allocation for the textures.