recursal/MDN huggingface dataset:
LockManager: query() method
===========================

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

The **`query()`** method of the `LockManager` interface returns a `Promise` that resolves with an object containing information about held and pending locks.

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

Syntax
------


```js
query()
```

### Parameters

None.

### Return value

 A `Promise` that resolves with an object containing a snapshot of the `LockManager` state.
 The object has the following properties:

`held`

An array of `LockInfo` objects for held locks.

`pending`

An array of `LockInfo` objects for pending lock requests.

The `LockInfo` object can have the following properties:

`name`

The name passed to `LockManager.request()` when the lock was requested.

`mode`

The access mode passed to `LockManager.request()` when the lock was requested. The mode is either `"exclusive"` or `"shared"`.

`clientId`

The unique identity of the context where `LockManager.request()` is called. This is the same value as `Client.id`.

### Exceptions

This method may return a promise rejected with a `DOMException` of one of the following types:

`InvalidStateError` `DOMException`

Thrown if the environments document is not fully active.

`SecurityError` `DOMException`

Thrown if a lock manager cannot be obtained for the current environment.

Examples
--------


```js
const state = await navigator.locks.query();
for (const lock of state.held) {
  console.log(`held lock: name ${lock.name}, mode ${lock.mode}`);
}
for (const request of state.pending) {
  console.log(`requested lock: name ${request.name}, mode ${request.mode}`);
}
```

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

| Specification |
| --- |
| Web Locks API # api-lock-manager-query |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SpeechRecognitionResultList: length property
============================================

 The **`length`** read-only property of the
 `SpeechRecognitionResultList` interface returns the length of the
 "array" — the number of `SpeechRecognitionResult` objects in the
 list.

Value
-----

A number.

Examples
--------

 This code is excerpted from our
 Speech color changer example.


```js
recognition.onresult = (event) => {
  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
  // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
  // It has a getter so it can be accessed like an array
  // The first [0] returns the SpeechRecognitionResult at position 0.
  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects
  // that contain individual results.
  // These also have getters so they can be accessed like arrays.
  // The second [0] returns the SpeechRecognitionAlternative at position 0.
  // We then return the transcript property of the SpeechRecognitionAlternative object
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;

  console.log(event.results.length);
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionresultlist-length |

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

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

See also
--------

* Web Speech API
SpeechRecognitionResultList: item() method
==========================================

 The **`item`** getter of the
 `SpeechRecognitionResultList` interface is a standard getter — it allows
 `SpeechRecognitionResult` objects in the list to be accessed via array
 syntax.

Syntax
------


```js
item(index)
```

### Parameters

`index`

Index of the item to retrieve.

### Return value

A `SpeechRecognitionResult` object.

Examples
--------

 This code is excerpted from our
 Speech color changer example.


```js
recognition.onresult = (event) => {
  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
  // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
  // It has a getter so it can be accessed like an array
  // The first [0] returns the SpeechRecognitionResult at position 0.
  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects
  // that contain individual results.
  // These also have getters so they can be accessed like arrays.
  // The second [0] returns the SpeechRecognitionAlternative at position 0.
  // We then return the transcript property of the SpeechRecognitionAlternative object
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionresultlist-item |

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

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

See also
--------

* Web Speech API
CSSScale: z property
====================

 The **`z`** property of the
 `CSSScale` interface representing the z-component of the translating
 vector. A positive value moves the element towards the viewer, and a negative value
 farther away.

 If this value is present then the transform is a 3D transform and the `is2D`
 property will be set to false.

Value
-----

A double integer or a `CSSNumericValue`

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssscale-z |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSScale: x property
====================

 The **`x`** property of the
 `CSSScale` interface gets and sets the abscissa or x-axis of the
 translating vector.

Value
-----

A double integer or a `CSSNumericValue`

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssscale-x |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSScale: y property
====================

 The **`y`** property of the
 `CSSScale` interface gets and sets the ordinate or y-axis of the
 translating vector.

Value
-----

A double integer or a `CSSNumericValue`

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssscale-y |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSScale: CSSScale() constructor
================================

 The **`CSSScale()`** constructor creates a new
 `CSSScale` object representing the scale() and scale3d() values of the
 individual `transform` property in CSS.

Syntax
------


```js
new CSSScale(x, y)
new CSSScale(x, y, z)
```

### Parameters

`x`

 A value for the x-axis of the `CSSScale` object to be constructed. This
 must either be a double integer or a `CSSNumericValue`.


`y`

 A value for the y-axis of the `CSSScale` object to be constructed. This
 must either be a double integer or a `CSSNumericValue`.


`z` Optional

 A value for the z-axis of the `CSSScale` object to be constructed. This
 must either be a double integer or a `CSSNumericValue`. If a value is
 passed for the `z-axis` this is a 3d transform. The value of
 `is2D` will be set to false.


Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssscale-cssscale |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RTCEncodedVideoFrame: timestamp property
========================================

The readonly **`timestamp`** property of the `RTCEncodedVideoFrame` interface indicates the time at which frame sampling started.

Value
-----

A positive integer containing the sampling instant of the first byte in this frame, in microseconds.

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

| Specification |
| --- |
| WebRTC Encoded Transform # dom-rtcencodedvideoframe-timestamp |

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

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

See also
--------

* Using WebRTC Encoded Transforms
RTCEncodedVideoFrame: data property
===================================

The **`data`** property of the `RTCEncodedVideoFrame` interface returns a buffer containing the frame data.

Value
-----

An `ArrayBuffer`.

Examples
--------

This example WebRTC encoded transform shows how you might get the frame data in a `TransformStream` `transform()` function and negate all the bits.

 The `transform()` function constructs a `DataView` on the buffer in the frame `data` property, and also creates a view on a new `ArrayBuffer`.
 It then writes the inverted bytes in the original data to the new buffer, assigns the buffer to the encoded frame `data` property, and enqueues the modified frame on the stream.


```js
addEventListener("rtctransform", (event) => {
  const transform = new TransformStream({
    async transform(encodedFrame, controller) {
      // Reconstruct the original frame.
      const view = new DataView(encodedFrame.data);

      // Construct a new buffer
      const newData = new ArrayBuffer(encodedFrame.data.byteLength);
      const newView = new DataView(newData);

      // Negate all bits in the incoming frame
      for (let i = 0; i < encodedFrame.data.byteLength; ++i) {
        newView.setInt8(i, ~view.getInt8(i));
      }

      encodedFrame.data = newData;
      controller.enqueue(encodedFrame);
    },
  });
  event.transformer.readable
    .pipeThrough(transform)
    .pipeTo(event.transformer.writable);
});
```


Note that the surrounding code shown here is described in Using WebRTC Encoded Transforms.

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

| Specification |
| --- |
| WebRTC Encoded Transform # dom-rtcencodedvideoframe-data |

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

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

See also
--------

* Using WebRTC Encoded Transforms
RTCEncodedVideoFrame: type property
===================================

The readonly **`type`** property of the `RTCEncodedVideoFrame` interface indicates whether this frame is a key frame, delta frame, or empty frame.

Value
-----

The type can have one of the following values:

`key`

 This is a "key frame", which contains all the information needed to render an image.
 It can be decoded without reference to any other frames.


`delta`

 This is a "delta frame", which contains changes to an image relative to some previous frame.
 The frame cannot be decoded without access to the frame(s) that it references.


`empty`

 This frame contains no data.
 This value is unexpected, and may indicate that the transform is holding a reference to frames after they have been transformed and piped to `RTCRtpScriptTransformer.writable` (after transferring back to the main-thread WebRTC pipeline the worker side frame object will have no data).


Examples
--------

The implementation of a `transform()` function in a WebRTC Encoded Transform can look at the `type` and modify the transform code based on whether it is dealing with a key frame or delta frame:


```js
const transformer = new TransformStream({
  transform: async (encodedFrame, controller) => {
    if (encodedFrame.type === "key") {
      // Apply key frame transformation
    } else if (encodedFrame.type === "delta") {
      // Apply delta frame transformation
    } else {
      // Empty
      // Check transform is not holding reference to frames after processing!
    }
    controller.enqueue(encodedFrame);
  },
});
```

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

| Specification |
| --- |
| WebRTC Encoded Transform # dom-rtcencodedvideoframe-type |

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

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

See also
--------

* Using WebRTC Encoded Transforms
Animation: reverse() method
===========================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`Animation.reverse()`** method of the `Animation` Interface reverses the playback direction, meaning the animation ends at its beginning. If called on an unplayed animation, the whole animation is played backwards. If called on a paused animation, the animation will continue in reverse.

Syntax
------


```js
reverse()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

In the Growing/Shrinking Alice Game example, clicking or tapping the bottle causes Alice's growing animation (`aliceChange`) to play backwards, causing her to get smaller. It is done by setting `aliceChange`'s `Animation.playbackRate` to `-1` like so:


```js
const shrinkAlice = () => {
  // play Alice's animation in reverse
  aliceChange.playbackRate = -1;
  aliceChange.play();

  // play the bottle's animation
  drinking.play();
};
```


But it could also have been done by calling `reverse()` on `aliceChange` like so:


```js
const shrinkAlice = () => {
  // play Alice's animation in reverse
  aliceChange.reverse();

  // play the bottle's animation
  drinking.play();
};
```

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

| Specification |
| --- |
| Web Animations # dom-animation-reverse |

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

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

See also
--------

* Web Animations API
* `Animation` for other methods and properties you can use to control web page animation.
* `Animation.pause()` to pause an animation.
* `Animation.play()` to move an animation forward.
Animation: id property
======================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`Animation.id`** property of the Web Animations API returns or sets a string used to identify the animation.

Value
-----

A string which can be used to identify the animation, or `null` if the animation has no `id`.

Examples
--------

In the Follow the White Rabbit example, you can assign the `rabbitDownAnimation` an `id` like so:


```js
rabbitDownAnimation.id = "rabbitGo";
```

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

| Specification |
| --- |
| Web Animations # dom-animation-id |

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

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

See also
--------

* `KeyframeEffect`
* Web Animations API
* `Animation`
Animation: finished property
============================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`Animation.finished`** read-only property of the Web Animations API returns a `Promise` which resolves once the animation has finished playing.

**Note:** Every time the animation leaves the `finished` play state (that is, when it starts playing again), a new `Promise` is created for this property. The new `Promise` will resolve once the new animation sequence has completed.

Value
-----

A `Promise` object which will resolve once the animation has finished running.

Examples
--------

The following code waits until all animations running on the element `elem` have finished, then deletes the element from the DOM tree:


```js
Promise.all(elem.getAnimations().map((animation) => animation.finished)).then(
  () => elem.remove(),
);
```

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

| Specification |
| --- |
| Web Animations # dom-animation-finished |

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

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

See also
--------

* `KeyframeEffect`
* Web Animations API
* `Animation`
Animation: Animation() constructor
==================================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`Animation()`** constructor of the Web Animations API returns a new `Animation` object instance.

Syntax
------


```js
new Animation()
new Animation(effect)
new Animation(effect, timeline)
```

### Parameters

`effect` Optional

The target effect, as an object based on the `AnimationEffect` interface, to assign to the animation. Although in the future other effects such as `SequenceEffect`s or `GroupEffect`s might be possible, the only kind of effect currently available is `KeyframeEffect`. This can be `null` (which is the default) to indicate that there should be no effect applied.

`timeline` Optional

Specifies the `timeline` with which to associate the animation, as an object of a type based on the `AnimationTimeline` interface. Currently the only timeline type available is `DocumentTimeline`, but in the future there may be timelines associated with gestures or scrolling, for example. The default value is `Document.timeline`, but this can be set to `null` as well.

Examples
--------

In the Follow the White Rabbit example, the `Animation()` constructor is used to create an `Animation` for the `rabbitDownKeyframes` using the document's `timeline`:


```js
const rabbitDownAnimation = new Animation(
  rabbitDownKeyframes,
  document.timeline,
);
```

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

| Specification |
| --- |
| Web Animations # dom-animation-animation |

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

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

See also
--------

* Web Animations API
* `Animation`
Animation: cancel() method
==========================

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

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

* Learn more
* See full compatibility
* Report feedback
The Web Animations API's **`cancel()`** method of the `Animation` interface clears all `KeyframeEffect`s caused by this animation and aborts its playback.

**Note:** When an animation is cancelled, its `startTime` and `currentTime` are set to `null`.

Syntax
------


```js
cancel()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

This method doesn't directly throw exceptions; however, if the animation's `playState` is anything but `"idle"` when cancelled, the current finished promise is rejected with a `DOMException` named `AbortError`.

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

| Specification |
| --- |
| Web Animations # dom-animation-cancel |

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

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

See also
--------

* Web Animations API
* `KeyframeEffect`
* `Animation`
* `Animation.playState`
* `Animation.finished` returns the promise this action will reject if the animation's `playState` is not `"idle"`.
Animation: finish() method
==========================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`finish()`** method of the Web Animations API's `Animation` Interface sets the current playback time to the end of the animation corresponding to the current playback direction.

That is, if the animation is playing forward, it sets the playback time to the length of the animation sequence, and if the animation is playing in reverse (having had its `reverse()` method called), it sets the playback time to 0.

Syntax
------


```js
finish()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

`InvalidState`

The player's playback rate is 0 or the animation's playback rate is greater than 0 and the end time of the animation is infinity.

Examples
--------

The following example shows how to use the `finish()` method and catch an `InvalidState` error.


```js
interfaceElement.addEventListener("mousedown", () => {
  try {
    player.finish();
  } catch (e) {
    if (e instanceof InvalidState) {
      console.log("finish() called on paused or finished animation.");
    } else {
      logMyErrors(e); //pass exception object to error handler
    }
  }
});
```


The following example finishes all the animations on a single element, regardless of their direction of playback.


```js
elem.getAnimations().forEach((animation) => animation.finish());
```

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

| Specification |
| --- |
| Web Animations # dom-animation-finish |

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

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

See also
--------

* Web Animations API
* `Animation` for other methods and properties you can use to control web page animation.
* `Animation.play()` to play an animation forward.
* `Animation.reverse()` to play an animation backward.