recursal/MDN huggingface dataset:
SpeechSynthesisEvent
====================

The **`SpeechSynthesisEvent`** interface of the Web Speech API contains information about the current state of `SpeechSynthesisUtterance` objects that have been processed in the speech service.

Event

SpeechSynthesisEventConstructor
-----------

`SpeechSynthesisEvent()`

Creates a new `SpeechSynthesisEvent`.

Instance properties
-------------------

*The `SpeechSynthesisEvent` interface also inherits properties from its parent interface, `Event`.*

`SpeechSynthesisEvent.charIndex` Read only 

Returns the index position of the character in the `SpeechSynthesisUtterance.text` that was being spoken when the event was triggered.

`SpeechSynthesisEvent.charLength` Read only 

Returns the number of characters left to be spoken after the `charIndex` position, if the speaking engine supports it. Returns 0 if the speaking engine can't provide the information.

`SpeechSynthesisEvent.elapsedTime` Read only 

Returns the elapsed time in seconds after the `SpeechSynthesisUtterance.text` started being spoken that the event was triggered at.

`SpeechSynthesisEvent.name` Read only 

Returns the name associated with certain types of events occurring as the `SpeechSynthesisUtterance.text` is being spoken: the name of the SSML marker reached in the case of a `mark` event, or the type of boundary reached in the case of a `boundary` event.

`SpeechSynthesisEvent.utterance` Read only 

Returns the `SpeechSynthesisUtterance` instance that the event was triggered on.

Instance methods
----------------

*The `SpeechSynthesisEvent` interface also inherits methods from its parent interface, `Event`.*

Examples
--------


```js
utterThis.onpause = (event) => {
  const char = event.utterance.text.charAt(event.charIndex);
  console.log(
    `Speech paused at character ${event.charIndex} of "${event.utterance.text}", which is "${char}".`,
  );
};

utterThis.onboundary = (event) => {
  console.log(
    `${event.name} boundary reached after ${event.elapsedTime} seconds.`,
  );
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # speechsynthesisevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API
RTCIceCandidatePair
===================

The **`RTCIceCandidatePair`** dictionary describes a pair of ICE candidates which together comprise a description of a viable connection between two WebRTC endpoints. It is used as the return value from `RTCIceTransport.getSelectedCandidatePair()` to identify the currently-selected candidate pair identified by the ICE agent.

Instance properties
-------------------

`local`

An `RTCIceCandidate` describing the configuration of the local end of the connection.

`remote`

The **`RTCIceCandidate`** describing the configuration of the remote end of the connection.

Examples
--------

See `RTCIceTransport.onselectedcandidatepairchange` for example code.

Specifications
--------------

#### No specification found

No specification data found for `api.RTCIceCandidatePair`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
USBConfiguration
================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The `USBConfiguration` interface of the WebUSB API provides information about a particular configuration of a USB device and the interfaces that it supports.

Constructor
-----------

`USBConfiguration()` 
Experimental

Creates a new `USBConfiguration` object which contains information about the configuration on the provided `USBDevice` with the given configuration value.

Instance properties
-------------------

`USBConfiguration.configurationValue` Read only  
Experimental

Returns the configuration value of this configuration. This is equal to the `bConfigurationValue` field of the configuration descriptor provided by the device defining this configuration.

`USBConfiguration.configurationName` Read only  
Experimental

Returns the name provided by the device to describe this configuration. This is equal to the value of the string descriptor with the index provided in the `iConfiguration` field of the configuration descriptor defining this configuration.

`USBConfiguration.interfaces` Read only  
Experimental

Returns an array containing instances of the `USBInterface` describing each interface supported by this configuration.

Specifications
--------------

| Specification |
| --- |
| WebUSB API # usbconfiguration-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVGFEOffsetElement
==================

The **`SVGFEOffsetElement`** interface corresponds to the `<feOffset>` element.

EventTarget

Node

Element

SVGElement

SVGFEOffsetElementInstance properties
-------------------

*This interface also inherits properties from its parent interface, `SVGElement`.*

`SVGFEOffsetElement.height` Read only 

An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.

`SVGFEOffsetElement.in1` Read only 

An `SVGAnimatedString` corresponding to the `in` attribute of the given element.

`SVGFEOffsetElement.dx` Read only 

An `SVGAnimatedNumber` corresponding to the `dx` attribute of the given element.

`SVGFEOffsetElement.dy` Read only 

An `SVGAnimatedNumber` corresponding to the `dy` attribute of the given element.

`SVGFEOffsetElement.result` Read only 

An `SVGAnimatedString` corresponding to the `result` attribute of the given element.

`SVGFEOffsetElement.width` Read only 

An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.

`SVGFEOffsetElement.x` Read only 

An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.

`SVGFEOffsetElement.y` Read only 

An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.

Instance methods
----------------

*This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.*

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # InterfaceSVGFEOffsetElement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<feOffset>`
DocumentTimeline
================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`DocumentTimeline`** interface of the Web Animations API represents animation timelines, including the default document timeline (accessed via `Document.timeline`).

AnimationTimeline

DocumentTimelineConstructor
-----------

`DocumentTimeline()`

Creates a new `DocumentTimeline` object associated with the active document of the current browsing context.

Instance properties
-------------------

*This interface inherits its property from its parent, `AnimationTimeline`.*

`AnimationTimeline.currentTime`

Returns the time value in milliseconds for this timeline or `null` if it is inactive.

Specifications
--------------

| Specification |
| --- |
| Web Animations # the-documenttimeline-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Animations API
* `AnimationTimeline`
* `AnimationTimeline.currentTime`
* `Document.timeline`
* `DocumentTimeline()`
CookieStore
===========

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`CookieStore`** interface of the Cookie Store API provides methods for getting and setting cookies asynchronously from either a page or a service worker.

The `CookieStore` is accessed via attributes in the global scope in a `Window` or `ServiceWorkerGlobalScope` context. Therefore there is no constructor.

EventTarget

CookieStore

**Note:** This feature is available in Web Workers

Instance methods
----------------

`CookieStore.delete()` 
Experimental

The `delete()` method deletes a cookie with the given name or options object, it returns a `Promise` that resolves when the deletion completes.

`CookieStore.get()` 
Experimental

The `get()` method gets a single cookie with the given name or options object, it returns a `Promise` that resolves with details of a single cookie.

`CookieStore.getAll()` 
Experimental

The `getAll()` method gets all matching cookies, it returns a `Promise` that resolves with a list of cookies.

`CookieStore.set()` 
Experimental

The `set()` method sets a cookie with the given name and value or options object, it returns a `Promise` that resolves when the cookie is set.

Events
------

`change` 
Experimental

The `change` event fires when a change is made to any cookie.

Examples
--------

In this example, we set a cookie and write to the console feedback as to whether the operation succeeded or failed.


```js
const day = 24 \* 60 \* 60 \* 1000;

cookieStore
  .set({
    name: "cookie1",
    value: "cookie1-value",
    expires: Date.now() + day,
    domain: "example.com",
  })
  .then(
    () => {
      console.log("It worked!");
    },
    (reason) => {
      console.error("It failed: ", reason);
    },
  );
```

Specifications
--------------

| Specification |
| --- |
| Cookie Store API # CookieStore |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFaceSet
===========

The **`FontFaceSet`** interface of the CSS Font Loading API manages the loading of font-faces and querying of their download status.

A `FontFaceSet` instance is a `Set`-like object that can hold an ordered set of `FontFace` objects.

This property is available as `Document.fonts`, or `self.fonts` in web workers.

EventTarget

FontFaceSetInstance properties
-------------------

`FontFaceSet.status` Read only 

Indicates the font-face's loading status. It will be one of `'loading'` or `'loaded'`.

`FontFaceSet.ready` Read only 

`Promise` which resolves once font loading and layout operations have completed.

`FontFaceSet.size` Read only 

Returns the number of values in the `FontFaceSet`.

### Events

`loading`

Fires when a font-face set has started loading.

`loadingdone`

Fires when a font face set has finished loading.

`loadingerror`

Fires when an error occurred whilst loading a font-face set.

Instance methods
----------------

`FontFaceSet.add()`

Adds a font to the font set.

`FontFaceSet.check()`

A boolean value that indicates whether a font is loaded, but doesn't initiate a load when it isn't.

`FontFaceSet.clear()`

Removes all manually-added fonts from the font set. CSS-connected fonts are unaffected.

`FontFaceSet.delete()`

Removes a manually-added font from the font set. CSS-connected fonts are unaffected.

`FontFaceSet.entries()`

Returns a new iterator with the values for each element in the `FontFaceSet` in insertion order.

`FontFaceSet.forEach()`

Executes a provided function for each value in the `FontFaceSet` object.

`FontFaceSet.has()`

Returns a `Boolean` asserting whether an element is present with the given value.

`FontFaceSet.keys()`

An alias for `FontFaceSet.values()`.

`FontFaceSet.load()`

Returns a `Promise` which resolves to a list of font-faces for a requested font.

`FontFaceSet.values()`

Returns a new iterator object that yields the values for each element in the `FontFaceSet` object in insertion order.

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # FontFaceSet-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WorkletGlobalScope
==================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`WorkletGlobalScope`** interface is an abstract class that specific worklet scope classes inherit from. Each `WorkletGlobalScope` defines a new global environment.

**Note:** You don't normally need to interact with this interface. It is a base interface intended to be subclassed. You will encounter the subclasses `AudioWorkletGlobalScope` inside `AudioWorklet` objects, or `PaintWorkletGlobalScope` inside CSS paint `Worklet` objects.

Instance properties
-------------------

None.

Instance methods
----------------

None.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # workletglobalscope |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `AudioWorkletGlobalScope`
* `PaintWorkletGlobalScope`
SVGAnimatedInteger
==================

SVG animated integer interface
------------------------------

The `SVGAnimatedInteger` interface is used for attributes of basic type <integer> which can be animated.

### Interface overview

|  |  |
| --- | --- |
| Also implement | *None* |
| Methods | *None* |
| Properties | * readonly long `baseVal`
* readonly long `animVal`
 |
| Normative document | SVG 1.1 (2nd Edition) |

Instance properties
-------------------

| Name | Type | Description |
| --- | --- | --- |
| `baseVal` | long | The base value of the given attribute before applying any animations. |
| `animVal` | long | 
 If the given attribute or property is being animated, contains the
 current animated value of the attribute or property. If the given
 attribute or property is not currently being animated, contains the same
 value as `baseVal`.
  |

Instance methods
----------------

The `SVGAnimatedInteger` interface do not provide any specific methods.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MutationObserver
================

The `MutationObserver` interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.

Constructor
-----------

`MutationObserver()`

Creates and returns a new `MutationObserver` which will invoke a specified callback function when DOM changes occur.

Instance methods
----------------

`disconnect()`

Stops the `MutationObserver` instance from receiving further notifications until and unless `observe()` is called again.

`observe()`

Configures the `MutationObserver` to begin receiving notifications through its callback function when DOM changes matching the given options occur.

`takeRecords()`

Removes all pending notifications from the `MutationObserver`'s notification queue and returns them in a new `Array` of `MutationRecord` objects.

Mutation Observer & customize resize event listener & demo
----------------------------------------------------------

https://codepen.io/milofultz/pen/LYjPXPw

Example
-------

The following example was adapted from this blog post.


```js
// Select the node that will be observed for mutations
const targetNode = document.getElementById("some-id");

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log(`The ${mutation.attributeName} attribute was modified.`);
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # interface-mutationobserver |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `PerformanceObserver`
* `ResizeObserver`
* `IntersectionObserver`
* A brief overview
* A more in-depth discussion
* A screencast by Chromium developer Rafael Weinstein
GPUCanvasContext
================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`GPUCanvasContext`** interface of the WebGPU API represents the WebGPU rendering context of a `<canvas>` element, returned via an `HTMLCanvasElement.getContext()` call with a `contextType` of `"webgpu"`.

Instance properties
-------------------

`canvas` 
Experimental
 Read only 

Returns a reference to the canvas that the context was created from.

Instance methods
----------------

`configure()` 
Experimental

Configures the context to use for rendering with a given `GPUDevice` and clears the canvas to transparent black.

`getCurrentTexture()` 
Experimental

Returns the next `GPUTexture` to be composited to the document by the canvas context.

`unconfigure()` 
Experimental

Removes any previously-set context configuration, and destroys any textures produced while the canvas context was configured.

Examples
--------


```js
const canvas = document.querySelector("#gpuCanvas");
const context = canvas.getContext("webgpu");

context.configure({
  device: device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # gpucanvascontext |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
CSSPerspective
==============

The **`CSSPerspective`** interface of the CSS\_Object\_Model#css\_typed\_object\_model represents the perspective() value of the individual `transform` property in CSS. It inherits properties and methods from its parent `CSSTransformValue`.

CSSTransformComponent

CSSPerspectiveConstructor
-----------

`CSSPerspective()`

Creates a new `CSSPerspective` object.

Instance properties
-------------------

`length`

Returns or sets the distance from z=0.

Examples
--------

To do

Specifications
--------------

| Specification |
| --- |
| CSS Typed OM Level 1 # cssperspective |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLDivElement
==============

The **`HTMLDivElement`** interface provides special properties (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating `<div>` elements.

EventTarget

Node

Element

HTMLElement

HTMLDivElementInstance properties
-------------------

*Inherits properties from its parent, `HTMLElement`.*

`HTMLDivElement.align` 
Deprecated

A string representing an enumerated property indicating alignment of the element's contents with respect to the surrounding context. The possible values are `"left"`, `"right"`, `"justify"`, and `"center"`.

Instance methods
----------------

*No specific method; inherits methods from its parent, `HTMLElement`.*

Specifications
--------------

| Specification |
| --- |
| HTML Standard # htmldivelement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The HTML element implementing this interface: `<div>`.
History API
===========

The **History API** provides access to the browser's session history (not to be confused with WebExtensions history) through the `history` global object. It exposes useful methods and properties that let you navigate back and forth through the user's history, and manipulate the contents of the history stack.

**Note:** This API is only available on the main thread (`Window`). It cannot be accessed in `Worker` or `Worklet` contexts.

Concepts and usage
------------------

Moving backward and forward through the user's history is done using the `back()`, `forward()`, and `go()` methods.

### Moving forward and backward

To move backward through history:


```js
history.back();
```


This acts exactly as if the user clicked on the `**Back**` button in their browser toolbar.

Similarly, you can move forward (as if the user clicked the `**Forward**` button), like this:


```js
history.forward();
```

### Moving to a specific point in history

You can use the `go()` method to load a specific page from session history, identified by its relative position to the current page. (The current page's relative position is `0`.)

To move back one page (the equivalent of calling `back()`):


```js
history.go(-1);
```


To move forward a page, just like calling `forward()`:


```js
history.go(1);
```


Similarly, you can move forward 2 pages by passing `2`, and so forth.

Another use for the `go()` method is to refresh the current page by either passing `0`, or by invoking it without an argument:


```js
// The following statements
// both have the effect of
// refreshing the page
history.go(0);
history.go();
```


You can determine the number of pages in the history stack by looking at the value of the `length` property:


```js
const numberOfEntries = history.length;
```

Interfaces
----------

`History`

Allows manipulation of the browser *session history* (that is, the pages visited in the tab or frame that the current page is loaded in).

`PopStateEvent`

The interface of the `popstate` event.

Examples
--------

The following example assigns a listener for the `popstate` event. It then illustrates some of the methods of the history object to add, replace, and move within the browser history for the current tab.


```js
window.addEventListener("popstate", (event) => {
  alert(
    `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
  );
});

history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null"
history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-history-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `history` global object
* `popstate` event