![Rachel Andrew](https://web.dev/images/authors/rachelandrew.jpg) Rachel Andrew Technical Writer [GitHub](https://github.com/rachelandrew) [LinkedIn](https://www.linkedin.com/in/rachelandrew) [Mastodon](https://front-end.social/@rachelandrew) [Bluesky](https://bsky.app/profile/rachelandrew.bsky.social) [Homepage](https://rachelandrew.co.uk)

<br />


Published: May 6, 2026

<br />

Unless otherwise noted, the following changes apply to the newest Chrome beta
channel release for Android, ChromeOS, Linux, macOS, and Windows. Learn more
about the features listed here through the provided links or from the list on
ChromeStatus.com. Chrome is beta as of May 6, 2026. You can download the latest on
[Google.com](https://www.google.com/chrome/beta/) for desktop or on Google Play
Store on Android.

## CSS and UI

### Remove explicit border color UA stylesheet rule for tables

This change removes the erroneous `border-color: gray` CSS rule from the UA
stylesheet for the `<table>` element.

The [HTML specification](https://html.spec.whatwg.org/multipage/rendering.html#tables-2) does not contain this rule, and it causes the borders to incorrectly not default to `currentColor`. Neither
Firefox nor Webkit have this `gray` border color rule in their UA stylesheet,
leading to interop problems.

### Support `path()` and `shape()` in `shape-outside`

Adds support for the `path()` and `shape()` shape functions in the CSS shape-outside property.
These functions allow developers to define the shape of `shape-outside` more flexibly and support animation.

*Updated 7 June 2026 to correct the description which previously referred to the use of rectangle coordinates.*

### Support `rect()` and `xywh()` in `shape-outside`

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.

### Web app scope system accent color

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.

The `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]`.

### Clip text overflow on user interaction

When a user interacts (editing or caret navigation) with text which has
`text-overflow: ellipsis` set, the text switches temporarily from ellipsis to
clip allowing the user to see and interact with the hidden overflow content.
This feature applies to all editable and non-editable elements. For form
controls (`textarea`, `input`), the behavior is already supported.

### CSS gap decorations

CSS gap decorations let you style gaps in container layouts like grid and
flexbox, similar to `column-rule` in multiple-column layout. This feature is highly
requested by web developers who must use hacks to style the gaps in grid and
flexbox layouts today.

### `image-rendering: crisp-edges`

`image-rendering: crisp-edges` indicates that image should be scaled in a way
that preserves contrast and edges, and which avoids smoothing colors or
introducing blur to the image in the process.

> [!NOTE]
> **Note:** Specification-wise this is technically different from `pixelated`. In actual implementations it is not. In the specification `pixelated` means use any process the UA wants to make the result look pixelated; `nearest-neighbor` is acceptable. `crisp-edges` means use any process you want that preserves contrast, edges, and avoids blending colors; `nearest-neighbor` is acceptable. Both Firefox and Safari treat both as synonyms and use `nearest-neighbor` for both.

### User action pseudo-class top layer boundary

This feature represents the behavior described in the
[CSS Selectors Level 4 specification](https://www.w3.org/TR/selectors-4/#useraction-pseudos),
which states 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 implements this restriction for top layer elements.

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
won't match the `<main>` element.

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

### Support `path-length` as a CSS property

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

## Web APIs

### `Intl.Locale.prototype.variants`

Add `Intl.Locale.prototype.variants` as stated in
[TC39 proposal](https://tc39.es/ecma402/#sec-Intl.Locale.prototype.variants) and also accept
"variants" in option bag in `Intl.Locale` constructor as in
[TC39 language ID update](https://tc39.es/ecma402/#sec-updatelanguageid). The changes to ECMA402 are merged
in [pull request 960](https://github.com/tc39/ecma402/pull/960) and the test code in test262 are
merged in [pull request 4474](https://github.com/tc39/test262/pull/4474/)

### Programmatic scroll promises

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.

### Payment Request: allow payment handlers to report back internal errors

Enables payment handlers that are accessed with the Payment Request API to return
distinct errors for "user cancelled" versus "internal payment app error". This
allows web developers to build better flows for users, for example by retrying or
falling back to a different flow when an internal app error occurs, whilst
properly stopping the flow if the user wants to cancel.

The Web-based Payment Handler API can indicate this difference based on what
error they use to reject the promise passed to `PaymentRequestEvent.respondWith`.
If the promise is rejected with an `OperationError`, then "internal app error"
(`OperationError`) is returned to the merchant using the `PaymentRequest.show()` method,
otherwise "user cancel" (`AbortError`) is returned.

Native app payment handler infrastructure is similarly updated, but is out of
scope for web APIs.

### Respect `autocorrect="off"` for Windows touch keyboard in TSF

The HTML `autocorrect` attribute allows web authors to control whether
autocorrection should be applied to user input in editable elements including
`<input>`, `<textarea>`, and contenteditable hosts. On Windows, the touch
keyboard ignores this attribute and always autocorrects words. For example,
typing `"truf"` followed by space in an element with `autocorrect="off"` yields
`"true "` instead of preserving `"truf "`. This feature makes Chrome's TSF
integration detect and revert touch keyboard autocorrections when the focused
editable element has `autocorrect="off"` set.

### Disconnect WebSockets on bfcache entry

Active WebSocket connections no longer prevent a page from entering the
Back/Forward Cache (bfcache). By closing connections on bfcache entry instead of
marking the document as ineligible, the browser allows pages with active
websockets to be stored and restored.

### Request.isReloadNavigation attribute

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 (for example, 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`.

### Disable SVG filters on plugins and cross-origin and restricted iframes

This launch prevents SVG filters from being applied to cross-origin or
restricted iframes (for example, sandboxed iframes) and embedded plugins (for
example, pdfs). When a frame or plugin would be painted with an SVG filter
effect, the effect tree is traversed to find the highest ancestor without SVG
filters, and that effect is then applied instead.

## New origin trials

In Chrome 149 you can opt into the following new [origin
trials](https://developer.chrome.com/docs/web-platform/origin-trials).

### Permissions Policy: focus-without-user-activation

Gives embedders control over programmatic focus from embedded content with the
`focus-without-user-activation` permissions policy. When the policy is denied for
a frame, programmatic focus calls (`element.focus()`, `autofocus`, `window.focus()`,
`dialog.showModal()`, and popover focusing) are blocked unless triggered by user
activation. User-initiated focus such as clicking or tabbing is never affected.

The policy can be set using a Permissions-Policy HTTP response header or the
iframe `allow` attribute. Focus delegation is supported: a parent frame that has
focus can programmatically pass focus to a child iframe, even if the child has
the policy denied, and once a frame has focus it can move focus within its own
subtree.

### Gamepad event-driven input API

This proposal extends the Gamepad API with a new event-driven model that enables
applications to receive gamepad input with lower latency. Instead of relying on
frequent polling using `navigator.getGamepads()`, developers can now listen for a
`rawgamepadinputchange` event, which fires whenever new input data is available
from the device. This allows for more responsive input handling, particularly in
latency-sensitive applications.

### WebAssembly custom descriptors

Allows WebAssembly to store data associated with source-level types more
efficiently in new *custom descriptor* objects. These custom descriptors can be
configured with prototypes for the WebAssembly objects of that source-level
type. This allows methods to be installed on a WebAssembly object's prototype
chain and called directly from JavaScript using normal method call syntax. The
prototypes and methods can be configured declaratively using an imported builtin
function.