← all categories

category

DOM & Interop

DOM mutation, ranges, parser, navigation API, streaming, Observable, Atomics, async iterators, Intl, Temporal.

58 of 61 demos built, across 23 releases.

Chrome 156 (2)

  1. CSS pseudo-class for navigation source element

    Selects the element that initiated the navigation, whether it's a link/button/form. The element stays selected throughout the navigation.

  2. CSS random() function

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

Chrome 155 (1)

  1. Renewed HTML insertion&streaming methods

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

Chrome 153 (1)

  1. Interoperable dispatch timing for transitionrun and media query events

    Aligns Blink's dispatch timing for animation "transitionrun" event and media query "change" event with the spec, making the timing interoperable with Gecko and WebKit. More precisely, as per HTML window event loop specif...

Chrome 151 (5)

  1. Animation accessor on animation and transition events

    Adds a read-only animation attribute to the AnimationEvent and TransitionEvent interfaces. This attribute returns the associated Animation object that triggered the event.

  2. Declarative shadow DOM: shadowrootslotassignment attribute

    Adds the shadowrootslotassignment attribute to the <template> element, allowing declarative shadow roots to use manual slot assignment. Until now this option was only available imperatively, via attachShadow({slotAssignm...

  3. DeviceOrientation Events permission request API

    Allows web developers to call Device{Motion,Orientation}Event.requestPermission() to ask the user agent for device orientation and motion data to be shared with the page. Those two static methods return a promise that re...

  4. Navigation: Ignore duplicate navigations

    Prevents an ongoing navigation from being unnecessarily canceled by a new, identical navigation that is initiated in quick succession. This optimization improves performance and the user experience by not wasting resourc...

  5. Wheel event momentum

    Exposes a momentum attribute in wheel events to mark native platforms events for scrolling inertia. After the user has lifted the finger from the trackpad after a fling interaction, many native platforms continue to fire...

Chrome 150 (4)

  1. DeviceOrientation Events permission request API

    Allows web developers to call Device{Motion,Orientation}Event.requestPermission() to ask the user agent for device orientation and motion data to be shared with the page. Those two static methods return a promise that re...

  2. Out of order streaming

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

  3. Parse processing instructions in HTML

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

  4. Programmatic scroll promises

    Provide a reliable signal for the completion status of a programmatic smooth-scroll. All scroll methods in Element and Window now return Promise objects that get resolved on scroll completion, and the resolved value indi...

Chrome 148 (6)

  1. Correctly set "dropEffect" for "dragEnter", "dragLeave" and "dragOver" events

    The drag and drop specifications require the "dataTransfer"'s object "dropEffect" attribute to have certain predetermined values on "dragEnter", "dragOver" and "dragLeave". Drag enter and drag over should have a "dropEff...

  2. Declarative Shadow DOM 'shadowrootadoptedstylesheets'

    Allows for Declarative Shadow DOM (DSD) to specify adopted stylesheets at parse time. 'shadowrootadoptedstylesheets' supports a space-separated list of specifiers that each get fetched (exactly like a JavaScript import) ...

  3. HTML-in-canvas

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

  4. IDNA ContextJ rules

    IDNA is the mechanism for non-ASCII characters in domain names, encoding a URL like http://네이버.한국/ as http://xn--950bt9s8xi.xn--3e0b707e/ (a redirect to naver.com). The processing is defined by https://www.unicode.org/r...

  5. Out of order streaming

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

  6. Renewed HTML insertion&streaming methods

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

Chrome 147 (1)

  1. Pseudo target on events

    Specific events are now extended to have `.pseudoTarget` that is either CSSPseudoElement (if interaction has been with pseudo-element) or null. This allows to have more specific information on the event origin, e.g. tha...

Chrome 146 (2)

  1. Navigation API: add post-commit handler from precommit

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

  2. Preserving dropEffect Values from dragover to drop Events

    The HTML5 Drag and Drop API allows web applications to handle drag-and-drop operations through a series of events: `dragstart`, `dragenter`, `dragover`, `dragleave`, `drop`, and `dragend`. During these events, the [`data...

Chrome 145 (2)

  1. Expose 'onanimationcancel' event to GlobalEventHandlers

    The CSS Animations Level 1 extends [1] the GlobalEventsHandler Interface defined in the HTML spec [2], declaring 4 new event handlers: onanimationstart, onanimationiteration, onanimationend and onanimationcancel. Only t...

  2. Navigation API: expose destination in navigation.transition

    Currently NavigationTransition has a "from" property, exposing the old URL of the navigation. Exposing "to" (a NavigationDestination) completes this. It is especially useful when using precommit handlers, as during preco...

Chrome 144 (3)

  1. Interoperable Pointer and Mouse boundary events after DOM changes

    After an event target gets removed from the DOM, the logical target of the pointer as implied by the Pointer and Mouse boundary events (i.e. over, out, enter and leave events) should be the nearest ancestor still attache...

  2. Mirroring of RTL MathML operators

    Support for character-level and glyph-level mirroring when rendering MathML operators in right-to-left mode. When using RTL mode some operators can be mirrored by changing them to another code point (e.g. a right pare...

  3. Temporal in ECMA262

    Temporal API https://github.com/tc39/proposal-temporal in ECMA262 is a new API that provides standard objects and functions for working with dates and times. Date has been a long-standing pain point in ECMAScript. This ...

Chrome 143 (3)

  1. Allow more characters in javascript DOM APIs

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

  2. Deprecate getters of Intl Locale Info

    Intl Locale Info API is a Stage 3 ECMAScript TC39 proposal to enhance the Intl.Locale object by exposing Locale information, such as week data (first day in a week, weekend start day, weekend end day, minimun day in the ...

  3. ICU version 77 (supporting Unicode 16)

    The Unicode support library, International Components for Unicode (ICU), is upgraded from version 74.2 to version 77.1, adding support for Unicode 16 and updating locale data. Two changes could pose some risk for web ap...

Chrome 142 (2)

  1. activeViewTransition property on document

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

  2. Media session: add reason to enterpictureinpicture action details

    Adds `enterPictureInPictureReason` to the `MediaSessionActionDetails` sent to the `enterpictureinpicture` action in the Media Session API. This allows developers to distinguish between `enterpictureinpicture` actions tri...

Chrome 141 (1)

  1. Navigation API: deferred commit (precommit handlers)

    Normally, when navigateEvent.intercept() is called, the intercepted navigation commits (and therefore the URL updates) as soon as the NavigateEvent finishes dispatch. Adding a `precommitHandler` option to navigateEvent....

Chrome 140 (4)

  1. Mirroring of RTL MathML operators

    Support for character-level and glyph-level mirroring when rendering MathML operators in right-to-left mode. When using RTL mode some operators can be mirrored by changing them to another code point (e.g. a right pare...

  2. ToggleEvent source attribute

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

  3. Uint8Array to/from base64 and hex

    base64 is a common way to represent arbitrary binary data as ASCII. JavaScript has Uint8Arrays to work with binary data, but no built-in mechanism to encode that data as base64, nor to take base64'd data and produce a co...

  4. View Transition finished promise timing change

    The current finished promise timing happens within the rendering lifecycle steps. This means that code that runs as a result of promise resolution happens after the visual frame that removes the view transition has been ...

Chrome 138 (4)

  1. Deprecate asynchronous range removal for Media Source Extensions

    The Media Source standard long ago changed to disallow ambiguously defined behavior involving asynchronous range removals: * SourceBuffer.abort() no longer aborts SourceBuffer.remove() operations * Setting MediaSource.du...

  2. HTML-in-canvas

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

  3. Pushsubscriptionchange event upon resubscription

    Fire the pushsubscriptionchange event in service workers when an origin for which a push subscription existed in the past, but which was revoked because of a permission change (from granted to deny/default), is re-grante...

  4. Uint8Array to/from base64 and hex

    base64 is a common way to represent arbitrary binary data as ASCII. JavaScript has Uint8Arrays to work with binary data, but no built-in mechanism to encode that data as base64, nor to take base64'd data and produce a co...

Chrome 137 (2)

  1. Allow <use> to reference an external document's root element by omitting the fragment.

    In this feature, we are streamlining the SVG <use> element by loosening referencing requirements. Currently, authors need to explicitly reference fragments within the SVG document. If no fragment id is given <use> will n...

  2. JavaScript Promise Integration

    JavaScript Promise Integration (JSPI) is an API that allows WebAssembly applications to integrate with JavaScript Promises. It allows a WebAssembly program to act as the generator of a Promise, and it allows the WebAsse...

Chrome 136 (3)

  1. RegExp.escape

    RegExp.escape is a static method that takes a string and returns an escaped version that may be used as a pattern inside a regular expression. For example, copied from the proposal explainer: ``` const str = promp...

  2. Update ProgressEvent to use double type for 'loaded' and 'total'

    The ProgressEvent has attributes `loaded` and `total` indicating the progress, and their type is `unsigned long long` now. With this feature, the type for these two attributes is changed to `double` instead, which giv...

  3. Use DOMPointInit for getCharNumAtPosition, isPointInFill, isPointInStroke

    This change brings Chromium code in line with the latest W3C spec for SVGGeometryElement and SVGPathElement in terms of usage of DOMPointInit over SVGPoint for getCharNumAtPosition, isPointInFill, isPointInStroke. The c...

Chrome 135 (5)

  1. Deprecate Mutation Events

    Mutation Events, including `DOMSubtreeModified`, `DOMNodeInserted`, `DOMNodeRemoved`, `DOMNodeRemovedFromDocument`, `DOMNodeInsertedIntoDocument`, and `DOMCharacterDataModified`, are quite bad for page performance, and a...

  2. Float16Array

    Adds the Float16Array typed array. Number values are rounded to IEEE fp16 when writing into Float16Array instances.

  3. NavigateEvent sourceElement

    When a navigation is initiated by an Element (i.e., a link click or a form submission), the sourceElement property on the NavigateEvent will be the initiating element.

  4. Observable API

    Observables are a popular reactive-programming paradigm to handle an asynchronous stream of push-based events. They can be thought of as Promises but for multiple events, and aim to do what Promises did for callbacks/nes...

  5. RegExp.escape

    RegExp.escape is a static method that takes a string and returns an escaped version that may be used as a pattern inside a regular expression. For example, copied from the proposal explainer: ``` const str = promp...

Chrome 134 (3)

  1. Document Subtitle (Fix PWA app titles)

    Installed web apps can change the text on the title bar based on the page's content. The current behavior is that the installed web application will put the app's name from the manifest and append the page’s inner text f...

  2. NavigateEvent sourceElement

    When a navigation is initiated by an Element (i.e., a link click or a form submission), the sourceElement property on the NavigateEvent will be the initiating element.

  3. User Navigation Capturing on Desktop

    Web links now direct users to installed web apps. This aligns with users' installed app expectations. Chrome makes it easier to move between the browser and installed web apps. Clicking a link that could be handled by an...

Chrome 133 (1)

  1. DOM State-Preserving Move

    This features adds a DOM primitive (moveBefore) that allows moving elements around a DOM tree, without resetting the element's state. This function would be available on ParentNodes, like Element, Document, DocumentFragm...

Chrome 132 (2)

  1. navigator.storage no longer an EventTarget

    navigator.storage is no longer an EventTarget navigator.storage was made an EventTarget for the Storage Pressure Event, which never made it past the prototype phase: https://chromestatus.com/feature/5666274359115776 ...

  2. User Navigation Capturing on Desktop

    Web links now direct users to installed web apps. This aligns with users' installed app expectations. Chrome makes it easier to move between the browser and installed web apps. Clicking a link that could be handled by an...

Chrome 131 (2)

  1. Deprecate getters of Intl Locale Info

    Intl Locale Info API is a Stage 3 ECMAScript TC39 proposal to enhance the Intl.Locale object by exposing Locale information, such as week data (first day in a week, weekend start day, weekend end day, minimun day in the ...

  2. Improvements to styling structure of <details> and <summary> elements

    Support more CSS styling for the structure of <details> and <summary> elements to allow these elements to be used in more cases where disclosure widgets or accordion widgets are built on the web. In particular, this cha...

Chrome 130 (2)

  1. Coalesced/predicted events in untrusted PointerEvents will retain original targets

    For untrusted (i.e. JS constructed) PointerEvents, the events returned by PointerEvent.getCoalescedEvents() and PointerEvent.getPredictedEvents() will maintain their original targets and offsetX/Y coordinates, instead of...

  2. relaunch Intl Locale Info feature in newly added functions

    Intl Locale Info API is a new Stage ECMAScript TC39 proposal to enhance the Intl.Locale object by exposing Locale information, such as week data (first day in a week, weekend start day, weekend end day, minimun day in th...