recursal/MDN huggingface dataset:
GPUValidationError
==================

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

The **`GPUValidationError`** interface of the WebGPU API describes an application error indicating that an operation did not pass the WebGPU API's validation constraints.

It represents one of the types of errors surfaced by `GPUDevice.popErrorScope` and the `uncapturederror` event.

Validation errors occur whenever invalid inputs are given to a WebGPU call. These are consistent, predictable, and should not occur provided your app is well-formed. They will occur in the same way on every device your code runs on, so once you've fixed any errors that show up during development you probably don't need to observe them directly most of the time. An exception to that rule is if you're consuming user-supplied assets, shaders, etc., in which case watching for validation errors while loading could be helpful.

**Note:** We have attempted to provide useful information to help you understand why validation errors are occurring in your WebGPU code in "Validation" sections where appropriate, which list criteria to meet to avoid validation errors. See for example the `GPUDevice.createBindGroup()` Validation section.

GPUError

GPUValidationErrorConstructor
-----------

`GPUValidationError()` 
Experimental

Creates a new `GPUValidationError` object instance.

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

The `message` property is inherited from its parent, `GPUError`:

`message` 
Experimental
 Read only 

A string providing a human-readable message that explains why the error occurred.

Examples
--------

The following example uses an error scope to capture a suspected validation error, logging it to the console.


```js
device.pushErrorScope("validation");

let sampler = device.createSampler({
  maxAnisotropy: 0, // Invalid, maxAnisotropy must be at least 1.
});

device.popErrorScope().then((error) => {
  if (error) {
    // error is a GPUValidationError object instance
    sampler = null;
    console.error(`An error occurred while creating sampler: ${error.message}`);
  }
});
```

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

| Specification |
| --- |
| WebGPU # gpuvalidationerror |

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

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

See also
--------

* The WebGPU API
* WebGPU Error Handling best practices
PresentationConnectionCloseEvent
================================

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

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

The **`PresentationConnectionCloseEvent`** interface of the Presentation API is fired on a `PresentationConnection` when it is closed.

Event

PresentationConnectionCloseEventConstructor
-----------

`PresentationConnectionCloseEvent()` 
Experimental

Creates a new PresentationConnectionCloseEvent.

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

`PresentationConnectionCloseEvent.message` Read only  
Experimental

A human-readable message that provides more information about why the connection was closed.

`PresentationConnectionCloseEvent.reason` Read only  
Experimental

Indicates why the connection was closed. This property takes one of the following values: `error`, `closed`, or `wentaway`.

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

| Specification |
| --- |
| Presentation API # interface-presentationconnectioncloseevent |

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

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

The **`BarProp`** interface of the `Document Object Model` represents the web browser user interface elements that are exposed to scripts in web pages. Each of the following interface elements are represented by a `BarProp` object.

`Window.locationbar`

The browser location bar.

`Window.menubar`

The browser menu bar.

`Window.personalbar`

The browser personal bar.

`Window.scrollbars`

The browser scrollbars.

`Window.statusbar`

The browser status bar.

`Window.toolbar`

The browser toolbar.

The `BarProp` interface is not accessed directly, but via one of these elements.

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

`BarProp.visible` Read only 

A `Boolean`, which is true if the bar represented by the used interface element is visible.

Examples
--------

The following example prints a `BarProp` object to the console that represents the location bar.


```js
console.log(window.locationbar);
```

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

| Specification |
| --- |
| HTML Standard # barprop |

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

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

The `ConvolverNode` interface is an `AudioNode` that performs a Linear Convolution on a given `AudioBuffer`, often used to achieve a reverb effect. A `ConvolverNode` always has exactly one input and one output.

**Note:** For more information on the theory behind Linear Convolution, see the Convolution article on Wikipedia.

EventTarget

AudioNode

ConvolverNode

|  |  |
| --- | --- |
| Number of inputs | `1` |
| Number of outputs | `1` |
| Channel count mode | `"clamped-max"` |
| Channel count | `1`, `2`, or `4` |
| Channel interpretation | `"speakers"` |

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

`ConvolverNode()`

Creates a new `ConvolverNode` object instance.

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

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

`ConvolverNode.buffer`

A mono, stereo, or 4-channel *`AudioBuffer`* containing the (possibly multichannel) impulse response used by the `ConvolverNode` to create the reverb effect.

`ConvolverNode.normalize`

A boolean that controls whether the impulse response from the buffer will be scaled by an equal-power normalization when the `buffer` attribute is set, or not.

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

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

ConvolverNode Example
---------------------

The following example shows basic usage of an AudioContext to create a convolver node.

**Note:** You will need to find an impulse response to complete the example below. See this Codepen for an applied example.


```js
let audioCtx = new window.AudioContext();

async function createReverb() {
  let convolver = audioCtx.createConvolver();

  // load impulse response from file
  let response = await fetch("path/to/impulse-response.wav");
  let arraybuffer = await response.arrayBuffer();
  convolver.buffer = await audioCtx.decodeAudioData(arraybuffer);

  return convolver;
}

// …

let reverb = await createReverb();

// someOtherAudioNode -> reverb -> destination
someOtherAudioNode.connect(reverb);
reverb.connect(audioCtx.destination);
```

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

| Specification |
| --- |
| Web Audio API # ConvolverNode |

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

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

See also
--------

* Using the Web Audio API
TextTrackList
=============

The **`TextTrackList`** interface is used to represent a list of the text tracks defined by the `<track>` element, with each track represented by a separate `textTrack` object in the list.

Retrieve an instance of this object with the `textTracks` property of an `HTMLMediaElement` object.

For a given `HTMLMediaElement` object *media*, the individual tracks can be accessed using:

* `media.TextTracks[n]`, to get the n-th text track from the object's list of text tracks
* the `media.textTracks`.`getTrackById()` method

EventTarget

TextTrackListInstance properties
-------------------

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

`length` Read only 

The number of tracks in the list.

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

*This interface also inherits methods from its parent interface, `EventTarget`.*

`getTrackById()`

Returns the `TextTrack` found within the `TextTrackList` whose `id` matches the specified string. If no match is found, `null` is returned.

Events
------

`addtrack`

 Fired when a new text track has been added to the media element.
 Also available via the `onaddtrack` property.


`change`

 Fired when a text track has been made active or inactive.
 Also available via the `onchange` property.


`removetrack`

 Fired when a new text track has been removed from the media element.
 Also available via the `onremovetrack` property.


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

In addition to being able to obtain direct access to the text tracks present on a media element, `TextTrackList` lets you set event handlers on the `addtrack` and `removetrack` events, so that you can detect when tracks are added to or removed from the media element's stream.

Examples
--------

### Getting a video element's text track list

To get a media element's `TextTrackList`, use its `textTracks` property.


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

### Monitoring track count changes

In this example, we have an app that displays information about the number of channels available. To keep it up to date, handlers for the `addtrack` and `removetrack` events are set up.


```js
textTracks.onaddtrack = updateTrackCount;
textTracks.onremovetrack = updateTrackCount;

function updateTrackCount(event) {
  trackCount = textTracks.length;
  drawTrackCountIndicator(trackCount);
}
```

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

| Specification |
| --- |
| HTML Standard # text-track-api |

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

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

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

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

The **`Metadata`** interface contains information about a file system entry. This metadata includes the file's size and modification date and time.

**Note:** This interface isn't available through the global scope; instead, you obtain a `Metadata` object describing a `FileSystemEntry` using the method `FileSystemEntry.getMetadata()`.

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

`modificationTime` Read only  
Experimental

Non-standard

A `Date` object indicating the date and time the entry was modified.

`size` Read only  
Experimental

Non-standard

A 64-bit unsigned integer indicating the size of the entry in bytes.

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

This feature has been removed from all specification and is not in the process of being standardized.

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

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

See also
--------

* File and Directory Entries API
* Introduction to the File and Directory Entries API
* `FileSystemEntry`
* `FileSystemFileEntry` and `FileSystemDirectoryEntry`
CSSTranslate
============

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

CSSTransformComponent

CSSTranslateConstructor
-----------

`CSSTranslate()`

Creates a new `CSSTranslate` object.

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

`x`

Returns or sets the x-axis value.

`y`

Returns or sets the y-axis value.

`z`

Returns or sets the z-axis value.

Examples
--------

To do.

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

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

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

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

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

The **`DeviceMotionEventAcceleration`** interface of the Device Orientation Events provides information about the amount of acceleration the device is experiencing along all three axes.

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

`DeviceMotionEventAcceleration.x` Read only 

The amount of acceleration along the X axis.

`DeviceMotionEventAcceleration.y` Read only 

The amount of acceleration along the Y axis.

`DeviceMotionEventAcceleration.z` Read only 

The amount of acceleration along the Z axis.

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

| Specification |
| --- |
| DeviceOrientation Event Specification # devicemotioneventacceleration |

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

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

The **`XRHand`** interface is pair iterator (an ordered map) with the key being the hand joints and the value being an `XRJointSpace`.

`XRHand` is returned by `XRInputSource.hand`.

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

`size` Read only  
Experimental

Returns `25`, the size of the pair iterator.

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

 The `XRhand` object is a pair iterator. It can directly be used in a `for...of` structure. `for (const joint of myHand)` is equivalent to `for (const joint of myHand.entries())`.
 However, it's not a map-like object, so you don't have the `clear()`, `delete()`, `has()`, and `set()` methods.

`entries()` 
Experimental

 Returns an iterator with the hand joints/`XRJointSpace` pairs for each element.
 See `Map.prototype.entries()` for more details.


`forEach()` 
Experimental

 Runs a provided function once per each hand joint/`XRJointSpace` pair.
 See `Map.prototype.forEach()` for more details.


`get()` 
Experimental

 Returns a `XRJointSpace` for a given hand joint or `undefined` if no such hand joint key is in the map.
 See `Map.prototype.get()` for more details.


`keys()` 
Experimental

 Returns an iterator with all the hand joint keys.
 See `Map.prototype.keys()` for more details.


`values()` 
Experimental

 Returns an iterator with all the `XRJointSpace` values.
 See `Map.prototype.values()` for more details.


Hand joints
-----------

The `XRHand` object contains the following hand joints:

![Hand](/en-US/docs/Web/API/XRHand/hand.svg)


| Hand joint | Index |
| --- | --- |
| wrist | 0 |
| thumb-metacarpal | 1 |
| thumb-phalanx-proximal | 2 |
| thumb-phalanx-distal | 3 |
| thumb-tip | 4 |
| index-finger-metacarpal | 5 |
| index-finger-phalanx-proximal | 6 |
| index-finger-phalanx-intermediate | 7 |
| index-finger-phalanx-distal | 8 |
| index-finger-tip | 9 |
| middle-finger-metacarpal | 10 |
| middle-finger-phalanx-proximal | 11 |
| middle-finger-phalanx-intermediate | 12 |
| middle-finger-phalanx-distal | 13 |
| middle-finger-tip | 14 |
| ring-finger-metacarpal | 15 |
| ring-finger-phalanx-proximal | 16 |
| ring-finger-phalanx-intermediate | 17 |
| ring-finger-phalanx-distal | 18 |
| ring-finger-tip | 19 |
| pinky-finger-metacarpal | 20 |
| pinky-finger-phalanx-proximal | 21 |
| pinky-finger-phalanx-intermediate | 22 |
| pinky-finger-phalanx-distal | 23 |
| pinky-finger-tip | 24 |

Examples
--------

### Using `XRHand` objects


```js
const wristJoint = inputSource.hand.get("wrist");
const indexFingerTipJoint = inputSource.hand.get("index-finger-tip");

for (const [joint, jointSpace] of inputSource.hand) {
  console.log(joint);
  console.log(jointSpace);
}
```

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

| Specification |
| --- |
| WebXR Hand Input Module - Level 1 # xrhand-interface |

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

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

See also
--------

* `XRInputSource.hand`
RTCDTMFSender
=============

The **`RTCDTMFSender`** interface provides a mechanism for transmitting DTMF codes on a WebRTC `RTCPeerConnection`. You gain access to the connection's `RTCDTMFSender` through the `RTCRtpSender.dtmf` property on the audio track you wish to send DTMF with.

The primary purpose for WebRTC's DTMF support is to allow WebRTC-based communication clients to be connected to a public-switched telephone network (PSTN) or other legacy telephone service, including extant voice over IP (VoIP) services. For that reason, DTMF can't be used between two WebRTC-based devices, because there is no mechanism provided by WebRTC for receiving DTMF codes.

EventTarget

RTCDTMFSenderInstance properties
-------------------

`RTCDTMFSender.toneBuffer` Read only 

A string which contains the list of DTMF tones currently in the queue to be transmitted (tones which have already been played are no longer included in the string). See `toneBuffer` for details on the format of the tone buffer.

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

`RTCDTMFSender.insertDTMF()`

Given a string describing a set of DTMF codes and, optionally, the duration of and inter-tone gap between the tones, `insertDTMF()` starts sending the specified tones. Calling `insertDTMF()` replaces any already-pending tones from the `toneBuffer`. You can abort sending queued tones by specifying an empty string (`""`) as the set of tones to play.

Events
------

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

`tonechange`

The `tonechange` event is sent to the `RTCDTMFSender` instance's event handler to indicate that a tone has either started or stopped playing.

Example
-------

See the article Using DTMF with WebRTC for a full example.

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

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

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

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

See also
--------

* WebRTC API
* Using DTMF with WebRTC
* `RTCRtpSender.dtmf`
* `RTCPeerConnection`
* `RTCRtpSender`
HTMLFontElement
===============

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

Implements the document object model (DOM) representation of the font element. The HTML Font Element `<font>` defines the font size, font face and color of text.

EventTarget

Node

Element

HTMLElement

HTMLFontElementInstance properties
-------------------

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

`HTMLFontElement.color` 
Deprecated

A string that reflects the `color` HTML attribute, containing either a named color or a color specified in the hexadecimal #RRGGBB format.

`HTMLFontElement.face` 
Deprecated

A string that reflects the `face` HTML attribute, containing a comma-separated list of one or more font names.

`HTMLFontElement.size` 
Deprecated

A string that reflects the `size` HTML attribute, containing either a font size ranging from 1 to 7 or a number relative to the default value 3, for example -2 or +1.

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

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

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

| Specification |
| --- |
| HTML Standard # htmlfontelement |

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: `<font>`.
Geometry interfaces
===================

**Geometry interfaces** is a CSS module that provides interfaces for working with 3D and 2D graphics — in particular, for working with points, rectangles, quadrilaterals and transformation matrices (for operations that translate/move, scale, rotate, skew/shear/slant, and flip graphics, as well as for multiplying/chaining and inverting/undoing those operations).

As a web developer, you don't always use the geometry interfaces directly, but instead use other features that rely on them behind the scenes: parts of CSS Transforms, the Canvas API, the WebXR Device API, and (more directly) `VideoFrame.visibleRect`, `Element.getClientRects()`, and `Element.getBoundingClientRect()`.

Interfaces
----------

`DOMMatrix`

Represents a transformation matrix, for operations that translate/move, scale, rotate, skew/shear/slant, and flip graphics, as well as for multiplying/chaining and inverting/undoing those operations.

`DOMMatrixReadOnly`

Read-only version of `DOMMatrix`.

`DOMPoint`

Represents a 2D or 3D point in a coordinate system; it includes values for the coordinates in up to three dimensions, as well as an optional perspective value.

`DOMPointReadOnly`

Read-only version of `DOMPoint`.

`DOMQuad`

Represents a collection of four `DOMPoint` objects defining the corners of a quadrilateral.

`DOMRect`

Represents the size and position of a rectangle.

`DOMRectReadOnly`

Read-only version of `DOMRect`.

Examples
--------

The `Path2D.addPath()` and `CanvasPattern.setTransform()` articles have examples that use some of the geometry interfaces.

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

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMMatrix |
| Geometry Interfaces Module Level 1 # DOMPoint |
| Geometry Interfaces Module Level 1 # DOMQuad |
| Geometry Interfaces Module Level 1 # DOMRect |

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

### api.DOMMatrix

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

### api.DOMMatrixReadOnly

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

### api.DOMPoint

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

### api.DOMPointReadOnly

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

### api.DOMQuad

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

### api.DOMRect

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

### api.DOMRectReadOnly

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

See also
--------

* `Path2D.addPath()`
* `CanvasPattern.setTransform()`
* `CanvasRenderingContext2D.getTransform()`
* `CanvasRenderingContext2D.setTransform()`
* `CSSTransformValue.toMatrix()`
* `CSSTransformComponent.toMatrix()`
* `Element.getBoundingClientRect()`
* `Element.getClientRects()`
* `VideoFrame.visibleRect`
* `XRLightEstimate`
* `XRRigidTransform`