Experimental Chromium Web Platform Features

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 fine-tuning 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, it returns a value 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>

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

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.

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.

Chromium supports animation of the caret-color property, but when animated the default blinking behavior of the caret interferes with the animation. For instance, see the example at https://drafts.csswg.org/css-ui/#caret-animation where an animation from blue to red and back is rendered as a blinking cursor that is randomly blue or red. The CSS caret-animation property has two possible values: auto and manual, where auto means browser default (blinking) and manual means the page author is controlling the caret animation. In addition, via a user stylesheet, it allows users who are disturbed by or have adverse reactions to blinking or flashing visuals to disable the blinking.

shape() allows responsive free-form shapes in clip-path. The author can define a series of verbs, roughly equivalent to the verbs in path(), but where the verbs accept responsive units (e.g. % or vw), as well as any CSS values such as custom properties or rather than pixel-values. See https://drafts.csswg.org/css-shapes-2/#shape-function

sibling-index() and sibling-count() can be used as integers in CSS property values to style elements based on their position among its siblings, or the total number of siblings respectively. These functions can be used directly as integer values, but more interestingly inside calc() expressions. Example: li { margin-left: calc(10px * sibling-index()); }

'match-element' generates a unique id based on the element's identity and renames the same for this element. This is used in Single Page App cases where the element is being moved around and the desire is to animate it with a view transition Note this is split off from https://chromestatus.com/feature/6575974796492800 which contains additional discussions

Expose "paintTime" and "presentationTime" in event timing, element timing, LCP, long animation frames, paint timing. "paintTime" means the time when the rendering phase ended and the browser started the paint phase. "presentationTime" means the time when the "pixels reached the screen", which is somewhat implementation-defined

Extends the use of the "opener" rel type to same-window navigations to signal to the browser that the destination page will open a new window and the referring page expects to be able to access it. Some user agents perform browsing context group changes on navigation that aren't strictly necessary for security in order to improve performance. This results in named window reuse not being possible across a back navigation. Annotating an anchor element with "opener" will signal to the user agent that performing a browsing context group change would break a future opener relationship.

This feature adds support for Curve25519 algorithms in the Web Cryptography API, namely the signature algorithm Ed25519

The ClipboardItem, which is the input to the async clipboard write method, now accepts string values in addition to Blobs in its constructor. ClipboardItemData can be a Blob, a string, or a Promise that resolves to either a Blob or a string.

The interactivity property specifies whether an element and its flat tree descendants (including text runs) are inert or not. Making an element inert affects whether it can be focused, edited, selected, and searchable by find-in-page. It also affects whether it is visible in the accessibility tree. The syntax is: interactivity: auto | inert

Allows to style pseudo elements that are nested inside other pseudo elements. So far, support is defined for: ::before::marker ::after::marker With ::column::scroll-marker being supported in the future.

Document-Isolation-Policy allows a document to enable crossOriginIsolation for itself, without having to deploy COOP or COEP, and regardless of the crossOriginIsolation status of the page. The policy is backed by process isolation. Additionally, the document non-CORS cross-origin subresources will either be loaded without credentials or will need to have a CORP header.

One of the nice features of the Popover API is its light dismiss behavior. This chromestatus is about bringing that same capability to `<dialog>`. A new `closedby` attribute controls behavior: `<dialog closedby=none>` - no user-triggered closing of dialogs at all. `<dialog closedby=closerequest>` - user pressing ESC (or other close trigger) closes the dialog `<dialog closedby=any>` - user clicking outside the dialog, or pressing ESC, closes the dialog. Akin to `popover=auto` behavior.

getAllRecords() combines getAllKeys() with getAll() to enumerate both primary keys and values at the same time. For an IDBIndex, getAllRecords() also provides the record's index key in addition to the primary key and value. Lastly, getAllRecords() offers a new direction option to enumerate records sorted by key in descending order. This proposal adds getAllRecords() to both IDBObjectStore and IDBIndex. getAllRecords() creates a new IDBRequest that queries its IDBObjectStore or IDBIndex owner. The IDBRequest completes with an array of IDBRecord results. Each IDBRecord contains the key, primaryKey and value attributes. For IDBIndex, key is the record's index key. For IDBObjectStore, both key and primaryKey return the same value. The pre-existing IDBCursorWithValue interface contains the same attributes and values for both IDBObjectStore and IDBIndex. However, unlike getAllRecords(), a cursor may only read one record at a time.

A keyword for CSS sizing properties (e.g. 'width', 'height') that allows elements to grow to exactly fill their containing block's available space. It is similar to '100%', except the resulting size is applied to the element's margin box instead of the box indicated by 'box-sizing'. Using this keyword allows the element to keep its margins while still being as large as possible. An unprefixed version of '-webkit-fill-available'.

Import maps currently have to load before any ES module and there can only be a single import map per document. That makes them fragile and potentially slow to use in real-life scenarios: Any module that loads before them breaks the entire app, and in apps with many modules the become a large blocking resource, as the entire map for all possible modules needs to load first. This feature is to enable multiple import maps per document, by merging them in a consistent and deterministic way.

Web applications may suffer from bimodal distribution in page load performance, due to factors outside of the web application’s control. For example: * When a user agent first launches (a "cold start" scenario), it must perform many expensive initialization tasks that compete for resources on the system. * Browser extensions can affect the performance of a website. For instance, some extensions run additional code on every page you visit, which can increase CPU usage and result in slower response times. * When a machine is busy performing intensive tasks, it can lead to slower loading of web pages. In these scenarios, content the web app attempts to load will be in competition with other work happening on the system. This makes it difficult to detect if performance issues exist within web applications themselves, or because of external factors. Teams we have worked with have been surprised at the difference between real-world dashboard metrics and what they observe in page profiling tools. Without more information, it is challenging for developers to understand if (and when) their applications may be misbehaving or are simply being loaded in a contended period. A new ‘confidence’ field on the PerformanceNavigationTiming object will enable developers to discern if the navigation timings are representative for their web application.

Resource timing: - responseStart returns the first response, either early hints (interim) or final - Expose the final response headers (2xx/4xx/5xx) time as finalResponseHeadersStart.

A shadow host with delegatesFocus set to true will delegate its focus to its first focusable child. On a mouse click event, the child will receive focus and the event will be marked as handled. No further event dispatching is done. This is a problem because the steps to handle text selection afterward are not ran and the selection does not recognize the focused element as part of the selection. We fix this by continuing event handling even after an element was delegate focused and update how selection recognizes having focus in a shadow tree.