SVGAnimatedPreserveAspectRatio - Web APIs

SVGAnimatedPreserveAspectRatio
==============================

SVG animated preserveAspectRatio interface
------------------------------------------

The `SVGAnimatedPreserveAspectRatio` interface is used for attributes of type `SVGPreserveAspectRatio` which can be animated.

### Interface overview

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

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

`SVGAnimatedPreserveAspectRatio.baseVal` Read only

A `SVGPreserveAspectRatio` that represents the base value of the given attribute before applying any animations.

`SVGAnimatedPreserveAspectRatio.animVal` Read only

A `SVGPreserveAspectRatio` that represents the current animated value of the given attribute. If the given attribute is not currently being animated, then the `SVGPreserveAspectRatio` will have the same contents as `baseVal`. The object referenced by `animVal` is always distinct from the one referenced by `baseVal`, even when the attribute is not animated.

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

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

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

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


XMLHttpRequest - Web APIs

XMLHttpRequest
==============

`XMLHttpRequest` (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.

EventTarget

XMLHttpRequestEventTarget

XMLHttpRequest
Despite its name, `XMLHttpRequest` can be used to retrieve any type of data, not just XML.

If your communication needs to involve receiving event data or message data from a server, consider using server-sent events through the `EventSource` interface. For full-duplex communication, WebSockets may be a better choice.

**Note:** This feature is available in Web Workers, except for Service Workers

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

`XMLHttpRequest()`

The constructor initializes an `XMLHttpRequest`. It must be called before any other method calls.

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

*This interface also inherits properties of `XMLHttpRequestEventTarget` and of `EventTarget`.*

`XMLHttpRequest.readyState` Read only

Returns a number representing the state of the request.

`XMLHttpRequest.response` Read only

Returns an `ArrayBuffer`, a `Blob`, a `Document`, a JavaScript object, or a string, depending on the value of `XMLHttpRequest.responseType`, that contains the response entity body.

`XMLHttpRequest.responseText` Read only

Returns a string that contains the response to the request as text, or `null` if the request was unsuccessful or has not yet been sent.

`XMLHttpRequest.responseType`

Specifies the type of the response.

`XMLHttpRequest.responseURL` Read only

Returns the serialized URL of the response or the empty string if the URL is null.

`XMLHttpRequest.responseXML` Read only

Returns a `Document` containing the response to the request, or `null` if the request was unsuccessful, has not yet been sent, or cannot be parsed as XML or HTML. Not available in Web Workers.

`XMLHttpRequest.status` Read only

Returns the HTTP response status code of the request.

`XMLHttpRequest.statusText` Read only

Returns a string containing the response string returned by the HTTP server. Unlike `XMLHttpRequest.status`, this includes the entire text of the response message ("`OK`", for example).

**Note:** According to the HTTP/2 specification RFC 7540, section 8.1.2.4: Response Pseudo-Header Fields, HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.

`XMLHttpRequest.timeout`

The time in milliseconds a request can take before automatically being terminated.

`XMLHttpRequest.upload` Read only

A `XMLHttpRequestUpload` representing the upload process.

`XMLHttpRequest.withCredentials`

Returns `true` if cross-site `Access-Control` requests should be made using credentials such as cookies or authorization headers; otherwise `false`.

### Non-standard properties

`XMLHttpRequest.channel` Read only

The channel used by the object when performing the request.

`XMLHttpRequest.mozAnon` Read only

A boolean. If true, the request will be sent without cookie and authentication headers.

`XMLHttpRequest.mozSystem` Read only

A boolean. If true, the same origin policy will not be enforced on the request.

`XMLHttpRequest.mozBackgroundRequest`

A boolean. It indicates whether or not the object represents a background service request.

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

`XMLHttpRequest.abort()`

Aborts the request if it has already been sent.

`XMLHttpRequest.getAllResponseHeaders()`

Returns all the response headers, separated by CRLF, as a string, or `null` if no response has been received.

`XMLHttpRequest.getResponseHeader()`

Returns the string containing the text of the specified header, or `null` if either the response has not yet been received or the header doesn't exist in the response.

`XMLHttpRequest.open()`

Initializes a request.

`XMLHttpRequest.overrideMimeType()`

Overrides the MIME type returned by the server.

`XMLHttpRequest.send()`

Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.

`XMLHttpRequest.setRequestHeader()`

Sets the value of an HTTP request header. You must call `setRequestHeader()` after `open()`, but before `send()`.

Events
------

`abort`

 Fired when a request has been aborted, for example because the program called `XMLHttpRequest.abort()`.
 Also available via the `onabort` event handler property.

`error`

 Fired when the request encountered an error.
 Also available via the `onerror` event handler property.

`load`

 Fired when an `XMLHttpRequest` transaction completes successfully.
 Also available via the `onload` event handler property.

`loadend`

 Fired when a request has completed, whether successfully (after `load`) or unsuccessfully (after `abort` or `error`).
 Also available via the `onloadend` event handler property.

`loadstart`

 Fired when a request has started to load data.
 Also available via the `onloadstart` event handler property.

`progress`

 Fired periodically when a request receives more data.
 Also available via the `onprogress` event handler property.

`readystatechange`

 Fired whenever the `readyState` property changes.
 Also available via the `onreadystatechange` event handler property.

`timeout`

 Fired when progress is terminated due to preset time expiring.
 Also available via the `ontimeout` event handler property.

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

| Specification |
| --- |
| XMLHttpRequest Standard # interface-xmlhttprequest |

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

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

See also
--------

* `XMLSerializer`: Serializing a DOM tree into XML
* Using XMLHttpRequest
* Fetch API


CSSVariableReferenceValue - Web APIs

CSSVariableReferenceValue
=========================

The **`CSSVariableReferenceValue`** interface of the CSS\_Object\_Model#css\_typed\_object\_model allows you to create a custom name for a built-in CSS value. This object functionality is sometimes called a "CSS variable" and serves the same purpose as the `var()` function. The custom name must begin with two dashes.

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

`CSSVariableReferenceValue()`

Creates a new `CSSVariableReferenceValue` object.

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

`CSSVariableReferenceValue.variable`

Returns the custom name passed to the constructor.

`CSSVariableReferenceValue.fallback` Read only

Returns the built-in CSS value for the custom name.

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

None.

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

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

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

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


CSSSupportsRule - Web APIs

CSSSupportsRule
===============

The **`CSSSupportsRule`** interface represents a single CSS `@supports` at-rule.

CSSRule

CSSGroupingRule

CSSConditionRule

CSSSupportsRuleInstance properties
-------------------

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

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

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

Examples
--------

 The CSS includes a CSS feature query using the `@supports` at-rule, containing one style rule. This will be the first CSSRule returned by `document.styleSheets[0].cssRules`.
 `myRules[0]` therefore returns a `CSSSupportsRule` object.

```css
@supports (display: grid) {
  body {
    color: blue;
  }
}
```

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // a CSSSupportsRule representing the feature query.
```

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

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # the-csssupportsrule-interface |

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

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

See also
--------

* `@supports`


MessageChannel - Web APIs

MessageChannel
==============

The **`MessageChannel`** interface of the Channel Messaging API allows us to create a new message channel and send data through it via its two `MessagePort` properties.

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

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

`MessageChannel()`

Returns a new `MessageChannel` object with two new `MessagePort` objects.

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

`MessageChannel.port1` Read only

Returns port1 of the channel.

`MessageChannel.port2` Read only

Returns port2 of the channel.

Example
-------

In the following example, you can see a new channel being created using the `MessageChannel()` constructor.

When the IFrame has loaded, we register an `onmessage` handler for `MessageChannel.port1` and transfer `MessageChannel.port2` to the IFrame using the `window.postMessage` method along with a message.

When a message is received back from the IFrame, the `onMessage` function outputs the message to a paragraph.

```js
const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;

  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "\*", [
    channel.port2,
  ]);
}

// Handle messages received on port1
function onMessage(e) {
  output.innerHTML = e.data;
}
```

For a full working example, see our channel messaging basic demo on GitHub (run it live too).

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

| Specification |
| --- |
| HTML Standard # message-channels |

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

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

See also
--------

* Using channel messaging


PopStateEvent - Web APIs

PopStateEvent
=============

**`PopStateEvent`** is an interface for the `popstate` event.

 A `popstate` event is dispatched to the window every time the active history
 entry changes between two history entries for the same document. If the history entry
 being activated was created by a call to `history.pushState()` or was
 affected by a call to `history.replaceState()`, the `popstate`
 event's `state` property contains a copy of the history entry's state object.

Event

PopStateEventConstructor
-----------

`PopStateEvent()`

Creates a new `PopStateEvent` object.

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

*This interface also inherits the properties of its parent, `Event`.*

`PopStateEvent.state` Read only

Returns a copy of the information that was provided to `pushState()` or `replaceState()`.

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

*This interface has no methods of its own, but inherits the methods of its parent, `Event`.*

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

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

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

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

See also
--------

* `popstate` event
* `hashchange` event


CSSNumericArray - Web APIs

CSSNumericArray
===============

The **`CSSNumericArray`** interface of the CSS\_Object\_Model#css\_typed\_object\_model contains a list of `CSSNumericValue` objects.

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

`CSSNumericArray.length` Read only

Returns how many `CSSNumericValue` objects are contained within the `CSSNumericArray`.

Examples
--------

To do.

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

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

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

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


RTCDataChannel - Web APIs

RTCDataChannel
==============

The **`RTCDataChannel`** interface represents a network channel which can be used for bidirectional peer-to-peer transfers of arbitrary data. Every data channel is associated with an `RTCPeerConnection`, and each peer connection can have up to a theoretical maximum of 65,534 data channels (the actual limit may vary from browser to browser).

To create a data channel and ask a remote peer to join you, call the `RTCPeerConnection`'s `createDataChannel()` method. The peer being invited to exchange data receives a `datachannel` event (which has type `RTCDataChannelEvent`) to let it know the data channel has been added to the connection.

`RTCDataChannel` is a transferable object.

EventTarget

RTCDataChannelInstance properties
-------------------

*Also inherits properties from `EventTarget`.*

`binaryType`

 A string specifying the type of object
 that should be used to represent binary data received on the `RTCDataChannel`.
 Values are the same as allowed on the `WebSocket.binaryType` property:
 `blob` if `Blob` objects are being used,
 or `arraybuffer` if `ArrayBuffer` objects are being used.
 The default is `blob`.

`bufferedAmount` Read only

 Returns the number of bytes of data
 currently queued to be sent over the data channel.

`bufferedAmountLowThreshold`

 Specifies the number of bytes of buffered outgoing data that is considered "low".
 The default value is 0.

`id` Read only

 Returns an ID number (between 0 and 65,534)
 which uniquely identifies the `RTCDataChannel`.

`label` Read only

 Returns a string that contains a name describing the data channel.
 These labels are not required to be unique.

`maxPacketLifeTime` Read only

 Returns the amount of time,
 in milliseconds,
 the browser is allowed to take to attempt to transmit a message,
 as set when the data channel was created,
 or `null`.

`maxRetransmits` Read only

 Returns the maximum number of times
 the browser should try to retransmit a message before giving up,
 as set when the data channel was created,
 or `null`, which indicates that there is no maximum.

`negotiated` Read only

 Indicates
 whether the `RTCDataChannel`'s connection was negotiated by the Web app
 (`true`)
 or by the WebRTC layer (`false`).
 The default is `false`.

`ordered` Read only

 Indicates whether or not the data channel guarantees in-order delivery of messages;
 the default is `true`, which indicates that the data channel is indeed ordered.

`protocol` Read only

 Returns a string containing the name of the subprotocol in use.
 If no protocol was specified
 when the data channel was created,
 then this property's value is the empty string (`""`).

`readyState` Read only

 Returns a string
 which indicates the state of the data channel's underlying data connection.
 It can have one of the following values:
 `connecting`, `open`, `closing`, or `closed`.

### Obsolete properties

`reliable` Read only
Deprecated

Non-standard

Indicates whether or not the data channel is *reliable*.

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

*Also inherits methods from `EventTarget`.*

`close()`

 Closes the `RTCDataChannel`.
 Either peer is permitted to call this method
 to initiate closure of the channel.

`send()`

Sends data across the data channel to the remote peer.

Events
------

`bufferedamountlow`

 Sent
 when the number of bytes of data in the outgoing data buffer
 falls below the value specified by `bufferedAmountLowThreshold`.

`close`

Sent when the underlying data transport closes.

`closing`

Sent when the underlying data transport is about to start closing.

`error`

Sent when an error occurs on the data channel.

`message`

 Sent when a message has been received from the remote peer.
 The message contents can be found
 in the event's `data` property.

`open`

 Sent when the data channel is first opened,
 or when an existing data channel's underlying connection re-opens.

Data format
-----------

The underlying data format is defined by the IEEE specification SDP Offer/Answer Procedures for SCTP over DTLS Transport(RFC 8841). The current format specifies its protocol as either `"UDP/DTLS/SCTP"` (UDP carrying DTLS carrying SCTP) or `"TCP/DTLS/SCTP"` (TCP carrying DTLS carrying SCTP). Older browsers may only specify `"DTLS/SCTP"`.

Example
-------

```js
const pc = new RTCPeerConnection();
const dc = pc.createDataChannel("my channel");

dc.onmessage = (event) => {
  console.log(`received: ${event.data}`);
};

dc.onopen = () => {
  console.log("datachannel open");
};

dc.onclose = () => {
  console.log("datachannel close");
};
```

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

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

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

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

See also
--------

* WebRTC API


RTCInboundRtpStreamStats - Web APIs

RTCInboundRtpStreamStats
========================

The **`RTCInboundRtpStreamStats`** dictionary of the WebRTC API is used to report statistics related to the receiving end of an RTP stream on the local end of the `RTCPeerConnection`.

The statistics can be obtained by iterating the `RTCStatsReport` returned by `RTCPeerConnection.getStats()` or `RTCRtpReceiver.getStats()` until you find a report with the `type` of `inbound-rtp`.

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

`averageRtcpInterval`

A floating-point value indicating the average RTCP interval between two consecutive compound RTCP packets.

`bytesReceived`

A 64-bit integer which indicates the total number of bytes that have been received so far for this media source.

`fecPacketsDiscarded`

An integer value indicating the number of RTP Forward Error Correction (FEC) packets which have been received for this source, for which the error correction payload was discarded.

`fecPacketsReceived`

An integer value indicating the total number of RTP FEC packets received for this source. This counter may also be incremented when FEC packets arrive in-band along with media content; this can happen with Opus, for example.

`firCount`

An integer value which indicates the total number of Full Intra Request (FIR) packets which this receiver has sent to the sender. This is an indicator of how often the stream has lagged, requiring frames to be skipped in order to catch up. This value is only available for video streams.

`framesDecoded`

A long integer value indicating the total number of frames of video which have been correctly decoded so far for this media source. This is the number of frames that would have been rendered if none were dropped. *Only valid for video streams.*

`lastPacketReceivedTimestamp`

 A `DOMHighResTimeStamp` indicating the time at which the last packet was received for this source.
 The `timestamp` property, on the other hand, indicates the time at which the statistics object was generated.

`nackCount`

An integer value indicating the total number of Negative ACKnolwedgement (NACK) packets this receiver has sent.

`packetsDuplicated`

An integer value indicating the total number of packets that have been discarded because they were duplicates. These packets are not counted by `packetsDiscarded`.

`packetsFailedDecryption`

An integer totaling the number of RTP packets that could not be decrypted. These packets are not counted by `packetsDiscarded`.

`perDscpPacketsReceived`

A record of key-value pairs with strings as the keys mapped to 32-bit integer values, each indicating the total number of packets this receiver has received on this RTP stream from this source for each Differentiated Services Code Point (DSCP).

`pliCount`

An integer specifying the number of times the receiver has notified the sender that some amount of encoded video data for one or more frames has been lost, using Picture Loss Indication (PLI) packets. This is only available for video streams.

`qpSum`

A 64-bit value containing the sum of the QP values for every frame decoded by this RTP receiver. You can determine the average QP per frame by dividing this value by `framesDecoded`. *Valid only for video streams.*

`receiverId`

A string indicating which identifies the `RTCAudioReceiverStats` or `RTCVideoReceiverStats` object associated with the stream's receiver. This ID is stable across multiple calls to `getStats()`.

`remoteId`

A string which identifies the `RTCRemoteOutboundRtpStreamStats` object that provides statistics for the remote peer for this same SSRC. This ID is stable across multiple calls to `getStats()`.

`sliCount`

An integer indicating the number of times the receiver sent a Slice Loss Indication (SLI) frame to the sender to tell it that one or more consecutive (in terms of scan order) video macroblocks have been lost or corrupted. Available only for video streams.

`trackIdentifier`

A string that contains the `id` value of the `MediaStreamTrack` associated with the inbound stream.

`trackId`
Deprecated

A string which identifies the statistics object representing the receiving track; this object is one of two types: `RTCReceiverAudioTrackAttachmentStats` or `RTCReceiverVideoTrackAttachmentStats`. This ID is stable across multiple calls to `getStats()`.

### Statistics measured at the receiver of an RTP stream

These statistics are measured at the receiving end of an RTP stream, regardless of whether it's local or remote.

`packetsReceived`

The total number of RTP packets received for this synchronizing source, including retransmissions.

`packetsLost`

 The total number of RTP packets lost for this synchronizing source.
 Note that this can be negative if more packets are received than sent.

`jitter`

Packet jitter for this synchronizing source, measured in seconds.

### Standard fields included for all media types

`codecId`

A string which uniquely identifies the object which was inspected to produce the `RTCCodecStats` object associated with this RTP stream.

`kind`

A string whose value is `"audio"` if the associated `MediaStreamTrack` is audio-only or `"video"` if the track contains video. This value will match that of the media type indicated by `RTCCodecStats.codec`, as well as the track's `kind` property. Previously called `mediaType`.

`ssrc`

The 32-bit integer which identifies the source of the RTP packets this `RTCRtpStreamStats` object covers. This value is generated per the RFC 3550 specification.

`trackId`

A string which uniquely identifies the `RTCMediaStreamTrackStats` object representing the associated `MediaStreamTrack`. This is *not* the same as the value of `MediaStreamTrack.id`.

`transportId`

A string uniquely identifying the object which was inspected to produce the `RTCTransportStats` object associated with this RTP stream.

### Local-only measurements

 These properties are computed locally, and are only available to the device receiving the media stream.
 Their primary purpose is to examine the error resiliency of the connection, as they provide information about lost packets, lost frames, and how heavily compressed the data is.

`firCount`

A count of the total number of Full Intra Request (FIR) packets received by the sender. This statistic is only available to the device which is receiving the stream and is only available for video tracks. A FIR packet is sent by the receiving end of the stream when it falls behind or has lost packets and is unable to continue decoding the stream; the sending end of the stream receives the FIR packet and responds by sending a full frame instead of a delta frame, thereby letting the receiver "catch up." The higher this number is, the more often a problem of this nature arose, which can be a sign of network congestion or an overburdened receiving device.

`nackCount`

The number of times the receiver notified the sender that one or more RTP packets has been lost by sending a Negative ACKnowledgement (NACK, also called "Generic NACK") packet to the sender. This value is only available to the receiver.

`pliCount`

The number of times the receiving end of the stream sent a Picture Loss Indication (PLI) packet to the sender, indicating that it has lost some amount of encoded video data for one or more frames. Only the receiver has this value, and it's only valid for video tracks.

`qpSum`

The sum of the Quantization Parameter (QP) values associated with every frame received to date on the video track described by this `RTCRtpStreamStats` object. In general, the higher this number is, the more heavily compressed the video track was. Combined with `RTCReceivedRtpStreamStats.framesDecoded` or `RTCInboundRtpStreamStats.framesEncoded`, you can approximate the average QP over those frames, keeping in mind that codecs often vary the quantizer values even within frames. Also keep in mind that the values of QP can vary from codec to codec, so this value is only potentially useful when compared against the same codec.

### Common instance properties

The following properties are common to all WebRTC statistics objects.

`id`

A string that uniquely identifies the object that is being monitored to produce this set of statistics.

`timestamp`

A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.

`type`

A string with the value `"inbound-rtp"`, indicating the type of statistics that the object contains.

Examples
--------

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstatstype-inbound-rtp |

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

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

See also
--------

* `RTCStatsReport`


IdleDetector - Web APIs

IdleDetector
============

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

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

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

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

The **`IdleDetector`** interface of the Idle
Detection API provides methods and events for detecting user activity on a device or screen.

This interface requires a secure context.

EventTarget

IdleDetectorConstructor
-----------

`IdleDetector()`
Experimental

Creates a new `IdleDetector` object.

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

`IdleDetector.userState` Read only
Experimental

Returns a string indicating whether the users has interacted with either the screen or the device within the threshold provided to `start()`, one of `"active"` or `"idle"`. This attribute returns `null` before `start()` is called.

`IdleDetector.screenState` Read only
Experimental

Returns a string indicating whether the screen is locked, one of `"locked"` or `"unlocked"`. This attribute returns `null` before `start()` is called.

Events
------

`change`
Experimental

Called when the value of `userState` or `screenState` has changed.

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

`IdleDetector.requestPermission()`
Experimental

 Returns a `Promise` that resolves when the user has chosen
 whether to grant the origin access to their idle state. Resolves with
 `"granted"` on acceptance and `"denied"` on refusal.

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

`IdleDetector.start()`
Experimental

 Returns a `Promise` that resolves when the detector starts listening for
 changes in the user's idle state. `userState` and `screenState` are given
 initial values. This method takes an optional `options` object with the `threshold` in
 milliseconds where inactivity should be reported and `signal` for an
 `AbortSignal` to abort the idle detector.

Examples
--------

 The following example shows creating a detector and logging changes to the
 user's idle state. A button is used to get the necessary user activation before
 requesting permission.

```js
const controller = new AbortController();
const signal = controller.signal;

startButton.addEventListener("click", async () => {
  if ((await IdleDetector.requestPermission()) !== "granted") {
    console.error("Idle detection permission denied.");
    return;
  }

  try {
    const idleDetector = new IdleDetector();
    idleDetector.addEventListener("change", () => {
      const userState = idleDetector.userState;
      const screenState = idleDetector.screenState;
      console.log(`Idle change: ${userState}, ${screenState}.`);
    });

    await idleDetector.start({
      threshold: 60\_000,
      signal,
    });
    console.log("IdleDetector is active.");
  } catch (err) {
    // Deal with initialization errors like permission denied,
    // running outside of top-level frame, etc.
    console.error(err.name, err.message);
  }
});

stopButton.addEventListener("click", () => {
  controller.abort();
  console.log("IdleDetector is stopped.");
});
```

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

| Specification |
| --- |
| Idle Detection API # api-idledetector |

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

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


Web Authentication API - Web APIs

Web Authentication API
======================

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

The Web Authentication API (WebAuthn) is an extension of the Credential Management API that enables strong authentication with public key cryptography, enabling passwordless authentication and secure multi-factor authentication (MFA) without SMS texts.

**Note:** Passkeys are a significant use case for web authentication; see Create a passkey for passwordless logins and Sign in with a passkey through form autofill for implementation details. See also Google Identity > Passwordless login with passkeys.

WebAuthn concepts and usage
---------------------------

WebAuthn uses asymmetric (public-key) cryptography instead of passwords or SMS texts for registering, authenticating, and multi-factor authentication with websites. This has some benefits:

* **Protection against phishing:** An attacker who creates a fake login website can't login as the user because the signature changes with the origin of the website.
* **Reduced impact of data breaches:** Developers don't need to hash the public key, and if an attacker gets access to the public key used to verify the authentication, it can't authenticate because it needs the private key.
* **Invulnerable to password attacks:** Some users might reuse passwords, and an attacker may obtain the user's password for another website (e.g. via a data breach). Also, text passwords are much easier to brute-force than a digital signature.

Many websites already have pages that allow users to register new accounts or sign into an existing account, and WebAuthn acts as a replacement or enhancement for the authentication part of the system. It extends the Credential Management API, abstracting communication between the user agent and an authenticator and providing the following new functionality:

* When `navigator.credentials.create()` is used with the `publicKey` option, the user agent creates new credentials via an authenticator — either for registering a new account or for associating a new asymmetric key pair with an existing account.
    + When registering a new account, these credentials are stored on a server (also referred to as a service or a relying party) and can be subsequently used to log a user in.
    + The asymmetric key pair is stored in the authenticator, which can then be used to authenticate a user with a relying party for example during MFA. The authenticator may be embedded into the user agent, into an operating system, such as Windows Hello, or it may be a physical token, such as a USB or Bluetooth Security Key.
* When `navigator.credentials.get()` is used with the `publicKey` option, the user agent uses an existing set of credentials to authenticate to a relying party (either as the primary login or to provide an additional factor during MFA as described above).

In their most basic forms, both `create()` and `get()` receive a very large random number called the "challenge" from the server and return the challenge signed by the private key back to the server. This proves to the server that a user has the private key required for authentication without revealing any secrets over the network.

**Note:** The "challenge" must be a buffer of random information at least 16 bytes in size.

### Creating a key pair and registering a user

To illustrate how the credential creation process works, let's describe the typical flow that occurs when a user wants to register a credential to a relying party:

1. The relying party server sends user and relying party information to the web app handling the registration process, along with the "challenge", using an appropriate secure mechanism (for example Fetch or XMLHttpRequest).

**Note:** The format for sharing information between the relying party server and the web app is up to the application.
 A recommended approach is to exchange JSON type representation objects for credentials and credential options.
 Convenience methods have been created in `PublicKeyCredential` for converting from the JSON representations to the form required by the authentication APIs: `parseCreationOptionsFromJSON()`, `parseRequestOptionsFromJSON()` and `PublicKeyCredential.toJSON()`.
2. The web app initiates generation of a new credential via the authenticator, on behalf of the relying party, via a `navigator.credentials.create()` call. This call is passed a `publicKey` option specifying device capabilities, e.g., whether the device provides its own user authentication (for example with biometrics).
 A typical `create()` call might look like so:

```js
let credential = await navigator.credentials.create({
  publicKey: {
    challenge: new Uint8Array([117, 61, 252, 231, 191, 241, ...]),
    rp: { id: "acme.com", name: "ACME Corporation" },
    user: {
      id: new Uint8Array([79, 252, 83, 72, 214, 7, 89, 26]),
      name: "jamiedoe",
      displayName: "Jamie Doe"
    },
    pubKeyCredParams: [ {type: "public-key", alg: -7} ]
  }
});
```

The parameters of the `create()` call are passed to the authenticator, along with a SHA-256 hash that is signed to ensure that it isn't tampered with.
3. After the authenticator obtains user consent, it generates a key pair and returns the public key and optional signed attestation to the web app. This is provided when the `Promise` returned by the `create()` call fulfills, in the form of a `PublicKeyCredential` object instance (the `PublicKeyCredential.response` property contains the attestation information).
4. The web app forwards the `PublicKeyCredential` to the server, again using an appropriate mechanism.
5. The server stores the public key, coupled with the user identity, to remember the credential for future authentications. During this process, it performs a series of checks to ensure that the registration was complete and not tampered with. These include:
    1. Verifying that the challenge is the same as the challenge that was sent.
    2. Ensuring that the origin was the origin expected.
    3. Validating that the signature and attestation are using the correct certificate chain for the specific model of the authenticator used to generated the key par in the first place.

**Warning:** Attestation provides a way for a relying party to determine the provenance of an authenticator. Relying parties should not attempt to maintain allowlists of authenticators.

### Authenticating a user

After a user has registered with WebAuthn, they can authenticate (i.e., login) with the service. The authentication flow looks similar to the registration flow, the main differences being that authentication:

1. Doesn't require user or relying party information
2. Creates an assertion using the previously-generated key pair for the service, rather than the authenticator's key pair.

A typical authentication flow is as follows:

1. The relying party generates a "challenge" and sends it to the user agent using an appropriate secure mechanism, along with a list of relying party and user credentials. It can also indicate where to look for the credential, e.g., on a local built-in authenticator, or on an external one over USB, BLE, etc.
2. The browser asks the authenticator to sign the challenge via a `navigator.credentials.get()` call, which is passed the credentials in a `publicKey` option.
 A typical `get()` call might look like so:

```js
let credential = await navigator.credentials.get({
  publicKey: {
    challenge: new Uint8Array([139, 66, 181, 87, 7, 203, ...]),
    rpId: "acme.com",
    allowCredentials: [{
      type: "public-key",
      id: new Uint8Array([64, 66, 25, 78, 168, 226, 174, ...])
    }],
    userVerification: "required",
  }
});
```

The parameters of the `get()` call are passed to the authenticator to handle the authentication.
3. If the authenticator contains one of the given credentials and is able to successfully sign the challenge, it returns a signed assertion to the web app after receiving user consent. This is provided when the `Promise` returned by the `get()` call fulfills, in the form of a `PublicKeyCredential` object instance (the `PublicKeyCredential.response` property contains the assertion information).
4. The web app forwards the signed assertion to the relying party server for the relying party to validate. The validation checks include:
    1. Using the public key that was stored during the registration request to validate the signature by the authenticator.
    2. Ensuring that the challenge that was signed by the authenticator matches the challenge that was generated by the server.
    3. Checking that the Relying Party ID is the one expected for this service.
5. Once verified by the server, the authentication flow is considered successful.
Controlling access to the API
-----------------------------

The availability of WebAuthn can be controlled using a Permissions Policy, specifying two directives in particular:

* `publickey-credentials-create`: Controls the availability of `navigator.credentials.create()` with the `publicKey` option.
* `publickey-credentials-get`: Controls the availability of `navigator.credentials.get()` with the `publicKey` option.

Both directives have a default allowlist value of `"self"`, meaning that by default these methods can be used in top-level document contexts. In addition, `get()` can be used in nested browsing contexts loaded from the same origin as the top-most document; `create()` on the other hand cannot be used in `<iframe>`s.

**Note:** Where a policy forbids use of these methods, the `promises` returned by them will reject with a `SecurityError` `DOMException`.

### Basic access control

If you wish to allow access to a specific subdomain only, you could provide it like this:

```http
Permissions-Policy: publickey-credentials-get=("https://subdomain.example.com")
Permissions-Policy: publickey-credentials-create=("https://subdomain.example.com")
```

### Allowing embedded `get()` calls in an `<iframe>`

If you wish to authenticate with `get()` in an `<iframe>`, there are a couple of steps to follow:

1. The site embedding the relying party site must provide permission via an `allow` attribute:

```html
<iframe
 src="https://auth.provider.com"
 allow="publickey-credentials-get \*" />
```

2. The relying party site must provide permission for the above access via a `Permissions-Policy` header:

```http
Permissions-Policy: publickey-credentials-get=\*
```

Or to allow only a specific URL to embed the relying party site in an `<iframe>`:

```http
Permissions-Policy: publickey-credentials-get=("https://subdomain.example.com")
```

Interfaces
----------

`AuthenticatorAssertionResponse`

Provides proof to a service that an authenticator has the necessary key pair to successfully handle an authentication request initiated by a `CredentialsContainer.get()` call. Available in the `response` property of the `PublicKeyCredential` instance obtained when the `get()` `Promise` fulfills.

`AuthenticatorAttestationResponse`

The result of a WebAuthn credential registration (i.e., a `CredentialsContainer.create()` call). It contains information about the credential that the server needs to perform WebAuthn assertions, such as its credential ID and public key. Available in the `response` property of the `PublicKeyCredential` instance obtained when the `create()` `Promise` fulfills.

`AuthenticatorResponse`

The base interface for `AuthenticatorAttestationResponse` and `AuthenticatorAssertionResponse`.

`PublicKeyCredential`

Provides information about a public key / private key pair, which is a credential for logging in to a service using an un-phishable and data-breach resistant asymmetric key pair instead of a password. Obtained when the `Promise` returned via a `create()` or `get()` call fulfills.

Extensions to other interfaces
------------------------------

`CredentialsContainer.create()`, the `publicKey` option

Calling `create()` with a `publicKey` option initiates the creation of new asymmetric key credentials via an authenticator, as explained above.

`CredentialsContainer.get()`, the `publicKey` option

Calling `get()` with a `publicKey` option instructs the user agent uses an existing set of credentials to authenticate to a relying party.

Examples
--------

### Demo sites

* Mozilla Demo website and its source code.
* Google Demo website and its source code.
* WebAuthn.io demo website and its source code.
* github.com/webauthn-open-source and its client source code and server source code
### Usage example

**Note:** For security reasons, the Web Authentication API calls (`create()` and `get()`) are canceled if the browser window loses focus while the call is pending.

```js
// sample arguments for registration
const createCredentialDefaultArgs = {
  publicKey: {
    // Relying Party (a.k.a. - Service):
    rp: {
      name: "Acme",
    },
    // User:
    user: {
      id: new Uint8Array(16),
      name: "carina.p.anand@example.com",
      displayName: "Carina P. Anand",
    },
    pubKeyCredParams: [
      {
        type: "public-key",
        alg: -7,
      },
    ],
    attestation: "direct",
    timeout: 60000,
    challenge: new Uint8Array([
      // must be a cryptographically random number sent from a server
      0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17, 0x1a,
      0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15, 0x7e, 0x38,
      0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
    ]).buffer,
  },
};

// sample arguments for login
const getCredentialDefaultArgs = {
  publicKey: {
    timeout: 60000,
    // allowCredentials: [newCredential] // see below
    challenge: new Uint8Array([
      // must be a cryptographically random number sent from a server
      0x79, 0x50, 0x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15, 0x67,
      0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x78, 0x2e, 0xd5, 0x6f, 0x81, 0x26,
      0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50,
    ]).buffer,
  },
};

// register / create a new credential
navigator.credentials
  .create(createCredentialDefaultArgs)
  .then((cred) => {
    console.log("NEW CREDENTIAL", cred);
    // normally the credential IDs available for an account would come from a server
    // but we can just copy them from above…
    const idList = [
      {
        id: cred.rawId,
        transports: ["usb", "nfc", "ble"],
        type: "public-key",
      },
    ];
    getCredentialDefaultArgs.publicKey.allowCredentials = idList;
    return navigator.credentials.get(getCredentialDefaultArgs);
  })
  .then((assertion) => {
    console.log("ASSERTION", assertion);
  })
  .catch((err) => {
    console.log("ERROR", err);
  });
```

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

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # iface-pkcredential |

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

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


PerformanceMeasure - Web APIs

PerformanceMeasure
==================

**`PerformanceMeasure`** is an *abstract* interface for `PerformanceEntry` objects with an `entryType` of "`measure`". Entries of this type are created by calling `performance.measure()` to add a *named* `DOMHighResTimeStamp` (the *measure*) between two *marks* to the browser's *performance timeline*.

PerformanceEntry

PerformanceMeasure

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

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

This interface defines:

`PerformanceMeasure.detail`

Contains arbitrary metadata about the measure.

In addition, it extends the following `PerformanceEntry` properties by qualifying/constraining the properties as follows:

`PerformanceEntry.entryType`

Returns "`measure`".

`PerformanceEntry.name`

Returns the name given to the measure when it was created via a call to `performance.measure()`.

`PerformanceEntry.startTime`

Returns a `timestamp` given to the measure when `performance.measure()` was called.

`PerformanceEntry.duration`

Returns a `DOMHighResTimeStamp` that is the duration of the measure (typically, the measure's end mark timestamp minus its start mark timestamp).

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

This interface has no methods.

Example
-------

See the example in Using the User Timing API.

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

| Specification |
| --- |
| User Timing # performancemeasure |

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

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

See also
--------

* User Timing (Overview)
* Using the User Timing API


trustedTypes global property - Web APIs

trustedTypes global property
============================

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

The global **`trustedTypes`** read-only property returns the `TrustedTypePolicyFactory` object associated with the global object, providing the entry point for using the Trusted Types API.

Value
-----

An `TrustedTypePolicyFactory` object.

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

| Specification |
| --- |
| Trusted Types # extensions-to-the-windoworworkerglobalscope-interface |

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

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


CSSMathMin - Web APIs

CSSMathMin
==========

The **`CSSMathMin`** interface of the CSS\_Object\_Model#css\_typed\_object\_model represents the CSS `min()` function. It inherits properties and methods from its parent `CSSNumericValue`.

CSSStyleValue

CSSNumericValue

CSSMathValue

CSSMathMinConstructor
-----------

`CSSMathMin()`
Experimental

Creates a new `CSSMathMin` object.

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

`CSSMathMin.values` Read only

Returns a `CSSNumericArray` object which contains one or more `CSSNumericValue` objects.

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

*The interface may also inherit methods from its parent interface, `CSSMathValue`.*

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

*The interface may also inherit methods from its parent interface, `CSSMathValue`.*

Examples
--------

To do

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

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

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

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


StaticRange - Web APIs

StaticRange
===========

The DOM **`StaticRange`** interface extends `AbstractRange` to provide a method to specify a range of content in the DOM whose contents don't update to reflect changes which occur within the DOM tree.

This interface offers the same set of properties and methods as `AbstractRange`.

`AbstractRange` and `StaticRange` are not available from web workers.

AbstractRange

StaticRangeConstructor
-----------

`StaticRange()`

Creates a new `StaticRange` object given options specifying the default values for its properties.

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

*The properties below are inherited from its parent interface, `AbstractRange`.*

`StaticRange.collapsed` Read only

Returns a Boolean value that is `true` if the range's start and end positions are the same, resulting in a range of length 0.

`StaticRange.endContainer` Read only

Returns the DOM `Node` which contains the ending point of the range. The offset into the node at which the end position is located is indicated by `endOffset`.

`StaticRange.endOffset` Read only

Returns an integer value indicating the offset into the node given by `endContainer` at which the last character of the range is found.

`StaticRange.startContainer` Read only

Returns the DOM `Node` which contains the starting point of the range (which is in turn identified by `startOffset`.

`StaticRange.startOffset` Read only

Returns an integer value indicating the offset into the node specified by `startContainer` at which the first character of the range is located.

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

A DOM range specifies a span of content in a document, potentially beginning inside one node (or element) and ending inside another one. Unlike a `Range`, a `StaticRange` represents a range which is fixed in time; it does not change to try to keep the same content within it as the document changes. If any changes are made to the DOM, the actual data contained within the range specified by a `StaticRange` may change. This lets the user agent avoid a lot of work that is unnecessary if the web app or site doesn't need a live-updating range.

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

| Specification |
| --- |
| DOM Standard # interface-staticrange |

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

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

See also
--------

* Live updating range of content within the DOM: `Range`
* `AbstractRange`, the abstract interface from which all ranges are derived


SVGFEColorMatrixElement - Web APIs

SVGFEColorMatrixElement
=======================

The **`SVGFEColorMatrixElement`** interface corresponds to the `<feColorMatrix>` element.

EventTarget

Node

Element

SVGElement

SVGFEColorMatrixElementConstants
---------

| Name | Value | Description |
| --- | --- | --- |
| `SVG_FECOLORMATRIX_TYPE_UNKNOWN` | 0 |
 The type is not one of predefined types. It is invalid to attempt to
 define a new value of this type or to attempt to switch an existing
 value to this type.
  |
| `SVG_FECOLORMATRIX_TYPE_MATRIX` | 1 | Corresponds to the `matrix` value. |
| `SVG_FECOLORMATRIX_TYPE_SATURATE` | 2 | Corresponds to the `saturate` value. |
| `SVG_FECOLORMATRIX_TYPE_HUEROTATE` | 3 | Corresponds to `hueRotate` value. |
| `SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA` | 4 | Corresponds to `luminanceToAlpha` value. |

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

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

`SVGFEColorMatrixElement.height` Read only

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

`SVGFEColorMatrixElement.in1` Read only

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

`SVGFEColorMatrixElement.result` Read only

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

`SVGFEColorMatrixElement.type` Read only

An `SVGAnimatedEnumeration` corresponding to the `type` attribute of the given element. It takes one of the `SVG_FECOLORMATRIX_TYPE_*` constants defined on this interface.

`SVGFEColorMatrixElement.values` Read only

An `SVGAnimatedNumberList` corresponding to the `values` attribute of the given element.

`SVGFEColorMatrixElement.width` Read only

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

`SVGFEColorMatrixElement.x` Read only

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

`SVGFEColorMatrixElement.y` Read only

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

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

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

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

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

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

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

See also
--------

* `<feColorMatrix>`


SpeechRecognitionResult - Web APIs

SpeechRecognitionResult
=======================

The **`SpeechRecognitionResult`** interface of the Web Speech API represents a single recognition match, which may contain multiple `SpeechRecognitionAlternative` objects.

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

`SpeechRecognitionResult.isFinal` Read only

A boolean value that states whether this result is final (true) or not (false) — if so, then this is the final time this result will be returned; if not, then this result is an interim result, and may be updated later on.

`SpeechRecognitionResult.length` Read only

Returns the length of the "array" — the number of `SpeechRecognitionAlternative` objects contained in the result (also referred to as "n-best alternatives".)

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

`SpeechRecognitionResult.item`

A standard getter that allows `SpeechRecognitionAlternative` objects within the result to be accessed via array syntax.

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 # speechreco-result |

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

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

See also
--------

* Web Speech API


XRRenderState - Web APIs

XRRenderState
=============

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

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

The **`XRRenderState`** interface of the WebXR Device API contains configurable values which affect how the imagery generated by an `XRSession` gets composited. These properties include the range of distances from the viewer within which content should be rendered, the vertical field of view (for inline presentations), and a reference to the `XRWebGLLayer` being used as the target for rendering the scene prior to it being presented on the XR device's display or displays.

When you apply changes using the `XRSession` method `updateRenderState()`, the specified changes take effect after the current animation frame has completed, but before the next one begins.

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

`XRRenderState.baseLayer` Read only
Experimental

The `XRWebGLLayer` from which the browser's compositing system obtains the image for the XR session.

`XRRenderState.depthFar` Read only
Experimental

The distance, in meters, of the **far clip plane** from the viewer. The far clip plane is the plane which is parallel to the display beyond which rendering of the scene no longer takes place. This, essentially, specifies the maximum distance the user can see.

`XRRenderState.depthNear` Read only
Experimental

The distance, in meters, of the **near clip plane** from the viewer. The near clip plane is the plane, parallel to the display, at which rendering of the scene begins. Any closer to the viewer than this, and no portions of the scene are drawn.

`XRRenderState.inlineVerticalFieldOfView` Read only
Experimental

The default vertical field of view, defined in radians, to use when the session is in `inline` mode. `null` for all immersive sessions.

`XRRenderState.layers` Read only
Experimental

An ordered array containing `XRLayer` objects that are displayed by the XR compositor.

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

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

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

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

See also
--------

* `XRSession.renderState`
* `XRSession.updateRenderState()`
* `navigator.xr.requestSession()`


CSSMathMax - Web APIs

CSSMathMax
==========

The **`CSSMathMax`** interface of the CSS\_Object\_Model#css\_typed\_object\_model represents the CSS `max()` function. It inherits properties and methods from its parent `CSSNumericValue`.

CSSStyleValue

CSSNumericValue

CSSMathValue

CSSMathMaxConstructor
-----------

`CSSMathMax()`
Experimental

Creates a new `CSSMathMax` object.

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

`CSSMathMax.values` Read only

Returns a `CSSNumericArray` object which contains one or more `CSSNumericValue` objects.

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

*The interface may also inherit methods from its parent interface, `CSSMathValue`.*

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

*The interface may also inherit methods from its parent interface, `CSSMathValue`.*

Examples
--------

To do

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

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

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

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


CSSScopeRule - Web APIs

CSSScopeRule
============

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

The **`CSSScopeRule`** interface of the CSS Object Model represents a CSS `@scope` at-rule.

CSSRule

CSSGroupingRule

CSSScopeRuleInstance properties
-------------------

*This interface inherits properties from its parent, `CSSGroupingRule`.*

`end`
Experimental

Returns a string containing the value of the `@scope` at-rule's scope limit.

`start`
Experimental

Returns a string containing the value of the `@scope` at-rule's scope root.

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

*This interface inherits methods from its parent, `CSSGroupingRule`.*

Examples
--------

### Accessing @scope information in JavaScript

Assuming the following is the only stylesheet attached to a document:

```css
@scope (.outer) to (.inner) {
  :scope {
    background: yellow;
  }
}
```

The following JavaScript could be used to access information about the contained `@scope` block:

```js
const scopeBlock = document.styleSheets[0].cssRules[0];

console.log(scopeBlock.start); // Returns ".outer"
console.log(scopeBlock.end); // Returns ".inner"
```

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 6 # cssscoperule |

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

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

See also
--------

* `@scope`
* `:scope`


MediaRecorderErrorEvent - Web APIs

MediaRecorderErrorEvent
=======================

**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 **`MediaRecorderErrorEvent`** interface represents errors returned by the MediaStream Recording API. It is an `Event` object that encapsulates a reference to a `DOMException` describing the error that occurred.

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

`MediaStreamRecorderEvent()`
Deprecated

Non-standard

Creates and returns a new `MediaRecorderErrorEvent` event object with the given parameters.

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

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

`error` Read only
Deprecated

Non-standard

A `DOMException` containing information about the error that occurred.

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

*Inherits methods from its parent interface, `Event`*.

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

This feature is no longer part of any specification.

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

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


CanMakePaymentEvent - Web APIs

CanMakePaymentEvent
===================

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

The **`CanMakePaymentEvent`** interface of the Payment Handler API is the event object for the `canmakepayment` event, fired on a payment app's service worker to check whether it is ready to handle a payment. Specifically, it is fired when the merchant website calls `new PaymentRequest()`.

Event

ExtendableEvent

CanMakePaymentEventConstructor
-----------

`CanMakePaymentEvent()`
Experimental

Creates a new `CanMakePaymentEvent` object instance.

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

`respondWith()`
Experimental

Enables the service worker to respond appropriately to signal whether it is ready to handle payments.

Examples
--------

```js
self.addEventListener("canmakepayment", (e) => {
  e.respondWith(
    new Promise((resolve, reject) => {
      someAppSpecificLogic()
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    }),
  );
});
```

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

| Specification |
| --- |
| Payment Handler API # the-canmakepaymentevent |

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

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

See also
--------

* Payment Handler API
* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts


SVGGeometryElement - Web APIs

SVGGeometryElement
==================

The `SVGGeometryElement` interface represents SVG elements whose rendering is defined by geometry with an equivalent path, and which can be filled and stroked. This includes paths and the basic shapes.

EventTarget

Node

Element

SVGElement

SVGGraphicsElement

SVGGeometryElementInstance properties
-------------------

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

`SVGGeometryElement.pathLength` Read only

This property reflects the `pathLength` attribute.

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

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

`SVGGeometryElement.isPointInFill()`

Determines whether a given point is within the fill shape of an element. Normal hit testing rules apply; the value of the `pointer-events` property on the element determines whether a point is considered to be within the fill.

`SVGGeometryElement.isPointInStroke()`

Determines whether a given point is within the stroke shape of an element. Normal hit testing rules apply; the value of the `pointer-events` property on the element determines whether a point is considered to be within the stroke.

`SVGGeometryElement.getTotalLength()`

Returns the user agent's computed value for the total length of the path in user units.

`SVGGeometryElement.getPointAtLength()`

Returns the point at a given distance along the path.

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

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

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

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


Web Animations API - Web APIs

Web Animations API
==================

The **Web Animations API** allows for synchronizing and timing changes to the presentation of a Web page, i.e. animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model.

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

The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements. To get more information on the concepts behind the API and how to use it, read Using the Web Animations API.

Web Animations interfaces
-------------------------

`Animation`

Provides playback controls and a timeline for an animation node or source. Can take an object created with the `KeyframeEffect()` constructor.

`KeyframeEffect`

Describes sets of animatable properties and values, called **keyframes** and their timing options. These can then be played using the `Animation()` constructor.

`AnimationTimeline`

Represents the timeline of animation. This interface exists to define timeline features (inherited by `DocumentTimeline` and future timeline objects) and is not itself accessed by developers.

`AnimationEvent`

Actually part of CSS Animations.

`DocumentTimeline`

Represents animation timelines, including the default document timeline (accessed using the `Document.timeline` property).

Extensions to other interfaces
------------------------------

The Web Animations API adds some new features to `document` and `element`.

### Extensions to the `Document` interface

`document.timeline`

The `DocumentTimeline` object representing the default document timeline.

`document.getAnimations()`

Returns an Array of `Animation` objects currently in effect on elements in the `document`.

### Extensions to the `Element` interface

`Element.animate()`

A shortcut method for creating and playing an animation on an element. It returns the created `Animation` object instance.

`Element.getAnimations()`

Returns an Array of `Animation` objects currently affecting an element or which are scheduled to do so in future.

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

| Specification |
| --- |
| Web Animations  |

See also
--------

* Using the Web Animations API
* Web Animations demos
* Polyfill
* Firefox's current implementation: AreWeAnimatedYet
* Browser support test


DirectoryEntrySync - Web APIs

DirectoryEntrySync
==================

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

**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 `DirectoryEntrySync` interface represents a directory in a file system. It includes methods for creating, reading, looking up, and recursively removing files in a directory.

**Warning:** This interface is deprecated and is no more on the standard track.
 *Do not use it anymore.* Use the File and Directory Entries API instead.

Basic concepts
--------------

If you want to create subdirectories, you have to create each child directory in sequence. If you try to create a directory using a full path that includes parent directories that do not exist yet, you get an error. So create the hierarchy by recursively adding a new path after creating the parent directory.

### Example

The `getFile()` method returns a `FileEntrySync`, which represents a file in the file system. The following creates an empty file called `logs.txt` in the root directory.

```js
const fileEntry = fs.root.getFile("logs.txt", { create: true });
```

The `getDirectory()` method returns a `DirectoryEntrySync`, which represents a file in the file system. The following creates a new directory called `project_dir` in the root directory.

```js
const dirEntry = fs.root.getDirectory("project\_dir", { create: true });
```

Method overview
---------------

* createReader()
* getFile()
* getDirectory()
* removeRecursively()
Instance methods
----------------

### createReader()

Creates a new `DirectoryReaderSync` to read entries from this directory.

#### Syntax

```js
createReader();
```

##### Returns

`DirectoryReaderSync`

Represents a directory in a file system.

##### Parameter

None

##### Exceptions

This method can raise a `DOMException` with the following codes:

| Exception | Description |
| --- | --- |
| `NOT_FOUND_ERR` | The directory does not exist. |
| `SECURITY_ERR` | The browser determined that it was not safe to look up the metadata. [ todo: Explain why ] |

### getFile()

Depending on how you've set the `options` parameter, the method either creates a file or looks up an existing file.

#### Syntax

```js
getFile(path)
getFile(path, options)
```

##### Parameter

`path`

Either an absolute path or a relative path from the directory to the file to be looked up or created. You cannot create a file whose immediate parent does not exist. Create the parent directory first.

`options`

(optional) An object literal describing the behavior of the method. If the file does not exist, it is created.

| Object literal | Condition | Result |
| --- | --- | --- |
| `create: true``exclusive: true` | Path already exists | An error is thrown. |
| `create: true``exclusive: false` | Path doesn't exist and no other error occurs | A file is created. If a file already exists, no error is thrown. |
| `create: false`(`exclusive` is ignored) | Path exists | The file is returned. |
| `create: false`(`exclusive` is ignored) | Path doesn't exist | An error is thrown. |
| `create: false`(`exclusive` is ignored) | Path exists, but is a directory | An error is thrown. |

##### Returns

`FileEntrySync`

Represents a file in a file system.

##### Exceptions

This method can raise a `DOMException` with the following codes:

| Exception | Description |
| --- | --- |
| `ENCODING_ERR` | The path supplied is invalid. |
| `NOT_FOUND_ERR` | The path was structurally correct, but refers to a resource that does not exist. |
| `NO_MODIFICATION_ALLOWED_ERR` | This is a permission issue. The target directory or file is not writable. |
| `PATH_EXISTS_ERR` | The file already exists. You cannot create another one with the same path. |
| `QUOTA_EXCEEDED_ERROR` | The operation would cause the application to exceed its storage quota. |
| `SECURITY_ERR` | The application does not have permission to access the element referred to by path. [ todo: Explain why ] |
| `TYPE_MISMATCH_ERR` | The path supplied exists, but it is not a directory. |

### getDirectory()

Creates or looks up a directory. The method is similar to `getFile()` with DirectoryEntrySync being passed.

#### Syntax

```js
getDirectory(path)
getDirectory(path, options)
```

##### Parameter

`path`

Either an absolute path or a relative path from the directory to the file to be looked up or created. You cannot create a file whose immediate parent does not exist. Create the parent directory first.

`options`

(optional) An object literal describing the behavior of the method if the file does not exist.

| Object literal | Condition | Result |
| --- | --- | --- |
| `create: true``exclusive: true` | Path already exists | An error is thrown. |
| `create: true``exclusive: false` | Path doesn't exist and no other error occurs | A directory is created. If a file already exists, no error is thrown. |
| `create: false`(`exclusive` is ignored) | Path exists | The directory is returned. |
| `create: false`(`exclusive` is ignored) | Path doesn't exist | An error is thrown. |
| `create: false`(`exclusive` is ignored) | Path exists, but is a directory | An error is thrown. |

##### Returns

`DirectoryEntrySync`

Represents a directory in a file system.

##### Exceptions

This method can raise a `DOMException` with the following codes:

| Exception | Description |
| --- | --- |
| `ENCODING_ERR` | The path supplied is invalid. |
| `NOT_FOUND_ERR` | The path was structurally correct, but refers to a resource that does not exist. |
| `NO_MODIFICATION_ALLOWED_ERR` | This is a permission issue. The target directory or file is not writable. |
| `PATH_EXISTS_ERR` | The file already exists. You cannot create another one with the same path. |
| `QUOTA_EXCEEDED_ERROR` | The operation would cause the application to exceed its storage quota. |
| `SECURITY_ERR` | The application does not have permission to access the element referred to by path. [ todo: Explain why ] |
| `TYPE_MISMATCH_ERR` | The path supplied exists, but it is not a directory. |

### removeRecursively()

Deletes a directory and all of its contents. You cannot delete the root directory of a file system.

If you delete a directory that contains a file that cannot be removed or if an error occurs while the deletion is in progress, some of the contents might not be deleted. Catch these cases with error callbacks and retry the deletion.

#### Syntax

```js
removeRecursively()
```

##### Parameter

None

##### Returns

`undefined`
##### Exceptions

This method can raise a `DOMException` with the following codes:

| Exception | Description |
| --- | --- |
| `NOT_FOUND_ERR` | The target directory does not exist. |
| `INVALID_STATE_ERR` |
 This directory is not longer valid for some reason other than being
 deleted.
 [todo: Explain more ] |
| `NO_MODIFICATION_ALLOWED_ERR` |
 One of the following is not writable: the directory, its parent
 directory, and some of the content in the directory.
  |
| `SECURITY_ERR` |
 The application does not have permission to access the target directory,
 its parent, or some of its contents.
  |

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

 This feature is not part of any current specification. It is no longer on track to become a standard.
 Use the File and Directory Entries API instead.

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

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

See also
--------

* File and Directory Entries API
* Introduction to the File and Directory Entries API


MediaDeviceInfo - Web APIs

MediaDeviceInfo
===============

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

The **`MediaDeviceInfo`** interface of the Media Capture and Streams API contains information that describes a single media input or output device.

The list of devices obtained by calling `navigator.mediaDevices.enumerateDevices()` is an array of `MediaDeviceInfo` objects, one per media device.

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

`MediaDeviceInfo.deviceId` Read only

Returns a string that is an identifier for the represented device that is persisted across sessions. It is un-guessable by other applications and unique to the origin of the calling application. It is reset when the user clears cookies (for Private Browsing, a different identifier is used that is not persisted across sessions).

`MediaDeviceInfo.groupId` Read only

Returns a string that is a group identifier. Two devices have the same group identifier if they belong to the same physical device — for example a monitor with both a built-in camera and a microphone.

`MediaDeviceInfo.kind` Read only

Returns an enumerated value that is either `"videoinput"`, `"audioinput"` or `"audiooutput"`.

`MediaDeviceInfo.label` Read only

Returns a string describing this device (for example "External USB Webcam").

**Note:** For security reasons, the `label` field is always blank unless an active media stream exists *or* the user has granted persistent permission for media device access. The set of device labels could otherwise be used as part of a fingerprinting mechanism to identify a user.

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

`MediaDeviceInfo.toJSON()`

Returns a JSON representation of the `MediaDeviceInfo` object.

Example
-------

Here's an example that uses `enumerateDevices()` to get a list of devices.

```js
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
} else {
  // List cameras and microphones.
  navigator.mediaDevices
    .enumerateDevices()
    .then((devices) => {
      devices.forEach((device) => {
        console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
      });
    })
    .catch((err) => {
      console.log(`${err.name}: ${err.message}`);
    });
}
```

This might produce:

```bash
videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```

or if one or more media streams are active, or if persistent permissions have been granted:

```bash
videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```

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

| Specification |
| --- |
| Media Capture and Streams # device-info |

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

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

See also
--------

* WebRTC API
* `navigator.mediaDevices.enumerateDevices()`
* `navigator.mediaDevices.getUserMedia()`


CSSNumericValue - Web APIs

CSSNumericValue
===============

The **`CSSNumericValue`** interface of the CSS Typed Object Model API represents operations that all numeric values can perform.

CSSStyleValue

CSSNumericValueInterfaces based on CSSNumericValue
-----------------------------------

Below is a list of interfaces based on the CSSNumericValue interface.

* `CSSMathClamp`
* `CSSMathInvert`
* `CSSMathMax`
* `CSSMathMin`
* `CSSMathNegate`
* `CSSMathProduct`
* `CSSMathSum`
* `CSSMathValue`
* `CSSNumericArray`
* `CSSUnitValue`
Instance properties
-------------------

None.

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

`CSSNumericValue.parse`

Allows a `CSSNumericValue` to be constructed directly from a string containing CSS.

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

`CSSNumericValue.add`

Adds a supplied number to the `CSSNumericValue`.

`CSSNumericValue.sub`

Subtracts a supplied number from the `CSSNumericValue`.

`CSSNumericValue.mul`

Multiplies the `CSSNumericValue` by the supplied value.

`CSSNumericValue.div`

Divides the `CSSNumericValue` by the supplied value.

`CSSNumericValue.min`

Returns the minimum value passed

`CSSNumericValue.max`

Returns the maximum value passed

`CSSNumericValue.equals`

*True* if all the values are the exact same type and value, in the same order. Otherwise, *false.*

`CSSNumericValue.to`

Converts `value` into another one with the specified *unit.*

`CSSNumericValue.toSum`

Converts an existing `CSSNumericValue` into a `CSSMathSum` object with values of a specified unit.

`CSSNumericValue.type`

Returns the type of `CSSNumericValue`, one of `angle`, `flex`, `frequency`, `length`, `resolution`, `percent`, `percentHint`, or `time`.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # numeric-value |

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

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

See also
--------

* `CSSImageValue`
* `CSSKeywordValue`
* `CSSPositionValue`
* `CSSTransformValue`
* `CSSUnparsedValue`


StylePropertyMap - Web APIs

StylePropertyMap
================

The **`StylePropertyMap`** interface of the CSS Typed Object Model API provides a representation of a CSS declaration block that is an alternative to `CSSStyleDeclaration`.

StylePropertyMapReadOnly

StylePropertyMapInstance properties
-------------------

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

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

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

`StylePropertyMap.append()`

Adds a new CSS declaration to the `StylePropertyMap` with the given property and value.

`StylePropertyMap.clear()`

Removes all declarations in the `StylePropertyMap`.

`StylePropertyMap.delete()`

Removes the CSS declaration with the given property.

`StylePropertyMap.set()`

Changes the CSS declaration with the given property.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # the-stylepropertymap |

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

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


SVGFEDistantLightElement - Web APIs

SVGFEDistantLightElement
========================

The **`SVGFEDistantLightElement`** interface corresponds to the `<feDistantLight>` element.

EventTarget

Node

Element

SVGElement

SVGFEDistantLightElementInstance properties
-------------------

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

`SVGFEDistantLightElement.azimuth` Read only

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

`SVGFEDistantLightElement.elevation` Read only

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

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

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

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

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

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

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

See also
--------

* `<feDistantLight>`


RTCIdentityAssertion - Web APIs

RTCIdentityAssertion
====================

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

The **`RTCIdentityAssertion`** interface of the WebRTC API represents the identity of a remote peer of the current connection. If no peer has yet been set and verified, then this interface returns `null`. Once set it can't be changed.

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

`RTCIdentityAssertion.idp`
Experimental

Indicates the provider of the identity assertion.

`RTCIdentityAssertion.name`
Experimental

Indicates the name of the identity assertion provider.

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

| Specification |
| --- |
| Identity for WebRTC 1.0 # rtcidentityassertion-interface |

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

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


SVG API - Web APIs

SVG API
=======

SVG provides elements for circles, rectangles, and simple and complex curves. The elements' attribute values specify how these must be drawn. The **SVG API** is the subset of the **DOM** connecting these SVG elements and their attribute values to scripts or programming languages by representing them in memory. The SVG API thus provides methods that allow programmatic access to the SVG elements and their attribute values.

The SVG API is a set of interfaces that have been categorized into the following broad categories:

1. The element interfaces provide access to the properties of SVG elements and methods to manipulate them.
2. The static data type interfaces provide access to element attribute values and methods to manipulate them.
3. For attributes that can be animated, the animated data type interfaces provide read only access to the current animated value of an attribute.
4. The Synchronized Multimedia Integration Language (SMIL) interfaces
5. Others
Interfaces
----------

### SVG element interfaces

* `SVGAElement`
* `SVGAnimationElement`
* `SVGAnimateElement`
* `SVGAnimateMotionElement`
* `SVGAnimateTransformElement`
* `SVGCircleElement`
* `SVGClipPathElement`
* `SVGComponentTransferFunctionElement`
* `SVGCursorElement`
* `SVGDefsElement`
* `SVGDescElement`
* `SVGElement`
* `SVGEllipseElement`
* `SVGFEBlendElement`
* `SVGFEColorMatrixElement`
* `SVGFEComponentTransferElement`
* `SVGFECompositeElement`
* `SVGFEConvolveMatrixElement`
* `SVGFEDiffuseLightingElement`
* `SVGFEDisplacementMapElement`
* `SVGFEDistantLightElement`
* `SVGFEDropShadowElement`
* `SVGFEFloodElement`
* `SVGFEFuncAElement`
* `SVGFEFuncBElement`
* `SVGFEFuncGElement`
* `SVGFEFuncRElement`
* `SVGFEGaussianBlurElement`
* `SVGFEImageElement`
* `SVGFEMergeElement`
* `SVGFEMergeNodeElement`
* `SVGFEMorphologyElement`
* `SVGFEOffsetElement`
* `SVGFEPointLightElement`
* `SVGFESpecularLightingElement`
* `SVGFESpotLightElement`
* `SVGFETileElement`
* `SVGFETurbulenceElement`
* `SVGFilterElement`
* `SVGForeignObjectElement`
* `SVGGElement`
* `SVGGeometryElement`
* `SVGGradientElement`
* `SVGGraphicsElement`
* `SVGHatchElement`
Experimental
* `SVGHatchpathElement`
Experimental
* `SVGImageElement`
* `SVGLinearGradientElement`
* `SVGLineElement`
* `SVGMarkerElement`
Experimental
* `SVGMaskElement`
* `SVGMetadataElement`
* `SVGMPathElement`
* `SVGPathElement`
* `SVGPatternElement`
* `SVGPolylineElement`
* `SVGPolygonElement`
* `SVGRadialGradientElement`
* `SVGRectElement`
* `SVGScriptElement`
* `SVGSetElement`
* `SVGStopElement`
* `SVGStyleElement`
* `SVGSVGElement`
* `SVGSwitchElement`
* `SVGSymbolElement`
* `SVGTextContentElement`
* `SVGTextElement`
* `SVGTextPathElement`
* `SVGTextPositioningElement`
* `SVGTitleElement`
* `SVGTSpanElement`
* `SVGUseElement`
* `SVGViewElement`
### SVG data type interfaces

Here are the DOM APIs for data types used in the definitions of SVG properties and attributes.

#### Static type

* `SVGAngle`
* `SVGElementInstance`
* `SVGElementInstanceList`
* `SVGLength`
* `SVGLengthList`
* `SVGNameList`
* `SVGNumber`
* `SVGNumberList`
* `SVGPaint`
* `SVGPreserveAspectRatio`
* `SVGStringList`
* `SVGTransform`
* `SVGTransformList`

#### Animated type

* `SVGAnimatedAngle`
* `SVGAnimatedBoolean`
* `SVGAnimatedEnumeration`
* `SVGAnimatedInteger`
* `SVGAnimatedLength`
* `SVGAnimatedLengthList`
* `SVGAnimatedNumber`
* `SVGAnimatedNumberList`
* `SVGAnimatedPreserveAspectRatio`
* `SVGAnimatedRect`
* `SVGAnimatedString`
* `SVGAnimatedTransformList`
### SMIL-related interfaces

* `ElementTimeControl`
* `TimeEvent`
### Other SVG interfaces

* `GetSVGDocument`
* `ShadowAnimation`
* `SVGDocument`
* `SVGUnitTypes`
* `SVGUseElementShadowRoot`
Specifications
--------------

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

See also
--------

* Getting Started with SVG


BeforeUnloadEvent - Web APIs

BeforeUnloadEvent
=================

The **`BeforeUnloadEvent`** interface represents the event object for the `beforeunload` event, which is fired when the current window, contained document, and associated resources are about to be unloaded.

See the `beforeunload` event reference for detailed guidance on using this event.

Event

BeforeUnloadEventInstance properties
-------------------

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

`returnValue`
Deprecated

When set to a truthy value, triggers a browser-controlled confirmation dialog asking users to confirm if they want to leave the page when they try to close or reload it. This is a legacy feature, and best practice is to trigger the dialog by invoking `event.preventDefault()`, while also setting `returnValue` to support legacy cases.

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

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

Examples
--------

In the following example we have an HTML text `<input>` to represent some data that could be changed and require saving:

```html
<form>
  <input type="text" name="name" id="name" />
</form>
```

Our JavaScript attaches an `input` event listener to the `<input>` element that listens for changes in the inputted value. When the value is updated to a non-empty value, a `beforeunload` event listener is attached to the `Window` object.

If the value becomes an empty string again (i.e. the value is deleted), the `beforeunload` event listener is removed again — as mentioned above in the Usage notes, the listener should be removed when there is no unsaved data to warn about.

The `beforeunload` event handler function invokes `event.preventDefault()` to trigger the warning dialog when the user closes or navigates the tab. We have also included `event.returnValue = true` in the handler function so that any browsers that don't support the `event.preventDefault()` mechanism will still run the demo correctly.

```js
const beforeUnloadHandler = (event) => {
  // Recommended
  event.preventDefault();

  // Included for legacy support, e.g. Chrome/Edge < 119
  event.returnValue = true;
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    window.addEventListener("beforeunload", beforeUnloadHandler);
  } else {
    window.removeEventListener("beforeunload", beforeUnloadHandler);
  }
});
```

When the `<input>` value is non-empty, if you try to close, navigate, or reload the page the browser displays the warning dialog. Try it out:

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

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

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

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

See also
--------

* `beforeunload` event


CSSValue - Web APIs

CSSValue
========

**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 **`CSSValue`** interface represents the current computed value of a CSS property.

**Note:** This interface was part of an attempt to create a typed CSS Object Model. This attempt has been abandoned, and most browsers do
 not implement it.

To achieve your purpose, you can use:

* the untyped CSS Object Model, widely supported, or
* the modern CSS Typed Object Model API, less supported and considered experimental.

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

`CSSValue.cssText`
Deprecated

A string representing the current value.

`CSSValue.cssValueType` Read only
Deprecated

An `unsigned short` representing a code defining the type of the value. Possible values are:

| Constant | Description |
| --- | --- |
| `CSS_CUSTOM` | The value is a custom value. |
| `CSS_INHERIT` | The value is inherited and the `cssText` contains `"inherit"`. |
| `CSS_PRIMITIVE_VALUE` | The value is a primitive value and an instance of the `CSSPrimitiveValue` interface can be obtained by using binding-specific casting methods on this instance of the `CSSValue` interface. |
| `CSS_VALUE_LIST` | The value is a `CSSValue` list and an instance of the `CSSValueList` interface can be obtained by using binding-specific casting methods on this instance of the `CSSValue` interface. |

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

 This feature was originally defined in the DOM Style Level 2 specification, but has been dropped from any
 standardization effort since then.

It has been superseded by a modern, but incompatible, CSS Typed Object Model API that is now on the standard track.

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

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

See also
--------

* `CSSPrimitiveValue`
* `CSSValueList`


History - Web APIs

History
=======

The **`History`** interface of the History API allows manipulation of the browser *session history*, that is the pages visited in the tab or frame that the current page is loaded in.

There is only one instance of `history` (It is a *singleton*.) accessible via the global object `history`.

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

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

*The `History` interface doesn't inherit any property.*

`length` Read only

Returns an `Integer` representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns `1`.

`scrollRestoration`

Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either `auto` or `manual`.

`state` Read only

Returns an `any` value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a `popstate` event.

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

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

`back()`

This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's `Back` button. Equivalent to `history.go(-1)`.

Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.

`forward()`

This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's `Forward` button; this is equivalent to `history.go(1)`.

Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.

`go()`

Asynchronously loads a page from the session history, identified by its relative location to the current page, for example `-1` for the previous page or `1` for the next page. If you specify an out-of-bounds value (for instance, specifying `-1` when there are no previously-visited pages in the session history), this method silently has no effect. Calling `go()` without parameters or a value of `0` reloads the current page.

`pushState()`

Pushes the given data onto the session history stack with the specified title (and, if provided, URL). The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that all browsers but Safari currently ignore the *title* parameter. For more information, see Working with the History API.

`replaceState()`

Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that all browsers but Safari currently ignore the *title* parameter. For more information, see Working with the History API.

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

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

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

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

See also
--------

* `history` global object