Experimental Chromium Web Platform Features

These pseudo-classes match scroll markers that are, respectively, before or after the active marker (the one matching :target-current) within the same scroll marker group, as determined by flat tree order: * :target-before matches all scroll markers that precede the active marker in the flat tree order within the group. * :target-after matches all scroll markers that follow the active marker in the flat tree order within the group.

Decouples the computed values of border-width, outline-width, and column-rule-width from their corresponding style properties. Previously, if a style such as border-style was set to none or hidden, the computed width would resolve to 0px. For example, even if border-left-width was explicitly set to 10px, its computed value would be 0px if border-left-style was none or hidden. Following the resolution CSSWG issue [1], this behavior should change. The computed values of border-width, outline-width, and column-rule-width will now reflect their specified values, regardless of the associated style property's value. [1]: https://github.com/w3c/csswg-drafts/issues/11494#issuecomment-2675800489

View Transitions API allows developers to start visual transitions between different states. The primary SPA entry point to this is `startViewTransition()` which returns a transition object. This object contains several promises and functionality to track the transition progress, as well as allow manipulations such as skipping the transition or modifying its types. The proposal here is ergonomic in nature: instead of requiring that users store this object in some sort of way for easy access, provide a `document.activeViewTransition` property that represents this object, or null if there is no transition ongoing. Note this similarly applies to MPA transitions, where the object is only available via `pageswap` and `pagereveal` events. In this proposal `document.activeViewTransition` would be set to this object for the duration of the transition.

By using the size and multiple attributes, the select element can be rendered as an in-page listbox or a button with a popup. However, these modes are not consistently available across mobile and desktop chrome. Currently, in-page listbox rendering is not available on mobile, and button with popup is not available on desktop when the multiple attribute is present. This feature adds the listbox to mobile and adds a multi-select popup to desktop, and makes the opt-ins with the size and multiple attributes result in the same rendering mode across mobile and desktop. Here is a summary of the changes: - When the size attribute has a value greater than 1, in-page rendering will always be used. Previously, this was ignored on mobile. - When the multiple attribute is set with no size attribute, in-page rendering will be used. Previously, this was a popup instead of an in-page listbox on mobile. - When the multiple attribute is set with size=1, a popup will be used. Previously, this was an in-page listbox on desktop. By making this change, we are providing a foundation to bring customizable select to in-page rendering and multi-select. Customizable select currently only works for single-selects with a popup.

This feature introduces support for the download attribute on the SVGAElement interface in Chromium, aligning with the SVG 2 specification. The download attribute enables authors to specify that the target of an SVG hyperlink should be downloaded rather than navigated to, mirroring the behavior already supported in HTMLAnchorElement. This enhancement promotes interoperability across major browsers and ensures consistent behavior between HTML and SVG link elements, thereby improving developer experience and user expectations.

WebTransport Application Protocol Negotiation allows negotiation of the protocol used by the web application within the WebTransport handshake. A web application can specify a list of application protocols offered when constructing a WebTransport object, which are then conveyed to the server via HTTP headers; if the server picks one of those protocols, it can indicate that within response headers, and that reply is available within the WebTransport object.

Adds a global HDR headroom attribute to CanvasRenderingContext2D. When drawing HDR content (e.g, gain map images), to the canvas' bitmap, this attribute will determine how much tone mapping should be performed (if any).

The "clipboardchange" event fires whenever the system clipboard contents are changed either by a web app or any other system application. This allows web-apps like remote desktop clients to keep their clipboards synchronized with the system clipboard. It provides an efficient alternative to polling the clipboard(using Javascript) for changes.

A new key-value API, tentatively `window.crashReport`, backed by a per-Document map holding data that gets appended to crash reports. See https://github.com/WICG/crash-reporting/issues/15 for initial discussion. The data placed in this API's backing map gets sent in the `CrashReportBody` [1] if any renderer process crashes are incurred by the site. This lets developers debug what specific state in their application might be causing a given crash. [1]: https://wicg.github.io/crash-reporting/#crashreportbody

Enables percentage values for the letter-spacing and word-spacing CSS property, as defined in the CSS Text Module Level 4 spec. Percentage values are calculated relative to the advance measure of the space character (U+0020). This gives developers more robust and flexible control over typography, particularly in responsive designs where text spacing needs to adapt to different viewports and font sizes.

CSS Masonry 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, Masonry 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. Masonry 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.

Extends DisplayMediaStreamOptions for getDisplayMedia() with a windowAudio option. This new option allows web applications to hint to the user agent whether the user should be offered the ability to share audio when a window is selected. windowAudio can be set to exclude, system, or window based on application preference. A web application that is configured for audio capture but wants to limit system audio capture when a window is selected should set windowAudio: "exclude".

Extends echoCancellation behavior of MediaTrackConstraints dictionary - former true/false - by values "all" and "remote-only". Allows the clients to modify echo cancellation behavior applied to audio tracks received from microphones, controlling how much of the user system playout (all, or only audio received from PeerConnections) is removed from the microphone signal.

This feature adds an `interestfor` attribute to <button> and <a> elements. This attribute adds "interest" behaviors to the element, such that when the user "shows interest" in the element, actions are triggered on the target element, such as showing a popover. The user agent will handle detecting when the user "shows interest" in the element, via methods such as hovering the element with a mouse, hitting special hotkeys on the keyboard, or long-pressing the element on touchscreens. When interest is shown or lost, an `InterestEvent` will be fired on the target, which have default actions in the case of popovers - showing and hiding the popover.

Adds HDR headroom to the attributes of a display that may be queried in ScreenDetailed. The HDR headroom of a screen is the parameter that is used for many HDR tone mapping algorithms. Custom tone mapping (e.g, in WebGPU) requires knowing this parameter.

This feature preserves the sticky user activation state after a page navigates to another same-origin page. The lack of user activation in the post-navigation page prevents some use cases like showing virtual keyboards on auto-focus, and this has been a blocker for the developers who want to build MPAs over SPAs. Note that browser-initiated navigation requests (reload, history navigation, typed URL in address bar etc) are not covered by this feature.

This feature ensures consistent rendering of the <use> element when using width and height via both CSS and presentation attributes. It also adds support for x, y, width, and height on <symbol>, giving developers better control over layout. Before: Only CSS-based width and height on <use> were supported; presentation attributes were ignored or inconsistent. Now: <use> supports width and height as presentation attributes. <symbol> supports x, y, width, and height as presentation attributes. This ensures consistent rendering across CSS and markup. Before: <svg width="100" height="100"> <defs> <symbol id="sym"> <rect width="100" height="100" fill="green"/> </symbol> </defs> <use href="#sym" style="width:40; height:40"/> </svg> Now: <svg width="100" height="100"> <defs> <symbol id="sym" width="80" height="80" x="10" y="10"> <rect width="100" height="100" fill="green"/> </symbol> </defs> <use href="#sym" width="40" height="40"/> </svg>

When an anchor-positioned element is tethered against an anchor that has a transform (or is contained by something with a transform), resolve anchor() and anchor-size() functions against the bounding box of the transformed anchor.

CSS border-shape enables creating non-rectangular borders, with any arbitrary shape (polygon, circle, shape(), etc). Though border-shape accepts the same shapes as clip-path, it is fundamentally different: border-shape defines the shape of the border, decorates it, and clips only the inside. border-shape has two variants: one variant that strokes a shape, and another variant that fills between two shapes.

CSS Gap Decorations enables styling of gaps in container layouts like Grid and Flexbox, similar to ‘column-rule’ in multicol layout. This feature is highly requested by web authors who must use hacks to style the gaps in Grid and Flexbox layouts today.

Printers usually have a small area at each of the four edges of a sheet of paper that they are not capable of marking reliably, usually due to the printer’s paper handling mechanism. The default page margins are expected to be bigger than these areas, but if authors set margins on their own, and even want to add @page margin boxes (e.g. for custom headers and footers), they need a way of telling where it's safe to print and not. The CSS environment variable env(safe-printable-inset) can be used to obtain this information. It will be the inset of the largest unprintable area. Although some printers don't have the same unprintable area inset along each of the four paper edges, printers may rotate the print output at their own discretion. The user agent cannot make assumptions about which edge (will it be the long or short edge?) is going to be fed first into the printer. Therefore, only one value can be reliably provided here: The larger of these four values.

The scroll-target-group property specifies whether the element is a scroll marker group container. 'none': The element does not establish a scroll marker group container. 'auto': The element establishes a scroll marker group container forming a scroll marker group containing all of the scroll marker elements for which this is the nearest ancestor scroll marker group container. Establishing scroll marker group container allows for anchor HTML elements with fragment identifier that are inside such container to be HTML equivalent of ::scroll-marker pseudo elements. The anchor element whose scroll target (the element its fragment identifier is pointing to) is currently in view to be styled via :target-current pseudo class.

Typed arithmetic allows to write expressions in CSS such a calc(10em / 1px) or calc(20% / 0.5em * 1px) which is useful for e.g. typography, as it allows to convert typed value into an untyped one and reuse it for number accepting properties or futher multiply the unitless value by some other type to e.g. cast from pixels to degrees.

As CSS allows fine control over font features using 'font-feature-settings' at the element level, Chromium-based browsers currently lack support for these properties within '@font-face' declarations. This feature supports the string-based syntax for font-feature-settings as defined in CSS Fonts Level 4. Invalid or unrecognized feature tags will be ignored per specification. No binary or non-standard forms are supported. As OpenType fonts become more widely adopted, this enhancement will improve typographic control, reduce redundancy, and support a more scalable, modern approach to web design.

The scrollParent attribute on HTMLElement returns the nearest scroll container containing block of the element's. In particular this is the nearest scroll container whose scroll offset affects the element's position. This can be useful to jump to elements to scroll or to elements on which to add scroll listeners to detect when the user scrolls.

This feature introduces a min option to the existing ReadableStreamBYOBReader.read(view) API. The API already accepts a ArrayBufferView into which data is read, but currently does not guarantee how many elements will be written before the read resolves. The min option is an additive, opt-in enhancement - it does not affect existing behavior for applications that don’t use it. By specifying a min value, developers can require that the stream wait until at least that many elements are available before resolving the read. This improves upon the current behavior, where reads may resolve with fewer elements than the view can hold.

The HTML parser has always (or for a long time) allowed elements and attributes to have a wide variety of valid characters and names, but the javascript DOM APIs to create the same elements and attributes are more strict and don't match the parser. This change relaxes the validation of the javascript DOM APIs to match the HTML parser. More context here: https://github.com/whatwg/dom/issues/849 I don't anticipate any compat issues from this change because all of the previously allowed element/attribute names are still allowed with the new behavior.

In performanceResourceTiming, expose the "initiator info". "Initiator info" is information on what other resource caused the fetch of the current resource. This information can be used to construct the dependency of the resources from RUM(real user monitoring) data. It helps web sites and CDN to optimize resource delivery speed. It helps security products to track rogue resources too.

This adds a new option, `extendedLifetime: true`, to the `SharedWorker` constructor. This requests that the shared worker be kept alive even after all current clients have unloaded. The primary use case is to allow pages to perform asynchronous work that requires JavaScript after a page unloads, without needing to rely on a service worker.

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.

This feature supports applying width and height as presentation attributes on nested <svg> elements through both SVG markup and CSS. This dual approach provides even greater flexibility for developers, allowing them to manage and style SVG elements more efficiently within complex designs. With this feature the below two html will now have the same output: With CSS Properties for nested <svg> element: <svg width="100px" height="100px"> <svg style="width:50px;height:50px;"> <circle cx="50px" cy="50px" r="40px" fill="green" /> </svg> </svg> Without CSS Properties for nested <svg> element: <svg width="100px" height="100px"> <svg width="50px" height="50px"> <circle cx="50px" cy="50px" r="40px" fill="green" /> </svg> </svg>

counter() and counters() in alt text of 'content' property is useful to provide more meaningful information to e.g. pseudo-elements to improve their accessibility.

Introduce @container anchored(fallback) to style descendants of anchor positioned elements based on which of position-try-fallbacks is applied. Such queries can be used to e.g. style an anchored element's tether, its animations, etc. based on how the anchor and the anchored element are positioned relative to each other. Example: #anchored { position-try-options: flip-block; container-type: anchored; } @container anchored(fallback: flip-block) { #anchored > .arrow { --arrow-rotation: 180deg; } }

When the fallback is not taken, var()/attr() functions evaluate without looking for cycles in that fallback.

Allow web developers to indicate that a fetch() request should be retried, to have a greater guarantee on it being reliably sent, even if network is flaky. This is especially important for keepalive fetches, where the request might outlive the document, which can no longer watch for its failure and do manual retry. We intend to only support this for keepalive fetches for now because of implementation simplicity, and also the fact that all the use cases would benefit from being keepalive first.

Propagate overscroll-behavior from the root instead of the body. The CSS working group resolved[0] on not propagating properties from the <body> to the viewport. Rather, properties of the viewport are to be propagated from the root (i.e. <html>) element e.g. scroll-behavior[1], scroll-snap-type[2], scroll-padding[3]. As such, overscroll-behavior should be propagated from the root element. However, Chrome has had a longstanding issue of propagating overscroll-behavior from the <body> rather than the root, which deviates from the behavior of Safari(WebKit) and Firefox(Gecko). This feature intends to fix this by propagating overscroll-behavior from the root rather than the <body>. [0] https://github.com/w3c/csswg-drafts/issues/6079#issuecomment-816307011 [1] https://drafts.csswg.org/css-overflow/#:~:text=not%20propagated%20to%20the%20viewport [2] https://drafts.csswg.org/css-scroll-snap/#:~:text=not%20propagated%20from%20HTML%20body [3] https://drafts.csswg.org/css-scroll-snap/#:~:text=padding%20values%20are%20not%20propagated%20from%20HTML%20body

restrictOwnAudio is a captured display surfaces constrainable property. This constrainable property changes the behavior of system audio in a captured display surface. The restrictOwnAudio constraint will only have an effect if the captured display surface inherently includes system audio; otherwise, it will have no impact. By default, when system audio is captured, it includes all audio played out by the system on audio output devices. When restrictOwnAudio is enabled, the captured system audio will be filtered to exclude audio originating from the document that performed getDisplayMedia. The restrictOwnAudio constraint allows for cleaner screen recordings for some use cases. Without it, if the capturing web page itself is playing audio (e.g. a video embedded on the on the recording page), that audio would be included in the capture. This could lead to an undesirable echo or interfere with the intended audio sources from other tabs or applications. The restrictOwnAudio constrainable property is described in the specification. https://www.w3.org/TR/screen-capture/#dfn-restrictownaudio

The ScrollIntoViewOptions container option allows developers to perform a scrollIntoView only scrolling the nearest ancestor scroll container. For example, the following snippet only scrolls the scroll container of target to bring target into view, but will not scroll all of the scroll containers to the viewport: target.scrollIntoView({container: 'nearest'});

Adds an additional cryptographic signature over Secure Payment Confirmation assertions and credential creation. The corresponding private key is not synced across devices. This helps web developers meet requirements for device binding for payment transactions.

The source attribute of ToggleEvents contains the element which triggered the ToggleEvent to be fired, if applicable. For example, if a button element with the popovertarget or commandfor attribute set up to open a popover is clicked by the user, then the ToggleEvent fired on the popover will have its source attribute set to the invoking button.

Adds an opt-in, lightly restricted subset of the WebGPU API capable of running older graphics APIs such as OpenGL and Direct3D11. By opting into this mode and obeying its constraints, developers can extend the reach of their WebGPU applications to many older devices that do not have the modern, explicit graphics APIs that core WebGPU requires. For simple applications, the only required change is to specify the "compatibility" featureLevel when calling requestAdapter. For more advanced applications, some modifications may be necessary to accommodate the mode's restrictions. Since Compatibility mode is a subset, the resulting applications are also valid WebGPU Core applications and will run even on user agents that do not support Compatibility mode.