Chrome 157 Release Notes

AccentColor and AccentColorText reflect the element's effective accent-color value instead of only platform-provided system accent colors.

This allows CSS to reference the same colors used by accent-color styling, making it easier to keep custom styling consistent with form controls and other accented UI. It aligns Chromium's behavior with the CSS Color Module Level 4 specification.

Implements the CSS corner shorthand and per-corner sub-shorthands (corner-top-left, corner-top-right, corner-bottom-left, corner-bottom-right) as well as physical (corner-top, corner-bottom) and logical (corner-block-start, corner-block-end, etc.) edge shorthands. These allow setting both border-radius and corner-shape for individual corners in a single declaration. Additionally, corners is retained as a compat alias for the corner shorthand.

sampler: https://static.januschka.com/i-425897047/

CL: https://chromium-review.googlesource.com/c/chromium/src/+/7747994

It was resolved in the CSSWG that we should introduce the flow-start/end keywords as value aliases for the existing flex-start/end keywords. These are needed for alignment in the case of placement reversals.

flow-start in CSS Grid-Lanes would indicate the starting edge of the container at which placement begins, which is useful in the case where placement is reversed (fill-reverse, track-reverse, discussed in this CSSWG issue: [css-grid-3][masonry] item-flow row vs. column in masonry layouts · Issue #12803 · w3c/csswg-drafts). Because these are acting as value aliases, we expect flex-start/end to follow the logical directions in Grid Lanes, as well, which will expand the definition of these keywords from only applying special behavior in flexbox to applying to any layout mode whose logical start/end is different from its physical start/end.

For serialization, if either flex-start/end or flow-start/end is used, the returned serialized value should be flow-start/end.

The anchors-valid value was implemented as part of https://crbug.com/329703412 but subsequently reverted, due to spec questions about the exact definition of the value. Since that time, the value has been renamed to anchor-valid (see https://chromestatus.com/feature/5136123851571200) and also better defined to be clear that only the default anchor matters, resolving a lot of ambiguity, and making this value shippable.

Adds a <string> value to the text-overflow property.

This allows web authors to specify a custom string (e.g., "(more)") to indicate that text has been clipped. This provides more design flexibility and can be used to create more user-friendly and context-aware overflow indicators.

The CSSWG resolved to rename anchors-valid --> anchor-valid [1] and anchors-visible --> anchor-visible [2]. To accomplish this, we'll rename the properties to the singular variants, and add aliases from the plural versions to the singular versions. At a later date, we will remove the plural variants. This chromestatus is only about shipping the new versions, and deprecating the old ones (but not removing them).

[1] https://github.com/w3c/csswg-drafts/issues/10201#issuecomment-4180411971 [2] https://github.com/w3c/csswg-drafts/issues/10201#issuecomment-4390233490

SVG documents loaded through <object> or <embed> are sized and positioned inside the element's content box according to the CSS object-fit and object-position properties, the same way <img> content is.

Previously Chrome ignored both properties for embedded SVG documents and always stretched the document viewport to the whole content box.

https://github.com/whatwg/html/pull/12898

Sanitizer API also sanitizes javascript:-URLs, when they are used for navigation. This was originally done as a side effect of any "safe" method that uses Sanitizer, and omittted for any "unsafe" method. The HTML standard recently regularized this and made this a developer-selectable option, instead of a side-effect of a particular method.

Behaviour when the option is not used remains the same.

Provides high-speed, deterministic semantic decision-making directly on the user's device as a built-in AI capability.

Unlike open-ended generative language models (such as the Prompt API) that decode text token-by-token over hundreds or thousands of milliseconds, the Decisions API (window.DecisionModel) evaluates natural language input text against a structured set of questions and candidate options in a single forward pass using logit scoring. This delivers micro-latency evaluations (tens or low hundreds of milliseconds on typical consumer laptop CPUs and GPUs) while outputting calibrated confidence values.

This brings non-autoregressive "System 1" decision models (e.g. Jev, Laya, Kev, Open-Jev) natively into the web platform, providing developers with a pragmatic, zero-marginal-cost "Semantic If" primitive for real-time client-side routing, interactive input guardrails, and adaptive user interfaces.

Chrome is changing its behavior to allow pages with active WebSocket connections to enter the Back/Forward Cache. To achieve this, active WebSockets are now disconnected when a page is cached. Previously, active WebSocket connections prevented pages from entering BFCache.

To revert to the previous behavior (preventing pages with active WebSockets from entering BFCache), we've provided a BackForwardCacheForWebSocketsAllowed policy. Admins can set this policy to Disabled , which will prevent breakage in legacy apps that lack WebSocket reconnection logic.

For more information on BFCache, see Test back/forward cache.

ProgressEvent is available in service workers, allowing developers to construct progress events with lengthComputable, loaded, and total attributes. This aligns service workers with other worker contexts and the XMLHttpRequest Standard.

Exposes the LanguageDetector JavaScript Web API on Chrome for Android (Clank). This allows web applications to detect text languages locally on mobile devices using fast, privacy-preserving, and offline-capable on-device machine learning models and not rely on cloud endpoints.

BluetoothRemoteGATTServer inherits from EventTarget, exposing the standard addEventListener(), removeEventListener(), and dispatchEvent() methods. This enables connection-level events to be dispatched directly on the GATT server.

Starting in Chrome 157, the Background Fetch API now enforces Cross-Origin Resource Sharing (CORS). This update aligns Chromium's implementation with the intent of the Background Fetch spec. This ensures that Background Fetch requests are subject to the same security policies, such as Local Network Access checks.

This update prevents sites from bypassing CORS (and other security policy checks) by using Background Fetch instead of regular Fetch.

Introduces a new attribute to render Capability Elements(<camera>, <microphone> and <geolocation>) as compact icon buttons without text using a displaymode attribute. This gives developers flexible UI density for spatial layouts such as map controls and video floating trays while preserving native security guarantees and full screen reader accessibility.

This is an extension to the recently released Capability Elements https://chromestatus.com/feature/5153829504024576

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
• Passing {runScripts} as part of SetHTMLUnsafeOptions, mimicking createContextualFragment behavior.
• Supporting createParserOptions in trusted types, allowing trusted types to override scripting mode and sanitizer.

Expand the TextMetrics Canvas API to support selection rectangles, bounding box queries, and glyph cluster-based operations.

This new functionality should enable complex text editing applications with accurate selection, caret positioning, and hit testing. Additionally, cluster-based rendering facilitates sophisticated text effects such as independent character animations and styling.

HTML-in-canvas enables customizing the rendering of html using canvas with new primitives to manage canvas layout, drawing capabilities, rendering events for DOM-to-canvas synchronization, and geometry update capabilities for canvas-to-DOM synchronization.

Allows the use of 64-bit atomic minimum and maximum operations on atomic<vec2u> in WGSL.

This provides WebGPU shader authors with a way to implement certain algorithms that use 64-bit atomics without requiring full support for 64-bit integers.

Chrome can now trigger a request for the browser to install a web app, given a manifest URL and optional manifest ID. The <install> element enables cross-origin web app installation without JavaScript and provides a better developer experience than handling beforeinstallprompt events. The element is launching in parallel with navigator.install(), the imperative entry point to the same installation capability.

Admins can control this in two ways:

1. Enterprise policy, WebAppInstallByUserEnabled, can disable user web app installs broadly, including installs initiated via navigator.install() and <install>.
2. Permissions policy, web-app-installation, can allow or disallow use of this feature on origins that the enterprise controls (for example, internal sites/iframes).

Starting in Chrome 157, the new Web Install API allows websites to prompt users to install a web app, given a manifest URL and optional manifest ID. The navigator.install() method enables cross-origin web app installation and provides a better developer experience than handling beforeinstallprompt events. This API is launching in parallel with the <install> element, a declarative entry point to the same installation capability.

Admins can control this in two ways:

1. Enterprise policy, WebAppInstallByUserEnabled, would disable user web app installs broadly, including installs initiated via navigator.install() and <install>. Or
2. Permissions policy, web-app-installation, can allow or disallow use of this feature on origins that the enterprise controls (for example, internal sites/iframes).

Add styleDuration and forcedStyleDuration information to the Long Animation Frame API, enabling developers to distinguish style and layout times.

Connection Allowlists (https://chromestatus.com/feature/5175745573945344) 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. This aspect of the feature extends Connection Allowlists to support embedded enforcement on iFrames and nested documents/workers. This allows the parent document to enforce restrictions on embedded content where they can choose to opt in or not load.

More details on the proposal can be found here: https://github.com/WICG/connection-allowlists

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.