PerformanceTiming: redirectEnd property - Web APIs

PerformanceTiming: redirectEnd property
=======================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.

 The legacy
 **`PerformanceTiming.redirectEnd`**
 read-only property returns an `unsigned long long` representing the moment,
 in milliseconds since the UNIX epoch, the last HTTP redirect is completed, that is when
 the last byte of the HTTP response has been received. If there is no redirect, or if one
 of the redirect is not of the same origin, the value returned is `0`.

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `Performance` interface it belongs to.


PerformanceTiming: domContentLoadedEventStart property - Web APIs

PerformanceTiming: domContentLoadedEventStart property
======================================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.

 The legacy
 **`PerformanceTiming.domContentLoadedEventStart`**
 read-only property returns an `unsigned long long` representing the moment,
 in milliseconds since the UNIX epoch, right before the parser sent the
 `DOMContentLoaded` event, that is right after all the scripts that need to be
 executed right after parsing has been executed.

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `PerformanceTiming` interface it belongs to.


PerformanceTiming: requestStart property - Web APIs

PerformanceTiming: requestStart property
========================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.

 The legacy
 **`PerformanceTiming.requestStart`**
 read-only property returns an `unsigned long long` representing the moment,
 in milliseconds since the UNIX epoch, when the browser sent the request to obtain the
 actual document, from the server or from a cache. If the transport layer fails after the
 start of the request and the connection is reopened, this property will be set to the
 time corresponding to the new request.

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `PerformanceTiming` interface it belongs to.


PerformanceTiming: connectStart property - Web APIs

PerformanceTiming: connectStart property
========================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.

 The legacy
 **`PerformanceTiming.connectStart`**
 read-only property returns an `unsigned long long` representing the moment,
 in milliseconds since the UNIX epoch, where the request to open a connection is sent to
 the network. If the transport layer reports an error and the connection establishment is
 started again, the last connection establishment start time is given. If a persistent
 connection is used, the value will be the same as
 `PerformanceTiming.fetchStart`.

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `PerformanceTiming` interface it belongs to.


PerformanceTiming: domContentLoadedEventEnd property - Web APIs

PerformanceTiming: domContentLoadedEventEnd property
====================================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.

 The legacy
 **`PerformanceTiming.domContentLoadedEventEnd`**
 read-only property returns an `unsigned long long` representing the moment,
 in milliseconds since the UNIX epoch, right after all the scripts that need to be
 executed as soon as possible, in order or not, has been executed.

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `PerformanceTiming` interface it belongs to.


PerformanceTiming: secureConnectionStart property - Web APIs

PerformanceTiming: secureConnectionStart property
=================================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming` interface instead.

 The legacy
 **`PerformanceTiming.secureConnectionStart`**
 read-only property returns an `unsigned long long` representing the moment,
 in milliseconds since the UNIX epoch, where the secure connection handshake starts. If
 no such connection is requested, it returns `0`.

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `PerformanceTiming` interface it belongs to.


PerformanceTiming: msFirstPaint property - Web APIs

PerformanceTiming: msFirstPaint property
========================================

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

**`msFirstPaint`** is a read-only property which gets the time
 when the document loaded by the window object began to be displayed to the user.

 Put another way, `msFirstPaint` utilizes the browser to measure when the
 first content completes being painted in the window. It is available from JavaScript and
 can be reported from the field.

This proprietary property is specific to Internet Explorer and Microsoft Edge.

Syntax
------

```js
p = object.msFirstPaint
```

Value
-----

 An Integer value that represents the time when the document began to be displayed or 0
 if the document could not be loaded.

 The numerical value reported represents the number of milliseconds between the recorded
 time and midnight January 1, 1970 (UTC).

This property is supported only for documents displayed in IE9 Standards mode.

Example
-------

 The following example shows how to calculate the time that is required to request the
 document before the document begins to display for the user.

```js
const oTiming = window.performance.timing;
const iTimeMS = oTiming.msFirstPaint - oTiming.navigationStart;
```


PerformanceTiming: unloadEventEnd property - Web APIs

PerformanceTiming: unloadEventEnd property
==========================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.

 The legacy
 **`PerformanceTiming.unloadEventEnd`**
 read-only property returns an `unsigned long long` representing the moment,
 in milliseconds since the UNIX epoch, the `unload` event handler finishes. If
 there is no previous document, or if the previous document, or one of the needed
 redirects, is not of the same origin, the value returned is `0`.

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `PerformanceTiming` interface it belongs to.


PerformanceTiming: connectEnd property - Web APIs

PerformanceTiming: connectEnd property
======================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.

 The legacy
 **`PerformanceTiming.connectEnd`**
 read-only property returns an `unsigned long long` representing the moment,
 in milliseconds since the UNIX epoch, where the connection is opened network. If the
 transport layer reports an error and the connection establishment is started again, the
 last connection establishment end time is given. If a persistent connection is used, the
 value will be the same as `PerformanceTiming.fetchStart`. A connection is
 considered as opened when all secure connection handshake, or SOCKS authentication, is
 terminated.

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `PerformanceTiming` interface it belongs to.


PerformanceTiming: domInteractive property - Web APIs

PerformanceTiming: domInteractive property
==========================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.

 The legacy
 **`PerformanceTiming.domInteractive`**
 read-only property returns an `unsigned long long` representing the moment,
 in milliseconds since the UNIX epoch, when the parser finished its work on the main
 document, that is when its `Document.readyState` changes to
 `'interactive'` and the corresponding `readystatechange` event is
 thrown.

 This property can be used to measure the speed of loading websites that users
 *feels*. Nevertheless there are a few caveats that happens if scripts are
 blocking rendering and not loaded asynchronously or with custom Web fonts. Check if you are in one of these cases before using this property as a proxy for the
 user experience of a website's speed of loading.

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `PerformanceTiming` interface it belongs to.
* The article "domInteractive: is it? really?" explaining when you can use this property as a proxy for the
 user experience of loading a website.


PerformanceTiming: responseStart property - Web APIs

PerformanceTiming: responseStart property
=========================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.

 The legacy
 **`PerformanceTiming.responseStart`**
 read-only property returns an `unsigned long long` representing the moment in
 time (in milliseconds since the UNIX epoch) when the browser received the first byte of
 the response from the server, cache, or local resource.

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `PerformanceTiming` interface it belongs to.


PerformanceTiming: loadEventEnd property - Web APIs

PerformanceTiming: loadEventEnd property
========================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface's `PerformanceNavigationTiming.loadEventEnd` read-only property instead.

 The legacy
 **`PerformanceTiming.loadEventEnd`**
 read-only property returns an `unsigned long long` representing the moment,
 in milliseconds since the UNIX epoch, when the `load` event handler
 terminated, that is when the load event is completed. If this event has not yet been
 sent, or is not yet completed, it returns `0.`

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `PerformanceTiming` interface it belongs to.


PerformanceTiming: domainLookupEnd property - Web APIs

PerformanceTiming: domainLookupEnd property
===========================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.

 The legacy
 **`PerformanceTiming.domainLookupEnd`**
 read-only property returns an `unsigned long long` representing the moment,
 in milliseconds since the UNIX epoch, where the domain lookup is finished. If a
 persistent connection is used, or the information is stored in a cache or a local
 resource, the value will be the same as `PerformanceTiming.fetchStart`.

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `PerformanceTiming` interface it belongs to.


PerformanceTiming: fetchStart property - Web APIs

PerformanceTiming: fetchStart property
======================================

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

**Warning:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.

 The legacy
 **`PerformanceTiming.fetchStart`**
 read-only property returns an `unsigned long long` representing the moment,
 in milliseconds since the UNIX epoch, the browser is ready to fetch the document using
 an HTTP request. This moment is *before* the check to any application cache.

Value
-----

An `unsigned long long`.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `PerformanceTiming` interface it belongs
 to.**`PerformanceTiming.fetchStart`**


XRInputSourceArray: forEach() method - Web APIs

XRInputSourceArray: forEach() method
====================================

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

 The `XRInputSourceArray`
 method **`forEach()`** executes the specified callback once for
 each input source in the array, starting at index 0 and progressing until the end of the
 list.

Syntax
------

```js
forEach(callback)
forEach(callback, thisArg)
```

### Parameters

`callback`

 A function to execute once for each entry in the
 array `xrInputSourceArray`. The callback accepts up to three parameters:

`currentValue`

 A `XRInputSource` object which is the value of the item from within
 the `xrInputSourceArray` which is currently being processed.

`currentIndex` Optional

 An integer value providing the index into the array at which the element given
 by `currentValue` is located. If you don't need to know the index
 number, you can omit this.

`sourceList` Optional

 The `XRInputSourceArray` object which is being processed. If you
 don't need this information, you may omit this.

`thisArg` Optional

 The value to be used for
 `this`
 while executing the callback. Note that if you use arrow function notation (`=>`) to provide the callback, you can
 omit `thisArg`, since all arrow functions lexically bind `this`.

### Return value

Undefined.

Examples
--------

 This example snippet gets the list of inputs for a session and tries to handle each
 type of input device it supports using.

```js
let inputSources = xrSession.inputSources;

inputSources.forEach((input) => {
  if (input.gamepad) {
    checkGamepad(input.gamepad);
  } else if (
    input.targetRayMode === "tracked-pointer" &&
    input.handedness === player.handedness
  ) {
    /\* Handle main hand controller \*/
    handleMainHandInput(input);
  } else {
    /\* Handle other inputs \*/
  }
});
```

 For each input in the list, the callback dispatches gamepad inputs to
 a `checkGamepad()` with the input's `Gamepad` object, taken from
 its `gamepad` property, as an input

 For other devices, we look for `tracked-pointer` devices in the player's
 main hand, dispatching those to a `handleMainHandInput()` method.

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

#### No specification found

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

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

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

See also
--------

* Inputs and input sources
* The
 `Array` method `forEach()`
* `XRInputSource`


XRInputSourceArray: length property - Web APIs

XRInputSourceArray: length property
===================================

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

 The read-only **`length`** property returns an integer value
 indicating the number of items in the input source list represented by
 the `XRInputSourceArray` object.

Value
-----

 An integer value indicating the number of `XRInputSource` objects
 representing WebXR input sources are included in the array.

Examples
--------

 In this example, a game that requires at least one input source
 uses `length` to check this before proceeding to allow the user to play the
 game.

```js
let sources = xrSession.inputSources;

if (sources.length === 0) {
  showAlertDialog(
    "You need to have at least one controller to play Super Duper Shark Jump Fest 9000.",
    [
      { label: "Shop Now", url: "https://www.example.com/shop/controllers" },
      { label: "Quit", handler: quitGame },
    ],
  );
}
```

 Here, if `length` is 0, a
 hypothetical `showAlertDialog()` function is called with a prompt string
 explaining the need for a controller, and an array of objects, each describing a button
 and what should happen when it's clicked. The first takes the user to an Amazon.com
 search for VR controllers, and the second calls a `quitGame()` function to
 start shutting the game program down.

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

| Specification |
| --- |
| WebXR Device API # dom-xrinputsourcearray-length |

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

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


XRInputSourceArray: values() method - Web APIs

XRInputSourceArray: values() method
===================================

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

 The `XRInputSourceArray`
 method **`values()`** returns a JavaScript
`iterator`
 that can walk over the list of `XRInputSource` objects contained in the
 array, from first to last.

Syntax
------

```js
values()
```

### Parameters

None.

### Return value

 A
 JavaScript `iterator` that
 can be used to walk through the list of `XRInputSource` objects in the
 array, starting with the first entry (at index 0) and proceeding straight through the
 list.

Examples
--------

 This example snippet walks through each input and calls the
 function `checkInput()` with each returned value.

```js
for (const source of xrSession.inputSources.values()) {
  checkInput(source);
}
```

 Here,
 `for...of`
 is used to iterate over the array's contents. Each pass through the loop,
 `source` is the next `XRInputSource` in the list. The loop exits
 once every input has been delivered to `checkInput()`.

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

#### No specification found

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

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

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

See also
--------

* Inputs and input sources
* The `XRInputSourceArray` method `keys()`
* The
 `Array` method `values()`
* `XRInputSource`


XRInputSourceArray: keys() method - Web APIs

XRInputSourceArray: keys() method
=================================

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

 The **`keys()`** method in the
 `XRInputSourceArray` interface returns a JavaScript
`iterator`
 which can then be used to iterate over the keys used to reference each item in the array
 of input sources.

Syntax
------

```js
keys()
```

### Parameters

None.

### Return value

 A
 JavaScript `iterator` that
 can be used to walk through the keys for each entry in the list of input sources. The
 values returned by the iterator are the indexes of each entry in the list; that is, the
 numbers 0, 1, 2, and so forth through the index of the last item in the list.

Examples
--------

 This example snippet gets the list of inputs for a session and tries to handle each
 type of input device it supports using.

```js
for (const inputIdx of xrSession.inputSources.keys()) {
  /\* the keys are the indexes into the list of inputs \*/
  checkInput(xrSession.inputSources[inputIdx]);
}
```

 Here,
 `for...of`
 is used to iterate over each of the keys. For each key, the input is retrieved using the
 index with array notation: `xrSession.inputSources[inputIdx]`.

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

#### No specification found

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

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

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

See also
--------

* Inputs and input sources
* The `XRInputSourceArray` method `values()`
* The
 `Array` method `keys()`
* `XRInputSource`


XRInputSourceArray: entries() method - Web APIs

XRInputSourceArray: entries() method
====================================

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

 The `XRInputSourceArray` interface's
 **`entries()`** method returns a JavaScript
 `iterator`
 which can then be used to iterate over the key/value pairs in the input source
 array. Each item in the array is an `XRInputSource` object.

 Most frequently, you will use this in tandem with statements such as
 `for...of`.

Syntax
------

```js
entries()
```

### Parameters

None.

### Return value

 An `iterator`
 which can be used to walk through the list of `XRInputSource` objects
 included in the input source array.

Examples
--------

 This example snippet gets the list of inputs for a session and tries to handle each
 type of input device it supports using.

```js
let sources = xrSession.inputSources;

for (const input of sources.entries()) {
  if (input.gamepad) {
    checkGamepad(input.gamepad);
  } else if (
    input.targetRayMode === "tracked-pointer" &&
    input.handedness === player.handedness
  ) {
    /\* Handle main hand controller \*/
    handleMainHandInput(input);
  } else {
    /\* Handle other inputs \*/
  }
}
```

 For each input in the list, gamepad inputs are dispatched to
 a `checkGamepad()` with the input's `Gamepad` object, taken from
 its `gamepad` property, as an input

 For other devices, we look for `tracked-pointer` devices in the player's
 main hand, dispatching those to a `handleMainHandInput()` method.

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

#### No specification found

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

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

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


PeriodicSyncManager: unregister() method - Web APIs

PeriodicSyncManager: unregister() method
========================================

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

 The **`unregister()`** method of the
 `PeriodicSyncManager` interface unregisters the periodic sync request
 corresponding to the specified tag and returns a `Promise` that resolves
 when unregistration completes.

Syntax
------

```js
unregister(tag)
```

### Parameters

tag

The unique `String` descriptor for the specific background sync.

### Return value

Returns a `Promise` that resolves with `undefined`.

### Exceptions

None.

Examples
--------

 The following example removes a periodic sync to stop syncing articles in the
 background.

```js
navigator.serviceWorker.ready.then((registration) => {
  registration.periodicSync.unregister("get-latest-news");
});
```

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

| Specification |
| --- |
| Web Periodic Background Synchronization # dom-periodicsyncmanager-unregister |

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

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

See also
--------

* Richer offline experiences with the Periodic Background Sync API
* A Periodic Background Sync demo app


PeriodicSyncManager: getTags() method - Web APIs

PeriodicSyncManager: getTags() method
=====================================

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

 The **`getTags()`** method of the
 `PeriodicSyncManager` interface returns a `Promise` that
 resolves with a list of `String` objects representing the tags that are
 currently registered for periodic syncing.

Syntax
------

```js
getTags()
```

### Parameters

None.

### Return value

 A `Promise` which resolves with a list of `String` objects
 representing tags that are currently registered for periodic syncing.

### Exceptions

None.

Examples
--------

 The following example uses the `getTags()` method to check if a periodic
 sync task with a given tag is registered.

```js
navigator.serviceWorker.ready.then((registration) => {
  registration.periodicSync.getTags().then((tags) => {
    if (tags.includes("get-latest-news")) skipDownloadingLatestNewsOnPageLoad();
  });
});
```

`skipDownloadingLatestNewsOnPageLoad()` is a developer defined function.

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

| Specification |
| --- |
| Web Periodic Background Synchronization # dom-periodicsyncmanager-gettags |

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

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

See also
--------

* Richer offline experiences with the Periodic Background Sync API
* A Periodic Background Sync demo app


PeriodicSyncManager: register() method - Web APIs

PeriodicSyncManager: register() method
======================================

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

 The **`register()`** method of the
 `PeriodicSyncManager` interface registers a periodic sync request with the
 browser with the specified tag and options. It returns a `Promise` that
 resolves when the registration completes.

Syntax
------

```js
register(tag, options)
```

### Parameters

`tag`

A unique `String` identifier.

`options` Optional

An `Object` containing the following optional data:

`minInterval`

 The minimum interval time, in milliseconds, at which
 the periodic sync should occur.

### Return value

Returns a `Promise` that resolves with `undefined`.

### Exceptions

`InvalidStateError` `DOMException`

Returned if there is no active `ServiceWorker` present.

`NotAllowedError` `DOMException`

Returned if permission for background periodic sync is not granted.

`InvalidAccessError` `DOMException`

Returned if the active window is not the main window (not of `auxiliary` or `top-level` type).

Examples
--------

 The following asynchronous function registers a periodic background sync at a minimum
 interval of one day from a browsing context:

```js
async function registerPeriodicNewsCheck() {
  const registration = await navigator.serviceWorker.ready;
  try {
    await registration.periodicSync.register("fetch-news", {
      minInterval: 24 \* 60 \* 60 \* 1000,
    });
  } catch {
    console.log("Periodic Sync could not be registered!");
  }
}
```

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

| Specification |
| --- |
| Web Periodic Background Synchronization # dom-periodicsyncmanager-register |

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

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

See also
--------

* Richer offline experiences with the Periodic Background Sync API
* A Periodic Background Sync demo app


FederatedCredential: protocol property - Web APIs

FederatedCredential: protocol property
======================================

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

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

 The **`protocol`** property of the
 `FederatedCredential` interface returns a read-only
 string containing a credential's federated identity protocol. If this
 property is `null`, the protocol may be inferred from the
 `FederatedCredential.provider` property.

Value
-----

 A string containing a credential's federated identity protocol (e.g.
 `openidconnect`).

Examples
--------

```js
// TBD
```

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

| Specification |
| --- |
| Credential Management Level 1 # dom-federatedcredential-protocol |

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

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


FederatedCredential: FederatedCredential() constructor - Web APIs

FederatedCredential: FederatedCredential() constructor
======================================================

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

 The **`FederatedCredential()`**
 constructor creates a new `FederatedCredential` object. In
 supporting browsers, an instance of this class may be passed the `credential`
 received from the `init` object for global `fetch()`.

Syntax
------

```js
new FederatedCredential(init)
```

### Parameters

`init`

Options are:

`provider`

 A string; identifying the credential
 provider.

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

| Specification |
| --- |
| Credential Management Level 1 # dom-federatedcredential-federatedcredential |

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

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


FederatedCredential: provider property - Web APIs

FederatedCredential: provider property
======================================

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

 The **`provider`** property of the
 `FederatedCredential` interface returns a string
 containing a credential's federated identity provider.

Value
-----

A string containing a credential's federated identity provider.

Examples
--------

```js
// TBD
```

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

| Specification |
| --- |
| Credential Management Level 1 # dom-federatedcredential-provider |

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

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


WindowControlsOverlay: getTitlebarAreaRect() method - Web APIs

WindowControlsOverlay: getTitlebarAreaRect() method
===================================================

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

The **`getTitlebarAreaRect()`** method of the `WindowControlsOverlay` interface queries the current geometry of the title bar area of the Progressive Web App window.

This only applies to Progressive Web Apps installed on desktop operating systems and which use the Window Controls Overlay API.

Syntax
------

```js
getTitlebarAreaRect()
```

### Parameters

None.

### Return value

A `DOMRect` that provides the coordinates and size of the title bar area within the app's content.

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

| Specification |
| --- |
| Window Controls Overlay # the-gettitlebararearect-method |

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

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


WindowControlsOverlay: visible property - Web APIs

WindowControlsOverlay: visible property
=======================================

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

The **`visible`** read-only property of the `WindowControlsOverlay` interface returns a Boolean that indicates whether the window controls overlay is visible or not.

The window controls overlay is not be visible if:

* The Web App Manifest's `display_override` member is not set to `window-controls-overlay`.
* Or, if the user has opted-out of the feature.
Value
-----

A boolean.

Examples
--------

```js
if (navigator.windowControlsOverlay.visible) {
  // Execute code if the controls overlay is visible.
} else {
  // Do something else when it isn't visible.
}
```

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

| Specification |
| --- |
| Window Controls Overlay # the-visible-attribute |

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

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

See also
--------

* The `WindowControlsOverlay` interface it belongs to.


WindowControlsOverlay: geometrychange event - Web APIs

WindowControlsOverlay: geometrychange event
===========================================

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

The `geometrychange` event is fired when the position, size, or visibility of a Progressive Web App's title bar area changes.

This only applies to Progressive Web Apps installed on desktop operating systems and use the Window Controls Overlay API.

Syntax
------

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

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

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

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

A `WindowControlsOverlayGeometryChangeEvent`. Inherits from `Event`.

Event

WindowControlsOverlayGeometryChangeEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`titlebarAreaRect`

A `DOMRect` representing the position and size of the title bar area within the app's content.

`visible`

A Boolean that indicates whether the window controls overlay is visible or not.

Examples
--------

Using `addEventListener()`:

```js
navigator.windowControlsOverlay.addEventListener("geometrychange", (event) => {
  const { x, y, width, height } = event.titlebarAreaRect;
  console.log(
    `The titlebar area coordinates are x:${x}, y:${y}, width:${width}, height:${height}`,
  );
});
```

Using the `ongeometrychange` event handler property:

```js
navigator.windowControlsOverlay.ongeometrychange = (event) => {
  const { x, y, width, height } = event.titlebarAreaRect;
  console.log(
    `The titlebar area coordinates are x:${x}, y:${y}, width:${width}, height:${height}`,
  );
};
```

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

| Specification |
| --- |
| Window Controls Overlay # the-ongeometrychange-attribute |

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

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


FileReader: FileReader() constructor - Web APIs

FileReader: FileReader() constructor
====================================

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

The **`FileReader()`** constructor creates a new FileReader.

For details about how to use `FileReader`, see Using files from web applications.

Syntax
------

```js
new FileReader()
```

### Parameters

None.

Examples
--------

The following code snippet shows creation of a `FileReader` object using the `FileReader()` constructor and subsequent usage of the object:

```js
function printFile(file) {
  const reader = new FileReader();
  reader.onload = (evt) => {
    console.log(evt.target.result);
  };
  reader.readAsText(file);
}
```

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

| Specification |
| --- |
| File API # filereaderConstrctr |

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

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

See also
--------

* Using files from web applications


FileReader: load event - Web APIs

FileReader: load event
======================

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

The **`load`** event is fired when a file has been read successfully.

This event is not cancelable and does not bubble.

Syntax
------

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

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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*Also inherits properties from its parent `Event`*.

`ProgressEvent.lengthComputable` Read only

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`ProgressEvent.loaded` Read only

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`ProgressEvent.total` Read only

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------

### Live example

#### HTML

```html
<div class="example">
  <div class="file-select">
    <label for="avatar">Choose a profile picture:</label>
    <input
 type="file"
 id="avatar"
 name="avatar"
 accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="Image preview" />

  <div class="event-log">
    <label for="eventLog">Event log:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>
```

```
img.preview {
  margin: 1rem 0;
}

.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
  resize: none;
}

.example {
  display: grid;
  grid-template-areas:
    "select log"
    "preview log";
}

.file-select {
  grid-area: select;
}

.preview {
  grid-area: preview;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}
```

#### JavaScript

```js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

function addListeners(reader) {
  reader.addEventListener("loadstart", handleEvent);
  reader.addEventListener("load", handleEvent);
  reader.addEventListener("loadend", handleEvent);
  reader.addEventListener("progress", handleEvent);
  reader.addEventListener("error", handleEvent);
  reader.addEventListener("abort", handleEvent);
}

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
}

fileInput.addEventListener("change", handleSelected);
```

#### Result

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

| Specification |
| --- |
| File API # dfn-load-event |
| File API # dfn-onload |

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

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

See also
--------

* Related events: `FileReader.loadstart_event`, `FileReader.loadend_event`, `FileReader.progress_event`, `FileReader.error_event`, `FileReader.abort_event`


FileReader: abort event - Web APIs

FileReader: abort event
=======================

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

The **`abort`** event is fired when a read has been aborted: for instance because the program called `FileReader.abort()`.

This event is not cancelable and does not bubble.

Syntax
------

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

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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*Also inherits properties from its parent `Event`*.

`ProgressEvent.lengthComputable` Read only

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`ProgressEvent.loaded` Read only

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`ProgressEvent.total` Read only

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------

### Live example

#### HTML

```html
<div class="example">
  <div class="file-select">
    <label for="avatar">Choose a profile picture:</label>
    <input
 type="file"
 id="avatar"
 name="avatar"
 accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="Image preview" />

  <div class="event-log">
    <label for="eventLog">Event log:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>
```

```
img.preview {
  margin: 1rem 0;
}

.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
  resize: none;
}

.example {
  display: grid;
  grid-template-areas:
    "select log"
    "preview log";
}

.file-select {
  grid-area: select;
}

.preview {
  grid-area: preview;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}
```

#### JavaScript

```js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

function addListeners(reader) {
  reader.addEventListener("loadstart", handleEvent);
  reader.addEventListener("load", handleEvent);
  reader.addEventListener("loadend", handleEvent);
  reader.addEventListener("progress", handleEvent);
  reader.addEventListener("error", handleEvent);
  reader.addEventListener("abort", handleEvent);
}

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
  reader.abort();
}

fileInput.addEventListener("change", handleSelected);
```

#### Result

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

| Specification |
| --- |
| File API # dfn-abort-event |
| File API # dfn-onabort |

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

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

See also
--------

* Related events: `loadstart`, `loadend`, `progress`, `error`, `load`.


FileReader: progress event - Web APIs

FileReader: progress event
==========================

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

The **`progress`** event is fired periodically as the `FileReader` reads data.

This event is not cancelable and does not bubble.

Syntax
------

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

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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*Also inherits properties from its parent `Event`*.

`ProgressEvent.lengthComputable` Read only

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`ProgressEvent.loaded` Read only

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`ProgressEvent.total` Read only

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------

### Live example

#### HTML

```html
<div class="example">
  <div class="file-select">
    <label for="avatar">Choose a profile picture:</label>
    <input
 type="file"
 id="avatar"
 name="avatar"
 accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="Image preview" />

  <div class="event-log">
    <label for="eventLog">Event log:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>
```

```
img.preview {
  margin: 1rem 0;
}

.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
  resize: none;
}

.example {
  display: grid;
  grid-template-areas:
    "select log"
    "preview log";
}

.file-select {
  grid-area: select;
}

.preview {
  grid-area: preview;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}
```

#### JavaScript

```js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

function addListeners(reader) {
  reader.addEventListener("loadstart", handleEvent);
  reader.addEventListener("load", handleEvent);
  reader.addEventListener("loadend", handleEvent);
  reader.addEventListener("progress", handleEvent);
  reader.addEventListener("error", handleEvent);
  reader.addEventListener("abort", handleEvent);
}

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
}

fileInput.addEventListener("change", handleSelected);
```

#### Result

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

| Specification |
| --- |
| File API # dfn-progress-event |
| File API # dfn-onprogress |

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

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

See also
--------

* Related events: `loadstart`, `loadend`, `load`, `error`, `abort`


FileReader: readAsText() method - Web APIs

FileReader: readAsText() method
===============================

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

 The **`readAsText()`** method of the `FileReader` interface is used to read the contents of the specified `Blob` or `File`.
 When the read operation is complete, the `readyState` is changed to `DONE`,
 the `loadend` event is triggered, and the `result` property contains the contents of the file as a text string.

**Note:** The `Blob.text()` method is a newer promise-based API to read a file as text.

**Note:** This method loads the entire file's content into memory and is not suitable for large files. Prefer `readAsArrayBuffer()` for large files.

Syntax
------

```js
readAsText(blob)
readAsText(blob, encoding)
```

### Parameters

`blob`

The `Blob` or `File` from which to read.

`encoding` Optional

A string specifying the encoding to use for the returned data. By default, UTF-8 is assumed if this parameter is not specified.

### Return value

None (`undefined`).

Examples
--------

### HTML

```html
<input type="file" onchange="previewFile()" /><br />
<p class="content"></p>
```

### JavaScript

```js
function previewFile() {
  const content = document.querySelector(".content");
  const [file] = document.querySelector("input[type=file]").files;
  const reader = new FileReader();

  reader.addEventListener(
    "load",
    () => {
      // this will then display a text file
      content.innerText = reader.result;
    },
    false,
  );

  if (file) {
    reader.readAsText(file);
  }
}
```

### Result

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

| Specification |
| --- |
| File API # readAsDataText |

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

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

See also
--------

* `FileReader`


FileReader: loadstart event - Web APIs

FileReader: loadstart event
===========================

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

The **`loadstart`** event is fired when a file read operation has begun.

This event is not cancelable and does not bubble.

Syntax
------

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

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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*Also inherits properties from its parent `Event`*.

`ProgressEvent.lengthComputable` Read only

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`ProgressEvent.loaded` Read only

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`ProgressEvent.total` Read only

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------

### Live example

#### HTML

```html
<div class="example">
  <div class="file-select">
    <label for="avatar">Choose a profile picture:</label>
    <input
 type="file"
 id="avatar"
 name="avatar"
 accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="Image preview" />

  <div class="event-log">
    <label for="eventLog">Event log:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>
```

```
img.preview {
  margin: 1rem 0;
}

.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
  resize: none;
}

.example {
  display: grid;
  grid-template-areas:
    "select log"
    "preview log";
}

.file-select {
  grid-area: select;
}

.preview {
  grid-area: preview;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}
```

#### JavaScript

```js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

function addListeners(reader) {
  reader.addEventListener("loadstart", handleEvent);
  reader.addEventListener("load", handleEvent);
  reader.addEventListener("loadend", handleEvent);
  reader.addEventListener("progress", handleEvent);
  reader.addEventListener("error", handleEvent);
  reader.addEventListener("abort", handleEvent);
}

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
}

fileInput.addEventListener("change", handleSelected);
```

#### Result

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

| Specification |
| --- |
| File API # dfn-loadstart-event |
| File API # dfn-onloadstart |

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

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

See also
--------

* Related events: `FileReader.load_event`, `FileReader.loadend_event`, `FileReader.progress_event`, `FileReader.error_event`, `FileReader.abort_event`


FileReader: error event - Web APIs

FileReader: error event
=======================

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

The **`error`** event is fired when the read failed due to an error (for example, because the file was not found or not readable).

This event is not cancelable and does not bubble.

Syntax
------

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

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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*Also inherits properties from its parent `Event`*.

`ProgressEvent.lengthComputable` Read only

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`ProgressEvent.loaded` Read only

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`ProgressEvent.total` Read only

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------

```js
const fileInput = document.querySelector('input[type="file"]');
const reader = new FileReader();

function handleSelected(e) {
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    reader.addEventListener("error", () => {
      console.error(`Error occurred reading file: ${selectedFile.name}`);
    });

    reader.addEventListener("load", () => {
      console.log(`File: ${selectedFile.name} read successfully`);
    });

    reader.readAsDataURL(selectedFile);
  }
}

fileInput.addEventListener("change", handleSelected);
```

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

| Specification |
| --- |
| File API # dfn-error-event |
| File API # dfn-onerror |

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

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

See also
--------

* Related events: `loadstart`, `loadend`, `progress`, `load`, `abort`


FileReader: readAsDataURL() method - Web APIs

FileReader: readAsDataURL() method
==================================

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

 The **`readAsDataURL`** method of the `FileReader` interface is used to read the contents of the specified
 `Blob` or `File`. When the read operation is finished, the
 `readyState` becomes `DONE`, and the
 `loadend` is triggered. At that time, the
 `result` attribute contains the data as a data: URL representing the
 file's data as a base64 encoded string.

**Note:** The blob's `result` cannot be
 directly decoded as Base64 without first removing the Data-URL declaration preceding
 the Base64-encoded data. To retrieve only the Base64 encoded string, first
 remove `data:*/*;base64,` from the result.

Syntax
------

```js
readAsDataURL(blob)
```

### Parameters

`blob`

The `Blob` or `File` from which to read.

### Return value

None (`undefined`).

Examples
--------

### Reading a single file

#### HTML

```html
<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="Image preview" />
```

#### JavaScript

```js
function previewFile() {
  const preview = document.querySelector("img");
  const file = document.querySelector("input[type=file]").files[0];
  const reader = new FileReader();

  reader.addEventListener(
    "load",
    () => {
      // convert image file to base64 string
      preview.src = reader.result;
    },
    false,
  );

  if (file) {
    reader.readAsDataURL(file);
  }
}
```

#### Result

### Reading multiple files

#### HTML

```html
<input id="browse" type="file" multiple />
<div id="preview"></div>
```

#### JavaScript

```js
function previewFiles() {
  const preview = document.querySelector("#preview");
  const files = document.querySelector("input[type=file]").files;

  function readAndPreview(file) {
    // Make sure `file.name` matches our extensions criteria
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
      const reader = new FileReader();

      reader.addEventListener(
        "load",
        () => {
          const image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = reader.result;
          preview.appendChild(image);
        },
        false,
      );

      reader.readAsDataURL(file);
    }
  }

  if (files) {
    Array.prototype.forEach.call(files, readAndPreview);
  }
}

const picker = document.querySelector("#browse");
picker.addEventListener("change", previewFiles);
```

#### Result

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

| Specification |
| --- |
| File API # readAsDataURL |

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

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

See also
--------

* `FileReader`
* `URL.createObjectURL()`


FileReader: readAsBinaryString() method - Web APIs

FileReader: readAsBinaryString() method
=======================================

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

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

**Note:** This method is deprecated in favor of `readAsArrayBuffer()`.

 The **`readAsBinaryString`** method of the `FileReader` interface is used to start reading the contents of the
 specified `Blob` or `File`. When the read operation is
 finished, the `readyState` becomes
 `DONE`, and the `FileReader.loadend_event` is triggered. At that time, the
 `result` attribute contains the raw binary data from
 the file.

 Note that this method was once removed from the File API specification, but
 re-introduced for backward compatibility.
 Using `FileReader.readAsArrayBuffer()` is recommended.

Syntax
------

```js
readAsBinaryString(blob)
```

### Parameters

`blob`

The `Blob` or `File` from which to read.

### Return value

None (`undefined`).

Examples
--------

```js
const canvas = document.createElement("canvas");
const height = 200;
const width = 200;

canvas.width = width;
canvas.height = height;

const ctx = canvas.getContext("2d");

ctx.strokeStyle = "#090";
ctx.beginPath();
ctx.arc(width / 2, height / 2, width / 2 - width / 10, 0, Math.PI \* 2);
ctx.stroke();

canvas.toBlob((blob) => {
  const reader = new FileReader();

  reader.onload = () => {
    console.log(reader.result);
  };

  reader.readAsBinaryString(blob);
});
```

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

| Specification |
| --- |
| File API # readAsBinaryString |

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

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

See also
--------

* `FileReader`


FileReader: readAsArrayBuffer() method - Web APIs

FileReader: readAsArrayBuffer() method
======================================

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

 The **`readAsArrayBuffer()`** method of the `FileReader` interface is used to start reading the
 contents of a specified `Blob` or `File`. When the read
 operation is finished, the `readyState` becomes
 `DONE`, and the `loadend` is
 triggered. At that time, the `result` attribute
 contains an `ArrayBuffer` representing the file's data.

**Note:** The `Blob.arrayBuffer()` method is a newer promise-based API to read a
 file as an array buffer.

Syntax
------

```js
readAsArrayBuffer(blob)
```

### Parameters

`blob`

The `Blob` or `File` from which to read.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| File API # readAsArrayBuffer |

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

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

See also
--------

* `FileReader`


FileReader: loadend event - Web APIs

FileReader: loadend event
=========================

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

The **`loadend`** event is fired when a file read has completed, successfully or not.

This event is not cancelable and does not bubble.

Syntax
------

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

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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*Also inherits properties from its parent `Event`*.

`ProgressEvent.lengthComputable` Read only

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`ProgressEvent.loaded` Read only

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`ProgressEvent.total` Read only

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------

### Live example

#### HTML

```html
<div class="example">
  <div class="file-select">
    <label for="avatar">Choose a profile picture:</label>
    <input
 type="file"
 id="avatar"
 name="avatar"
 accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="Image preview" />

  <div class="event-log">
    <label for="eventLog">Event log:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>
```

```
img.preview {
  margin: 1rem 0;
}

.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
  resize: none;
}

.example {
  display: grid;
  grid-template-areas:
    "select log"
    "preview log";
}

.file-select {
  grid-area: select;
}

.preview {
  grid-area: preview;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}
```

#### JavaScript

```js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

function addListeners(reader) {
  reader.addEventListener("loadstart", handleEvent);
  reader.addEventListener("load", handleEvent);
  reader.addEventListener("loadend", handleEvent);
  reader.addEventListener("progress", handleEvent);
  reader.addEventListener("error", handleEvent);
  reader.addEventListener("abort", handleEvent);
}

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
}

fileInput.addEventListener("change", handleSelected);
```

#### Result

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

| Specification |
| --- |
| File API # dfn-loadend-event |
| File API # dfn-onloadend |

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

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

See also
--------

* Related events: `loadstart`, `load`, `progress`, `error`, `abort`


FileReader: abort() method - Web APIs

FileReader: abort() method
==========================

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

 The **`abort`** method of the `FileReader` interface aborts the read operation. Upon return,
 the `readyState` will be `DONE`.

Syntax
------

```js
abort()
```

### Parameters

None.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| File API # abort |

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

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

See also
--------

* `FileReader`


FileReader: readyState property - Web APIs

FileReader: readyState property
===============================

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

The **`readyState`** read-only property of the `FileReader` interface provides the current state of the reading operation a `FileReader` is in. A `FileReader` exists in one of the following states:

| Value | State | Description |
| --- | --- | --- |
| `0` | `EMPTY` | Reader has been created. None of the read methods called yet. |
| `1` | `LOADING` | A read method has been called. |
| `2` | `DONE` | The operation is complete. |

`EMPTY`

The `FileReader` has been created, but no readAs method was called yet.

`LOADING`

A readAs method was invoked. A `File` or `Blob` is being read, and no error has occurred yet.

`DONE`

The read operation is complete. This could mean that: the entire `File` or `Blob` has been read into memory, a file read error occurred, or `abort()` was called and the read was cancelled.

Examples
--------

```js
const reader = new FileReader();
console.log("EMPTY", reader.readyState); // readyState will be 0

reader.readAsText(blob);
console.log("LOADING", reader.readyState); // readyState will be 1

reader.onloadend = () => {
  console.log("DONE", reader.readyState); // readyState will be 2
};
```

Value
-----

A number which is one of the three possible state constants define for the `FileReader` API.

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

| Specification |
| --- |
| File API # dom-filereader-readystate |

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

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

See also
--------

* `Blob`


FileReader: result property - Web APIs

FileReader: result property
===========================

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

 The **`result`** read-only property of the `FileReader` interface returns the
 file's contents. This property is only valid after the read operation is complete, and
 the format of the data depends on which of the methods was used to initiate the read
 operation.

Value
-----

 An appropriate string or `ArrayBuffer` based on which of the reading methods
 was used to initiate the read operation. The value is `null` if the reading
 is not yet complete or was unsuccessful.

The result types are described below.

| Method | Description |
| --- | --- |
| `readAsArrayBuffer()` |
 The `result` is a JavaScript
 `ArrayBuffer`
 containing binary data.
  |
| `readAsBinaryString()` |
 The `result` contains the raw binary data from the file in a
 string.
  |
| `readAsDataURL()` |
 The `result` is a string with a `data:` URL
 representing the file's data.
  |
| `readAsText()` | The `result` is text in a string. |

Examples
--------

This example presents a function `reader()` which reads a file from a file input. It works by creating a `FileReader` object and creating a listener for `load` events, such that when then file is read, the `result` is obtained and passed to the callback function provided to `reader()`.

The content is handled as raw text data.

```js
// Given this HTMLInputElement of type="file":
// <input id="image" type="file" accept="image/\*">

function reader(file, callback) {
  const fr = new FileReader();
  fr.onload = () => callback(null, fr.result);
  fr.onerror = (err) => callback(err);
  fr.readAsDataURL(file);
}

document.querySelector("#image").addEventListener("change", (evt) => {
  // No files, do nothing.
  if (!evt.target.files) {
    return;
  }
  reader(evt.target.files[0], (err, res) => {
    console.log(res); // Base64 `data:image/...` String result.
  });
});
```

Given the asynchronous nature of `FileReader`, you could use a Promise-based approach. Here's an example for a file input with attribute `multiple` that returns a `Promise`.

```js
// Given this HTMLInputElement:
// <input id="images" type="file" accept="image/\*" multiple>

const reader = (file) =>
  new Promise((resolve, reject) => {
    const fr = new FileReader();
    fr.onload = () => resolve(fr);
    fr.onerror = (err) => reject(err);
    fr.readAsDataURL(file);
  });

async function logImagesData(fileList) {
  let fileResults = [];
  const frPromises = fileList.map(reader);

  try {
    fileResults = await Promise.all(frPromises);
  } catch (err) {
    // In this specific case, Promise.all() might be preferred
    // over Promise.allSettled(), since it isn't trivial to modify
    // a FileList to a subset of files of what the user initially
    // selected. Therefore, let's just stash the entire operation.
    console.error(err);
    return;
  }

  fileResults.forEach((fr) => {
    console.log(fr.result); // Base64 `data:image/...` String result.
  });
}

// HTMLInputElement type="file" Event handler:
document.querySelector("#images").addEventListener("change", (evt) => {
  // If no files, do nothing.
  if (!evt.target.files) {
    return;
  }
  logImagesData([...evt.target.files]);
});
```

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

| Specification |
| --- |
| File API # dom-filereader-result |

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

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

See also
--------

* `FileReader`


FileReader: error property - Web APIs

FileReader: error property
==========================

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

 The **`error`** read-only property of the `FileReader` interface returns the
 error that occurred while reading the file.

Value
-----

A `DOMException` containing the relevant error.

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

| Specification |
| --- |
| File API # dom-filereader-error |

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

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

See also
--------

* `FileReader`


XRCylinderLayer: transform property - Web APIs

XRCylinderLayer: transform property
===================================

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

The **`transform`** property of the `XRCylinderLayer` interface represents the offset and orientation relative to the layer's `space`.

Value
-----

An `XRRigidTransform`.

Examples
--------

### Setting the cylinder layer's position

This example code positions the layer two meters away from the origin of `xrReferenceSpace`.

```js
const cylinderLayer = xrGlBinding.createCylinderLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 512,
  viewPixelHeight: 512,
});

cylinderLayer.transform = new XRRigidTransform({ z: -2 });
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcylinderlayer-transform |

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

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

See also
--------

* `XRRigidTransform`
* `XRCylinderLayer.space`


XRCylinderLayer: radius property - Web APIs

XRCylinderLayer: radius property
================================

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

The **`radius`** property of the `XRCylinderLayer` interface represents the radius of the cylinder.

Value
-----

A number representing the radius of the cylinder.

Examples
--------

### Getting a layer's radius

The `XRWebGLBinding.createCylinderLayer()` method creates a cylinder layer and allows to specify a `radius`. The `XRCylinder.radius` property can be used after layer creation to get the radius used or to set it to a new one.

```js
const cylinderLayer = xrGlBinding.createCylinderLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 1200,
  viewPixelHeight: 600,
  centralAngle: (60 \* Math.PI) / 180,
  aspectRatio: 2,
  radius: 2,
  transform: new XRRigidTransform(/\* … \*/),
});

cylinderLayer.radius; // 2
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcylinderlayer-radius |

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

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

See also
--------

* `XRCylinderLayer.aspectRatio`
* `XRCylinderLayer.centralAngle`
* `Math.PI`


XRCylinderLayer: centralAngle property - Web APIs

XRCylinderLayer: centralAngle property
======================================

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

The **`centralAngle`** property of the `XRCylinderLayer` interface represents the angle in radians of the visible section of the cylinder.

Value
-----

A number representing the angle in radians of the visible section of the cylinder.

Examples
--------

### Getting a layer's central angle

The `XRWebGLBinding.createCylinderLayer()` method creates a cylinder layer and allows to specify a `centralAngle`. The `XRCylinder.centralAngle` property can be used after layer creation to get the central angle used or to set it to a new one.

```js
const cylinderLayer = xrGlBinding.createCylinderLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 1200,
  viewPixelHeight: 600,
  centralAngle: (60 \* Math.PI) / 180,
  aspectRatio: 2,
  radius: 2,
  transform: new XRRigidTransform(/\* … \*/),
});

cylinderLayer.centralAngle; // 1.0471975511965976
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcylinderlayer-centralangle |

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

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

See also
--------

* `XRCylinderLayer.aspectRatio`
* `XRCylinderLayer.radius`
* `Math.PI`


XRCylinderLayer: redraw event - Web APIs

XRCylinderLayer: redraw event
=============================

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

The `redraw` event is sent to the `XRCylinderLayer` object when the underlying resources of the layer are lost or when the XR Compositor can no longer reproject the layer. If this event is sent, authors should redraw the content of the layer in the next XR animation frame.

See also the `XRCompositionLayer.needsRedraw` property which is also available to `XRCylinderLayer` objects through inheritance from `XRCompositionLayer`.

Syntax
------

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

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

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

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

An `XRLayerEvent`. Inherits from `Event`.

Event properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`layer` Read only

The `XRLayer` which generated the event.

Examples
--------

### Using the `redraw` event

You can pass `redraw` to `addEventListener()`:

```js
cylinderLayer.addEventListener("redraw", (event) => {
  // redraw the layer
});
```

Alternatively, you can use the `onredraw` event handler property to establish a handler for the `redraw` event:

```js
cylinderLayer.onredraw = (event) => {
  // redraw the layer
};
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # eventdef-xrlayer-redraw |

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

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

See also
--------

* `XRCompositionLayer.needsRedraw`


XRCylinderLayer: space property - Web APIs

XRCylinderLayer: space property
===============================

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

The **`space`** property of the `XRCylinderLayer` interface represents the layer's spatial relationship with the user's physical environment.

Value
-----

An `XRSpace`.

Examples
--------

### Updating the cylinder layer's space

The `XRWebGLBinding.createCylinderLayer()` method creates a cylinder layer and requires a `space` property to be provided. The `XRCylinderLayer.space` property can be used after layer creation to get the space used or to set it to a new one.

```js
const cylinderLayer = xrGlBinding.createCylinderLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 512,
  viewPixelHeight: 512,
});

cylinderLayer.space = someOtherSpace;
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcylinderlayer-space |

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

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

See also
--------

* `XRSpace`
* `XRWebGLBinding.createCylinderLayer()`


XRCylinderLayer: aspectRatio property - Web APIs

XRCylinderLayer: aspectRatio property
=====================================

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

The **`aspectRatio`** property of the `XRCylinderLayer` interface represents the ratio of the visible cylinder section. It is the ratio of the width of the visible section of the cylinder divided by its height. The width is calculated by multiplying the `radius` with the `centralAngle`.

Value
-----

A number representing the ratio of the visible cylinder section.

Examples
--------

### Getting a layer's aspect ratio

The `XRWebGLBinding.createCylinderLayer()` method creates a cylinder layer and allows to specify an `aspectRatio`. The `XRCylinder.aspectRatio` property can be used after layer creation to get the aspect ratio used or to set it to a new one.

```js
const cylinderLayer = xrGlBinding.createCylinderLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 1200,
  viewPixelHeight: 600,
  centralAngle: (60 \* Math.PI) / 180,
  aspectRatio: 2,
  radius: 2,
  transform: new XRRigidTransform(/\* … \*/),
});

cylinderLayer.aspectRatio; // 2
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcylinderlayer-aspectratio |

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

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

See also
--------

* `XRCylinderLayer.centralAngle`
* `XRCylinderLayer.radius`


DOMMatrix: DOMMatrix() constructor - Web APIs

DOMMatrix: DOMMatrix() constructor
==================================

 The **`DOMMatrix`** constructor creates a new
 `DOMMatrix` object which represents 4x4 matrices, suitable for 2D and 3D
 operations.

Syntax
------

```js
new DOMMatrix()
new DOMMatrix(init)
```

### Parameters

`init` Optional

An array of numbers specifying the matrix you want to create, or a CSS transform string.

In case an array of numbers is passed, the behavior depends on the length of the array:

* for a 6-element array of components in the form `[a, b, c, d, e, f]`, a 2D matrix is created, initialized with the provided components.
* for a 16-element array of components (in the column-major order) in the form `[m11, m12, m13, …, m42, m43, m44]`, a 3D matrix is created, initialized with the provided components.

Examples
--------

 This example creates a DOMMatrix to use as an argument for calling
 `Point.matrixTransform()`.

```js
const point = new DOMPoint(5, 4);
const scaleX = 2;
const scaleY = 3;
const translateX = 12;
const translateY = 8;
const angle = Math.PI / 2;
const matrix = new DOMMatrix([
  Math.cos(angle) \* scaleX,
  Math.sin(angle) \* scaleX,
  -Math.sin(angle) \* scaleY,
  Math.cos(angle) \* scaleY,
  translateX,
  translateY,
]);
const transformedPoint = point.matrixTransform(matrix);
```

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

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

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

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


IntersectionObserver: disconnect() method - Web APIs

IntersectionObserver: disconnect() method
=========================================

 The `IntersectionObserver` method
 **`disconnect()`** stops watching all of its target elements
 for visibility changes.

Syntax
------

```js
disconnect()
```

### Parameters

None.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-disconnect |

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

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

See also
--------

* `observe()`
* `unobserve()`


IntersectionObserver: rootMargin property - Web APIs

IntersectionObserver: rootMargin property
=========================================

 The `IntersectionObserver` interface's read-only
 **`rootMargin`** property is a string with syntax similar to
 that of the CSS `margin` property. Each side of the rectangle represented
 by `rootMargin` is added to the corresponding side in the
 `root` element's bounding box
 before the intersection test is performed. This lets you, for example, adjust the bounds
 outward so that the target element is considered 100% visible even if a certain number
 of pixels worth of width or height is clipped away, or treat the target as partially
 hidden if an edge is too close to the edge of the root's bounding box.

 See how intersections are calculated
 for a more in-depth look at the root margin and how it works with
 the root's bounding box.

Value
-----

 A string, formatted similarly to the CSS `margin` property's value, which
 contains offsets for one or more sides of the root's bounding box. These offsets are
 added to the corresponding values in the root's bounding box before the intersection
 between the resulting rectangle and the target element's bounds.

 The string returned by this property may not match the one specified when the
 `IntersectionObserver` was instantiated. The browser is permitted to alter
 the values

 If `rootMargin` isn't specified when the object was instantiated, it
 defaults to the string `"0px 0px 0px 0px"`, meaning that the intersection
 will be computed between the root element's unmodified bounds rectangle and the target's
 bounds. How intersections are calculated
 describes how the `rootMargin` is used in more detail.

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-rootmargin |

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

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


IntersectionObserver: thresholds property - Web APIs

IntersectionObserver: thresholds property
=========================================

 The `IntersectionObserver` interface's read-only
 **`thresholds`** property returns the list of intersection
 thresholds that was specified when the observer was instantiated with
 `IntersectionObserver()`. If
 only one threshold ratio was provided when instantiating the object, this will be an
 array containing that single value.

 See the Intersection Observer page to
 learn how thresholds work.

Value
-----

 An array of intersection thresholds, originally specified using the
 `threshold` property when instantiating the observer. If only one observer
 was specified, without being in an array, this value is a one-entry array containing
 that threshold. Regardless of the order your original `threshold` array was
 in, this one is always sorted in numerically increasing order.

 If no `threshold` option was included when
 `IntersectionObserver()` was used to instantiate the observer, the value of
 `thresholds` is `[0]`.

**Note:** Although the `options` object you can specify when creating an
 `IntersectionObserver` has a field named
 `threshold`, this property is called
 `thresholds`. Confusing? Yes. If you accidentally use
 `thresholds` as the name of the field in your `options`, the
 `thresholds` array will wind up being `[0.0]`, which is likely
 not what you expect. Debugging chaos may ensue.

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-thresholds |

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

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


IntersectionObserver: takeRecords() method - Web APIs

IntersectionObserver: takeRecords() method
==========================================

 The `IntersectionObserver` method
 **`takeRecords()`** returns an array of
 `IntersectionObserverEntry` objects, one for each targeted element which
 has experienced an intersection change since the last time the intersections were
 checked, either explicitly through a call to this method or implicitly by an automatic
 call to the observer's callback.

**Note:** If you use the callback to monitor these changes, you don't
 need to call this method. Calling this method clears the pending intersection list, so
 the callback will not be run.

Syntax
------

```js
takeRecords()
```

### Parameters

None.

### Return value

 An array of `IntersectionObserverEntry` objects, one for each target
 element whose intersection with the root has changed since the last time the
 intersections were checked.

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-takerecords |

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

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

See also
--------

* Intersection Observer API


IntersectionObserver: root property - Web APIs

IntersectionObserver: root property
===================================

 The `IntersectionObserver` interface's read-only
 **`root`** property identifies the `Element` or
 `Document` whose bounds are treated as the bounding box
 of the viewport for the element which is the observer's target.

 If the `root` is `null`, then the bounds of the actual document
 viewport are used.

Value
-----

 A `Element` or `Document` object whose bounding box is used
 as the bounds of the viewport for the purposes of determining how much of the target
 element is visible. The intersection of this bounding rectangle, offset by any margins
 specified in the options passed to the
 `IntersectionObserver()`
 constructor, the target element's bounds, minus the bounds of every element or other
 object which overlaps the target element, is considered to be the visible area of the
 target element.

 If `root` is `null`, then the owning document is used as the
 root, and the bounds its viewport (that is, the visible area of the document) are used
 as the root bounds.

Examples
--------

 This example sets the `border` of the intersection observer's root element
 to be a 2-pixel medium green line.

```js
observer.root.style.border = "2px solid #44aa44";
```

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-root |

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

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

See also
--------

* Timing element visibility with the Intersection Observer API