WindowSharedStorage: selectURL() method - Web APIs

WindowSharedStorage: selectURL() method
=======================================

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

 The **`selectURL()`** method of the
 `WindowSharedStorage` interface executes a URL Selection operation that is registered in a module added to the current origin's `SharedStorageWorklet`.

**Note:** The URL Selection output gate is used to select a URL from a provided list to display to the user, based on shared storage data.

Syntax
------

```js
selectURL(name, urls)
selectURL(name, urls, options)
```

### Parameters

`name`

A string representing the registered operation's name within the shared storage worklet module. It must match the name given to the operation when it is registered with `SharedStorageWorkletGlobalScope.register()`.

`urls`

An array of objects representing the URLs to be chosen between by the URL Selection operation. Each object contains two properties:

`url`

A string representing the URL.

`reportingMetadata` Optional

An object containing properties where names are event types and values are URLs pointing to reporting destinations, for example `"click" : "my-reports/report1.html"`. The URLs act as destinations for reports submitted with a destination of type `"shared-storage-select-url"`, typically submitted via a `Fence.reportEvent()` or `Fence.setReportEventDataForAutomaticBeacons()` method call.

`options` Optional

An options object, which can contain the following properties:

`data` Optional

An object representing any data required for executing the operation.

`keepAlive` Optional

A boolean value. If set to `true`, the `SharedStorageWorkletGlobalScope` of the associated worklet is kept alive, and the operation can be run again. Therefore, you need to set `keepAlive` to `true` for each operation that is not intended to be the last one. The default value, `false`, means that the `SharedStorageWorkletGlobalScope` is terminated after the operation is run and cannot be run again.

`resolveToConfig` Optional

A boolean value. If set to `true`, the fulfillment value of the `Promise` returned by `run()` will be a `FencedFrameConfig` object that can be used to load content into a `<fencedframe>` via its `config` attribute. The default value, `false`, means that the fulfillment value will be a URL that can be used to load content into an `<iframe>`.

### Return value

A `Promise` that fulfills with a `FencedFrameConfig` object or a string representing a URL, depending on the value of the `resolveToConfig` option.

### Exceptions

`TypeError`

Thrown if:

* The worklet module has not yet been added with `addModule()`.
* `urls` is empty or exceeds the maximum allowed length (which is browser-specific).
* An object's `url` property contains an invalid URL.
* Shared storage is disabled (for example, via a browser setting).
* The calling site does not have the Shared Storage API included in a successful privacy sandbox enrollment process.

Examples
--------

### Basic A/B testing

```js
// Randomly assigns a user to a group 0 or 1
function getExperimentGroup() {
  return Math.round(Math.random());
}

async function injectContent() {
  // Add the module to the shared storage worklet
  await window.sharedStorage.worklet.addModule("ab-testing-worklet.js");

  // Assign user to a random group (0 or 1) and store it in shared storage
  window.sharedStorage.set("ab-testing-group", getExperimentGroup(), {
    ignoreIfPresent: true,
  });

  // Run the URL selection operation
  const fencedFrameConfig = await window.sharedStorage.selectURL(
    "ab-testing",
    [
      { url: `https://your-server.example/content/default-content.html` },
      { url: `https://your-server.example/content/experiment-content-a.html` },
    ],
    {
      resolveToConfig: true,
    },
  );

  // Render the chosen URL into a fenced frame
  document.getElementById("content-slot").config = fencedFrameConfig;
}

injectContent();
```

See the Shared Storage API landing page for a walkthrough of this example and links to other examples.

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

| Specification |
| --- |
| Shared Storage API # dom-windowsharedstorage-selecturl |

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

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

See also
--------

* Shared Storage API


WindowSharedStorage: worklet property - Web APIs

WindowSharedStorage: worklet property
=====================================

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

 The **`worklet`** read-only property of the
 `WindowSharedStorage` interface contains the `SharedStorageWorklet` instance representing the shared storage worklet for the current origin.

`SharedStorageWorklet` contains the `addModule()` method, which is used to add a module to the shared storage worklet.

Value
-----

A `SharedStorageWorklet` object.

Examples
--------

```js
// Randomly assigns a user to a group 0 or 1
function getExperimentGroup() {
  return Math.round(Math.random());
}

async function injectContent() {
  // Add the module to the shared storage worklet
  await window.sharedStorage.worklet.addModule("ab-testing-worklet.js");

  // Assign user to a random group (0 or 1) and store it in shared storage
  window.sharedStorage.set("ab-testing-group", getExperimentGroup(), {
    ignoreIfPresent: true,
  });

  // Run the URL selection operation
  const fencedFrameConfig = await window.sharedStorage.selectURL(
    "ab-testing",
    [
      { url: `https://your-server.example/content/default-content.html` },
      { url: `https://your-server.example/content/experiment-content-a.html` },
    ],
    {
      resolveToConfig: true,
    },
  );

  // Render the chosen URL into a fenced frame
  document.getElementById("content-slot").config = fencedFrameConfig;
}

injectContent();
```

See the Shared Storage API landing page for a walkthrough of this example and for links to other examples.

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

| Specification |
| --- |
| Shared Storage API # dom-windowsharedstorage-worklet |

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

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

See also
--------

* Shared Storage API


IIRFilterNode: IIRFilterNode() constructor - Web APIs

IIRFilterNode: IIRFilterNode() constructor
==========================================

 The **`IIRFilterNode()`** constructor
 of the Web Audio API creates a new
 `IIRFilterNode` object which an `AudioNode` processor
 which implements a general infinite impulse response filter.

Syntax
------

```js
new IIRFilterNode(context, options)
```

### Parameters

`context`

A reference to an `AudioContext`.

`options`

Options are as follows:

`feedforward`

A sequence of feedforward coefficients.

`feedback`

A sequence of feedback coefficients.

`channelCount`

 Represents an integer used to determine how many channels are used when up-mixing and down-mixing connections to any inputs to the node. (See
 `AudioNode.channelCount` for more information.) Its usage and precise
 definition depend on the value of `channelCountMode`.

`channelCountMode`

 Represents an enumerated value describing the way channels must be matched between
 the node's inputs and outputs. (See `AudioNode.channelCountMode` for more
 information including default values.)

`channelInterpretation`

 Represents an enumerated value describing the meaning of the channels. This
 interpretation will define how audio up-mixing and down-mixing will happen.
 The possible values are `"speakers"` or `"discrete"`. (See
 `AudioNode.channelCountMode` for more information including default
 values.)

 Unlike other nodes in the Web Audio API, the options passed into the IIR
 filter upon creation are not optional. The filter needs these values to work and with
 the vast range of filters available, there is no default.

### Return value

A new `IIRFilterNode` object instance.

Examples
--------

```js
let feedForward = [0.00020298, 0.0004059599, 0.00020298];
let feedBackward = [1.0126964558, -1.9991880801, 0.9873035442];

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const iirFilter = new IIRFilterNode(audioCtx, {
  feedforward: feedForward,
  feedback: feedBackward,
});
```

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

| Specification |
| --- |
| Web Audio API # dom-iirfilternode-constructor-iirfilternode |

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

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


IIRFilterNode: getFrequencyResponse() method - Web APIs

IIRFilterNode: getFrequencyResponse() method
============================================

 The `getFrequencyResponse()` method of the `IIRFilterNode`
 interface takes the current filtering algorithm's settings and calculates the
 frequency response for frequencies specified in a specified array of frequencies.

 The two output arrays, `magResponseOutput` and
 `phaseResponseOutput`, must be created before calling this method; they
 must be the same size as the array of input frequency values
 (`frequencyArray`).

Syntax
------

```js
getFrequencyResponse(frequencyArray, magResponseOutput, phaseResponseOutput)
```

### Parameters

`frequencyArray`

 A `Float32Array` containing an array of frequencies, specified in Hertz,
 which you want to filter.

`magResponseOutput`

 A `Float32Array` to receive the computed magnitudes of the frequency
 response for each frequency value in the `frequencyArray`.

`phaseResponseOutput`

 A `Float32Array` to receive the computed phase response values in
 radians for each frequency value in the input `frequencyArray`.

### Return value

None (`undefined`).

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the three arrays provided are not all of the same length.

Examples
--------

 In the following example we are using an IIR filter on a media stream (for a complete
 full demo, see our stream-source-buffer demo live,
 or read its source). As part of this demo, we get the frequency responses for this IIR
 filter, for five sample frequencies. We first create the `Float32Array`
 objects we need, one containing the input frequencies, and two to receive the output
 magnitude and phase values:

```js
const myFrequencyArray = new Float32Array(5);
myFrequencyArray[0] = 1000;
myFrequencyArray[1] = 2000;
myFrequencyArray[2] = 3000;
myFrequencyArray[3] = 4000;
myFrequencyArray[4] = 5000;

const magResponseOutput = new Float32Array(5);
const phaseResponseOutput = new Float32Array(5);
```

 Next we create a `<ul>` element in our HTML to contain our results,
 and grab a reference to it in our JavaScript:

```html
<p>IIR filter frequency response for:</p>
<ul class="freq-response-output"></ul>
```

```js
const freqResponseOutput = document.querySelector(".freq-response-output");
```

 Finally, after creating our filter, we use `getFrequencyResponse()` to
 generate the response data and put it in our arrays, then loop through each data set and
 output them in a human-readable list at the bottom of the page:

```js
const feedforwardCoefficients = [0.1, 0.2, 0.3, 0.4, 0.5];
const feedbackCoefficients = [0.5, 0.4, 0.3, 0.2, 0.1];

const iirFilter = audioCtx.createIIRFilter(
  feedforwardCoefficients,
  feedbackCoefficients,
);

// …

function calcFrequencyResponse() {
  iirFilter.getFrequencyResponse(
    myFrequencyArray,
    magResponseOutput,
    phaseResponseOutput,
  );

  for (let i = 0; i < myFrequencyArray.length; i++) {
    const listItem = document.createElement("li");
    listItem.textContent = `${myFrequencyArray[i]}Hz: Magnitude ${magResponseOutput[i]}, Phase ${phaseResponseOutput[i]} radians.`;
    freqResponseOutput.appendChild(listItem);
  }
}

calcFrequencyResponse();
```

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

| Specification |
| --- |
| Web Audio API # dom-iirfilternode-getfrequencyresponse |

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

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

See also
--------

* Using the Web Audio API
* `IIRFilterNode`
* `AudioNode`


VRLayerInit: leftBounds property - Web APIs

VRLayerInit: leftBounds property
================================

**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 **`leftBounds`** property of the `VRLayerInit` interface (dictionary) defines the left texture bounds of the canvas whose contents will be presented by the `VRDisplay`.

**Note:** This property was part of the old WebVR API. It has been superseded by the WebXR Device API.

Value
-----

An array of four floating point values, which can take values from 0.0–1.0.

* The left offset of the bounds.
* The top offset of the bounds.
* The width of the bounds.
* The height of the bounds.

If `leftBounds` is not specified in the dictionary, the default value used is `[0.0, 0.0, 0.5, 1.0]`.

Examples
--------

See `VRLayerInit` for example code.

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

This property was part of the old WebVR API that has been superseded by the WebXR Device API. It is no longer on track to becoming a standard.

Until all browsers have implemented the new WebXR APIs, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers [1].

See also
--------

* WebVR API


VRLayerInit: source property - Web APIs

VRLayerInit: source property
============================

**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 **`source`** property of the `VRLayerInit` interface (dictionary) defines the canvas whose contents will be presented by the `VRDisplay`.

**Note:** This property was part of the old WebVR API. It has been superseded by the WebXR Device API.

Value
-----

An `HTMLCanvasElement` or `OffscreenCanvas` object.

Examples
--------

See `VRLayerInit` for example code.

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

This property was part of the old WebVR API that has been superseded by the WebXR Device API. It is no longer on track to becoming a standard.

Until all browsers have implemented the new WebXR APIs, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers [1].

See also
--------

* WebVR API


VRLayerInit: rightBounds property - Web APIs

VRLayerInit: rightBounds property
=================================

**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 **`rightBounds`** property of the `VRLayerInit` interface (dictionary) defines the right texture bounds of the canvas whose contents will be presented by the `VRDisplay`.

**Note:** This property was part of the old WebVR API. It has been superseded by the WebXR Device API.

Value
-----

An array of four floating point values, which can take values from 0.0–1.0:

1. The left offset of the bounds.
2. The top offset of the bounds.
3. The width of the bounds.
4. The height of the bounds.

If `leftBounds` is not specified in the dictionary, the default value used is `[0.5, 0.0, 0.5, 1.0]`.

Examples
--------

See `VRLayerInit` for example code.

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

This property was part of the old WebVR API that has been superseded by the WebXR Device API. It is no longer on track to becoming a standard.

Until all browsers have implemented the new WebXR APIs, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers [1].

See also
--------

* WebVR API


MediaKeyMessageEvent: messageType property - Web APIs

MediaKeyMessageEvent: messageType property
==========================================

 The **`MediaKeyMessageEvent.messageType`** read-only property indicates the
 type of message. It may be one of `license-request`,
 `license-renewal`, `license-release`, or
 `individualization-request`.

Value
-----

One of the following:

* `license-request`
* `license-renewal`
* `license-release`
* `individualization-request`
Specifications
--------------

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeymessageevent-messagetype |

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

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


MediaKeyMessageEvent: message property - Web APIs

MediaKeyMessageEvent: message property
======================================

 The **`MediaKeyMessageEvent.message`** read-only property
 returns an `ArrayBuffer` with a message from the content decryption module.
 Messages vary by key system.

Value
-----

An `ArrayBuffer`.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeymessageevent-message |

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

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


MediaKeyMessageEvent: MediaKeyMessageEvent() constructor - Web APIs

MediaKeyMessageEvent: MediaKeyMessageEvent() constructor
========================================================

The **`MediaKeyMessageEvent`** constructor creates a new `MediaKeyMessageEvent` object.

Syntax
------

```js
new MediaKeyMessageEvent(type)
new MediaKeyMessageEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `message`.

`options` Optional

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`messageType`

 A message type that allows applications to differentiate messages without parsing them.
 Allowed values are: `license-request`, `license-renewal`, `license-renewal`, or `individualization-request`.

`message`

An array containing the message generated by the content decryption module.

### Return value

A new `MediaKeyMessageEvent` object.

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

| Specification |
| --- |
| Encrypted Media Extensions # constructors |

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

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


HTMLTextAreaElement: select event - Web APIs

HTMLTextAreaElement: select event
=================================

The **`select`** event fires when some text has been selected.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("select", (event) => {});

onselect = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

### Selection logger

```html
<textarea>Try selecting some text in this element.</textarea>
<p id="log"></p>
```

```js
function logSelection(event) {
  const log = document.getElementById("log");
  const selection = event.target.value.substring(
    event.target.selectionStart,
    event.target.selectionEnd,
  );
  log.textContent = `You selected: ${selection}`;
}

const textarea = document.querySelector("textarea");
textarea.addEventListener("select", logSelection);
```

### onselect equivalent

You can also set up the event handler using the `onselect` property:

```js
textarea.onselect = logSelection;
```

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

| Specification |
| --- |
| HTML Standard # event-select |
| HTML Standard # handler-onselect |

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

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


HTMLTextAreaElement: labels property - Web APIs

HTMLTextAreaElement: labels property
====================================

 The **`HTMLTextAreaElement.labels`** read-only property returns
 a `NodeList` of the `<label>` elements associated with the
 `<textarea>` element.

Value
-----

 A `NodeList` containing the `<label>` elements associated
 with the `<textArea>` element.

Examples
--------

### HTML

```html
<label id="label1" for="test">Label 1</label>
<textarea id="test">Some text</textarea>
<label id="label2" for="test">Label 2</label>
```

### JavaScript

```js
window.addEventListener("DOMContentLoaded", () => {
  const textArea = document.getElementById("test");
  for (const label of textArea.labels) {
    console.log(label.textContent); // "Label 1" and "Label 2"
  }
});
```

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

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

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

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


HTMLTextAreaElement: selectionchange event - Web APIs

HTMLTextAreaElement: selectionchange event
==========================================

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

 The **`selectionchange`** event of the Selection API is fired when the text selection within an `<textarea>` element is changed.
 This includes both changes in the selected range of characters, or if the caret moves.

This event is not cancelable.

The event is usually processed by adding an event listener on the `<textarea>`, and in the handler function read by the `HTMLTextAreaElement` `selectionStart`, `selectionEnd` and `selectionDirection` properties.

It is also possible to add a listener on the global `onselectionchange` event handler, and within the handler function use `Document.getSelection()` to get the `Selection`. However this is not very useful for getting changes to *text* selections.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("selectionchange", (event) => {});

onselectionchange = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

The example below shows how to get the text selected in an `<textarea>` element.

### HTML

```html
<div>
  Enter and select text here:<br /><textarea
 id="mytext"
 rows="2"
 cols="20"></textarea>
</div>
<div>selectionStart: <span id="start"></span></div>
<div>selectionEnd: <span id="end"></span></div>
<div>selectionDirection: <span id="direction"></span></div>
```

### JavaScript

```js
const myinput = document.getElementById("mytext");

myinput.addEventListener("selectionchange", () => {
  document.getElementById("start").textContent = myinput.selectionStart;
  document.getElementById("end").textContent = myinput.selectionEnd;
  document.getElementById("direction").textContent = myinput.selectionDirection;
});
```

### Result

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

| Specification |
| --- |
| Selection API # selectionchange-event |
| Selection API # dom-globaleventhandlers-onselectionchange |

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

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


ScreenDetails: screens property - Web APIs

ScreenDetails: screens property
===============================

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

 The **`screens`** read-only property of the
 `ScreenDetails` interface contains an array of `ScreenDetailed` objects, each one representing detailed information about one specific screen available to the user's device.

Value
-----

An array of `ScreenDetailed` objects.

**Note:** `screens` only includes "extended" displays, not those that mirror another display.

Examples
--------

See the main `ScreenDetails` page for example usage.

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

| Specification |
| --- |
| Window Management # ref-for-dom-screendetails-screens |

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

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

See also
--------

* Window Management API


ScreenDetails: currentscreenchange event - Web APIs

ScreenDetails: currentscreenchange event
========================================

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

The **`currentscreenchange`** event of the `ScreenDetails` interface is fired when the `ScreenDetails.currentScreen` changes in one of the following ways:

* The current screen changes to a different screen, i.e., the current browser window is moved to a different screen.
* One or more of the following properties change on the current screen:
    + `width`
    + `height`
    + `availWidth`
    + `availHeight`
    + `colorDepth`
    + `orientation`
* One or more of the following values change:
    + The screen's **position** ((x,y) coordinates of the top-left corner) inside the OS virtual screen arrangement, relative to the multi-screen origin
    + The screen's **available position** ((x,y) coordinates of the top-left corner) inside the OS virtual screen arrangement, relative to the multi-screen origin. This is equal to the screen position, plus the width/height of any OS UI elements drawn on the top-left of the screen — windows cannot be placed in those areas
    + `devicePixelRatio`
    + `label`
    + The screen's designation as primary or secondary (see `isPrimary`)
    + The screen's designation as internal or external (see `isInternal`)
Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("currentscreenchange", (event) => {});

oncurrentscreenchange = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

```js
const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener("currentscreenchange", (event) => {
  const details = screenDetails.currentScreen;
  console.log("The current screen has changed.", event, details);
});
```

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

| Specification |
| --- |
| Window Management # eventdef-screendetails-currentscreenchange |
| Window Management # ref-for-dom-screendetails-oncurrentscreenchange |

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

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

See also
--------

* Window Management API


ScreenDetails: screenschange event - Web APIs

ScreenDetails: screenschange event
==================================

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

The **`screenschange`** event of the `ScreenDetails` interface is fired when the set of screens available to the system has changed: that is, a new screen has become available or an existing screen has become unavailable. This will be reflected in a change in the `screens` array.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("screenschange", (event) => {});

onscreenschange = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

You could use the `screenschange` event to detect when the available screens have changed, report the change, close all windows, and then reopen them all to suit the new configuration:

```js
const screenDetails = await window.getScreenDetails();

// Return the number of screens
let noOfScreens = screenDetails.screens.length;

screenDetails.addEventListener("screenschange", () => {
  // If the new number of screens is different to the old number of screens, report the difference
  if (screenDetails.screens.length !== noOfScreens) {
    console.log(
      `The screen count changed from ${noOfScreens} to ${screenDetails.screens.length}`,
    );

    // Update noOfScreens value
    noOfScreens = screenDetails.screens.length;
  }

  // Open, close, or rearrange windows as needed, to fit the new screen configuration
  updateWindows();
});
```

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

| Specification |
| --- |
| Window Management # eventdef-screendetails-screenschange |
| Window Management # ref-for-dom-screendetails-onscreenschange |

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

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

See also
--------

* Window Management API


ScreenDetails: currentScreen property - Web APIs

ScreenDetails: currentScreen property
=====================================

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

 The **`currentScreen`** read-only property of the
 `ScreenDetails` interface contains a single `ScreenDetailed` object representing detailed information about the screen that the current browser window is displayed in.

Value
-----

A `ScreenDetailed` object.

Examples
--------

```js
// Utility function for opening new windows
function openWindow(left, top, width, height, url) {
  const windowFeatures = `left=${left},top=${top},width=${width},height=${height}`;
  return window.open(url, "\_blank", windowFeatures);
}

// Open a new window that fills the available area of the current screen.
const currentScreen = (await window.getScreenDetails()).currentScreen;
console.log(`Opening a window to fill screen ${currentScreen.label}`);
const windowRef = openWindow(
  currentScreen.availLeft,
  currentScreen.availTop,
  currentScreen.availWidth,
  currentScreen.availHeight,
  url,
);
```

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

| Specification |
| --- |
| Window Management # ref-for-dom-screendetails-currentscreen |

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

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

See also
--------

* Window Management API


Gyroscope: y property - Web APIs

Gyroscope: y property
=====================

The **`y`** read-only property of the `Gyroscope` interface returns a number specifying the angular velocity of the device along its y-axis.

Value
-----

A `Number`.

Examples
--------

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

```js
let gyroscope = new Gyroscope({ frequency: 60 });

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

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

| Specification |
| --- |
| Gyroscope # gyroscope-y |

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

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


Gyroscope: x property - Web APIs

Gyroscope: x property
=====================

 The **`x`** read-only property of the
 `Gyroscope` interface returns a number specifying the
 angular velocity of the device along its x-axis.

Value
-----

A `Number`.

Examples
--------

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

```js
let gyroscope = new Gyroscope({ frequency: 60 });

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

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

| Specification |
| --- |
| Gyroscope # gyroscope-x |

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

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


Gyroscope: z property - Web APIs

Gyroscope: z property
=====================

 The **`z`** read-only property of the
 `Gyroscope` interface returns a number specifying the
 angular velocity of the device along its z-axis.

Value
-----

A `Number`.

Examples
--------

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

```js
let gyroscope = new Gyroscope({ frequency: 60 });

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

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

| Specification |
| --- |
| Gyroscope # gyroscope-z |

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

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


Gyroscope: Gyroscope() constructor - Web APIs

Gyroscope: Gyroscope() constructor
==================================

 The **`Gyroscope()`** constructor
 creates a new `Gyroscope` object which provides on each reading the
 angular velocity of the device along all three axes.

Syntax
------

```js
new Gyroscope()
new Gyroscope(options)
```

### Parameters

`options` Optional

Options are as follows:

`frequency`

 The desired number of times per second a sample should
 be taken, meaning the number of times per second that the
 `reading` event will be called. A whole number or decimal may be
 used, the latter for frequencies less than a second. The actual reading frequency
 depends device hardware and consequently may be less than requested.

`referenceFrame`

 Either `'device'` or
 `'screen'`. The default is `'device'`.

### Exceptions

`SecurityError` `DOMException`

Use of this feature was blocked by a Permissions Policy.

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

| Specification |
| --- |
| Gyroscope # dom-gyroscope-gyroscope |

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

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

See also
--------

* `reading` event


KeyframeEffect: setKeyframes() method - Web APIs

KeyframeEffect: setKeyframes() 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 **`setKeyframes()`** method of the `KeyframeEffect` interface replaces the keyframes that make up the affected `KeyframeEffect` with a new set of keyframes.

Syntax
------

```js
setKeyframes(keyframes)
```

### Parameters

`keyframes`

A keyframe object or `null`. If set to `null`, the keyframes are replaced with a sequence of empty keyframes.

More information about a keyframe object's format.

### Return value

None (`undefined`).

### Exceptions

| Exception | Explanation |
| --- | --- |
| `TypeError` |
 One or more of the frames were not of the correct type of object, the
 keyframes were not
 loosely sorted by offset, or a keyframe existed with an offset of less than 0 or more than 1.
  |

**Note:** If the keyframes cannot be processed or are malformed, the `KeyframeEffect`'s keyframes are not modified.

Examples
--------

```js
// passing an array of keyframe objects
existingKeyframeEffect.setKeyframes([
  { color: "blue" },
  { color: "green", left: "10px" },
]);

// passing an object with arrays for values
existingKeyframeEffect.setKeyframes({
  color: ["blue", "green"],
  left: ["0", "10px"],
});

// passing a single-member object
existingKeyframeEffect.setKeyframes({
  color: "blue",
});
```

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-setkeyframes |

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

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

See also
--------

* KeyframeEffect Interface
* Web Animations API


KeyframeEffect: iterationComposite property - Web APIs

KeyframeEffect: iterationComposite property
===========================================

The **`iterationComposite`** property of a `KeyframeEffect` resolves how the animation's property value changes accumulate or override each other upon each of the animation's iterations.

Value
-----

One of the following:

`replace`

The `keyframeEffect` value produced is independent of the current iteration.

`accumulate`

Subsequent iterations of the `keyframeEffect` build on the final value of the previous iteration.

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

| Specification |
| --- |
| Web Animations Level 2 # dom-keyframeeffect-iterationcomposite |

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

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

See also
--------

* Web Animations API
* Property of both `KeyframeEffect` objects.


KeyframeEffect: target property - Web APIs

KeyframeEffect: target 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 **`target`** property of a `KeyframeEffect` interface represents the element or pseudo-element being animated. It may be `null` for animations that do not target a specific element. It performs as both a getter and a setter, except with animations and transitions generated by CSS.

Value
-----

An `Element` or `null`.

Examples
--------

In the Follow the White Rabbit example, `whiteRabbit` sets the `target` element to be animated:

```js
const whiteRabbit = document.getElementById("rabbit");

const rabbitDownKeyframes = new KeyframeEffect(
  whiteRabbit,
  [{ transform: "translateY(0%)" }, { transform: "translateY(100%)" }],
  { duration: 3000, fill: "forwards" },
);

// returns <div id="rabbit">Click the rabbit's ears!</div>
rabbitDownKeyframes.target;
```

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-target |

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

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

See also
--------

* Web Animations API
* Property of `KeyframeEffect` objects.


KeyframeEffect: composite property - Web APIs

KeyframeEffect: composite 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 **`composite`** property of a `KeyframeEffect` resolves how an element's animation impacts its underlying property values.

Value
-----

To understand these values, take the example of a `keyframeEffect` value of `blur(2)` working on an underlying property value of `blur(3)`.

`replace`

The `keyframeEffect` **overrides** the underlying value it is combined with: `blur(2)` replaces `blur(3)`.

`add`

The `keyframeEffect` is **added** to the underlying value with which it is combined (aka *additive*): `blur(2) blur(3)`.

`accumulate`

The keyframeEffect is **accumulated** on to the underlying value: `blur(5)`.

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-composite |

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

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

See also
--------

* Web Animations API
* Property of `KeyframeEffect` objects
* Composite operation


KeyframeEffect: getKeyframes() method - Web APIs

KeyframeEffect: getKeyframes() 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 **`getKeyframes()`** method of a `KeyframeEffect` returns an Array of the computed keyframes that make up this animation along with their computed offsets.

Syntax
------

```js
getKeyframes()
```

### Parameters

None.

### Return value

Returns a sequence of objects with the following format:

`property value pairs`

As many property value pairs as are contained in each keyframe of the animation.

`offset`

The offset of the keyframe specified as a number between `0.0` and `1.0` inclusive or `null`. This is equivalent to specifying start and end states in percentages in CSS stylesheets using `@keyframes`. This will be `null` if the keyframe is automatically spaced using `KeyframeEffect.spacing`.

`computedOffset`

The computed offset for this keyframe, calculated when the list of computed keyframes was produced according to `KeyframeEffect.spacing`. Unlike **`offset`,** above, the **`computedOffset`** is never `null`.

`easing`

The easing function used from this keyframe until the next keyframe in the series.

`composite`

The `KeyframeEffect.composite` operation used to combine the values specified in this keyframe with the underlying value. This will be absent if the composite operation specified on the effect is being used.

Examples
--------

In the Red Queen Race example, we can inspect Alice and the RedQueen's animation to see its individual keyframes like so:

```js
// Return the array of keyframes

redQueen_alice.effect.getKeyframes();
```

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-getkeyframes |

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

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

See also
--------

* Web Animations API
* Method of `KeyframeEffect` objects.


KeyframeEffect: pseudoElement property - Web APIs

KeyframeEffect: pseudoElement 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 **`pseudoElement`** property of a `KeyframeEffect` interface is a string representing the pseudo-element being animated. It may be `null` for animations that do not target a pseudo-element. It performs as both a getter and a setter, except with animations and transitions generated by CSS.

**Note:** If set to the legacy single-colon syntax of `:before`, `:after`, `:first-letter`, or `:first-line`, the string is transformed into its double-colon modern version (`::before`, `::after`, `::first-letter`, and `::first-line`, respectively).

Value
-----

A string or `null`.

Exceptions
----------

`SyntaxError` `DOMException`

Thrown when trying to set this property to an element, an invalid pseudo-element (either non-existent or misspelled). The property is then left unchanged.

Examples
--------

```html
<div id="text">Some text</div>
<pre id="log"></pre>
```

```css
#text::after {
  content: "⭐";
  display: inline-block; /\* Needed as the `transform` property does not apply to inline elements \*/
}
#text::before {
  content: "😊";
  display: inline-block;
}
```

```js
const log = document.getElementById("log");
const text = document.getElementById("text");

// Create the keyframe and launch the animation
const animation = text.animate(
  [
    { transform: "rotate(0)" },
    { transform: "rotate(180deg)" },
    { transform: "rotate(360deg)" },
  ],
  { duration: 3000, iterations: Infinity, pseudoElement: "::after" },
);

// Get the value of KeyframeEffect.pseudoElement
function logPseudoElement() {
  const keyframeEffect = animation.effect;
  log.textContent = `Value of pseudoElement animated: ${keyframeEffect.pseudoElement}`;
  requestAnimationFrame(logPseudoElement);
}

// Every 6 seconds, switch the pseudo-element animated
function switchPseudoElement() {
  const keyframeEffect = animation.effect;
  keyframeEffect.pseudoElement =
    keyframeEffect.pseudoElement === "::after" ? "::before" : "::after";
  setTimeout(switchPseudoElement, 6000);
}

switchPseudoElement();
logPseudoElement();
```

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-pseudoelement |

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

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

See also
--------

* Web Animations API
* `KeyframeEffect` interface
* `KeyframeEffect()` constructor
* `target` property


KeyframeEffect: KeyframeEffect() constructor - Web APIs

KeyframeEffect: KeyframeEffect() 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 **`KeyframeEffect()`** constructor of the Web Animations API returns a new `KeyframeEffect` object instance, and also allows you to clone an existing keyframe effect object instance.

Syntax
------

```js
new KeyframeEffect(target, keyframes)
new KeyframeEffect(target, keyframes, options)
new KeyframeEffect(sourceKeyFrames)
```

### Parameters

The multi-argument constructor (see above) creates a completely new `KeyframeEffect` object instance. Its parameters are:

`target`

The DOM element to be animated, or `null`.

`keyframes`

A keyframes object or `null`.

`options` Optional

Either an integer representing the animation's duration (in milliseconds), or an object containing one or more of the following:

`delay` Optional

The number of milliseconds to delay the start of the animation. Defaults to 0.

`direction` Optional

Whether the animation runs forwards (`normal`), backwards (`reverse`), switches direction after each iteration (`alternate`), or runs backwards and switches direction after each iteration (`alternate-reverse`). Defaults to `"normal"`.

`duration` Optional

The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.

`easing` Optional

The rate of the animation's change over time. Accepts an `<easing-function>`, such as `"linear"`, `"ease-in"`, `"step-end"`, or `"cubic-bezier(0.42, 0, 0.58, 1)"`. Defaults to `"linear"`.

`endDelay` Optional

The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0.

`fill` Optional

Dictates whether the animation's effects should be reflected by the element(s) prior to playing (`"backwards"`), retained after the animation has completed playing (`"forwards"`), or `both`. Defaults to `"none"`.

`iterationStart` Optional

Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.

`iterations` Optional

The number of times the animation should repeat. Defaults to `1`, and can also take a value of `Infinity` to make it repeat for as long as the element exists.

`composite` Optional

 Determines how values are combined between this animation and other, separate
 animations that do not specify their own specific composite operation. Defaults to
 `replace`.

* `add` dictates an additive effect, where each successive iteration
 builds on the last. For instance with `transform`, a
 `translateX(-200px)` would not override an earlier
 `rotate(20deg)` value but result in
 `translateX(-200px) rotate(20deg)`.
* `accumulate` is similar but a little smarter: `blur(2)`
 and `blur(5)` become `blur(7)`, not
 `blur(2) blur(5)`.
* `replace` overwrites the previous value with the new one.

`iterationComposite` Optional

 Determines how values build from iteration to iteration in this animation. Can be
 set to `accumulate` or `replace` (see above). Defaults
 to `replace`.

`pseudoElement` Optional

A `string` containing a `pseudo-element` selector, such as `"::before"`. If present, the effect is applied to the selected pseudo-element of `target`, rather than to `target` itself.

The single argument constructor (see above) creates a clone of an existing `KeyframeEffect` object instance. Its parameter is as follows:

`sourceKeyFrames`

A `KeyframeEffect` object that you want to clone.

Examples
--------

In the Follow the White Rabbit example, the `KeyframeEffect` constructor is used to create a set of keyframes that dictate how the White Rabbit should animate down the hole:

```js
const whiteRabbit = document.getElementById("rabbit");

const rabbitDownKeyframes = new KeyframeEffect(
  whiteRabbit, // element to animate
  [
    { transform: "translateY(0%)" }, // keyframe
    { transform: "translateY(100%)" }, // keyframe
  ],
  { duration: 3000, fill: "forwards" }, // keyframe options
);

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

// Play rabbit animation
rabbitDownAnimation.play();
```

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-keyframeeffect |

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

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

See also
--------

* KeyframeEffect Interface
* Web Animations API
* `Animation`


SpeechRecognitionEvent: interpretation property - Web APIs

SpeechRecognitionEvent: interpretation property
===============================================

**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 **`interpretation`** read-only property of the
 `SpeechRecognitionEvent` interface returns the semantic meaning of what the
 user said.

 This might be determined, for instance, through the SISR specification of semantics in
 a grammar (see
 Semantic Interpretation for Speech Recognition (SISR) Version 1.0
 for specification and examples.)

Value
-----

 The returned value can be of any type. If no semantic interpretation has been returned
 by the speech recognition system, `null` will be returned.

Examples
--------

```js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
  console.log(event.interpretation);
};
```

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

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

See also
--------

* Web Speech API


SpeechRecognitionEvent: resultIndex property - Web APIs

SpeechRecognitionEvent: resultIndex property
============================================

 The **`resultIndex`** read-only property of the
 `SpeechRecognitionEvent` interface returns the lowest index value result in
 the `SpeechRecognitionResultList` "array" that has actually changed.

 The `SpeechRecognitionResultList` object is not an array, but it has a
 getter that allows it to be accessed by array syntax.

Value
-----

A number.

Examples
--------

```js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
  console.log(event.resultIndex); // returns 0 if there is only one result
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionevent-resultindex |

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

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

See also
--------

* Web Speech API


SpeechRecognitionEvent: results property - Web APIs

SpeechRecognitionEvent: results property
========================================

 The **`results`** read-only property of the
 `SpeechRecognitionEvent` interface returns a
 `SpeechRecognitionResultList` object representing all the speech
 recognition results for the current session.

 Specifically this object will contain all final results that have been returned,
 followed by the current best hypothesis for all interim results. When subsequent
 `result` events are fired, interim results may be overwritten by a newer
 interim result or by a final result — they may even be removed, if they are at the end
 of the "results" array and the array length decreases. Final results on the other hand
 will not be overwritten or removed.

Value
-----

A `SpeechRecognitionResultList` 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-speechrecognitionevent-results |

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

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

See also
--------

* Web Speech API


SpeechRecognitionEvent: emma property - Web APIs

SpeechRecognitionEvent: emma property
=====================================

**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 **`emma`** read-only property of the
 `SpeechRecognitionEvent` interface returns an Extensible
 MultiModal Annotation markup language (EMMA) — XML — representation of the
 result.

**Note:** EMMA is defined in the specification EMMA: Extensible MultiModal Annotation markup language. You can see multiple EMMA examples in the spec.

Value
-----

 A valid XML document. The exact contents can vary across user agents and recognition
 engines, but all supporting implementations will expose a valid XML document complete
 with an EMMA namespace. If the speech recognition system does not supply EMMA data then
 the user agent will return `null`.

Examples
--------

```js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
  console.log(event.emma);
};
```

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

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

See also
--------

* Web Speech API


SpeechSynthesisErrorEvent: error property - Web APIs

SpeechSynthesisErrorEvent: error property
=========================================

 The **`error`** property of the
 `SpeechSynthesisErrorEvent` interface returns an error code indicating what has gone wrong with a speech synthesis attempt.

Value
-----

A string containing the error reason. Possible values are:

`canceled`

 A `SpeechSynthesis.cancel` method call caused the
 `SpeechSynthesisUtterance` to be removed from the queue before it had
 begun being spoken.

`interrupted`

 A `SpeechSynthesis.cancel` method call caused the
 `SpeechSynthesisUtterance` to be interrupted after it had begun being
 spoken and before it completed.

`audio-busy`

 The operation couldn't be completed at this time because the user-agent couldn't
 access the audio output device (for example, the user may need to correct this by
 closing another application.)

`audio-hardware`

 The operation couldn't be completed at this time because the user-agent couldn't
 identify an audio output device (for example, the user may need to connect a speaker
 or configure system settings.)

`network`

 The operation couldn't be completed at this time because some required network
 communication failed.

`synthesis-unavailable`

 The operation couldn't be completed at this time because no synthesis engine was
 available (For example, the user may need to install or configure a synthesis engine.)

`synthesis-failed`

The operation failed because the synthesis engine raised an error.

`language-unavailable`

 No appropriate voice was available for the language set in
 `SpeechSynthesisUtterance.lang`. You can use the `window.speechSynthesis.getVoices()` method to determine which voices and languages are supported in the user's browser.

`voice-unavailable`

The voice set in `SpeechSynthesisUtterance.voice` was not available.

`text-too-long`

 The contents of the `SpeechSynthesisUtterance.text` attribute was too
 long to synthesize.

`invalid-argument`

 The content of the `SpeechSynthesisUtterance.rate`,
 `SpeechSynthesisUtterance.pitch` or
 `SpeechSynthesisUtterance.volume` property was not valid.

`not-allowed`

The operation's start was not allowed.

Examples
--------

```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

const voices = synth.getVoices();

// ...

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }

  synth.speak(utterThis);

  utterThis.onerror = (event) => {
    console.error(
      `An error has occurred with the speech synthesis: ${event.error}`,
    );
  };

  inputTxt.blur();
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechsynthesiserrorevent-error |

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

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

See also
--------

* Web Speech API


SpeechSynthesisErrorEvent: SpeechSynthesisErrorEvent() constructor - Web APIs

SpeechSynthesisErrorEvent: SpeechSynthesisErrorEvent() constructor
==================================================================

The **`SpeechSynthesisErrorEvent()`** constructor creates a new `SpeechSynthesisErrorEvent` object.

**Note:** A web developer doesn't typically need to call this constructor, as the browser creates these objects itself when firing events.

Syntax
------

```js
new SpeechSynthesisErrorEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `error`.

`options`

An object that, *in addition to the properties defined in `SpeechSynthesisEvent()`*, has the following properties:

`error`

A string containing the error reason. Possible values are:

`canceled`

A `SpeechSynthesis.cancel` method call caused the `SpeechSynthesisUtterance` to be removed from the queue before speech started.

`interrupted`

A `SpeechSynthesis.cancel` method call caused the `SpeechSynthesisUtterance` to be interrupted after speech had started but before it completed.

`audio-busy`

The operation couldn't be completed at this time because the user-agent couldn't access the audio output device (for example, the user may need to correct this by closing another application).

`audio-hardware`

The operation couldn't be completed at this time because the user-agent couldn't identify an audio output device (for example, the user may need to connect a speaker or configure system settings.)

`network`

The operation couldn't be completed at this time because some required network communication failed.

`synthesis-unavailable`

The operation couldn't be completed at this time because no synthesis engine was available (for example, the user may need to install or configure a synthesis engine).

`synthesis-failed`

The operation failed because the synthesis engine raised an error.

`language-unavailable`

No appropriate voice was available for the language set in `SpeechSynthesisUtterance.lang`. You can use the `window.speechSynthesis.getVoices()` method to determine which voices and languages are supported in the user's browser.

`voice-unavailable`

The voice set in `SpeechSynthesisUtterance.voice` was not available.

`text-too-long`

The contents of the `SpeechSynthesisUtterance.text` attribute was too long to synthesize.

`invalid-argument`

The content of the `SpeechSynthesisUtterance.rate`, `SpeechSynthesisUtterance.pitch` or `SpeechSynthesisUtterance.volume` property was not valid.

`not-allowed`

The operation's start was not allowed.

### Return value

A new `SpeechSynthesisErrorEvent` object.

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

| Specification |
| --- |
| Web Speech API # dom-speechsynthesiserrorevent-speechsynthesiserrorevent |

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

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

See also
--------

* `SpeechSynthesisEvent`


RTCTransportStats: type property - Web APIs

RTCTransportStats: type property
================================

The **`type`** property of the `RTCTransportStats` dictionary is a string with the value `"transport"`.

 Different statistics are obtained by iterating the `RTCStatsReport` object returned by a call to `RTCPeerConnection.getStats()`.
 The type indicates the set of statistics available through the object in a particular iteration step.
 A value of `"transport"` indicates that the statistics available in the current step are those defined in `RTCTransportStats`.

Value
-----

A string with the value `"transport"`.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-type |

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

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


RTCTransportStats: timestamp property - Web APIs

RTCTransportStats: timestamp property
=====================================

The **`timestamp`** property of the `RTCTransportStats` dictionary is a `DOMHighResTimeStamp` object specifying the time at which the data in the object was sampled.

Value
-----

A `DOMHighResTimeStamp` value indicating the time at which the activity described by the statistics in this object was recorded, in milliseconds elapsed since the beginning of January 1, 1970, UTC.

The value should be accurate to within a few milliseconds but may not be entirely precise, either because of hardware or operating system limitations or because of fingerprinting protection in the form of reduced clock precision or accuracy.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-timestamp |

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

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


RTCTransportStats: id property - Web APIs

RTCTransportStats: id property
==============================

The **`id`** property of the `RTCTransportStats` dictionary is a string which uniquely identifies the object for which this object provides statistics.

Using the `id`, you can correlate this statistics object with others, in order to monitor statistics over time for a given WebRTC object, such as an `RTCDtlsTransport`, or an `RTCPeerConnection`.

Value
-----

A string that uniquely identifies the object for which this `RTCTransportStats` object provides statistics.

The format of the ID string is not defined by the specification, so you cannot reliably make any assumptions about the contents of the string, or assume that the format of the string will remain unchanged for a given object type.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-id |

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

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


CSSPseudoElement: type property - Web APIs

CSSPseudoElement: type property
===============================

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

 The **`type`** read-only property of the
 `CSSPseudoElement` interface returns the type of the pseudo-element as a
 string, represented in the form of a CSS selector.

Value
-----

A string containing one of the following values:

* `"::before"`
* `"::after"`
* `"::marker"`
Examples
--------

 The example below demonstrates the relationship between
 `CSSPseudoElement.type` and `Element.pseudo()`:

```js
const myElement = document.querySelector("q");
const mySelector = "::after";
const cssPseudoElement = myElement.pseudo(mySelector);
const typeOfPseudoElement = cssPseudoElement.type;

console.log(mySelector === typeOfPseudoElement); // Outputs true
```

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # dom-csspseudoelement-type |

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

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

See also
--------

* `Element.pseudo()`
* Index of standard pseudo-elements


CSSPseudoElement: element property - Web APIs

CSSPseudoElement: element property
==================================

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

 The **`element`** read-only property of the
 `CSSPseudoElement` interface returns a reference to the originating element
 of the pseudo-element, in other words its parent element.

Value
-----

An `Element` representing the pseudo-element's originating element.

Examples
--------

 The example below demonstrates the relationship between
 `CSSPseudoElement.element` and `Element.pseudo()`:

```js
const myElement = document.querySelector("q");
const cssPseudoElement = myElement.pseudo("::after");
const originatingElement = cssPseudoElement.element;

console.log(myElement === originatingElement); // Outputs true
console.log(myElement.parentElement === originatingElement); // Outputs false
console.log(myElement.lastElementChild === cssPseudoElement); // Outputs false
console.log(myElement.lastChild === cssPseudoElement); // Outputs false
console.log(myElement.nextElementSibling === cssPseudoElement); // Outputs false
console.log(myElement.nextSibling === cssPseudoElement); // Outputs false
```

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # dom-csspseudoelement-element |

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

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

See also
--------

* `Element.pseudo()`


RTCPeerConnectionStats: dataChannelsClosed property - Web APIs

RTCPeerConnectionStats: dataChannelsClosed property
===================================================

The **`dataChannelsClosed`** property of the `RTCPeerConnectionStats` dictionary indicates the number of unique `RTCDataChannel` objects that have left the `open` state during their lifetime.

 A channel will leave the `open` state if either end of the connection or the underlying transport is closed.
 Note that channels that transition to `closing` or `closed` without ever being `open` are not counted in this number.

Value
-----

A positive integer that indicates the number of unique `RTCDataChannel` objects that have left the `open` state during their lifetime.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcpeerconnectionstats-datachannelsclosed |

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

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


RTCPeerConnectionStats: timestamp property - Web APIs

RTCPeerConnectionStats: timestamp property
==========================================

The **`timestamp`** property of the `RTCPeerConnectionStats` dictionary is a `DOMHighResTimeStamp` object specifying the time at which the data in the object was sampled.

Value
-----

A `DOMHighResTimeStamp` value indicating the time at which the activity described by the statistics in this object was recorded, in milliseconds elapsed since the beginning of January 1, 1970, UTC.

The value should be accurate to within a few milliseconds but may not be entirely precise, either because of hardware or operating system limitations or because of fingerprinting protection in the form of reduced clock precision or accuracy.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-timestamp |

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

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


RTCPeerConnectionStats: dataChannelsOpened property - Web APIs

RTCPeerConnectionStats: dataChannelsOpened property
===================================================

The **`dataChannelsOpened`** property of the `RTCPeerConnectionStats` dictionary indicates the number of unique `RTCDataChannel` objects that have entered the `open` state during their lifetime.

Value
-----

A positive integer that indicates the number of unique `RTCDataChannel` objects that have entered the `open` state during their lifetime.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcpeerconnectionstats-datachannelsopened |

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

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


RTCPeerConnectionStats: type property - Web APIs

RTCPeerConnectionStats: type property
=====================================

The **`type`** property of the `RTCPeerConnectionStats` dictionary is a string with the value `"peer-connection"`.

 Different statistics are obtained by iterating the `RTCStatsReport` object returned by a call to `RTCPeerConnection.getStats()`.
 The type indicates the set of statistics available through the object in a particular iteration step.
 A value of `"peer-connection"` indicates that the statistics available in the current step are those defined in `RTCPeerConnectionStats`.

Value
-----

A string with the value `"peer-connection"`.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-type |

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

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


RTCPeerConnectionStats: id property - Web APIs

RTCPeerConnectionStats: id property
===================================

The **`id`** property of the `RTCPeerConnectionStats` dictionary is a string which uniquely identifies the object for which this object provides statistics.

Using the `id`, you can correlate this statistics object with others, in order to monitor statistics over time for a given WebRTC object, such as an `RTCPeerConnection`, or an `RTCDataChannel`.

Value
-----

A string that uniquely identifies the object for which this `RTCPeerConnectionStats` object provides statistics.

The format of the ID string is not defined by the specification, so you cannot reliably make any assumptions about the contents of the string, or assume that the format of the string will remain unchanged for a given object type.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-id |

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

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


XPathExpression: evaluate() method - Web APIs

XPathExpression: evaluate() method
==================================

 The **`evaluate()`** method of the
 `XPathExpression` interface executes an XPath expression on the given node or document and
 returns an `XPathResult`.

Syntax
------

```js
evaluate(contextNode)
evaluate(contextNode, type)
evaluate(contextNode, type, result)
```

### Parameters

`contextNode`

A `Node` representing the context to use for evaluating the expression.

`type` Optional

 Specifies the type of result to be returned by evaluating the expression. This must
 be one of the `XPathResult.Constants`.

`result` Optional

 Allows to specify a result object which may be reused and returned by this method.
 If this is specified as `null` or the implementation does not reuse the
 specified result, a new result object will be returned.

### Return value

 An `XPathResult` object representing the result of evaluating the XPath
 expression.

### Exceptions

#### INVALID\_EXPRESSION\_ERR

 If the expression is not legal according to the rules of the
 `XPathEvaluator`, an `XPathException` of type
 `INVALID_EXPRESSION_ERR` is raised.

#### TYPE\_ERR

 In case result cannot be converted to the specified type, an
 `XPathException` of type `TYPE_ERR` is raised.

#### NAMESPACE\_ERR

 If the expression contains namespace prefixes which cannot be resolved by the specified
 `XPathNSResolver`, a `DOMException` of type
 `NAMESPACE_ERROR` is raised.

#### WRONG\_DOCUMENT\_ERR

 If the provided context node is from a document that is not supported by the
 `XPathEvaluator`, a `DOMException` of type
 `WRONG_DOCUMENT_ERR` is raised.

#### NOT\_SUPPORTED\_ERR

 If the provided context node is not a type permitted as an XPath context node or the
 request type is not permitted by the `XPathEvaluator`, a
 `DOMException` of type `NOT_SUPPORTED_ERR` is raised.

Examples
--------

The following example shows the use of the `evaluate()` method.

### HTML

```html
<div>XPath example</div>
<div>Number of <div>s: <output></output></div>
```

### JavaScript

```js
const xpath = "//div";
const evaluator = new XPathEvaluator();
const expression = evaluator.createExpression("//div");
const result = expression.evaluate(
  document,
  XPathResult.ORDERED\_NODE\_SNAPSHOT\_TYPE,
);
document.querySelector("output").textContent = result.snapshotLength;
```

### Result

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

| Specification |
| --- |
| DOM Standard # dom-xpathexpression-evaluate |

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

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


GamepadEvent: GamepadEvent() constructor - Web APIs

GamepadEvent: GamepadEvent() constructor
========================================

The **`GamepadEvent()`** constructor creates a new `GamepadEvent` object.

Syntax
------

```js
new GamepadEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `gamepadconnected` or `gamepaddisconnected`.

`options`

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`gamepad`

A `Gamepad` object describing the gamepad associated with the event.

### Return value

A new `GamepadEvent` object.

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

| Specification |
| --- |
| Gamepad # dom-gamepadevent-constructor |

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

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


GamepadEvent: gamepad property - Web APIs

GamepadEvent: gamepad property
==============================

 The **`GamepadEvent.gamepad`** property of the
 **`GamepadEvent` interface** returns a `Gamepad`
 object, providing access to the associated gamepad data for fired
 `gamepadconnected` and `gamepaddisconnected` events.

Value
-----

A `Gamepad` object.

Examples
--------

 The `gamepad` property being called on a fired
 `gamepadconnected` event.

```js
window.addEventListener("gamepadconnected", (e) => {
  console.log(
    "Gamepad connected at index %d: %s. %d buttons, %d axes.",
    e.gamepad.index,
    e.gamepad.id,
    e.gamepad.buttons.length,
    e.gamepad.axes.length,
  );
});
```

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

| Specification |
| --- |
| Gamepad # dom-gamepadevent-gamepad |

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

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

See also
--------

Using the Gamepad API


XRReferenceSpaceEvent: transform property - Web APIs

XRReferenceSpaceEvent: transform property
=========================================

 The read-only `XRReferenceSpaceEvent` property
 **`transform`** indicates the position and orientation of the
 affected `referenceSpace`'s
 native origin after the changes the event represents are applied. The
 `transform` is defined using the old coordinate system, which allows it to be
 used to convert coordinates from the pre-event coordinate system to the post-event
 coordinate system.

Value
-----

 An `XRRigidTransform` object providing a transform that can be used to
 convert coordinates from the pre-event coordinate system to the post-event coordinate
 system.

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

 Upon receiving a `reset` event, you can apply the `transform` to
 cached position or orientation information to shift them into the updated coordinate
 system. Alternatively, you can just discard any cached positional information and
 recompute from scratch. The approach you take will depend on your needs.

 For details on what causes a `reset` event and how to respond, see the
 `reset` event's documentation.

Examples
--------

 This example handles the `reset` event by walking through all the objects in
 a scene, updating each object's position by multiplying it with the event's given
 `transform`. The scene is represented by a `scene` object, with
 all the objects in an array called `objects` within it.

```js
xrReferenceSpace.addEventListener("reset", (event) => {
  for (const obj of scene.objects) {
    mat4.multiply(obj.transform, obj.transform, event.transform);
  }
});
```

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

| Specification |
| --- |
| WebXR Device API # dom-xrreferencespaceevent-transform |

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

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


XRReferenceSpaceEvent: XRReferenceSpaceEvent() constructor - Web APIs

XRReferenceSpaceEvent: XRReferenceSpaceEvent() constructor
==========================================================

 The **`XRReferenceSpaceEvent()`**
 constructor is used to create a new `XRReferenceSpaceEvent` object, which
 represents an event regarding the state of a WebXR reference space object,
 `XRReferenceSpace`.

Syntax
------

```js
new XRReferenceSpaceEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `reset`.

`options`

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`referenceSpace`

The `XRReferenceSpace` from which the event originates.

`transform`

An `XRRigidTransform` which maps the old coordinate system (from before the changes indicated by this event) to the new coordinate system.

### Return value

A new `XRReferenceSpaceEvent` object, initialized as defined by the input parameters.

Examples
--------

This simple snippet calls the constructor to create a new reference space event of type `reset`.

```js
let refSpaceEvent = new XRReferenceSpaceEvent("reset", {
  referenceSpace: myRefSpace,
  transform: myTransform,
});
```

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

| Specification |
| --- |
| WebXR Device API # dom-xrreferencespaceevent-xrreferencespaceevent |

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

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


XRReferenceSpaceEvent: referenceSpace property - Web APIs

XRReferenceSpaceEvent: referenceSpace property
==============================================

 The read-only `XRReferenceSpaceEvent` property
 **`referenceSpace`** specifies the reference space which is the
 originator of the event.

Value
-----

An `XRReferenceSpace` indicating the source of the event.

Examples
--------

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

| Specification |
| --- |
| WebXR Device API # dom-xrreferencespaceevent-referencespace |

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

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


DOMRect: DOMRect() constructor - Web APIs

DOMRect: DOMRect() constructor
==============================

The **`DOMRect()`** constructor creates a new `DOMRect` object.

Syntax
------

```js
new DOMRect(x, y, width, height)
```

### Parameters

`x`

The `x` coordinate of the `DOMRect`'s origin.

`y`

The `y` coordinate of the `DOMRect`'s origin.

`width`

The width of the `DOMRect`.

`height`

The height of the `DOMRect`.

### Return value

A new `DOMRect` object.

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

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrect-domrect |

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

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

See also
--------

* `DOMPoint`
* `DOMRect`
* `DOMRect.fromRect()`


DOMRect: fromRect() static method - Web APIs

DOMRect: fromRect() static method
=================================

 The **`fromRect()`** static method of the
 `DOMRect` object creates a new `DOMRect`
 object with a given location and dimensions.

Syntax
------

```js
DOMRect.fromRect()
DOMRect.fromRect(rectangle)
```

### Parameters

`rectangle` Optional

 An object specifying the location and dimensions of a rectangle. All properties
 default to `0`. The properties are:

* `x`: The coordinate of the left side of the rectangle.
* `y`: The coordinate of the top side of the rectangle.
* `width`: The width of the rectangle.
* `height`: The height of the rectangle.

### Return value

An instance of `DOMRect`.

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

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrect-fromrect |

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

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


GPUPipelineLayout: label property - Web APIs

GPUPipelineLayout: label property
=================================

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

 The **`label`** property of the
 `GPUPipelineLayout` interface provides a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUDevice.createPipelineLayout()` call, or you can get and set it directly on the `GPUPipelineLayout` object.

Value
-----

A string. If this has not been previously set as described above, it will be an empty string.

Examples
--------

Setting and getting a label via `GPUPipelineLayout.label`:

```js
// ...

const pipelineLayout = device.createPipelineLayout({
  bindGroupLayouts: [bindGroupLayout],
});

pipelineLayout.label = "mypipelinelayout";

console.log(pipelineLayout.label); // "mypipelinelayout";
```

Setting a label via the originating `GPUDevice.createPipelineLayout()` call, and then getting it via `GPUPipelineLayout.label`:

```js
// ...

const pipelineLayout = device.createPipelineLayout({
  bindGroupLayouts: [bindGroupLayout],
  label: "mypipelinelayout",
});

console.log(pipelineLayout.label); // "mypipelinelayout";
```

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

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

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

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

See also
--------

* The WebGPU API


FontFaceSet: load() method - Web APIs

FontFaceSet: load() method
==========================

The `load()` method of the `FontFaceSet` forces all the fonts given in parameters to be loaded.

Syntax
------

```js
load(font)
load(font, text)
```

### Parameters

`font`

a font specification using the CSS value syntax, e.g. "italic bold 16px Roboto"

`text`

limit the font faces to those whose Unicode range contains at least one of the characters in text. This does not check for individual glyph coverage.

### Return value

 A `Promise` fulfilled with an `Array` of loaded `FontFace` objects. The
 promise is fulfilled when all the fonts are loaded; it is rejected if one of the fonts
 failed to load.

Examples
--------

The following example returns a promise that will be fulfilled or rejected according the success of loading "MyFont". The code in `then()` can assume the availability of that font.

```js
document.fonts.load("12px MyFont", "ß").then(/\* ... \*/);
```

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-load |

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

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


FontFaceSet: add() method - Web APIs

FontFaceSet: add() method
=========================

The **`add()`** method of the `FontFaceSet` interface adds a new font to the set.

Syntax
------

```js
add(font)
```

### Parameters

`font`

A `FontFace` to be added to the set.

### Return value

A new `FontFaceSet`.

### Exceptions

`InvalidModificationError` `DOMException`

Thrown if this font is already included via the CSS `@font-face` rule.

Examples
--------

In the following example a new `FontFace` object is created and then added to the `FontFaceSet`.

```js
const font = new FontFace("MyFont", "url(myFont.woff2)");
document.fonts.add(font);
```

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-add |

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

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


FontFaceSet: loadingdone event - Web APIs

FontFaceSet: loadingdone event
==============================

The `loadingdone` event fires when the document has loaded all fonts.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("loadingdone", (event) => {});

onloadingdone = (event) => {};
```

Example
-------

In the following example, when the font `Ephesis` has finished loading, "Font loading complete" is printed to the console.

```js
document.fonts.onloadingdone = () => {
  console.log("Font loading complete");
};

(async () => {
  await document.fonts.load("16px Ephesis");
})();
```

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-onloadingdone |

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

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


FontFaceSet: check() method - Web APIs

FontFaceSet: check() method
===========================

The `check()` method of the `FontFaceSet` returns `true` if you can render some text using the given font specification without attempting to use any fonts in this `FontFaceSet` that are not yet fully loaded. This means you can use the font specification without causing a font swap.

Syntax
------

```js
check(font)
check(font, text)
```

### Parameters

`font`

a font specification using the syntax for the CSS `font` property, for example `"italic bold 16px Roboto"`

`text`

limit the font faces to those whose Unicode range contains at least one of the characters in text. This does not check for individual glyph coverage.

### Return value

A `Boolean` value that is `true` if rendering text with the given font specification will not attempt to use any fonts in this `FontFaceSet` that are not yet fully loaded.

This means that all fonts in this `FontFaceSet` that are matched by the given font specification have a `status` property set to `"loaded"`.

Otherwise, this function returns `false`.

Examples
--------

In the following example, we create a new `FontFace` and add it to the `FontFaceSet`:

```js
const font = new FontFace(
  "molot",
  "url(https://interactive-examples.mdn.mozilla.net/media/fonts/molot.woff2)",
  {
    style: "normal",
    weight: "400",
    stretch: "condensed",
  },
);

document.fonts.add(font);
```

### Unloaded fonts

The font is not yet loaded, so `check("12px molot")` returns `false`, indicating that if we try to use the given font specification, we will trigger a font load:

```js
console.log(document.fonts.check("12px molot"));
// false: the matching font is in the set, but is not yet loaded
```

### System fonts

If we specify only a system font in the argument to `check()`, it returns `true`, because we can use the system font without loading any fonts from the set:

```js
console.log(document.fonts.check("12px Courier"));
// true: the matching font is a system font
```

### Nonexistent fonts

If we specify a font that is not in the `FontFaceSet` and is not a system font, `check()` returns `true`, because in this situation we will not rely on any fonts from the set:

```js
console.log(document.fonts.check("12px i-dont-exist"));
// true: the matching font is a nonexistent font
```

**Note:** In this situation Chrome incorrectly returns `false`. This can make fingerprinting easier, because an attacker can easily test which system fonts the browser has.

### System and unloaded fonts

If we specify both a system font and a font in the set that is not yet loaded, then `check()` returns `false`:

```js
console.log(document.fonts.check("12px molot, Courier"));
// false: `molot` is in the set but not yet loaded
```

### Fonts that are loading

If we specify a font from the set that is still loading, `check()` returns `false`:

```js
function check() {
  font.load();
  console.log(document.fonts.check("12px molot"));
  // false: font is still loading
  console.log(font.status);
  // "loading"
}

check();
```

### Fonts that have loaded

If we specify a font from the set that has loaded, `check()` returns `true`:

```js
async function check() {
  await font.load();
  console.log(document.fonts.check("12px molot"));
  // true: font has finished loading
  console.log(font.status);
  // "loaded"
}

check();
```

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-check |

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

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


FontFaceSet: has() method - Web APIs

FontFaceSet: has() method
=========================

The **`has()`** method of the `FontFaceSet` interface returns a `Boolean` asserting whether an element is present with the given value.

Syntax
------

```js
has(value)
```

### Parameters

`value`

The value to test for in the `FontFaceSet` object.

### Return value

A `Boolean`, `true` if `value` exists in the `FontFaceSet`.

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

#### No specification found

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

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

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


FontFaceSet: values() method - Web APIs

FontFaceSet: values() method
============================

The **`values()`** method of the `FontFaceSet` interface returns a new iterator object that yields the values for each element in the `FontFaceSet` object in insertion order.

Syntax
------

```js
values()
```

### Parameters

None.

### Return value

A new iterator object containing the values for each element in the given `FontFaceSet`, in insertion order.

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

#### No specification found

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

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

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


FontFaceSet: clear() method - Web APIs

FontFaceSet: clear() method
===========================

The **`clear()`** method of the `FontFaceSet` interface removes all fonts added via this interface. Fonts added with the `@font-face` rule are not removed.

Syntax
------

```js
clear()
```

### Parameters

None.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-clear |

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

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


FontFaceSet: ready property - Web APIs

FontFaceSet: ready property
===========================

The `ready` read-only property of the `FontFaceSet` interface returns a `Promise` that resolves to the given `FontFaceSet`.

The promise will only resolve once the document has completed loading fonts, layout operations are completed, and no further font loads are needed.

Value
-----

A `Promise` that resolves to the given `FontFaceSet`.

Examples
--------

In the following example the value of `ready` is printed to the console once the promise has resolved.

```js
async function isReady() {
  let ready = await document.fonts.ready;
  console.log(ready);
}

isReady();
```

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-ready |

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

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


FontFaceSet: forEach() method - Web APIs

FontFaceSet: forEach() method
=============================

The **`forEach()`** method of the `FontFaceSet` interface executes a provided function for each value in the `FontFaceSet` object.

Syntax
------

```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### Parameters

`callbackFn`

Function to execute for each element, taking three arguments:

`value`, `key`

The current element being processed in the `FontFaceSet`. As there are no keys in a `FontFaceSet`, the value is passed for both arguments.

`set`

The `FontFaceSet` which `forEach()` was called on.

`thisArg`

Value to use as `this` when executing `callbackFn`.

### Return value

Undefined.

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

#### No specification found

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

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

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


FontFaceSet: loading event - Web APIs

FontFaceSet: loading event
==========================

The `loading` event fires when the document begins loading fonts.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("loading", (event) => {});

onloading = (event) => {};
```

Example
-------

In the following example, when the font `Ephesis` starts to load, "Font is loading…" is printed to the console.

```js
document.fonts.onloading = () => {
  console.log("Font is loading");
};

(async () => {
  await document.fonts.load("16px Ephesis");
})();
```

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-onloading |

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

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


FontFaceSet: entries() method - Web APIs

FontFaceSet: entries() method
=============================

The **`entries()`** method of the `FontFaceSet` interface returns a new `Iterator` object, containing an array of `[value,value]` for each element in the `FontFaceSet`.

Syntax
------

```js
entries()
```

### Parameters

None.

### Return value

A new iterator object that contains an array of `[value, value]` for each element in the `CustomStateSet`, in insertion order.

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

#### No specification found

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

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

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