GPUTexture - Web APIs

GPUTexture
==========

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

The **`GPUTexture`** interface of the WebGPU API represents a container used to store 1D, 2D, or 3D arrays of data, such as images, to use in GPU rendering operations.

A `GPUTexture` object instance is created using the `GPUDevice.createTexture()` method.

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

`depthOrArrayLayers`
Experimental
 Read only

A number representing the depth or layer count of the `GPUTexture` (pixels, or number of layers).

`dimension`
Experimental
 Read only

An enumerated value representing the dimension of the set of texels for each `GPUTexture` subresource.

`format`
Experimental
 Read only

An enumerated value representing the format of the `GPUTexture`.

`height`
Experimental
 Read only

A number representing the height of the `GPUTexture` in pixels.

`label`
Experimental

A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

`mipLevelCount`
Experimental
 Read only

A number representing the number of mip levels of the `GPUTexture`.

`sampleCount`
Experimental
 Read only

A number representing the sample count of the `GPUTexture`.

`usage`
Experimental
 Read only

The bitwise flags representing the allowed usages of the `GPUTexture`.

`width`
Experimental
 Read only

A number representing the width of the `GPUTexture` in pixels.

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

`createView()`
Experimental

Creates a `GPUTextureView` representing a specific view of the `GPUTexture`.

`destroy()`
Experimental

Destroys the `GPUTexture`.

Examples
--------

In the WebGPU samples Textured Cube sample, a texture to use on the faces of a cube is created by:

* Loading the image into an `HTMLImageElement` and creating an image bitmap using `createImageBitmap()`.
* Creating a new `GPUTexture` using `createTexture()`.
* Copying the image bitmap into the texture using `GPUQueue.copyExternalImageToTexture()`.

```js
//...
let cubeTexture: GPUTexture; // Sample is written in TypeScript
{
  const img = document.createElement("img");

  img.src = new URL(
    "../../../assets/img/Di-3d.png",
    import.meta.url
  ).toString();

  await img.decode();

  const imageBitmap = await createImageBitmap(img);

  cubeTexture = device.createTexture({
    size: [imageBitmap.width, imageBitmap.height, 1],
    format: "rgba8unorm",
    usage:
      GPUTextureUsage.TEXTURE\_BINDING |
      GPUTextureUsage.COPY\_DST |
      GPUTextureUsage.RENDER\_ATTACHMENT,
  });

  device.queue.copyExternalImageToTexture(
    { source: imageBitmap },
    { texture: cubeTexture },
    [imageBitmap.width, imageBitmap.height]
  );
}
//...
```

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

| Specification |
| --- |
| WebGPU # texture-interface |

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

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

See also
--------

* The WebGPU API


USBIsochronousInTransferResult - Web APIs

USBIsochronousInTransferResult
==============================

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 `USBIsochronousInTransferResult` interface of the WebUSB API provides the result from a call to the `isochronousTransferIn()` method of the `USBDevice` interface. It represents the result from requesting a transfer of data from the USB device to the USB host.

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

`USBIsochronousInTransferResult()`
Experimental

Creates a new `USBIsochronousInTransferResult` object with the provided `packets` and `data` fields.

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

`USBIsochronousInTransferResult.data` Read only
Experimental

Returns a `DataView` object containing the data received from the device. This is the combined data from all packets. See the individual `DataView` objects in the `packets` array for the portion of this buffer containing data from each packet.

`USBIsochronousInTransferResult.packets` Read only
Experimental

Returns an array of `USBIsochronousInTransferPacket` objects containing the result of each request to receive a packet from the device.

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

| Specification |
| --- |
| WebUSB API # usbisochronousintransferresult |

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

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


PerformanceObserverEntryList - Web APIs

PerformanceObserverEntryList
============================

The **`PerformanceObserverEntryList`** interface is a list of performance events that were explicitly observed via the `observe()` method.

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

`PerformanceObserverEntryList.getEntries()`

Returns a list of all explicitly observed `PerformanceEntry` objects.

`PerformanceObserverEntryList.getEntriesByType()`

Returns a list of all explicitly observed `PerformanceEntry` objects of the given entry type.

`PerformanceObserverEntryList.getEntriesByName()`

Returns a list of all explicitly observed `PerformanceEntry` objects based on the given name and entry type.

Example
-------

### Using PerformanceObserverEntryList

In the following example, `list` is the `PerformanceObserverEntryList` object. The `getEntries()` method is called to get all explicitly observed `PerformanceEntry` objects which are "measure" and "mark" in this case.

```js
function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
```

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

| Specification |
| --- |
| Performance Timeline # performanceobserverentrylist-interface |

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

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


CompositionEvent - Web APIs

CompositionEvent
================

The DOM **`CompositionEvent`** represents events that occur due to the user indirectly entering text.

Event

UIEvent

CompositionEventConstructor
-----------

`CompositionEvent()`

Creates a new `CompositionEvent` object instance.

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

*This interface also inherits properties of its parent, `UIEvent`, and its ancestor — `Event`.*

`CompositionEvent.data` Read only

Returns the characters generated by the input method that raised the event; its varies depending on the type of event that generated the `CompositionEvent` object.

`CompositionEvent.locale` Read only
Deprecated

Non-standard

Returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with IME).

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

*This interface also inherits methods of its parent, `UIEvent`, and its ancestor — `Event`.*

`CompositionEvent.initCompositionEvent()`
Deprecated

Initializes the attributes of a `CompositionEvent` object.

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

| Specification |
| --- |
| UI Events # interface-compositionevent |

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

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

See also
--------

* compositionstart
* compositionend
* compositionupdate
* UIEvent
* Event


ViewTransition - Web APIs

ViewTransition
==============

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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`ViewTransition`** interface of the View Transitions API represents a view transition, and provides functionality to react to the transition reaching different states (e.g. ready to run the animation, or animation finished) or skip the transition altogether.

This object type is returned by the `document.startViewTransition()` method. When `startViewTransition()` is invoked, a sequence of steps is followed as explained in The view transition process. This also explains when the different promises fulfill.

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

`ViewTransition.finished`
Experimental

A `Promise` that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user.

`ViewTransition.ready`
Experimental

A `Promise` that fulfills once the pseudo-element tree is created and the transition animation is about to start.

`ViewTransition.updateCallbackDone`
Experimental

A `Promise` that fulfills when the promise returned by the `document.startViewTransition()`'s callback fulfills.

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

`skipTransition()`
Experimental

Skips the animation part of the view transition, but doesn't skip running the `document.startViewTransition()` callback that updates the DOM.

Examples
--------

In the following example, the `ViewTransition.ready` promise is used to trigger a custom circular reveal view transition emanating from the position of the user's cursor on click, with animation provided by the Web Animations API.

```js
// Store the last click event
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don’t support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // Create a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root’s new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // Specify which pseudo-element to animate
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}
```

This animation also requires the following CSS, to turn off the default CSS animation and stop the old and new view states from blending in any way (the new state "wipes" right over the top of the old state, rather than transitioning in):

```css
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}
```

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

| Specification |
| --- |
| CSS View Transitions Module Level 1 # viewtransition |

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

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

See also
--------

* Smooth and simple transitions with the View Transitions API


HTMLIFrameElement - Web APIs

HTMLIFrameElement
=================

The **`HTMLIFrameElement`** interface provides special properties and methods (beyond those of the `HTMLElement` interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.

EventTarget

Node

Element

HTMLElement

HTMLIFrameElementInstance properties
-------------------

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

`HTMLIFrameElement.align`
Deprecated

A string that specifies the alignment of the frame with respect to the surrounding context.

`HTMLIFrameElement.allow`

A list of origins the frame is allowed to display content from. This attribute also accepts the values `self` and `src` which represent the origin in the iframe's src attribute. The default value is `src`.

`HTMLIFrameElement.allowfullscreen`

A boolean value indicating whether the inline frame is willing to be placed into full screen mode. See Using fullscreen mode for details.

`HTMLIFrameElement.allowPaymentRequest`
Deprecated

Non-standard

A boolean value indicating whether the Payment Request API may be invoked inside a cross-origin iframe.

`HTMLIFrameElement.contentDocument` Read only

Returns a `Document`, the active document in the inline frame's nested browsing context.

`HTMLIFrameElement.contentWindow` Read only

Returns a WindowProxy, the window proxy for the nested browsing context.

`HTMLIFrameElement.credentialless`
Experimental

A boolean value indicating whether the `<iframe>` is credentialless, meaning that its content is loaded in a new, ephemeral context. This context does not have access to the parent context's shared storage and credentials. In return, the `Cross-Origin-Embedder-Policy` (COEP) embedding rules can be lifted, so documents with COEP set can embed third-party documents that do not. See IFrame credentialless for a deeper explanation.

`HTMLIFrameElement.csp`
Experimental

Specifies the Content Security Policy that an embedded document must agree to enforce upon itself.

`HTMLIFrameElement.featurePolicy` Read only
Experimental

Returns the `FeaturePolicy` interface which provides a simple API for introspecting the Permissions Policies applied to a specific document.

`HTMLIFrameElement.frameBorder`
Deprecated

A string that indicates whether to create borders between frames.

`HTMLIFrameElement.height`

A string that reflects the `height` HTML attribute, indicating the height of the frame.

`HTMLIFrameElement.loading`

 A string providing a hint to the browser that the iframe should be loaded immediately (`eager`) or on an as-needed basis (`lazy`).
 This reflects the `loading` HTML attribute.

`HTMLIFrameElement.longDesc`
Deprecated

A string that contains the URI of a long description of the frame.

`HTMLIFrameElement.marginHeight`
Deprecated

A string being the height of the frame margin.

`HTMLIFrameElement.marginWidth`
Deprecated

A string being the width of the frame margin.

`HTMLIFrameElement.name`

A string that reflects the `name` HTML attribute, containing a name by which to refer to the frame.

`HTMLIFrameElement.referrerPolicy`

A string that reflects the `referrerPolicy` HTML attribute indicating which referrer to use when fetching the linked resource.

`HTMLIFrameElement.sandbox`

A `DOMTokenList` that reflects the `sandbox` HTML attribute, indicating extra restrictions on the behavior of the nested content.

`HTMLIFrameElement.scrolling`
Deprecated

A string that indicates whether the browser should provide scrollbars for the frame.

`HTMLIFrameElement.src`

A string that reflects the `src` HTML attribute, containing the address of the content to be embedded. Note that programmatically removing an `<iframe>`'s src attribute (e.g. via `Element.removeAttribute()`) causes `about:blank` to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.

`HTMLIFrameElement.srcdoc`

A string that represents the content to display in the frame.

`HTMLIFrameElement.width`

A string that reflects the `width` HTML attribute, indicating the width of the frame.

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

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

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

| Specification |
| --- |
| HTML Standard # htmliframeelement |

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: `<iframe>`


AudioWorkletNode - Web APIs

AudioWorkletNode
================

**Note:** Although the interface is available outside secure contexts, the `BaseAudioContext.audioWorklet` property is not, thus custom `AudioWorkletProcessor`s cannot be defined outside them.

The **`AudioWorkletNode`** interface of the Web Audio API represents a base class for a user-defined `AudioNode`, which can be connected to an audio routing graph along with other nodes. It has an associated `AudioWorkletProcessor`, which does the actual audio processing in a Web Audio rendering thread.

EventTarget

AudioNode

AudioWorkletNodeConstructor
-----------

`AudioWorkletNode()`

Creates a new instance of an `AudioWorkletNode` object.

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

*Also Inherits properties from its parent, `AudioNode`*.

`AudioWorkletNode.port` Read only

Returns a `MessagePort` used for bidirectional communication between the node and its associated `AudioWorkletProcessor`. The other end is available under the `port` property of the processor.

`AudioWorkletNode.parameters` Read only

Returns an `AudioParamMap` — a collection of `AudioParam` objects. They are instantiated during the creation of the underlying `AudioWorkletProcessor`. If the `AudioWorkletProcessor` has a static `parameterDescriptors` getter, the `AudioParamDescriptor` array returned from it is used to create `AudioParam` objects on the `AudioWorkletNode`. With this mechanism it is possible to make your own `AudioParam` objects accessible from your `AudioWorkletNode`. You can then use their values in the associated `AudioWorkletProcessor`.

### Events

`processorerror`

Fired when an error is thrown in associated `AudioWorkletProcessor`. Once fired, the processor and consequently the node will output silence throughout its lifetime.

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

*Also inherits methods from its parent, `AudioNode`*.

*The `AudioWorkletNode` interface does not define any methods of its own.*

Examples
--------

In this example we create a custom `AudioWorkletNode` that outputs random noise.

First, we need to define a custom `AudioWorkletProcessor`, which will output random noise, and register it. Note that this should be done in a separate file.

```js
// random-noise-processor.js
class RandomNoiseProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach((channel) => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() \* 2 - 1;
      }
    });
    return true;
  }
}

registerProcessor("random-noise-processor", RandomNoiseProcessor);
```

Next, in our main script file we'll load the processor, create an instance of `AudioWorkletNode` passing it the name of the processor, and connect the node to an audio graph.

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("random-noise-processor.js");
const randomNoiseNode = new AudioWorkletNode(
  audioContext,
  "random-noise-processor",
);
randomNoiseNode.connect(audioContext.destination);
```

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

| Specification |
| --- |
| Web Audio API # AudioWorkletNode |

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

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

See also
--------

* Web Audio API
* Using the Web Audio API
* Using AudioWorklet


BarcodeDetector - Web APIs

BarcodeDetector
===============

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

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

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

The **`BarcodeDetector`** interface of the Barcode Detection API allows detection of linear and two dimensional barcodes in images.

Constructors
------------

`BarcodeDetector.BarcodeDetector()`
Experimental

Creates and returns a `BarcodeDetector` object, with optional `BarcodeDetectorOptions`.

Static methods
--------------

`getSupportedFormats()`
Experimental

Returns a `Promise` which fulfills with an `Array` of supported barcode format types.

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

`detect()`
Experimental

Returns a `Promise` which fulfills with an array of `DetectedBarcode` objects with the following properties:

* `boundingBox`: A `DOMRectReadOnly`, which returns the dimensions of a rectangle representing the extent of a detected barcode, aligned with the image.
* `cornerPoints`: The x and y co-ordinates of the four corner points of the detected barcode relative to the image, starting with the top left and working clockwise. This may not be square due to perspective distortions within the image.
* `format`: The detected barcode format. (For a full list of formats, consult the supported barcode format) list.
* `rawValue`: A string decoded from the barcode data.

Examples
--------

### Creating A Detector

This example creates a new barcode detector object, with specified supported formats and tests for browser compatibility.

```js
// check compatibility
if (!("BarcodeDetector" in globalThis)) {
  console.log("Barcode Detector is not supported by this browser.");
} else {
  console.log("Barcode Detector supported!");

  // create new detector
  const barcodeDetector = new BarcodeDetector({
    formats: ["code\_39", "codabar", "ean\_13"],
  });
}
```

### Getting Supported Formats

The following example calls the `getSupportFormat()` static method and logs the results to the console.

```js
// check supported types
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});
```

### Detect Barcodes

This example uses the `detect()` method to detect the barcodes within the given image. These are iterated over and the barcode data is logged to the console.

```js
barcodeDetector
  .detect(imageEl)
  .then((barcodes) => {
    barcodes.forEach((barcode) => console.log(barcode.rawValue));
  })
  .catch((err) => {
    console.log(err);
  });
```

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

| Specification |
| --- |
| Accelerated Shape Detection in Images # barcode-detection-api |

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

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

See also
--------

* barcodefaq.com: A website with information about different barcodes and examples of the different types.
* Accelerated Shape Detection in Images


HTMLPreElement - Web APIs

HTMLPreElement
==============

The **`HTMLPreElement`** interface exposes specific properties and methods (beyond those of the `HTMLElement` interface it also has available to it by inheritance) for manipulating a block of preformatted text (`<pre>`).

EventTarget

Node

Element

HTMLElement

HTMLPreElementInstance properties
-------------------

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

`HTMLPreElement.width`
Deprecated

A `long` value reflecting the obsolete `width` attribute, containing a fixed-size length for the `<pre>` element.

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

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

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

| Specification |
| --- |
| HTML Standard # htmlpreelement |

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: `<pre>`


DOMMatrix (WebKitCSSMatrix) - Web APIs

DOMMatrix (WebKitCSSMatrix)
===========================

The **`DOMMatrix`** interface represents 4×4 matrices, suitable for 2D and 3D operations including rotation and translation. It is a mutable version of the `DOMMatrixReadOnly` interface.

**`WebKitCSSMatrix`** and **`SVGMatrix`** are aliases to **`DOMMatrix`**.

This interface should be available inside web workers, though some implementations don't allow it yet.

DOMMatrixReadOnly

DOMMatrixConstructor
-----------

`DOMMatrix()`

Creates and returns a new `DOMMatrix` object.

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

*This interface inherits properties from `DOMMatrixReadOnly`, though some of these properties are altered to be mutable.*

`is2D` Read only

A Boolean flag whose value is `true` if the matrix was initialized as a 2D matrix. If `false`, the matrix is 3D.

`isIdentity` Read only

A Boolean whose value is `true` if the matrix is the identity matrix. The identity matrix is one in which every value is `0` *except* those on the main diagonal from top-left to bottom-right corner (in other words, where the offsets in each direction are equal).

`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`

Double-precision floating-point values representing each component of a 4×4 matrix, where `m11` through `m14` are the first column, `m21` through `m24` are the second column, and so forth.

`a`, `b`, `c`, `d`, `e`, `f`

Double-precision floating-point values representing the components of a 4×4 matrix which are required in order to perform 2D rotations and translations. These are aliases for specific components of a 4×4 matrix, as shown below.

| `2D` | `3D equivalent` |
| --- | --- |
| `a` | `m11` |
| `b` | `m12` |
| `c` | `m21` |
| `d` | `m22` |
| `e` | `m41` |
| `f` | `m42` |

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

*This interface includes the following methods, as well as the methods it inherits from `DOMMatrixReadOnly`.*

`DOMMatrix.invertSelf()`

Modifies the matrix by inverting it. If the matrix can't be inverted, its components are all set to `NaN`, and `is2D` returns `false`.

`DOMMatrix.multiplySelf()`

Modifies the matrix by post-multiplying it with the specified `DOMMatrix`. This is equivalent to the dot product `A⋅B`, where matrix `A` is the source matrix and `B` is the matrix given as an input to the method. Returns itself.

`DOMMatrix.preMultiplySelf()`

Modifies the matrix by pre-multiplying it with the specified `DOMMatrix`. This is equivalent to the dot product `B⋅A`, where matrix `A` is the source matrix and `B` is the matrix given as an input to the method. Returns itself.

`DOMMatrix.translateSelf()`

Modifies the matrix by applying the specified vector. The default vector is `[0, 0, 0]`. Returns itself.

`DOMMatrix.scaleNonUniformSelf()`
Deprecated

Modifies the matrix by applying the specified scaling on the X, Y, and Z axes, centered at the given origin. By default, the Y and Z axes' scaling factors are both `1`, but the scaling factor for X must be specified. The default origin is `(0, 0, 0)`. Returns itself.

`DOMMatrix.scaleSelf()`

Modifies the matrix by applying the specified scaling factors, with the center located at the specified origin. Also returns itself. By default, the scaling factor is `1` for all three axes, and the origin is `(0, 0, 0)`. Returns itself.

`DOMMatrix.scale3dSelf()`

Modifies the matrix by applying the specified scaling factor to all three axes, centered on the given origin. Returns itself.

`DOMMatrix.rotateSelf()`

Modifies the matrix by rotating itself around each axis by the specified number of degrees. Returns itself.

`DOMMatrix.rotateAxisAngleSelf()`

Modifies the matrix by rotating it by the specified angle around the given vector. Returns itself.

`DOMMatrix.rotateFromVectorSelf()`

Modifies the matrix by rotating it by the angle between the specified vector and `(1, 0)`. Returns itself.

`DOMMatrix.setMatrixValue()`

Replaces the contents of the matrix with the matrix described by the specified transform or transforms. Returns itself.

`DOMMatrix.skewXSelf()`

Modifies the matrix by applying the specified skew transformation along the X-axis. Returns itself.

`DOMMatrix.skewYSelf()`

Modifies the matrix by applying the specified skew transformation along the Y-axis. Returns itself.

Static methods
--------------

*This interface inherits methods from `DOMMatrixReadOnly`.*

`fromFloat32Array()`

Creates a new mutable `DOMMatrix` object given an array of single-precision (32-bit) floating-point values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a `TypeError` exception is thrown.

`fromFloat64Array()`

Creates a new mutable `DOMMatrix` object given an array of double-precision (64-bit) floating-point values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a `TypeError` exception is thrown.

`fromMatrix()`

Creates a new mutable `DOMMatrix` object given an existing matrix or a `DOMMatrixInit` dictionary which provides the values for its properties.

Usage notes
-----------

The matrix defined by the `DOMMatrix` interface is comprised of four rows of four columns each. While it's beyond the scope of this article to explain the mathematics involved, this 4×4 size is enough to describe any transformation you might apply to either 2D or 3D geometries.

Here are the positions of the 16 elements (m\_11 through m\_44) which comprise the 4×4 abstract matrix:

[

m
11

m
21

m
31

m
41

m
12

m
22

m
32

m
42

m
13

m
23

m
33

m
43

m
14

m
24

m
34

m
44

]

\left [ \begin{matrix} m\_{11} & m\_{21} & m\_{31} & m\_{41} \ m\_{12} & m\_{22} & m\_{32} & m\_{42} \ m\_{13} & m\_{23} & m\_{33} & m\_{43} \ m\_{14} & m\_{24} & m\_{34} & m\_{44} \end{matrix} \right ]

The `DOMMatrix` interface is designed with the intent that it will be used for all matrices within markup.

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

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMMatrix |

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

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

See also
--------

* Its non-modifiable counterpart, `DOMMatrixReadOnly`


HkdfParams - Web APIs

HkdfParams
==========

The **`HkdfParams`** dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.deriveKey()`, when using the HKDF algorithm.

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

`name`

A string. This should be set to `HKDF`.

`hash`

A string representing the digest algorithm to use. This may be one of:

* `SHA-1`
* `SHA-256`
* `SHA-384`
* `SHA-512`

`salt`

An `ArrayBuffer`, a `TypedArray`, or a `DataView`. The HKDF specification states that adding salt "adds significantly to the strength of HKDF". Ideally, the salt is a random or pseudo-random value with the same length as the output of the digest function. Unlike the input key material passed into `deriveKey()`, salt does not need to be kept secret.

`info`

An `ArrayBuffer`, a `TypedArray`, or a `DataView` representing application-specific contextual information. This is used to bind the derived key to an application or context, and enables you to derive different keys for different contexts while using the same input key material. It's important that this should be independent of the input key material itself. This property is required but may be an empty buffer.

Examples
--------

See the examples for `SubtleCrypto.deriveKey()`.

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

| Specification |
| --- |
| Web Cryptography API # dfn-HkdfParams |

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

Browsers that support the "HKDF" algorithm for the `SubtleCrypto.deriveKey()` method will support this type.

See also
--------

* `SubtleCrypto.deriveKey()`.


CSSStyleDeclaration - Web APIs

CSSStyleDeclaration
===================

The **`CSSStyleDeclaration`** interface represents an object that is a CSS declaration block, and exposes style information and various style-related methods and properties.

A `CSSStyleDeclaration` object can be exposed using three different APIs:

* Via `HTMLElement.style`, which deals with the inline styles of a single element (e.g., `<div style="…">`).
* Via the `CSSStyleSheet` API. For example, `document.styleSheets[0].cssRules[0].style` returns a `CSSStyleDeclaration` object on the first CSS rule in the document's first stylesheet.
* Via `Window.getComputedStyle()`, which exposes the `CSSStyleDeclaration` object as a **read-only** interface.
Attributes
----------

`CSSStyleDeclaration.cssText`

Textual representation of the declaration block, if and only if it is exposed via `HTMLElement.style`. Setting this attribute changes the inline style. If you want a text representation of a computed declaration block, you can get it with `JSON.stringify()`.

`CSSStyleDeclaration.length` Read only

The number of properties. See the `item()` method below.

`CSSStyleDeclaration.parentRule` Read only

The containing `CSSRule`.

### CSS Properties

`CSSStyleDeclaration.cssFloat`

Special alias for the `float` CSS property.

`CSSStyleDeclaration` named properties

Dashed and camel-cased attributes for all supported CSS properties.

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

`CSSStyleDeclaration.getPropertyPriority()`

Returns the optional priority, "important".

`CSSStyleDeclaration.getPropertyValue()`

Returns the property value given a property name.

`CSSStyleDeclaration.item()`

Returns a CSS property name by its index, or the empty string if the index is out-of-bounds.

`CSSStyleDeclaration.removeProperty()`

Removes a property from the CSS declaration block.

`CSSStyleDeclaration.setProperty()`

Modifies an existing CSS property or creates a new CSS property in the declaration block.

`CSSStyleDeclaration.getPropertyCSSValue()`
Deprecated

**Only supported via getComputedStyle in Firefox.** Returns the property value as a `CSSPrimitiveValue` or `null` for shorthand properties.

Example
-------

```js
const styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);

for (let i = styleObj.length; i--; ) {
  const nameString = styleObj[i];
  styleObj.removeProperty(nameString);
}

console.log(styleObj.cssText);
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssstyledeclaration-interface |

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

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


AudioParam - Web APIs

AudioParam
==========

The Web Audio API's `AudioParam` interface represents an audio-related parameter, usually a parameter of an `AudioNode` (such as `GainNode.gain`).

An `AudioParam` can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.

Each `AudioParam` has a list of events, initially empty, that define when and how values change. When this list is not empty, changes using the `AudioParam.value` attributes are ignored. This list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timeline-based automation curves. The time used is the one defined in `AudioContext.currentTime`.

AudioParam types
----------------

There are two `AudioParam` kinds: *a-rate* and *k-rate* parameters. Each `AudioNode` defines which of its parameters are *a-rate* or *k-rate* in the spec.

### a-rate

An *a-rate* `AudioParam` takes the current audio parameter value for each sample frame of the audio signal.

### k-rate

A *k-rate* `AudioParam` uses the same initial audio parameter value for the whole block processed; that is, 128 sample frames. In other words, the same value applies to every frame in the audio as it's processed by the node.

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

`AudioParam.defaultValue` Read only

Represents the initial value of the attribute as defined by the specific `AudioNode` creating the `AudioParam`.

`AudioParam.maxValue` Read only

Represents the maximum possible value for the parameter's nominal (effective) range.

`AudioParam.minValue` Read only

Represents the minimum possible value for the parameter's nominal (effective) range.

`AudioParam.value`

Represents the parameter's current value as of the current time; initially set to the value of `defaultValue`.

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

`AudioParam.setValueAtTime()`

Schedules an instant change to the value of the `AudioParam` at a precise time, as measured against `AudioContext.currentTime`. The new value is given by the `value` parameter.

`AudioParam.linearRampToValueAtTime()`

Schedules a gradual linear change in the value of the `AudioParam`. The change starts at the time specified for the *previous* event, follows a linear ramp to the new value given in the `value` parameter, and reaches the new value at the time given in the `endTime` parameter.

`AudioParam.exponentialRampToValueAtTime()`

Schedules a gradual exponential change in the value of the `AudioParam`. The change starts at the time specified for the *previous* event, follows an exponential ramp to the new value given in the `value` parameter, and reaches the new value at the time given in the `endTime` parameter.

`AudioParam.setTargetAtTime()`

Schedules the start of a change to the value of the `AudioParam`. The change starts at the time specified in `startTime` and exponentially moves towards the value given by the `target` parameter. The exponential decay rate is defined by the `timeConstant` parameter, which is a time measured in seconds.

`AudioParam.setValueCurveAtTime()`

Schedules the values of the `AudioParam` to follow a set of values, defined by an array of floating-point numbers scaled to fit into the given interval, starting at a given start time and spanning a given duration of time.

`AudioParam.cancelScheduledValues()`

Cancels all scheduled future changes to the `AudioParam`.

`AudioParam.cancelAndHoldAtTime()`

Cancels all scheduled future changes to the `AudioParam` but holds its value at a given time until further changes are made using other methods.

Examples
--------

First, a basic example showing a `GainNode` having its `gain` value set. `gain` is an example of an *a-rate* `AudioParam`, as the value can potentially be set differently for each sample frame of the audio.

```js
const audioCtx = new AudioContext();

const gainNode = audioCtx.createGain();
gainNode.gain.value = 0;
```

Next, an example showing a `DynamicsCompressorNode` having some param values manipulated. These are examples of *k-rate* `AudioParam` types, as the values are set for the entire audio block at once.

```js
const compressor = audioCtx.createDynamicsCompressor();
compressor.threshold.setValueAtTime(-50, audioCtx.currentTime);
compressor.knee.setValueAtTime(40, audioCtx.currentTime);
compressor.ratio.setValueAtTime(12, audioCtx.currentTime);
compressor.attack.setValueAtTime(0, audioCtx.currentTime);
compressor.release.setValueAtTime(0.25, audioCtx.currentTime);
```

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

| Specification |
| --- |
| Web Audio API # AudioParam |

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

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

See also
--------

* Using the Web Audio API


CSSSkewX - Web APIs

CSSSkewX
========

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

CSSTransformComponent

CSSSkewXConstructor
-----------

`CSSSkewX()`

Creates a new `CSSSkewX` object.

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

`ax`

Returns or sets the x-axis value.

Examples
--------

To Do

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

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

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

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


CSSGroupingRule - Web APIs

CSSGroupingRule
===============

The **`CSSGroupingRule`** interface of the CSS Object Model represents any CSS at-rule that contains other rules nested within it.

CSSRule

CSSGroupingRuleInstance properties
-------------------

*This interface also inherits properties from `CSSRule`.*

`CSSGroupingRule.cssRules` Read only

Returns a `CSSRuleList` of the CSS rules in the media rule.

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

*This interface also inherits methods from `CSSRule`.*

`CSSGroupingRule.deleteRule`

Deletes a rule from the style sheet.

`CSSGroupingRule.insertRule`

Inserts a new style rule into the current style sheet.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssgroupingrule-interface |

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

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

See also
--------

* Using dynamic styling information


GPURenderPipeline - Web APIs

GPURenderPipeline
=================

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

The **`GPURenderPipeline`** interface of the WebGPU API represents a pipeline that controls the vertex and fragment shader stages and can be used in a `GPURenderPassEncoder` or `GPURenderBundleEncoder`.

A `GPURenderPipeline` object instance can be created using the `GPUDevice.createRenderPipeline()` or `GPUDevice.createRenderPipelineAsync()` methods.

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

`label`
Experimental

A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

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

`getBindGroupLayout()`
Experimental

Returns the pipeline's `GPUBindGroupLayout` object with the given index (i.e. included in the originating `GPUDevice.createRenderPipeline()` or `GPUDevice.createRenderPipelineAsync()` call's pipeline layout).

Examples
--------

**Note:** The WebGPU samples feature many more examples.

### Basic example

Our basic render demo provides a simple example of the construction of a valid render pipeline descriptor object, which is then used to create a `GPURenderPipeline` via a `createRenderPipeline()` call.

```js
// ...

const vertexBuffers = [
  {
    attributes: [
      {
        shaderLocation: 0, // position
        offset: 0,
        format: "float32x4",
      },
      {
        shaderLocation: 1, // color
        offset: 16,
        format: "float32x4",
      },
    ],
    arrayStride: 32,
    stepMode: "vertex",
  },
];

const pipelineDescriptor = {
  vertex: {
    module: shaderModule,
    entryPoint: "vertex\_main",
    buffers: vertexBuffers,
  },
  fragment: {
    module: shaderModule,
    entryPoint: "fragment\_main",
    targets: [
      {
        format: navigator.gpu.getPreferredCanvasFormat(),
      },
    ],
  },
  primitive: {
    topology: "triangle-list",
  },
  layout: "auto",
};

const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

// ...
```

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

| Specification |
| --- |
| WebGPU # gpurenderpipeline |

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

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

See also
--------

* The WebGPU API


Point - Web APIs

Point
=====

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

**`Point`** is an interface which represents a point in 2-dimensional space. It is non-standard, not broadly compatible, and should not be used.

**Note:** Although it is not directly related to this defunct interface, you are probably looking for `DOMPoint`.

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

`x`
Deprecated

Non-standard

A floating-point value specifying the point's position with respect to the X (horizontal) axis.

`y`
Deprecated

Non-standard

A floating-point value specifying the point's position with respect to the Y (vertical) axis.

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

This class was specified in the defunct 20 March 2009 Working Draft of CSS 2D Transforms Module Level 3. It is not present in any current specification.

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

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

See also
--------

* `Window.webkitConvertPointFromNodeToPage()`
* `Window.webkitConvertPointFromPageToNode()`
* `WebKitPoint` documentation at the IE Dev Center
Deprecated

Non-standard


StyleSheet - Web APIs

StyleSheet
==========

An object implementing the `StyleSheet` interface represents a single style sheet. CSS style sheets will further implement the more specialized `CSSStyleSheet` interface.

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

`StyleSheet.disabled`

A boolean value representing whether the current stylesheet has been applied or not.

`StyleSheet.href` Read only

Returns a string representing the location of the stylesheet.

`StyleSheet.media` Read only

Returns a `MediaList` representing the intended destination medium for style information.

`StyleSheet.ownerNode` Read only

Returns a `Node` associating this style sheet with the current document.

`StyleSheet.parentStyleSheet` Read only

Returns a `StyleSheet` including this one, if any; returns `null` if there aren't any.

`StyleSheet.title` Read only

Returns a string representing the advisory title of the current style sheet.

`StyleSheet.type` Read only

Returns a string representing the style sheet language for this style sheet.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-stylesheet-interface |

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

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

See also
--------

* `CSSStyleSheet`


HTMLMenuItemElement - Web APIs

HTMLMenuItemElement
===================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`HTMLMenuItemElement`** interface provides special properties (beyond those defined on the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating `<menuitem>` elements.

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

This feature is not part of any current specification. It is no longer on track to become a standard.

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

No longer supported in any browser. Firefox, the only browser that supported this element, removed support in 85.

See also
--------

* `HTMLMenuElement`


NavigationCurrentEntryChangeEvent - Web APIs

NavigationCurrentEntryChangeEvent
=================================

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

The **`NavigationCurrentEntryChangeEvent`** interface of the Navigation API is the event object for the `currententrychange` event, which fires when the `Navigation.currentEntry` has changed.

This event will fire for same-document navigations (e.g. `back()` or `traverseTo()`), replacements (i.e. a `navigate()` call with `history` set to `replace`), or other calls that change the entry's state (e.g. `updateCurrentEntry()`, or the History API's `History.replaceState()`).

This event fires after the navigation is committed, meaning that the visible URL has changed and the `NavigationHistoryEntry` update has occurred. It is useful for migrating from usage of older API features like the `hashchange` or `popstate` events.

Event

NavigationCurrentEntryChangeEventConstructor
-----------

`NavigationCurrentEntryChangeEvent()`
Experimental

Creates a new `NavigationCurrentEntryChangeEvent` object instance.

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

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

`from` Read only
Experimental

Returns the `NavigationHistoryEntry` that was navigated from.

`navigationType` Read only
Experimental

Returns the type of the navigation that resulted in the change.

Examples
--------

Navigation data reporting:

```js
navigation.addEventListener("currententrychange", () => {
  const data = navigation.currentEntry.getState();
  submitAnalyticsData(data.analytics);
});
```

Setting up a per-entry event:

```js
navigation.addEventListener("currententrychange", () => {
  navigation.currentEntry.addEventListener("dispose", genericDisposeHandler);
});
```

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

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

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo


CSSPseudoElement - Web APIs

CSSPseudoElement
================

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

The **`CSSPseudoElement`** interface represents a pseudo-element that may be the target of an event or animated using the Web Animations API. Instances of this interface may be obtained by calling `Element.pseudo()`.

EventTarget

CSSPseudoElementInstance properties
-------------------

`CSSPseudoElement.element`
Experimental
 Read only

Returns the originating/parent `Element` of the pseudo-element.

`CSSPseudoElement.type`
Experimental
 Read only

Returns the pseudo-element selector as a string.

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

*`CSSPseudoElement` extends `EventTarget`, so it inherits the following methods:*

Examples
--------

### Basic example using Element.pseudo

Using pseudo-elements, most modern browsers will automatically add quotation marks around text inside a `<q>` element. (A style rule may be needed to add quotation marks in older browsers.) The example below demonstrates the basic properties of the `CSSPseudoElement` object representing the opening quotation mark.

```js
const element = document.querySelector("q");
const cssPseudoElement = element.pseudo("::before");
console.log(cssPseudoElement.element); // Outputs [object HTMLQuoteElement]
console.log(cssPseudoElement.type); // Outputs '::before'
```

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # CSSPseudoElement-interface |

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

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

See also
--------

* `Element.pseudo()`
* Web Animations API
* `Element.animate()`


GamepadPose - Web APIs

GamepadPose
===========

**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 **`GamepadPose`** interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information).

This interface is accessible through the `Gamepad.pose` property.

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

`GamepadPose.hasOrientation` Read only
Experimental

Returns a boolean indicating whether the gamepad is capable of returning orientation information (`true`) or not (`false`).

`GamepadPose.hasPosition` Read only
Experimental

Returns a boolean indicating whether the gamepad is capable of returning position information (`true`) or not (`false`).

`GamepadPose.position` Read only
Experimental

Returns the position of the `Gamepad` as a 3D vector.

`GamepadPose.linearVelocity` Read only
Experimental

Returns the linear velocity of the `Gamepad`, in meters per second.

`GamepadPose.linearAcceleration` Read only
Experimental

Returns the linear acceleration of the `Gamepad`, in meters per second per second.

`GamepadPose.orientation` Read only
Experimental

Returns the orientation of the `Gamepad`, as a quarternion value.

`GamepadPose.angularVelocity` Read only
Experimental

Returns the angular velocity of the `Gamepad`, in radians per second.

`GamepadPose.angularAcceleration` Read only
Experimental

Returns the angular acceleration of the `Gamepad`, in meters per second per second.

Examples
--------

TBD.

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

| Specification |
| --- |
| Gamepad Extensions # gamepadpose-interface |

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

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

See also
--------

* WebVR API
* Gamepad API


XRInputSource - Web APIs

XRInputSource
=============

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

The WebXR Device API's **`XRInputSource`** interface describes a single source of control input which is part of the user's WebXR-compatible virtual or augmented reality system. The device is specific to the platform being used, but provides the direction in which it is being aimed and optionally may generate events if the user triggers performs actions using the device.

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

`gamepad` Read only

A `Gamepad` object describing the state of the buttons and axes on the XR input source, if it is a gamepad or comparable device. If the device isn't a gamepad-like device, this property's value is `null`.

`gripSpace` Read only

An `XRSpace` whose origin tracks the pose which is used to render objects which should appear as if they're held in the hand indicated by `handedness`. The orientation of this space indicates the angle at which the hand is gripping the object. Read on in the main article on `gripSpace` for more details on how to use this space.

`hand` Read only

An `XRHand` object providing access to the underlying hand-tracking device.

`handedness` Read only

A string that indicates which hand the device represented by this `XRInputSource` is being used in, if any. The value will be `left`, `right`, or `none`.

`profiles` Read only

An array of strings, each specifying the name of an input profile describing the preferred visual representation and behavior of this input source.

`targetRayMode` Read only

A string indicating the methodology used to produce the target ray: `gaze`, `tracked-pointer`, or `screen`.

`targetRaySpace` Read only

An `XRSpace` object defining the origin of the target ray and the direction in which it extends. This space is established using the method defined by `targetRayMode`.

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

*The `XRInputSource` interface defines no methods.*

Usage notes
-----------

### Actions and the target ray

If the device provides an indication of the direction in which it is pointed, this is done using a **target ray**. This is a ray extending from the position of the device outward in the direction in which it is pointed.

**A target ray emitted by a hand controller.**

![A screenshot showing a target ray being emitted by a hand controller](/en-US/docs/Web/API/XRInputSource/example-target-ray.gif)

If the device includes a trigger or other squeezable input, such as a hand gesture device that recognizes when the user squeezes their fist, that action is called a **primary squeeze action**. A primary squeeze action should correspond to a gripping act in reality, such as taking hold of an object or pressing a trigger on a tool or weapon. When a squeeze action begins, such as by the user pressing the trigger or tightening their grip, a `squeezestart` event is sent to the `XRSession`. Once the action is completed and the user has released the trigger or the grip, a `squeeze` event is sent. This is followed by a `squeezeend`, which is also sent if the action is aborted rather than completed.

If the device has a button or other pressable input control, it is a **primary input source**, and this button is a **primary action**. A primary action may occur when the user presses a button, clicks on a touchpad or the top button of a thumb stick, or uses a hand gesture or spoken command that invokes the button-like action. When a primary action begins, a `selectstart` event is sent to the `XRSession`. When the action has completed (such as when the user releases the button), a `select` event is sent. Finally, once that is done—or if the user aborts the action—a `selectend` event is sent to the session object.

An action may be aborted either by the user in some device-specific fashion or if the input device is disconnected before the action is completed.

### Local coordinate system

Each input source has its own local coordinate system, which is described by the `gripSpace` property, which is an `XRSpace` used to map the input's coordinate system into the world coordinate system. The grip space's coordinate system can then be used to render objects so they appear to be held in the user's hand.

![A diagram showing the coordinate system defined by the gripSpace property](/en-US/docs/Web/API/XRInputSource/xr-hand-axes.svg)

For more details on the input source's coordinate system, see the article that covers the `gripSpace` property in detail.

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

| Specification |
| --- |
| WebXR Device API # xrinputsource-interface |

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

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

See also
--------

* WebXR Device API
* Inputs and input sources
* `XRInputSourceArray`
* `XRSpace`


CredentialsContainer - Web APIs

CredentialsContainer
====================

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

The **`CredentialsContainer`** interface of the Credential Management API exposes methods to request credentials and notify the user agent when events such as successful sign in or sign out happen. This interface is accessible from `Navigator.credentials`.

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

None.

### Event handlers

None.

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

`CredentialsContainer.create()`

Returns a `Promise` that resolves with a new `Credential` instance based on the provided options, or `null` if no `Credential` object can be created. In exceptional circumstances, the `Promise` may reject.

`CredentialsContainer.get()`

Returns a `Promise` that resolves with the `Credential` instance that matches the provided parameters.

`CredentialsContainer.preventSilentAccess()`

Sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty `Promise`. For example, you might call this, after a user signs out of a website to ensure that they aren't automatically signed in on the next site visit. Earlier versions of the spec called this method `requireUserMediation()`. See Browser compatibility for support details.

`CredentialsContainer.store()`

Stores a set of credentials for a user, inside a provided `Credential` instance and returns that instance in a `Promise`.

Examples
--------

```js
// TBD
```

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

| Specification |
| --- |
| Credential Management Level 1 # credentialscontainer |

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

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


USBInterface - Web APIs

USBInterface
============

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 `USBInterface` interface of the WebUSB API provides information about an interface provided by the USB device. An interface represents a feature of the device which implements a particular protocol and may contain endpoints for bidirectional communication.

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

`USBInterface()`
Experimental

Creates a new `USBInterface` object which will be populated with information about the interface on the provided `USBConfiguration` with the given interface number.

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

`USBInterface.interfaceNumber` Read only
Experimental

Returns the interface number of this interface. This is equal to the `bInterfaceNumber` field of the interface descriptor defining this interface.

`USBInterface.alternate` Read only
Experimental

Returns the currently selected alternative configuration of this interface. By default this is the `USBAlternateInterface` from `alternates` with `alternateSetting` equal to `0`. It can be changed by calling `USBDevice.selectAlternateInterface()` with any other value found in `alternates`.

`USBInterface.alternates` Read only
Experimental

Returns an array containing instances of the `USBAlternateInterface` interface describing each of the alternative configurations possible for this interface.

`USBInterface.claimed` Read only
Experimental

Returns whether or not this interface has been claimed by the current page by calling `USBDevice.claimInterface()`.

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

| Specification |
| --- |
| WebUSB API # usbinterface |

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

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


OfflineAudioContext - Web APIs

OfflineAudioContext
===================

The `OfflineAudioContext` interface is an `AudioContext` interface representing an audio-processing graph built from linked together `AudioNode`s. In contrast with a standard `AudioContext`, an `OfflineAudioContext` doesn't render the audio to the device hardware; instead, it generates it, as fast as it can, and outputs the result to an `AudioBuffer`.

EventTarget

BaseAudioContext

OfflineAudioContextConstructor
-----------

`OfflineAudioContext()`

Creates a new `OfflineAudioContext` instance.

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

*Also inherits properties from its parent interface, `BaseAudioContext`.*

`OfflineAudioContext.length` Read only

An integer representing the size of the buffer in sample-frames.

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

*Also inherits methods from its parent interface, `BaseAudioContext`.*

`OfflineAudioContext.suspend()`

Schedules a suspension of the time progression in the audio context at the specified time and returns a promise.

`OfflineAudioContext.startRendering()`

Starts rendering the audio, taking into account the current connections and the current scheduled changes. This page covers both the event-based version and the promise-based version.

### Deprecated methods

`OfflineAudioContext.resume()`

Resumes the progression of time in an audio context that has previously been suspended.

**Note:** The `resume()` method is still available — it is now defined on the `BaseAudioContext` interface (see `AudioContext.resume`) and thus can be accessed by both the `AudioContext` and `OfflineAudioContext` interfaces.

Events
------

Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface:

`complete`

Fired when the rendering of an offline audio context is complete.

Examples
--------

### Playing audio with an offline audio context

In this example, we declare both an `AudioContext` and an `OfflineAudioContext` object. We use the `AudioContext` to load an audio track `fetch()`, then the `OfflineAudioContext` to render the audio into an `AudioBufferSourceNode` and play the track through. After the offline audio graph is set up, we render it to an `AudioBuffer` using `OfflineAudioContext.startRendering()`.

When the `startRendering()` promise resolves, rendering has completed and the output `AudioBuffer` is returned out of the promise.

At this point we create another audio context, create an `AudioBufferSourceNode` inside it, and set its buffer to be equal to the promise `AudioBuffer`. This is then played as part of a simple standard audio graph.

**Note:** You can run the full example live, or view the source.

```js
// Define both online and offline audio contexts
let audioCtx; // Must be initialized after a user interaction
const offlineCtx = new OfflineAudioContext(2, 44100 \* 40, 44100);

// Define constants for dom nodes
const play = document.querySelector("#play");

function getData() {
  // Fetch an audio track, decode it and stick it in a buffer.
  // Then we put the buffer into the source and can play it.
  fetch("viper.ogg")
    .then((response) => response.arrayBuffer())
    .then((downloadedBuffer) => audioCtx.decodeAudioData(downloadedBuffer))
    .then((decodedBuffer) => {
      console.log("File downloaded successfully.");
      const source = new AudioBufferSourceNode(offlineCtx, {
        buffer: decodedBuffer,
      });
      source.connect(offlineCtx.destination);
      return source.start();
    })
    .then(() => offlineCtx.startRendering())
    .then((renderedBuffer) => {
      console.log("Rendering completed successfully.");
      play.disabled = false;
      const song = new AudioBufferSourceNode(audioCtx, {
        buffer: renderedBuffer,
      });
      song.connect(audioCtx.destination);

      // Start the song
      song.start();
    })
    .catch((err) => {
      console.error(`Error encountered: ${err}`);
    });
}

// Activate the play button
play.onclick = () => {
  play.disabled = true;
  // We can initialize the context as the user clicked.
  audioCtx = new AudioContext();

  // Fetch the data and start the song
  getData();
};
```

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

| Specification |
| --- |
| Web Audio API # OfflineAudioContext |

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

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

See also
--------

* Using the Web Audio API


CSSContainerRule - Web APIs

CSSContainerRule
================

The **`CSSContainerRule`** interface represents a single CSS `@container` rule.

 An object of this type can be used to get the query conditions for the `@container`, along with the container name if one is defined.
 Note that the container name and query together define the "condition text", which can be obtained using `CSSConditionRule.conditionText`.

CSSRule

CSSGroupingRule

CSSConditionRule

CSSContainerRuleInstance properties
-------------------

*Inherits properties from its ancestors `CSSConditionRule`, `CSSGroupingRule`, and `CSSRule`.*

`CSSContainerRule.containerName` Read only

Returns a string representing the name of an `@container`, or an empty string.

`CSSContainerRule.containerQuery` Read only

Returns a string representing the set of features or "container conditions" that are evaluated to determine if the styles in the associated `@container` are applied.

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

*No specific methods; inherits methods from its ancestors `CSSConditionRule`, `CSSGroupingRule`, and `CSSRule`.*

Examples
--------

### Unnamed container rule

 The example below defines an unnamed `@container` rule, and displays the properties of the associated `CSSContainerRule`.
 The CSS is the same as in the `@container` example Setting styles based on a container's size.

The first part of the code simply creates a list for logging the container rule properties, along with a JavaScript `log()` method to simplify adding the properties.

```html
<div id="log">
  <h2>Log</h2>
  <ul></ul>
  <hr />
</div>
```

```js
// Store reference to log list
const logList = document.querySelector("#log ul");
// Function to log data from underlying source
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}
```

Then we define the HTML for a `card` (`<div>`) contained within a `post`.

```html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>
```

 The CSS for the example is shown below.
 As described in the corresponding `@container` example, the CSS for the container element specifies the type of the container.
 The `@container` then applies a new width, font-size and background color to the card if the width is less than 650px.

```html
<style id="examplestyles">
 /\* A container context based on inline size \*/
 .post {
 container-type: inline-size;
 }

 /\* Apply styles if the container is narrower than 650px \*/
 @container (width < 650px) {
 .card {
 width: 50%;
 background-color: gray;
 font-size: 1em;
 }
 }
</style>
```

 The code below gets the `HTMLStyleElement` associated with the example using its id, and then uses its `sheet` property to get the `StyleSheet`.
 From the `StyleSheet` we get the set of `cssRules` added to the sheet.
 Since we added the `@container` as the second rule above, we can access the associated `CSSContainerRule` using the second entry, with index "1", in the `cssRules`.
 Last of all, we log the `containerName`, `containerQuery` and `conditionText` (inherited) properties.

```js
const exampleStylesheet = document.getElementById("examplestyles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
```

**Note:** The styles for this example are defined in an inline HTML `style` element with an id in order to make it easy for the code to find the correct sheet.
 You might also locate the correct sheets for each example from the document by indexing against the length (e.g. `document.styleSheets[document.styleSheets.length-1]` but that makes working out correct sheet for each example more complicated).

 The example output is shown below.
 The log section lists the `containerName`, which is an empty string as no name has been defined.
 The `containerQuery` and `conditionText` strings are also logged, and have the same value because there is no name defined.
 The card should change background and as the width of the page transitions through 650px.

### Named container rule

 The example below defines a named `@container` rule, and displays the properties of the associated `CSSContainerRule`.
 The CSS is very similar to that in the `@container` example Creating named container contexts.
```

<div id="log">
  <h2>Log</h2>
  <ul></ul>
  <hr />
</div>
```

```
// Store reference to log list
const logList = document.querySelector("#log ul");
// Function to log data from underlying source
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}
```

First we define the HTML for a `card` (`<div>`) contained within a `post` (the example does not show the logging code, as this is the same as in the previous example).

```html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>
```

 As described in `@container`, the CSS for the container element specifies the type of the container, and may also specify a name for the container.
 The card has a default font size, which is overridden for the `@container` named `sidebar` if the minimum width is greater than 700px.

```html
<style id="examplestyles">
 .post {
 container-type: inline-size;
 container-name: sidebar;
 }

 /\* Default heading styles for the card title \*/
 .card h2 {
 font-size: 1em;
 }

 @container sidebar (min-width: 700px) {
 .card {
 font-size: 2em;
 }
 }
</style>
```

 The code for getting the sheet and rules is almost identical to the previous example.
 The only difference is that in this example we have three CSS rules, so to get the associated `CSSContainerRule` we get the third entry in the `cssRules`.

```js
const exampleStylesheet = document.getElementById("examplestyles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
```

 The example output is shown below.
 The log section lists the `containerName` and `containerQuery` strings.
 The `conditionText` is also logged, and shows the combination of these two strings.
 The title in the card section should double in size as the width of the page goes over 700px.

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

| Specification |
| --- |
| CSS Containment Module Level 3 # the-csscontainerrule-interface |

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

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


PictureInPictureWindow - Web APIs

PictureInPictureWindow
======================

The **`PictureInPictureWindow`** interface represents an object able to programmatically obtain the **`width`** and **`height`** and **`resize event`** of the floating video window.

An object with this interface is obtained using the `HTMLVideoElement.requestPictureInPicture()` promise return value.

EventTarget

PictureInPictureWindowInstance properties
-------------------

*The `PictureInPictureWindow` interface doesn't inherit any properties.*

`PictureInPictureWindow.width` Read only

Determines the width of the floating video window.

`PictureInPictureWindow.height` Read only

Determines the height of the floating video window.

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

*The `PictureInPictureWindow` interface doesn't inherit any methods.*

Events
------

*The `PictureInPictureWindow` interface doesn't inherit any events.*

`resize`

Sent to a `PictureInPictureWindow` when the floating video window is resized.

Examples
--------

Given a `<button>` and a `<video>`, clicking the button will make the video enter the picture-in-picture mode; we then attach an event to print the floating video window dimensions to the console.

```js
const button = document.querySelector("button");
const video = document.querySelector("video");

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(
    `The floating window dimensions are: ${pipWindow.width}x${pipWindow.height}px`,
  );
  // will print:
  // The floating window dimensions are: 640x360px
}

button.onclick = () => {
  video.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};
```

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

| Specification |
| --- |
| Picture-in-Picture # interface-picture-in-picture-window |

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

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

See also
--------

* `Picture-in-Picture API`


BackgroundFetchUpdateUIEvent - Web APIs

BackgroundFetchUpdateUIEvent
============================

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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`BackgroundFetchUpdateUIEvent`** interface of the Background Fetch API is an event type for the `backgroundfetchsuccess` and `backgroundfetchfail` events, and provides a method for updating the title and icon of the app to inform a user of the success or failure of a background fetch.

Event

ExtendableEvent

BackgroundFetchEvent

BackgroundFetchUpdateUIEventConstructor
-----------

`BackgroundFetchUpdateUIEvent()`
Experimental

Creates a new `BackgroundFetchUIEvent` object. This constructor is not typically used, as the browser creates these objects itself for the `backgroundfetchsuccess` and `backgroundfetchfail` events.

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

*This interface doesn't implement any specific properties, but inherits properties from `Event`, and `BackgroundFetchEvent`.*

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

`BackgroundFetchUpdateUIEvent.updateUI()`
Experimental

Updates the title and icon in the user interface to show the status of a background fetch. Resolves with a `Promise`.

Examples
--------

In this example, the `backgroundfetchsuccess` event is listened for, indicating that a fetch has completed successfully. The `updateUI()` method is then called, with a message to let the user know the episode they downloaded is ready.

```js
addEventListener("backgroundfetchsuccess", (event) => {
  const bgFetch = event.registration;

  event.waitUntil(
    (async () => {
      // Create/open a cache.
      const cache = await caches.open("downloads");
      // Get all the records.
      const records = await bgFetch.matchAll();
      // Copy each request/response across.
      const promises = records.map(async (record) => {
        const response = await record.responseReady;
        await cache.put(record.request, response);
      });

      // Wait for the copying to complete.
      await Promise.all(promises);

      // Update the progress notification.
      event.updateUI({ title: "Episode 5 ready to listen!" });
    })(),
  );
});
```

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

| Specification |
| --- |
| Background Fetch # background-fetch-update-ui-event |

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

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


RTCDataChannelEvent - Web APIs

RTCDataChannelEvent
===================

 The **`RTCDataChannelEvent`** interface
 represents an event related to a specific `RTCDataChannel`.

Event

RTCDataChannelEventConstructor
-----------

`RTCDataChannelEvent()`

Creates a new `RTCDataChannelEvent`.

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

*Also inherits properties from `Event`.*

`channel` Read only

Returns the `RTCDataChannel` associated with the event.

Examples
--------

In this example, the `datachannel` event handler is set up to save the data channel reference and set up handlers for the events which need to be monitored. The `channel` property provides the `RTCDataChannel` representing the connection to the other peer.

```js
pc.ondatachannel = (event) => {
  inboundDataChannel = event.channel;
  inboundDataChannel.onmessage = handleIncomingMessage;
  inboundDataChannel.onopen = handleChannelOpen;
  inboundDataChannel.onclose = handleChannelClose;
};
```

See A simple RTCDataChannel sample for another, more complete, example of how to use data channels.

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcdatachannelevent |

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

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

See also
--------

* WebRTC
* `RTCDataChannel`
* A simple RTCDataChannel sample
* `RTCPeerConnection` (the target interface for `datachannel` events)


GravitySensor - Web APIs

GravitySensor
=============

The **`GravitySensor`** interface of the Sensor APIs provides on each reading the gravity applied to the device along all three axes.

To use this sensor, the user must grant permission to the `'accelerometer'` device sensor through the Permissions API. In addition, this feature may be blocked by a Permissions Policy set on your server.

EventTarget

Sensor

Accelerometer

GravitySensorConstructor
-----------

`GravitySensor()`

Creates a new `GravitySensor` object.

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

*Inherits properties from its ancestors, `Accelerometer`, `Sensor`, and `EventTarget`.*

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

*`GravitySensor` doesn't have own methods. However, it inherits methods from its parent interfaces, `Sensor` and `EventTarget`.*

Events
------

*`GravitySensor` doesn't have own events. However, it inherits events from its parent interface, `Sensor`.*

Example
-------

Gravity is typically read in the `reading` event callback. In the example below this occurs sixty times a second.

```js
let gravitySensor = new GravitySensor({ frequency: 60 });

gravitySensor.addEventListener("reading", (e) => {
  console.log(`Gravity along the X-axis ${gravitySensor.x}`);
  console.log(`Gravity along the Y-axis ${gravitySensor.y}`);
  console.log(`Gravity along the Z-axis ${gravitySensor.z}`);
});

gravitySensor.start();
```

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

| Specification |
| --- |
| Accelerometer # gravitysensor-interface |

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

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


MediaStreamTrackProcessor - Web APIs

MediaStreamTrackProcessor
=========================

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

The **`MediaStreamTrackProcessor`** interface of the `Insertable Streams for MediaStreamTrack API` consumes a `MediaStreamTrack` object's source and generates a stream of media frames.

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

`MediaStreamTrackProcessor()`
Experimental

Creates a new `MediaStreamTrackProcessor` object.

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

`MediaStreamTrackProcessor.readable`
Experimental

Returns a `ReadableStream`.

Examples
--------

The following example is from the article Insertable streams for MediaStreamTrack, and demonstrates a barcode scanner application, which transforms the stream accessed via `MediaStreamTrackProcessor.readable` by highlighting the barcode.

```js
const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: "video" });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

trackProcessor.readable
  .pipeThrough(transformer)
  .pipeTo(trackGenerator.writable);
```

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

| Specification |
| --- |
| MediaStreamTrack Insertable Media Processing using Streams # track-processor-interface |

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

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


Geolocation - Web APIs

Geolocation
===========

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

The **`Geolocation`** interface represents an object able to obtain the position of the device programmatically. It gives Web content access to the location of the device. This allows a website or app to offer customized results based on the user's location.

An object with this interface is obtained using the `navigator.geolocation` property implemented by the `Navigator` object.

**Note:** For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.

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

*The `Geolocation` interface neither implements, nor inherits any property.*

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

*The `Geolocation` interface doesn't inherit any method.*

`Geolocation.getCurrentPosition()`

Determines the device's current location and gives back a `GeolocationPosition` object with the data.

`Geolocation.watchPosition()`

Returns a `long` value representing the newly established callback function to be invoked whenever the device location changes.

`Geolocation.clearWatch()`

Removes the particular handler previously installed using `watchPosition()`.

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

| Specification |
| --- |
| Geolocation API # geolocation\_interface |

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

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

See also
--------

* Using geolocation


SVGGlyphElement - Web APIs

SVGGlyphElement
===============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`SVGGlyphElement`** interface corresponds to the `<glyph>` element.

Object-oriented access to the attributes of the `<glyph>` element via the SVG DOM is not possible.

**Warning:** This interface was removed in the SVG 2 specification.

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

*This interface doesn't implement any specific properties, but inherits properties from its parent interface, `SVGElement`.*

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

*This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.*

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # InterfaceSVGGlyphElement |

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

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

See also
--------

* `<glyph>`


Blob - Web APIs

Blob
====

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

The **`Blob`** object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a `ReadableStream` so its methods can be used for processing the data.

Blobs can represent data that isn't necessarily in a JavaScript-native format. The `File` interface is based on `Blob`, inheriting blob functionality and expanding it to support files on the user's system.

Using blobs
-----------

To construct a `Blob` from other non-blob objects and data, use the `Blob()` constructor. To create a blob that contains a subset of another blob's data, use the `slice()` method. To obtain a `Blob` object for a file on the user's file system, see the `File` documentation.

The APIs accepting `Blob` objects are also listed in the `File` documentation.

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

`Blob()`

Returns a newly created `Blob` object which contains a concatenation of all of the data in the array passed into the constructor.

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

`Blob.size` Read only

The size, in bytes, of the data contained in the `Blob` object.

`Blob.type` Read only

A string indicating the MIME type of the data contained in the `Blob`. If the type is unknown, this string is empty.

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

`Blob.arrayBuffer()`

Returns a promise that resolves with an `ArrayBuffer` containing the entire contents of the `Blob` as binary data.

`Blob.slice()`

Returns a new `Blob` object containing the data in the specified range of bytes of the blob on which it's called.

`Blob.stream()`

Returns a `ReadableStream` that can be used to read the contents of the `Blob`.

`Blob.text()`

Returns a promise that resolves with a string containing the entire contents of the `Blob` interpreted as UTF-8 text.

Examples
--------

### Creating a blob

The `Blob()` constructor can create blobs from other objects. For example, to construct a blob from a JSON string:

```js
const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});
```

### Creating a URL representing the contents of a typed array

The following code creates a JavaScript typed array and creates a new `Blob` containing the typed array's data. It then calls `URL.createObjectURL()` to convert the blob into a URL.

#### HTML

```html
<p>
  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.
</p>
```

#### JavaScript

The main piece of this code for example purposes is the `typedArrayToURL()` function, which creates a `Blob` from the given typed array and returns an object URL for it. Having converted the data into an object URL, it can be used in a number of ways, including as the value of the `<img>` element's `src` attribute (assuming the data contains an image, of course).

```js
function showViewLiveResultButton() {
  if (window.self !== window.top) {
    // Ensure that if our document is in a frame, we get the user
    // to first open it in its own tab or window. Otherwise, this
    // example won't work.
    const p = document.querySelector("p");
    p.textContent = "";
    const button = document.createElement("button");
    button.textContent = "View live result of the example code above";
    p.append(button);
    button.addEventListener("click", () => window.open(location.href));
    return true;
  }
  return false;
}

if (!showViewLiveResultButton()) {
  function typedArrayToURL(typedArray, mimeType) {
    return URL.createObjectURL(
      new Blob([typedArray.buffer], { type: mimeType }),
    );
  }
  const bytes = new Uint8Array(59);

  for (let i = 0; i < 59; i++) {
    bytes[i] = 32 + i;
  }

  const url = typedArrayToURL(bytes, "text/plain");

  const link = document.createElement("a");
  link.href = url;
  link.innerText = "Open the array URL";

  document.body.appendChild(link);
}
```

#### Result

### Extracting data from a blob

One way to read content from a `Blob` is to use a `FileReader`. The following code reads the content of a `Blob` as a typed array:

```js
const reader = new FileReader();
reader.addEventListener("loadend", () => {
  // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);
```

Another way to read content from a `Blob` is to use a `Response`. The following code reads the content of a `Blob` as text:

```js
const text = await new Response(blob).text();
```

Or by using `Blob.text()`:

```js
const text = await blob.text();
```

By using other methods of `FileReader`, it is possible to read the contents of a Blob as a string or a data URL.

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

| Specification |
| --- |
| File API # blob-section |

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

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

See also
--------

* `FileReader`
* `File`
* `URL.createObjectURL()`
* Using files from web applications


URLPattern - Web APIs

URLPattern
==========

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

The **`URLPattern`** interface of the URL Pattern API matches URLs or parts of URLs against a pattern. The pattern can contain capturing groups that extract parts of the matched URL.

 More information about the syntax of patterns can be found on the API overview
 page: URL Pattern API.

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

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

`URLPattern()`
Experimental

Returns a new `URLPattern` object based on the given pattern and base URL.

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

`hash` Read only
Experimental

 A string containing a pattern to match the *hash* part
 of a URL.

`hostname` Read only
Experimental

 A string containing a pattern to match the *hostname*
 part of a URL.

`password` Read only
Experimental

 A string containing a pattern to match the *password*
 part of a URL.

`pathname` Read only
Experimental

 A string containing a pattern to match the *pathname*
 part of a URL.

`port` Read only
Experimental

 A string containing a pattern to match the *port* part
 of a URL.

`protocol` Read only
Experimental

 A string containing a pattern to match the *protocol*
 part of a URL.

`search` Read only
Experimental

 A string containing a pattern to match the *search* part
 of a URL.

`username` Read only
Experimental

 A string containing a pattern to match the *username*
 part of a URL.

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

`exec()`
Experimental

 Returns an object with the matched parts of the URL or `null` if the URL
 does not match.

`test()`
Experimental

Returns `true` if the URL matches the given pattern, `false` otherwise.

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

| Specification |
| --- |
| URL Pattern Standard # urlpattern |

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

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

See also
--------

* A polyfill of `URLPattern` is available
 on GitHub
* The pattern syntax used by URLPattern is similar to the syntax used by
 path-to-regexp


SVGNumber - Web APIs

SVGNumber
=========

The **`SVGNumber`** interface corresponds to the `<number>` basic data type.

An `SVGNumber` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.

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

`SVGNumber.value`

A float representing the number.

Note: If the `SVGNumber` is read-only, a `DOMException` with the code NO\_MODIFICATION\_ALLOWED\_ERR is raised on an attempt to change the value.

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

*This interface doesn't provide any specific methods.*

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGNumber |

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

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