# WebGLBuffer
Note: This feature is available in Web Workers.
The WebGLBuffer interface is part of the WebGL API and represents an opaque buffer object storing data such as vertices or colors.
WebGLObject  WebGLBuffer 
## Description
The `WebGLBuffer` object does not define any methods or properties of its own and its content is not directly accessible. When working with `WebGLBuffer` objects, the following methods of the `WebGLRenderingContext` are useful:
  * `WebGLRenderingContext.bindBuffer()`
  * `WebGLRenderingContext.createBuffer()`
  * `WebGLRenderingContext.deleteBuffer()`
  * `WebGLRenderingContext.isBuffer()`


## Examples
>
### Creating a buffer
    
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext("webgl");
    const buffer = gl.createBuffer();
    
  * `WebGLRenderingContext.bindBuffer()`
  * `WebGLRenderingContext.createBuffer()`
  * `WebGLRenderingContext.deleteBuffer()`
  * `WebGLRenderingContext.isBuffer()`
  * Other buffers: `WebGLFramebuffer`, `WebGLRenderbuffer`


# FileSystemObserver
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The `FileSystemObserver` interface of the File System API provides a mechanism to observe changes to the user-observable file system and the Origin Private File System (OPFS). This means web applications don't have to poll the file system to find changes in the files or folder structure, which can be time-consuming and wasteful.
## Constructor
`FileSystemObserver()` Experimental Non-standard
    
Creates a new `FileSystemObserver` object instance.
## Instance methods
`disconnect()` Experimental Non-standard
    
Stop observing the filesystem.
`observe()` Experimental Non-standard
    
Start observing changes to a given file or directory.
## Examples
Note: For a complete working example, check out File System Observer Demo (source code).
### Initialize a `FileSystemObserver`
Before you can start observing file or directory changes, you need to initialize a `FileSystemObserver` to handle the observations. This is done using the `FileSystemObserver()` constructor, which takes a callback function as an argument:
    
    const observer = new FileSystemObserver(callback);
    
The callback function body can be specified to return and process file change observations in any way you want:
    
    const callback = (records, observer) => {
      for (const record of records) {
        console.log("Change detected:", record);
        const reportContent = `Change observed to ${record.changedHandle.kind} ${record.changedHandle.name}. Type: ${record.type}.`;
        sendReport(reportContent); // Some kind of user-defined reporting function
      }
    
      observer.disconnect();
    };
    
### Observe a file or directory
Once a `FileSystemObserver` instance is available, you can start observing changes to a file system entry by calling the `FileSystemObserver.observe()` method.
You can observe a file or directory in the user-observable file system or the Origin Private File System (OPFS) by passing a `FileSystemFileHandle` or `FileSystemDirectoryHandle` to `observe()`. Instances of these objects can be returned, for example, when asking the user to select a file or directory using `Window.showSaveFilePicker()` or `Window.showDirectoryPicker()`:
    
    // Observe a file
    async function observeFile() {
      const fileHandle = await window.showSaveFilePicker();
    
      await observer.observe(fileHandle);
    }
    
    // Observe a directory
    async function observeDirectory() {
      const directoryHandle = await window.showDirectoryPicker();
    
      await observer.observe(directoryHandle);
    }
    
You can also observe changes to the OPFS by passing a `FileSystemSyncAccessHandle` to `observe()`:
    
    // Observe an OPFS file system entry
    async function observeOPFSFile() {
      const root = await navigator.storage.getDirectory();
      const draftHandle = await root.getFileHandle("draft.txt", { create: true });
      const syncHandle = await draftHandle.createSyncAccessHandle();
    
      await observer.observe(syncHandle);
    }
    
### Stop observing the file system
When you want to stop observing changes to the file system entry, you can call `FileSystemObserver.disconnect()`:
    
    observer.disconnect();
    
Not currently part of a specification. See https://github.com/whatwg/fs/pull/165 for the relevant specification PR.
  * File System API
  * The File System Observer API origin trial on developer.chrome.com (2024)


# HTMLUListElement
The `HTMLUListElement` interface provides special properties (beyond those defined on the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating unordered list (`<ul>`) elements.
EventTarget  Node  Element  HTMLElement  HTMLUListElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLUListElement.type` Deprecated
    
A string value reflecting the `type` and defining the kind of marker to be used to display. The values are browser dependent and have never been standardized.
`HTMLUListElement.compact` Deprecated
    
A boolean value indicating that spacing between list items should be reduced. This property reflects the `compact` attribute only, it doesn't consider the `line-height` CSS property used for that behavior in modern pages.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<ul>`.


# CSSKeywordValue
The `CSSKeywordValue` interface of the CSS Typed Object Model API creates an object to represent CSS keywords and other identifiers.
The interface instance name is a stringifier meaning that when used anywhere a string is expected it will return the value of `CSSKeyword.value`.
CSSStyleValue  CSSKeywordValue 
## Constructor
`CSSKeywordValue()`
    
Creates a new `CSSKeywordValue` object.
## Instance properties
`CSSKeywordValue.value`
    
Returns or sets the value of the `CSSKeywordValue`.
## Instance methods
Inherits methods from `CSSStyleValue`.
## Examples
The following example resets the CSS `display` property to its defaults, setting the inline `style` attribute to `style="display: initial"` if viewed in the developer tools inspector.
    
    let myElement = document.getElementById("myElement").attributeStyleMap;
    myElement.set("display", new CSSKeywordValue("initial"));
    
    console.log(myElement.get("display").value); // 'initial'
    
  * `CSSImageValue`
  * `CSSNumericValue`
  * `CSSPositionValue`
  * `CSSTransformValue`
  * `CSSUnparsedValue`


# SVGRadialGradientElement
The `SVGRadialGradientElement` interface corresponds to the `<RadialGradient>` element.
EventTarget  Node  Element  SVGElement  SVGGradientElement  SVGRadialGradientElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGradientElement`.
`SVGRadialGradientElement.cx` Read only
    
An `SVGAnimatedLength` corresponding to the `cx` attribute of the given `<RadialGradient>` element.
`SVGRadialGradientElement.cy` Read only
    
An `SVGAnimatedLength` corresponding to the `cy` attribute of the given `<RadialGradient>` element.
`SVGRadialGradientElement.r` Read only
    
An `SVGAnimatedLength` corresponding to the `r` attribute of the given `<RadialGradient>` element.
`SVGRadialGradientElement.fr` Read only
    
An `SVGAnimatedLength` corresponding to the `fr` attribute.
`SVGRadialGradientElement.fx` Read only
    
An `SVGAnimatedLength` corresponding to the `fx` attribute of the given `<RadialGradient>` element.
`SVGRadialGradientElement.fy` Read only
    
An `SVGAnimatedLength` corresponding to the `fy` attribute of the given `<RadialGradient>` element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGGradientElement`.
# FileSystemChangeRecord
The `FileSystemChangeRecord` dictionary of the File System API contains details of a single change observed by a `FileSystemObserver`.
The `records` argument passed into the `FileSystemObserver()` constructor's callback function is an array of `FileSystemChangeRecord` objects.
## Instance properties
`changedHandle`
    
A reference to the file system handle that the change was observed on.
  * For the user-observable file system, this can be a `FileSystemFileHandle` or a `FileSystemDirectoryHandle`.
  * For the Origin Private File System (OPFS), it can be a `FileSystemFileHandle`, a `FileSystemDirectoryHandle`, or a `FileSystemSyncAccessHandle`.


This property will be `null` for records with a `"disappeared"`, `"errored"`, or `"unknown"` type.
`relativePathComponents`
    
An array containing the path components that make up the relative file path from the `root` to the `changedHandle`, including the `changedHandle` filename.
`relativePathMovedFrom`
    
An array containing the path components that make up the relative file path from the `root` to the `changedHandle`'s former location, in the case of observations with a `"moved"` type. If the type is not `"moved"`, this property will be `null`.
`root`
    
A reference to the root file system handle, that is, the one passed to the `observe()` call that started the observation. Again, this can be a `FileSystemFileHandle`, `FileSystemDirectoryHandle`, or `FileSystemSyncAccessHandle`.
`type`
    
A string representing the type of change that was observed. Possible values are:
`appeared`
    
The file or directory was created or moved into the `root` file structure.
`disappeared`
    
The file or directory was deleted or moved out of the `root` file structure. To find out which file or directory disappeared, you can query the `relativePathComponents` property.
`errored`
    
An error state occurred in the observed directory. This can result when:
  * The observation is no longer valid. This can occur when the observed handle (that is, the `root` of the observation) is deleted or moved. In this case, a `"disappeared"` observation will be recorded, followed by an `"errored"` observation. In such cases, you may wish to stop observing the file system using `FileSystemObserver.disconnect()`.
  * The maximum limit of per-origin observations is reached. This limit is dependent on the operating system and not known beforehand. If this happens, the site may decide to retry, though there's no guarantee that the operating system will have freed up enough resources.
  * Permission to access the directory or file handle is removed.


`modified`
    
The file or directory was modified.
`moved`
    
The file or directory was moved within the root file structure.
Note: On Windows, `"moved"` observations aren't supported between directories. They are reported as a `"disappeared"` observation in the source directory and an `"appeared"` observation in the destination directory.
`unknown`
    
Indicates that some observations were missed. If you wish to find out information on what changed in the missed observations, you could fall back to polling the observed directory.
Depending on the operating system, not all observations will be reported with the same level of detail, for example, when the contents of a directory change recursively. At best, the website will receive a detailed change record containing the type of change and a handle to the affected path. At worst, the website will receive a more generic change record (that is, an `"unknown"` type) that still requires it to enumerate the directory to figure out which handle changed.
This is still an improvement over polling, since the directory enumeration can be kicked off on-demand from the callback function, rather than needing to poll for changes periodically.
## Examples
>
### Initialize a `FileSystemObserver`
Before you can start observing file or directory changes, you need to initialize a `FileSystemObserver` to handle the observations. This is done using the `FileSystemObserver()` constructor, which takes a callback function as an argument:
    
    const observer = new FileSystemObserver(callback);
    
The callback function body can be specified to return and process file change observations in any way you want. Each object inside the `records` array is a `FileSystemChangeRecord` object:
    
    const callback = (records, observer) => {
      for (const record of records) {
        console.log("Change detected:", record);
        const reportContent = `Change observed to ${record.changedHandle.kind} ${record.changedHandle.name}. Type: ${record.type}.`;
        sendReport(reportContent); // Some kind of user-defined reporting function
      }
    
      observer.disconnect();
    };
    
Not currently part of a specification. See https://github.com/whatwg/fs/pull/165 for the relevant specification PR.
  * `FileSystemObserver()` constructor
  * File System API
  * The File System Observer API origin trial on developer.chrome.com (2024)


# AudioData
Note: This feature is available in Dedicated Web Workers.
The `AudioData` interface of the WebCodecs API represents an audio sample.
`AudioData` is a transferable object.
## Description
An audio track consists of a stream of audio samples, each sample representing a captured moment of sound. An `AudioData` object is a representation of such a sample. Working alongside the interfaces of the Insertable Streams API, you can break a stream into individual `AudioData` objects with `MediaStreamTrackProcessor`, or construct an audio track from a stream of frames with `MediaStreamTrackGenerator`.
Note: Find out more about audio on the web in Digital audio concepts.
### The media resource
An `AudioData` object contains a reference to an attached media resource. This media resource contains the actual audio sample data described by the object. A media resource is maintained by the user agent until it is no longer referenced by an `AudioData` object, for example when `AudioData.close()` is called.
### Planes and audio format
To return the sample format of an `AudioData` use the `AudioData.format` property. The format may be described as interleaved or planar. In interleaved formats, the audio samples from the different channels are laid out in a single buffer, described as a plane. This plane contains a number of elements equal to `AudioData.numberOfFrames` * `AudioData.numberOfChannels`.
In planar format, the number of planes is equal to `AudioData.numberOfChannels`, and each plane is a buffer containing a number of elements equal to `AudioData.numberOfFrames`.
## Constructor
`AudioData()`
    
Creates a new `AudioData` object.
## Instance properties
`AudioData.format` Read only
    
Returns the sample format of the audio.
`AudioData.sampleRate` Read only
    
Returns the sample rate of the audio in Hz.
`AudioData.numberOfFrames` Read only
    
Returns the number of frames.
`AudioData.numberOfChannels` Read only
    
Returns the number of audio channels.
`AudioData.duration` Read only
    
Returns the duration of the audio in microseconds.
`AudioData.timestamp` Read only
    
Returns the timestamp of the audio in microseconds.
## Instance methods
`AudioData.allocationSize()`
    
Returns the number of bytes required to hold the sample as filtered by options passed into the method.
`AudioData.copyTo()`
    
Copies the samples from the specified plane of the `AudioData` object to the destination.
`AudioData.clone()`
    
Creates a new `AudioData` object with reference to the same media resource as the original.
`AudioData.close()`
    
Clears all states and releases the reference to the media resource.
# HTMLLegendElement
The `HTMLLegendElement` is an interface allowing to access properties of the `<legend>` elements. It inherits properties and methods from the `HTMLElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLLegendElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLLegendElement.align` Deprecated
    
A string representing the alignment relative to the form set.
`HTMLLegendElement.form` Read only
    
A `HTMLFormElement` representing the form that this legend belongs to. If the legend has a fieldset element as its parent, then this attribute returns the same value as the form attribute on the parent fieldset element. Otherwise, it returns `null`.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<legend>`


# DOMPoint
Note: This feature is available in Web Workers.
A `DOMPoint` object represents a 2D or 3D point in a coordinate system; it includes values for the coordinates in up to three dimensions, as well as an optional perspective value. `DOMPoint` is based on `DOMPointReadOnly` but allows its properties' values to be changed.
In general, a positive `x` component represents a position to the right of the origin, a positive `y` component is downward from the origin, and a positive `z` component extends outward from the screen (in other words, toward the user).
DOMPointReadOnly  DOMPoint 
## Constructor
`DOMPoint()`
    
Creates and returns a new `DOMPoint` object given the values of zero or more of its coordinate components and optionally the `w` perspective value. You can also use an existing `DOMPoint` or `DOMPointReadOnly` or an object to create a new point by calling the `DOMPoint.fromPoint()` static method.
## Instance properties
`DOMPoint` may also inherit properties from its parent, `DOMPointReadOnly`.
`DOMPoint.x`
    
The `x` coordinate of the `DOMPoint`.
`DOMPoint.y`
    
The `y` coordinate of the `DOMPoint`.
`DOMPoint.z`
    
The `z` coordinate of the `DOMPoint`.
`DOMPoint.w`
    
The perspective value of the `DOMPoint`.
## Instance methods
`DOMPoint` inherits instance methods from its parent, `DOMPointReadOnly`.
## Static methods
`DOMPoint` may also inherit static methods from its parent, `DOMPointReadOnly`.
`DOMPoint.fromPoint()`
    
Creates a new mutable `DOMPoint` object given an existing point (or an object containing matching properties), which provides the values for its properties.
## Examples
In the WebXR Device API, `DOMPointReadOnly` values represent positions and orientations. In the following snippet, the pose of the XR device (such as a VR headset or phone with AR capabilities) can be retrieved by calling using `XRFrame.getViewerPose()` during an `XRSession` animation frame, then accessing the resulting `XRPose`'s `transform` property, which contains two `DOMPointReadOnly` attributes: `position` as a vector and `orientation` as a quaternion.
    
    function onXRFrame(time, xrFrame) {
      let viewerPose = xrFrame.getViewerPose(xrReferenceSpace);
    
      if (viewerPose) {
        let position = viewerPose.transform.position;
        let orientation = viewerPose.transform.orientation;
    
        console.log(
          `XR Viewer Position: {x: ${roundToTwo(position.x)}, y: ${roundToTwo(
            position.y,
          )}, z: ${roundToTwo(position.z)}`,
        );
    
        console.log(
          `XR Viewer Orientation: {x: ${roundToTwo(orientation.x)}, y: ${roundToTwo(
            orientation.y,
          )}, z: ${roundToTwo(orientation.z)}, w: ${roundToTwo(orientation.w)}`,
        );
      }
    }
    
  * `DOMRect`
  * `DOMMatrix`


# WEBGL_compressed_texture_s3tc extension
The `WEBGL_compressed_texture_s3tc` extension is part of the WebGL API and exposes four S3TC compressed texture formats.
Compressed textures reduce the amount of memory needed to store a texture on the GPU, allowing for higher resolution textures or more of the same resolution textures.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is available to both, WebGL1 and WebGL2 contexts.
## Constants
The compressed texture formats are exposed by four constants and can be used in two functions: `compressedTexImage2D()` and `compressedTexSubImage2D()`.
`ext.COMPRESSED_RGB_S3TC_DXT1_EXT`
    
A DXT1-compressed image in an RGB image format.
`ext.COMPRESSED_RGBA_S3TC_DXT1_EXT`
    
A DXT1-compressed image in an RGB image format with an on/off alpha value.
`ext.COMPRESSED_RGBA_S3TC_DXT3_EXT`
    
A DXT3-compressed image in an RGBA image format. Compared to a 32-bit RGBA texture, it offers 4:1 compression.
`ext.COMPRESSED_RGBA_S3TC_DXT5_EXT`
    
A DXT5-compressed image in an RGBA image format. It also provides a 4:1 compression, but differs to the DXT3 compression in how the alpha compression is done.
## Examples
    
    const ext =
      gl.getExtension("WEBGL_compressed_texture_s3tc") ||
      gl.getExtension("MOZ_WEBGL_compressed_texture_s3tc") ||
      gl.getExtension("WEBKIT_WEBGL_compressed_texture_s3tc");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.compressedTexImage2D(
      gl.TEXTURE_2D,
      0,
      ext.COMPRESSED_RGBA_S3TC_DXT5_EXT,
      512,
      512,
      0,
      textureData,
    );
    
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    
  * S3 Texture Compression – OpenGL wiki
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.compressedTexImage2D()`
  * `WebGLRenderingContext.compressedTexSubImage2D()`
  * `WebGLRenderingContext.getParameter()`


# HTMLProgressElement
The `HTMLProgressElement` interface provides special properties and methods (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating the layout and presentation of `<progress>` elements.
EventTarget  Node  Element  HTMLElement  HTMLProgressElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLProgressElement.max`
    
A `double` value reflecting the content attribute of the same name, limited to numbers greater than zero. Its default value is `1.0`.
`HTMLProgressElement.position` Read only
    
Returns a `double` value returning the result of dividing the current value (`value`) by the maximum value (`max`); if the progress bar is an indeterminate progress bar, it returns `-1`.
`HTMLProgressElement.value`
    
A `double` value that reflects the current value; if the progress bar is an indeterminate progress bar, it returns `0`.
`HTMLProgressElement.labels` Read only
    
Returns `NodeList` containing the list of `<label>` elements that are labels for this element.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<progress>`


# PerformanceEntry
Note: This feature is available in Web Workers.
The `PerformanceEntry` object encapsulates a single performance metric that is part of the browser's performance timeline.
The Performance API offers built-in metrics which are specialized subclasses of `PerformanceEntry`. This includes entries for resource loading, event timing, and more.
A performance entry can also be created by calling the `Performance.mark()` or `Performance.measure()` methods at an explicit point in an application. This allows you to add your own metrics to the performance timeline.
The `PerformanceEntry` instances will always be one of the following subclasses:
  * `LargestContentfulPaint`
  * `LayoutShift`
  * `PerformanceEventTiming`
  * `PerformanceLongAnimationFrameTiming`
  * `PerformanceLongTaskTiming`
  * `PerformanceMark`
  * `PerformanceMeasure`
  * `PerformanceNavigationTiming`
  * `PerformancePaintTiming`
  * `PerformanceResourceTiming`
  * `PerformanceScriptTiming`
  * `PerformanceServerTiming`
  * `TaskAttributionTiming`
  * `VisibilityStateEntry`


## Instance properties
`PerformanceEntry.name` Read only
    
A string representing the name for a performance entry. The value depends on the subtype.
`PerformanceEntry.entryType` Read only
    
A string representing the type of performance metric. For example, `"mark"` when `PerformanceMark` is used.
`PerformanceEntry.startTime` Read only
    
A `DOMHighResTimeStamp` representing the starting time for the performance metric.
`PerformanceEntry.duration` Read only
    
A `DOMHighResTimeStamp` representing the duration of the performance entry.
## Instance methods
`PerformanceEntry.toJSON()`
    
Returns a JSON representation of the `PerformanceEntry` object.
## Example
>
### Working with performance entries
The following example creates `PerformanceEntry` objects that are of the types `PerformanceMark` and `PerformanceMeasure`. The `PerformanceMark` and `PerformanceMeasure` subclasses inherit the `duration`, `entryType`, `name`, and `startTime` properties from `PerformanceEntry` and set them to their appropriate values.
    
    // Place at a location in the code that starts login
    performance.mark("login-started");
    
    // Place at a location in the code that finishes login
    performance.mark("login-finished");
    
    // Measure login duration
    performance.measure("login-duration", "login-started", "login-finished");
    
    function perfObserver(list, observer) {
      list.getEntries().forEach((entry) => {
        if (entry.entryType === "mark") {
          console.log(`${entry.name}'s startTime: ${entry.startTime}`);
        }
        if (entry.entryType === "measure") {
          console.log(`${entry.name}'s duration: ${entry.duration}`);
        }
      });
    }
    const observer = new PerformanceObserver(perfObserver);
    observer.observe({ entryTypes: ["measure", "mark"] });
    
# USBOutTransferResult
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USBOutTransferResult` interface of the WebUSB API provides the result from a call to the `transferOut()` and `controlTransferOut()` methods of the `USBDevice` interface. It represents the result from requesting a transfer of data from the USB host to the USB device.
## Constructor
`USBOutTransferResult()` Experimental
    
Creates a new `USBOutTransferResult` object with the provided `status` and `bytesWritten` fields.
## Instance properties
`USBOutTransferResult.bytesWritten` Read only Experimental
    
Returns the number of bytes from the transfer request that were sent to the device.
`USBOutTransferResult.status` Read only Experimental
    
Returns the status of the transfer request, one of:
  * `"ok"` \- The transfer was successful.
  * `"stall"` \- The device indicated an error by generating a stall condition on the endpoint. A stall on a bulk or interrupt endpoint must be cleared by calling `clearHalt()` before `transferOut()` can be called again.


# SerialPort
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Dedicated Web Workers.
The `SerialPort` interface of the Web Serial API provides access to a serial port on the host device.
EventTarget  SerialPort 
## Constructor
Instances of this interface may be obtained by calling methods of the `Serial` interface, therefore it has no constructor of its own.
## Instance properties
`SerialPort.connected` Read only Experimental
    
Returns a boolean value that indicates whether the port is logically connected to the device.
`SerialPort.readable` Read only Experimental
    
Returns a `ReadableStream` for receiving data from the device connected to the port.
`SerialPort.writable` Read only Experimental
    
Returns a `WritableStream` for sending data to the device connected to the port.
## Instance methods
`SerialPort.forget()` Experimental
    
Returns a `Promise` that resolves when access to the serial port is revoked. Calling this "forgets" the device, resetting any previously-set permissions so the calling site can no longer communicate with the port.
`SerialPort.getInfo()` Experimental
    
Returns an object containing identifying information for the device available via the port.
`SerialPort.open()` Experimental
    
Returns a `Promise` that resolves when the port is opened. By default the port is opened with 8 data bits, 1 stop bit and no parity checking.
`SerialPort.setSignals()` Experimental
    
Sets control signals on the port and returns a `Promise` that resolves when they are set.
`SerialPort.getSignals()` Experimental
    
Returns a `Promise` that resolves with an object containing the current state of the port's control signals.
`SerialPort.close()` Experimental
    
Returns a `Promise` that resolves when the port closes.
## Events
`connect` Experimental
    
Fired when the port connects to the device.
`disconnect` Experimental
    
Fired when the port disconnects from the device.
## Examples
>
### Opening a port
Before communicating on a serial port it must be opened. Opening the port allows the site to specify the necessary parameters that control how data is transmitted and received. Developers should check the documentation for the device they are connecting to for the appropriate parameters.
    
    await port.open({ baudRate: 9600 /* pick your baud rate */ });
    
Once the `Promise` returned by `open()` resolves the `readable` and `writable` attributes can be accessed to get the `ReadableStream` and `WritableStream` instances for receiving data from and sending data to the connected device.
### Reading data from a port
The following example shows how to read data from a port. The outer loop handles non-fatal errors, creating a new reader until a fatal error is encountered and `readable` becomes `null`.
    
    while (port.readable) {
      const reader = port.readable.getReader();
      try {
        while (true) {
          const { value, done } = await reader.read();
          if (done) {
            // |reader| has been canceled.
            break;
          }
          // Do something with |value|…
        }
      } catch (error) {
        // Handle |error|…
      } finally {
        reader.releaseLock();
      }
    }
    
### Writing data to a port
The following example shows how to write a string to a port. A `TextEncoder` converts the string to a `Uint8Array` before transmission.
    
    const encoder = new TextEncoder();
    const writer = port.writable.getWriter();
    await writer.write(encoder.encode("PING"));
    writer.releaseLock();
    
# CloseWatcher
The `CloseWatcher` interface allows a custom UI component with open and close semantics to respond to device-specific close actions in the same way as a built-in component.
EventTarget  CloseWatcher 
The `CloseWatcher` interface inherits from `EventTarget`.
## Constructor
`CloseWatcher()` Experimental
    
Creates a new `CloseWatcher` instance.
## Instance methods
This interface also inherits methods from its parent, `EventTarget`.
`CloseWatcher.requestClose()` Experimental
    
Fires a `cancel` event and if that event is not canceled with `Event.preventDefault()`, proceeds to fire a `close` event, and then finally deactivates the close watcher as if `destroy()` was called.
`CloseWatcher.close()` Experimental
    
Immediately fires the `close` event, without firing `cancel` first, and deactivates the close watcher as if `destroy()` was called.
`CloseWatcher.destroy()` Experimental
    
Deactivates the close watcher so that it will no longer receive `close` events.
## Events
`cancel` Experimental
    
An event fired before the `close` event, so that `close` can be prevented from firing.
`close` Experimental
    
An event fired when a close request was received.
## Description
Some UI components have "close behavior", meaning that the component appears, and the user can close it when they are finished with it. For example: sidebars, popups, dialogs, or notifications.
Users generally expect to be able to use a particular mechanism to close these elements, and the mechanism tends to be device-specific. For example, on a device with a keyboard it might be the `Esc` key, but Android might use the back button. For built-in components, such as popover or `<dialog>` elements, the browser takes care of these differences, closing the element when the user performs the close action appropriate for the device. However, when a web developer implements their own closable UI component (for example, a sidebar), it is hard to implement this kind of device-specific close behavior.
The `CloseWatcher` interface solves this problem by delivering a `cancel` event, followed by a `close` event, when the user executes the device-specific close action. Web applications can use the `onclose` handler to close the UI element in response to the device-specific event. They can also trigger these same events in response to the UI element's normal closing mechanism, and then implement common `close` event handling for both the application- and device-specific close action. Once the `onclose` event handler completes the `CloseWatcher` is destroyed and the events will no longer be fired.
In some applications the UI element may only be allowed to close when it is in a particular state; for example, when some needed information is populated. To address these cases, applications can prevent the `close` event from being emitted by implementing a handler for the `cancel` event that calls `Event.preventDefault()` if the UI element is not ready to close.
You can create `CloseWatcher` instances without user activation, and this can be useful to implement cases like session inactivity timeout dialogs. However, if you create more than one `CloseWatcher` without user activation, then the watchers will be grouped, so a single close request will close them both. In addition, the first close watcher does not necessarily have to be a `CloseWatcher` object: it could be a modal dialog element, or a popover generated by an element with the popover attribute
## Examples
>
### Processing close requests
In this example, you have your own UI component (a picker) and you want to support both, the platform's default close method (e.g., the `Esc` key) and your custom close method (a close button).
You create a `CloseWatcher` to handle all `close` events.
The `onclick` handler of your UI component can call `requestClose` to request a close and to route your close request through the same `onclose` handler the platform close method uses.
    
    const watcher = new CloseWatcher();
    const picker = setUpAndShowPickerDOMElement();
    let chosenValue = null;
    
    watcher.onclose = () => {
      chosenValue = picker.querySelector("input").value;
      picker.remove();
    };
    
    picker.querySelector(".close-button").onclick = () => watcher.requestClose();
    
### Closing a sidebar using a platform close request
In this example we have a sidebar component that is displayed when an "Open" button is selected, and hidden using either a "Close" button or platform-native mechanisms. To make it more interesting, this is a live example!
Note also that the example is a little contrived, because normally we would use a toggle button to change a sidebar state. We could certainly do that, but using separate "Open" and "Close" buttons makes it easier to demonstrate the feature.
#### HTML
The HTML defines "Open" and "Close" `<button>` elements, along with `<div>` elements for the main content and the sidebar. CSS is used to animate the display of the sidebar element when the `open` class is added or removed from the sidebar and content elements (this CSS is hidden because it is not relevant to the example).
    
    <button id="sidebar-open" type="button">Open</button>
    <button id="sidebar-close" type="button">Close</button>
    <div class="sidebar">Sidebar</div>
    <div class="main-content">Main content</div>
    
#### JavaScript
The code first gets variables for the buttons and `<div>` elements defined in the HTML. It also defines a function `closeSidebar()` that is called when the sidebar is closed, to remove the `open` class from the `<div>` elements, and adds a `click` event listener that calls the `openSidebar()` method when the "Open" button is clicked.
    
    const sidebar = document.querySelector(".sidebar");
    const mainContent = document.querySelector(".main-content");
    const sidebarOpen = document.getElementById("sidebar-open");
    const sidebarClose = document.getElementById("sidebar-close");
    
    function closeSidebar() {
      sidebar.classList.remove("open");
      mainContent.classList.remove("open");
    }
    
    sidebarOpen.addEventListener("click", openSidebar);
    
The implementation of `openSidebar()` is given below. The method first checks if the sidebar is already open, and if not, adds the `open` class to the elements so that the sidebar is displayed.
We then create a new `CloseWatcher` and add a listener that will call `close()` on it if the "Close" button is clicked. This ensures that the `close` event is called when either platform native close methods or the "Close" button are used. The implementation of the `onclose()` event handler simply closes the sidebar, and the `CloseWatcher` is then destroyed automatically.
    
    function openSidebar() {
      if (!sidebar.classList.contains("open")) {
        sidebar.classList.add("open");
        mainContent.classList.add("open");
    
        // Add new CloseWatcher
        const watcher = new CloseWatcher();
    
        sidebarClose.addEventListener("click", () => watcher.close());
    
        // Handle close event, invoked by platform mechanisms or "Close" button
        watcher.onclose = () => {
          closeSidebar();
        };
      }
    }
    
Note that we chose to call `close()` on the watcher instead of `CloseWatcher.requestClose()` because we don't need the `cancel` event to be emitted (we would use `requestClose()` and the `cancel` event handler if there was a reason to ever prevent the sidebar from closing prematurely).
#### Result
Select the "Open" button to open the sidebar. You should be able to close the sidebar using the "Close" button or the usual platform method, such as the `Esc` key on Windows.
  * `close` event on `HTMLDialogElement`


# History API
The History API provides access to the browser's session history (not to be confused with WebExtensions history) through the `history` global object. It exposes useful methods and properties that let you navigate back and forth through the user's history, and manipulate the contents of the history stack.
Note: This API is only available on the main thread (`Window`). It cannot be accessed in `Worker` or `Worklet` contexts.
## Concepts and usage
Moving backward and forward through the user's history is done using the `back()`, `forward()`, and `go()` methods.
### Moving forward and backward
To move backward through history:
    
    history.back();
    
This acts exactly as if the user clicked on the `Back` button in their browser toolbar.
Similarly, you can move forward (as if the user clicked the `Forward` button), like this:
    
    history.forward();
    
### Moving to a specific point in history
You can use the `go()` method to load a specific page from session history, identified by its relative position to the current page. (The current page's relative position is `0`.)
To move back one page (the equivalent of calling `back()`):
    
    history.go(-1);
    
To move forward a page, just like calling `forward()`:
    
    history.go(1);
    
Similarly, you can move forward 2 pages by passing `2`, and so forth.
Another use for the `go()` method is to refresh the current page by either passing `0`, or by invoking it without an argument:
    
    // The following statements
    // both have the effect of
    // refreshing the page
    history.go(0);
    history.go();
    
You can determine the number of pages in the history stack by looking at the value of the `length` property:
    
    const numberOfEntries = history.length;
    
## Interfaces
`History`
    
Allows manipulation of the browser session history (that is, the pages visited in the tab or frame that the current page is loaded in).
`PopStateEvent`
    
The interface of the `popstate` event.
## Examples
The following example assigns a listener for the `popstate` event. It then illustrates some of the methods of the history object to add, replace, and move within the browser history for the current tab.
    
    window.addEventListener("popstate", (event) => {
      alert(
        `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
      );
    });
    
    history.pushState({ page: 1 }, "title 1", "?page=1");
    history.pushState({ page: 2 }, "title 2", "?page=2");
    history.replaceState({ page: 3 }, "title 3", "?page=3");
    history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
    history.back(); // alerts "location: http://example.com/example.html, state: null"
    history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
    
  * `history` global object
  * `popstate` event


# FileList
Note: This feature is available in Web Workers.
The `FileList` interface represents an object of this type returned by the `files` property of the HTML `<input>` element; this lets you access the list of files selected with the `<input type="file">` element. It's also used for a list of files dropped into web content when using the drag and drop API; see the `DataTransfer` object for details on this usage.
All `<input>` element nodes have a `files` attribute of type `FileList` on them which allows access to the items in this list. For example, if the HTML includes the following file input:
    
    <input id="fileItem" type="file" />
    
The following line of code fetches the first file in the node's file list as a `File` object:
    
    const file = document.getElementById("fileItem").files[0];
    
This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs represent list structures using types based on JavaScript arrays, thus making many array methods available, and at the same time imposing additional semantics on their usage (such as making their items read-only).
These historical reasons do not mean that you as a developer should avoid `FileList`. You don't create `FileList` objects yourself, but you get them from APIs such as `HTMLInputElement.files`, and these APIs are not deprecated. However, be careful of the semantic differences from a real array.
## Instance properties
`length` Read only
    
A read-only value indicating the number of files in the list.
## Instance methods
`item()`
    
Returns a `File` object representing the file at the specified index in the file list.
## Example
>
### Logging filenames
In this example, we log the names of all the files selected by the user.
#### HTML
    
    <input id="myfiles" multiple type="file" />
    <pre class="output">Selected files:</pre>
    
#### CSS
    
    .output {
      overflow: scroll;
      margin: 1rem 0;
      height: 200px;
    }
    
#### JavaScript
    
    const output = document.querySelector(".output");
    const fileInput = document.querySelector("#myfiles");
    
    fileInput.addEventListener("change", () => {
      for (const file of fileInput.files) {
        output.innerText += `\n${file.name}`;
      }
    });
    
#### Result
  * Using files from web applications
  * `File`
  * `FileReader`


# OffscreenCanvas
Note: This feature is available in Web Workers.
When using the `<canvas>` element or the Canvas API, rendering, animation, and user interaction usually happen on the main execution thread of a web application. The computation relating to canvas animations and rendering can have a significant impact on application performance.
The `OffscreenCanvas` interface provides a canvas that can be rendered off screen, decoupling the DOM and the Canvas API so that the `<canvas>` element is no longer entirely dependent on the DOM. Rendering operations can also be run inside a worker context, allowing you to run some tasks in a separate thread and avoid heavy work on the main thread.
`OffscreenCanvas` is a transferable object.
EventTarget  OffscreenCanvas 
## Constructors
`OffscreenCanvas()`
    
`OffscreenCanvas` constructor. Creates a new `OffscreenCanvas` object.
## Instance properties
`OffscreenCanvas.height`
    
The height of the offscreen canvas.
`OffscreenCanvas.width`
    
The width of the offscreen canvas.
## Instance methods
`OffscreenCanvas.getContext()`
    
Returns a drawing context for the offscreen canvas, or `null` if the context identifier is not supported, or the offscreen canvas has already been set to a different context mode.
`OffscreenCanvas.convertToBlob()`
    
Creates a `Blob` object representing the image contained in the canvas.
`OffscreenCanvas.transferToImageBitmap()`
    
Creates an `ImageBitmap` object from the most recently rendered image of the `OffscreenCanvas`. See its reference for important notes on managing this `ImageBitmap`.
## Events
Inherits events from its parent, `EventTarget`.
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`contextlost`
    
Fired if the browser detects that an `OffscreenCanvasRenderingContext2D` context is lost.
`contextrestored`
    
Fired if the browser successfully restores an `OffscreenCanvasRenderingContext2D` context.
## Examples
>
### Synchronous display of frames produced by an `OffscreenCanvas`
One way to use the `OffscreenCanvas` API is to use a rendering context that has been obtained from an `OffscreenCanvas` object to generate new frames. Once a new frame has finished rendering in this context, the `transferToImageBitmap()` method can be called to save the most recent rendered image. This method returns an `ImageBitmap` object, which can be used in a variety of Web APIs and also in a second canvas without creating a transfer copy.
To display the `ImageBitmap`, you can use an `ImageBitmapRenderingContext` context, which can be created by calling `canvas.getContext("bitmaprenderer")` on a (visible) canvas element. This context only provides functionality to replace the canvas's contents with the given `ImageBitmap`. A call to `ImageBitmapRenderingContext.transferFromImageBitmap()` with the previously rendered and saved `ImageBitmap` from the OffscreenCanvas, will display the `ImageBitmap` on the canvas and transfer its ownership to the canvas. A single `OffscreenCanvas` may transfer frames into an arbitrary number of other `ImageBitmapRenderingContext` objects.
Given these two `<canvas>` elements
    
    <canvas id="one"></canvas> <canvas id="two"></canvas>
    
the following code will provide the rendering using `OffscreenCanvas` as described above.
    
    const one = document.getElementById("one").getContext("bitmaprenderer");
    const two = document.getElementById("two").getContext("bitmaprenderer");
    
    const offscreen = new OffscreenCanvas(256, 256);
    const gl = offscreen.getContext("webgl");
    
    // Perform some drawing for the first canvas using the gl context
    const bitmapOne = offscreen.transferToImageBitmap();
    one.transferFromImageBitmap(bitmapOne);
    
    // Perform some more drawing for the second canvas
    const bitmapTwo = offscreen.transferToImageBitmap();
    two.transferFromImageBitmap(bitmapTwo);
    
### Asynchronous display of frames produced by an `OffscreenCanvas`
Another way to use the `OffscreenCanvas` API, is to call `transferControlToOffscreen()` on a `<canvas>` element, either on a worker or the main thread, which will return an `OffscreenCanvas` object from an `HTMLCanvasElement` object from the main thread. Calling `getContext()` will then obtain a rendering context from that `OffscreenCanvas`.
The `main.js` script (main thread) may look like this:
    
    const htmlCanvas = document.getElementById("canvas");
    const offscreen = htmlCanvas.transferControlToOffscreen();
    
    const worker = new Worker("offscreen-canvas.js");
    worker.postMessage({ canvas: offscreen }, [offscreen]);
    
While the `offscreen-canvas.js` script (worker thread) can look like this:
    
    onmessage = (evt) => {
      const canvas = evt.data.canvas;
      const gl = canvas.getContext("webgl");
      // Perform some drawing using the gl context
    };
    
It's also possible to use `requestAnimationFrame()` in workers:
    
    onmessage = (evt) => {
      const canvas = evt.data.canvas;
      const gl = canvas.getContext("webgl");
    
      function render(time) {
        // Perform some drawing using the gl context
        requestAnimationFrame(render);
      }
      requestAnimationFrame(render);
    };
    
For a full example, see the OffscreenCanvas example source on GitHub or run the OffscreenCanvas example live.
  * `CanvasRenderingContext2D`
  * `OffscreenCanvasRenderingContext2D`
  * `ImageBitmap`
  * `ImageBitmapRenderingContext`
  * `HTMLCanvasElement.transferControlToOffscreen()`
  * `requestAnimationFrame()`
  * WebGL Off the Main Thread – Mozilla Hacks (2016)


# SVGAnimatedBoolean
The `SVGAnimatedBoolean` interface is used for attributes of type boolean which can be animated.
## Instance properties
`SVGAnimatedBoolean.baseVal`
    
A boolean representing the base value of the given attribute before applying any animations.
`SVGAnimatedBoolean.animVal` Read only
    
A boolean representing the current animated value of the given attribute. If the given attribute is not currently being animated, then it contains the same value as `baseVal`.
## Instance methods
The `SVGAnimatedBoolean` interface does not provide any specific methods.
# OES_texture_half_float_linear extension
The `OES_texture_half_float_linear` extension is part of the WebGL API and allows linear filtering with half floating-point pixel types for textures.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default and the extension is not needed.
## Linear filtering
The `OES_texture_half_float` extension alone does not allow linear filtering with half floating-point textures. This extension enables this ability.
With the help of this extension, you can now set the magnification or minification filter in the `WebGLRenderingContext.texParameter()` method to one of `gl.LINEAR`, `gl.LINEAR_MIPMAP_NEAREST`, `gl.NEAREST_MIPMAP_LINEAR`, or `gl.LINEAR_MIPMAP_LINEAR`, and use half floating-point textures.
## Examples
    
    const halfFloat = gl.getExtension("OES_texture_half_float");
    gl.getExtension("OES_texture_half_float_linear");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texImage2D(
      gl.TEXTURE_2D,
      0,
      gl.RGBA,
      gl.RGBA,
      halfFloat.HALF_FLOAT_OES,
      image,
    );
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.texImage2D()`
  * `WebGLRenderingContext.texSubImage2D()`
  * `OES_texture_float`
  * `OES_texture_float_linear`
  * `OES_texture_half_float`


# Web Animations API
The Web Animations API allows for synchronizing and timing changes to the presentation of a Web page, i.e., animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model.
## Concepts and usage
The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements. To get more information on the concepts behind the API and how to use it, read Using the Web Animations API.
## Web Animations interfaces
`Animation`
    
Provides playback controls and a timeline for an animation node or source. Can take an object created with the `KeyframeEffect()` constructor.
`KeyframeEffect`
    
Describes sets of animatable properties and values, called keyframes and their timing options. These can then be played using the `Animation()` constructor.
`AnimationTimeline`
    
Represents the timeline of animation. This interface exists to define timeline features (inherited by `DocumentTimeline` and future timeline objects) and is not itself accessed by developers.
`AnimationEvent`
    
Part of the CSS Animations module, capturing the animation name and elapsed time.
`DocumentTimeline`
    
Represents animation timelines, including the default document timeline (accessed using the `Document.timeline` property).
## Extensions to other interfaces
The Web Animations API adds features to `document` and `element`.
### Extensions to the `Document` interface
`document.timeline`
    
The `DocumentTimeline` object representing the default document timeline.
`document.getAnimations()`
    
Returns an Array of `Animation` objects currently in effect on elements in the `document`.
### Extensions to the `Element` interface
`Element.animate()`
    
A shortcut method for creating and playing an animation on an element. It returns the created `Animation` object instance.
`Element.getAnimations()`
    
Returns an Array of `Animation` objects currently affecting an element or which are scheduled to do so in the future.
  * CSS `animation` shorthand property
  * CSS `animation-timeline` property
  * Using the Web Animations API
  * Using CSS animations
  * CSS animations module
  * CSS scroll-driven animations module


# SVGTSpanElement
The `SVGTSpanElement` interface represents a `<tspan>` element.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGTextContentElement  SVGTextPositioningElement  SVGTSpanElement 
## Instance properties
This interface doesn't provide any specific properties, but inherits the properties from its parent, `SVGTextPositioningElement`.
## Instance methods
This interface doesn't provide any specific methods.
  * `<tspan>` SVG Element


# HTMLHRElement
The `HTMLHRElement` interface provides special properties (beyond those of the `HTMLElement` interface it also has available to it by inheritance) for manipulating `<hr>` elements.
EventTarget  Node  Element  HTMLElement  HTMLHRElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLHRElement.align` Deprecated
    
A string, an enumerated attribute indicating alignment of the rule with respect to the surrounding context.
`HTMLHRElement.color` Deprecated
    
A string representing the name of the color of the rule.
`HTMLHRElement.noShade` Deprecated
    
A boolean value that sets the rule to have no shading.
`HTMLHRElement.size` Deprecated
    
A string representing the height of the rule.
`HTMLHRElement.width` Deprecated
    
A string representing the width of the rule on the page.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<hr>`


# OES_standard_derivatives extension
The `OES_standard_derivatives` extension is part of the WebGL API and adds the GLSL derivative functions `dFdx`, `dFdy`, and `fwidth`.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default. In WebGL 2, the constant is available as `gl.FRAGMENT_SHADER_DERIVATIVE_HINT` and it requires GLSL `#version 300 es`.
## Constants
This extension exposes one new constant, which can be used in the `hint()` and `getParameter()` methods.
`ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES`
    
A `GLenum` indicating the accuracy of the derivative calculation for the GLSL built-in functions: `dFdx`, `dFdy`, and `fwidth`.
## GLSL built-in functions
The following new functions can be used in GLSL shader code, if this extension is enabled:
    
    genType dFdx(genType p)
    genType dFdy(genType p)
    genType fwidth(genType p)
    
`dFdx()`
    
Returns the derivative in `x` using local differencing for the input argument `p`.
`dFdy()`
    
Returns the derivative in `y` using local differencing for the input argument `p`.
`fwidth()`
    
Returns the sum of the absolute derivative in `x` and `y` using local differencing for the input argument `p`. That is, `abs(dFdx(p)) + abs(dFdy(p))`.
`dFdx()` and `dFdy()` are commonly used to estimate the filter width used to anti-alias procedural textures.
## Examples
Enabling the extensions:
    
    gl.getExtension("OES_standard_derivatives");
    gl.getExtension("EXT_shader_texture_lod");
    
Shader code that avoids artifacts when wrapping texture coordinates:
    
    <script type="x-shader/x-fragment">
      #extension GL_EXT_shader_texture_lod : enable
      #extension GL_OES_standard_derivatives : enable
    
      uniform sampler2D myTexture;
      varying vec2 texCoord;
    
      void main(){
        gl_FragColor = texture2DGradEXT(myTexture, mod(texCoord, vec2(0.1, 0.5)),
                                        dFdx(texCoord), dFdy(texCoord));
      }
    </script>
    
  * `WebGLRenderingContext.getExtension()`
  * `EXT_shader_texture_lod`


# KeyboardLayoutMap
The `KeyboardLayoutMap` interface of the Keyboard API is a read-only object with functions for retrieving the string associated with specific physical keys.
A `KeyboardLayoutMap` instance is a read-only `Map`-like object, in which each key is a string identifying the unique physical key on the keyboard (a "key code"), and the corresponding value is the associated key attribute value (which may be affected by the keyboard layout, and so on).
A list of valid keys is found in the UI Events KeyboardEvent code Values specification.
## Instance properties
`KeyboardLayoutMap.size` Read only Experimental
    
Returns the number of elements in the `KeyboardLayoutMap` object.
## Instance methods
`KeyboardLayoutMap[Symbol.iterator]()` Experimental
    
Returns a new Iterator object that contains the key/value pairs.
`KeyboardLayoutMap.entries()` Experimental
    
Returns a new Iterator object that contains the key/value pairs.
`KeyboardLayoutMap.forEach()` Experimental
    
Executes a provided function once for each element of `KeyboardLayoutMap`.
`KeyboardLayoutMap.get()` Experimental
    
Returns the element with the given key from the `KeyboardLayoutMap` object.
`KeyboardLayoutMap.has()` Experimental
    
Returns a boolean indicating whether the `KeyboardLayoutMap` object has an element with the specified key.
`KeyboardLayoutMap.keys()` Experimental
    
Returns a new Iterator object that contains the keys for each index in the `KeyboardLayoutMap` object.
`KeyboardLayoutMap.values()` Experimental
    
Returns a new Iterator object that contains the values for each index in the `KeyboardLayoutMap` object.
## Examples
The following example demonstrates how to get the location- or layout-specific string associated with the keyboard code that corresponds to the 'W' key on an English QWERTY keyboard.
    
    navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
      const upKey = keyboardLayoutMap.get("KeyW");
      window.alert(`Press ${upKey} to move up.`);
    });
    
# PaintRenderingContext2D
The `PaintRenderingContext2D` interface of the CSS Painting API is the API's rendering context for drawing to the bitmap. It implements a subset of the `CanvasRenderingContext2D` API, with the following exceptions:
  * It doesn't implement the `CanvasImageData` pixel manipulation, `CanvasUserInterface` focus, `CanvasText` text drawing, or `CanvasTextDrawingStyles` text style interface methods.
  * The output bitmap is the size of the object it is rendering to.
  * The value `currentColor`, when used as a color, is treated as opaque black.


The interface is only available in `PaintWorkletGlobalScope`.
## Instance properties and methods
The `PaintRenderingContext2D` implements a subset of the `CanvasRenderingContext2D` API, with all properties and methods having the same usage as in `CanvasRenderingContext2D`
### Context
`CanvasRenderingContext2D.isContextLost()`
    
Returns `true` if the rendering context was lost.
### State
`CanvasRenderingContext2D.save()`
    
Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`.
`CanvasRenderingContext2D.restore()`
    
Restores the drawing style state to the last element on the 'state stack' saved by `save()`.
`CanvasRenderingContext2D.reset()`
    
Resets the current drawing style state to the default values.
### Transformations
`CanvasRenderingContext2D.getTransform()`
    
Retrieves the current transformation matrix being applied to the context as a `DOMMatrix`.
`CanvasRenderingContext2D.rotate()`
    
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
`CanvasRenderingContext2D.scale()`
    
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
`CanvasRenderingContext2D.translate()`
    
Adds a translation transformation by moving the canvas and its origin x horizontally and y vertically on the grid.
`CanvasRenderingContext2D.transform()`
    
Multiplies the current transformation matrix with the matrix described by its arguments.
`CanvasRenderingContext2D.setTransform()`
    
Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments.
`CanvasRenderingContext2D.resetTransform()`
    
Resets the current transform by the identity matrix.
### Compositing
`CanvasRenderingContext2D.globalAlpha`
    
Alpha value that is applied to shapes and images before they are composited onto the canvas.
`CanvasRenderingContext2D.globalCompositeOperation`
    
With `globalAlpha` applied, this sets how shapes and images are drawn onto the existing bitmap.
### Image smoothing
`CanvasRenderingContext2D.imageSmoothingEnabled`
    
Image smoothing mode; if disabled, images will not be smoothed if scaled.
`CanvasRenderingContext2D.imageSmoothingQuality`
    
Allows you to set the quality of image smoothing.
### Fill and stroke styles
`CanvasRenderingContext2D.fillStyle`
    
Color or style to use inside shapes.
`CanvasRenderingContext2D.strokeStyle`
    
Color or style to use for the lines around shapes.
### Gradients and patterns
`CanvasRenderingContext2D.createConicGradient()`
    
Creates a conic gradient around a point given by coordinates represented by the parameters.
`CanvasRenderingContext2D.createLinearGradient()`
    
Creates a linear gradient along the line given by the coordinates represented by the parameters.
`CanvasRenderingContext2D.createRadialGradient()`
    
Creates a radial gradient given by the coordinates of the two circles represented by the parameters.
`CanvasRenderingContext2D.createPattern()`
    
Creates a `CanvasPattern` pattern of the specified image repeated in the directions specified by the repetition argument.
### Shadows
`CanvasRenderingContext2D.shadowBlur`
    
Specifies the amount of blur as a number.
`CanvasRenderingContext2D.shadowColor`
    
Specifies the color of the shadow as a CSS `<color>`.
`CanvasRenderingContext2D.shadowOffsetX`
    
Specifies the horizontal distance the shadow will be offset as a number.
`CanvasRenderingContext2D.shadowOffsetY`
    
Specifies the vertical distance the shadow will be offset as a number.
### Drawing rectangles
`CanvasRenderingContext2D.clearRect()`
    
Erases the pixels in the given rectangle, setting them to transparent black.
`CanvasRenderingContext2D.fillRect()`
    
Paints the pixels of the given rectangle, filling it with the current fill style.
`CanvasRenderingContext2D.strokeRect()`
    
Paints the outline of the given rectangle using the current stroke style.
### Drawing paths
`CanvasRenderingContext2D.beginPath()`
    
Starts a new path, emptying the list of sub-paths. Call this method when you want to create a new path.
`CanvasRenderingContext2D.fill()`
    
Fills the sub-paths of the current path with the current fill style.
`CanvasRenderingContext2D.stroke()`
    
Strokes the sub-paths of the current path with the current stroke style.
`CanvasRenderingContext2D.clip()`
    
Turns the current or given path into the current clipping region, using the given fill rule to determine which points are in the path. Subsequent path modifications will appear inside the clipping path only.
`CanvasRenderingContext2D.isPointInPath()`
    
A boolean whose value is `true` if the specified point is contained in the current or specified path.
`CanvasRenderingContext2D.isPointInStroke()`
    
A boolean whose value is `true` if the point is inside the area contained by the stroking of a path
### Drawing images
`CanvasRenderingContext2D.drawImage()`
    
Draws the given image or specified portion thereof, optionally at a specified size and position.
### Line styles
`CanvasRenderingContext2D.lineWidth`
    
A number specifying the line width, in coordinate space units.
`CanvasRenderingContext2D.lineCap`
    
Type of endings on the end of lines. Possible values: `butt` (default), `round`, `square`.
`CanvasRenderingContext2D.lineJoin`
    
Defines the type of corners where two lines meet. Possible values: `round`, `bevel`, `miter` (default).
`CanvasRenderingContext2D.miterLimit`
    
A number specifying the miter limit ratio, in coordinate space units.
`CanvasRenderingContext2D.getLineDash()`
    
Returns the current line dash pattern as an `Array` of numbers that specify the lengths of the alternative lines and gaps in coordinate space units.
`CanvasRenderingContext2D.setLineDash()`
    
Sets the list of line and dash distances as the current line dash pattern (as used when stroking).
`CanvasRenderingContext2D.lineDashOffset`
    
Specifies where to start a dash array on a line.
### Paths
`CanvasRenderingContext2D.closePath()`
    
Marks the current subpath as closed, drawing a straight line from the current point to the start, and starts a new subpath with a point the same as the start and end of the newly closed subpath. If the shape has already been closed or has only one point, this function does nothing.
`CanvasRenderingContext2D.moveTo()`
    
Moves the starting point of a new sub-path to the (x, y) coordinates.
`CanvasRenderingContext2D.lineTo()`
    
Connects the last point in the current sub-path to the specified (x, y) coordinates with a straight line.
`CanvasRenderingContext2D.bezierCurveTo()`
    
Adds a cubic Bézier curve to the current path.
`CanvasRenderingContext2D.quadraticCurveTo()`
    
Adds a quadratic Bézier curve to the current path.
`CanvasRenderingContext2D.arc()`
    
Adds a circular arc to the current path.
`CanvasRenderingContext2D.arcTo()`
    
Adds an arc to the current path with the given control points and radius, connected to the previous point by a straight line.
`CanvasRenderingContext2D.ellipse()`
    
Adds an elliptical arc to the current path.
`CanvasRenderingContext2D.rect()`
    
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
`CanvasRenderingContext2D.roundRect()`
    
Creates a path for a rectangle with rounded corners at position (x, y) with a size that is determined by width and height and radii determined by radii.
### Filters
`CanvasRenderingContext2D.filter` Non-standard
    
Applies a CSS or SVG filter to the canvas, e.g., to change its brightness or blurriness.
## Examples
See full examples at CSS Painting API.
  * Using the CSS Painting API
  * CSS Painting API
  * Houdini APIs


# MediaRecorder
The `MediaRecorder` interface of the MediaStream Recording API provides functionality to easily record media. It is created using the `MediaRecorder()` constructor.
EventTarget  MediaRecorder 
## Constructor
`MediaRecorder()`
    
Creates a new `MediaRecorder` object, given a `MediaStream` to record. Options are available to do things like set the container's MIME type (such as `"video/webm"` or `"video/mp4"`) and the bit rates of the audio and video tracks or a single overall bit rate.
## Instance properties
`MediaRecorder.mimeType` Read only
    
Returns the MIME type that was selected as the recording container for the `MediaRecorder` object when it was created.
`MediaRecorder.state` Read only
    
Returns the current state of the `MediaRecorder` object (`inactive`, `recording`, or `paused`.)
`MediaRecorder.stream` Read only
    
Returns the stream that was passed into the constructor when the `MediaRecorder` was created.
`MediaRecorder.videoBitsPerSecond` Read only
    
Returns the video encoding bit rate in use. This may differ from the bit rate specified in the constructor (if it was provided).
`MediaRecorder.audioBitsPerSecond` Read only
    
Returns the audio encoding bit rate in use. This may differ from the bit rate specified in the constructor (if it was provided).
`MediaRecorder.audioBitrateMode` Read only Experimental
    
Returns the bitrate mode used to encode audio tracks.
## Static methods
`MediaRecorder.isTypeSupported()`
    
A static method which returns a `true` or `false` value indicating if the given MIME media type is supported by the current user agent.
## Instance methods
`MediaRecorder.pause()`
    
Pauses the recording of media.
`MediaRecorder.requestData()`
    
Requests a `Blob` containing the saved data received thus far (or since the last time `requestData()` was called. After calling this method, recording continues, but in a new `Blob`.
`MediaRecorder.resume()`
    
Resumes recording of media after having been paused.
`MediaRecorder.start()`
    
Begins recording media; this method can optionally be passed a `timeslice` argument with a value in milliseconds. If this is specified, the media will be captured in separate chunks of that duration, rather than the default behavior of recording the media in a single large chunk.
`MediaRecorder.stop()`
    
Stops recording, at which point a `dataavailable` event containing the final `Blob` of saved data is fired. No more recording occurs.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`dataavailable`
    
Fires periodically each time `timeslice` milliseconds of media have been recorded (or when the entire media has been recorded, if `timeslice` wasn't specified). The event, of type `BlobEvent`, contains the recorded media in its `data` property.
`error`
    
Fired when there are fatal errors that stop recording. The received event is based on the `MediaRecorderErrorEvent` interface, whose `error` property contains a `DOMException` that describes the actual error that occurred.
`pause`
    
Fired when media recording is paused.
`resume`
    
Fired when media recording resumes after being paused.
`start`
    
Fired when media recording starts.
`stop`
    
Fired when media recording ends, either when the `MediaStream` ends, or after the `MediaRecorder.stop()` method is called.
## Example
    
    if (navigator.mediaDevices) {
      console.log("getUserMedia supported.");
    
      const constraints = { audio: true };
      let chunks = [];
    
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then((stream) => {
          const mediaRecorder = new MediaRecorder(stream);
    
          record.onclick = () => {
            mediaRecorder.start();
            console.log(mediaRecorder.state);
            console.log("recorder started");
            record.style.background = "red";
            record.style.color = "black";
          };
    
          stop.onclick = () => {
            mediaRecorder.stop();
            console.log(mediaRecorder.state);
            console.log("recorder stopped");
            record.style.background = "";
            record.style.color = "";
          };
    
          mediaRecorder.onstop = (e) => {
            console.log("data available after MediaRecorder.stop() called.");
    
            const clipName = prompt("Enter a name for your sound clip");
    
            const clipContainer = document.createElement("article");
            const clipLabel = document.createElement("p");
            const audio = document.createElement("audio");
            const deleteButton = document.createElement("button");
            const mainContainer = document.querySelector("body");
    
            clipContainer.classList.add("clip");
            audio.setAttribute("controls", "");
            deleteButton.textContent = "Delete";
            clipLabel.textContent = clipName;
    
            clipContainer.appendChild(audio);
            clipContainer.appendChild(clipLabel);
            clipContainer.appendChild(deleteButton);
            mainContainer.appendChild(clipContainer);
    
            audio.controls = true;
            const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
            chunks = [];
            const audioURL = URL.createObjectURL(blob);
            audio.src = audioURL;
            console.log("recorder stopped");
    
            deleteButton.onclick = (e) => {
              const evtTgt = e.target;
              evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
            };
          };
    
          mediaRecorder.ondataavailable = (e) => {
            chunks.push(e.data);
          };
        })
        .catch((err) => {
          console.error(`The following error occurred: ${err}`);
        });
    }
    
Note: This code sample is inspired by the Web Dictaphone demo. Some lines have been omitted for brevity; refer to the source for the complete code.
  * Using the MediaStream Recording API
  * Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on GitHub.)
  * Recording a media element
  * simpl.info MediaStream Recording demo, by Sam Dutton.
  * `MediaDevices.getUserMedia()`
  * OpenLang: HTML video language lab web application using MediaDevices and the MediaStream Recording API for video recording (source on GitHub)


# Web Share API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Web Share API provides a mechanism for sharing text, links, files, and other content to an arbitrary share target selected by the user.
Note: This API is not available in Web Workers (not exposed via `WorkerNavigator`).
Note: This API should not be confused with the Web Share Target API, which allows a website to specify itself as a share target.
## Concepts and usage
The Web Share API allows a site to share text, links, files, and other content to user-selected share targets, utilizing the sharing mechanisms of the underlying operating system. These share targets typically include the system clipboard, email, contacts or messaging applications, and Bluetooth or Wi-Fi channels.
The API has just two methods. The `navigator.canShare()` method may be used to first validate whether some data is "shareable", prior to passing it to `navigator.share()` for sending.
The `navigator.share()` method invokes the native sharing mechanism of the underlying operating system and passes the specified data. It requires transient activation, and hence must be triggered off a UI event like a button click. Further, the method must specify valid data that is supported for sharing by the native implementation.
The Web Share API is gated by the web-share Permissions Policy. If the policy is supported but has not been granted, both methods will indicate that the data is not shareable.
## Interfaces
>
### Extensions to other interfaces
`navigator.canShare()`
    
Returns a boolean indicating whether the specified data is shareable.
`navigator.share()`
    
Returns a `Promise` that resolves if the passed data was successfully sent to a share target. This method must be called on a button click or other user activation (requires transient activation).
## Example
The code below shows how you can share a link using `navigator.share()`, triggered off a button click.
    
    const shareData = {
      title: "MDN",
      text: "Learn web development on MDN!",
      url: "https://developer.mozilla.org",
    };
    
    const btn = document.querySelector("button");
    const resultPara = document.querySelector(".result");
    
    // Share must be triggered by "user activation"
    btn.addEventListener("click", async () => {
      try {
        await navigator.share(shareData);
        resultPara.textContent = "MDN shared successfully";
      } catch (err) {
        resultPara.textContent = `Error: ${err}`;
      }
    });
    
The above example is taken from our Web share test (see the source code). You can also see this as a live example in `navigator.share()`.
>
### api.Navigator.share
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_Share_API` 12889–128Only supported on ChromeOS and Windows, see bug 40542648 and bug 40729163. 9381–93Only supported on Windows. 71 11475–114Only supported on ChromeOS and Windows, see bug 40542648 and bug 40729163. 12.1 61 79 48 12.2 8.0 No 12.2  
`data_files_parameter` 89 81 No 75 14 76 No 54 14 11.0 No 14  
`data_text_parameter` 89 81 71 75 14 76 No 54 14 11.0 No 14  
### api.Navigator.canShare
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_Share_API` 12889–128Only supported on ChromeOS and Windows, see bug 40542648 and bug 40729163. 9381–93Only supported on Windows. 96 11475–114Only supported on ChromeOS and Windows, see bug 40542648 and bug 40729163. 14 75 96 54 14 11.0 No 14  
`data_files_parameter` 89 81 No 75 14 76 No 54 14 11.0 No 14  
`data_text_parameter` 89 81 No 75 14 76 No 54 14 11.0 No 14  
  * Web Share Target API


# PerformanceObserverEntryList
Note: This feature is available in Web Workers.
The `PerformanceObserverEntryList` interface is a list of performance events that were explicitly observed via the `observe()` method.
## Instance methods
`PerformanceObserverEntryList.getEntries()`
    
Returns a list of all explicitly observed `PerformanceEntry` objects.
`PerformanceObserverEntryList.getEntriesByType()`
    
Returns a list of all explicitly observed `PerformanceEntry` objects of the given entry type.
`PerformanceObserverEntryList.getEntriesByName()`
    
Returns a list of all explicitly observed `PerformanceEntry` objects based on the given name and entry type.
## Example
>
### Using PerformanceObserverEntryList
In the following example, `list` is the `PerformanceObserverEntryList` object. The `getEntries()` method is called to get all explicitly observed `PerformanceEntry` objects which are "measure" and "mark" in this case.
    
    function perfObserver(list, observer) {
      list.getEntries().forEach((entry) => {
        if (entry.entryType === "mark") {
          console.log(`${entry.name}'s startTime: ${entry.startTime}`);
        }
        if (entry.entryType === "measure") {
          console.log(`${entry.name}'s duration: ${entry.duration}`);
        }
      });
    }
    const observer = new PerformanceObserver(perfObserver);
    observer.observe({ entryTypes: ["measure", "mark"] });
    
# CSSPageDescriptors
The `CSSPageDescriptors` interface represents a CSS declaration block for an `@page` at-rule.
The interface exposes style information and various style-related methods and properties for the page. Each multi-word property has versions in camel- and snake-case. This means, for example, that you can access the `margin-top` CSS property using the syntax `style["margin-top"]` or `style.marginTop` (where `style` is a `CSSPageDescriptor`).
A `CSSPageDescriptors` object is accessed through the `style` property of the `CSSPageRule` interface, which can in turn be found using the `CSSStyleSheet` API.
CSSStyleDeclaration  CSSPageDescriptors 
## Attributes
This interface also inherits properties of its parent, `CSSStyleDeclaration`.
`margin`
    
A string representing the `margin` property of the corresponding `@page` at-rule.
`margin-top`
    
A string representing the `margin-top` property of the corresponding `@page` at-rule.
`marginTop`
    
A string representing the `margin-top` property of the corresponding `@page` at-rule.
`margin-right`
    
A string representing the `margin-right` property of the corresponding `@page` at-rule.
`marginRight`
    
A string representing the `margin-right` property of the corresponding `@page` at-rule.
`margin-bottom`
    
A string representing the `margin-bottom` property of the corresponding `@page` at-rule.
`marginBottom`
    
A string representing the `margin-bottom` property of the corresponding `@page` at-rule.
`margin-left`
    
A string representing the `margin-left` property of the corresponding `@page` at-rule.
`marginLeft`
    
A string representing the `margin-left` property of the corresponding `@page` at-rule.
`page-orientation` Experimental
    
A string representing the `page-orientation` property of the corresponding `@page` at-rule.
`pageOrientation` Experimental
    
A string representing the `page-orientation` property of the corresponding `@page` at-rule.
`size`
    
A string representing the `size` property of the corresponding `@page` at-rule.
## Instance methods
This interface inherits the methods of its parent, `CSSStyleDeclaration`.
## Examples
>
### Inspecting a page at-rule
This example gets the `CSSPageDescriptors` for a `@page` at-rule, if the object is supported on the browser, and then logs its properties.
#### CSS
Below we define styles for the page using a `@page` at-rule. We assign different values for each margin property using the `margin` shorthand, and also specify the `size`. We don't set the `page-orientation`. This allows us to see how the properties map in the Web API object.
    
    @page {
      margin: 1cm 2px 3px 4px;
      /* page-orientation: upright; */
      size: A4;
    }
    
#### JavaScript
First we check if `CSSPageDescriptors` is defined on the global window object, and if not we log that the interface is not supported.
If `CSSPageDescriptors` is supported, we get the document stylesheet at index `1`, and then gets the `cssRules` defined in that stylesheet. We need to get this stylesheet because the example is embedded in a separate frame with its own sheet (index `0` is the CSS for this page).
We then iterate through the rules defined for the live example and match any that are of type `CSSPageRule`, as these correspond to `@page` rules. For the matching objects we then log the `style` and all its values.
    
    if (typeof window.CSSPageDescriptors === "undefined") {
      log("CSSPageDescriptors is not supported on this browser.");
    } else {
      // Get stylesheets for example and then get its cssRules
      const myRules = document.styleSheets[1].cssRules;
      for (const rule of myRules) {
        if (rule instanceof CSSPageRule) {
          log(`${rule.style}`);
          log(`margin: ${rule.style.margin}`);
    
          // Access properties using CamelCase syntax
          log(`marginTop: ${rule.style.marginTop}`);
          log(`marginRight: ${rule.style.marginRight}`);
          log(`marginBottom: ${rule.style.marginBottom}`);
          log(`marginLeft: ${rule.style.marginLeft}`);
          log(`pageOrientation: ${rule.style.pageOrientation}`);
    
          // Access properties using snake-case syntax
          log(`margin-top: ${rule.style["margin-top"]}`);
          log(`margin-right: ${rule.style["margin-right"]}`);
          log(`margin-left: ${rule.style["margin-left"]}`);
          log(`margin-bottom: ${rule.style["margin-bottom"]}`);
          log(`page-orientation: ${rule.style["page-orientation"]}`);
    
          log(`size: ${rule.style.size}`);
    
          // Log the original CSS text using inherited property: cssText
          log(`cssText: ${rule.style.cssText}`);
          log("\n");
        }
      }
    }
    
#### Results
The results are shown below. Note that the `style` object displayed at the top of the log should be a `CSSPageDescriptors` to match the current specification, but may be a `CSSStyleDeclaration` in some browsers. Note also that the corresponding values for properties in camel- and snake-case match each other and the `@page` declaration, and that `page-orientation` is the empty string `""` because it is not defined in `@page`.
# SVGAnimatedLengthList
The `SVGAnimatedLengthList` interface is used for attributes of type `SVGLengthList` which can be animated.
## Instance properties
`SVGAnimatedLengthList.baseVal` Read only
    
An `SVGLengthList` that represents the base value of the given attribute before applying any animations.
`SVGAnimatedLengthList.animVal` Read only
    
A read only `SVGLengthList` that represents the current animated value of the given attribute. If the given attribute is not currently being animated, then the `SVGLengthList` will have the same contents as `baseVal`. The object referenced by `animVal` will always be distinct from the one referenced by `baseVal`, even when the attribute is not animated.
## Instance methods
The `SVGAnimatedLengthList` interface does not provide any specific methods.
# BluetoothRemoteGATTService
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `BluetoothRemoteGATTService` interface of the Web Bluetooth API represents a service provided by a GATT server, including a device, a list of referenced services, and a list of the characteristics of this service.
EventTarget  BluetoothRemoteGATTService 
## Instance properties
`BluetoothRemoteGATTService.device` Read only Experimental
    
Returns information about a Bluetooth device through an instance of `BluetoothDevice`.
`BluetoothRemoteGATTService.isPrimary` Read only Experimental
    
Returns a boolean value indicating whether this is a primary or secondary service.
`BluetoothRemoteGATTService.uuid` Read only Experimental
    
Returns a string representing the UUID of this service.
## Instance methods
`BluetoothRemoteGATTService.getCharacteristic()` Experimental
    
Returns a `Promise` to an instance of `BluetoothRemoteGATTCharacteristic` for a given universally unique identifier (UUID).
`BluetoothRemoteGATTService.getCharacteristics()` Experimental
    
Returns a `Promise` to an `Array` of `BluetoothRemoteGATTCharacteristic` instances for an optional universally unique identifier (UUID).
# DocumentTimeline
The `DocumentTimeline` interface of the Web Animations API represents animation timelines, including the default document timeline (accessed via `Document.timeline`).
AnimationTimeline  DocumentTimeline 
## Constructor
`DocumentTimeline()`
    
Creates a new `DocumentTimeline` object associated with the active document of the current browsing context.
## Instance properties
This interface inherits its property from its parent, `AnimationTimeline`.
`AnimationTimeline.currentTime`
    
Returns the time value in milliseconds for this timeline or `null` if it is inactive.
  * Web Animations API
  * `AnimationTimeline`
  * `AnimationTimeline.currentTime`
  * `Document.timeline`
  * `DocumentTimeline()`


# Document Object Model (DOM)
The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language.
The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.
Nodes can also have event handlers attached to them. Once an event is triggered, the event handlers get executed.
To learn more about what the DOM is and how it represents documents, see our article Introduction to the DOM.
## DOM interfaces
  * `AbortController`
  * `AbortSignal`
  * `AbstractRange`
  * `Attr`
  * `CDATASection`
  * `CharacterData`
  * `Comment`
  * `CustomEvent`
  * `Document`
  * `DocumentFragment`
  * `DocumentType`
  * `DOMError` Deprecated
  * `DOMException`
  * `DOMImplementation`
  * `DOMParser`
  * `DOMPoint`
  * `DOMPointReadOnly`
  * `DOMRect`
  * `DOMTokenList`
  * `Element`
  * `Event`
  * `EventTarget`
  * `HTMLCollection`
  * `MutationObserver`
  * `MutationRecord`
  * `NamedNodeMap`
  * `Node`
  * `NodeIterator`
  * `NodeList`
  * `ProcessingInstruction`
  * `Range`
  * `StaticRange`
  * `Text`
  * `TextDecoder`
  * `TextEncoder`
  * `TimeRanges`
  * `TreeWalker`
  * `XMLDocument`


### Obsolete DOM interfaces
The Document Object Model has been highly simplified. To achieve this, the following interfaces in the different DOM level 3 or earlier specifications have been removed. They are no longer available to web developers.
  * `DOMConfiguration`
  * `DOMErrorHandler`
  * `DOMImplementationList`
  * `DOMImplementationRegistry`
  * `DOMImplementationSource`
  * `DOMLocator`
  * `DOMObject`
  * `DOMSettableTokenList`
  * `DOMUserData`
  * `ElementTraversal`
  * `Entity`
  * `EntityReference`
  * `NameList`
  * `Notation`
  * `TypeInfo`
  * `UserDataHandler`


## HTML DOM
A document containing HTML is described using the `Document` interface, which is extended by the HTML specification to include various HTML-specific features. In particular, the `Element` interface is enhanced to become `HTMLElement` and various subclasses, each representing one of (or a family of closely related) elements.
The HTML DOM API provides access to various browser features such as tabs and windows, CSS styles and stylesheets, browser history, etc. These interfaces are discussed further in the HTML DOM API documentation.
## SVG DOM
Similarly, a document containing SVG is also described using the `Document` interface, which is extended by the SVG specification to include various SVG-specific features. In particular, the `Element` interface is enhanced to become `SVGElement` and various subclasses, each representing an element or a family of closely related elements. These interfaces are discussed further in the SVG API documentation.
  * DOM Examples
  * CSS Object Model (CSSOM)


# Web MIDI API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Web MIDI API connects to and interacts with Musical Instrument Digital Interface (MIDI) Devices.
The interfaces deal with the practical aspects of sending and receiving MIDI messages. Therefore, the API can be used for musical and non-musical uses, with any MIDI device connected to your computer.
## Interfaces
`MIDIInputMap`
    
Represents all of the available MIDI input ports.
`MIDIOutputMap`
    
Represents all of the available MIDI output ports.
`MIDIAccess`
    
Provides the methods to list input and output devices, and to access an individual device.
`MIDIPort`
    
Represents an individual MIDI port.
`MIDIInput`
    
Provides a method for dealing with MIDI messages from an input port.
`MIDIOutput`
    
Queues messages to the linked MIDI port. Messages can be sent immediately or after a specified delay.
`MIDIMessageEvent`
    
The event passed to the `MIDIInput` `midimessage` event.
`MIDIConnectionEvent`
    
The event passed to the `MIDIAccess` `statechange` and `MIDIPort` `statechange` events, when a port becomes available or unavailable.
## Security requirements
Access to the API is requested using the `navigator.requestMIDIAccess()` method.
  * The method must be called in a secure context.
  * Access may be gated by the `midi` HTTP Permission Policy.
  * The user must explicitly grant permission to use the API through a user-agent specific mechanism, or have previously granted permission. Note that if access is denied by a permission policy it cannot be granted by a user permission.


The permission status can be queried using the Permissions API method `navigator.permissions.query()`, passing a permission descriptor with the `midi` permission and (optional) `sysex` property:
    
    navigator.permissions.query({ name: "midi", sysex: true }).then((result) => {
      if (result.state === "granted") {
        // Access granted.
      } else if (result.state === "prompt") {
        // Using API will prompt for permission
      }
      // Permission was denied by user prompt or permission policy
    });
    
## Examples
>
### Gaining access to the MIDI port
The `navigator.requestMIDIAccess()` method returns a promise that resolves to a `MIDIAccess` object, which can then be used to access a MIDI device. The method must be called in a secure context.
    
    let midi = null; // global MIDIAccess object
    function onMIDISuccess(midiAccess) {
      console.log("MIDI ready!");
      midi = midiAccess; // store in the global (in real usage, would probably keep in an object instance)
    }
    
    function onMIDIFailure(msg) {
      console.error(`Failed to get MIDI access - ${msg}`);
    }
    
    navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
    
### Listing inputs and outputs
In this example the list of input and output ports are retrieved and printed to the console.
    
    function listInputsAndOutputs(midiAccess) {
      for (const entry of midiAccess.inputs) {
        const input = entry[1];
        console.log(
          `Input port [type:'${input.type}']` +
            ` id:'${input.id}'` +
            ` manufacturer:'${input.manufacturer}'` +
            ` name:'${input.name}'` +
            ` version:'${input.version}'`,
        );
      }
    
      for (const entry of midiAccess.outputs) {
        const output = entry[1];
        console.log(
          `Output port [type:'${output.type}'] id:'${output.id}' manufacturer:'${output.manufacturer}' name:'${output.name}' version:'${output.version}'`,
        );
      }
    }
    
### Handling MIDI Input
This example prints all MIDI input messages to the console.
    
    function onMIDIMessage(event) {
      let str = `MIDI message received at timestamp ${event.timeStamp}[${event.data.length} bytes]: `;
      for (const character of event.data) {
        str += `0x${character.toString(16)} `;
      }
      console.log(str);
    }
    
    function startLoggingMIDIInput(midiAccess) {
      midiAccess.inputs.forEach((entry) => {
        entry.onmidimessage = onMIDIMessage;
      });
    }
    
>
### api.Navigator.requestMIDIAccess
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_MIDI_API` 43 79 108API access is gated by installation of a site permission add-on (user prompt), secure context, and `Permission Policy: midi`. 30 No 43 No 30 No 4.0 43 No  
`secure_context_required` 43 79 108 30 No 43 No 30 No 4.0 43 No  
### http.headers.Permissions-Policy.midi
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_MIDI_API` 88 88 No 74 No 88 No 63 No 15.0 88 No  
### api.Permissions.permission_midi
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_MIDI_API` 43 79 110 30 No 43 110 30 No 4.0 No No  
  * Introduction to Web MIDI
  * Making Music in the Browser


# Ink API
The Ink API allows browsers to directly make use of available OS-level compositors when drawing pen strokes in an inking app feature, thereby reducing latency and increasing performance.
## Concepts and usage
Inking on the web refers to app features that involve using pointer events to draw a smooth pen stroke — for example, a drawing app or document signing feature.
Pointers events are usually sent first to the browser process, which then forwards these events to the JavaScript event loop to execute the associated handler functions and render the result in the app. The time delay between the start and finish of this process can be significant, resulting in latency between the user initiating drawing (for example, with a stylus or mouse), and the stroke showing up on the screen.
The Ink API significantly reduces this latency by allowing browsers to bypass the JavaScript event loop entirely. Where possible, browsers will pass such rendering instructions directly to OS-level compositors. If the underlying operating system does not have a specialized OS-level compositor to use for this purpose, browsers will use their own optimized rendering code. This is not as powerful as a compositor, but it still confers some improvements.
Note: Compositors are part of the rendering machinery that draws the UI to the screen in a browser or operating system. See Inside look at modern web browser (part 3) for some interesting insights into how a compositor functions inside a web browser.
The entry point is the `Navigator.ink` property, which returns an `Ink` object for the current document. The `Ink.requestPresenter()` method returns a `Promise` that fulfills with a `DelegatedInkTrailPresenter` object instance. This instructs the OS-level compositor to render ink strokes between pointer event dispatches in the next available frame in each case.
## Interfaces
`Ink` Experimental
    
Provides access to `DelegatedInkTrailPresenter` objects for the application to use to render the strokes.
`DelegatedInkTrailPresenter` Experimental
    
Instructs the OS-level compositor to render ink strokes between pointer event dispatches.
### Extensions to other interfaces
`Navigator.ink` Read only Experimental
    
Returns an `Ink` object for the current document.
## Examples
>
### Drawing an ink trail
In this example, we draw a trail onto a 2D canvas. Near the start of the code, we call `Ink.requestPresenter()`, passing it the canvas as the presentation area for it to take care of and storing the promise it returns in the `presenter` variable.
Later on, in the `pointermove` event listener, the new position of the trailhead is drawn onto the canvas each time the event fires. In addition, the `DelegatedInkTrailPresenter` object returned when the `presenter` promise fulfills has its `updateInkTrailStartPoint()` method invoked; this is passed:
  * The last trusted pointer event representing the rendering point for the current frame.
  * A `style` object containing color and diameter settings.


The result is that a delegated ink trail is drawn ahead of the default browser rendering on the app's behalf, in the specified style, until the next time it receives a `pointermove` event.
#### HTML
    
    <canvas id="canvas"></canvas>
    <div id="div">Delegated ink trail should match the color of this div.</div>
    
#### CSS
    
    div {
      background-color: lime;
      position: fixed;
      top: 1rem;
      left: 1rem;
    }
    
#### JavaScript
    
    const ctx = canvas.getContext("2d");
    const presenter = navigator.ink.requestPresenter({ presentationArea: canvas });
    let move_cnt = 0;
    let style = { color: "lime", diameter: 10 };
    
    function getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    canvas.addEventListener("pointermove", async (evt) => {
      const pointSize = 10;
      ctx.fillStyle = style.color;
      ctx.fillRect(evt.pageX, evt.pageY, pointSize, pointSize);
      if (move_cnt === 20) {
        const r = getRandomInt(0, 255);
        const g = getRandomInt(0, 255);
        const b = getRandomInt(0, 255);
    
        style = { color: `rgb(${r} ${g} ${b} / 100%)`, diameter: 10 };
        move_cnt = 0;
        document.getElementById("div").style.backgroundColor =
          `rgb(${r} ${g} ${b} / 60%)`;
      }
      move_cnt += 1;
      (await presenter).updateInkTrailStartPoint(evt, style);
    });
    
    window.addEventListener("pointerdown", () => {
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    });
    
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
#### Result
# DelegatedInkTrailPresenter
The `DelegatedInkTrailPresenter` interface of the Ink API provides the ability to instruct the OS-level compositor to render ink strokes between pointer event dispatches.
## Instance properties
`expectedImprovement` Deprecated Non-standard Read only
    
Returns a value, in milliseconds, indicating the latency improvement that can be expected using this presenter.
`presentationArea` Experimental Read only
    
Returns the `Element` inside which rendering of ink strokes is confined.
## Instance methods
`updateInkTrailStartPoint()` Experimental
    
Passes the `PointerEvent` that was used as the last rendering point for the current frame, allowing the OS-level compositor to render a delegated ink trail ahead of the next pointer event being dispatched.
## Example
In this example, we draw a trail onto a 2D canvas. Near the start of the code, we call `Ink.requestPresenter()`, passing it the canvas as the presentation area for it to take care of and storing the promise it returns in the `presenter` variable.
Later on, in the `pointermove` event listener, the new position of the trailhead is drawn onto the canvas each time the event fires. In addition, the `DelegatedInkTrailPresenter` object returned when the `presenter` promise fulfills has its `updateInkTrailStartPoint()` method invoked; this is passed:
  * The last trusted pointer event representing the rendering point for the current frame.
  * A `style` object containing color and diameter settings.


The result is that a delegated ink trail is drawn ahead of the default browser rendering on the app's behalf, in the specified style, until the next time it receives a `pointermove` event.
    
    const ctx = canvas.getContext("2d");
    let presenter = navigator.ink.requestPresenter({ presentationArea: canvas });
    let move_cnt = 0;
    let style = { color: "rgb(0 0 255 / 100%)", diameter: 10 };
    
    function getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    canvas.addEventListener("pointermove", (evt) => {
      const pointSize = 10;
      ctx.fillStyle = "black";
      ctx.fillRect(evt.pageX, evt.pageY, pointSize, pointSize);
      if (move_cnt === 50) {
        let r = getRandomInt(0, 255);
        let g = getRandomInt(0, 255);
        let b = getRandomInt(0, 255);
        style = {
          color: `rgb(${r} ${g} ${b} / 100%)`,
          diameter: 10,
        };
        move_cnt = 0;
        document.getElementById("div").style.backgroundColor =
          `rgb(${r} ${g} ${b} / 100%)`;
      }
      move_cnt += 1;
      presenter.then((v) => {
        v.updateInkTrailStartPoint(evt, style);
      });
    });
    
    window.addEventListener("pointerdown", (evt) => {
      evt.pointerId;
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    });
    
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
Note: See this example running live — Delegated ink trail.
# PublicKeyCredentialRequestOptions
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PublicKeyCredentialRequestOptions` dictionary represents the object passed to `CredentialsContainer.get()` as the value of the `publicKey` option.
It is used to request a `PublicKeyCredential` provided by an authenticator that supports the Web Authentication API.
## Instance properties
`allowCredentials` Optional
    
An array of objects used to restrict the list of acceptable credentials. An empty array indicates that any credential is acceptable.
Each object in the array will contain the following properties:
`id`
    
An `ArrayBuffer`, `TypedArray`, or `DataView` representing the ID of the public key credential to retrieve. This value is mirrored by the `rawId` property of the `PublicKeyCredential` object returned by a successful `get()` call.
`transports` Optional
    
An array of strings providing hints as to the methods the client could use to communicate with the relevant authenticator of the public key credential to retrieve. Possible transports are: `"ble"`, `"hybrid"`, `"internal"`, `"nfc"`, and `"usb"`.
Note: This value is mirrored by the return value of the `PublicKeyCredential.response.getTransports()` method of the `PublicKeyCredential` object returned by the `create()` call that originally created the credential. At that point, it should be stored by the app for later use.
`type`
    
A string defining the type of the public key credential to retrieve. This can currently take a single value, `"public-key"`, but more values may be added in the future. This value is mirrored by the `type` property of the `PublicKeyCredential` object returned by a successful `get()` call.
This value defaults to an empty array.
`challenge`
    
An `ArrayBuffer`, `TypedArray`, or `DataView` originating from the relying party's server and used as a cryptographic challenge. This value will be signed by the authenticator and the signature will be sent back as part of the `AuthenticatorAssertionResponse.signature` (available in the `response` property of the `PublicKeyCredential` object returned by a successful `get()` call).
`extensions` Optional
    
An object containing properties representing the input values for any requested extensions. These extensions are used to specific additional processing by the client or authenticator during the authentication process. Examples include dealing with legacy FIDO API credentials, and evaluating outputs from a pseudo-random function (PRF) associated with a credential.
Extensions are optional and different browsers may recognize different extensions. Processing extensions is always optional for the client: if a browser does not recognize a given extension, it will just ignore it. For information on using extensions, and which ones are supported by which browsers, see Web Authentication extensions.
`hints` Optional Experimental
    
An array of strings providing hints as to what UI the browser should provide for the user to authenticate with an existing public key credential.
The strings can be any of the following:
`"security-key"`
    
The UI should recommend requesting the credential from a separate physical security key (such as a YubiKey).
`"client-device"`
    
The UI should recommend requesting the credential from an authenticator available on the same device they are using to access the RP client.
`"hybrid"`
    
The UI should recommend requesting the credential from a general-purpose authenticator, such as a smartphone-based authenticator app. This favors using a cross-device approach to handling authentication, relying on a combination of laptop and smartphone, for example.
When multiple strings are included in the array, their order denotes the order of preference, from high to low. Supporting browsers that respect the hints should use the first one that they understand.
Specified `hints` may contradict hints provided in the `transports` option. When the provided `hints` contradict this option, the `hints` take precedence. `hints` may also be ignored by the browser under specific circumstances, for example if a hinted authenticator type is not usable on the user's device.
For some specific code and UI examples, see Introducing hints, Related Origin Requests and JSON serialization for WebAuthn in Chrome.
`rpId` Optional
    
A string that specifies the relying party's identifier (for example `"login.example.org"`). For security purposes:
  * The calling web app verifies that `rpId` matches the relying party's origin.
  * The authenticator verifies that `rpId` matches the `rpId` of the credential used for the authentication ceremony.


This value defaults to the current origin's domain.
`timeout` Optional
    
A numerical hint, in milliseconds, indicating the time the relying party is willing to wait for the retrieval operation to complete. This hint may be overridden by the browser.
`userVerification` Optional
    
A string specifying the relying party's requirements for user verification of the authentication process. This verification is initiated by the authenticator, which will request the user to provide an available factor (for example a PIN or a biometric input of some kind).
The value can be one of the following:
`"required"`
    
The relying party requires user verification, and the operation will fail if it does not occur.
`"preferred"`
    
The relying party prefers user verification if possible, but the operation will not fail if it does not occur.
`"discouraged"`
    
The relying party does not want user verification, in the interests of making user interaction as smooth as possible.
This value defaults to `"preferred"`.
# SVGFEDisplacementMapElement
The `SVGFEDisplacementMapElement` interface corresponds to the `<feDisplacementMap>` element.
EventTarget  Node  Element  SVGElement  SVGFEDisplacementMapElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEDisplacementMapElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEDisplacementMapElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFEDisplacementMapElement.in2` Read only
    
An `SVGAnimatedString` corresponding to the `in2` attribute of the given element.
`SVGFEDisplacementMapElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEDisplacementMapElement.scale` Read only
    
An `SVGAnimatedNumber` corresponding to the `scale` attribute of the given element.
`SVGFEDisplacementMapElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEDisplacementMapElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEDisplacementMapElement.xChannelSelector` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `xChannelSelector` attribute of the given element. It takes one of the `SVG_CHANNEL_*` constants defined on this interface.
`SVGFEDisplacementMapElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
`SVGFEDisplacementMapElement.yChannelSelector` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `yChannelSelector` attribute of the given element. It takes one of the `SVG_CHANNEL_*` constants defined on this interface.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
## Static properties
`SVG_CHANNEL_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_CHANNEL_R` (1)
    
Corresponds to the value `R`.
`SVG_CHANNEL_G` (2)
    
Corresponds to the value `G`.
`SVG_CHANNEL_B` (3)
    
Corresponds to the value `B`.
`SVG_CHANNEL_A` (4)
    
Corresponds to the value `A`.
  * `<feDisplacementMap>`


# RTCPeerConnectionStats
The `RTCPeerConnectionStats` dictionary of the WebRTC API provides information about the high level peer connection (`RTCPeerConnection`).
In particular, it provides the number of unique data channels that have been opened, and the number of opened channels that have been closed. This allows the current number of open channels to be calculated.
These statistics can be obtained by iterating the `RTCStatsReport` returned by `RTCPeerConnection.getStats()` until you find a report with the `type` of `peer-connection`.
## Instance properties
`dataChannelsOpened`
    
A positive integer value indicating the number of unique `RTCDataChannel` objects that have entered the `open` state during their lifetime.
`dataChannelsClosed`
    
A positive integer value indicating the number of unique `RTCDataChannel` objects that have left the `open` state during their lifetime (channels that transition to `closing` or `closed` without ever being `open` are not counted in this number). A channel will leave the `open` state if either end of the connection or the underlying transport is closed.
### Common instance properties
The following properties are common to all WebRTC statistics objects.
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"peer-connection"`, indicating the type of statistics that the object contains.
## Examples
This example shows a function to return the total number of open connections, or `null` if no statistics are provided. This might be called in a loop, similar to the approach used in `RTCPeerConnection.getStats()` example
The function waits for the result of a call to `RTCPeerConnection.getStats()` and then iterates the returned `RTCStatsReport` to get just the stats of type `"peer-connection"`. It then returns the total number of open channels, or `null`, using the data in the report.
    
    async function numberOpenConnections (peerConnection) {
      const stats = await peerConnection.getStats();
      let peerConnectionStats = null;
    
      stats.forEach((report) => {
        if (report.type === "peer-connection") {
          peerConnectionStats = report;
          break;
        }
      });
    
    result = (typeof peerConnectionStats.dataChannelsOpened === 'undefined' || typeof peerConnectionStats.dataChannelsClosed=== 'undefined') ? null : peerConnectionStats.dataChannelsOpened - peerConnectionStats.dataChannelsClosed;
    return result
    }
    
# RTCDtlsTransport
The `RTCDtlsTransport` interface provides access to information about the Datagram Transport Layer Security (DTLS) transport over which a `RTCPeerConnection`'s RTP and RTCP packets are sent and received by its `RTCRtpSender` and `RTCRtpReceiver` objects.
A `RTCDtlsTransport` object is also used to provide information about SCTP packets transmitted and received by a connection's data channels.
Features of the DTLS transport include the addition of security to the underlying transport; the `RTCDtlsTransport` interface can be used to obtain information about the underlying transport and the security added to it by the DTLS layer.
EventTarget  RTCDtlsTransport 
## Instance properties
Also inherits properties from `EventTarget`.
`iceTransport` Read only
    
Returns a reference to the underlying `RTCIceTransport` object.
`state` Read only
    
Returns a string which describes the underlying Datagram Transport Layer Security (DTLS) transport state. It can be one of the following values: `new`, `connecting`, `connected`, `closed`, or `failed`.
## Instance methods
Also inherits methods from `EventTarget`.
`getRemoteCertificates()`
    
Returns an array of `ArrayBuffer` containing the certificates of the remote peer of the connection.
## Events
`error`
    
Sent when a transport-level error occurs on the `RTCPeerConnection`.
`statechange`
    
Sent when the `state` of the DTLS transport changes.
## Description
>
### Allocation of DTLS transports
`RTCDtlsTransport` objects are created when an app calls either `setLocalDescription()` or `setRemoteDescription()`. The number of DTLS transports created and how they're used depends on the bundling mode used when creating the `RTCPeerConnection`.
Whether bundling is used depends on what the other endpoint is able to negotiate. All browsers support bundling, so when both endpoints are browsers, you can rest assured that bundling will be used.
Some non-browser legacy endpoints, however, may not support bundle. To be able to negotiate with such endpoints (or to exclude them entirely), the `bundlePolicy` property may be provided when creating the connection. The `bundlePolicy` lets you control how to negotiate with these legacy endpoints. The default policy is `"balanced"`, which provides a balance between performance and compatibility.
For example, to create the connection using the highest level of bundling:
    
    const rtcConfig = {
      bundlePolicy: "max-bundle",
    };
    
    const pc = new RTCPeerConnection(rtcConfig);
    
Bundling lets you use one `RTCDtlsTransport` to carry the data for multiple higher-level transports, such as multiple `RTCRtpTransceiver`s.
#### When not using BUNDLE
When the connection is created without using BUNDLE, each RTP or RTCP component of each `RTCRtpTransceiver` has its own `RTCDtlsTransport`; that is, every `RTCRtpSender` and `RTCRtpReceiver`, has its own transport, and all `RTCDataChannel` objects share a transport dedicated to SCTP.
#### When using BUNDLE
When the connection is using BUNDLE, each `RTCDtlsTransport` object represents a group of `RTCRtpTransceiver` objects. If the connection was created using `max-compat` mode, each transport is responsible for handling all communication for a given type of media (audio, video, or data channel). Thus, a connection with any number of audio and video channels will always have exactly one DTLS transport for audio and one for video communications.
Because transports are established early in the negotiation process, it's likely that it won't be known until after they're created whether or not the remote peer supports bundling. For this reason, you'll sometimes see separate transports created at first, one for each track, then see them get bundled up once it's known that bundling is possible. If your code accesses `RTCRtpSender`s and/or `RTCRtpReceiver`s directly, you may encounter situations where they're initially separate, then half or more of them get closed and the senders and receivers updated to refer to the appropriate remaining `RTCDtlsTransport` objects.
### Data channels
`RTCDataChannel`s use SCTP to communicate. All of a peer connection's data channels share a single `RTCSctpTransport`, found in the connection's `sctp` property.
You can, in turn, identify the `RTCDtlsTransport` used to securely encapsulate the data channels' SCTP communications by looking at the `RTCSctpTransport` object's `transport` property.
## Examples
This example presents a function, `tallySenders()`, which iterates over an `RTCPeerConnection`'s `RTCRtpSender`s, tallying up how many of them are in various states. The function returns an object containing properties whose values indicate how many senders are in each state.
    
    let pc = new RTCPeerConnection({ bundlePolicy: "max-bundle" });
    
    // …
    
    function tallySenders(pc) {
      let results = {
        transportMissing: 0,
        connectionPending: 0,
        connected: 0,
        closed: 0,
        failed: 0,
        unknown: 0,
      };
    
      let senderList = pc.getSenders();
      senderList.forEach((sender) => {
        let transport = sender.transport;
    
        if (!transport) {
          results.transportMissing++;
        } else {
          switch (transport.state) {
            case "new":
            case "connecting":
              results.connectionPending++;
              break;
            case "connected":
              results.connected++;
              break;
            case "closed":
              results.closed++;
              break;
            case "failed":
              results.failed++;
              break;
            default:
              results.unknown++;
              break;
          }
        }
      });
      return results;
    }
    
Note that in this code, the `new` and `connecting` states are being treated as a single `connectionPending` status in the returned object.
  * `RTCRtpSender.transport` and `RTCRtpReceiver.transport`
  * `RTCSctpTransport.transport`


# SVGFEFuncAElement
The `SVGFEFuncAElement` interface corresponds to the `<feFuncA>` element.
EventTarget  Node  Element  SVGElement  SVGComponentTransferFunctionElement  SVGFEFuncAElement 
## Instance properties
This interface not provide any specific properties, but inherits properties from its parent interface, `SVGComponentTransferFunctionElement`.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGComponentTransferFunctionElement`.
  * `<feFuncA>`


# WebGLActiveInfo
Note: This feature is available in Web Workers.
The WebGLActiveInfo interface is part of the WebGL API and represents the information returned by calling the `WebGLRenderingContext.getActiveAttrib()` and `WebGLRenderingContext.getActiveUniform()` methods.
## Instance properties
`WebGLActiveInfo.name`
    
The read-only name of the requested variable.
`WebGLActiveInfo.size`
    
The read-only size of the requested variable.
`WebGLActiveInfo.type`
    
The read-only type of the requested variable.
## Examples
A `WebGLActiveInfo` object is returned by:
  * `WebGLRenderingContext.getActiveAttrib()`
  * `WebGLRenderingContext.getActiveUniform()` or
  * `WebGL2RenderingContext.getTransformFeedbackVarying()`


  * `WebGLRenderingContext.getActiveAttrib()`
  * `WebGLRenderingContext.getActiveUniform()`


# CommandEvent
The `CommandEvent` interface represents an event notifying the user when a `button` element with valid `commandForElement` and `command` attributes is about to invoke an interactive element.
This is the event object for the `HTMLElement` `command` event, which represents an action from an Invoker Control when it is invoked (for example when it is clicked or pressed).
Event  CommandEvent 
## Constructor
`CommandEvent()`
    
Creates an `CommandEvent` object.
## Instance properties
This interface inherits properties from its parent, `Event`.
`CommandEvent.source` Read only
    
An `HTMLButtonElement` representing the button that caused this invocation.
`CommandEvent.command` Read only
    
A string representing the `command` value of the source button.
## Examples
>
### Basic example
    
    <button commandfor="mypopover" command="show-popover">Show popover</button>
    
    <div popover id="mypopover" role="[declare appropriate ARIA role]">
      <!-- popover content here -->
      <button commandfor="mypopover" command="hide-popover">Hide popover</button>
    </div>
    
    
    const popover = document.getElementById("mypopover");
    
    // …
    
    popover.addEventListener("command", (event) => {
      if (event.command === "show-popover") {
        console.log("Popover is about to be shown");
      }
    });
    
### Custom example
    
    <button commandfor="the-image" command="--rotate-left">Rotate Left</button>
    
    <button commandfor="the-image" command="--rotate-right">Rotate Right</button>
    
    <img id="the-image" src="photo.jpg" alt="[add appropriate alt text here]" />
    
    
    const image = document.getElementById("the-image");
    
    image.addEventListener("command", (event) => {
      if (event.command === "--rotate-left") {
        event.target.style.rotate = "-90deg";
      } else if (event.command === "--rotate-right") {
        event.target.style.rotate = "90deg";
      }
    });
    
  * Invoker Commands API
  * `HTMLButtonElement.command`
  * `HTMLButtonElement.commandForElement`


# AnimationEffect
The `AnimationEffect` interface of the Web Animations API is an interface representing animation effects.
`AnimationEffect` is an abstract interface and so isn't directly instantiable. However, concrete interfaces such as `KeyframeEffect` inherit from it, and instances of these interfaces can be passed to `Animation` objects for playing, and may also be used by CSS Animations and Transitions.
## Instance methods
`AnimationEffect.getTiming()`
    
Returns the object associated with the animation containing all the animation's timing values.
`AnimationEffect.getComputedTiming()`
    
Returns the calculated timing properties for this `AnimationEffect`.
`AnimationEffect.updateTiming()`
    
Updates the specified timing properties of this `AnimationEffect`.
  * Web Animations API
  * `Animation.effect`


# TaskAttributionTiming
The `TaskAttributionTiming` interface returns information about the work involved in a long task and its associate frame context. The frame context, also called the container, is the iframe, embed or object that is being implicated, on the whole, for a long task.
You usually work with `TaskAttributionTiming` objects when observing long tasks.
`TaskAttributionTiming` inherits from `PerformanceEntry`.
PerformanceEntry  TaskAttributionTiming 
## Instance properties
This interface extends the following `PerformanceEntry` properties for event timing performance entry types by qualifying them as follows:
`PerformanceEntry.duration` Read only Experimental
    
Always returns `0`, as `duration` is not applicable for this interface.
`PerformanceEntry.entryType` Read only Experimental
    
Always returns `taskattribution`.
`PerformanceEntry.name` Read only Experimental
    
Always returns `"unknown"`.
`PerformanceEntry.startTime` Read only Experimental
    
Always returns `0`.
This interface also supports the following properties:
`TaskAttributionTiming.containerType` Read only Experimental
    
Returns the type of frame container, one of `iframe`, `embed`, or `object`.
`TaskAttributionTiming.containerSrc` Read only Experimental
    
Returns the container's `src` attribute.
`TaskAttributionTiming.containerId` Read only Experimental
    
Returns the container's `id` attribute.
`TaskAttributionTiming.containerName` Read only Experimental
    
Returns the container's `name` attribute.
## Instance methods
`TaskAttributionTiming.toJSON()` Experimental
    
Returns a JSON representation of the `TaskAttributionTiming` object.
  * `PerformanceLongTaskTiming`


# AudioEncoder
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Dedicated Web Workers.
The `AudioEncoder` interface of the WebCodecs API encodes `AudioData` objects.
EventTarget  AudioEncoder 
## Constructor
`AudioEncoder()`
    
Creates a new `AudioEncoder` object.
## Instance properties
Inherits properties from its parent, `EventTarget`.
`AudioEncoder.encodeQueueSize` Read only
    
An integer representing the number of encode queue requests.
`AudioEncoder.state` Read only
    
Represents the state of the underlying codec and whether it is configured for encoding.
### Events
`dequeue`
    
Fires to signal a decrease in `AudioEncoder.encodeQueueSize`.
## Static methods
`AudioEncoder.isConfigSupported()`
    
Returns a promise indicating whether the provided `AudioEncoderConfig` is supported.
## Instance methods
Inherits methods from its parent, `EventTarget`.
`AudioEncoder.configure()`
    
Enqueues a control message to configure the audio encoder for encoding chunks.
`AudioEncoder.encode()`
    
Enqueues a control message to encode a given `AudioData` objects.
`AudioEncoder.flush()`
    
Returns a promise that resolves once all pending messages in the queue have been completed.
`AudioEncoder.reset()`
    
Resets all states including configuration, control messages in the control message queue, and all pending callbacks.
`AudioEncoder.close()`
    
Ends all pending work and releases system resources.
# HTMLOptGroupElement
The `HTMLOptGroupElement` interface provides special properties and methods (beyond the regular `HTMLElement` object interface they also have available to them by inheritance) for manipulating the layout and presentation of `<optgroup>` elements.
EventTarget  Node  Element  HTMLElement  HTMLOptGroupElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLOptGroupElement.disabled`
    
A boolean value representing whether or not the whole list of children `<option>` is disabled (true) or not (false).
`HTMLOptGroupElement.label`
    
A string representing the label for the group.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<optgroup>`.


# MediaSource
Note: This feature is available in Dedicated Web Workers.
The `MediaSource` interface of the Media Source Extensions API represents a source of media data for an `HTMLMediaElement` object. A `MediaSource` object can be attached to a `HTMLMediaElement` to be played in the user agent.
EventTarget  MediaSource 
## Constructor
`MediaSource()`
    
Constructs and returns a new `MediaSource` object with no associated source buffers.
## Instance properties
`MediaSource.activeSourceBuffers` Read only
    
Returns a `SourceBufferList` object containing a subset of the `SourceBuffer` objects contained within `MediaSource.sourceBuffers` — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.
`MediaSource.duration`
    
Gets and sets the duration of the current media being presented.
`MediaSource.handle` Read only
    
Inside a dedicated worker, returns a `MediaSourceHandle` object, a proxy for the `MediaSource` that can be transferred from the worker back to the main thread and attached to a media element via its `HTMLMediaElement.srcObject` property.
`MediaSource.readyState` Read only
    
Returns an enum representing the state of the current `MediaSource`, whether it is not currently attached to a media element (`closed`), attached and ready to receive `SourceBuffer` objects (`open`), or attached but the stream has been ended via `MediaSource.endOfStream()` (`ended`.)
`MediaSource.sourceBuffers` Read only
    
Returns a `SourceBufferList` object containing the list of `SourceBuffer` objects associated with this `MediaSource`.
## Static properties
`MediaSource.canConstructInDedicatedWorker` Read only
    
A boolean; returns `true` if `MediaSource` worker support is implemented, providing a low-latency feature detection mechanism.
## Instance methods
Inherits methods from its parent interface, `EventTarget`.
`MediaSource.addSourceBuffer()`
    
Creates a new `SourceBuffer` of the given MIME type and adds it to the `MediaSource.sourceBuffers` list.
`MediaSource.clearLiveSeekableRange()`
    
Clears a seekable range previously set with a call to `setLiveSeekableRange()`.
`MediaSource.endOfStream()`
    
Signals the end of the stream.
`MediaSource.removeSourceBuffer()`
    
Removes the given `SourceBuffer` from the `MediaSource.sourceBuffers` list.
`MediaSource.setLiveSeekableRange()`
    
Sets the range that the user can seek to in the media element.
## Static methods
`MediaSource.isTypeSupported()`
    
Returns a boolean value indicating if the given MIME type is supported by the current user agent — this is, if it can successfully create `SourceBuffer` objects for that MIME type.
## Events
`sourceclose`
    
Fired when the `MediaSource` instance is not attached to a media element anymore.
`sourceended`
    
Fired when the `MediaSource` instance is still attached to a media element, but `endOfStream()` has been called.
`sourceopen`
    
Fired when the `MediaSource` instance has been opened by a media element and is ready for data to be appended to the `SourceBuffer` objects in `sourceBuffers`.
## Examples
>
### Complete basic example
The following simple example loads a video with `XMLHttpRequest`, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here (you can also download the source for further investigation). The function `getMediaSource()`, which is not defined here, returns a `MediaSource`.
    
    const video = document.querySelector("video");
    
    const assetURL = "frag_bunny.mp4";
    // Need to be specific for Blink regarding codecs
    // ./mp4info frag_bunny.mp4 | grep Codec
    const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    let mediaSource;
    
    if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
      mediaSource = getMediaSource();
      console.log(mediaSource.readyState); // closed
      video.src = URL.createObjectURL(mediaSource);
      mediaSource.addEventListener("sourceopen", sourceOpen);
    } else {
      console.error("Unsupported MIME type or codec: ", mimeCodec);
    }
    
    function sourceOpen() {
      console.log(this.readyState); // open
      const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
      fetchAB(assetURL, (buf) => {
        sourceBuffer.addEventListener("updateend", () => {
          mediaSource.endOfStream();
          video.play();
          console.log(mediaSource.readyState); // ended
        });
        sourceBuffer.appendBuffer(buf);
      });
    }
    
    function fetchAB(url, cb) {
      console.log(url);
      const xhr = new XMLHttpRequest();
      xhr.open("get", url);
      xhr.responseType = "arraybuffer";
      xhr.onload = () => {
        cb(xhr.response);
      };
      xhr.send();
    }
    
### Constructing a `MediaSource` in a dedicated worker and passing it to the main thread
The `handle` property can be accessed inside a dedicated worker and the resulting `MediaSourceHandle` object is then transferred over to the thread that created the worker (in this case the main thread) via a `postMessage()` call:
    
    // Inside dedicated worker
    let mediaSource = new MediaSource();
    let handle = mediaSource.handle;
    // Transfer the handle to the context that created the worker
    postMessage({ arg: handle }, [handle]);
    
    mediaSource.addEventListener("sourceopen", () => {
      // Await sourceopen on MediaSource before creating SourceBuffers
      // and populating them with fetched media — MediaSource won't
      // accept creation of SourceBuffers until it is attached to the
      // HTMLMediaElement and its readyState is "open"
    });
    
Over in the main thread, we receive the handle via a `message` event handler, attach it to a `<video>` via its `HTMLMediaElement.srcObject` property, and `play` the video:
    
    worker.addEventListener("message", (msg) => {
      let mediaSourceHandle = msg.data.arg;
      video.srcObject = mediaSourceHandle;
      video.play();
    });
    
Note: `MediaSourceHandle`s cannot be successfully transferred into or via a shared worker or service worker.
  * `SourceBuffer`
  * `SourceBufferList`


# HTMLTimeElement
The `HTMLTimeElement` interface provides special properties (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating `<time>` elements.
EventTarget  Node  Element  HTMLElement  HTMLTimeElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLTimeElement.dateTime`
    
A string that reflects the `datetime` HTML attribute, containing a machine-readable form of the element's date and time value.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<time>`.


# IIRFilterNode
The `IIRFilterNode` interface of the Web Audio API is a `AudioNode` processor which implements a general infinite impulse response (IIR) filter; this type of filter can be used to implement tone control devices and graphic equalizers as well. It lets the parameters of the filter response be specified, so that it can be tuned as needed.
EventTarget  AudioNode  IIRFilterNode 
Number of inputs `1`  
Number of outputs `1`  
Channel count mode `"max"`  
Channel count Same as on the input  
Channel interpretation `"speakers"`  
Typically, it's best to use the `BiquadFilterNode` interface to implement higher-order filters. There are several reasons why:
  * Biquad filters are typically less sensitive to numeric quirks.
  * The filter parameters of biquad filters can be automated.
  * All even-ordered IIR filters can be created using `BiquadFilterNode`.


However, if you need to create an odd-ordered IIR filter, you'll need to use `IIRFilterNode`. You may also find this interface useful if you don't need automation, or for other reasons.
Note: Once the node has been created, you can't change its coefficients.
`IIRFilterNode`s have a tail-time reference; they continue to output non-silent audio with zero input. As an IIR filter, the non-zero input continues forever, but this can be limited after some finite time in practice, when the output has approached zero closely enough. The actual time that takes depends on the filter coefficients provided.
## Constructor
`IIRFilterNode()`
    
Creates a new instance of an IIRFilterNode object.
## Instance properties
This interface has no properties of its own; however, it inherits properties from its parent, `AudioNode`.
## Instance methods
Inherits methods from its parent, `AudioNode`. It also has the following additional methods:
`getFrequencyResponse()`
    
Uses the filter's current parameter settings to calculate the response for frequencies specified in the provided array of frequencies.
## Examples
You can find a simple IIR filter demo live. Also see the source code on GitHub. It includes some different coefficient values for different lowpass frequencies — you can change the value of the `filterNumber` constant to a value between 0 and 3 to check out the different available effects.
Also see our Using IIR filters guide for a full explanation.
  * Using the Web Audio API
  * `AudioNode`
  * `BiquadFilterNode`


# Streams API
Note: This feature is available in Web Workers.
The Streams API allows JavaScript to programmatically access streams of data received over the network and process them as desired by the developer.
## Concepts and usage
Streaming involves breaking a resource that you want to receive over a network down into small chunks, then processing it bit by bit. Browsers already do this when receiving media assets — videos buffer and play as more of the content downloads, and sometimes you'll see images display gradually as more is loaded too.
But this capability has never been available to JavaScript before. Previously, if we wanted to process a resource of some kind (video, text file, etc.), we'd have to download the entire file, wait for it to be deserialized into a suitable format, then process all the data.
With the Streams API, you can start processing raw data with JavaScript bit by bit, as soon as it is available, without needing to generate a buffer, string, or blob.
There are more advantages too — you can detect when streams start or end, chain streams together, handle errors and cancel streams as required, and react to the speed at which the stream is being read.
The usage of Streams hinges on making responses available as streams. For example, the response body returned by a successful fetch request is a `ReadableStream` that can be read by a reader created with `ReadableStream.getReader()`.
More complicated uses involve creating your own stream using the `ReadableStream()` constructor, for example to process data inside a service worker.
You can also write data to streams using `WritableStream`.
Note: You can find a lot more details about the theory and practice of streams in our articles — Streams API concepts, Using readable streams, Using readable byte streams, and Using writable streams.
## Stream interfaces
>
### Readable streams
`ReadableStream`
    
Represents a readable stream of data. It can be used to handle response streams of the Fetch API, or developer-defined streams (e.g., a custom `ReadableStream()` constructor).
`ReadableStreamDefaultReader`
    
Represents a default reader that can be used to read stream data supplied from a network (e.g., a fetch request).
`ReadableStreamDefaultController`
    
Represents a controller allowing control of a `ReadableStream`'s state and internal queue. Default controllers are for streams that are not byte streams.
### Writable streams
`WritableStream`
    
Provides a standard abstraction for writing streaming data to a destination, known as a sink. This object comes with built-in backpressure and queuing.
`WritableStreamDefaultWriter`
    
Represents a default writable stream writer that can be used to write chunks of data to a writable stream.
`WritableStreamDefaultController`
    
Represents a controller allowing control of a `WritableStream`'s state. When constructing a `WritableStream`, the underlying sink is given a corresponding `WritableStreamDefaultController` instance to manipulate.
### Transform Streams
`TransformStream`
    
Represents an abstraction for a stream object that transforms data as it passes through a pipe chain of stream objects.
`TransformStreamDefaultController`
    
Provides methods to manipulate the `ReadableStream` and `WritableStream` associated with a transform stream.
### Related stream APIs and operations
`ByteLengthQueuingStrategy`
    
Provides a built-in byte length queuing strategy that can be used when constructing streams.
`CountQueuingStrategy`
    
Provides a built-in chunk counting queuing strategy that can be used when constructing streams.
### Extensions to other APIs
`Request`
    
When a new `Request` object is constructed, you can pass it a `ReadableStream` in the `body` property of its `RequestInit` dictionary. This `Request` could then be passed to a `fetch()` to commence fetching the stream.
`Response.body`
    
The response body returned by a successful fetch request is exposed by default as a `ReadableStream`, and can have a reader attached to it, etc.
### ByteStream-related interfaces
`ReadableStreamBYOBReader`
    
Represents a BYOB ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g., a custom `ReadableStream()` constructor).
`ReadableByteStreamController`
    
Represents a controller allowing control of a `ReadableStream`'s state and internal queue. Byte stream controllers are for byte streams.
`ReadableStreamBYOBRequest`
    
Represents a pull into request in a `ReadableByteStreamController`.
## Examples
We have created a directory of examples to go along with the Streams API documentation — see mdn/dom-examples/streams. The examples are as follows:
  * Simple stream pump: This example shows how to consume a ReadableStream and pass its data to another.
  * Grayscale a PNG: This example shows how a ReadableStream of a PNG can be turned into grayscale.
  * Simple random stream: This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again.
  * Simple tee example: This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently.
  * Simple writer: This example shows how to write to a writable stream, then decode the stream and write the contents to the UI.
  * Unpack chunks of a PNG: This example shows how `pipeThrough()` can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.


Examples from other developers:
  * Progress Indicators with Streams, Service Workers, & Fetch.

>
### api.ReadableStream
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`@@asyncIterator` 124 124 110 110 No 124 110 82 No 27.0 124 No  
`ReadableStream` 52 79 65 39 10.1 52 65 41 10.3 6.0 52 10.3  
`Streams_API` 43 14 65 30 10.1 43 65 30 10.3 4.0 43 10.3  
`cancel` 43 14 65 30 10.1 43 65 30 10.3 4.0 43 10.3  
`from_static` No No 117 No No No 117 No No No No No  
`getReader` 43 14 65 30 10.1 43 65 30 10.3 4.0 43 10.3  
`locked` 52 14 65 39 10.1 52 65 41 10.3 6.0 52 10.3  
`pipeThrough` 59 79 102 46 10.1 59 102 43 10.3 7.0 59 10.3  
`pipeTo` 59 79 100 46 10.1 59 100 43 10.3 7.0 59 10.3  
`tee` 52 79 65 39 10.1 52 65 41 10.3 6.0 52 10.3  
`transferable` 87 87 103 73 No 87 103 62 No 14.0 87 No  
`values` 124 124 110 110 No 124 110 82 No 27.0 124 No  
### api.WritableStream
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`WritableStream` 59 16 100 47 14.1 59 100 44 14.5 7.0 59 14.5  
`Streams_API` 59 16 100 47 14.1 59 100 44 14.5 7.0 59 14.5  
`abort` 59 16 100 47 14.1 59 100 44 14.5 7.0 59 14.5  
`close` 81 81 100 68 14.1 81 100 58 14.5 13.0 81 14.5  
`getWriter` 59 16 100 47 14.1 59 100 44 14.5 7.0 59 14.5  
`locked` 59 16 100 47 14.1 59 100 44 14.5 7.0 59 14.5  
`transferable` 87 87 103 73 No 87 103 62 No 14.0 87 No  
  * Streams API concepts
  * Using readable streams
  * Using readable byte streams
  * Using writable streams


# LanguageDetector
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `LanguageDetector` interface of the Translator and Language Detector APIs contains all the language detection functionality, including checking AI model availability, creating a new `LanguageDetector` instance, using it to detect a language, and more.
## Instance properties
`inputQuota` Read only Experimental
    
The input quota available to the browser for detecting languages.
`expectedInputLanguages` Read only Experimental
    
The expected languages to be detected in the input text.
## Static methods
`availability()` Experimental
    
Returns an enumerated value that indicates whether the browser AI model supports a given `LanguageDetector` configuration.
`create()` Experimental
    
Creates a new `LanguageDetector` instance to detect languages.
## Instance methods
`destroy()` Experimental
    
Destroys the `LanguageDetector` instance it is called on.
`detect()` Experimental
    
Detects the closest matching language or languages that a given text string is most likely to be written in.
`measureInputUsage()` Experimental
    
Reports how much input quota would be used by a language detection operation for a given text input.
## Examples
See Using the Translator and Language Detector APIs for a complete example.
### Creating a `LanguageDetector` instance
    
    const detector = await LanguageDetector.create({
      expectedInputLanguages: ["en-US", "zh"],
    });
    
Note: Different implementations will likely support different languages.
### Detecting languages
    
    const results = await detector.detect(myTextString);
    
    results.forEach((result) => {
      console.log(`${result.detectedLanguage}: ${result.confidence}`);
    });
    
    // Results in logs like this:
    // la: 0.8359838724136353
    // es: 0.017705978825688362
    // sv: 0.012977192178368568
    // en: 0.011148443445563316
    
  * Using the Translator and Language Detector APIs


# WritableStream
Note: This feature is available in Web Workers.
The `WritableStream` interface of the Streams API provides a standard abstraction for writing streaming data to a destination, known as a sink. This object comes with built-in backpressure and queuing.
`WritableStream` is a transferable object.
## Constructor
`WritableStream()`
    
Creates a new `WritableStream` object.
## Instance properties
`WritableStream.locked` Read only
    
A boolean indicating whether the `WritableStream` is locked to a writer.
## Instance methods
`WritableStream.abort()`
    
Aborts the stream, signaling that the producer can no longer successfully write to the stream and it is to be immediately moved to an error state, with any queued writes discarded.
`WritableStream.close()`
    
Closes the stream.
`WritableStream.getWriter()`
    
Returns a new instance of `WritableStreamDefaultWriter` and locks the stream to that instance. While the stream is locked, no other writer can be acquired until this one is released.
## Examples
The following example illustrates several features of this interface. It creates the `WritableStream` with a custom sink. It then calls the stream's `getWriter()` method, which returns an instance of `WritableStreamDefaultWriter`. Next, several strings are written to the stream. Finally, `close()` returns a promise that resolves when all the writes have successfully completed.
    
    const writableStream = new WritableStream(
      // Implement the sink
      {
        write(chunk) {
          const textElement = document.getElementById("text-output");
          textElement.textContent += chunk;
        },
      },
    );
    
    const writer = writableStream.getWriter();
    
    try {
      writer.write("Hello, ");
      writer.write("world!\n");
      writer.write("This has been a demo!\n");
    
      await writer.close(); // wait for all chunks to be written
      console.log("All chunks written");
    } catch (error) {
      console.error("Stream error: ", error);
    }
    
This example does not support the backpressure feature of Streams.
  * Streams—The Definitive Guide


# DeferredRequestInit
The `DeferredRequestInit` dictionary of the `fetchLater()` API represents the set of options that can be used to configure a deferred fetch request.
The `DeferredRequestInit` object is passed directly into the `window.fetchLater()` function call as the second argument.
## Instance properties
This dictionary extends the `RequestInit` dictionary with the addition of the following properties:
`activateAfter` Optional
    
A `DOMHighResTimeStamp` indicating a timeout in milliseconds after which the fetch request should be sent. The fetch can be sent earlier on navigating away. The actual sending time is unknown, as the browser may wait for a longer or shorter time, for example, to optimize the batching of deferred fetches. If the `activateAfter` property is not provided, the deferred fetch waits until the end of the page visit (including entering the bfcache).
### Exceptions
`RangeError` `DOMException`
    
Raised when a negative `activateAfter` is provided.
## Examples
>
### Defer a `GET` request until the page is destroyed or enters the bfcache
In this example, no `DeferredRequestInit` object is provided and no timeout is used:
    
    fetchLater("/send_beacon");
    
### Defer a `POST` request for around 1 minute
In this example we create a `Request`, and provide an `activateAfter` value to delay sending the request for 60,000 milliseconds (or one minute):
    
    fetchLater("/send_beacon", {
      method: "POST",
      body: getBeaconData(),
      activateAfter: 60000, // 1 minute
    });
    
Note: The actual sending time is unknown, as the browser may wait for a longer or shorter period of time, for example to optimize batching of deferred fetches.
  * Using Fetch
  * ServiceWorker API
  * HTTP access control (CORS)
  * HTTP


# GPURenderPipeline
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPURenderPipeline` interface of the WebGPU API represents a pipeline that controls the vertex and fragment shader stages and can be used in a `GPURenderPassEncoder` or `GPURenderBundleEncoder`.
A `GPURenderPipeline` object instance can be created using the `GPUDevice.createRenderPipeline()` or `GPUDevice.createRenderPipelineAsync()` methods.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Instance methods
`getBindGroupLayout()`
    
Returns the pipeline's `GPUBindGroupLayout` object with the given index (i.e., included in the originating `GPUDevice.createRenderPipeline()` or `GPUDevice.createRenderPipelineAsync()` call's pipeline layout).
## Examples
Note: The WebGPU samples feature many more examples.
### Basic example
Our basic render demo provides an example of the construction of a valid render pipeline descriptor object, which is then used to create a `GPURenderPipeline` via a `createRenderPipeline()` call.
    
    // …
    
    const vertexBuffers = [
      {
        attributes: [
          {
            shaderLocation: 0, // position
            offset: 0,
            format: "float32x4",
          },
          {
            shaderLocation: 1, // color
            offset: 16,
            format: "float32x4",
          },
        ],
        arrayStride: 32,
        stepMode: "vertex",
      },
    ];
    
    const pipelineDescriptor = {
      vertex: {
        module: shaderModule,
        entryPoint: "vertex_main",
        buffers: vertexBuffers,
      },
      fragment: {
        module: shaderModule,
        entryPoint: "fragment_main",
        targets: [
          {
            format: navigator.gpu.getPreferredCanvasFormat(),
          },
        ],
      },
      primitive: {
        topology: "triangle-list",
      },
      layout: "auto",
    };
    
    const renderPipeline = device.createRenderPipeline(pipelineDescriptor);
    
    // …
    
  * The WebGPU API


# TimeRanges
When loading a media resource for use by an `<audio>` or `<video>` element, the `TimeRanges` interface is used for representing the time ranges of the media resource that have been buffered, the time ranges that have been played, and the time ranges that are seekable.
A `TimeRanges` object includes one or more ranges of time, each specified by a starting time offset and an ending time offset. You reference each time range by using the `start()` and `end()` methods, passing the index number of the time range you want to retrieve.
## Normalized TimeRanges objects
Several members of `HTMLMediaElement` objects return a normalized TimeRanges object — which the spec describes as having the following characteristics:
The ranges in such an object are ordered, don't overlap, and don't touch (adjacent ranges are folded into one bigger range). A range can be empty (referencing just a single moment in time).
## Instance properties
`TimeRanges.length` Read only
    
Returns an `unsigned long` representing the number of time ranges represented by the time range object.
## Instance methods
`TimeRanges.start()`
    
Returns the time for the start of the range with the specified index.
`TimeRanges.end()`
    
Returns the time for the end of the specified range.
# SVGAnimatedAngle
The `SVGAnimatedAngle` interface is used for attributes of basic type <angle> which can be animated.
## Instance properties
`SVGAnimatedAngle.baseVal` Read only
    
An `SVGAngle` representing the base value of the given attribute before applying any animations.
`SVGAnimatedAngle.animVal` Read only
    
A read only `SVGAngle` representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the `SVGAngle` will have the same contents as `baseVal`. The object referenced by `animVal` will always be distinct from the one referenced by `baseVal`, even when the attribute is not animated.
## Instance methods
The `SVGAnimatedAngle` interface does not provide any specific methods.
# GPUUncapturedErrorEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUUncapturedErrorEvent` interface of the WebGPU API is the event object type for the `GPUDevice` `uncapturederror` event, used for telemetry and to report unexpected errors.
Known error cases should be handled using `pushErrorScope()` and `popErrorScope()`.
Event  GPUUncapturedErrorEvent 
## Constructor
`GPUUncapturedErrorEvent()`
    
Creates a new `GPUUncapturedErrorEvent` object instance.
## Instance properties
Inherits properties from its parent, `Event`.
`error` Read only
    
A `GPUError` object instance providing access to the details of the error.
## Examples
You could use something like the following as a global mechanism to pick up any errors that aren't handled by error scopes and capture them.
    
    // …
    
    device.addEventListener("uncapturederror", (event) => {
      // Re-surface the error
      console.error("A WebGPU error was not captured:", event.error.message);
      reportErrorToServer({
        type: event.error.constructor.name,
        message: event.error.message,
      });
    });
    
    // …
    
  * The WebGPU API
  * WebGPU Error Handling best practices


# ViewTransition
The `ViewTransition` interface of the View Transition API represents an active view transition, and provides functionality to react to the transition reaching different states (e.g., ready to run the animation, or animation finished) or skip the transition altogether.
This object type is made available in the following ways:
  * In the case of same-document (SPA) transitions, it is returned by the `document.startViewTransition()` method.
  * In the case of cross-document (MPA) transitions, it is made available: 
    * In the outgoing page via the `pageswap` event object's `PageSwapEvent.viewTransition` property.
    * In the inbound page via the `pagereveal` event object's `PageRevealEvent.viewTransition` property.


When a view transition is triggered by a `startViewTransition()` call (or a page navigation in the case of MPA transitions), a sequence of steps is followed as explained in The view transition process. This also explains when the different promises fulfill.
## Instance properties
`ViewTransition.finished` Read only
    
A `Promise` that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user.
`ViewTransition.ready` Read only
    
A `Promise` that fulfills once the pseudo-element tree is created and the transition animation is about to start.
`ViewTransition.updateCallbackDone` Read only
    
A `Promise` that fulfills when the promise returned by the `document.startViewTransition()` method's callback fulfills.
## Instance methods
`skipTransition()`
    
Skips the animation part of the view transition, but doesn't skip running the `document.startViewTransition()` callback that updates the DOM.
## Examples
In the following SPA example, the `ViewTransition.ready` promise is used to trigger a custom circular reveal view transition emanating from the position of the user's cursor on click, with animation provided by the Web Animations API.
    
    // Store the last click event
    let lastClick;
    addEventListener("click", (event) => (lastClick = event));
    
    function spaNavigate(data) {
      // Fallback for browsers that don't support this API:
      if (!document.startViewTransition) {
        updateTheDOMSomehow(data);
        return;
      }
    
      // Get the click position, or fallback to the middle of the screen
      const x = lastClick?.clientX ?? innerWidth / 2;
      const y = lastClick?.clientY ?? innerHeight / 2;
      // Get the distance to the furthest corner
      const endRadius = Math.hypot(
        Math.max(x, innerWidth - x),
        Math.max(y, innerHeight - y),
      );
    
      // Create a transition:
      const transition = document.startViewTransition(() => {
        updateTheDOMSomehow(data);
      });
    
      // Wait for the pseudo-elements to be created:
      transition.ready.then(() => {
        // Animate the root's new view
        document.documentElement.animate(
          {
            clipPath: [
              `circle(0 at ${x}px ${y}px)`,
              `circle(${endRadius}px at ${x}px ${y}px)`,
            ],
          },
          {
            duration: 500,
            easing: "ease-in",
            // Specify which pseudo-element to animate
            pseudoElement: "::view-transition-new(root)",
          },
        );
      });
    }
    
This animation also requires the following CSS, to turn off the default CSS animation and stop the old and new view states from blending in any way (the new state "wipes" right over the top of the old state, rather than transitioning in):
    
    ::view-transition-image-pair(root) {
      isolation: auto;
    }
    
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation: none;
      mix-blend-mode: normal;
      display: block;
    }
    
  * Smooth transitions with the View Transition API


# AudioParam
The Web Audio API's `AudioParam` interface represents an audio-related parameter, usually a parameter of an `AudioNode` (such as `GainNode.gain`).
An `AudioParam` can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.
Each `AudioParam` has a list of events, initially empty, that define when and how values change. When this list is not empty, changes using the `AudioParam.value` attributes are ignored. This list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timeline-based automation curves. The time used is the one defined in `AudioContext.currentTime`.
## AudioParam types
There are two `AudioParam` kinds: a-rate and k-rate parameters. Each `AudioNode` defines which of its parameters are a-rate or k-rate in the spec.
### a-rate
An a-rate `AudioParam` takes the current audio parameter value for each sample frame of the audio signal.
### k-rate
A k-rate `AudioParam` uses the same initial audio parameter value for the whole block processed; that is, 128 sample frames. In other words, the same value applies to every frame in the audio as it's processed by the node.
## Instance properties
`AudioParam.defaultValue` Read only
    
Represents the initial value of the attribute as defined by the specific `AudioNode` creating the `AudioParam`.
`AudioParam.maxValue` Read only
    
Represents the maximum possible value for the parameter's nominal (effective) range.
`AudioParam.minValue` Read only
    
Represents the minimum possible value for the parameter's nominal (effective) range.
`AudioParam.value`
    
Represents the parameter's current value as of the current time; initially set to the value of `defaultValue`.
## Instance methods
`AudioParam.setValueAtTime()`
    
Schedules an instant change to the value of the `AudioParam` at a precise time, as measured against `AudioContext.currentTime`. The new value is given by the `value` parameter.
`AudioParam.linearRampToValueAtTime()`
    
Schedules a gradual linear change in the value of the `AudioParam`. The change starts at the time specified for the previous event, follows a linear ramp to the new value given in the `value` parameter, and reaches the new value at the time given in the `endTime` parameter.
`AudioParam.exponentialRampToValueAtTime()`
    
Schedules a gradual exponential change in the value of the `AudioParam`. The change starts at the time specified for the previous event, follows an exponential ramp to the new value given in the `value` parameter, and reaches the new value at the time given in the `endTime` parameter.
`AudioParam.setTargetAtTime()`
    
Schedules the start of a change to the value of the `AudioParam`. The change starts at the time specified in `startTime` and exponentially moves towards the value given by the `target` parameter. The exponential decay rate is defined by the `timeConstant` parameter, which is a time measured in seconds.
`AudioParam.setValueCurveAtTime()`
    
Schedules the values of the `AudioParam` to follow a set of values, defined by an array of floating-point numbers scaled to fit into the given interval, starting at a given start time and spanning a given duration of time.
`AudioParam.cancelScheduledValues()`
    
Cancels all scheduled future changes to the `AudioParam`.
`AudioParam.cancelAndHoldAtTime()`
    
Cancels all scheduled future changes to the `AudioParam` but holds its value at a given time until further changes are made using other methods.
## Examples
First, a basic example showing a `GainNode` having its `gain` value set. `gain` is an example of an a-rate `AudioParam`, as the value can potentially be set differently for each sample frame of the audio.
    
    const audioCtx = new AudioContext();
    
    const gainNode = audioCtx.createGain();
    gainNode.gain.value = 0;
    
Next, an example showing a `DynamicsCompressorNode` having some param values manipulated. These are examples of k-rate `AudioParam` types, as the values are set for the entire audio block at once.
    
    const compressor = audioCtx.createDynamicsCompressor();
    compressor.threshold.setValueAtTime(-50, audioCtx.currentTime);
    compressor.knee.setValueAtTime(40, audioCtx.currentTime);
    compressor.ratio.setValueAtTime(12, audioCtx.currentTime);
    compressor.attack.setValueAtTime(0, audioCtx.currentTime);
    compressor.release.setValueAtTime(0.25, audioCtx.currentTime);
    
  * Using the Web Audio API


# FileSystem
The File and Directory Entries API interface `FileSystem` is used to represent a file system. These objects can be obtained from the `filesystem` property on any file system entry. Some browsers offer additional APIs to create and manage file systems, such as Chrome's `requestFileSystem()` method.
This interface will not grant you access to the users' filesystem. Instead, you will have a "virtual drive" within the browser sandbox if you want to gain access to the users' file system, you need to invoke the user, for example by installing a Chrome extension. The relevant Chrome API can be found in the Chrome developer docs.
## Basic concepts
There are two ways to get access to a `FileSystem` object:
  1. You can directly ask for one representing a sandboxed file system created just for your web app directly by calling `window.requestFileSystem()`. If that call is successful, it executes a callback handler, which receives as a parameter a `FileSystem` object describing the file system.
  2. You can get it from a file system entry object, through its `filesystem` property.


## Instance properties
`FileSystem.name` Read only
    
A string representing the file system's name. This name is unique among the entire list of exposed file systems.
`FileSystem.root` Read only
    
A `FileSystemDirectoryEntry` object which represents the file system's root directory. Through this object, you can gain access to all files and directories in the file system.
  * File and Directory Entries API
  * `FileSystemEntry`, `FileSystemFileEntry`, and `FileSystemDirectoryEntry`


# Device Memory API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The capabilities of a client device largely depend on the amount of available RAM. Traditionally, developers had to use heuristics and either benchmark a device or infer device capabilities based on other factors like the device manufacturer or User Agent strings.
## Determining device memory
There are two ways to determine the approximate amount of RAM a device has: use the Device Memory JavaScript API or accept Client Hints.
### JavaScript API
You may query the approximate amount of RAM a device has by retrieving `Navigator.deviceMemory` or `WorkerNavigator.deviceMemory`.
    
    const RAM = navigator.deviceMemory;
    
### Client Hints
You may also use the Client Hints HTTP Header with the `Device-Memory` directive to retrieve the same approximate RAM capacity.
## Interfaces
>
### Extensions to other interfaces
`Navigator.deviceMemory` Read only
    
Returns the approximate amount of device memory in gigabytes.
`WorkerNavigator.deviceMemory` Read only
    
Returns the approximate amount of device memory in gigabytes.
>
### api.Navigator.deviceMemory
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Device_Memory_API` 63 79 No 50 No 63 No 46 No 8.0 63 No  
### api.WorkerNavigator.deviceMemory
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Device_Memory_API` 65 79 No 52 No 65 No 47 No 9.0 65 No  
### http.headers.Device-Memory
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Device_Memory_API` 61 79 No 48 No 61 No 45 No 8.0 61 No  
  * `Device-Memory` header


# HTMLBaseElement
The `HTMLBaseElement` interface contains the base URI for a document. This object inherits all of the properties and methods as described in the `HTMLElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLBaseElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLBaseElement.href`
    
A string that reflects the `href` HTML attribute, containing a base URL for relative URLs in the document.
`HTMLBaseElement.target`
    
A string that reflects the `target` HTML attribute, containing a default target browsing context or frame for elements that do not have a target reference specified.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * HTML element implementing this interface: `<base>`


# Cookie Store API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Service Workers.
The Cookie Store API is an asynchronous API for managing cookies, available in windows and also service workers.
## Concepts and Usage
The original method of getting and setting cookies involves working with `document.cookie` to get and set cookie information as a string of key/value pairs. In addition to this being cumbersome and error prone, it also has a host of issues in the context of modern web development.
The `document.cookie` interface is synchronous, single-threaded, and blocking. When writing a cookie you must wait for the browser to update the string of all cookies. In addition, the reliance on `document` means that cookies cannot be accessed by service workers, as they cannot access the `document` object.
The Cookie Store API provides an updated method of managing cookies. It is asynchronous and promise-based, therefore does not block the event loop. It does not rely on `Document` and so is available to service workers. The methods for getting and setting cookies also provide more feedback by way of error messages. This means that web developers do not have to set then immediately read back a cookie to check that setting was successful.
## Interfaces
`CookieStore` Experimental
    
The `CookieStore` interface enables getting and setting cookies.
`CookieStoreManager` Experimental
    
The `CookieStoreManager` interface provides a service worker registration to enable service workers to subscribe to cookie change events.
`CookieChangeEvent` Experimental
    
A `CookieChangeEvent` named `change` is dispatched against `CookieStore` objects in `Window` contexts when any script-visible cookies changes occur.
`ExtendableCookieChangeEvent`
    
An `ExtendableCookieChangeEvent` named `cookiechange` is dispatched in `ServiceWorkerGlobalScope` contexts when any script-visible cookie changes occur that match the service worker's cookie change subscription list.
### Extensions to other interfaces
`ServiceWorkerGlobalScope.cookieStore` Read only Experimental
    
Returns a reference to the `CookieStore` object associated with the service worker.
`ServiceWorkerRegistration.cookies` Read only Experimental
    
Returns a reference to the `CookieStoreManager` interface, which enables a web app to subscribe to and unsubscribe from cookie change events.
`Window.cookieStore` Read only Experimental
    
Returns a reference to the `CookieStore` object for the current document context.
`cookiechange` event  Experimental
    
Fired when any cookie changes have occurred which match the service worker's cookie change subscription list.
>
### api.CookieStore
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Cookie_Store_API` 87 87 140 73 18.4 87 140 62 18.4 14.0 87 18.4  
`change_event` 87 87 140 73 18.4 87 140 62 18.4 14.0 87 18.4  
`delete` 87 87 140 73 18.4 87 140 62 18.4 14.0 87 18.4  
`get` 87 87 140 73 18.4 87 140 62 18.4 14.0 87 18.4  
`getAll` 87 87 140 73 18.4 87 140 62 18.4 14.0 87 18.4  
`set` 87 87 140 73 18.4 87 140 62 18.4 14.0 87 18.4  
### api.CookieStoreManager
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Cookie_Store_API` 87 87 140 73 No 87 140 62 No 14.0 87 No  
`getSubscriptions` 87 87 140 73 No 87 140 62 No 14.0 87 No  
`subscribe` 87 87 140 73 No 87 140 62 No 14.0 87 No  
`unsubscribe` 87 87 140 73 No 87 140 62 No 14.0 87 No  
  * Service Worker API


# SVGFECompositeElement
The `SVGFECompositeElement` interface corresponds to the `<feComposite>` element.
EventTarget  Node  Element  SVGElement  SVGFECompositeElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFECompositeElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFECompositeElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFECompositeElement.in2` Read only
    
An `SVGAnimatedString` corresponding to the `in2` attribute of the given element.
`SVGFECompositeElement.operator` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `operator` attribute of the given element.
`SVGFECompositeElement.k1` Read only
    
An `SVGAnimatedNumber` corresponding to the `k1` attribute of the given element.
`SVGFECompositeElement.k2` Read only
    
An `SVGAnimatedNumber` corresponding to the `k2` attribute of the given element.
`SVGFECompositeElement.k3` Read only
    
An `SVGAnimatedNumber` corresponding to the `k3` attribute of the given element.
`SVGFECompositeElement.k4` Read only
    
An `SVGAnimatedNumber` corresponding to the `k4` attribute of the given element.
`SVGFECompositeElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFECompositeElement.type` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `type` attribute of the given element. It takes one of the `SVG_FECOMPOSITE_OPERATOR_*` constants defined on this interface.
`SVGFECompositeElement.values` Read only
    
An `SVGAnimatedNumberList` corresponding to the `values` attribute of the given element.
`SVGFECompositeElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFECompositeElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFECompositeElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
## Static properties
`SVG_FECOMPOSITE_OPERATOR_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_FECOMPOSITE_OPERATOR_OVER` (1)
    
Corresponds to the value `over`.
`SVG_FECOMPOSITE_OPERATOR_IN` (2)
    
Corresponds to the value `in`.
`SVG_FECOMPOSITE_OPERATOR_OUT` (3)
    
Corresponds to the value `out`.
`SVG_FECOMPOSITE_OPERATOR_ATOP` (4)
    
Corresponds to the value `atop`.
`SVG_FECOMPOSITE_OPERATOR_XOR` (5)
    
Corresponds to the value `xor`.
`SVG_FECOMPOSITE_OPERATOR_ARITHMETIC` (6)
    
Corresponds to the value `arithmetic`.
  * `<feComposite>`


# HID
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers, except for Shared Web Workers.
The `HID` interface provides methods for connecting to HID devices, listing attached HID devices and event handlers for connected HID devices.
EventTarget  HID 
## Instance properties
This interface also inherits properties of its parent, `EventTarget`.
## Instance methods
This interface also inherits methods of its parent, `EventTarget`.
`getDevices()` Experimental
    
Returns a `Promise` that resolves with an array of connected HID devices that the user has previously been granted access to in response to a `requestDevice()` call.
`requestDevice()` Experimental
    
Returns a `Promise` that resolves with an array of connected `HIDDevice` objects. Calling this function will trigger the user agent's permission flow in order to gain permission to access one selected device from the returned list of devices.
### Events
`connect` Experimental
    
Fired when an HID device is connected.
`disconnect` Experimental
    
Fired when an HID device is disconnected.
  * WebHID API


# Device Posture API
The Device Posture API allows developers to create user interfaces that adapt to a foldable device's posture and respond to posture changes.
## Concepts and usage
Foldable devices present unique design challenges to developers — they can be used like a regular flat screen or like a book. In addition, some of them feature a single folded screen, and some of them feature two screens with a hinged join in the middle. Care must be taken to ensure that content is not hidden by the physical join, or rendered difficult to read due to close proximity to the central fold.
The Device Posture API defines postures, which indicate the current physical folding state of a device. The current available postures are:
`continuous`
    
Indicates a flat screen state. Foldable devices are `continuous` while they are flat; either fully opened or fully closed. Non-foldable devices are considered flat and therefore always `continuous` — this includes seamless curved displays and standard desktop, laptop, tablet, and mobile screens. 
`folded`
    
Indicates a folded screen state. Foldable devices are `folded` while used in a book or laptop posture. 
The Device Posture API includes features enabling you to run scripts and vary layouts depending on current device posture and posture changes.
## CSS features
`device-posture` `@media` feature
    
Detects the device's current posture.
## Interfaces
`DevicePosture`
    
Represents the device's posture, providing access to the current posture `type` and a `change` event that fires on posture change.
### Extensions to other interfaces
`Navigator.devicePosture`
    
The entry point for the Device Posture API — returns the browser's `DevicePosture` object.
## Examples
You can find a complete example showing all of the features in action in the Device Posture API demo.
If possible, you should view this on a foldable device. Current browser developer tools enable emulating foldable devices, but don't include emulation of partially folded devices — only fully open or closed — so they will always return `continuous`.
  * Origin trial for Foldable APIs on developer.chrome.com (2024)


# CSSMathMax
The `CSSMathMax` interface of the CSS Typed Object Model API represents the CSS `max()` function. It inherits properties and methods from its parent `CSSNumericValue`.
CSSStyleValue  CSSNumericValue  CSSMathValue  CSSMathMax 
## Constructor
`CSSMathMax()` Experimental
    
Creates a new `CSSMathMax` object.
## Instance properties
`CSSMathMax.values` Read only
    
Returns a `CSSNumericArray` object which contains one or more `CSSNumericValue` objects.
## Static methods
The interface may also inherit methods from its parent interface, `CSSMathValue`.
## Instance methods
The interface may also inherit methods from its parent interface, `CSSMathValue`.
## Examples
To do
# AnimationEvent
The `AnimationEvent` interface represents events providing information related to animations.
Event  AnimationEvent 
## Constructor
`AnimationEvent()`
    
Creates an `AnimationEvent` event with the given parameters.
## Instance properties
Also inherits properties from its parent `Event`.
`AnimationEvent.animationName` Read only
    
A string containing the value of the `animation-name` that generated the animation.
`AnimationEvent.elapsedTime` Read only
    
A `float` giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an `animationstart` event, `elapsedTime` is `0.0` unless there was a negative value for `animation-delay`, in which case the event will be fired with `elapsedTime` containing `(-1 * delay)`.
`AnimationEvent.pseudoElement` Read only
    
A string, starting with `'::'`, containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: `''`.
## Instance methods
Inherits methods from its parent, `Event`.
  * Using CSS animations
  * Animation-related CSS properties and at-rules: `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timing-function`, `@keyframes`.


# RTCOutboundRtpStreamStats
The `RTCOutboundRtpStreamStats` dictionary of the WebRTC API is used to report metrics and statistics related to an outbound RTP stream being sent by an `RTCRtpSender`.
The statistics can be obtained by iterating the `RTCStatsReport` returned by `RTCPeerConnection.getStats()` or `RTCRtpSender.getStats()` until you find a report with the `type` of `outbound-rtp`.
## Instance properties
`active` Experimental
    
A boolean that indicates whether this RTP stream is configured to be sent, or is disabled.
`frameHeight`
    
An integer indicating the height of the last encoded frame, in pixels. Undefined for audio streams.
`frameWidth`
    
An integer indicating the width of the last encoded frame, in pixels. Undefined for audio streams.
`framesEncoded`
    
The number of frames that have been successfully encoded so far for sending on this RTP stream. Undefined for audio streams.
`framesPerSecond`
    
A number that represents the encoded frames sent in the last second. Undefined for audio streams.
`framesSent`
    
A positive integer that represents the total number of encoded frames sent on this RTP stream. Undefined for audio streams.
`headerBytesSent`
    
A positive integer that represents the total number of RTP header and padding bytes sent for this SSRC.
`keyFramesEncoded` Experimental
    
A positive integer that represents the total number of key frames successfully encoded in this RTP media stream. Undefined for audio streams.
`mediaSourceId`
    
A string that represents the id of the stats object of the track currently attached to the sender of this stream.
`mid`
    
A string that uniquely identifies the pairing of source and destination of the transceiver's stream. This is the value of the corresponding `RTCRtpTransceiver.mid` unless that is null, in which case the statistic property is not present.
`nackCount`
    
An integer value indicating the total number of Negative ACKnowledgement (NACK) packets this `RTCRtpSender` has received from the remote `RTCRtpReceiver`. This locally-computed value provides an indication of the error resiliency of the connection.
`qpSum`
    
A 64-bit value containing the sum of the QP values for every frame encoded by this `RTCRtpSender`. This locally-computed value provides an indication of how heavily compressed the data is. Undefined for audio streams.
`qualityLimitationDurations` Experimental
    
A map of the reasons that a media stream's resolution or framerate has been reduced, and the time that the quality was reduced for each reason. Undefined for audio streams.
`qualityLimitationReason` Experimental
    
A string indicating the reason why the stream is being quality-limited. One of: `none`, `cpu`, `bandwidth`, or `other`. Undefined for audio streams.
`remoteId`
    
A string which identifies the `RTCRemoteInboundRtpStreamStats` object that provides statistics for the remote peer for this same SSRC. This ID is stable across multiple calls to `getStats()`.
`retransmittedBytesSent`
    
A positive integer that represents the total number of payload bytes retransmitted for the source associated with this stream.
`retransmittedPacketsSent`
    
A positive integer that represents the total number of packets retransmitted for the source associated with this stream.
`rid`
    
A string that indicates the RTP stream ID for a corresponding video stream.
`scalabilityMode` Experimental
    
A string that represents the scalability mode for the RTP stream, if one has been configured.
`targetBitrate`
    
A number that represents the bit rate that the `RTCRtpSender`'s codec is currently attempting to achieve for the stream.
`totalEncodeTime`
    
A number that represents the total number of seconds that have been spent encoding the frames encoded for this stream `RTCRtpSender`. Undefined for audio streams.
`totalEncodedBytesTarget` Experimental
    
A cumulative sum of the target frame sizes for all of the frames encoded so far. This will likely differ from the total of the actual frame sizes. Undefined for audio streams.
`totalPacketSendDelay`
    
A number that represents the total time in seconds that packets have spent buffered locally before being transmitted.
### Sent RTP stream statistics
`bytesSent` Optional
    
A positive integer indicating the total number of bytes sent for this SSRC, including retransmissions. 
`packetsSent` Optional
    
A positive integer indicating the total number of RTP packets sent for this SSRC, including retransmissions. 
### Common RTP stream statistics
`codecId` Optional
    
A string that uniquely identifies the object that was inspected to produce the `RTCCodecStats` object associated with this RTP stream.
`kind`
    
A string indicating whether the `MediaStreamTrack` associated with the stream is an audio or a video track.
`ssrc`
    
A positive integer that identifies the SSRC of the RTP packets in this stream.
`transportId` Optional
    
A string that uniquely identifies the object which was inspected to produce the `RTCTransportStats` object associated with this RTP stream.
### Common instance properties
The following properties are common to all WebRTC statistics objects.
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"outbound-rtp"`, indicating the type of statistics that the object contains.
  * `RTCStatsReport`


# Geometry interfaces
Geometry interfaces is a CSS module that provides interfaces for working with 3D and 2D graphics — in particular, for working with points, rectangles, quadrilaterals and transformation matrices (for operations that translate/move, scale, rotate, skew/shear/slant, and flip graphics, as well as for multiplying/chaining and inverting/undoing those operations).
As a web developer, you don't always use the geometry interfaces directly, but instead use other features that rely on them behind the scenes: parts of CSS Transforms, the Canvas API, the WebXR Device API, and (more directly) `VideoFrame.visibleRect`, `Element.getClientRects()`, and `Element.getBoundingClientRect()`.
## Interfaces
`DOMMatrix`
    
Represents a transformation matrix, for operations that translate/move, scale, rotate, skew/shear/slant, and flip graphics, as well as for multiplying/chaining and inverting/undoing those operations.
`DOMMatrixReadOnly`
    
Read-only version of `DOMMatrix`.
`DOMPoint`
    
Represents a 2D or 3D point in a coordinate system; it includes values for the coordinates in up to three dimensions, as well as an optional perspective value.
`DOMPointReadOnly`
    
Read-only version of `DOMPoint`.
`DOMQuad`
    
Represents a collection of four `DOMPoint` objects defining the corners of a quadrilateral.
`DOMRect`
    
Represents the size and position of a rectangle.
`DOMRectReadOnly`
    
Read-only version of `DOMRect`.
## Examples
The `Path2D.addPath()` and `CanvasPattern.setTransform()` articles have examples that use some of the geometry interfaces.
>
### api.DOMMatrix
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`DOMMatrix` 6152 79121212–79 33491.5 4815≤12.1 1154 611818 33494 4814≤12.1 1143 8.01.01.0 614.44.4 1143  
`Geometry_interfaces` 6152 79121212–79 33491.5 4815≤12.1 1154 611818 33494 4814≤12.1 1143 8.01.01.0 614.44.4 1143  
`a` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`b` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`c` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`d` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`e` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`f` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`fromFloat32Array_static` 61 79 69 48 11 61 79 45 11 8.0 61 11  
`fromFloat64Array_static` 61 79 69 48 11 61 79 45 11 8.0 61 11  
`fromMatrix_static` 61 79 69 48 11 61 79 45 11 8.0 61 11  
`invertSelf` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m11` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m12` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m13` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m14` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m21` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m22` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m23` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m24` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m31` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m32` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m33` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m34` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m41` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m42` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m43` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m44` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`multiplySelf` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`preMultiplySelf` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`rotateAxisAngleSelf` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`rotateFromVectorSelf` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`rotateSelf` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`scale3dSelf` 61 79 33Starting in Firefox 69, the first parameter (`scale`) is now optional with a default value of 1, per the specification. Previously it was required. 48 11 61 33Starting in Firefox for Android 79, the first parameter (`scale`) is now optional with a default value of 1, per the specification. Previously it was required. 45 11 8.0 61 11  
`scaleSelf` 61 79 33Firefox 69 introduced support for the modern six-parameter syntax for `scaleSelf()`. Previously, it only supported the older three-parameter syntax: `scale(scaleX[, originX][, originY]]])`. 48 11 61 33Firefox for Android 79 introduced support for the modern six-parameter syntax for `scaleSelf()`. Previously, it only supported the older three-parameter syntax: `scale(scaleX[, originX][, originY]]])`. 45 11 8.0 61 11  
`setMatrixValue` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`skewXSelf` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`skewYSelf` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`translateSelf` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`worker_support` 61 79 69 48 11 61 79 45 11 8.0 61 11  
### api.DOMMatrixReadOnly
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`DOMMatrixReadOnly` 61 79 62 48 11 61 62 45 11 8.0 61 11  
`Geometry_interfaces` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`a` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`b` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`c` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`d` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`e` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`f` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`flipX` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`flipY` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`fromFloat32Array_static` 61 79 69 48 11 61 79 45 11 8.0 61 11  
`fromFloat64Array_static` 61 79 69 48 11 61 79 45 11 8.0 61 11  
`fromMatrix_static` 61 79 69 48 11 61 79 45 11 8.0 61 11  
`inverse` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`is2D` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`isIdentity` 61 79 59 48 11 61 59 45 11 8.0 61 11  
`m11` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m12` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m13` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m14` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m21` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m22` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m23` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m24` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m31` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m32` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m33` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m34` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m41` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m42` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m43` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`m44` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`multiply` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`rotate` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`rotateAxisAngle` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`rotateFromVector` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`scale` 61 79 33Firefox 69 introduced support for the modern six-parameter syntax for `scale()`. Previously, it only supported the older three-parameter syntax: `scale(scaleX[, originX][, originY]]])`. 48 11 61 33Firefox for Android 79 introduced support for the modern six-parameter syntax for `scale()`. Previously, it only supported the older three-parameter syntax: `scale(scaleX[, originX][, originY]]])`. 45 11 8.0 61 11  
`scale3d` 61 79 33Starting in Firefox 69, the first parameter (`scale`) is now optional with a default value of 1, per the specification. Previously it was required. 48 11 61 33Starting in Firefox for Android 79, the first parameter (`scale`) is now optional with a default value of 1, per the specification. Previously it was required. 45 11 8.0 61 11  
`scaleNonUniform` 73 79 33 60 17.4 73 33 52 17.4 11.0 73 17.4  
`skewX` 61 79 33Before Firefox 69, the `sx` parameter was required; you may now call `skewX()` with no inputs. A value of 0 is correctly assumed. 48 11 61 33Before Firefox for Android 79, the `sx` parameter was required; you may now call `skewX()` with no inputs. A value of 0 is correctly assumed. 45 11 8.0 61 11  
`skewY` 61 79 33Before Firefox 69, the `sy` parameter was required; you may now call `skewY()` with no inputs. A value of 0 is correctly assumed. 48 11 61 33Before Firefox for Android 79, the `sy` parameter was required; you may now call `skewY()` with no inputs. A value of 0 is correctly assumed. 45 11 8.0 61 11  
`toFloat32Array` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`toFloat64Array` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`toJSON` 61 79 62 48 11 61 62 45 11 8.0 61 11  
`toString` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`transformPoint` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`translate` 61 79 33 48 11 61 33 45 11 8.0 61 11  
`worker_support` 61 79 69 48 11 61 79 45 11 8.0 61 11  
### api.DOMPoint
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`DOMPoint` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
`Geometry_interfaces` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
`fromPoint_static` 61 79 62 48 10.1 61 62 45 10.3 8.0 61 10.3  
`w` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
`worker_support` 61 79 69 48 10.1 61 79 45 10.3 8.0 61 10.3  
`x` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
`y` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
`z` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
### api.DOMPointReadOnly
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`DOMPointReadOnly` 61 79 62 48 10.1 61 62 45 10.3 8.0 61 10.3  
`Geometry_interfaces` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
`fromPoint_static` 61 79 62 48 10.1 61 62 45 10.3 8.0 61 10.3  
`matrixTransform` 61 79 69 48 11 61 79 45 11 8.0 61 11  
`toJSON` 61 79 62 48 10.1 61 62 45 10.3 8.0 61 10.3  
`w` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
`worker_support` 61 79 69 48 10.1 61 79 45 10.3 8.0 61 10.3  
`x` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
`y` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
`z` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
### api.DOMQuad
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`DOMQuad` 61 79 31 48 11 61 31 45 11 8.0 61 11  
`Geometry_interfaces` 61 79 31 48 11 61 31 45 11 8.0 61 11  
`fromQuad_static` 61 79 69 48 11 61 79 45 11 8.0 61 11  
`fromRect_static` 61 79 69 48 11 61 79 45 11 8.0 61 11  
`getBounds` 61 79 62 48 11 61 62 45 11 8.0 61 11  
`p1` 61 79 31Before Firefox 69, the default value of `p1` through `p4` was undefined; now `DOMQuadInit` defines these as `false`. 48 11 61 31Before Firefox for Android 79, the default value of `p1` through `p4` was undefined; now `DOMQuadInit` defines these as `false`. 45 11 8.0 61 11  
`p2` 61 79 31Before Firefox 69, the default value of `p1` through `p4` was undefined; now `DOMQuadInit` defines these as `false`. 48 11 61 31Before Firefox for Android 79, the default value of `p1` through `p4` was undefined; now `DOMQuadInit` defines these as `false`. 45 11 8.0 61 11  
`p3` 61 79 31Before Firefox 69, the default value of `p1` through `p4` was undefined; now `DOMQuadInit` defines these as `false`. 48 11 61 31Before Firefox for Android 79, the default value of `p1` through `p4` was undefined; now `DOMQuadInit` defines these as `false`. 45 11 8.0 61 11  
`p4` 61 79 31Before Firefox 69, the default value of `p1` through `p4` was undefined; now `DOMQuadInit` defines these as `false`. 48 11 61 31Before Firefox for Android 79, the default value of `p1` through `p4` was undefined; now `DOMQuadInit` defines these as `false`. 45 11 8.0 61 11  
`toJSON` 61 79 62 48 11 61 62 45 11 8.0 61 11  
`worker_support` 61 79 69 48 11 61 79 45 11 8.0 61 11  
### api.DOMRect
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`DOMRect` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
`Geometry_interfaces` 612–61 7912–79 273–27 489.5–48 10.14–11 6118–61 274–27 4510.1–45 10.33.2–11 8.01.0–8.0 612–61 10.33.2–11  
`fromRect_static` 61 79 69 48 10.1 61 79 45 10.3 8.0 61 10.3  
`height` 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2  
`width` 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2  
`worker_support` 61 79 69 48 10.1 61 79 45 10.3 8.0 61 10.3  
`x` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
`y` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
### api.DOMRectReadOnly
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`DOMRectReadOnly` 61 79 62 48 10.1 61 62 45 10.3 8.0 61 10.3  
`Geometry_interfaces` 612–61 7912–79 3127–313–27 489.5–48 10.14–11 6118–61 3127–314–27 4510.1–45 10.33.2–11 8.01.0–8.0 612–61 10.33.2–11  
`bottom` 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2  
`fromRect_static` 61 79 69 48 10.1 61 79 45 10.3 8.0 61 10.3  
`height` 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2  
`left` 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2  
`right` 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2  
`toJSON` 61 79 62 48 10.1 61 62 45 10.3 8.0 61 10.3  
`top` 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2  
`width` 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2  
`worker_support` 61 79 69 48 10.1 61 79 45 10.3 8.0 61 10.3  
`x` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
`y` 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3  
  * `Path2D.addPath()`
  * `CanvasPattern.setTransform()`
  * `CanvasRenderingContext2D.getTransform()`
  * `CanvasRenderingContext2D.setTransform()`
  * `CSSTransformValue.toMatrix()`
  * `CSSTransformComponent.toMatrix()`
  * `Element.getBoundingClientRect()`
  * `Element.getClientRects()`
  * `VideoFrame.visibleRect`
  * `XRLightEstimate`
  * `XRRigidTransform`


# Performance APIs
Note: This feature is available in Web Workers.
The Performance API is a group of standards used to measure the performance of web applications.
## Concepts and usage
To ensure web applications are fast, it's important to measure and analyze various performance metrics. The Performance API provides important built-in metrics and the ability to add your own measurements to the browser's performance timeline. The performance timeline contains high precision timestamps and can be displayed in developer tools. You can also send its data to analytics end points to record performance metrics over time.
Each performance metric is represented by a single `PerformanceEntry`. A performance entry has a `name`, a `duration`, a `startTime`, and a `type`. All performance metrics extend the `PerformanceEntry` interface and qualify it further.
Most of the performance entries are recorded for you without you having to do anything, and are then accessible either through `Performance.getEntries()` or (preferably) through `PerformanceObserver`. For example, `PerformanceEventTiming` entries are recorded for events that take longer than a set threshold. But the Performance API also enables you to define and record your own custom events, using the `PerformanceMark` and `PerformanceMeasure` interfaces.
The main `Performance` interface is available in both `Window` and `Worker` global scopes, and enables you to add custom performance entries, to clear performance entries, and to retrieve performance entries.
The `PerformanceObserver` interface enables you to listen for various types of performance entry as they are recorded.
For more conceptual information, see the Performance API guides below.
## Reference
The following interfaces are present in the Performance API:
`EventCounts`
    
A read-only map returned by `performance.eventCounts` containing the number of events which have been dispatched per event type.
`LargestContentfulPaint`
    
Measures the render time of the largest image or text block visible within the viewport, recorded from when the page first begins to load.
`LayoutShift`
    
Provides insights into the layout stability of web pages based on movements of the elements on the page.
`LayoutShiftAttribution`
    
Provides debugging information about elements which have shifted.
`NotRestoredReasonDetails`
    
Represents a single reason why a navigated page was blocked from using the back/forward cache (bfcache).
`NotRestoredReasons`
    
Provides report data containing reasons why the current document was blocked from using the back/forward cache (bfcache) on navigation.
`Performance`
    
Main interface to access performance measurements. Available to window and worker contexts using `Window.performance` or `WorkerGlobalScope.performance`.
`PerformanceElementTiming`
    
Measures rendering timestamps of specific elements.
`PerformanceEntry`
    
An entry on the performance timeline encapsulating a single performance metric. All performance metrics inherit from this interface.
`PerformanceEventTiming`
    
Measures latency of events and Interaction to Next Paint (INP).
`PerformanceLongAnimationFrameTiming`
    
Provides metrics on long animation frames (LoAFs) that occupy rendering and block other tasks from being executed.
`PerformanceLongTaskTiming`
    
Provides metrics on long tasks that occupy rendering and block other tasks from being executed.
`PerformanceMark`
    
Custom marker for your own entry on the performance timeline.
`PerformanceMeasure`
    
Custom time measurement between two performance entries.
`PerformanceNavigationTiming`
    
Measures document navigation events, like how much time it takes to load a document.
`PerformanceObserver`
    
Listens for new performance entries as they are recorded in the performance timeline.
`PerformanceObserverEntryList`
    
List of entries that were observed in a performance observer.
`PerformancePaintTiming`
    
Measures render operations during web page construction.
`PerformanceResourceTiming`
    
Measures network loading metrics such as redirect start and end times, fetch start, DNS lookup start and end times, response start and end times for resources such as images, scripts, fetch calls, etc.
`PerformanceScriptTiming`
    
Provides metrics on individual scripts causing long animation frames (LoAFs).
`PerformanceServerTiming`
    
Surfaces server metrics that are sent with the response in the `Server-Timing` HTTP header.
`TaskAttributionTiming`
    
Identifies the type of task and the container that is responsible for the long task.
`VisibilityStateEntry`
    
Measures the timing of page visibility state changes, i.e., when a tab changes from the foreground to the background or vice versa.
## Guides
The following guides help you to understand key concepts of the Performance API and provide an overview about its abilities:
  * Performance data: Collecting, accessing, and working with performance data.
  * High precision timing: Measuring with high precision time and monotonic clocks.
  * Resource timing: Measuring network timing for fetched resources, such as images, CSS, and JavaScript.
  * Navigation timing: Measuring navigation timing of a document.
  * User timing: Measuring and recording performance data custom to your application.
  * Server timing: Collecting server-side metrics.
  * Long animation frame timing: Collecting metrics on long animation frames (LoAFs) and their causes.
  * Monitoring bfcache blocking reasons: Reporting on why the current document was blocked from using the back/forward cache (bfcache).


  * Web performance
  * Learn: Web performance


# DOMTokenList
The `DOMTokenList` interface represents a set of space-separated tokens. Such a set is returned by `Element.classList` or `HTMLLinkElement.relList`, and many others.
A `DOMTokenList` is indexed beginning with `0` as with JavaScript `Array` objects. `DOMTokenList` is always case-sensitive.
## Instance properties
`DOMTokenList.length` Read only
    
An `integer` representing the number of objects stored in the object.
`DOMTokenList.value`
    
A stringifier property that returns the value of the list as a string.
## Instance methods
`DOMTokenList.item()`
    
Returns the item in the list by its index, or `null` if the index is greater than or equal to the list's `length`.
`DOMTokenList.contains()`
    
Returns `true` if the list contains the given token, otherwise `false`.
`DOMTokenList.add()`
    
Adds the specified tokens to the list.
`DOMTokenList.remove()`
    
Removes the specified tokens from the list.
`DOMTokenList.replace()`
    
Replaces the token with another one.
`DOMTokenList.supports()`
    
Returns `true` if the given token is in the associated attribute's supported tokens.
`DOMTokenList.toggle()`
    
Removes the token from the list if it exists, or adds it to the list if it doesn't. Returns a boolean indicating whether the token is in the list after the operation.
`DOMTokenList.entries()`
    
Returns an iterator, allowing you to go through all key/value pairs contained in this object.
`DOMTokenList.forEach()`
    
Executes a provided callback function once for each `DOMTokenList` element.
`DOMTokenList.keys()`
    
Returns an iterator, allowing you to go through all keys of the key/value pairs contained in this object.
`DOMTokenList.toString()`
    
Returns the `DOMTokenList.value`, the space-separated values of the list as a string.
`DOMTokenList.values()`
    
Returns an iterator, allowing you to go through all values of the key/value pairs contained in this object.
## Examples
In the following simple example, we retrieve the list of classes set on a `<p>` element as a `DOMTokenList` using `Element.classList`, add a class using `DOMTokenList.add()`, and then update the `Node.textContent` of the `<p>` to equal the `DOMTokenList`.
First, the HTML:
    
    <p class="a b c"></p>
    
Now the JavaScript:
    
    let para = document.querySelector("p");
    let classes = para.classList;
    para.classList.add("d");
    para.textContent = `paragraph classList is "${classes}"`;
    
The output looks like this:
## Trimming of whitespace and removal of duplicates
Methods that modify the `DOMTokenList` (such as `DOMTokenList.add()`) automatically trim any excess Whitespace and remove duplicate values from the list. For example:
    
    <span class="    d   d e f"></span>
    
    
    let span = document.querySelector("span");
    let classes = span.classList;
    span.classList.add("x");
    span.textContent = `span classList is "${classes}"`;
    
The output looks like this:
# ResizeObserverSize
The `ResizeObserverSize` interface of the Resize Observer API is used by the `ResizeObserverEntry` interface to access the box sizing properties of the element being observed.
Note: In multi-column layout, which is a fragmented context, the sizing returned by `ResizeObserverSize` will be the size of the first column.
## Instance properties
`ResizeObserverSize.blockSize` Read only
    
The length of the observed element's border box in the block dimension. For boxes with a horizontal `writing-mode`, this is the vertical dimension, or height; if the writing-mode is vertical, this is the horizontal dimension, or width.
`ResizeObserverSize.inlineSize` Read only
    
The length of the observed element's border box in the inline dimension. For boxes with a horizontal `writing-mode`, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height.
Note: For more explanation of writing modes and block and inline dimensions, read Handling different text directions.
## Examples
In this example the `ResizeObserverEntry.contentBoxSize` property returns a `ResizeObserverSize` object. This is an array containing the sizing information for the content box of the observed element.
    
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        console.log(entry.contentBoxSize[0]); // a ResizeObserverSize
      }
    });
    
    resizeObserver.observe(divElem);
    
# RTCDataChannelEvent
The `RTCDataChannelEvent` interface represents an event related to a specific `RTCDataChannel`.
Event  RTCDataChannelEvent 
## Constructor
`RTCDataChannelEvent()`
    
Creates a new `RTCDataChannelEvent`.
## Instance properties
Also inherits properties from `Event`.
`channel` Read only
    
Returns the `RTCDataChannel` associated with the event.
## Examples
In this example, the `datachannel` event handler is set up to save the data channel reference and set up handlers for the events which need to be monitored. The `channel` property provides the `RTCDataChannel` representing the connection to the other peer.
    
    pc.ondatachannel = (event) => {
      inboundDataChannel = event.channel;
      inboundDataChannel.onmessage = handleIncomingMessage;
      inboundDataChannel.onopen = handleChannelOpen;
      inboundDataChannel.onclose = handleChannelClose;
    };
    
See A simple RTCDataChannel sample for another, more complete, example of how to use data channels.
  * WebRTC
  * `RTCDataChannel`
  * A simple RTCDataChannel sample
  * `RTCPeerConnection` (the target interface for `datachannel` events)


# Encoding API
Note: This feature is available in Web Workers.
The Encoding API enables web developers to work with text that is represented in character encodings systems other than the encoding used internally by JavaScript strings. In particular, it enables developers to convert text between JavaScript strings and the UTF-8 encoding that is used for most documents on the web.
It provides two mechanisms:
  * Encoding: taking a JavaScript string and converting it into an array of bytes representing the UTF-8 encoding of the string.
  * Decoding: taking an array of bytes representing a particular character encoding of some text, and converting it into a JavaScript string.


Note that these operations are asymmetrical: encoding only encodes to UTF-8, while decoding can decode UTF-8 but also many legacy encoding systems.
The API provides synchronous interfaces for encoding and decoding, and also stream-based encoders and decoders, which could be used to, for example, decode text as it arrives over a network connection.
## Interfaces
`TextDecoder`
    
A decoder to convert a byte array containing a particular encoding into a JavaScript string.
`TextDecoderStream`
    
A decoder to convert a byte stream containing a particular encoding into a stream of JavaScript strings.
`TextEncoder`
    
An encoder to convert a JavaScript string into an array of bytes representing the UTF-8 encoding of the string.
`TextEncoderStream`
    
An encoder to convert a stream of JavaScript strings into an stream of bytes representing the UTF-8 encoding of the strings.
>
### api.TextDecoder
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`TextDecoder` 38 79 1918–19Implemented a slightly different version of the spec. 25 10.1 38 1918–19Implemented a slightly different version of the spec. 25 10.3 3.0 38 10.3  
`Encoding_API` 38 79 1918–19Implemented a slightly different version of the spec. 25 10.1 38 1918–19Implemented a slightly different version of the spec. 25 10.3 3.0 38 10.3  
`decode` 38 79 1918–19Implemented a slightly different version of the spec. 25 10.1 38 1918–19Implemented a slightly different version of the spec. 25 10.3 3.0 38 10.3  
`encoding` 38 79 1918–19Implemented a slightly different version of the spec. 25 10.1 38 1918–19Implemented a slightly different version of the spec. 25 10.3 3.0 38 10.3  
`fatal` 38 79 36 25 10.1 38 36 25 10.3 3.0 38 10.3  
`ignoreBOM` 38 79 63 25 10.1 38 63 25 10.3 3.0 38 10.3  
`worker_support` 38 79 20 25 10.1 38 20 25 10.3 3.0 38 10.3  
### api.TextEncoder
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`TextEncoder` 38 79 18 25 10.1 38 18 25 10.3 3.0 38 10.3  
`Encoding_API` 38 79 18 25 10.1 38 18 25 10.3 3.0 38 10.3  
`encode` 38 79 18 25 10.1 38 18 25 10.3 3.0 38 10.3  
`encodeInto` 74 79 66 62 14.1 74 66 50 14.5 11.0 74 14.5  
`encoding` 38 79 18 25 10.1 38 18 25 10.3 3.0 38 10.3  
`worker_support` 38 79 20 25 10.1 38 20 25 10.3 3.0 38 10.3  
### api.TextEncoderStream
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`TextEncoderStream` 71 79 105 58 14.1 71 105 50 14.5 10.0 71 14.5  
`Encoding_API` 71 79 105 58 14.1 71 105 50 14.5 10.0 71 14.5  
`encoding` 71 79 105 58 14.1 71 105 50 14.5 10.0 71 14.5  
`readable` 71 79 105 58 14.1 71 105 50 14.5 10.0 71 14.5  
`writable` 71 79 105 58 14.1 71 105 50 14.5 10.0 71 14.5  
### api.TextDecoderStream
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`TextDecoderStream` 71 79 105 58 14.1 71 105 50 14.5 10.0 71 14.5  
`Encoding_API` 71 79 105 58 14.1 71 105 50 14.5 10.0 71 14.5  
`encoding` 71 79 105 58 14.1 71 105 50 14.5 10.0 71 14.5  
`fatal` 71 79 105 58 14.1 71 105 50 14.5 10.0 71 14.5  
`ignoreBOM` 71 79 105 58 14.1 71 105 50 14.5 10.0 71 14.5  
`readable` 71 79 105 58 14.1 71 105 50 14.5 10.0 71 14.5  
`writable` 71 79 105 58 14.1 71 105 50 14.5 10.0 71 14.5  
  * Encoding API Encodings \- Encodings that must be supported for decoding text.


# HTMLAnchorElement
The `HTMLAnchorElement` interface represents hyperlink elements and provides special properties and methods (beyond those of the regular `HTMLElement` object interface that they inherit from) for manipulating the layout and presentation of such elements. This interface corresponds to `<a>` element; not to be confused with `<link>`, which is represented by `HTMLLinkElement`.
EventTarget  Node  Element  HTMLElement  HTMLAnchorElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLAnchorElement.attributionSrc` Secure context Experimental
    
Gets and sets the `attributionsrc` attribute on an `<a>` element programmatically, reflecting the value of that attribute. `attributionsrc` specifies that you want the browser to send an `Attribution-Reporting-Eligible` header. On the server-side this is used to trigger sending an `Attribution-Reporting-Register-Source` header in the response, to register a navigation-based attribution source.
`HTMLAnchorElement.download`
    
A string indicating that the linked resource is intended to be downloaded rather than displayed in the browser. The value represents the proposed name of the file. If the name is not a valid filename of the underlying OS, the browser will adapt it.
`HTMLAnchorElement.hash`
    
A string representing the fragment identifier, including the leading hash mark (`#`), if any, in the referenced URL.
`HTMLAnchorElement.host`
    
A string representing the hostname and port (if it's not the default port) in the referenced URL.
`HTMLAnchorElement.hostname`
    
A string representing the hostname in the referenced URL.
`HTMLAnchorElement.href`
    
A string that is the result of parsing the `href` HTML attribute relative to the document, containing a valid URL of a linked resource.
`HTMLAnchorElement.hreflang`
    
A string that reflects the `hreflang` HTML attribute, indicating the language of the linked resource.
`HTMLAnchorElement.origin` Read only
    
Returns a string containing the origin of the URL, that is its scheme, its domain and its port.
`HTMLAnchorElement.password`
    
A string containing the password specified before the domain name.
`HTMLAnchorElement.pathname`
    
A string containing an initial `/` followed by the path of the URL, not including the query string or fragment.
`HTMLAnchorElement.ping`
    
A space-separated list of URLs. When the link is followed, the browser will send `POST` requests with the body PING to the URLs.
`HTMLAnchorElement.port`
    
A string representing the port component, if any, of the referenced URL.
`HTMLAnchorElement.protocol`
    
A string representing the protocol component, including trailing colon (`:`), of the referenced URL.
`HTMLAnchorElement.referrerPolicy`
    
A string that reflects the `referrerpolicy` HTML attribute indicating which referrer to use.
`HTMLAnchorElement.rel`
    
A string that reflects the `rel` HTML attribute, specifying the relationship of the target object to the linked object.
`HTMLAnchorElement.relList` Read only
    
Returns a `DOMTokenList` that reflects the `rel` HTML attribute, as a list of tokens.
`HTMLAnchorElement.search`
    
A string representing the search element, including leading question mark (`?`), if any, of the referenced URL.
`HTMLAnchorElement.target`
    
A string that reflects the `target` HTML attribute, indicating where to display the linked resource.
`HTMLAnchorElement.text`
    
A string being a synonym for the `Node.textContent` property.
`HTMLAnchorElement.type`
    
A string that reflects the `type` HTML attribute, indicating the MIME type of the linked resource.
`HTMLAnchorElement.username`
    
A string containing the username specified before the domain name.
### Obsolete properties
`HTMLAnchorElement.charset` Deprecated
    
A string representing the character encoding of the linked resource.
`HTMLAnchorElement.coords` Deprecated
    
A string representing a comma-separated list of coordinates.
`HTMLAnchorElement.name` Deprecated
    
A string representing the anchor name.
`HTMLAnchorElement.rev` Deprecated
    
A string representing that the `rev` HTML attribute, specifying the relationship of the link object to the target object.
`HTMLAnchorElement.shape` Deprecated
    
A string representing the shape of the active area.
## Instance methods
Inherits methods from its parent, `HTMLElement`.
`HTMLAnchorElement.toString()`
    
Returns a string containing the whole URL. It is a synonym for `HTMLAnchorElement.href`, though it can't be used to modify the value.
  * The HTML element implementing this interface: `<a>`


# Path2D
Note: This feature is available in Web Workers.
The `Path2D` interface of the Canvas 2D API is used to declare a path that can then be used on a `CanvasRenderingContext2D` object. The path methods of the `CanvasRenderingContext2D` interface are also present on this interface, which gives you the convenience of being able to retain and replay your path whenever desired.
## Constructors
`Path2D()`
    
`Path2D` constructor. Creates a new `Path2D` object.
## Instance methods
`Path2D.addPath()`
    
Adds a path to the current path.
`Path2D.closePath()`
    
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
`Path2D.moveTo()`
    
Moves the starting point of a new sub-path to the (`x, y`) coordinates.
`Path2D.lineTo()`
    
Connects the last point in the subpath to the (`x, y`) coordinates with a straight line.
`Path2D.bezierCurveTo()`
    
Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()` before creating the Bézier curve.
`Path2D.quadraticCurveTo()`
    
Adds a quadratic Bézier curve to the current path.
`Path2D.arc()`
    
Adds an arc to the path which is centered at (`x, y`) position with radius `r` starting at `startAngle` and ending at `endAngle` going in the given direction by `counterclockwise` (defaulting to clockwise).
`Path2D.arcTo()`
    
Adds a circular arc to the path with the given control points and radius, connected to the previous point by a straight line.
`Path2D.ellipse()`
    
Adds an elliptical arc to the path which is centered at (`x, y`) position with the radii `radiusX` and `radiusY` starting at `startAngle` and ending at `endAngle` going in the given direction by `counterclockwise` (defaulting to clockwise).
`Path2D.rect()`
    
Creates a path for a rectangle at position (`x, y`) with a size that is determined by `width` and `height`.
`Path2D.roundRect()`
    
Creates a path for a rounded rectangle at position (`x, y`) with a size that is determined by `width` and `height` and the radii of the circular arc to be used for the corners of the rectangle is determined by `radii`.
  * `CanvasRenderingContext2D`


# HTMLOListElement
The `HTMLOListElement` interface provides special properties (beyond those defined on the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating ordered list elements.
EventTarget  Node  Element  HTMLElement  HTMLOListElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLOListElement.reversed`
    
A boolean value reflecting the `reversed` and defining if the numbering is descending, that is its value is `true`, or ascending (`false`).
`HTMLOListElement.start`
    
A `long` value reflecting the `start` and defining the value of the first number of the first element of the list.
`HTMLOListElement.type`
    
A string value reflecting the `type` and defining the kind of marker to be used to display. It can have the following values:
  * `'1'` meaning that decimal numbers are used: `1`, `2`, `3`, `4`, `5`, …
  * `'a'` meaning that the lowercase latin alphabet is used: `a`, `b`, `c`, `d`, `e`, …
  * `'A'` meaning that the uppercase latin alphabet is used: `A`, `B`, `C`, `D`, `E`, …
  * `'i'` meaning that the lowercase latin numerals are used: `i`, `ii`, `iii`, `iv`, `v`, …
  * `'I'` meaning that the uppercase latin numerals are used: `I`, `II`, `III`, `IV`, `V`, …


`HTMLOListElement.compact` Deprecated
    
A boolean value indicating that spacing between list items should be reduced. This property reflects the `compact` attribute only, it doesn't consider the `line-height` CSS property used for that behavior in modern pages.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<ol>`.


# CSSStyleSheet
The `CSSStyleSheet` interface represents a single CSS stylesheet, and lets you inspect and modify the list of rules contained in the stylesheet. It inherits properties and methods from its parent, `StyleSheet`.
StyleSheet  CSSStyleSheet 
A stylesheet consists of a collection of `CSSRule` objects representing each of the rules in the stylesheet. The rules are contained in a `CSSRuleList`, which can be obtained from the stylesheet's `cssRules` property.
For example, one rule might be a `CSSStyleRule` object containing a style such as:
    
    h1,
    h2 {
      font-size: 16pt;
    }
    
Another rule might be an at-rule such as `@import` or `@media`, and so forth.
See the Obtaining a StyleSheet section for the various ways a `CSSStyleSheet` object can be obtained. A `CSSStyleSheet` object can also be directly constructed. The constructor, and the `CSSStyleSheet.replace()`, and `CSSStyleSheet.replaceSync()` methods are newer additions to the specification, enabling Constructable Stylesheets.
## Constructor
`CSSStyleSheet()`
    
Creates a new `CSSStyleSheet` object.
## Instance properties
Inherits properties from its parent, `StyleSheet`.
`CSSStyleSheet.cssRules` Read only
    
Returns a live `CSSRuleList` which maintains an up-to-date list of the `CSSRule` objects that comprise the stylesheet.
Note: In some browsers, if a stylesheet is loaded from a different domain, accessing `cssRules` results in a `SecurityError`.
`CSSStyleSheet.ownerRule` Read only
    
If this stylesheet is imported into the document using an `@import` rule, the `ownerRule` property returns the corresponding `CSSImportRule`; otherwise, this property's value is `null`.
## Instance methods
Inherits methods from its parent, `StyleSheet`.
`CSSStyleSheet.deleteRule()`
    
Deletes the rule at the specified index into the stylesheet's rule list.
`CSSStyleSheet.insertRule()`
    
Inserts a new rule at the specified position in the stylesheet, given the textual representation of the rule.
`CSSStyleSheet.replace()`
    
Asynchronously replaces the content of the stylesheet and returns a `Promise` that resolves with the updated `CSSStyleSheet`.
`CSSStyleSheet.replaceSync()`
    
Synchronously replaces the content of the stylesheet.
## Legacy properties
These properties are legacy properties as introduced by Microsoft; these are maintained for compatibility with existing sites.
`rules` Read only Deprecated
    
The `rules` property is functionally identical to the standard `cssRules` property; it returns a live `CSSRuleList` which maintains an up-to-date list of all of the rules in the style sheet.
## Legacy methods
These methods are legacy methods as introduced by Microsoft; these are maintained for compatibility with existing sites.
`addRule()` Deprecated
    
Adds a new rule to the stylesheet given the selector to which the style applies and the style block to apply to the matching elements.
This differs from `insertRule()`, which takes the textual representation of the entire rule as a single string.
`removeRule()` Deprecated
    
Functionally identical to `deleteRule()`; removes the rule at the specified index from the stylesheet's rule list.
## Obtaining a StyleSheet
A stylesheet is associated with at most one `Document`, which it applies to (unless disabled). A list of `CSSStyleSheet` objects for a given document can be obtained using the `Document.styleSheets` property. A specific style sheet can also be accessed from its owner object (`Node` or `CSSImportRule`), if any.
A `CSSStyleSheet` object is created and inserted into the document's `Document.styleSheets` list automatically by the browser, when a stylesheet is loaded for a document.
A (possibly incomplete) list of ways a stylesheet can be associated with a document follows:
Reason for the style sheet to be associated with the document  Appears in `document.  
styleSheets` list  Getting the owner element/rule given the style sheet object  The interface for the owner object Getting the CSSStyleSheet object from the owner  
`<style>` and `<link>` elements in the document  Yes `.ownerNode` `HTMLLinkElement`,  
`HTMLStyleElement`,  
or `SVGStyleElement` `HTMLLinkElement.sheet`,  
`HTMLStyleElement.sheet`,  
or `SVGStyleElement.sheet`  
CSS `@import` rule in other style sheets applied to the document  Yes `.ownerRule` `CSSImportRule` `.styleSheet`  
`<?xml-stylesheet ?>` processing instruction in the (non-HTML) document  Yes `.ownerNode` `ProcessingInstruction` `.sheet`  
JavaScript `import ... with { type: "css" }` No N/A N/A N/A  
HTTP Link Header Yes N/A N/A N/A  
User agent (default) style sheets No N/A N/A N/A  
  * CSS Object Model
  * Using dynamic styling information


# StorageEvent
The `StorageEvent` interface is implemented by the `storage` event, which is sent to a window when a storage area the window has access to is changed within the context of another document.
Event  StorageEvent 
## Constructor
`StorageEvent()`
    
Returns a newly constructed `StorageEvent` object.
## Instance properties
In addition to the properties listed below, this interface inherits the properties of its parent interface, `Event`.
`key` Read only
    
Returns a string with the key for the storage item that was changed. The `key` attribute is `null` when the change is caused by the storage `clear()` method.
`newValue` Read only
    
Returns a string with the new value of the storage item that was changed. This value is `null` when the change has been invoked by storage `clear()` method, or the storage item has been removed from the storage.
`oldValue` Read only
    
Returns a string with the original value of the storage item that was changed. This value is `null` when the storage item has been newly added and therefore doesn't have any previous value.
`storageArea` Read only
    
Returns a `Storage` object that represents the storage object that was affected.
`url` Read only
    
Returns string with the URL of the document whose storage changed.
## Instance methods
In addition to the methods listed below, this interface inherits the methods of its parent interface, `Event`.
`initStorageEvent()` Deprecated
    
Initializes the event in a manner analogous to the similarly-named `initEvent()` method in the DOM Events interfaces. Use the constructor instead.
  * Web Storage API


# IdentityProvider
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `IdentityProvider` interface of the Federated Credential Management (FedCM) API represents an IdP and provides access to related information and functionality.
## Static methods
`close()` Experimental
    
Provides a manual signal to the browser that an IdP sign-in flow is finished. This is needed to, for example, close the IdP sign-in dialog when sign-in is completely finished and the IdP has finished collecting data from the user.
`getUserInfo()` Experimental
    
Returns information about a previously-signed in user on their return to an IdP, which can be used to provide a personalized welcome message and sign-in button.
## Examples
>
### Basic `IdentityProvider.getUserInfo()` usage
The following example shows how the `getUserInfo()` method can be used to return information on a previously-signed in user from a specific IdP.
    
    // Iframe displaying a page from the https://idp.example origin
    const userInfo = await IdentityProvider.getUserInfo({
      configURL: "https://idp.example/fedcm.json",
      clientId: "client1234",
    });
    
    // IdentityProvider.getUserInfo() returns an array of user information.
    if (userInfo.length > 0) {
      // Returning accounts should be first, so the first account received
      // is guaranteed to be a returning account
      const name = userInfo[0].name;
      const givenName = userInfo[0].given_name;
      const displayName = givenName || name;
      const picture = userInfo[0].picture;
      const email = userInfo[0].email;
    
      // …
    
      // Render a personalized sign-in button using the information returned above
    }
    
  * Federated Credential Management API on privacysandbox.google.com (2023)


# SharedStorageWorklet
The `SharedStorageWorklet` interface of the Shared Storage API represents the shared storage worklet for the current origin.
`SharedStorageWorklet` does not have its own properties or methods. Rather, it inherits the `addModule()` method from the `Worklet` interface. This method is used for adding a module.
Unlike a regular `Worklet`:
  * If the calling site has not included the Shared Storage API in a privacy sandbox enrollment process, calls to `sharedStorageWorklet.addModule()` will be rejected.
  * `SharedStorageWorklet` allows only a single module to be added, for privacy reasons. Even with a successful enrollment, repeated calls to `addModule()` on the same shared storage worklet will be rejected.


`SharedStorageWorklet` is accessed via `WindowSharedStorage.worklet`.
Worklet  SharedStorageWorklet 
## Examples
    
    // Randomly assigns a user to a group 0 or 1
    function getExperimentGroup() {
      return Math.round(Math.random());
    }
    
    async function injectContent() {
      // Add the module to the shared storage worklet
      await window.sharedStorage.worklet.addModule("ab-testing-worklet.js");
    
      // Assign user to a random group (0 or 1) and store it in shared storage
      window.sharedStorage.set("ab-testing-group", getExperimentGroup(), {
        ignoreIfPresent: true,
      });
    
      // Run the URL selection operation
      const fencedFrameConfig = await window.sharedStorage.selectURL(
        "ab-testing",
        [
          { url: `https://your-server.example/content/default-content.html` },
          { url: `https://your-server.example/content/experiment-content-a.html` },
        ],
        {
          resolveToConfig: true,
        },
      );
    
      // Render the chosen URL into a fenced frame
      document.getElementById("content-slot").config = fencedFrameConfig;
    }
    
    injectContent();
    
See the Shared Storage API landing page for a walkthrough of this example and links to other examples.
  * Shared Storage API


# KeyboardEvent
`KeyboardEvent` objects describe a user interaction with the keyboard; each event describes a single interaction between the user and a key (or combination of a key with modifier keys) on the keyboard. The event type (`keydown`, `keypress`, or `keyup`) identifies what kind of keyboard activity occurred.
Note: `KeyboardEvent` events just indicate what interaction the user had with a key on the keyboard at a low level, providing no contextual meaning to that interaction. When you need to handle text input, use the `input` event instead. Keyboard events may not be fired if the user is using an alternate means of entering text, such as a handwriting system on a tablet or graphics tablet.
Event  UIEvent  KeyboardEvent 
## Constructor
`KeyboardEvent()`
    
Creates a new `KeyboardEvent` object.
## Constants
The `KeyboardEvent` interface defines the following constants.
### Keyboard locations
The following constants identify which part of the keyboard the key event originates from. They are accessed as `KeyboardEvent.DOM_KEY_LOCATION_STANDARD` and so forth.
Keyboard location identifiers  Constant Value Description  
`DOM_KEY_LOCATION_STANDARD` 0x00
The key described by the event is not identified as being located in a particular area of the keyboard; it is not located on the numeric keypad (unless it's the NumLock key), and for keys that are duplicated on the left and right sides of the keyboard, the key is, for whatever reason, not to be associated with that location. 
Examples include alphanumeric keys on the standard PC 101 US keyboard, the NumLock key, and the space bar.   
`DOM_KEY_LOCATION_LEFT` 0x01
The key is one which may exist in multiple locations on the keyboard and, in this instance, is on the left side of the keyboard. 
Examples include the left Control key, the left Command key on a Macintosh keyboard, or the left Shift key.   
`DOM_KEY_LOCATION_RIGHT` 0x02
The key is one which may exist in multiple positions on the keyboard and, in this case, is located on the right side of the keyboard. 
Examples include the right Shift key and the right Alt key (Option on a Mac keyboard).   
`DOM_KEY_LOCATION_NUMPAD` 0x03
The key is located on the numeric keypad, or is a virtual key associated with the numeric keypad if there's more than one place the key could originate from. The NumLock key does not fall into this group and is always encoded with the location `DOM_KEY_LOCATION_STANDARD`. 
Examples include the digits on the numeric keypad, the keypad's Enter key, and the decimal point on the keypad.   
## Instance properties
This interface also inherits properties of its parents, `UIEvent` and `Event`.
`KeyboardEvent.altKey` Read only
    
Returns a boolean value that is `true` if the `Alt` (`Option` or `⌥` on macOS) key was active when the key event was generated.
`KeyboardEvent.code` Read only
    
Returns a string with the code value of the physical key represented by the event.
Warning: This ignores the user's keyboard layout, so that if the user presses the key at the "Y" position in a QWERTY keyboard layout (near the middle of the row above the home row), this will always return "KeyY", even if the user has a QWERTZ keyboard (which would mean the user expects a "Z" and all the other properties would indicate a "Z") or a Dvorak keyboard layout (where the user would expect an "F"). If you want to display the correct keystrokes to the user, you can use `Keyboard.getLayoutMap()`.
`KeyboardEvent.ctrlKey` Read only
    
Returns a boolean value that is `true` if the `Ctrl` key was active when the key event was generated.
`KeyboardEvent.isComposing` Read only
    
Returns a boolean value that is `true` if the event is fired between after `compositionstart` and before `compositionend`.
`KeyboardEvent.key` Read only
    
Returns a string representing the key value of the key represented by the event.
`KeyboardEvent.location` Read only
    
Returns a number representing the location of the key on the keyboard or other input device. A list of the constants identifying the locations is shown above in Keyboard locations.
`KeyboardEvent.metaKey` Read only
    
Returns a boolean value that is `true` if the `Meta` key (on Mac keyboards, the `⌘ Command` key; on Windows keyboards, the Windows key (`⊞`)) was active when the key event was generated.
`KeyboardEvent.repeat` Read only
    
Returns a boolean value that is `true` if the key is being held down such that it is automatically repeating.
`KeyboardEvent.shiftKey` Read only
    
Returns a boolean value that is `true` if the `Shift` key was active when the key event was generated.
### Obsolete properties
`KeyboardEvent.charCode` Deprecated Read only
    
Returns a number representing the Unicode reference number of the key; this property is used only by the `keypress` event. For keys whose `char` property contains multiple characters, this is the Unicode value of the first character in that property. In Firefox 26 this returns codes for printable characters.
`KeyboardEvent.keyCode` Deprecated Read only
    
Returns a number representing a system and implementation dependent numerical code identifying the unmodified value of the pressed key.
`KeyboardEvent.keyIdentifier` Non-standard Deprecated Read only
    
This property is non-standard and has been deprecated in favor of `KeyboardEvent.key`. It was part of an old version of DOM Level 3 Events.
## Instance methods
This interface also inherits methods of its parents, `UIEvent` and `Event`.
`KeyboardEvent.getModifierState()`
    
Returns a boolean value indicating if a modifier key such as `Alt`, `Shift`, `Ctrl`, or `Meta`, was pressed when the event was created.
### Obsolete methods
`KeyboardEvent.initKeyboardEvent()` Deprecated
    
Initializes a `KeyboardEvent` object. This is now deprecated. You should instead use the `KeyboardEvent()` constructor.
## Events
The following events are based on the `KeyboardEvent` type. In the list below, each event links to the documentation for the `Element` handler for the event, which applies generally to all of the recipients, including `Element`, `Document`, and `Window`.
`keydown`
    
A key has been pressed.
`keyup`
    
A key has been released.
### Obsolete events
`keypress` Deprecated
    
A key that normally produces a character value has been pressed. This event was highly device-dependent and is obsolete. You should not use it.
## Usage notes
There are three types of keyboard events: `keydown`, `keypress`, and `keyup`. For most keys, Gecko dispatches a sequence of key events like this:
  1. When the key is first pressed, the `keydown` event is sent.
  2. If the key is not a modifier key, the `keypress` event is sent.
  3. When the user releases the key, the `keyup` event is sent.


### Special cases
Some keys toggle the state of an indicator light; these include keys such as Caps Lock, Num Lock, and Scroll Lock. On Windows and Linux, these keys dispatch only the `keydown` and `keyup` events.
Note: On Linux, Firefox 12 and earlier also dispatched the `keypress` event for these keys.
However, a limitation of the macOS event model causes Caps Lock to dispatch only the `keydown` event. Num Lock was supported on some older laptop models (2007 models and older), but since then, macOS hasn't supported Num Lock even on external keyboards. On older MacBooks with a Num Lock key, that key doesn't generate any key events. Gecko does support the Scroll Lock key if an external keyboard which has an F14 key is connected. In certain older versions of Firefox, this key generated a `keypress` event; this inconsistent behavior was Firefox bug 602812.
### Auto-repeat handling
When a key is pressed and held down, it begins to auto-repeat. This results in a sequence of events similar to the following being dispatched:
  1. `keydown`
  2. `keypress`
  3. `keydown`
  4. `keypress`
  5. <<repeating until the user releases the key>>
  6. `keyup`


This is what the DOM Level 3 specification says should happen. There are some caveats, however, as described below.
#### Auto-repeat on some GTK environments such as Ubuntu 9.4
In some GTK-based environments, auto-repeat dispatches a native key-up event automatically during auto-repeat, and there's no way for Gecko to know the difference between a repeated series of key presses and an auto-repeat. On those platforms, then, an auto-repeat key will generate the following sequence of events:
  1. `keydown`
  2. `keypress`
  3. `keyup`
  4. `keydown`
  5. `keypress`
  6. `keyup`
  7. <<repeating until the user releases the key>>
  8. `keyup`


In these environments, unfortunately, there's no way for web content to tell the difference between auto-repeating keys and keys that are just being pressed repeatedly.
## Example
    
    document.addEventListener(
      "keydown",
      (event) => {
        const keyName = event.key;
    
        if (keyName === "Control") {
          // do not alert when only Control key is pressed.
          return;
        }
    
        if (event.ctrlKey) {
          // Even though event.key is not 'Control' (e.g., 'a' is pressed),
          // event.ctrlKey may be true if Ctrl key is pressed at the same time.
          alert(`Combination of ctrlKey + ${keyName}`);
        } else {
          alert(`Key pressed ${keyName}`);
        }
      },
      false,
    );
    
    document.addEventListener(
      "keyup",
      (event) => {
        const keyName = event.key;
    
        // As the user releases the Ctrl key, the key is no longer active,
        // so event.ctrlKey is false.
        if (keyName === "Control") {
          alert("Control key was released");
        }
      },
      false,
    );
    
The `KeyboardEvent` interface specification went through numerous draft versions, first under DOM Events Level 2 where it was dropped as no consensus arose, then under DOM Events Level 3. This led to the implementation of non-standard initialization methods, the early DOM Events Level 2 version, `KeyboardEvent.initKeyEvent()` by Gecko browsers and the early DOM Events Level 3 version, `KeyboardEvent.initKeyboardEvent()` by others. Both have been superseded by the modern usage of a constructor: `KeyboardEvent()`.
### Compatibility notes
  * As of Firefox 65, the `keypress` event is no longer fired for non-printable keys (Firefox bug 968056), except for the `Enter` key, and the `Shift` \+ `Enter` and `Ctrl` \+ `Enter` key combinations (these were kept for cross-browser compatibility purposes).


  * `KeyboardEvent.code`.
  * `KeyboardEvent.key`.
  * `KeyboardEvent.getModifierState()`


# MediaDevices
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MediaDevices` interface of the Media Capture and Streams API provides access to connected media input devices like cameras and microphones, as well as screen sharing. In essence, it lets you obtain access to any hardware source of media data.
EventTarget  MediaDevices 
## Instance properties
Inherits properties from its parent interface, `EventTarget`.
## Instance methods
Inherits methods from its parent interface, `EventTarget`.
`enumerateDevices()`
    
Obtains an array of information about the media input and output devices available on the system.
`getSupportedConstraints()`
    
Returns an object conforming to `MediaTrackSupportedConstraints` indicating which constrainable properties are supported on the `MediaStreamTrack` interface. See Media Streams API to learn more about constraints and how to use them.
`getDisplayMedia()`
    
Prompts the user to select a display or portion of a display (such as a window) to capture as a `MediaStream` for sharing or recording purposes. Returns a promise that resolves to a `MediaStream`.
`getUserMedia()`
    
With the user's permission through a prompt, turns on a camera and/or a microphone on the system and provides a `MediaStream` containing a video track and/or an audio track with the input.
`selectAudioOutput()` Experimental
    
Prompts the user to select a specific audio output device.
## Events
`devicechange`
    
Fired when a media input or output device is attached to or removed from the user's computer.
## Example
    
    // Put variables in global scope to make them available to the browser console.
    const video = document.querySelector("video");
    const constraints = {
      audio: false,
      video: true,
    };
    
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then((stream) => {
        const videoTracks = stream.getVideoTracks();
        console.log("Got stream with constraints:", constraints);
        console.log(`Using video device: ${videoTracks[0].label}`);
        stream.onremovetrack = () => {
          console.log("Stream ended");
        };
        video.srcObject = stream;
      })
      .catch((error) => {
        if (error.name === "OverconstrainedError") {
          console.error(
            `The resolution ${constraints.video.width.exact}x${constraints.video.height.exact} px is not supported by your device.`,
          );
        } else if (error.name === "NotAllowedError") {
          console.error(
            "You need to grant this page permission to access your camera and microphone.",
          );
        } else {
          console.error(`getUserMedia error: ${error.name}`, error);
        }
      });
    
  * Media Capture and Streams API: The API this interface is part of.
  * Screen Capture API: The API defining the `getDisplayMedia()` method.
  * WebRTC API
  * `Navigator.mediaDevices`: Returns a reference to a `MediaDevices` object that can be used to access devices.
  * CameraCaptureJS: HTML video capture and playback using `MediaDevices` and the MediaStream Recording API
  * OpenLang: HTML video language lab web application using `MediaDevices` and the MediaStream Recording API for video recording


# Element
`Element` is the most general base class from which all element objects (i.e., objects that represent elements) in a `Document` inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from `Element`.
For example, the `HTMLElement` interface is the base interface for HTML elements. Similarly, the `SVGElement` interface is the basis for all SVG elements, and the `MathMLElement` interface is the base interface for MathML elements. Most functionality is specified further down the class hierarchy.
Languages outside the realm of the Web platform, like XUL through the `XULElement` interface, also implement `Element`.
EventTarget  Node  Element 
## Instance properties
`Element` inherits properties from its parent interface, `Node`, and by extension that interface's parent, `EventTarget`.
`Element.assignedSlot` Read only
    
Returns a `HTMLSlotElement` representing the `<slot>` the node is inserted in.
`Element.attributes` Read only
    
Returns a `NamedNodeMap` object containing the assigned attributes of the corresponding HTML element.
`Element.childElementCount` Read only
    
Returns the number of child elements of this element.
`Element.children` Read only
    
Returns the child elements of this element.
`Element.classList` Read only
    
Returns a `DOMTokenList` containing the list of class attributes.
`Element.className`
    
A string representing the class of the element.
`Element.clientHeight` Read only
    
Returns a number representing the inner height of the element.
`Element.clientLeft` Read only
    
Returns a number representing the width of the left border of the element.
`Element.clientTop` Read only
    
Returns a number representing the width of the top border of the element.
`Element.clientWidth` Read only
    
Returns a number representing the inner width of the element.
`Element.currentCSSZoom` Read only
    
A number indicating the effective zoom size of the element, or 1.0 if the element is not rendered.
`Element.elementTiming` Experimental
    
A string reflecting the `elementtiming` attribute which marks an element for observation in the `PerformanceElementTiming` API.
`Element.firstElementChild` Read only
    
Returns the first child element of this element.
`Element.id`
    
A string representing the id of the element.
`Element.innerHTML`
    
A string representing the markup of the element's content.
`Element.lastElementChild` Read only
    
Returns the last child element of this element.
`Element.localName` Read only
    
A string representing the local part of the qualified name of the element.
`Element.namespaceURI` Read only
    
The namespace URI of the element, or `null` if it is no namespace.
`Element.nextElementSibling` Read only
    
An `Element`, the element immediately following the given one in the tree, or `null` if there's no sibling node.
`Element.outerHTML`
    
A string representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.
`Element.part`
    
Represents the part identifier(s) of the element (i.e., set using the `part` attribute), returned as a `DOMTokenList`.
`Element.prefix` Read only
    
A string representing the namespace prefix of the element, or `null` if no prefix is specified.
`Element.previousElementSibling` Read only
    
An `Element`, the element immediately preceding the given one in the tree, or `null` if there is no sibling element.
`Element.scrollHeight` Read only
    
Returns a number representing the scroll view height of an element.
`Element.scrollLeft`
    
A number representing the left scroll offset of the element.
`Element.scrollLeftMax` Non-standard Read only
    
Returns a number representing the maximum left scroll offset possible for the element.
`Element.scrollTop`
    
A number representing number of pixels the top of the element is scrolled vertically.
`Element.scrollTopMax` Non-standard Read only
    
Returns a number representing the maximum top scroll offset possible for the element.
`Element.scrollWidth` Read only
    
Returns a number representing the scroll view width of the element.
`Element.shadowRoot` Read only
    
Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.
`Element.slot`
    
Returns the name of the shadow DOM slot the element is inserted in.
`Element.tagName` Read only
    
Returns a string with the name of the tag for the given element.
### Instance properties included from ARIA
The `Element` interface also includes the following properties.
`Element.ariaAtomic`
    
A string reflecting the `aria-atomic` attribute, which indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the `aria-relevant` attribute.
`Element.ariaAutoComplete`
    
A string reflecting the `aria-autocomplete` attribute, which indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox, searchbox, or textbox and specifies how predictions would be presented if they were made.
`Element.ariaBrailleLabel`
    
A string reflecting the `aria-braillelabel` attribute, which defines the braille label of the element.
`Element.ariaBrailleRoleDescription`
    
A string reflecting the `aria-brailleroledescription` attribute, which defines the ARIA braille role description of the element.
`Element.ariaBusy`
    
A string reflecting the `aria-busy` attribute, which indicates whether an element is being modified, as assistive technologies may want to wait until the modifications are complete before exposing them to the user.
`Element.ariaChecked`
    
A string reflecting the `aria-checked` attribute, which indicates the current "checked" state of checkboxes, radio buttons, and other widgets that have a checked state.
`Element.ariaColCount`
    
A string reflecting the `aria-colcount` attribute, which defines the number of columns in a table, grid, or treegrid.
`Element.ariaColIndex`
    
A string reflecting the `aria-colindex` attribute, which defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
`Element.ariaColIndexText`
    
A string reflecting the `aria-colindextext` attribute, which defines a human readable text alternative of aria-colindex.
`Element.ariaColSpan`
    
A string reflecting the `aria-colspan` attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
`Element.ariaCurrent`
    
A string reflecting the `aria-current` attribute, which indicates the element that represents the current item within a container or set of related elements.
`Element.ariaDescription`
    
A string reflecting the `aria-description` attribute, which defines a string value that describes or annotates the current element.
`Element.ariaDisabled`
    
A string reflecting the `aria-disabled` attribute, which indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
`Element.ariaExpanded`
    
A string reflecting the `aria-expanded` attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed.
`Element.ariaHasPopup`
    
A string reflecting the `aria-haspopup` attribute, which indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`Element.ariaHidden`
    
A string reflecting the `aria-hidden` attribute, which indicates whether the element is exposed to an accessibility API.
`Element.ariaInvalid`
    
A string reflecting the `aria-invalid` attribute, which indicates the entered value does not conform to the format expected by the application.
`Element.ariaKeyShortcuts`
    
A string reflecting the `aria-keyshortcuts` attribute, which indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
`Element.ariaLabel`
    
A string reflecting the `aria-label` attribute, which defines a string value that labels the current element.
`Element.ariaLevel`
    
A string reflecting the `aria-level` attribute, which defines the hierarchical level of an element within a structure.
`Element.ariaLive`
    
A string reflecting the `aria-live` attribute, which indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
`Element.ariaModal`
    
A string reflecting the `aria-modal` attribute, which indicates whether an element is modal when displayed.
`Element.ariaMultiline`
    
A string reflecting the `aria-multiline` attribute, which indicates whether a text box accepts multiple lines of input or only a single line.
`Element.ariaMultiSelectable`
    
A string reflecting the `aria-multiselectable` attribute, which indicates that the user may select more than one item from the current selectable descendants.
`Element.ariaOrientation`
    
A string reflecting the `aria-orientation` attribute, which indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
`Element.ariaPlaceholder`
    
A string reflecting the `aria-placeholder` attribute, which defines a short hint intended to aid the user with data entry when the control has no value.
`Element.ariaPosInSet`
    
A string reflecting the `aria-posinset` attribute, which defines an element's number or position in the current set of listitems or treeitems.
`Element.ariaPressed`
    
A string reflecting the `aria-pressed` attribute, which indicates the current "pressed" state of toggle buttons.
`Element.ariaReadOnly`
    
A string reflecting the `aria-readonly` attribute, which indicates that the element is not editable, but is otherwise operable.
`Element.ariaRelevant` Non-standard
    
A string reflecting the `aria-relevant` attribute, which indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. This is used to describe what changes in an `aria-live` region are relevant and should be announced.
`Element.ariaRequired`
    
A string reflecting the `aria-required` attribute, which indicates that user input is required on the element before a form may be submitted.
`Element.ariaRoleDescription`
    
A string reflecting the `aria-roledescription` attribute, which defines a human-readable, author-localized description for the role of an element.
`Element.ariaRowCount`
    
A string reflecting the `aria-rowcount` attribute, which defines the total number of rows in a table, grid, or treegrid.
`Element.ariaRowIndex`
    
A string reflecting the `aria-rowindex` attribute, which defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
`Element.ariaRowIndexText`
    
A string reflecting the `aria-rowindextext` attribute, which defines a human readable text alternative of aria-rowindex.
`Element.ariaRowSpan`
    
A string reflecting the `aria-rowspan` attribute, which defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
`Element.ariaSelected`
    
A string reflecting the `aria-selected` attribute, which indicates the current "selected" state of elements that have a selected state.
`Element.ariaSetSize`
    
A string reflecting the `aria-setsize` attribute, which defines the number of items in the current set of listitems or treeitems.
`Element.ariaSort`
    
A string reflecting the `aria-sort` attribute, which indicates if items in a table or grid are sorted in ascending or descending order.
`Element.ariaValueMax`
    
A string reflecting the `aria-valueMax` attribute, which defines the maximum allowed value for a range widget.
`Element.ariaValueMin`
    
A string reflecting the `aria-valueMin` attribute, which defines the minimum allowed value for a range widget.
`Element.ariaValueNow`
    
A string reflecting the `aria-valueNow` attribute, which defines the current value for a range widget.
`Element.ariaValueText`
    
A string reflecting the `aria-valuetext` attribute, which defines the human-readable text alternative of `aria-valuenow` for a range widget.
`Element.role`
    
A string reflecting the explicitly set `role` attribute, which provides the semantic role of the element.
#### Instance properties reflected from ARIA element references
The properties reflect the elements specified by `id` reference in the corresponding attributes, but with some caveats. See Reflected element references in the Reflected attributes guide for more information.
`Element.ariaActiveDescendantElement`
    
An element that represents the current active element when focus is on a `composite` widget, `combobox`, `textbox`, `group`, or `application`. Reflects the `aria-activedescendant` attribute.
`Element.ariaControlsElements`
    
An array of elements whose contents or presence are controlled by the element it is applied to. Reflects the `aria-controls` attribute.
`Element.ariaDescribedByElements`
    
An array of elements that contain the accessible description for the element it is applied to. Reflects the `aria-describedby` attribute.
`Element.ariaDetailsElements`
    
An array of elements that provide accessible details for the element it is applied to. Reflects the `aria-details` attribute.
`Element.ariaErrorMessageElements`
    
An array of elements that provide an error message for the element it is applied to. Reflects the `aria-errormessage` attribute.
`Element.ariaFlowToElements`
    
An array of elements that identify the next element (or elements) in an alternate reading order of content, overriding the general default reading order at the user's discretion. Reflects the `aria-flowto` attribute.
`Element.ariaLabelledByElements`
    
An array of elements that provide the accessible name for the element it is applied to. Reflects the `aria-labelledby` attribute.
`Element.ariaOwnsElements`
    
An array of elements owned by the element this is applied to. This is used to define a visual, functional, or contextual relationship between a parent and its child elements when the DOM hierarchy cannot be used to represent the relationship. Reflects the `aria-owns` attribute.
## Instance methods
`Element` inherits methods from its parents `Node`, and its own parent, `EventTarget`.
`Element.after()`
    
Inserts a set of `Node` objects or strings in the children list of the `Element`'s parent, just after the `Element`.
`Element.animate()`
    
A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
`Element.append()`
    
Inserts a set of `Node` objects or strings after the last child of the element.
`Element.attachShadow()`
    
Attaches a shadow DOM tree to the specified element and returns a reference to its `ShadowRoot`.
`Element.before()`
    
Inserts a set of `Node` objects or strings in the children list of the `Element`'s parent, just before the `Element`.
`Element.checkVisibility()`
    
Returns whether an element is expected to be visible or not based on configurable checks.
`Element.closest()`
    
Returns the `Element` which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.
`Element.computedStyleMap()`
    
Returns a `StylePropertyMapReadOnly` interface which provides a read-only representation of a CSS declaration block that is an alternative to `CSSStyleDeclaration`.
`Element.getAnimations()`
    
Returns an array of Animation objects currently active on the element.
`Element.getAttribute()`
    
Retrieves the value of the named attribute from the current node and returns it as a string.
`Element.getAttributeNames()`
    
Returns an array of attribute names from the current element.
`Element.getAttributeNode()`
    
Retrieves the node representation of the named attribute from the current node and returns it as an `Attr`.
`Element.getAttributeNodeNS()`
    
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an `Attr`.
`Element.getAttributeNS()`
    
Retrieves the value of the attribute with the specified namespace and name from the current node and returns it as a string.
`Element.getBoundingClientRect()`
    
Returns the size of an element and its position relative to the viewport.
`Element.getBoxQuads()` Experimental
    
Returns a list of `DOMQuad` objects representing the CSS fragments of the node.
`Element.getClientRects()`
    
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
`Element.getElementsByClassName()`
    
Returns a live `HTMLCollection` that contains all descendants of the current element that possess the list of classes given in the parameter.
`Element.getElementsByTagName()`
    
Returns a live `HTMLCollection` containing all descendant elements, of a particular tag name, from the current element.
`Element.getElementsByTagNameNS()`
    
Returns a live `HTMLCollection` containing all descendant elements, of a particular tag name and namespace, from the current element.
`Element.getHTML()`
    
Returns the DOM content of the element as an HTML string, optionally including any shadow DOM.
`Element.hasAttribute()`
    
Returns a boolean value indicating if the element has the specified attribute or not.
`Element.hasAttributeNS()`
    
Returns a boolean value indicating if the element has the specified attribute, in the specified namespace, or not.
`Element.hasAttributes()`
    
Returns a boolean value indicating if the element has one or more HTML attributes present.
`Element.hasPointerCapture()`
    
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
`Element.insertAdjacentElement()`
    
Inserts a given element node at a given position relative to the element it is invoked upon.
`Element.insertAdjacentHTML()`
    
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
`Element.insertAdjacentText()`
    
Inserts a given text node at a given position relative to the element it is invoked upon.
`Element.matches()`
    
Returns a boolean value indicating whether or not the element would be selected by the specified selector string.
`Element.moveBefore()` Experimental
    
Moves a given `Node` inside the invoking node as a direct child, before a given reference node, without removing and then inserting the node.
`Element.prepend()`
    
Inserts a set of `Node` objects or strings before the first child of the element.
`Element.querySelector()`
    
Returns the first `Node` which matches the specified selector string relative to the element.
`Element.querySelectorAll()`
    
Returns a `NodeList` of nodes which match the specified selector string relative to the element.
`Element.releasePointerCapture()`
    
Releases (stops) pointer capture that was previously set for a specific `PointerEvent`.
`Element.remove()`
    
Removes the element from the children list of its parent.
`Element.removeAttribute()`
    
Removes the named attribute from the current node.
`Element.removeAttributeNode()`
    
Removes the node representation of the named attribute from the current node.
`Element.removeAttributeNS()`
    
Removes the attribute with the specified name and namespace, from the current node.
`Element.replaceChildren()`
    
Replaces the existing children of a `Node` with a specified new set of children.
`Element.replaceWith()`
    
Replaces the element in the children list of its parent with a set of `Node` objects or strings.
`Element.requestFullscreen()`
    
Asynchronously asks the browser to make the element fullscreen.
`Element.requestPointerLock()`
    
Allows to asynchronously ask for the pointer to be locked on the given element.
`Element.scroll()`
    
Scrolls to a particular set of coordinates inside a given element.
`Element.scrollBy()`
    
Scrolls an element by the given amount.
`Element.scrollIntoView()`
    
Scrolls the page until the element gets into the view.
`Element.scrollIntoViewIfNeeded()` Non-standard
    
Scrolls the current element into the visible area of the browser window if it's not already within the visible area of the browser window. Use the standard `Element.scrollIntoView()` instead.
`Element.scrollTo()`
    
Scrolls to a particular set of coordinates inside a given element.
`Element.setAttribute()`
    
Sets the value of a named attribute of the current node.
`Element.setAttributeNode()`
    
Sets the node representation of the named attribute from the current node.
`Element.setAttributeNodeNS()`
    
Sets the node representation of the attribute with the specified name and namespace, from the current node.
`Element.setAttributeNS()`
    
Sets the value of the attribute with the specified name and namespace, from the current node.
`Element.setCapture()` Non-standard Deprecated
    
Sets up mouse event capture, redirecting all mouse events to this element.
`Element.setHTML()` Secure context Experimental
    
Parses and sanitizes a string of HTML into a document fragment, which then replaces the element's original subtree in the DOM.
`Element.setHTMLUnsafe()`
    
Parses a string of HTML into a document fragment, without sanitization, which then replaces the element's original subtree in the DOM. The HTML string may include declarative shadow roots, which would be parsed as template elements if the HTML was set using `Element.innerHTML`.
`Element.setPointerCapture()`
    
Designates a specific element as the capture target of future pointer events.
`Element.toggleAttribute()`
    
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`afterscriptexecute` Non-standard Deprecated
    
Fired when a script has been executed.
`beforeinput`
    
Fired when the value of an input element is about to be modified.
`beforematch`
    
Fires on an element that is in the hidden until found state, when the browser is about to reveal its content because the user has found the content through the "find in page" feature or through fragment navigation.
`beforescriptexecute` Non-standard Deprecated
    
Fired when a script is about to be executed.
`beforexrselect` Experimental
    
Fired before WebXR select events (`select`, `selectstart`, `selectend`) are dispatched.
`contentvisibilityautostatechange`
    
Fires on any element with `content-visibility: auto` set on it when it starts or stops being relevant to the user and skipping its contents.
`input`
    
Fires when an element's value is changed as a direct result of a user action.
`securitypolicyviolation`
    
Fired when a Content Security Policy is violated.
`wheel`
    
Fired when the user rotates a wheel button on a pointing device (typically a mouse).
### Animation events
`animationcancel`
    
Fired when an animation unexpectedly aborts.
`animationend`
    
Fired when an animation has completed normally.
`animationiteration`
    
Fired when an animation iteration has completed.
`animationstart`
    
Fired when an animation starts.
### Clipboard events
`copy`
    
Fired when the user initiates a copy action through the browser's user interface.
`cut`
    
Fired when the user initiates a cut action through the browser's user interface.
`paste`
    
Fired when the user initiates a paste action through the browser's user interface.
### Composition events
`compositionend`
    
Fired when a text composition system such as an input method editor completes or cancels the current composition session.
`compositionstart`
    
Fired when a text composition system such as an input method editor starts a new composition session.
`compositionupdate`
    
Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor.
### Focus events
`blur`
    
Fired when an element has lost focus.
`focus`
    
Fired when an element has gained focus.
`focusin`
    
Fired when an element has gained focus, after `focus`.
`focusout`
    
Fired when an element has lost focus, after `blur`.
### Fullscreen events
`fullscreenchange`
    
Sent to an `Element` when it transitions into or out of fullscreen mode.
`fullscreenerror`
    
Sent to an `Element` if an error occurs while attempting to switch it into or out of fullscreen mode.
### Keyboard events
`keydown`
    
Fired when a key is pressed.
`keypress` Deprecated
    
Fired when a key that produces a character value is pressed down.
`keyup`
    
Fired when a key is released.
### Mouse events
`auxclick`
    
Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.
`click`
    
Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.
`contextmenu`
    
Fired when the user attempts to open a context menu.
`dblclick`
    
Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.
`DOMActivate` Deprecated
    
Occurs when an element is activated, for instance, through a mouse click or a keypress.
`DOMMouseScroll` Deprecated Non-standard
    
Occurs when mouse wheel or similar device is operated and the accumulated scroll amount is over 1 line or 1 page since last event.
`mousedown`
    
Fired when a pointing device button is pressed on an element.
`mouseenter`
    
Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
`mouseleave`
    
Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.
`mousemove`
    
Fired when a pointing device (usually a mouse) is moved while over an element.
`mouseout`
    
Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.
`mouseover`
    
Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.
`mouseup`
    
Fired when a pointing device button is released on an element.
`mousewheel` Deprecated Non-standard
    
Fired when a mouse wheel or similar device is operated.
`MozMousePixelScroll` Deprecated Non-standard
    
Fired when a mouse wheel or similar device is operated.
`webkitmouseforcechanged` Non-standard
    
Fired each time the amount of pressure changes on the trackpad touch screen.
`webkitmouseforcedown` Non-standard
    
Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".
`webkitmouseforcewillbegin` Non-standard
    
Fired before the `mousedown` event.
`webkitmouseforceup` Non-standard
    
Fired after the `webkitmouseforcedown` event as soon as the pressure has been reduced sufficiently to end the "force click".
### Pointer events
`gotpointercapture`
    
Fired when an element captures a pointer using `setPointerCapture()`.
`lostpointercapture`
    
Fired when a captured pointer is released.
`pointercancel`
    
Fired when a pointer event is canceled.
`pointerdown`
    
Fired when a pointer becomes active.
`pointerenter`
    
Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.
`pointerleave`
    
Fired when a pointer is moved out of the hit test boundaries of an element.
`pointermove`
    
Fired when a pointer changes coordinates.
`pointerout`
    
Fired when a pointer is moved out of the hit test boundaries of an element (among other reasons).
`pointerover`
    
Fired when a pointer is moved into an element's hit test boundaries.
`pointerrawupdate`
    
Fired when a pointer changes any properties that don't fire `pointerdown` or `pointerup` events.
`pointerup`
    
Fired when a pointer is no longer active.
### Scroll events
`scroll`
    
Fired when the document view or an element has been scrolled.
`scrollend`
    
Fires when the document view has completed scrolling.
`scrollsnapchange` Experimental
    
Fired on the scroll container at the end of a scrolling operation when a new scroll snap target has been selected.
`scrollsnapchanging` Experimental
    
Fired on the scroll container when the browser determines a new scroll snap target is pending, i.e., it will be selected when the current scroll gesture ends.
### Touch events
`gesturechange` Non-standard
    
Fired when digits move during a touch gesture.
`gestureend` Non-standard
    
Fired when there are no longer multiple fingers contacting the touch surface, thus ending the gesture.
`gesturestart` Non-standard
    
Fired when multiple fingers contact the touch surface, thus starting a new gesture.
`touchcancel`
    
Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).
`touchend`
    
Fired when one or more touch points are removed from the touch surface.
`touchmove`
    
Fired when one or more touch points are moved along the touch surface.
`touchstart`
    
Fired when one or more touch points are placed on the touch surface.
### Transition events
`transitioncancel`
    
An `Event` fired when a CSS transition has been cancelled.
`transitionend`
    
An `Event` fired when a CSS transition has finished playing.
`transitionrun`
    
An `Event` fired when a CSS transition is created (i.e., when it is added to a set of running transitions), though not necessarily started.
`transitionstart`
    
An `Event` fired when a CSS transition has started transitioning.
# JS Self-Profiling API
The JS Self-Profiling API enables a website to run a sampling profiler, to understand where it is spending JavaScript execution time.
## Concepts and usage
To start a profile, a website creates a `Profiler` instance. As soon as the instance is created, it starts sampling the JavaScript execution context.
To stop collecting samples and retrieve the profile, the website calls `Profiler.stop()`. This returns a `Promise` which resolves to an object containing the profile data.
For example, the following function creates a profiler, then calls a function `genPrimes()`, then stops the profiler and retrieves the profile data:
    
    async function profileGeneratePrimes() {
      const profiler = new Profiler({ sampleInterval: 10, maxBufferSize: 10000 });
    
      genPrimes();
    
      const trace = await profiler.stop();
      console.log(trace);
    }
    
The profiler is a sampling profiler: this means that it periodically records (or samples) the current state of the JavaScript call stack. The profile consists of the collection of these samples. This enables you to understand where, statistically, the program is spending most of its time.
To understand exactly what a profile contains and how it is formatted, see Profile anatomy and format.
### Profiling best practices
Collecting and processing profile data incurs a performance overhead of its own, and developers should be careful to manage this. Practices to minimize performance overhead include:
  * Use the `maxBufferSize` and `sampleInterval` options to control how many samples to take and how often to sample.
  * Sample for short periods in a sampled manner: for example, trace for 5 seconds out of every 60 seconds.
  * Process the samples in a web worker to avoid impacting performance on the main thread.
  * Aggregate samples on the client before sending them to a telemetry endpoint.


If the JavaScript in your site is minified, you will need to transform the profile data based on a source map, either on the client or on the server, before the data will be usable.
## Interfaces
`Profiler` Experimental
    
The `Profiler` interface is used to create profiles.
## Security requirements
To use this API, the document must be served with a document policy that includes the `"js-profiling"` configuration point.
# PerformancePaintTiming
The `PerformancePaintTiming` interface provides timing information about "paint" (also called "render") operations during web page construction. "Paint" refers to conversion of the render tree to on-screen pixels.
There are two key paint moments this API provides:
  * First Paint (FP): Time when anything is rendered. Note that the marking of the first paint is optional, not all user agents report it.
  * First Contentful Paint (FCP): Time when the first bit of DOM text or image content is rendered.


A third key paint moment is provided by the `LargestContentfulPaint` API:
  * Largest Contentful Paint (LCP): Render time of the largest image or text block visible within the viewport, recorded from when the page first begins to load.


The data this API provides helps you minimize the time that users have to wait before they can see the site's content start to appear. Decreasing the time until these key paint moments make sites feel more responsive, performant, and engaging for your users.
Like other Performance APIs, this API extends `PerformanceEntry`.
PerformanceEntry  PerformancePaintTiming 
## Instance properties
This interface has no properties but it extends the following `PerformanceEntry` properties by qualifying and constraining the properties as follows:
`PerformanceEntry.entryType`
    
Returns `"paint"`.
`PerformanceEntry.name`
    
Returns either `"first-paint"` or `"first-contentful-paint"`.
`PerformanceEntry.startTime`
    
Returns the `timestamp` when the paint occurred.
`PerformanceEntry.duration`
    
Returns 0.
## Instance methods
This interface has no methods.
## Examples
>
### Getting paint timings
Example using a `PerformanceObserver`, which notifies of new `paint` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
    
    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        console.log(
          `The time to ${entry.name} was ${entry.startTime} milliseconds.`,
        );
        // Logs "The time to first-paint was 386.7999999523163 milliseconds."
        // Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
      });
    });
    
    observer.observe({ type: "paint", buffered: true });
    
Example using `Performance.getEntriesByType()`, which only shows `paint` performance entries present in the browser's performance timeline at the time you call this method:
    
    const entries = performance.getEntriesByType("paint");
    entries.forEach((entry) => {
      console.log(`The time to ${entry.name} was ${entry.startTime} milliseconds.`);
      // Logs "The time to first-paint was 386.7999999523163 milliseconds."
      // Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
    });
    
### See also
  * `LargestContentfulPaint`


# Text
The `Text` interface represents a text `node` in a DOM tree.
EventTarget  Node  CharacterData  Text 
To understand what a text node is, consider the following document:
    
    <html lang="en" class="e">
      <head>
        <title>Aliens?</title>
      </head>
      <body>
        Why yes.
      </body>
    </html>
    
In that document, there are five text nodes, with the following contents:
  * `"\n "` (after the `<head>` start tag, a newline followed by four spaces)
  * `"Aliens?"` (the contents of the `title` element)
  * `"\n "` (after the `</head>` end tag, a newline followed by two spaces)
  * `"\n "` (after the `<body>` start tag, a newline followed by two spaces)
  * `"\n Why yes.\n \n\n"` (the contents of the `body` element)


Each of those text nodes is an object that has the properties and methods documented in this article.
## Constructor
`Text()`
    
Returns a new `Text` node with the parameter as its textual content.
## Instance properties
Inherits properties from its parents, `CharacterData`, `Node`, and `EventTarget`.
`Text.assignedSlot` Read only
    
Returns a `HTMLSlotElement` representing the `<slot>` the node is inserted in.
`Text.wholeText` Read only
    
Returns a string containing the text of all `Text` nodes logically adjacent to this `Node`, concatenated in document order.
## Instance methods
Inherits methods from its parent, `CharacterData`, `Node`, and `EventTarget`.
`Text.splitText`
    
Breaks the node into two nodes at a specified offset.
  * The DOM API


# IDBRequest
Note: This feature is available in Web Workers.
The `IDBRequest` interface of the IndexedDB API provides access to results of asynchronous requests to databases and database objects using event handler attributes. Each reading and writing operation on a database is done using a request.
The request object does not initially contain any information about the result of the operation, but once information becomes available, an event is fired on the request, and the information becomes available through the properties of the `IDBRequest` instance.
All asynchronous operations immediately return an `IDBRequest` instance. Each request has a `readyState` that is set to the `'pending'` state; this changes to `'done'` when the request is completed or fails. When the state is set to `done`, every request returns a `result` and an `error`, and an event is fired on the request. When the state is still `pending`, any attempt to access the `result` or `error` raises an `InvalidStateError` exception.
In plain words, all asynchronous methods return a request object. If the request has been completed successfully, the result is made available through the `result` property and an event indicating success is fired at the request (`success`). If an error occurs while performing the operation, the exception is made available through the `error` property and an error event is fired (`error`).
The interface `IDBOpenDBRequest` is derived from `IDBRequest`.
EventTarget  IDBRequest 
## Instance properties
Also inherits properties from `EventTarget`.
`IDBRequest.error` Read only
    
Returns a `DOMException` in the event of an unsuccessful request, indicating what went wrong.
`IDBRequest.result` Read only
    
Returns the result of the request. If the request is not completed, the result is not available and an `InvalidStateError` exception is thrown.
`IDBRequest.source` Read only
    
The source of the request, such as an `IDBIndex` or an `IDBObjectStore`. If no source exists (such as when calling `IDBFactory.open`), it returns null.
`IDBRequest.readyState` Read only
    
The state of the request. Every request starts in the `pending` state. The state changes to `done` when the request completes successfully or when an error occurs.
`IDBRequest.transaction` Read only
    
The transaction for the request. This property can be null for certain requests, for example those returned from `IDBFactory.open` unless an upgrade is needed. (You're just connecting to a database, so there is no transaction to return).
## Instance methods
No methods, but inherits methods from `EventTarget`.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`error`
    
Fired when an error caused a request to fail.
`success`
    
Fired when an `IDBRequest` succeeds.
## Example
In the following code snippet, we open a database asynchronously and make a request; `onerror` and `onsuccess` functions are included to handle the success and error cases. For a full working example, see our To-do Notifications app (view example live.)
    
    let db;
    
    // Let us open our database
    const DBOpenRequest = window.indexedDB.open("toDoList", 4);
    
    // these two event handlers act on the database being
    // opened successfully, or not
    DBOpenRequest.onerror = (event) => {
      note.appendChild(document.createElement("li")).textContent =
        "Error loading database.";
    };
    
    DBOpenRequest.onsuccess = (event) => {
      note.appendChild(document.createElement("li")).textContent =
        "Database initialized.";
    
      // store the result of opening the database.
      db = DBOpenRequest.result;
    };
    
  * Using IndexedDB
  * Starting transactions: `IDBDatabase`
  * Using transactions: `IDBTransaction`
  * Setting a range of keys: `IDBKeyRange`
  * Retrieving and making changes to your data: `IDBObjectStore`
  * Using cursors: `IDBCursor`
  * Reference example: To-do Notifications (View the example live).


# BluetoothUUID
The `BluetoothUUID` interface of the Web Bluetooth API provides a way to look up Universally Unique Identifier (UUID) values by name in the registry maintained by the Bluetooth SIG.
## Description
A UUID string is a 128-bit UUID, for example `00001818-0000-1000-8000-00805f9b34fb`. The Bluetooth registry contains lists of descriptors, services, and characteristics identified by these UUIDs in addition to a 16- or 32- bit alias, and a name.
The `BluetoothUUID` interface provides methods to retrieve these 128-bit UUIDs.
## Static methods
`BluetoothUUID.canonicalUUID()` Experimental
    
Returns the 128-bit UUID when passed the 16- or 32-bit UUID alias.
`BluetoothUUID.getCharacteristic()` Experimental
    
Returns the 128-bit UUID representing a registered characteristic when passed a name or the 16- or 32-bit UUID alias.
`BluetoothUUID.getDescriptor()` Experimental
    
Returns a UUID representing a registered descriptor when passed a name or the 16- or 32-bit UUID alias.
`BluetoothUUID.getService()` Experimental
    
Returns a UUID representing a registered service when passed a name or the 16- or 32-bit UUID alias.
## Examples
In the following example the UUID representing the service named `device_information` is returned and printed to the console.
    
    let result = BluetoothUUID.getService("device_information");
    console.log(result); // "0000180a-0000-1000-8000-00805f9b34fb"
    
# RTCRtpTransceiver
The WebRTC interface `RTCRtpTransceiver` describes a permanent pairing of an `RTCRtpSender` and an `RTCRtpReceiver`, along with some shared state.
Each SDP media section describes one bidirectional SRTP ("Secure Real Time Protocol") stream (excepting the media section for `RTCDataChannel`, if present). This pairing of send and receive SRTP streams is significant for some applications, so `RTCRtpTransceiver` is used to represent this pairing, along with other important state from the media section. Each non-disabled SRTP media section is always represented by exactly one transceiver.
A transceiver is uniquely identified using its `mid` property, which is the same as the media ID (`mid`) of its corresponding m-line. An `RTCRtpTransceiver` is associated with an m-line if its `mid` is non-null; otherwise it's considered disassociated.
## Instance properties
`currentDirection` Read only
    
A read-only string which indicates the transceiver's current negotiated directionality, or `null` if the transceiver has never participated in an exchange of offers and answers. To change the transceiver's directionality, set the value of the `direction` property.
`direction`
    
A string which is used to set the transceiver's desired direction.
`mid` Read only
    
The media ID of the m-line associated with this transceiver. This association is established, when possible, whenever either a local or remote description is applied. This field is `null` if neither a local or remote description has been applied, or if its associated m-line is rejected by either a remote offer or any answer.
`receiver` Read only
    
The `RTCRtpReceiver` object that handles receiving and decoding incoming media.
`sender` Read only
    
The `RTCRtpSender` object responsible for encoding and sending data to the remote peer.
`stopped` Deprecated
    
Indicates whether or not sending and receiving using the paired `RTCRtpSender` and `RTCRtpReceiver` has been permanently disabled, either due to SDP offer/answer, or due to a call to `stop()`.
## Instance methods
`setCodecPreferences()`
    
Configures the transceiver's preferred list of codecs, overriding user agent settings.
`stop()`
    
Permanently stops the `RTCRtpTransceiver`. The associated sender stops sending data, and the associated receiver likewise stops receiving and decoding incoming data.
  * WebRTC API
  * Introduction to the Real-time Transport Protocol (RTP)
  * `RTCPeerConnection.addTrack()` and `RTCPeerConnection.addTransceiver()` both create transceivers
  * `RTCRtpReceiver` and `RTCRtpSender`


# SVGStopElement
The `SVGStopElement` interface corresponds to the `<stop>` element.
EventTarget  Node  Element  SVGElement  SVGStopElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGStopElement.offset` Read only
    
An `SVGAnimatedNumber` corresponding to the `offset` of the given element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.
# HTMLParagraphElement
The `HTMLParagraphElement` interface provides special properties (beyond those of the regular `HTMLElement` object interface it inherits) for manipulating `<p>` elements.
EventTarget  Node  Element  HTMLElement  HTMLParagraphElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLParagraphElement.align` Deprecated
    
A string representing an enumerated property indicating alignment of the element's contents with respect to the surrounding context. The possible values are `"left"`, `"right"`, `"justify"`, and `"center"`.
## Instance methods
No specific methods, inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<p>`.


# Node
The DOM `Node` interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types be used similarly and often interchangeably. As an abstract class, there is no such thing as a plain `Node` object. All objects that implement `Node` functionality are based on one of its subclasses. Most notable are `Document`, `Element`, and `DocumentFragment`.
In addition, every kind of DOM node is represented by an interface based on `Node`. These include `Attr`, `CharacterData` (which `Text`, `Comment`, `CDATASection` and `ProcessingInstruction` are all based on), and `DocumentType`.
In some cases, a particular feature of the base `Node` interface may not apply to one of its child interfaces; in that case, the inheriting node may return `null` or throw an exception, depending on circumstances. For example, attempting to add children to a node type that cannot have children will throw an exception.
EventTarget  Node 
## Instance properties
In addition to the properties below, `Node` inherits properties from its parent, `EventTarget`.
`Node.baseURI` Read only
    
Returns a string representing the base URL of the document containing the `Node`.
`Node.childNodes` Read only
    
Returns a live `NodeList` containing all the children of this node (including elements, text and comments). `NodeList` being live means that if the children of the `Node` change, the `NodeList` object is automatically updated.
`Node.firstChild` Read only
    
Returns a `Node` representing the first direct child node of the node, or `null` if the node has no child.
`Node.isConnected` Read only
    
A boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g., the `Document` object in the case of the normal DOM, or the `ShadowRoot` in the case of a shadow DOM.
`Node.lastChild` Read only
    
Returns a `Node` representing the last direct child node of the node, or `null` if the node has no child.
`Node.nextSibling` Read only
    
Returns a `Node` representing the next node in the tree, or `null` if there isn't such node.
`Node.nodeName` Read only
    
Returns a string containing the name of the `Node`. The structure of the name will differ with the node type. E.g. An `HTMLElement` will contain the name of the corresponding tag, like `'AUDIO'` for an `HTMLAudioElement`, a `Text` node will have the `'#text'` string, or a `Document` node will have the `'#document'` string.
`Node.nodeType` Read only
    
Returns an `unsigned short` representing the type of the node. Possible values are:
Name Value  
`ELEMENT_NODE` `1`  
`ATTRIBUTE_NODE` `2`  
`TEXT_NODE` `3`  
`CDATA_SECTION_NODE` `4`  
`PROCESSING_INSTRUCTION_NODE` `7`  
`COMMENT_NODE` `8`  
`DOCUMENT_NODE` `9`  
`DOCUMENT_TYPE_NODE` `10`  
`DOCUMENT_FRAGMENT_NODE` `11`  
`Node.nodeValue`
    
Returns / Sets the value of the current node.
`Node.ownerDocument` Read only
    
Returns the `Document` that this node belongs to. If the node is itself a document, returns `null`.
`Node.parentNode` Read only
    
Returns a `Node` that is the parent of this node. If there is no such node — for example, if this node is the top of the tree, or if it doesn't participate in a tree — this property returns `null`.
`Node.parentElement` Read only
    
Returns an `Element` that is the parent of this node. If the node has no parent, or if that parent is not an `Element`, this property returns `null`.
`Node.previousSibling` Read only
    
Returns a `Node` representing the previous node in the tree, or `null` if there isn't such node.
`Node.textContent`
    
Returns / Sets the textual content of an element and all its descendants.
## Instance methods
In addition to the methods below, `Node` inherits methods from its parent, `EventTarget`.
`Node.appendChild()`
    
Adds the specified `childNode` argument as the last child to the current node. If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
`Node.cloneNode()`
    
Clone a `Node`, and optionally, all of its contents. By default, it clones the content of the node.
`Node.compareDocumentPosition()`
    
Compares the position of the current node against another node in any other document.
`Node.contains()`
    
Returns `true` or `false` value indicating whether or not a node is a descendant of the calling node.
`Node.getRootNode()`
    
Returns the context object's root which optionally includes the shadow root if it is available.
`Node.hasChildNodes()`
    
Returns a boolean value indicating whether or not the element has any child nodes.
`Node.insertBefore()`
    
Inserts a `Node` before the reference node as a child of a specified parent node.
`Node.isDefaultNamespace()`
    
Accepts a namespace URI as an argument and returns a boolean value with a value of `true` if the namespace is the default namespace on the given node or `false` if not.
`Node.isEqualNode()`
    
Returns a boolean value which indicates whether or not two nodes are of the same type and all their defining data points match.
`Node.isSameNode()`
    
Returns a boolean value indicating whether or not the two nodes are the same (that is, they reference the same object).
`Node.lookupPrefix()`
    
Returns a string containing the prefix for a given namespace URI, if present, and `null` if not. When multiple prefixes are possible, the result is implementation-dependent.
`Node.lookupNamespaceURI()`
    
Accepts a prefix and returns the namespace URI associated with it on the given node if found (and `null` if not). Supplying `null` for the prefix will return the default namespace.
`Node.normalize()`
    
Clean up all the text nodes under this element (merge adjacent, remove empty).
`Node.removeChild()`
    
Removes a child node from the current element, which must be a child of the current node.
`Node.replaceChild()`
    
Replaces one child `Node` of the current one with the second one given in parameter.
## Events
`selectstart`
    
Fires when the user starts a new selection in this node.
## Examples
>
### Remove all children nested within a node
This function remove each first child of an element, until there are none left.
    
    function removeAllChildren(element) {
      while (element.firstChild) {
        element.removeChild(element.firstChild);
      }
    }
    
Using this function is a single call. Here we empty the body of the document:
    
    removeAllChildren(document.body);
    
An alternative could be to set the textContent to the empty string: `document.body.textContent = ""`.
### Recurse through child nodes
The following function recursively calls a callback function for each node contained by a root node (including the root itself):
    
    function eachNode(rootNode, callback) {
      if (!callback) {
        const nodes = [];
        eachNode(rootNode, (node) => {
          nodes.push(node);
        });
        return nodes;
      }
    
      if (callback(rootNode) === false) {
        return false;
      }
    
      if (rootNode.hasChildNodes()) {
        for (const node of rootNode.childNodes) {
          if (eachNode(node, callback) === false) {
            return;
          }
        }
      }
    }
    
The function recursively calls a function for each descendant node of `rootNode` (including the root itself).
If `callback` is omitted, the function returns an `Array` instead, which contains `rootNode` and all nodes contained within.
If `callback` is provided, and it returns `false` when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node which contains a certain string).
The function has two parameters:
`rootNode`
    
The `Node` object whose descendants will be recursed through.
`callback` Optional
    
An optional callback function that receives a `Node` as its only argument. If omitted, `eachNode` returns an `Array` of every node contained within `rootNode` (including the root itself).
The following demonstrates a real-world use of the `eachNode()` function: searching for text on a web-page.
We use a wrapper function named `grep` to do the searching:
    
    function grep(parentNode, pattern) {
      let matches = [];
      let endScan = false;
    
      eachNode(parentNode, (node) => {
        if (endScan) {
          return false;
        }
    
        // Ignore anything which isn't a text node
        if (node.nodeType !== Node.TEXT_NODE) {
          return;
        }
    
        if (typeof pattern === "string" && node.textContent.includes(pattern)) {
          matches.push(node);
        } else if (pattern.test(node.textContent)) {
          if (!pattern.global) {
            endScan = true;
            matches = node;
          } else {
            matches.push(node);
          }
        }
      });
    
      return matches;
    }
    
# WebTransportReceiveStream
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `WebTransportReceiveStream` interface of the WebTransport API is a `ReadableStream` that can be used to read from an incoming unidirectional or bidirectional `WebTransport` stream.
The stream is a readable byte stream of `Uint8Array`, and can be consumed using either a BYOB reader (`ReadableStreamBYOBReader`) or the default reader (`ReadableStreamDefaultReader`).
Objects of this type are not constructed directly. Instead they are obtained using the `WebTransport.incomingUnidirectionalStream` property.
`WebTransportReceiveStream` is a transferable object.
ReadableStream  WebTransportReceiveStream 
## Instance properties
Inherits properties from its parent interface, `ReadableStream`.
## Instance methods
Also inherits properties from its parent interface, `ReadableStream`.
`WebTransportReceiveStream.getStats()` Experimental
    
Returns a `Promise` that resolves with statistics related to this stream.
## Examples
See `WebTransport.incomingUnidirectionalStreams` for an example of how to get a `ReadableStream` of `WebTransportReceiveStream` objects.
  * Using WebTransport
  * Streams API
  * WebTransport over HTTP/3


# IntegrityViolationReportBody
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `IntegrityViolationReportBody` dictionary is an extension of the Reporting API that represents the body of an Integrity Policy violation report.
Integrity violation reports can be reported to reporting server endpoints or via a `ReportingObserver`. They have a `type` of `"integrity-violation"`, a `url` indicating the document that contains the violation, and a `body` property that is an object matching this dictionary.
## Instance properties
`blockedURL` Read only
    
A string representing the URL of the resource blocked by an enforced integrity policy (or just reported for a reportOnly policy).
`documentURL` Read only
    
A string representing the URL of the document that is attempting to load the resource.
`destination` Read only
    
A string indicating the `Request.destination` of the resource that was blocked. This can currently only be `"script"`.
`reportOnly` Read only
    
A boolean: `false` if the policy was enforced, and `true` if the violation was only reported.
## Description
Integrity Policy violations are reported when a document attempts to load a resource that does not meet the Subresource Integrity guarantees of a policy set using either the `Integrity-Policy` or `Integrity-Policy-Report-Only` HTTP headers.
Specifically, a report is sent when a document attempts to load a `<script>` resource (or other request destination listed in the policy) that does not have valid integrity metadata, or to make a request in no-cors mode.
Violation reports may be obtained in a violating document using a `ReportingObserver` callback (defined in the `ReportingObserver()` constructor), filtering on report objects that have a `type` of `"integrity-violation"`.
Violation reports may also be sent as JSON objects in `POST` requests to the `endpoints` specified in the `Integrity-Policy` and `Integrity-Policy-Report-Only` headers. The JSON report objects are a serialization of the reports returned in the `ReportingObserver`, and therefore also have a `type` of `"integrity-violation"`, and a `body` property that is a serialization of this object. Note that endpoint values set in the policy must map to identifiers set using the `Reporting-Endpoints` header.
## Examples
>
### Reporting using the API
This example shows how you can obtain Integrity Policy violation reports using a `ReportingObserver`.
First we set a page's integrity policy using the `Integrity-Policy`. The policy below reports and blocks resource loading of any `<script>` element or `HTMLScriptElement` object that does not specify an `integrity` attribute, or when a script resource is requested in no-cors mode. Note that for this example we're only interested in reporting the violations using the API, so we're omitting the reporting endpoints:
    
    Integrity-Policy: blocked-destinations=(script)
    
Next, we'll assume that our page includes the following element to load a script. Because we want to trigger a violation, it omits the `integrity` attribute used to check the script matches our expected version. We could also omit the `cross-origin` attribute so the request is sent in `no-cors` mode.
    
    <script
      src="https://example.com/example-framework.js"
      crossorigin="anonymous"></script>
    
Note: A script that complies with the policy might look like this:
    
    <script
      src="https://example.com/example-framework.js"
      integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
      crossorigin="anonymous"></script>
    
To observe violations within the page, we construct a new `ReportingObserver` object to listen for reports with the type `"integrity-violation"`, passing a callback that will receive and log the reports. This code needs to be loaded before the script that causes the violation, in the same page:
    
    const observer = new ReportingObserver(
      (reports, observer) => {
        reports.forEach((violation) => {
          console.log(violation);
          console.log(JSON.stringify(violation));
        });
      },
      {
        types: ["integrity-violation"],
        buffered: true,
      },
    );
    
    observer.observe();
    
Above, we log each violation report object and a JSON-string version of the object, which might look similar to the object below.
    
    {
      "type": "integrity-violation",
      "url": "https://example.com",
      "body": {
        "documentURL": "https://example.com",
        "blockedURL": "https://example.com/example-framework.js",
        "destination": "script",
        "reportOnly": false
      }
    }
    
### Sending a report to a reporting endpoint
Configuring a web page to send an Integrity Policy violation report to a reporting server endpoint is very similar to the previous example.
The main difference is that we need to specify one or more reporting endpoints where we want the reports to be sent, using the `Reporting-Endpoints` response header, and then reference these in the `endpoints` field when setting the policy.
You can see this below, where we first define two endpoints — `integrity-endpoint` and `backup-integrity-endpoint` — and then reference them in our policy:
    
    Reporting-Endpoints: integrity-endpoint=https://example.com/integrity, backup-integrity-endpoint=https://report-provider.example/integrity
    Integrity-Policy: blocked-destinations=(script), endpoints=(integrity-endpoint, backup-integrity-endpoint)
    
We can trigger a violation by loading an external script from the page that does not meet the subresource integrity guidelines. Just to differ from the previous example, here we send the request in `no-cors` mode:
    
    <script
      src="https://example.com/example-framework.js"
      integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"></script>
    
The violation report will then be sent to the indicated endpoint as a JSON file. As you can see from the example below, the `type` is `"integrity-violation"` and the `body` property is a serialization of this `IntegrityViolationReportBody` object:
The report in this case would look the same as our JSON report in the previous example.
    
    {
      "type": "integrity-violation",
      "url": "https://example.com",
      "body": {
        "documentURL": "https://example.com",
        "blockedURL": "https://example.com/example-framework.js",
        "destination": "script",
        "reportOnly": false
      }
    }
    
  * `ReportingObserver`
  * `Integrity-Policy`
  * `Integrity-Policy-Report-Only`
  * `Reporting-Endpoints`
  * Integrity Policy in Subresource Integrity
  * Reporting API


# Ink
The `Ink` interface of the Ink API provides access to `DelegatedInkTrailPresenter` objects for the application to use to render ink strokes.
## Instance methods
`requestPresenter()` Experimental
    
Returns a `Promise` that fulfills with a `DelegatedInkTrailPresenter` object to handle rendering strokes.
## Example
    
    async function inkInit() {
      const ink = navigator.ink;
      let presenter = await ink.requestPresenter({ presentationArea: canvas });
    
      // …
    }
    
# SVGFEFloodElement
The `SVGFEFloodElement` interface corresponds to the `<feFlood>` element.
EventTarget  Node  Element  SVGElement  SVGFEFloodElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEFloodElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEFloodElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEFloodElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEFloodElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEFloodElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.
  * `<feFlood>`


# MouseEvent
The `MouseEvent` interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include `click`, `dblclick`, `mouseup`, `mousedown`.
`MouseEvent` derives from `UIEvent`, which in turn derives from `Event`. Though the `MouseEvent.initMouseEvent()` method is kept for backward compatibility, creating of a `MouseEvent` object should be done using the `MouseEvent()` constructor.
Several more specific events are based on `MouseEvent`, including `WheelEvent`, `DragEvent`, and `PointerEvent`.
Event  UIEvent  MouseEvent 
## Constructor
`MouseEvent()`
    
Creates a `MouseEvent` object.
## Static properties
`MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN` Non-standard Read only
    
Minimum force necessary for a normal click.
`MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN` Non-standard Read only
    
Minimum force necessary for a force click.
## Instance properties
This interface also inherits properties of its parents, `UIEvent` and `Event`.
`MouseEvent.altKey` Read only
    
Returns `true` if the `alt` key was down when the mouse event was fired.
`MouseEvent.button` Read only
    
The button number that was pressed or released (if applicable) when the mouse event was fired.
`MouseEvent.buttons` Read only
    
The buttons being pressed (if any) when the mouse event was fired.
`MouseEvent.clientX` Read only
    
The X coordinate of the mouse pointer in viewport coordinates.
`MouseEvent.clientY` Read only
    
The Y coordinate of the mouse pointer in viewport coordinates.
`MouseEvent.ctrlKey` Read only
    
Returns `true` if the `control` key was down when the mouse event was fired.
`MouseEvent.layerX` Non-standard Read only
    
Returns the horizontal coordinate of the event relative to the current layer.
`MouseEvent.layerY` Non-standard Read only
    
Returns the vertical coordinate of the event relative to the current layer.
`MouseEvent.metaKey` Read only
    
Returns `true` if the `meta` key was down when the mouse event was fired.
`MouseEvent.movementX` Read only
    
The X coordinate of the mouse pointer relative to the position of the last `mousemove` event.
`MouseEvent.movementY` Read only
    
The Y coordinate of the mouse pointer relative to the position of the last `mousemove` event.
`MouseEvent.offsetX` Read only
    
The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
`MouseEvent.offsetY` Read only
    
The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
`MouseEvent.pageX` Read only
    
The X coordinate of the mouse pointer relative to the whole document.
`MouseEvent.pageY` Read only
    
The Y coordinate of the mouse pointer relative to the whole document.
`MouseEvent.relatedTarget` Read only
    
The secondary target for the event, if there is one.
`MouseEvent.screenX` Read only
    
The X coordinate of the mouse pointer in screen coordinates.
`MouseEvent.screenY` Read only
    
The Y coordinate of the mouse pointer in screen coordinates.
`MouseEvent.shiftKey` Read only
    
Returns `true` if the `shift` key was down when the mouse event was fired.
`MouseEvent.mozInputSource` Non-standard Read only
    
The type of device that generated the event (one of the `MOZ_SOURCE_*` constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).
`MouseEvent.webkitForce` Non-standard Read only
    
The amount of pressure applied when clicking.
`MouseEvent.x` Read only
    
Alias for `MouseEvent.clientX`.
`MouseEvent.y` Read only
    
Alias for `MouseEvent.clientY`.
## Instance methods
This interface also inherits methods of its parents, `UIEvent` and `Event`.
`MouseEvent.getModifierState()`
    
Returns the current state of the specified modifier key. See `KeyboardEvent.getModifierState()` for details.
`MouseEvent.initMouseEvent()` Deprecated
    
Initializes the value of a `MouseEvent` created. If the event has already been dispatched, this method does nothing.
## Example
This example demonstrates simulating a click (programmatically generating a click event) on a checkbox using DOM methods. Event state (canceled or not) is then determined with the return value of method `EventTarget.dispatchEvent()`.
### HTML
    
    <p>
      <label><input type="checkbox" id="checkbox" /> Checked</label>
    </p>
    <p>
      <button id="button">Click me to send a MouseEvent to the checkbox</button>
    </p>
    
### JavaScript
    
    function simulateClick() {
      // Get the element to send a click event
      const cb = document.getElementById("checkbox");
    
      // Create a synthetic click MouseEvent
      let evt = new MouseEvent("click", {
        bubbles: true,
        cancelable: true,
        view: window,
      });
    
      // Send the event to the checkbox element
      cb.dispatchEvent(evt);
    }
    document.getElementById("button").addEventListener("click", simulateClick);
    
### Result
  * Its direct parent, `UIEvent`
  * `PointerEvent`: For advanced pointer events, including multi-touch


# VisibilityStateEntry
The `VisibilityStateEntry` interface provides timings of page visibility state changes, i.e., when a tab changes from the foreground to the background or vice versa.
This can be used to pinpoint visibility changes on the performance timeline, and cross-reference them against other performance entries such as "first-contentful-paint" (see `PerformancePaintTiming`).
There are two key visibility state change times that this API reports on:
  * `visible`: The time when the page becomes visible (i.e., when its tab moves into the foreground).
  * `hidden`: The time when the pages become hidden (i.e., when its tab moves into the background).


The performance timeline will always have a `"visibility-state"` entry with a `startTime` of `0` and a `name` representing the initial page visibility state.
Note: Like other Performance APIs, this API extends `PerformanceEntry`.
PerformanceEntry  VisibilityStateEntry 
## Instance properties
This interface has no properties but it extends the properties of `PerformanceEntry` by qualifying and constraining them as follows:
`PerformanceEntry.entryType` Experimental
    
Returns `"visibility-state"`.
`PerformanceEntry.name` Experimental
    
Returns either `"visible"` or `"hidden"`.
`PerformanceEntry.startTime` Experimental
    
Returns the `timestamp` when the visibility state change occurred.
`PerformanceEntry.duration` Experimental
    
Returns 0.
## Instance methods
This interface has no methods.
## Examples
>
### Basic usage
The following function could be used to log a table of all `"visibility-state"` performance entries to the console:
    
    function getVisibilityStateEntries() {
      const visibilityStateEntries =
        performance.getEntriesByType("visibility-state");
      console.table(visibilityStateEntries);
    }
    
### Correlating visibility state changes with paint timing
The below function gets a reference to all `"visibility-state"` entries and the `"first-contentful-paint"` entry, then uses `Array.some()` to test whether any of the `"hidden"` visibility entries occurred before the first contentful paint:
    
    function wasHiddenBeforeFirstContentfulPaint() {
      const fcpEntry = performance.getEntriesByName("first-contentful-paint")[0];
      const visibilityStateEntries =
        performance.getEntriesByType("visibility-state");
      return visibilityStateEntries.some(
        (e) => e.startTime < fcpEntry.startTime && e.name === "hidden",
      );
    }
    
Page Visibility API
# AudioScheduledSourceNode
The `AudioScheduledSourceNode` interface—part of the Web Audio API—is a parent interface for several types of audio source node interfaces which share the ability to be started and stopped, optionally at specified times. Specifically, this interface defines the `start()` and `stop()` methods, as well as the `ended` event.
Note: You can't create an `AudioScheduledSourceNode` object directly. Instead, use an interface which extends it, such as `AudioBufferSourceNode`, `OscillatorNode` or `ConstantSourceNode`.
Unless stated otherwise, nodes based upon `AudioScheduledSourceNode` output silence when not playing (that is, before `start()` is called and after `stop()` is called). Silence is represented, as always, by a stream of samples with the value zero (0).
EventTarget  AudioNode  AudioScheduledSourceNode 
## Instance properties
Inherits properties from its parent interface, `AudioNode`.
## Instance methods
Inherits methods from its parent interface, `AudioNode`, and adds the following methods:
`start()`
    
Schedules the node to begin playing the constant sound at the specified time. If no time is specified, the node begins playing immediately.
`stop()`
    
Schedules the node to stop playing at the specified time. If no time is specified, the node stops playing at once.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface:
`ended`
    
Fired when the source node has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played.
  * Using the Web Audio API
  * `AudioNode`


# DeprecationReportBody
Note: This feature is available in Web Workers.
The `DeprecationReportBody` interface of the Reporting API represents the body of a deprecation report.
A deprecation report is generated when a deprecated feature (for example a deprecated API method) is used on a document being observed by a `ReportingObserver`. In addition to the support of this API, receiving useful deprecation warnings relies on browser vendors adding these warnings for deprecated features.
## Constructor
An instance of `DeprecationReportBody` is returned as the value of `Report.body` when `Report.Type` is `deprecation`. The interface has no constructor.
## Instance properties
This interface also inherits properties from `ReportBody`.
`DeprecationReportBody.id` Experimental
    
A string representing the feature or API that is deprecated, for example `NavigatorGetUserMedia`. This can be used to group reports by deprecated feature.
`DeprecationReportBody.anticipatedRemoval` Experimental
    
A `Date` object (rendered as a string) representing the date when the feature is expected to be removed from the current browser. If the date is not known, this property will return `null`.
`DeprecationReportBody.message` Experimental
    
A string containing a human-readable description of the deprecation, including information such as what newer feature has superseded it, if any. This typically matches the message a browser will display in its DevTools console when a deprecated feature is used, if one is available.
`DeprecationReportBody.sourceFile` Experimental
    
A string containing the path to the source file where the deprecated feature was used, if known, or `null` otherwise.
`DeprecationReportBody.lineNumber` Experimental
    
A number representing the line in the source file in which the deprecated feature was used, if known, or `null` otherwise.
`DeprecationReportBody.columnNumber` Experimental
    
A number representing the column in the source file in which the deprecated feature was used, if known, or `null` otherwise.
## Instance methods
This interface also inherits methods from `ReportBody`.
`DeprecationReportBody.toJSON()` Experimental
    
A serializer which returns a JSON representation of the `InterventionReportBody` object.
## Examples
In our deprecation_report.html example, we create a simple reporting observer to observe usage of deprecated features on our web page:
    
    const options = {
      types: ["deprecation"],
      buffered: true,
    };
    
    const observer = new ReportingObserver((reports, observer) => {
      reportBtn.onclick = () => displayReports(reports);
    }, options);
    
We then tell it to start observing reports using `ReportingObserver.observe()`; this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor:
    
    observer.observe();
    
Because of the event handler we set up inside the `ReportingObserver()` constructor, we can now click the button to display the report details.
The report details are displayed via the `displayReports()` function, which takes the observer callback's `reports` parameter as its parameter:
    
    function displayReports(reports) {
      const outputElem = document.querySelector(".output");
      const list = document.createElement("ul");
      outputElem.appendChild(list);
    
      reports.forEach((report, i) => {
        const listItem = document.createElement("li");
        const textNode = document.createTextNode(
          `Report ${i + 1}, type: ${report.type}`,
        );
        listItem.appendChild(textNode);
        const innerList = document.createElement("ul");
        listItem.appendChild(innerList);
        list.appendChild(listItem);
    
        for (const [key, value] of Object.entries(report.body)) {
          const innerListItem = document.createElement("li");
          innerListItem.textContent = `${key}: ${value}`;
          innerList.appendChild(innerListItem);
        }
      });
    }
    
The `reports` parameter contains an array of all the reports in the observer's report queue. We loop over each report using a basic `for` loop, then iterate over each entry of in the report's body (a `DeprecationReportBody` instance) using a `for...in` structure, displaying each key/value pair inside a list item.
  * Reporting API
  * The Reporting API


# CSSTransformComponent
The `CSSTransformComponent` interface of the CSS Typed Object Model API is part of the `CSSTransformValue` interface.
## Instance properties
`CSSTransformComponent.is2D` Read only
    
Returns a boolean indicting whether the transform is 2D or 3D.
## Instance methods
`CSSTransformComponent.toMatrix()`
    
Returns a new `DOMMatrix` object.
`CSSTransformComponent.toString()`
    
A string in the form of a CSS transform function.
This will use the value of `is2D` to return either a 2D or 3D transform. For example if the component represents `CSSRotate` and `is2D` is false then the string returned will be in the form of the CSS transformation `rotate3D()` function. If true the string returned will be in the form of the 2-dimensional `rotate3D()` function.
## Examples
To do
# XMLHttpRequest API
Note: This feature is available in Web Workers, except for Service Workers.
The XMLHttpRequest API enables web apps to make HTTP requests to web servers and receive the responses programmatically using JavaScript. This in turn enables a website to update just part of a page with data from the server, rather than having to navigate to a whole new page. This practice is also sometimes known as AJAX.
The Fetch API is the more flexible and powerful replacement for the XMLHttpRequest API. The Fetch API uses promises instead of events to handle asynchronous responses, integrates well with service workers, and supports advanced aspects of HTTP such as CORS. For these reasons, the Fetch API is usually used in modern web apps instead of `XMLHttpRequest`.
## Concepts and usage
The central interface in the XMLHttpRequest API is `XMLHttpRequest`. To make an HTTP request:
  1. Create a new `XMLHttpRequest` instance by calling its constructor.
  2. Initialize it by calling `XMLHttpRequest.open()`. At this point you provide the URL for the request, the HTTP method to use, and optionally, a username and password.
  3. Attach event handlers to get the result of the request. For example, the `load` event is fired when the request has successfully completed, and the `error` event is fired in various error conditions.
  4. Send the request by calling `XMLHttpRequest.send()`.


For an in-depth guide to the XMLHttpRequest API, see Using XMLHttpRequest.
## Interfaces
`FormData`
    
An object representing `<form>` fields and their values, which can be sent to a server using `XMLHttpRequest` or `fetch()`.
`ProgressEvent`
    
A subclass of `Event` which is passed into the `progress`, and which contains information about how much of the request has been completed.
`XMLHttpRequest`
    
Represents a single HTTP request.
`XMLHttpRequestEventTarget`
    
A superclass of both `XMLHttpRequest` and `XMLHttpRequestUpload`, defining the events that are available in both of those interfaces.
`XMLHttpRequestUpload`
    
Represents the upload process for an HTTP upload. Provides events enabling code to track the progress of an upload.
## Examples
>
### Fetching JSON data from the server
In this example we fetch a JSON file from `https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json`, adding event listeners to show the progress of the event.
#### HTML
    
    <div class="controls">
      <button class="xhr" type="button">Click to start XHR</button>
    </div>
    
    <textarea readonly class="event-log"></textarea>
    
#### JavaScript
    
    const xhrButton = document.querySelector(".xhr");
    const log = document.querySelector(".event-log");
    const url =
      "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json";
    
    function handleEvent(e) {
      log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
    }
    
    function addListeners(xhr) {
      xhr.addEventListener("loadstart", handleEvent);
      xhr.addEventListener("load", handleEvent);
      xhr.addEventListener("loadend", handleEvent);
      xhr.addEventListener("progress", handleEvent);
      xhr.addEventListener("error", handleEvent);
      xhr.addEventListener("abort", handleEvent);
    }
    
    xhrButton.addEventListener("click", () => {
      log.textContent = "";
    
      const xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      addListeners(xhr);
      xhr.send();
    });
    
#### Result
  * Fetch API


# CSSSkew
The `CSSSkew` interface of the CSS Typed Object Model API is part of the `CSSTransformValue` interface. It represents the `skew()` value of the individual `transform` property in CSS.
CSSTransformComponent  CSSSkew 
## Constructor
`CSSSkew()`
    
Creates a new `CSSSkew` object.
## Instance properties
`ax`
    
Returns or sets the x-axis value.
`ay`
    
Returns or sets the y-axis value.
## Examples
To Do
# SpeechRecognitionEvent
The `SpeechRecognitionEvent` interface of the Web Speech API represents the event object for the `result` and `nomatch` events, and contains all the data associated with an interim or final speech recognition result.
Event  SpeechRecognitionEvent 
## Instance properties
`SpeechRecognitionEvent` also inherits properties from its parent interface, `Event`.
`SpeechRecognitionEvent.emma` Read only Deprecated Non-standard
    
Returns an Extensible MultiModal Annotation markup language (EMMA) — XML — representation of the result.
`SpeechRecognitionEvent.interpretation` Read only Deprecated Non-standard
    
Returns the semantic meaning of what the user said.
`SpeechRecognitionEvent.resultIndex` Read only
    
Returns the lowest index value result in the `SpeechRecognitionResultList` "array" that has actually changed.
`SpeechRecognitionEvent.results` Read only
    
Returns a `SpeechRecognitionResultList` object representing all the speech recognition results for the current session.
## Examples
This code is excerpted from our Speech color changer example.
    
    recognition.onresult = (event) => {
      // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
      // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
      // It has a getter so it can be accessed like an array
      // The first [0] returns the SpeechRecognitionResult at position 0.
      // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain
      // individual results.
      // These also have getters so they can be accessed like arrays.
      // The second [0] returns the SpeechRecognitionAlternative at position 0.
      // We then return the transcript property of the SpeechRecognitionAlternative object
      const color = event.results[0][0].transcript;
      diagnostic.textContent = `Result received: ${color}.`;
      bg.style.backgroundColor = color;
    };
    
  * Web Speech API


# Storage
The `Storage` interface of the Web Storage API provides access to a particular domain's session or local storage. It allows, for example, the addition, modification, or deletion of stored data items.
To manipulate, for instance, the session storage for a domain, a call to `Window.sessionStorage` is made; whereas for local storage the call is made to `Window.localStorage`.
## Instance properties
`Storage.length` Read only
    
Returns an integer representing the number of data items stored in the `Storage` object.
## Instance methods
`Storage.key()`
    
When passed a number `n`, this method will return the name of the nth key in the storage.
`Storage.getItem()`
    
When passed a key name, will return that key's value.
`Storage.setItem()`
    
When passed a key name and value, will add that key to the storage, or update that key's value if it already exists.
`Storage.removeItem()`
    
When passed a key name, will remove that key from the storage.
`Storage.clear()`
    
When invoked, will empty all keys out of the storage.
## Examples
Here we access a `Storage` object by calling `localStorage`. We first test whether the local storage contains data items using `!localStorage.getItem('bgcolor')`. If it does, we run a function called `setStyles()` that grabs the data items using `Storage.getItem()` and uses those values to update page styles. If it doesn't, we run another function, `populateStorage()`, which uses `Storage.setItem()` to set the item values, then runs `setStyles()`.
    
    if (!localStorage.getItem("bgcolor")) {
      populateStorage();
    } else {
      setStyles();
    }
    
    function populateStorage() {
      localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
      localStorage.setItem("font", document.getElementById("font").value);
      localStorage.setItem("image", document.getElementById("image").value);
    
      setStyles();
    }
    
    function setStyles() {
      const currentColor = localStorage.getItem("bgcolor");
      const currentFont = localStorage.getItem("font");
      const currentImage = localStorage.getItem("image");
    
      document.getElementById("bgcolor").value = currentColor;
      document.getElementById("font").value = currentFont;
      document.getElementById("image").value = currentImage;
    
      htmlElem.style.backgroundColor = `#${currentColor}`;
      pElem.style.fontFamily = currentFont;
      imgElem.setAttribute("src", currentImage);
    }
    
Note: To see this running as a complete working example, see our Web Storage Demo.
  * Using the Web Storage API
  * `Window.localStorage`
  * `Window.sessionStorage`
  * `CacheStorage`


# LockManager
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `LockManager` interface of the Web Locks API provides methods for requesting a new `Lock` object and querying for an existing `Lock` object. To get an instance of `LockManager`, call `navigator.locks`.
## Instance methods
`LockManager.request()`
    
Requests a `Lock` object with parameters specifying its name and characteristics.
`LockManager.query()`
    
Returns a `Promise` that resolves with an object that contains information about held and pending locks.
# SVGFESpotLightElement
The `SVGFESpotLightElement` interface corresponds to the `<feSpotLight>` element.
EventTarget  Node  Element  SVGElement  SVGFESpotLightElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFESpotLightElement.x` Read only
    
An `SVGAnimatedNumber` corresponding to the `x` attribute of the given element.
`SVGFESpotLightElement.y` Read only
    
An `SVGAnimatedNumber` corresponding to the `y` attribute of the given element.
`SVGFESpotLightElement.z` Read only
    
An `SVGAnimatedNumber` corresponding to the `z` attribute of the given element.
`SVGFESpotLightElement.pointsAtX` Read only
    
An `SVGAnimatedNumber` corresponding to the `pointsAtX` attribute of the given element.
`SVGFESpotLightElement.pointsAtY` Read only
    
An `SVGAnimatedNumber` corresponding to the `pointsAtY` attribute of the given element.
`SVGFESpotLightElement.pointsAtZ` Read only
    
An `SVGAnimatedNumber` corresponding to the `pointsAtZ` attribute of the given element.
`SVGFESpotLightElement.specularExponent` Read only
    
An `SVGAnimatedNumber` corresponding to the `specularExponent` attribute of the given element.
`SVGFESpotLightElement.limitingConeAngle` Read only
    
An `SVGAnimatedNumber` corresponding to the `limitingConeAngle` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
  * `<feSpotLight>`


# SVGTextElement
The `SVGTextElement` interface corresponds to the `<text>` elements.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGTextContentElement  SVGTextPositioningElement  SVGTextElement 
## Instance properties
This interface doesn't implement any specific properties, but inherits properties from its parent interface, `SVGTextPositioningElement`.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGTextPositioningElement`.
  * `<text>`


# SVGGraphicsElement
The `SVGGraphicsElement` interface represents SVG elements whose primary purpose is to directly render graphics into a group.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement 
## Instance properties
This interface also inherits properties from its parent, `SVGElement`.
`SVGGraphicsElement.requiredExtensions` Read only
    
An `SVGStringList` reflecting the `requiredExtensions` attribute of the given element.
`SVGGraphicsElement.systemLanguage` Read only
    
An `SVGStringList` reflecting the `systemLanguage` attribute of the given element.
`SVGGraphicsElement.transform` Read only
    
An `SVGAnimatedTransformList` reflecting the computed value of the `transform` property and its corresponding `transform` attribute of the given element.
## Instance methods
This interface also inherits methods from its parent, `SVGElement`.
`SVGGraphicsElement.getBBox()`
    
Returns a `DOMRect` representing the computed bounding box of the current element.
`SVGGraphicsElement.getCTM()`
    
Returns a `DOMMatrix` representing the matrix that transforms the current element's coordinate system to its SVG viewport's coordinate system.
`SVGGraphicsElement.getScreenCTM()`
    
Returns a `DOMMatrix` representing the matrix that transforms the current element's coordinate system to the coordinate system of the SVG viewport for the SVG document fragment.
# GPUDeviceLostInfo
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUDeviceLostInfo` interface of the WebGPU API represents the object returned when the `GPUDevice.lost` `Promise` resolves. This provides information as to why a device has been lost.
See the `GPUDevice.lost` page for more information about "lost" state.
## Instance properties
`message` Read only
    
A string providing a human-readable message that explains why the device was lost.
`reason` Read only
    
An enumerated value that defines the reason the device was lost in a machine-readable way.
## Examples
    
    async function init() {
      if (!navigator.gpu) {
        throw Error("WebGPU not supported.");
      }
      const adapter = await navigator.gpu.requestAdapter();
      if (!adapter) {
        throw Error("Couldn't request WebGPU adapter.");
      }
    
      // Create a GPUDevice
      let device = await adapter.requestDevice(descriptor);
    
      // Use lost to handle lost devices
      device.lost.then((info) => {
        console.error(`WebGPU device was lost: ${info.message}`);
        device = null;
        if (info.reason !== "destroyed") {
          init();
        }
      });
      // …
    }
    
  * The WebGPU API


# TextTrackCueList
The `TextTrackCueList` interface of the WebVTT API is an array-like object that represents a dynamically updating list of `TextTrackCue` objects.
An instance of this type is obtained from `TextTrack.cues` in order to get all the cues in the `TextTrack` object. This interface has no constructor.
## Instance properties
`TextTrackCueList.length` Read only
    
An `unsigned long` that is the number of cues in the list.
## Instance methods
`TextTrackCueList.getCueById()`
    
Returns the first `TextTrackCue` object with the identifier passed to it.
## Examples
The `HTMLMediaElement.textTracks` property returns a `TextTrackList` object listing all of the `TextTrack` objects, one for each text track linked to the media. The `TextTrack.cues` property then returns a `TextTrackCueList` containing the cues for that particular track.
    
    const video = document.getElementById("video");
    video.onplay = () => {
      console.log(video.textTracks[0].cues);
    };
    
# StorageAccessHandle
The `StorageAccessHandle` interface represents access to unpartitioned state granted by a call to `Document.requestStorageAccess()`.
## Instance properties
`StorageAccessHandle.sessionStorage` Read only
    
Returns an unpartitioned session `Storage` object if access was granted.
`StorageAccessHandle.localStorage` Read only
    
Returns an unpartitioned local `Storage` object if access was granted.
`StorageAccessHandle.indexedDB` Read only
    
Returns an unpartitioned `IDBFactory` object if access was granted.
`StorageAccessHandle.locks` Read only
    
Returns an unpartitioned `LockManager` object if access was granted.
`StorageAccessHandle.caches` Read only
    
Returns an unpartitioned `CacheStorage` object if access was granted.
## Instance methods
`StorageAccessHandle.getDirectory()`
    
Returns a `Promise` that fulfills with an unpartitioned `FileSystemDirectoryHandle` object if access was granted, and rejects otherwise.
`StorageAccessHandle.estimate()`
    
Returns a `Promise` that fulfills with an unpartitioned `StorageEstimate` object if access was granted, and rejects otherwise.
`StorageAccessHandle.createObjectURL()`
    
Returns a string representing the unpartitioned blob storage url created if access was granted, and throws otherwise.
`StorageAccessHandle.revokeObjectURL()`
    
Revokes the unpartitioned blob storage url passed in if access was granted, and throws otherwise.
`StorageAccessHandle.BroadcastChannel()`
    
Returns the unpartitioned `BroadcastChannel` created if access was granted, and throws otherwise.
`StorageAccessHandle.SharedWorker()`
    
Returns the unpartitioned `SharedWorker` created if access was granted, and throws otherwise.
## Example
    
    document.requestStorageAccess({ localStorage: true }).then(
      (handle) => {
        console.log("localStorage access granted");
        handle.localStorage.setItem("foo", "bar");
      },
      () => {
        console.log("localStorage access denied");
      },
    );
    
Note: See Using the Storage Access API for a more complete example.
  * `Document.requestStorageAccess()`
  * Using the Storage Access API


# RTCEncodedVideoFrame
Note: This feature is available in Dedicated Web Workers.
The `RTCEncodedVideoFrame` of the WebRTC API represents an encoded video frame in the WebRTC receiver or sender pipeline, which may be modified using a WebRTC Encoded Transform.
## Instance properties
`RTCEncodedVideoFrame.type` Read only
    
Returns whether the current frame is a key frame, delta frame, or empty frame.
`RTCEncodedVideoFrame.timestamp` Read only Deprecated Non-standard
    
Returns the timestamp at which sampling of the frame started.
`RTCEncodedVideoFrame.data`
    
Return a buffer containing the encoded frame data.
## Instance methods
`RTCEncodedVideoFrame.getMetadata()`
    
Returns the metadata associated with the frame.
## Description
Raw video data is generated as a sequence of frames, where each frame is a 2 dimensional array of pixel values. Video encoders transform this raw input into a compressed representation of the original for transmission and storage. A common approach is to send "key frames" that contain enough information to reproduce a whole image at a relatively low rate, and between key frames to send many much smaller "delta frames" that just encode the changes since the previous frame.
There are many different codecs, such as H.264, VP8, and VP9, each that have a different encoding processes and configuration, which offer different trade-offs between compression efficiency and video quality.
The `RTCEncodedVideoFrame` represents a single frame encoded with a particular video encoder. The `type` property indicates whether the frame is a "key" or "delta" frame, and you can use the `getMetadata()` method to get other details about the encoding method. The `data` property provides access to the encoded image data for the frame, which can then be modified ("transformed") when frames are sent or received.
## Examples
This code snippet shows a handler for the `rtctransform` event in a `Worker` that implements a `TransformStream`, and pipes encoded frames through it from the `event.transformer.readable` to `event.transformer.writable` (`event.transformer` is a `RTCRtpScriptTransformer`, the worker-side counterpart of `RTCRtpScriptTransform`).
If the transformer is inserted into a video stream, the `transform()` method is called with a `RTCEncodedVideoFrame` whenever a new frame is enqueued on `event.transformer.readable`. The `transform()` method shows how this might be read, modified by inverting the bits, and then enqueued on the controller (this ultimately pipes it through to the `event.transformer.writable`, and then back into the WebRTC pipeline).
    
    addEventListener("rtctransform", (event) => {
      const transform = new TransformStream({
        async transform(encodedFrame, controller) {
          // Reconstruct the original frame.
          const view = new DataView(encodedFrame.data);
    
          // Construct a new buffer
          const newData = new ArrayBuffer(encodedFrame.data.byteLength);
          const newView = new DataView(newData);
    
          // Negate all bits in the incoming frame
          for (let i = 0; i < encodedFrame.data.byteLength; ++i) {
            newView.setInt8(i, ~view.getInt8(i));
          }
    
          encodedFrame.data = newData;
          controller.enqueue(encodedFrame);
        },
      });
      event.transformer.readable
        .pipeThrough(transform)
        .pipeTo(event.transformer.writable);
    });
    
Note that more complete examples are provided in Using WebRTC Encoded Transforms.
  * Using WebRTC Encoded Transforms
  * `TransformStream`
  * `RTCRtpScriptTransformer`
  * `RTCEncodedAudioFrame`


# GPUOutOfMemoryError
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUOutOfMemoryError` interface of the WebGPU API describes an out-of-memory (oom) error indicating that there was not enough free memory to complete the requested operation.
It represents one of the types of errors surfaced by `GPUDevice.popErrorScope` and the `uncapturederror` event.
Out-of-memory errors should be relatively rare in a well-behaved app but are less predictable than `GPUValidationError`s. This is because they are dependent on the device your app is running on as well as other apps that are using GPU resources at the time.
GPUError  GPUOutOfMemoryError 
## Constructor
`GPUOutOfMemoryError()`
    
Creates a new `GPUOutOfMemoryError` object instance.
## Instance properties
The `message` property is inherited from its parent, `GPUError`:
`message` Experimental Read only
    
A string providing a human-readable message that explains why the error occurred.
## Examples
The following example uses an error scope to capture an out-of-memory error, logging it to the console.
    
    device.pushErrorScope("out-of-memory");
    
    let buffer = device.createBuffer({
      size: 100_000_000_000, // 100GB; far too big
      usage: GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_WRITE,
    });
    
    device.popErrorScope().then((error) => {
      if (error) {
        // error is a GPUOutOfMemoryError object instance
        buffer = null;
        console.error(`Out of memory, buffer too large. Error: ${error.message}`);
      }
    });
    
  * The WebGPU API
  * WebGPU Error Handling best practices


# HTMLLabelElement
The `HTMLLabelElement` interface gives access to properties specific to `<label>` elements. It inherits methods and properties from the base `HTMLElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLLabelElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLLabelElement.control` Read only
    
A `HTMLElement` representing the control with which the label is associated.
`HTMLLabelElement.form` Read only
    
A `HTMLFormElement` object representing the form with which the labeled control is associated, or `null` if there is no associated control, or if that control isn't associated with a form. In other words, this is just a shortcut for `HTMLLabelElement.control.form`.
`HTMLLabelElement.htmlFor`
    
A string containing the ID of the labeled control. This reflects the `for` attribute.
Note: To programmatically set the `for` attribute, use `htmlFor`.
## Instance methods
No specific methods; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<label>`
  * `<form>`
  * `HTMLFormElement`


# USBIsochronousOutTransferPacket
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USBIsochronousOutTransferPacket` interface of the WebUSB API is part of the response from a call to the `isochronousTransferOut()` method of the `USBDevice` interface. It represents the status of an individual packet from a request to transfer data from the USB host to the USB device over an isochronous endpoint.
## Constructor
`USBIsochronousOutTransferPacket()` Experimental
    
Creates a new `USBIsochronousOutTransferPacket` object with the provided `status` and `bytesWritten` fields.
## Instance properties
`USBIsochronousOutTransferPacket.bytesWritten` Read only Experimental
    
Returns the number of bytes from the packet that were sent to the device.
`USBIsochronousOutTransferPacket.status` Read only Experimental
    
Returns the status of the transfer request, one of:
  * `"ok"` \- The transfer was successful.
  * `"stall"` \- The device indicated an error by generating a stall condition on the endpoint. A stall on an isochronous endpoint does not need to be cleared.


# RTCStatsReport
The `RTCStatsReport` interface of the WebRTC API provides a statistics report for a `RTCPeerConnection`, `RTCRtpSender`, or `RTCRtpReceiver`.
An `RTCStatsReport` instance is a read-only `Map`-like object, in which each key is an identifier for an object for which statistics are being reported, and the corresponding value is a dictionary object providing the statistics.
## Instance properties
`RTCStatsReport.size`
    
Returns the number of items in the `RTCStatsReport` object.
## Instance methods
`RTCStatsReport.entries()`
    
Returns a new Iterator object that contains a two-member array of `[id, statistic-dictionary]` for each element in the `RTCStatsReport` object, in insertion order.
`RTCStatsReport.forEach()`
    
Calls `callbackFn` once for each key-value pair present in the `RTCStatsReport` object, in insertion order. If a `thisArg` parameter is provided to `forEach`, it will be used as the `this` value for each callback.
`RTCStatsReport.get()`
    
Returns the statistics dictionary associated with the passed `id`, or `undefined` if there is none.
`RTCStatsReport.has()`
    
Returns a boolean indicating whether the `RTCStatsReport` contains a statistics dictionary associated with the specified `id`.
`RTCStatsReport.keys()`
    
Returns a new Iterator object that contains the keys (IDs) for each element in the `RTCStatsReport` object, in insertion order.
`RTCStatsReport.values()`
    
Returns a new Iterator object that contains the values (statistics object) for each element in the `RTCStatsReport` object, in insertion order.
`RTCStatsReport[Symbol.iterator]()`
    
Returns a new Iterator object that contains a two-member array of `[id, statistic-dictionary]` for each element in the `RTCStatsReport` object, in insertion order.
## Description
A `Promise` that resolves to an `RTCStatsReport` is returned from the `RTCRtpReceiver.getStats()`, `RTCRtpSender.getStats()` and `RTCPeerConnection.getStats()` methods. Calling `getStats()` on an `RTCPeerConnection` lets you specify whether you wish to obtain outbound statistics, inbound statistics, or statistics for the whole connection. The `RTCRtpReceiver` and `RTCRtpSender` versions of `getStats()` only return inbound and outbound statistics, respectively.
The statistics report is a read-only `Map`-like object: an ordered dictionary, where the properties are `id` strings that uniquely identify the WebRTC object that was inspected to produce a particular set of statistics, and the value is a dictionary object containing those statistics. A `RTCStatsReport` can be iterated and used the same ways as a read-only `Map`.
The report may contain many different categories of statistics, including inbound and outbound statistics for both the current and remote ends of the peer connection, information about codecs, certificates and media used, and so on. Each category of statistic is provided in a different type of statistics dictionary object, which can be identified from its `type` property.
### Common instance properties
All the dictionary types have the following properties:
`id`
    
A string that uniquely identifies the object was monitored to produce the set of statistics. This value persists across reports for (at least) the lifetime of the connection. Note however that for some statistics the ID may vary between browsers and for subsequent connections, even to the same peer.
`timestamp`
    
A high resolution timestamp object (`DOMHighResTimeStamp`) object indicating the time at which the sample was taken. Many reported statistics are cumulative values; the timestamp allows rates and averages to be calculated between any two reports, at any desired reporting rate.
`type`
    
A string with a value that indicates the type of statistics that the object contains, such as `candidate-pair`, `inbound-rtp`, `certificate`, and so on. The types of statistics and their corresponding objects are listed below.
Users typically iterate a `RTCStatsReport`, using a `forEach()` or `for...of` loop, selecting the statistics of interest using the `type` property. Once a particular statistic object has been identified using its `type`, the `id` property can subsequently be used with `get()` to obtain the same statistic report at a different time.
The timestamp can be used to calculate average values for statistics that accumulate over the lifetime of a connection.
### The statistic types
The statistics `type` values and their corresponding dictionaries are listed below.
type Dictionary Description  
`candidate-pair` `RTCIceCandidatePairStats` Statistics describing the change from one `RTCIceTransport` to another, such as during an ICE restart.  
`certificate` `RTCCertificateStats` Statistics about a certificate being used by an `RTCIceTransport`.  
`codec` `RTCCodecStats` Statistics about a specific codec being used by streams being sent or received by this connection.  
`data-channel` `RTCDataChannelStats` Statistics related to one `RTCDataChannel` on the connection.  
`inbound-rtp` `RTCInboundRtpStreamStats` Statistics describing the state of one of the connection's inbound data streams.  
`local-candidate` `RTCIceCandidateStats` Statistics about a local ICE candidate associated with the connection's `RTCIceTransport`s.  
`media-source` `RTCAudioSourceStats` or `RTCVideoSourceStats` Statistics about the media produced by the `MediaStreamTrack` attached to an RTP sender. The dictionary this key maps to depends on the track's `kind`.  
`outbound-rtp` `RTCOutboundRtpStreamStats` Statistics describing the state of one of the outbound data streams on this connection.  
`peer-connection` `RTCPeerConnectionStats` Statistics describing the state of the `RTCPeerConnection`.  
`remote-candidate` `RTCIceCandidateStats` Statistics about a remote ICE candidate associated with the connection's `RTCIceTransport`s.  
`remote-inbound-rtp` `RTCRemoteInboundRtpStreamStats` Statistics describing the state of the inbound data stream from the perspective of the remote peer.  
`remote-outbound-rtp` `RTCRemoteOutboundRtpStreamStats` Statistics describing the state of the outbound data stream from the perspective of the remote peer.  
`transport` `RTCTransportStats` Statistics about a transport used by the connection.  
## Examples
>
### Iterate report from an RTCPeerConnection using forEach loop
This example logs shows how you might log video-related statistics for the local `RTCRtpReceiver` responsible for receiving streamed media.
Given a variable `myPeerConnection`, which is an instance of `RTCPeerConnection`, the code uses `await` to wait for the statistics report, and then iterates it using `RTCStatsReport.forEach()`. It then filters the dictionaries for just those reports that have the `type` of `inbound-rtp` and `kind` of `video`.
    
    const stats = await myPeerConnection.getStats();
    
    stats.forEach((report) => {
      if (report.type === "inbound-rtp" && report.kind === "video") {
        // Log the frame rate
        console.log(report.framesPerSecond);
      }
    });
    
### Iterate report from an RTCRtpSender using a for...of loop
This example shows how you might iterate the outbound statistics from an `RTCRtpSender`.
The code follows a similar pattern to the previous example, but iterates using a `for...of`-loop on the `RTCStatsReport.values()`, and filters on the `type` of `outbound-rtp`. It assumes you already have an `RTCRtpSender` object named "sender".
    
    const stats = await sender.getStats();
    
    for (const stat of stats.values()) {
      if (stat.type !== "outbound-rtp") continue;
      Object.keys(stat).forEach((statName) => {
        console.log(`${statName}: ${stat[statName]}`);
      });
    }
    
  * WebRTC API
  * `RTCPeerConnection`
  * `RTCPeerConnection.getStats()`, `RTCRtpReceiver.getStats()`, and `RTCRtpSender.getStats()`


# FeaturePolicy
The `FeaturePolicy` interface represents the set of Permissions Policies applied to the current execution context.
## Instance methods
`FeaturePolicy.allowsFeature` Experimental
    
Returns a Boolean that indicates whether or not a particular feature is enabled in the specified context.
`FeaturePolicy.features` Experimental
    
Returns a list of names of all features supported by the User Agent. Features whose names appear on the list might not be allowed by the Permissions Policy of the current execution context and/or might be restricted by user-granted permissions.
`FeaturePolicy.allowedFeatures` Experimental
    
Returns a list of names of all features supported by the User Agent and allowed by the Permissions Policy. Note that features appearing on this list might still be behind a user permission.
`FeaturePolicy.getAllowlistForFeature` Experimental
    
Returns the allow for the specified feature.
This feature does not appear to be defined in any specification.>
  * `Permissions-Policy`
  * Privacy, permissions, and information security


# Client
Note: This feature is only available in Service Workers.
The `Client` interface represents an executable context such as a `Worker`, or a `SharedWorker`. `Window` clients are represented by the more-specific `WindowClient`. You can get `Client`/`WindowClient` objects from methods such as `Clients.matchAll()` and `Clients.get()`.
## Instance methods
`Client.postMessage()`
    
Sends a message to the client.
## Instance properties
`Client.frameType` Read only
    
The client's frame type as a string. It can be `"auxiliary"`, `"top-level"`, `"nested"`, or `"none"`.
`Client.id` Read only
    
The universally unique identifier of the client as a string.
`Client.type` Read only
    
The client's type as a string. It can be `"window"`, `"worker"`, or `"sharedworker"`.
`Client.url` Read only
    
The URL of the client as a string.
  * Using Service Workers


# SpeechSynthesisErrorEvent
The `SpeechSynthesisErrorEvent` interface of the Web Speech API contains information about any errors that occur while processing `SpeechSynthesisUtterance` objects in the speech service.
Event  SpeechSynthesisEvent  SpeechSynthesisErrorEvent 
## Constructor
`SpeechSynthesisErrorEvent()`
    
Creates a new `SpeechSynthesisErrorEvent`.
## Instance properties
`SpeechSynthesisErrorEvent` extends the `SpeechSynthesisEvent` interface, which inherits properties from its parent interface, `Event`.
`SpeechSynthesisErrorEvent.error` Read only
    
Returns an error code indicating what has gone wrong with a speech synthesis attempt.
## Instance methods
`SpeechSynthesisErrorEvent` extends the `SpeechSynthesisEvent` interface, which inherits methods from its parent interface, `Event`.
## Examples
    
    const synth = window.speechSynthesis;
    
    const inputForm = document.querySelector("form");
    const inputTxt = document.querySelector("input");
    const voiceSelect = document.querySelector("select");
    
    const voices = synth.getVoices();
    
    // …
    
    inputForm.onsubmit = (event) => {
      event.preventDefault();
    
      const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
      const selectedOption =
        voiceSelect.selectedOptions[0].getAttribute("data-name");
      for (const voice of voices) {
        if (voice.name === selectedOption) {
          utterThis.voice = voice;
        }
      }
    
      synth.speak(utterThis);
    
      utterThis.onerror = (event) => {
        console.log(
          `An error has occurred with the speech synthesis: ${event.error}`,
        );
      };
    
      inputTxt.blur();
    };
    
  * Web Speech API


# HTMLSourceElement
The `HTMLSourceElement` interface provides special properties (beyond the regular `HTMLElement` object interface it also has available to it by inheritance) for manipulating `<source>` elements.
EventTarget  Node  Element  HTMLElement  HTMLSourceElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLSourceElement.height`
    
A number that reflects the `height` HTML attribute, indicating the height of the image resource in CSS pixels. The property has a meaning only if the parent of the current `<source>` element is a `<picture>` element.
`HTMLSourceElement.media`
    
A string reflecting the `media` HTML attribute, containing the intended type of the media resource.
`HTMLSourceElement.sizes`
    
A string representing image sizes between breakpoints
`HTMLSourceElement.src`
    
A string reflecting the `src` HTML attribute, containing the URL for the media resource. The `HTMLSourceElement.src` property has a meaning only when the associated `<source>` element is nested in a media element that is a `<video>` or an `<audio>` element. It has no meaning and is ignored when it is nested in a `<picture>` element.
Note: If the `src` property is updated (along with any siblings), the parent `HTMLMediaElement`'s `load` method should be called when done, since `<source>` elements are not re-scanned automatically.
`HTMLSourceElement.srcset`
    
A string reflecting the `srcset` HTML attribute, containing a list of candidate images, separated by a comma (`',', U+002C COMMA`). A candidate image is a URL followed by a `'w'` with the width of the images, or an `'x'` followed by the pixel density.
`HTMLSourceElement.type`
    
A string reflecting the `type` HTML attribute, containing the type of the media resource.
`HTMLSourceElement.width`
    
A number that reflects the `width` HTML attribute, indicating the width of the image resource in CSS pixels. The property has a meaning only if the parent of the current `<source>` element is a `<picture>` element.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<source>`.
  * The HTML DOM APIs of the elements that can contain a `<source>` element: `HTMLVideoElement`, `HTMLAudioElement`, `HTMLPictureElement`.


# Device orientation events
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Device orientation events are events that allow you to detect a device's physical orientation, as well as allowing you to detect the device's motion.
## Concepts and usage
Mobile devices commonly have sensors such as gyroscopes, compasses, and accelerometers that can enable applications running on the device to detect the device's orientation and motion.
The device orientation events enable you to write web applications that can change their behavior based on the orientation of the user's device, and that can react when the user moves their device.
Some typical features for which you might want to use the device orientation events include:
  * in web-based games, to enable the user to control the motion of characters or objects in the game by tilting and moving the device
  * in mapping applications, to re-orient a map based on the device's position, or to provide turn-by-turn directions that update with the user's movements
  * for gesture recognition — for example, recognizing a "shake" gesture and using it to perform some action such as clearing an input area when the user shakes the device


Note: This API is widely supported on mobile browsers. While some desktop-only browsers may have limitations due to hardware differences, these constraints are rarely significant given the API's primary usage on sensor-equipped devices.
## Interfaces
`DeviceMotionEvent`
    
Represents changes in the acceleration of a device, as well as the rotation rate.
`DeviceMotionEventAcceleration`
    
Represents the amount of acceleration the device is experiencing along all three axes
`DeviceMotionEventRotationRate`
    
Represents the rate at which the device is rotating around all three axes.
`DeviceOrientationEvent`
    
Represents changes in the physical orientation of a device.
### Extensions to other interfaces
`devicemotion` event
    
Fired at a regular interval to indicate the amount of physical force of acceleration the device is receiving at that time, and the rate of rotation of the device.
`deviceorientation` event
    
Fired when fresh data is available from the device about the current orientation of the device as compared to the Earth coordinate frame.
`deviceorientationabsolute` event
    
Fired when absolute device orientation changes.
>
### api.Window.deviceorientation_event
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Device_orientation_events` 7 12 63.6–6 12 17 18 64–6 12 4.2 1.0 3 4.2  
### api.Window.devicemotion_event
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Device_orientation_events` 31 12 6 18 17 31 6 18 4.2 2.0 4.4.3 4.2  
### api.Window.deviceorientationabsolute_event
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Device_orientation_events` 50 79 110 37 No 50 110 37 No 5.0 50 No  
### api.DeviceOrientationEvent
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`DeviceOrientationEvent` 59 14 17 46 No 59 17 43 No 7.0 59 No  
`Device_orientation_events` 7Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the `deviceorientationabsolute` event. 12 6Firefox 3.6, 4, and 5 supported `mozOrientation` instead of the standard DeviceOrientationEvent interface. 15 17 18Before version 50, Chrome Android provided absolute values instead of relative values for this event. Developers still needing absolute values may use the `deviceorientationabsolute` event. 6Firefox for Android 4.6, 4, and 5 supported `mozOrientation` instead of the standard DeviceOrientationEvent interface. 14 4.2 1.0Before Samsung Internet 5.0, Samsung Internet provided absolute values instead of relative values for this event. Developers still needing absolute values may use the `deviceorientationabsolute` event. 3Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the `deviceorientationabsolute` event. 4.2  
`absolute` 7 12 6 15 17 18 6 14 No 1.0 4.4 No  
`alpha` 7 12 6 15 17 18 6 14 4.2 1.0 3 4.2  
`beta` 7 12 6 15 17 18 6 14 4.2 1.0 3 4.2  
`gamma` 7 12 6 15 17 18 6 14 4.2 1.0 3 4.2  
`requestPermission_static` No No No No No No No No 14.5 No No 14.5  
### api.DeviceMotionEvent
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`DeviceMotionEvent` 59 14 29 46 No 59 29 43 No 7.0 59 No  
`Device_orientation_events` 31 12 6 18 17 31 6 18 4.2 2.0 4.4.3 4.2  
`acceleration` 31 12 6 18 17 31 6 18 4.2 2.0 4.4.3 4.2  
`accelerationIncludingGravity` 31 12 6 18 17 31 6 18 4.2 2.0 4.4.3 4.2  
`interval` 31 12 6 18 17 31 6 18 4.2 2.0 4.4.3 4.2  
`requestPermission_static` No No No No No No No No 14.5 No No 14.5  
`rotationRate` 31 12 6 18 17 31 6 18 4.2 2.0 4.4.3 4.2  
### api.DeviceMotionEventAcceleration
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Device_orientation_events` 31 12 6 18 No 31 6 18 4.2 2.0 4.4.3 No  
`x` 31 12 6 18 No 31 6 18 4.2 2.0 4.4.3 No  
`y` 31 12 6 18 No 31 6 18 4.2 2.0 4.4.3 No  
`z` 31 12 6 18 No 31 6 18 4.2 2.0 4.4.3 No  
### api.DeviceMotionEventRotationRate
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Device_orientation_events` 31 12 6 18 No 31 6 18 4.2 2.0 4.4.3 No  
`alpha` 31 12 6 18 No 31 6 18 4.2 2.0 4.4.3 No  
`beta` 31 12 6 18 No 31 6 18 4.2 2.0 4.4.3 No  
`gamma` 31 12 6 18 No 31 6 18 4.2 2.0 4.4.3 No  
  * Device Orientation & Motion at web.dev


# ReadableStreamDefaultReader
Note: This feature is available in Web Workers.
The `ReadableStreamDefaultReader` interface of the Streams API represents a default reader that can be used to read stream data supplied from a network (such as a fetch request).
A `ReadableStreamDefaultReader` can be used to read from a `ReadableStream` that has an underlying source of any type (unlike a `ReadableStreamBYOBReader`, which can only be used with readable streams that have an underlying byte source).
Note however that zero-copy transfer from an underlying source is only supported for underlying byte sources that autoallocate buffers. In other words, the stream must have been constructed specifying both `type="bytes"` and `autoAllocateChunkSize`. For any other underlying source, the stream will always satisfy read requests with data from internal queues.
## Constructor
`ReadableStreamDefaultReader()`
    
Creates and returns a `ReadableStreamDefaultReader` object instance.
## Instance properties
`ReadableStreamDefaultReader.closed` Read only
    
Returns a `Promise` that fulfills when the stream closes, or rejects if the stream throws an error or the reader's lock is released. This property enables you to write code that responds to an end to the streaming process.
## Instance methods
`ReadableStreamDefaultReader.cancel()`
    
Returns a `Promise` that resolves when the stream is canceled. Calling this method signals a loss of interest in the stream by a consumer. The supplied `reason` argument will be given to the underlying source, which may or may not use it.
`ReadableStreamDefaultReader.read()`
    
Returns a promise providing access to the next chunk in the stream's internal queue.
`ReadableStreamDefaultReader.releaseLock()`
    
Releases the reader's lock on the stream.
## Examples
In the following example, an artificial `Response` is created to stream HTML fragments fetched from another resource to the browser.
It demonstrates the usage of a `ReadableStream` in combination with a `Uint8Array`.
    
    fetch("https://www.example.org/").then((response) => {
      const reader = response.body.getReader();
      const stream = new ReadableStream({
        start(controller) {
          // The following function handles each data chunk
          function push() {
            // "done" is a Boolean and value a "Uint8Array"
            return reader.read().then(({ done, value }) => {
              // Is there no more data to read?
              if (done) {
                // Tell the browser that we have finished sending data
                controller.close();
                return;
              }
    
              // Get the data and send it to the browser via the controller
              controller.enqueue(value);
              push();
            });
          }
    
          push();
        },
      });
    
      return new Response(stream, { headers: { "Content-Type": "text/html" } });
    });
    
  * Streams API concepts
  * Using readable streams
  * `ReadableStream`
  * Web-streams-polyfill


# SharedStorageSelectURLOperation
The `SharedStorageSelectURLOperation` interface of the Shared Storage API represents a URL Selection output gate operation.
## Instance methods
`run()` Experimental
    
Defines the structure to which the `run()` method defined inside a URL Selection output gate operation should conform.
## Examples
In this example, a class called `SelectURLOperation` is defined in a worklet and is registered using `SharedStorageWorkletGlobalScope.register()` with the name `ab-testing`. `SharedStorageSelectURLOperation` defines the structure to which this class needs to conform, essentially defining the parameters required for the `run()` method. Other than this requirement, the functionality of the class can be defined flexibly.
    
    // ab-testing-worklet.js
    class SelectURLOperation {
      async run(urls, data) {
        // Read the user's experiment group from Shared Storage
        const experimentGroup = await this.sharedStorage.get("ab-testing-group");
    
        // Return the group number
        return experimentGroup;
      }
    }
    
    // Register the operation
    register("ab-testing", SelectURLOperation);
    
Note: It is possible to define and register multiple operations in the same shared storage worklet module script with different names; see `SharedStorageOperation` for an example.
In the main browsing context, the `ab-testing` operation is invoked using the `WindowSharedStorage.selectURL()` method:
    
    // Randomly assigns a user to a group 0 or 1
    function getExperimentGroup() {
      return Math.round(Math.random());
    }
    
    async function injectContent() {
      // Register the Shared Storage worklet
      await window.sharedStorage.worklet.addModule("ab-testing-worklet.js");
    
      // Assign user to a random group (0 or 1) and store it in Shared Storage
      window.sharedStorage.set("ab-testing-group", getExperimentGroup(), {
        ignoreIfPresent: true,
      });
    
      // Run the URL selection operation
      const fencedFrameConfig = await window.sharedStorage.selectURL(
        "ab-testing",
        [
          { url: `https://your-server.example/content/default-content.html` },
          { url: `https://your-server.example/content/experiment-content-a.html` },
        ],
        {
          resolveToConfig: true,
        },
      );
    
      // Render the chosen URL into a fenced frame
      document.getElementById("content-slot").config = fencedFrameConfig;
    }
    
    injectContent();
    
For more details about this example and links to other examples, see the Shared Storage API landing page.
This feature does not appear to be defined in any specification.>
  * Shared Storage API


# Highlight
The `Highlight` interface of the CSS Custom Highlight API is used to represent a collection of `Range` instances to be styled using the API.
To style arbitrary ranges in a page, instantiate a new `Highlight` object, add one or more `Range` objects to it, and register it using the `HighlightRegistry`.
A `Highlight` instance is a `Set`-like object that can hold one or more `Range` objects.
## Constructor
`Highlight()`
    
Returns a newly created `Highlight` object.
## Instance properties
The `Highlight` interface doesn't inherit any properties.
`Highlight.priority`
    
A number that indicates the priority of this `Highlight` object. When multiple highlights overlap, the browser uses this priority to decide how to style the overlapping parts.
`Highlight.size` Read only
    
Returns the number of ranges in the `Highlight` object.
`Highlight.type`
    
An enumerated `String` used to specify the semantic meaning of the highlight. This allows assistive technologies to include this meaning when exposing the highlight to users.
## Instance methods
The `Highlight` interface doesn't inherit any methods.
`Highlight.add()`
    
Add a new range to this highlight.
`Highlight.clear()`
    
Remove all ranges from this highlight.
`Highlight.delete()`
    
Remove a range from this highlight.
`Highlight.entries()`
    
Returns a new iterator object that contains each range in the highlight object, in insertion order.
`Highlight.forEach()`
    
Calls the given callback once for each range in the highlight object, in insertion order.
`Highlight.has()`
    
Returns a boolean asserting whether a range is present the highlight object or not.
`Highlight.keys()`
    
An alias for `Highlight.values()`.
`Highlight.values()`
    
Returns a new iterator object that yields the ranges in the highlight object in insertion order.
## Examples
The following example demonstrates how specific parts of a block of text can be highlighted.
    
    <p class="foo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
      sapiente non eum facere? Nam rem hic culpa, ipsa rerum ab itaque consectetur
      molestiae dolores vitae! Quo ex explicabo tempore? Tenetur.</p>
    
This JavaScript code creates ranges, instantiates a new `Highlight` object for them, and registers it to be styled on the page:
    
    const parentNode = document.querySelector(".foo");
    const textNode = parentNode.firstChild;
    
    // Create a couple of ranges.
    const range1 = new Range();
    range1.setStart(textNode, 6);
    range1.setEnd(textNode, 21);
    
    const range2 = new Range();
    range2.setStart(textNode, 57);
    range2.setEnd(textNode, 71);
    
    // Create a custom highlight for these ranges.
    const highlight = new Highlight(range1, range2);
    
    // Register the ranges in the HighlightRegistry.
    CSS.highlights.set("my-custom-highlight", highlight);
    
The following CSS code snippet demonstrates how to style the registered custom highlight by using the `::highlight` pseudo-element:
    
    ::highlight(my-custom-highlight) {
      background-color: peachpuff;
    }
    
### Result
  * The CSS Custom Highlight API
  * CSS custom highlight API module
  * CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web


# GPUTextureView
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUTextureView` interface of the WebGPU API represents a view into a subset of the texture resources defined by a particular `GPUTexture`.
A `GPUTextureView` object instance is created using the `GPUTexture.createView()` method.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Examples
In the WebGPU Samples Cubemap demo, you will see multiple examples of how `GPUTextureView`s (created by `GPUTexture.createView()` calls) are used, both as a `resource` in a `GPUDevice.createBindGroup()` call, and as a provided `view` in the `depthStencilAttachment` object of a `GPUCommandEncoder.beginRenderPass()` descriptor.
    
    const uniformBindGroup = device.createBindGroup({
      layout: pipeline.getBindGroupLayout(0),
      entries: [
        {
          binding: 0,
          resource: {
            buffer: uniformBuffer,
            offset: 0,
            size: uniformBufferSize,
          },
        },
        {
          binding: 1,
          resource: sampler,
        },
        {
          binding: 2,
          resource: cubemapTexture.createView({
            dimension: "cube",
          }),
        },
      ],
    });
    
    const renderPassDescriptor: GPURenderPassDescriptor = {
      colorAttachments: [
        {
          view: undefined, // Assigned later
          loadOp: "clear",
          storeOp: "store",
        },
      ],
      depthStencilAttachment: {
        view: depthTexture.createView(),
        depthClearValue: 1.0,
        depthLoadOp: "clear",
        depthStoreOp: "store",
      },
    };
    
    // …
    
    const commandEncoder = device.createCommandEncoder();
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    
    // …
    
  * The WebGPU API


# Window
The `Window` interface represents a window containing a DOM document; the `document` property points to the DOM document loaded in that window.
A window for a given document can be obtained using the `document.defaultView` property.
A global variable, `window`, representing the window in which the script is running, is exposed to JavaScript code.
The `Window` interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. However, the `Window` interface is a suitable place to include these items that need to be globally available. Many of these are documented in the JavaScript Reference and the DOM Reference.
In a tabbed browser, each tab is represented by its own `Window` object; the global `window` seen by JavaScript code running within a given tab always represents the tab in which the code is running. That said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as `resizeTo()` and `innerHeight`. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.
EventTarget  Window 
## Instance properties
This interface inherits properties from the `EventTarget` interface.
Note that properties which are objects (e.g., for overriding the prototype of built-in elements) are listed in a separate section below.
`Window.caches` Read only Secure context
    
Returns the `CacheStorage` object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
`Window.clientInformation` Read only
    
An alias for `Window.navigator`.
`Window.closed` Read only
    
This property indicates whether the current window is closed or not.
`Window.cookieStore` Read only Secure context
    
Returns a reference to the `CookieStore` object for the current document context.
`Window.credentialless` Read only Experimental
    
Returns a boolean that indicates whether the current document was loaded inside a credentialless `<iframe>`. See IFrame credentialless for more details.
`Window.crossOriginIsolated` Read only
    
Returns a boolean value that indicates whether the website is in a cross-origin isolation state.
`Window.crypto` Read only
    
Returns the `Crypto` object associated to the global object.
`Window.customElements` Read only
    
Returns a reference to the `CustomElementRegistry` object, which can be used to register new custom elements and get information about previously registered custom elements.
`Window.devicePixelRatio` Read only
    
Returns the ratio between physical pixels and device independent pixels in the current display.
`Window.document` Read only
    
Returns a reference to the document that the window contains.
`Window.documentPictureInPicture` Read only Experimental Secure context
    
Returns a reference to the document Picture-in-Picture window for the current document context.
`Window.fence` Read only Experimental
    
Returns a `Fence` object instance for the current document context. Available only to documents embedded inside a `<fencedframe>`.
`Window.frameElement` Read only
    
Returns the element in which the window is embedded, or null if the window is not embedded.
`Window.frames` Read only
    
Returns an array of the subframes in the current window.
`Window.fullScreen` Non-standard
    
This property indicates whether the window is displayed in full screen or not.
`Window.history` Read only
    
Returns a reference to the history object.
`Window.indexedDB` Read only
    
Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an `IDBFactory` object.
`Window.innerHeight` Read only
    
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
`Window.innerWidth` Read only
    
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
`Window.isSecureContext` Read only
    
Returns a boolean indicating whether the current context is secure (`true`) or not (`false`).
`Window.launchQueue` Read only Experimental
    
When a progressive web app (PWA) is launched with a `launch_handler` `client_mode` value of `focus-existing`, `navigate-new`, or `navigate-existing`, the `launchQueue` provides access to the `LaunchQueue` class, which allows custom launch navigation handling to be implemented for the PWA.
`Window.length` Read only
    
Returns the number of frames in the window. See also `window.frames`.
`Window.localStorage` Read only
    
Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
`Window.location`
    
Gets/sets the location, or current URL, of the window object.
`Window.locationbar` Read only
    
Returns the locationbar object.
`Window.menubar` Read only
    
Returns the menubar object.
`Window.mozInnerScreenX` Read only Non-standard
    
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See `mozScreenPixelsPerCSSPixel` in `nsIDOMWindowUtils` for a conversion factor to adapt to screen pixels if needed.
`Window.mozInnerScreenY` Read only Non-standard
    
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See `mozScreenPixelsPerCSSPixel` for a conversion factor to adapt to screen pixels if needed.
`Window.name`
    
Gets/sets the name of the window.
`Window.navigation` Read only Experimental
    
Returns the current `window`'s associated `Navigation` object. The entry point for the Navigation API.
`Window.navigator` Read only
    
Returns a reference to the navigator object.
`Window.opener`
    
Returns a reference to the window that opened this current window.
`Window.origin` Read only
    
Returns the global object's origin, serialized as a string.
`Window.originAgentCluster` Read only
    
Returns `true` if this window belongs to an origin-keyed agent cluster.
`Window.outerHeight` Read only
    
Gets the height of the outside of the browser window.
`Window.outerWidth` Read only
    
Gets the width of the outside of the browser window.
`Window.pageXOffset` Read only
    
An alias for `window.scrollX`.
`Window.pageYOffset` Read only
    
An alias for `window.scrollY`.
`Window.parent` Read only
    
Returns a reference to the parent of the current window or subframe.
`Window.performance` Read only
    
Returns a `Performance` object, which includes the `timing` and `navigation` attributes, each of which is an object providing performance-related data. See also Using Navigation Timing for additional information and examples.
`Window.personalbar` Read only
    
Returns the personalbar object.
`Window.scheduler` Read only
    
Returns the `Scheduler` object associated with the current context. This is the entry point for using the Prioritized Task Scheduling API.
`Window.screen` Read only
    
Returns a reference to the screen object associated with the window.
`Window.screenX` and `Window.screenLeft` Read only
    
Both properties return the horizontal distance from the left border of the user's browser viewport to the left side of the screen.
`Window.screenY` and `Window.screenTop` Read only
    
Both properties return the vertical distance from the top border of the user's browser viewport to the top side of the screen.
`Window.scrollbars` Read only
    
Returns the scrollbars object.
`Window.scrollMaxX` Non-standard Read only
    
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
`Window.scrollMaxY` Non-standard Read only
    
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
`Window.scrollX` Read only
    
Returns the number of pixels that the document has already been scrolled horizontally.
`Window.scrollY` Read only
    
Returns the number of pixels that the document has already been scrolled vertically.
`Window.self` Read only
    
Returns an object reference to the window object itself.
`Window.sessionStorage`
    
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
`Window.sharedStorage` Read only Experimental Secure context
    
Returns the `WindowSharedStorage` object for the current origin. This is the main entry point for writing data to shared storage using the Shared Storage API.
`Window.speechSynthesis` Read only
    
Returns a `SpeechSynthesis` object, which is the entry point into using Web Speech API speech synthesis functionality.
`Window.statusbar` Read only
    
Returns the statusbar object.
`Window.toolbar` Read only
    
Returns the toolbar object.
`Window.top` Read only
    
Returns a reference to the topmost window in the window hierarchy. This property is read only.
`Window.trustedTypes` Read only
    
Returns the `TrustedTypePolicyFactory` object associated with the global object, providing the entry point for using the Trusted Types API.
`Window.visualViewport` Read only
    
Returns a `VisualViewport` object which represents the visual viewport for a given window.
`Window.window` Read only
    
Returns a reference to the current window.
`window[0]`, `window[1]`, etc.
    
Returns a reference to the `window` object in the frames. See `Window.frames` for more details.
Named properties
    
Some elements in the document are also exposed as window properties:
  * For each `<embed>`, `<form>`, `<iframe>`, `<img>`, and `<object>` element, its `name` (if non-empty) is exposed. For example, if the document contains `<form name="my_form">`, then `window["my_form"]` (and its equivalent `window.my_form`) returns a reference to that element.
  * For each HTML element, its `id` (if non-empty) is exposed.


If a property corresponds to a single element, that element is directly returned. If the property corresponds to multiple elements, then an `HTMLCollection` is returned containing all of them. If any of the elements is a navigable `<iframe>` or `<object>`, then the `contentWindow` of first such iframe is returned instead.
### Deprecated properties
`Window.event` Deprecated Read only
    
Returns the current event, which is the event currently being handled by the JavaScript code's context, or `undefined` if no event is currently being handled. The `Event` object passed directly to event handlers should be used instead whenever possible.
`Window.external` Deprecated Read only
    
Returns an object with functions for adding external search providers to the browser.
`Window.orientation` Deprecated Read only
    
Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.
`Window.status` Deprecated
    
Gets/sets the text in the statusbar at the bottom of the browser.
## Instance methods
This interface inherits methods from the `EventTarget` interface.
`Window.atob()`
    
Decodes a string of data which has been encoded using base-64 encoding.
`Window.alert()`
    
Displays an alert dialog.
`Window.blur()` Deprecated
    
Sets focus away from the window.
`Window.btoa()`
    
Creates a base-64 encoded ASCII string from a string of binary data.
`Window.cancelAnimationFrame()`
    
Enables you to cancel a callback previously scheduled with `Window.requestAnimationFrame`.
`Window.cancelIdleCallback()`
    
Enables you to cancel a callback previously scheduled with `Window.requestIdleCallback`.
`Window.clearInterval()`
    
Cancels the repeated execution set using `Window.setInterval()`.
`Window.clearTimeout()`
    
Cancels the delayed execution set using `Window.setTimeout()`.
`Window.close()`
    
Closes the current window.
`Window.confirm()`
    
Displays a dialog with a message that the user needs to respond to.
`Window.createImageBitmap()`
    
Accepts a variety of different image sources, and returns a `Promise` which resolves to an `ImageBitmap`. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
`Window.dump()` Non-standard
    
Writes a message to the console.
`Window.fetch()`
    
Starts the process of fetching a resource from the network.
`Window.fetchLater()` Experimental
    
Creates a deferred fetch, which is sent once the page is navigated away from (it is destroyed or enters the bfcache), or after a provided `activateAfter` timeout — whichever comes first.
`Window.find()` Non-standard
    
Searches for a given string in a window.
`Window.focus()`
    
Sets focus on the current window.
`Window.getComputedStyle()`
    
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
`Window.getDefaultComputedStyle()` Non-standard
    
Gets default computed style for the specified element, ignoring author stylesheets.
`Window.getScreenDetails()` Experimental Secure context
    
Returns a `Promise` that fulfills with a `ScreenDetails` object instance representing the details of all the screens available to the user's device.
`Window.getSelection()`
    
Returns the selection object representing the selected item(s).
`Window.matchMedia()`
    
Returns a `MediaQueryList` object representing the specified media query string.
`Window.moveBy()`
    
Moves the current window by a specified amount.
`Window.moveTo()`
    
Moves the window to the specified coordinates.
`Window.open()`
    
Opens a new window.
`Window.postMessage()`
    
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
`Window.print()`
    
Opens the Print Dialog to print the current document.
`Window.prompt()`
    
Returns the text entered by the user in a prompt dialog.
`Window.queryLocalFonts()` Experimental Secure context
    
Returns a `Promise` that fulfills with an array of `FontData` objects representing the font faces available locally.
`Window.queueMicrotask()`
    
Queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.
`Window.reportError()`
    
Reports an error in a script, emulating an unhandled exception.
`Window.requestAnimationFrame()`
    
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.
`Window.requestIdleCallback()`
    
Enables the scheduling of tasks during a browser's idle periods.
`Window.resizeBy()`
    
Resizes the current window by a certain amount.
`Window.resizeTo()`
    
Dynamically resizes window.
`Window.scroll()`
    
Scrolls the window to a particular place in the document.
`Window.scrollBy()`
    
Scrolls the document in the window by the given amount.
`Window.scrollByLines()` Non-standard
    
Scrolls the document by the given number of lines.
`Window.scrollByPages()` Non-standard
    
Scrolls the current document by the specified number of pages.
`Window.scrollTo()`
    
Scrolls to a particular set of coordinates in the document.
`Window.setInterval()`
    
Schedules a function to execute every time a given number of milliseconds elapses.
`Window.setTimeout()`
    
Schedules a function to execute in a given amount of time.
`Window.showDirectoryPicker()` Experimental Secure context
    
Displays a directory picker which allows the user to select a directory.
`Window.showOpenFilePicker()` Experimental Secure context
    
Shows a file picker that allows a user to select a file or multiple files.
`Window.showSaveFilePicker()` Experimental Secure context
    
Shows a file picker that allows a user to save a file.
`Window.sizeToContent()` Non-standard
    
Sizes the window according to its content.
`Window.stop()`
    
This method stops window loading.
`Window.structuredClone()`
    
Creates a deep clone of a given value using the structured clone algorithm.
### Deprecated methods
`Window.captureEvents()` Deprecated
    
Registers the window to capture all events of the specified type.
`Window.clearImmediate()` Non-standard Deprecated
    
Cancels the repeated execution set using `setImmediate()`.
`Window.releaseEvents()` Deprecated
    
Releases the window from trapping events of a specific type.
`Window.requestFileSystem()` Non-standard Deprecated
    
Lets a website or app gain access to a sandboxed file system for its own use.
`Window.setImmediate()` Non-standard Deprecated
    
Executes a function after the browser has finished other heavy tasks.
`Window.setResizable()` Non-standard Deprecated
    
Does nothing (no-op). Kept for backward compatibility with Netscape 4.x.
`Window.webkitConvertPointFromNodeToPage()` Non-standard Deprecated
    
Transforms a `WebKitPoint` from the node's coordinate system to the page's coordinate system.
`Window.webkitConvertPointFromPageToNode()` Non-standard Deprecated
    
Transforms a `WebKitPoint` from the page's coordinate system to the node's coordinate system.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface. In addition to the events listed below, many events can bubble from the `Document` contained in the window object.
`error`
    
Fired when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
`languagechange`
    
Fired at the global scope object when the user's preferred language changes.
`resize`
    
Fired when the window has been resized.
`storage`
    
Fired when a storage area (`localStorage` or `sessionStorage`) has been modified in the context of another document.
### Connection events
`offline`
    
Fired when the browser has lost access to the network and the value of `navigator.onLine` has switched to `false`.
`online`
    
Fired when the browser has gained access to the network and the value of `navigator.onLine` has switched to `true`.
### Device orientation events
`devicemotion` Secure context
    
Fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available.
`deviceorientation` Secure context
    
Fired when fresh data is available from the magnetometer orientation sensor about the current orientation of the device as compared to the Earth coordinate frame.
`deviceorientationabsolute` Secure context
    
Fired when fresh data is available from the magnetometer orientation sensor about the current absolute orientation of the device as compared to the Earth coordinate frame.
### Focus events
`blur`
    
Fired when an element has lost focus.
`focus`
    
Fired when an element has gained focus.
### Gamepad events
`gamepadconnected`
    
Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.
`gamepaddisconnected`
    
Fired when the browser detects that a gamepad has been disconnected.
### History events
`hashchange`
    
Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the `#` symbol).
`pagehide`
    
Sent when the browser hides the current document while in the process of switching to displaying in its place a different document from the session's history. This happens, for example, when the user clicks the Back button or when they click the Forward button to move ahead in session history.
`pagereveal`
    
Fired when a document is first rendered, either when loading a fresh document from the network or activating a document (either from back/forward cache (bfcache) or prerender).
`pageshow`
    
Sent when the browser makes the document visible due to navigation tasks, including not only when the page is first loaded, but also situations such as the user navigating back to the page after having navigated to another within the same tab.
`pageswap`
    
Fired when a document is about to be unloaded due to a navigation.
`popstate`
    
Fired when the active history entry changes.
### Load & unload events
`beforeunload`
    
Fired when the window, the document and its resources are about to be unloaded.
`load`
    
Fired when the whole page has loaded, including all dependent resources such as stylesheets images.
`unload` Deprecated
    
Fired when the document or a child resource is being unloaded.
### Manifest events
`appinstalled`
    
Fired when the browser has successfully installed a page as an application.
`beforeinstallprompt`
    
Fired when a user is about to be prompted to install a web application.
### Messaging events
`message`
    
Fired when the window receives a message, for example from a call to `Window.postMessage()` from another browsing context.
`messageerror`
    
Fired when a `Window` object receives a message that can't be deserialized.
### Print events
`afterprint`
    
Fired after the associated document has started printing or the print preview has been closed.
`beforeprint`
    
Fired when the associated document is about to be printed or previewed for printing.
### Promise rejection events
`rejectionhandled`
    
Sent every time a JavaScript `Promise` is rejected, regardless of whether or not there is a handler in place to catch the rejection.
`unhandledrejection`
    
Sent when a JavaScript `Promise` is rejected but there is no handler in place to catch the rejection.
### Scroll events
`scrollsnapchange` Experimental
    
Fired on the scroll container at the end of a scrolling operation when a new scroll snap target has been selected.
`scrollsnapchanging` Experimental
    
Fired on the scroll container when the browser determines a new scroll snap target is pending, i.e., it will be selected when the current scroll gesture ends.
### Deprecated events
`orientationchange` Deprecated
    
Fired when the orientation of the device has changed.
`vrdisplayactivate` Deprecated Non-standard
    
Fired when a display is able to be presented to.
`vrdisplayconnect` Deprecated Non-standard
    
Fired when a compatible VR device has been connected to the computer.
`vrdisplaydisconnect` Deprecated Non-standard
    
Fired when a compatible VR device has been disconnected from the computer.
`vrdisplaydeactivate` Deprecated Non-standard
    
Fired when a display can no longer be presented to.
`vrdisplaypresentchange` Deprecated Non-standard
    
Fired when the presenting state of a VR device changes — i.e., goes from presenting to not presenting, or vice versa.
### Bubbled events
Not all events that bubble can reach the `Window` object. Only the following do and can be listened for on the `Window` object:
  * `abort`
  * `auxclick`
  * `beforeinput`
  * `beforematch`
  * `beforetoggle`
  * `cancel`
  * `canplay`
  * `canplaythrough`
  * `change`
  * `click`
  * `close`
  * `contextlost`
  * `contextmenu`
  * `contextrestored`
  * `copy`
  * `cuechange`
  * `cut`
  * `dblclick`
  * `drag`
  * `dragend`
  * `dragenter`
  * `dragleave`
  * `dragover`
  * `dragstart`
  * `drop`
  * `durationchange`
  * `emptied`
  * `ended`
  * `formdata`
  * `input`
  * `invalid`
  * `keydown`
  * `keypress`
  * `keyup`
  * `loadeddata`
  * `loadedmetadata`
  * `loadstart`
  * `mousedown`
  * `mouseenter`
  * `mouseleave`
  * `mousemove`
  * `mouseout`
  * `mouseover`
  * `mouseup`
  * `paste`
  * `pause`
  * `play`
  * `playing`
  * `progress`
  * `ratechange`
  * `reset`
  * `scrollend`
  * `securitypolicyviolation`
  * `seeked`
  * `seeking`
  * `select`
  * `slotchange`
  * `stalled`
  * `submit`
  * `suspend`
  * `timeupdate`
  * `toggle`
  * `volumechange`
  * `waiting`
  * `wheel`


## Interfaces
See DOM Reference.
## Listening for events on Window
HTML elements have three ways to listen for events:
  * Add an event listener to the element using the `EventTarget.addEventListener` method.
  * Assign an event handler to the element's `oneventname` property in JavaScript.
  * Add an `on`-prefixed attribute to the element in the HTML.


To listen for events on `Window` objects, in general, you can only use the first two methods, because `Window` has no corresponding HTML element. However, there's a specific group of events whose listeners can be added to the `<body>` (or the deprecated `<frameset>`) element that's owned by the `Window`'s document, using the second or third methods. These events are:
  * `afterprint`
  * `beforeprint`
  * `beforeunload`
  * `blur`
  * `error`
  * `focus`
  * `hashchange`
  * `languagechange`
  * `load`
  * `message`
  * `messageerror`
  * `offline`
  * `online`
  * `pagehide`
  * `pagereveal`
  * `pageshow`
  * `pageswap`
  * `popstate`
  * `rejectionhandled`
  * `resize`
  * `scroll`
  * `storage`
  * `unhandledrejection`
  * `unload`


This means the following are strictly equivalent:
    
    window.onresize = (e) => console.log(e.currentTarget);
    document.body.onresize = (e) => console.log(e.currentTarget);
    
    
    <body onresize="console.log(event.currentTarget)"></body>
    
In all three cases, you see the `Window` object logged as `currentTarget`.
# Prioritized Task Scheduling API
Note: This feature is available in Web Workers.
The Prioritized Task Scheduling API provides a standardized way to prioritize all tasks belonging to an application, whether they are defined in a website developer's code or in third-party libraries and frameworks.
The task priorities are very coarse-grained and based around whether tasks block user interaction or otherwise impact the user experience, or can run in the background. Developers and frameworks may implement more fine-grained prioritization schemes within the broad categories defined by the API.
The API is promise-based and supports the ability to set and change task priorities, to delay tasks being added to the scheduler, to abort tasks, and to monitor for priority change and abort events.
## Concepts and usage
The Prioritized Task Scheduling API is available in both window and worker threads using the `scheduler` property on the global object.
The main API methods are `scheduler.postTask()` and `scheduler.yield()`. `scheduler.postTask()` takes a callback function (the task) and returns a promise that resolves with the return value of the function or rejects with an error. `scheduler.yield()` turns any `async` function into a task by yielding the main thread to the browser for other work, with execution continuing when the returned promise is resolved.
The two methods have similar functionality but different levels of control. `scheduler.postTask()` is more configurable — for example, it allows task priority to be explicitly set and task cancellation via an `AbortSignal`. `scheduler.yield()` on the other hand is simpler and can be `await`ed in any `async` function without having to provide a followup task in another function.
### `scheduler.yield()`
To break up long-running JavaScript tasks so they don't block the main thread, insert a `scheduler.yield()` call to temporarily yield the main thread back to the browser, which creates a task to continue execution where it left off.
    
    async function slowTask() {
      firstHalfOfWork();
      await scheduler.yield();
      secondHalfOfWork();
    }
    
`scheduler.yield()` returns a promise that can be awaited to continue execution. This allows work belonging to the same function to be included there, without blocking the main thread when the function runs.
`scheduler.yield()` takes no arguments. The task that triggers its continuation has a default `user-visible` priority; however, if `scheduler.yield()` is called within a `scheduler.postTask()` callback, it will inherit the priority of the surrounding task.
### `scheduler.postTask()`
When `scheduler.postTask()` is called with no arguments, it creates a task with a default `user-visible` priority that cannot be aborted or have its priority changed.
    
    const promise = scheduler.postTask(myTask);
    
Because the method returns a promise, you can wait on its resolution asynchronously using `then()`, and catch errors thrown by the task callback function (or when the task is aborted) using `catch`. The callback function can be any kind of function (below we demonstrate an arrow function).
    
    scheduler
      .postTask(() => "Task executing")
      // Promise resolved: log task result when promise resolves
      .then((taskResult) => console.log(`${taskResult}`))
      // Promise rejected: log AbortError or errors thrown by task
      .catch((error) => console.error(`Error: ${error}`));
    
The same task might be waited on using `await`/`async` as shown below (note, this is run in an Immediately Invoked Function Expression (IIFE)):
    
    (async () => {
      try {
        const result = await scheduler.postTask(() => "Task executing");
        console.log(result);
      } catch (error) {
        // Log AbortError or error thrown in task function
        console.error(`Error: ${error}`);
      }
    })();
    
You can also specify an options object to the `postTask()` method if you want to change the default behavior. The options are:
  * `priority` This allows you to specify a particular immutable priority. Once set, the priority cannot be changed.
  * `signal` This allows you to specify a signal, which may be either a `TaskSignal` or `AbortSignal` The signal is associated with a controller, which can be used to abort the task. A `TaskSignal` can also be used to set and change the task priority if the task is mutable.
  * `delay` This allows you to specify the delay before the task is added for scheduling, in milliseconds.


The same example as above with a priority option would look like this:
    
    scheduler
      .postTask(() => "Task executing", { priority: "user-blocking" })
      .then((taskResult) => console.log(`${taskResult}`)) // Log the task result
      .catch((error) => console.error(`Error: ${error}`)); // Log any errors
    
### Task priorities
Scheduled tasks are run in priority order, followed by the order that they were added to the scheduler queue.
There are just three priorities, which are listed below (ordered from highest to lowest):
`user-blocking`
    
Tasks that stop users from interacting with the page. This includes rendering the page to the point where it can be used, or responding to user input.
`user-visible`
    
Tasks that are visible to the user but not necessarily blocking user actions. This might include rendering non-essential parts of the page, such as non-essential images or animations.
This is the default priority for `scheduler.postTask()` and `scheduler.yield()`.
`background`
    
Tasks that are not time-critical. This might include log processing or initializing third party libraries that aren't required for rendering.
### Mutable and immutable task priority
There are many use cases where the task priority never needs to change, while for others it does. For example fetching an image might change from a `background` task to `user-visible` as a carousel is scrolled into the viewing area.
Task priorities can be set as static (immutable) or dynamic (modifiable) depending on the arguments passed to `Scheduler.postTask()`.
Task priority is immutable if a value is specified in the `options.priority` argument. The given value will be used for the task priority and cannot be changed.
The priority is modifiable only if a `TaskSignal` is passed to the `options.signal` argument and `options.priority` is not set. In this case the task will take its initial priority from the `signal` priority, and the priority can subsequently be changed by calling `TaskController.setPriority()` on the controller associated with the signal.
If the priority is not set with `options.priority` or by passing a `TaskSignal` to `options.signal` then it defaults to `user-visible` (and is by definition immutable).
Note that a task that needs to be aborted must set `options.signal` to either `TaskSignal` or `AbortSignal`. However for a task with an immutable priority, `AbortSignal` more clearly indicates that the task priority cannot be changed using the signal.
Let's run through an example to demonstrate what we mean by this. When you have several tasks that are of roughly the same priority, it makes sense to break them down into separate functions to aid with maintenance, debugging, and many other reasons.
For example:
    
    function main() {
      a();
      b();
      c();
      d();
      e();
    }
    
However, this kind of structure doesn't help with main thread blocking. Since all five of the tasks are being run inside one main function, the browser runs them all as a single task.
To handle this, we tend to run a function periodically to get the code to yield to the main thread. This means that our code is split into multiple tasks, between the execution of which the browser is given the opportunity to handle high-priority tasks such as updating the UI. A common pattern for this function uses `setTimeout()` to postpone execution into a separate task:
    
    function yield() {
      return new Promise((resolve) => {
        setTimeout(resolve, 0);
      });
    }
    
This can be used inside a task runner pattern like so, to yield to the main thread after each task has been run:
    
    async function main() {
      // Create an array of functions to run
      const tasks = [a, b, c, d, e];
    
      // Loop over the tasks
      while (tasks.length > 0) {
        // Shift the first task off the tasks array
        const task = tasks.shift();
    
        // Run the task
        task();
    
        // Yield to the main thread
        await yield();
      }
    }
    
To improve this further, we can use `Scheduler.yield` when available to allow this code to continue executing ahead of other less critical tasks in the queue:
    
    function yield() {
      // Use scheduler.yield if it exists:
      if ("scheduler" in window && "yield" in scheduler) {
        return scheduler.yield();
      }
    
      // Fall back to setTimeout:
      return new Promise((resolve) => {
        setTimeout(resolve, 0);
      });
    }
    
## Interfaces
`Scheduler`
    
Contains the `postTask()` and `yield()` methods for adding prioritized tasks to be scheduled. An instance of this interface is available on the `Window` or `WorkerGlobalScope` global objects (`globalThis.scheduler`).
`TaskController`
    
Supports both aborting a task and changing its priority.
`TaskSignal`
    
A signal object that allows you to abort a task and change its priority, if required, using a `TaskController` object.
`TaskPriorityChangeEvent`
    
The interface for the `prioritychange` event, which is sent when the priority for a task is changed.
Note: If the task priority never needs to be changed, you can use an `AbortController` and its associated `AbortSignal` instead of `TaskController` and `TaskSignal`.
### Extensions to other interfaces
`Window.scheduler` and `WorkerGlobalScope.scheduler`
    
These properties are the entry points for using the `Scheduler.postTask()` method in a window or a worker scope, respectively.
## Examples
Note that the examples below use `myLog()` to write to a text area. The code for the log area and method is generally hidden to not distract from more relevant code.
    
    <textarea id="log"></textarea>
    
    
    // hidden logger code - simplifies example
    let log = document.getElementById("log");
    function myLog(text) {
      log.textContent += `${text}\n`;
    }
    
### Feature checking
Check whether prioritized task scheduling is supported by testing for the `scheduler` property in the global scope.
The code below prints "Feature: Supported" if the API is supported on this browser.
    
    // Check that feature is supported
    if ("scheduler" in globalThis) {
      myLog("Feature: Supported");
    } else {
      myLog("Feature: NOT Supported");
    }
    
### Basic usage
Tasks are posted using `Scheduler.postTask()`, specifying a callback function (task) in the first argument, and an optional second argument that can be used to specify a task priority, signal, and/or delay. The method returns a `Promise` that resolves with the return value of the callback function, or rejects with either an abort error or an error thrown in the function.
Because it returns a promise, `Scheduler.postTask()` can be chained with other promises. Below we show how to wait on the promise to resolve using `then`. This uses the default priority (`user-visible`).
    
    // A function that defines a task
    function myTask() {
      return "Task 1: user-visible";
    }
    
    if ("scheduler" in this) {
      // Post task with default priority: 'user-visible' (no other options)
      // When the task resolves, Promise.then() logs the result.
      scheduler.postTask(myTask).then((taskResult) => myLog(`${taskResult}`));
    }
    
The method can also be used with `await` inside an async function. The code below shows how you might use this approach to wait on a `user-blocking` task.
    
    function myTask2() {
      return "Task 2: user-blocking";
    }
    
    async function runTask2() {
      const result = await scheduler.postTask(myTask2, {
        priority: "user-blocking",
      });
      myLog(result); // Logs 'Task 2: user-blocking'.
    }
    runTask2();
    
In some cases you might not need to wait on completion at all. For simplicity many of the examples here simply log the result as the task executes.
    
    // A function that defines a task
    function myTask3() {
      myLog("Task 3: user-visible");
    }
    
    if ("scheduler" in this) {
      // Post task and log result when it runs
      scheduler.postTask(myTask3);
    }
    
The log below shows the output of the three tasks above. Note that the order they are run depends on the priority first, and then the declaration order.
### Permanent priorities
Task priorities may be set using `priority` parameter in the optional second argument. Priorities that are set in this way are immutable (cannot be changed).
Below we post two groups of three tasks, each member in reverse order of priority. The final task has the default priority. When run, each task simply logs it's expected order (we're not waiting on the result because we don't need to in order to show execution order).
    
    if ("scheduler" in this) {
      // three tasks, in reverse order of priority
      scheduler.postTask(() => myLog("bkg 1"), { priority: "background" });
      scheduler.postTask(() => myLog("usr-vis 1"), { priority: "user-visible" });
      scheduler.postTask(() => myLog("usr-blk 1"), { priority: "user-blocking" });
    
      // three more tasks, in reverse order of priority
      scheduler.postTask(() => myLog("bkg 2"), { priority: "background" });
      scheduler.postTask(() => myLog("usr-vis 2"), { priority: "user-visible" });
      scheduler.postTask(() => myLog("usr-blk 2"), { priority: "user-blocking" });
    
      // Task with default priority: user-visible
      scheduler.postTask(() => myLog("usr-vis 3 (default)"));
    }
    
The output below shows that the tasks are executed in priority order, and then declaration order.
### Changing task priorities
Task priorities can also take their initial value from a `TaskSignal` passed to `postTask()` in the optional second argument. If set in this way, the priority of the task can then be changed using the controller associated with the signal.
Note: Setting and changing task priorities using a signal only works when the `options.priority` argument to `postTask()` is not set, and when the `options.signal` is a `TaskSignal` (and not an `AbortSignal`).
The code below first shows how to create a `TaskController`, setting the initial priority of its signal to `user-blocking` in the `TaskController()` constructor.
The code then uses `addEventListener()` to add an event listener to the controller's signal (we could alternatively use the `TaskSignal.onprioritychange` property to add an event handler). The event handler uses `previousPriority` on the event to get the original priority and `TaskSignal.priority` on the event target to get the new/current priority.
The task is then posted, passing in the signal, and then we immediately change the priority to `background` by calling `TaskController.setPriority()` on the controller.
    
    if ("scheduler" in this) {
      // Create a TaskController, setting its signal priority to 'user-blocking'
      const controller = new TaskController({ priority: "user-blocking" });
    
      // Listen for 'prioritychange' events on the controller's signal.
      controller.signal.addEventListener("prioritychange", (event) => {
        const previousPriority = event.previousPriority;
        const newPriority = event.target.priority;
        myLog(`Priority changed from ${previousPriority} to ${newPriority}.`);
      });
    
      // Post task using the controller's signal.
      // The signal priority sets the initial priority of the task
      scheduler.postTask(() => myLog("Task 1"), { signal: controller.signal });
    
      // Change the priority to 'background' using the controller
      controller.setPriority("background");
    }
    
The output below demonstrates that the priority was successfully changed to `background` from `user-blocking`. Note that in this case the priority is changed before the task is executed, but it could equally have been changed while the task was running.
### Aborting tasks
Tasks can be aborted using either `TaskController` and `AbortController`, in exactly the same way. The only difference is that you must use `TaskController` if you also want to set the task priority.
The code below creates a controller and passes its signal to the task. The task is then immediately aborted. This causes the promise to be rejected with an `AbortError`, which is caught in the `catch` block and logged. Note that we could also have listened for the `abort` event fired on the `TaskSignal` or `AbortSignal` and logged the abort there.
    
    if ("scheduler" in this) {
      // Declare a TaskController with default priority
      const abortTaskController = new TaskController();
      // Post task passing the controller's signal
      scheduler
        .postTask(() => myLog("Task executing"), {
          signal: abortTaskController.signal,
        })
        .then((taskResult) => myLog(`${taskResult}`)) // This won't run!
        .catch((error) => myLog(`Error: ${error}`)); // Log the error
    
      // Abort the task
      abortTaskController.abort();
    }
    
The log below shows the aborted task.
### Delaying tasks
Tasks can be delayed by specifying an integer number of milliseconds in the `options.delay` parameter to `postTask()`. This effectively adds the task to the prioritized queue on a timeout, as might be created using `setTimeout()`. The `delay` is the minimum amount of time before the task is added to the scheduler; it may be longer.
The code below shows two tasks added (as arrow functions) with a delay.
    
    if ("scheduler" in this) {
      // Post task as arrow function with delay of 2 seconds
      scheduler
        .postTask(() => "Task delayed by 2000ms", { delay: 2000 })
        .then((taskResult) => myLog(`${taskResult}`));
      scheduler
        .postTask(() => "Next task should complete in about 2000ms", { delay: 1 })
        .then((taskResult) => myLog(`${taskResult}`));
    }
    
Refresh the page. Note that the second string appears in log after about 2 seconds.
>
### api.Scheduler
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Prioritized_Task_Scheduling_API` 94 94 142 80 No 94 142 66 No 17.0 94 No  
`postTask` 94 94 142 80 No 94 142 66 No 17.0 94 No  
`yield` 129 129 142 115 No 129 142 86 No 28.0 129 No  
### api.Scheduling
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Prioritized_Task_Scheduling_API` 87 87 No 73 No 87 No 62 No 14.0 87 No  
`isInputPending` 87 87 No 73 No 87 No 62 No 14.0 87 No  
  * Building a Faster Web Experience with the postTask Scheduler on the Airbnb blog (2021)
  * Optimizing long tasks on web.dev (2022)


# CSSMathProduct
The `CSSMathProduct` interface of the CSS Typed Object Model API represents the result obtained by calling `add()`, `sub()`, or `toSum()` on `CSSNumericValue`. It inherits properties and methods from its parent `CSSNumericValue`.
CSSStyleValue  CSSNumericValue  CSSMathValue  CSSMathProduct 
## Constructor
`CSSMathProduct()` Experimental
    
Creates a new `CSSMathProduct` object.
## Instance properties
`CSSMathProduct.values`
    
Returns a `CSSNumericArray` object which contains one or more `CSSNumericValue` objects.
## Static methods
The interface may also inherit methods from its parent interface, `CSSMathValue`.
## Instance methods
The interface may also inherit methods from its parent interface, `CSSMathValue`.
# WebTransportDatagramDuplexStream
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `WebTransportDatagramDuplexStream` interface of the WebTransport API represents a duplex stream that can be used for unreliable transport of datagrams between client and server. Provides access to a `ReadableStream` for reading incoming datagrams, a `WritableStream` for writing outgoing datagrams, and various settings and statistics related to the stream.
This is accessed via the `WebTransport.datagrams` property.
"Unreliable" means that transmission of data is not guaranteed, nor is arrival in a specific order. This is fine in some situations and provides very fast delivery. For example, you might want to transmit regular game state updates where each message supersedes the last one that arrives, and order is not important.
## Instance properties
`incomingHighWaterMark`
    
Gets or sets the high water mark for incoming chunks of data — this is the maximum size, in chunks, that the incoming `ReadableStream`'s internal queue can reach before it is considered full. See Internal queues and queuing strategies for more information.
`incomingMaxAge`
    
Gets or sets the maximum age for incoming datagrams, in milliseconds. Returns `null` if no maximum age has been set.
`maxDatagramSize` Read only
    
Returns the maximum allowable size of outgoing datagrams, in bytes, that can be written to `writable`.
`outgoingHighWaterMark`
    
Gets or sets the high water mark for outgoing chunks of data — this is the maximum size, in chunks, that the outgoing `WritableStream`'s internal queue can reach before it is considered full. See Internal queues and queuing strategies for more information.
`outgoingMaxAge`
    
Gets or sets the maximum age for outgoing datagrams, in milliseconds. Returns `null` if no maximum age has been set.
`readable` Read only
    
Returns a `ReadableStream` instance that can be used to read incoming datagrams from the stream.
`writable` Read only Deprecated
    
Returns a `WritableStream` instance that can be used to write outgoing datagrams to the stream.
## Examples
>
### Writing outgoing datagrams
The `writable` property returns a `WritableStream` object that you can write data to using a writer, for transmission to the server:
    
    const writer = transport.datagrams.writable.getWriter();
    const data1 = new Uint8Array([65, 66, 67]);
    const data2 = new Uint8Array([68, 69, 70]);
    writer.write(data1);
    writer.write(data2);
    
### Reading incoming datagrams
The `readable` property returns a `ReadableStream` object that you can use to receive data from the server:
    
    async function readData() {
      const reader = transport.datagrams.readable.getReader();
      while (true) {
        const { value, done } = await reader.read();
        if (done) {
          break;
        }
        // value is a Uint8Array.
        console.log(value);
      }
    }
    
  * Using WebTransport
  * WebSockets API
  * Streams API
  * WebTransport over HTTP/3


# CSSSupportsRule
The `CSSSupportsRule` interface represents a single CSS `@supports` at-rule.
CSSRule  CSSGroupingRule  CSSConditionRule  CSSSupportsRule 
## Instance properties
Inherits properties from its ancestors `CSSConditionRule`, `CSSGroupingRule`, and `CSSRule`.
## Instance methods
Inherits methods from its ancestors `CSSConditionRule`, `CSSGroupingRule`, and `CSSRule`.
## Examples
The CSS includes a CSS feature query using the `@supports` at-rule, containing one style rule. This will be the first CSSRule returned by `document.styleSheets[0].cssRules`. `myRules[0]` therefore returns a `CSSSupportsRule` object.
    
    @supports (display: grid) {
      body {
        color: blue;
      }
    }
    
    
    let myRules = document.styleSheets[0].cssRules;
    console.log(myRules[0]); // a CSSSupportsRule representing the feature query.
    
  * `@supports`


# WEBGL_compressed_texture_pvrtc extension
The `WEBGL_compressed_texture_pvrtc` extension is part of the WebGL API and exposes four PVRTC compressed texture formats.
Compressed textures reduce the amount of memory needed to store a texture on the GPU, allowing for higher resolution textures or more of the same resolution textures.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: PVRTC is typically only available on mobile devices with PowerVR chipsets. It is used in all generations of the iPhone, iPod Touch and iPad and supported on certain Android devices that use a PowerVR GPU.
This extension is available to both, WebGL1 and WebGL2 contexts.
Note: On iOS devices, this extension is named `WEBKIT_WEBGL_compressed_texture_pvrtc`.
## Constants
The compressed texture formats are exposed by four constants and can be used in two functions: `compressedTexImage2D()` (where the `height` and `width` parameters must be powers of 2) and `compressedTexSubImage2D()` (where the height and width parameters must equal the current values of the existing texture and the `xoffset` and `yoffset` parameters must be 0).
`ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG`
    
RGB compression in 4-bit mode. One block for each 4×4 pixels.
`ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG`
    
RGBA compression in 4-bit mode. One block for each 4×4 pixels.
`ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG`
    
RGB compression in 2-bit mode. One block for each 8×4 pixels.
`ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG`
    
RGBA compression in 2-bit mode. One block for each 8×4 pixels.
## Examples
    
    const ext = gl.getExtension("WEBGL_compressed_texture_pvrtc");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.compressedTexImage2D(
      gl.TEXTURE_2D,
      0,
      ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG,
      512,
      512,
      0,
      textureData,
    );
    
  * PVRTC Texture Compression – Wikipedia
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.compressedTexImage2D()`
  * `WebGLRenderingContext.compressedTexSubImage2D()`
  * `WebGLRenderingContext.getParameter()`


# MIDIConnectionEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MIDIConnectionEvent` interface of the Web MIDI API is the event passed to the `statechange` event of the `MIDIAccess` interface and the `statechange` event of the `MIDIPort` interface. This occurs any time a new port becomes available, or when a previously available port becomes unavailable. For example, this event is fired whenever a MIDI device is either plugged in to or unplugged from a computer.
Event  MIDIConnectionEvent 
## Constructor
`MIDIConnectionEvent()`
    
Creates a new `MIDIConnectionEvent` object.
## Instance properties
`MIDIConnectionEvent.port` Read only
    
Returns a reference to a `MIDIPort` instance for a port that has been connected or disconnected.
## Examples
The `Navigator.requestMIDIAccess()` method returns a promise that resolves with a `MIDIAccess` object. When a port changes state, a `MIDIConnectionEvent` is passed to `statechange` event. Information about the port can then be printed to the console.
    
    navigator.requestMIDIAccess().then((access) => {
      access.onstatechange = (event) => {
        console.log(event.port.name, event.port.manufacturer, event.port.state);
      };
    });
    
# CSSPseudoElement
The `CSSPseudoElement` interface represents a pseudo-element that may be the target of an event or animated using the Web Animations API. Instances of this interface may be obtained by calling `Element.pseudo()`.
EventTarget  CSSPseudoElement 
## Instance properties
`CSSPseudoElement.element` Experimental Read only
    
Returns the originating/parent `Element` of the pseudo-element.
`CSSPseudoElement.type` Experimental Read only
    
Returns the pseudo-element selector as a string.
## Instance methods
`CSSPseudoElement` extends `EventTarget`, so it inherits the following methods:
## Examples
>
### Basic example using Element.pseudo
Using pseudo-elements, most modern browsers will automatically add quotation marks around text inside a `<q>` element. (A style rule may be needed to add quotation marks in older browsers.) The example below demonstrates the basic properties of the `CSSPseudoElement` object representing the opening quotation mark.
    
    const element = document.querySelector("q");
    const cssPseudoElement = element.pseudo("::before");
    console.log(cssPseudoElement.element); // Outputs [object HTMLQuoteElement]
    console.log(cssPseudoElement.type); // Outputs '::before'
    
  * `Element.pseudo()`
  * Web Animations API
  * `Element.animate()`


# PannerNode
The `PannerNode` interface defines an audio-processing object that represents the location, direction, and behavior of an audio source signal in a simulated physical space. This `AudioNode` uses right-hand Cartesian coordinates to describe the source's position as a vector and its orientation as a 3D directional cone.
A `PannerNode` always has exactly one input and one output: the input can be mono or stereo but the output is always stereo (2 channels); you can't have panning effects without at least two audio channels!
EventTarget  AudioNode  PannerNode 
Number of inputs `1`  
Number of outputs `1`  
Channel count mode `"clamped-max"`  
Channel count `2`  
Channel interpretation `"speakers"`  
## Constructor
`PannerNode()`
    
Creates a new `PannerNode` object instance.
## Instance properties
Inherits properties from its parent, `AudioNode`.
Note: The orientation and position value are set and retrieved using different syntaxes, since they're stored as `AudioParam` values. Retrieval is done by accessing, for example, `PannerNode.positionX`. While setting the same property is done with `PannerNode.positionX.value`. This is why these values are not marked read only, which is how they appear in the WebIDL.
`PannerNode.coneInnerAngle`
    
A double value describing the angle, in degrees, of a cone inside of which there will be no volume reduction.
`PannerNode.coneOuterAngle`
    
A double value describing the angle, in degrees, of a cone outside of which the volume will be reduced by a constant value, defined by the `coneOuterGain` property.
`PannerNode.coneOuterGain`
    
A double value describing the amount of volume reduction outside the cone defined by the `coneOuterAngle` attribute. Its default value is `0`, meaning that no sound can be heard.
`PannerNode.distanceModel`
    
An enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the listener. Possible values are `"linear"`, `"inverse"` and `"exponential"`. The default value is `"inverse"`.
`PannerNode.maxDistance`
    
A double value representing the maximum distance between the audio source and the listener, after which the volume is not reduced any further.
`PannerNode.orientationX`
    
Represents the horizontal position of the audio source's vector in a right-hand Cartesian coordinate system. While this `AudioParam` cannot be directly changed, its value can be altered using its `value` property. The default is value is 1.
`PannerNode.orientationY`
    
Represents the vertical position of the audio source's vector in a right-hand Cartesian coordinate system. The default is 0. While this `AudioParam` cannot be directly changed, its value can be altered using its `value` property. The default is value is 0.
`PannerNode.orientationZ`
    
Represents the longitudinal (back and forth) position of the audio source's vector in a right-hand Cartesian coordinate system. The default is 0. While this `AudioParam` cannot be directly changed, its value can be altered using its `value` property. The default is value is 0.
`PannerNode.panningModel`
    
An enumerated value determining which spatialization algorithm to use to position the audio in 3D space.
`PannerNode.positionX`
    
Represents the horizontal position of the audio in a right-hand Cartesian coordinate system. The default is 0. While this `AudioParam` cannot be directly changed, its value can be altered using its `value` property. The default is value is 0.
`PannerNode.positionY`
    
Represents the vertical position of the audio in a right-hand Cartesian coordinate system. The default is 0. While this `AudioParam` cannot be directly changed, its value can be altered using its `value` property. The default is value is 0.
`PannerNode.positionZ`
    
Represents the longitudinal (back and forth) position of the audio in a right-hand Cartesian coordinate system. The default is 0. While this `AudioParam` cannot be directly changed, its value can be altered using its `value` property. The default is value is 0.
`PannerNode.refDistance`
    
A double value representing the reference distance for reducing volume as the audio source moves further from the listener. For distances greater than this the volume will be reduced based on `rolloffFactor` and `distanceModel`.
`PannerNode.rolloffFactor`
    
A double value describing how quickly the volume is reduced as the source moves away from the listener. This value is used by all distance models.
## Instance methods
Inherits methods from its parent, `AudioNode`.
`PannerNode.setPosition()` Deprecated
    
Defines the position of the audio source relative to the listener (represented by an `AudioListener` object stored in the `BaseAudioContext.listener` attribute.)
`PannerNode.setOrientation()` Deprecated
    
Defines the direction the audio source is playing in.
## Examples
See `BaseAudioContext.createPanner()` for example code.
  * Using the Web Audio API


# Web APIs
When writing code for the Web, there are a large number of Web APIs available. Below is a list of all the APIs and interfaces (object types) that you may be able to use while developing your Web app or site.
Web APIs are typically used with JavaScript, although this doesn't always have to be the case.
This is a list of all the APIs that are available.
### A
  * Attribution Reporting API Experimental
  * Audio Output Devices API Experimental


### B
  * Background Fetch API Experimental
  * Background Synchronization API
  * Background Tasks API
  * Badging API
  * Barcode Detection API Experimental
  * Battery Status API
  * Beacon API
  * Web Bluetooth API Experimental
  * Broadcast Channel API


### C
  * CSS Custom Highlight API
  * CSS Font Loading API
  * CSS Painting API Experimental
  * CSS Properties and Values API
  * CSS Typed Object Model API
  * CSS Object Model (CSSOM)
  * CSSOM view API
  * Canvas API
  * Channel Messaging API
  * Clipboard API
  * Compression Streams API
  * Compute Pressure API Experimental
  * Console API
  * Contact Picker API Experimental
  * Content Index API Experimental
  * Cookie Store API
  * Credential Management API


### D
  * Document Object Model (DOM)
  * Device Memory API
  * Device orientation events
  * Device Posture API Experimental
  * Document Picture-in-Picture API Experimental


### E
  * EditContext API Experimental
  * Encoding API
  * Encrypted Media Extensions API
  * EyeDropper API Experimental


### F
  * Federated Credential Management (FedCM) API Experimental
  * Fenced Frame API Experimental
  * Fetch API
  * File API
  * File System API
  * File and Directory Entries API
  * Force Touch events Non-standard
  * Fullscreen API


### G
  * Gamepad API
  * Geolocation API
  * Geometry interfaces


### H
  * The HTML DOM API
  * HTML Drag and Drop API
  * HTML Sanitizer API Experimental
  * History API
  * Houdini APIs


### I
  * Idle Detection API Experimental
  * MediaStream Image Capture API
  * IndexedDB API
  * Ink API Experimental
  * InputDeviceCapabilities API Experimental
  * Insertable Streams for MediaStreamTrack API Experimental
  * Intersection Observer API
  * Invoker Commands API


### J
  * JS Self-Profiling API Experimental


### K
  * Keyboard API Experimental


### L
  * Launch Handler API Experimental
  * Local Font Access API Experimental


### M
  * Media Capabilities API
  * Media Capture and Streams API (Media Stream)
  * Media Session API
  * Media Source API
  * MediaStream Recording API


### N
  * Navigation API Experimental
  * Network Information API


### P
  * Page Visibility API
  * Payment Handler API Experimental
  * Payment Request API
  * Performance APIs
  * Web Periodic Background Synchronization API Experimental
  * Permissions API
  * Picture-in-Picture API
  * Pointer events
  * Pointer Lock API
  * Popover API
  * Presentation API Experimental
  * Prioritized Task Scheduling API
  * Push API


### R
  * Remote Playback API
  * Reporting API
  * Resize Observer API


### S
  * SVG API
  * Screen Capture API
  * Screen Orientation API
  * Screen Wake Lock API
  * Selection API
  * Sensor APIs
  * Server-sent events
  * Service Worker API
  * Shared Storage API Experimental
  * Speculation Rules API Experimental Non-standard
  * Storage API
  * Storage Access API
  * Streams API
  * Summarizer API Experimental


### T
  * Topics API Experimental Non-standard
  * Touch events
  * Translator and Language Detector APIs Experimental
  * Trusted Types API


### U
  * UI Events
  * URL API
  * URL Fragment Text Directives
  * URL Pattern API
  * User-Agent Client Hints API Experimental


### V
  * Vibration API
  * View Transition API
  * VirtualKeyboard API Experimental


### W
  * Web Animations API
  * Web Audio API
  * Web Authentication API
  * Web Components
  * Web Crypto API
  * Web Locks API
  * Web MIDI API
  * Web NFC API Experimental
  * Notifications API
  * Web Serial API Experimental
  * Web Share API
  * Web Speech API
  * Web Storage API
  * Web Workers API
  * WebCodecs API
  * WebGL: 2D and 3D graphics for the web
  * WebGPU API
  * WebHID API Experimental
  * WebOTP API Experimental
  * WebRTC API
  * The WebSocket API (WebSockets)
  * WebTransport API
  * WebUSB API Experimental
  * WebVR API Non-standard Deprecated
  * WebVTT API
  * WebXR Device API Experimental
  * Window Controls Overlay API Experimental
  * Window Management API Experimental


### X
  * XMLHttpRequest API


### f
  * fetchLater() API Experimental


## Interfaces
This is a list of all the interfaces (that is, types of objects) that are available.
### A
  * `AbortController`
  * `AbortSignal`
  * `AbsoluteOrientationSensor`
  * `AbstractRange`
  * `Accelerometer` Experimental
  * `AesCbcParams`
  * `AesCtrParams`
  * `AesGcmParams`
  * `AesKeyGenParams`
  * `AmbientLightSensor` Experimental
  * `AnalyserNode`
  * `ANGLE_instanced_arrays`
  * `Animation`
  * `AnimationEffect`
  * `AnimationEvent`
  * `AnimationPlaybackEvent`
  * `AnimationTimeline`
  * `Attr`
  * `AudioBuffer`
  * `AudioBufferSourceNode`
  * `AudioContext`
  * `AudioData`
  * `AudioDecoder`
  * `AudioDestinationNode`
  * `AudioEncoder`
  * `AudioListener`
  * `AudioNode`
  * `AudioParam`
  * `AudioParamDescriptor`
  * `AudioParamMap`
  * `AudioProcessingEvent` Deprecated
  * `AudioScheduledSourceNode`
  * `AudioSinkInfo` Experimental
  * `AudioTrack`
  * `AudioTrackList`
  * `AudioWorklet`
  * `AudioWorkletGlobalScope`
  * `AudioWorkletNode`
  * `AudioWorkletProcessor`
  * `AuthenticatorAssertionResponse`
  * `AuthenticatorAttestationResponse`
  * `AuthenticatorResponse`


### B
  * `BackgroundFetchEvent` Experimental
  * `BackgroundFetchManager` Experimental
  * `BackgroundFetchRecord` Experimental
  * `BackgroundFetchRegistration` Experimental
  * `BackgroundFetchUpdateUIEvent` Experimental
  * `BarcodeDetector` Experimental
  * `BarProp`
  * `BaseAudioContext`
  * `BatteryManager`
  * `BeforeInstallPromptEvent` Experimental Non-standard
  * `BeforeUnloadEvent`
  * `BiquadFilterNode`
  * `Blob`
  * `BlobEvent`
  * `Bluetooth` Experimental
  * `BluetoothCharacteristicProperties` Experimental
  * `BluetoothDevice` Experimental
  * `BluetoothRemoteGATTCharacteristic` Experimental
  * `BluetoothRemoteGATTDescriptor` Experimental
  * `BluetoothRemoteGATTServer` Experimental
  * `BluetoothRemoteGATTService` Experimental
  * `BluetoothUUID`
  * `BroadcastChannel`
  * `BrowserCaptureMediaStreamTrack` Experimental
  * `ByteLengthQueuingStrategy`


### C
  * `Cache`
  * `CacheStorage`
  * `CanMakePaymentEvent` Experimental
  * `CanvasCaptureMediaStreamTrack`
  * `CanvasGradient`
  * `CanvasPattern`
  * `CanvasRenderingContext2D`
  * `CaptureController` Experimental
  * `CaretPosition`
  * `CDATASection`
  * `ChannelMergerNode`
  * `ChannelSplitterNode`
  * `ChapterInformation` Experimental
  * `CharacterBoundsUpdateEvent` Experimental
  * `CharacterData`
  * `Client`
  * `Clients`
  * `Clipboard`
  * `ClipboardEvent`
  * `ClipboardItem`
  * `CloseEvent`
  * `CloseWatcher` Experimental
  * `CommandEvent`
  * `Comment`
  * `CompositionEvent`
  * `CompressionStream`


### c
  * `console`


### C
  * `ConstantSourceNode`
  * `ContactAddress` Experimental
  * `ContactsManager` Experimental
  * `ContentIndex` Experimental
  * `ContentIndexEvent` Experimental
  * `ContentVisibilityAutoStateChangeEvent`
  * `ConvolverNode`
  * `CookieChangeEvent`
  * `CookieStore`
  * `CookieStoreManager`
  * `CountQueuingStrategy`
  * `CreateMonitor` Experimental
  * `Credential`
  * `CredentialsContainer`
  * `CropTarget` Experimental
  * `Crypto`
  * `CryptoKey`
  * `CryptoKeyPair`
  * `CSPViolationReportBody`
  * `CSS`
  * `CSSAnimation`
  * `CSSConditionRule`
  * `CSSContainerRule`
  * `CSSCounterStyleRule`
  * `CSSFontFaceRule`
  * `CSSFontFeatureValuesRule`
  * `CSSFontPaletteValuesRule`
  * `CSSGroupingRule`
  * `CSSImageValue`
  * `CSSImportRule`
  * `CSSKeyframeRule`
  * `CSSKeyframesRule`
  * `CSSKeywordValue`
  * `CSSLayerBlockRule`
  * `CSSLayerStatementRule`
  * `CSSMathInvert`
  * `CSSMathMax`
  * `CSSMathMin`
  * `CSSMathNegate`
  * `CSSMathProduct`
  * `CSSMathSum`
  * `CSSMathValue`
  * `CSSMatrixComponent`
  * `CSSMediaRule`
  * `CSSNamespaceRule`
  * `CSSNestedDeclarations`
  * `CSSNumericArray`
  * `CSSNumericValue`
  * `CSSPageDescriptors`
  * `CSSPageRule`
  * `CSSPerspective`
  * `CSSPositionTryDescriptors`
  * `CSSPositionTryRule`
  * `CSSPositionValue` Non-standard Deprecated
  * `CSSPrimitiveValue` Deprecated
  * `CSSPropertyRule`
  * `CSSPseudoElement` Experimental
  * `CSSRotate`
  * `CSSRule`
  * `CSSRuleList`
  * `CSSScale`
  * `CSSScopeRule`
  * `CSSSkew`
  * `CSSSkewX`
  * `CSSSkewY`
  * `CSSStartingStyleRule`
  * `CSSStyleDeclaration`
  * `CSSStyleRule`
  * `CSSStyleSheet`
  * `CSSStyleValue`
  * `CSSSupportsRule`
  * `CSSTransformComponent`
  * `CSSTransformValue`
  * `CSSTransition`
  * `CSSTranslate`
  * `CSSUnitValue`
  * `CSSUnparsedValue`
  * `CSSValue` Deprecated
  * `CSSValueList` Deprecated
  * `CSSVariableReferenceValue`
  * `CustomElementRegistry`
  * `CustomEvent`
  * `CustomStateSet`


### D
  * `DataTransfer`
  * `DataTransferItem`
  * `DataTransferItemList`
  * `DecompressionStream`
  * `DedicatedWorkerGlobalScope`
  * `DeferredRequestInit` Experimental
  * `DelayNode`
  * `DelegatedInkTrailPresenter` Experimental
  * `DeprecationReportBody` Experimental
  * `DeviceMotionEvent`
  * `DeviceMotionEventAcceleration`
  * `DeviceMotionEventRotationRate`
  * `DeviceOrientationEvent`
  * `DevicePosture` Experimental
  * `DirectoryEntrySync` Non-standard Deprecated
  * `DirectoryReaderSync` Non-standard Deprecated
  * `Document`
  * `DocumentFragment`
  * `DocumentPictureInPicture` Experimental
  * `DocumentPictureInPictureEvent` Experimental
  * `DocumentTimeline`
  * `DocumentType`
  * `DOMError` Deprecated
  * `DOMException`
  * `DOMHighResTimeStamp`
  * `DOMImplementation`
  * `DOMMatrix`
  * `DOMMatrixReadOnly`
  * `DOMParser`
  * `DOMPoint`
  * `DOMPointReadOnly`
  * `DOMQuad`
  * `DOMRect`
  * `DOMRectList`
  * `DOMRectReadOnly`
  * `DOMStringList`
  * `DOMStringMap`
  * `DOMTokenList`
  * `DragEvent`
  * `DynamicsCompressorNode`


### E
  * `EcdhKeyDeriveParams`
  * `EcdsaParams`
  * `EcKeyGenParams`
  * `EcKeyImportParams`
  * `EditContext` Experimental
  * `Element`
  * `ElementInternals`
  * `EncodedAudioChunk`
  * `EncodedVideoChunk`
  * `ErrorEvent`
  * `Event`
  * `EventCounts`
  * `EventSource`
  * `EventTarget`
  * `ExtendableCookieChangeEvent`
  * `ExtendableEvent`
  * `ExtendableMessageEvent`
  * `EyeDropper` Experimental


### F
  * `FeaturePolicy` Experimental
  * `FederatedCredential` Experimental
  * `FederatedCredentialInit`
  * `Fence` Experimental
  * `FencedFrameConfig` Experimental
  * `FetchEvent`
  * `FetchLaterResult` Experimental
  * `File`
  * `FileEntrySync` Non-standard Deprecated
  * `FileList`
  * `FileReader`
  * `FileReaderSync`
  * `FileSystem`
  * `FileSystemChangeRecord`
  * `FileSystemDirectoryEntry`
  * `FileSystemDirectoryHandle`
  * `FileSystemDirectoryReader`
  * `FileSystemEntry`
  * `FileSystemFileEntry`
  * `FileSystemFileHandle`
  * `FileSystemHandle`
  * `FileSystemObserver` Experimental Non-standard
  * `FileSystemSync` Non-standard Deprecated
  * `FileSystemSyncAccessHandle`
  * `FileSystemWritableFileStream`
  * `FocusEvent`
  * `FontData` Experimental
  * `FontFace`
  * `FontFaceSet`
  * `FontFaceSetLoadEvent`
  * `FormData`
  * `FormDataEvent`
  * `FragmentDirective`


### G
  * `GainNode`
  * `Gamepad`
  * `GamepadButton`
  * `GamepadEvent`
  * `GamepadHapticActuator`
  * `GamepadPose` Experimental
  * `Geolocation`
  * `GeolocationCoordinates`
  * `GeolocationPosition`
  * `GeolocationPositionError`
  * `GestureEvent` Non-standard
  * `GPU`
  * `GPUAdapter`
  * `GPUAdapterInfo`
  * `GPUBindGroup`
  * `GPUBindGroupLayout`
  * `GPUBuffer`
  * `GPUCanvasContext`
  * `GPUCommandBuffer`
  * `GPUCommandEncoder`
  * `GPUCompilationInfo`
  * `GPUCompilationMessage`
  * `GPUComputePassEncoder`
  * `GPUComputePipeline`
  * `GPUDevice`
  * `GPUDeviceLostInfo`
  * `GPUError`
  * `GPUExternalTexture`
  * `GPUInternalError`
  * `GPUOutOfMemoryError`
  * `GPUPipelineError`
  * `GPUPipelineLayout`
  * `GPUQuerySet`
  * `GPUQueue`
  * `GPURenderBundle`
  * `GPURenderBundleEncoder`
  * `GPURenderPassEncoder`
  * `GPURenderPipeline`
  * `GPUSampler`
  * `GPUShaderModule`
  * `GPUSupportedFeatures`
  * `GPUSupportedLimits`
  * `GPUTexture`
  * `GPUTextureView`
  * `GPUUncapturedErrorEvent`
  * `GPUValidationError`
  * `GravitySensor`
  * `Gyroscope`


### H
  * `HashChangeEvent`
  * `Headers`
  * `HID` Experimental
  * `HIDConnectionEvent` Experimental
  * `HIDDevice` Experimental
  * `HIDInputReportEvent` Experimental
  * `Highlight`
  * `HighlightRegistry`
  * `History`
  * `HkdfParams`
  * `HmacImportParams`
  * `HmacKeyGenParams`
  * `HMDVRDevice` Non-standard Deprecated
  * `HTMLAllCollection`
  * `HTMLAnchorElement`
  * `HTMLAreaElement`
  * `HTMLAudioElement`
  * `HTMLBaseElement`
  * `HTMLBodyElement`
  * `HTMLBRElement`
  * `HTMLButtonElement`
  * `HTMLCanvasElement`
  * `HTMLCollection`
  * `HTMLDataElement`
  * `HTMLDataListElement`
  * `HTMLDetailsElement`
  * `HTMLDialogElement`
  * `HTMLDivElement`
  * `HTMLDListElement`
  * `HTMLDocument`
  * `HTMLElement`
  * `HTMLEmbedElement`
  * `HTMLFencedFrameElement` Experimental
  * `HTMLFieldSetElement`
  * `HTMLFontElement` Deprecated
  * `HTMLFormControlsCollection`
  * `HTMLFormElement`
  * `HTMLFrameSetElement` Deprecated
  * `HTMLHeadElement`
  * `HTMLHeadingElement`
  * `HTMLHRElement`
  * `HTMLHtmlElement`
  * `HTMLIFrameElement`
  * `HTMLImageElement`
  * `HTMLInputElement`
  * `HTMLLabelElement`
  * `HTMLLegendElement`
  * `HTMLLIElement`
  * `HTMLLinkElement`
  * `HTMLMapElement`
  * `HTMLMarqueeElement` Deprecated
  * `HTMLMediaElement`
  * `HTMLMenuElement`
  * `HTMLMetaElement`
  * `HTMLMeterElement`
  * `HTMLModElement`
  * `HTMLObjectElement`
  * `HTMLOListElement`
  * `HTMLOptGroupElement`
  * `HTMLOptionElement`
  * `HTMLOptionsCollection`
  * `HTMLOutputElement`
  * `HTMLParagraphElement`
  * `HTMLParamElement` Deprecated
  * `HTMLPictureElement`
  * `HTMLPreElement`
  * `HTMLProgressElement`
  * `HTMLQuoteElement`
  * `HTMLScriptElement`
  * `HTMLSelectedContentElement` Experimental Non-standard
  * `HTMLSelectElement`
  * `HTMLSlotElement`
  * `HTMLSourceElement`
  * `HTMLSpanElement`
  * `HTMLStyleElement`
  * `HTMLTableCaptionElement`
  * `HTMLTableCellElement`
  * `HTMLTableColElement`
  * `HTMLTableElement`
  * `HTMLTableRowElement`
  * `HTMLTableSectionElement`
  * `HTMLTemplateElement`
  * `HTMLTextAreaElement`
  * `HTMLTimeElement`
  * `HTMLTitleElement`
  * `HTMLTrackElement`
  * `HTMLUListElement`
  * `HTMLUnknownElement`
  * `HTMLVideoElement`


### I
  * `IDBCursor`
  * `IDBCursorWithValue`
  * `IDBDatabase`
  * `IDBFactory`
  * `IDBIndex`
  * `IDBKeyRange`
  * `IDBObjectStore`
  * `IDBOpenDBRequest`
  * `IDBRequest`
  * `IDBTransaction`
  * `IDBVersionChangeEvent`
  * `IdentityCredential` Experimental
  * `IdentityCredentialError` Experimental
  * `IdentityCredentialRequestOptions` Experimental
  * `IdentityProvider` Experimental
  * `IdleDeadline`
  * `IdleDetector` Experimental
  * `IIRFilterNode`
  * `ImageBitmap`
  * `ImageBitmapRenderingContext`
  * `ImageCapture`
  * `ImageData`
  * `ImageDecoder`
  * `ImageTrack`
  * `ImageTrackList`
  * `Ink` Experimental
  * `InputDeviceCapabilities` Experimental
  * `InputDeviceInfo`
  * `InputEvent`
  * `InstallEvent`
  * `IntegrityViolationReportBody` Experimental
  * `IntersectionObserver`
  * `IntersectionObserverEntry`
  * `InterventionReportBody` Experimental


### K
  * `Keyboard` Experimental
  * `KeyboardEvent`
  * `KeyboardLayoutMap` Experimental
  * `KeyframeEffect`


### L
  * `LanguageDetector` Experimental
  * `LargestContentfulPaint`
  * `LaunchParams` Experimental
  * `LaunchQueue` Experimental
  * `LayoutShift` Experimental
  * `LayoutShiftAttribution` Experimental
  * `LinearAccelerationSensor`
  * `Location`
  * `Lock`
  * `LockManager`


### M
  * `Magnetometer` Experimental
  * `MathMLElement`
  * `MediaCapabilities`
  * `MediaDeviceInfo`
  * `MediaDevices`
  * `MediaElementAudioSourceNode`
  * `MediaEncryptedEvent`
  * `MediaError`
  * `MediaKeyMessageEvent`
  * `MediaKeys`
  * `MediaKeySession`
  * `MediaKeyStatusMap`
  * `MediaKeySystemAccess`
  * `MediaList`
  * `MediaMetadata`
  * `MediaQueryList`
  * `MediaQueryListEvent`
  * `MediaRecorder`
  * `MediaRecorderErrorEvent` Non-standard Deprecated
  * `MediaSession`
  * `MediaSource`
  * `MediaSourceHandle`
  * `MediaStream`
  * `MediaStreamAudioDestinationNode`
  * `MediaStreamAudioSourceNode`
  * `MediaStreamEvent` Non-standard Deprecated
  * `MediaStreamTrack`
  * `MediaStreamTrackAudioSourceNode`
  * `MediaStreamTrackEvent`
  * `MediaStreamTrackGenerator` Experimental Non-standard
  * `MediaStreamTrackProcessor`
  * `MediaTrackConstraints`
  * `MediaTrackSettings`
  * `MediaTrackSupportedConstraints`
  * `MerchantValidationEvent` Deprecated
  * `MessageChannel`
  * `MessageEvent`
  * `MessagePort`
  * `Metadata` Experimental Non-standard
  * `MIDIAccess`
  * `MIDIConnectionEvent`
  * `MIDIInput`
  * `MIDIInputMap`
  * `MIDIMessageEvent`
  * `MIDIOutput`
  * `MIDIOutputMap`
  * `MIDIPort`
  * `MimeType` Deprecated
  * `MimeTypeArray` Deprecated
  * `MouseEvent`
  * `MouseScrollEvent` Non-standard Deprecated
  * `MutationEvent` Non-standard Deprecated
  * `MutationObserver`
  * `MutationRecord`


### N
  * `NamedNodeMap`
  * `NavigateEvent` Experimental
  * `Navigation` Experimental
  * `NavigationActivation` Experimental
  * `NavigationCurrentEntryChangeEvent` Experimental
  * `NavigationDestination` Experimental
  * `NavigationHistoryEntry` Experimental
  * `NavigationPreloadManager`
  * `NavigationTransition` Experimental
  * `Navigator`
  * `NavigatorLogin`
  * `NavigatorUAData` Experimental
  * `NDEFMessage` Experimental
  * `NDEFReader` Experimental
  * `NDEFReadingEvent` Experimental
  * `NDEFRecord` Experimental
  * `NetworkInformation`
  * `Node`
  * `NodeIterator`
  * `NodeList`
  * `Notification`
  * `NotificationEvent`
  * `NotRestoredReasonDetails` Experimental
  * `NotRestoredReasons` Experimental


### O
  * `OES_draw_buffers_indexed`
  * `OfflineAudioCompletionEvent`
  * `OfflineAudioContext`
  * `OffscreenCanvas`
  * `OffscreenCanvasRenderingContext2D`
  * `OrientationSensor`
  * `OscillatorNode`
  * `OTPCredential` Experimental
  * `OverconstrainedError`


### P
  * `PageRevealEvent`
  * `PageSwapEvent`
  * `PageTransitionEvent`
  * `PaintRenderingContext2D`
  * `PaintSize`
  * `PaintWorkletGlobalScope` Experimental
  * `PannerNode`
  * `PasswordCredential` Experimental
  * `PasswordCredentialInit`
  * `Path2D`
  * `PaymentAddress` Non-standard Deprecated
  * `PaymentManager` Experimental
  * `PaymentMethodChangeEvent`
  * `PaymentRequest`
  * `PaymentRequestEvent` Experimental
  * `PaymentRequestUpdateEvent`
  * `PaymentResponse`
  * `Pbkdf2Params`
  * `Performance`
  * `PerformanceElementTiming` Experimental
  * `PerformanceEntry`
  * `PerformanceEventTiming`
  * `PerformanceLongAnimationFrameTiming` Experimental
  * `PerformanceLongTaskTiming` Experimental
  * `PerformanceMark`
  * `PerformanceMeasure`
  * `PerformanceNavigation` Deprecated
  * `PerformanceNavigationTiming`
  * `PerformanceObserver`
  * `PerformanceObserverEntryList`
  * `PerformancePaintTiming`
  * `PerformanceResourceTiming`
  * `PerformanceScriptTiming` Experimental
  * `PerformanceServerTiming`
  * `PerformanceTiming` Deprecated
  * `PeriodicSyncEvent` Experimental
  * `PeriodicSyncManager` Experimental
  * `PeriodicWave`
  * `Permissions`
  * `PermissionStatus`
  * `PictureInPictureEvent`
  * `PictureInPictureWindow`
  * `Plugin` Deprecated
  * `PluginArray` Deprecated
  * `Point` Non-standard Deprecated
  * `PointerEvent`
  * `PopStateEvent`
  * `PositionSensorVRDevice` Non-standard Deprecated
  * `Presentation` Experimental
  * `PresentationAvailability` Experimental
  * `PresentationConnection` Experimental
  * `PresentationConnectionAvailableEvent` Experimental
  * `PresentationConnectionCloseEvent` Experimental
  * `PresentationConnectionList` Experimental
  * `PresentationReceiver` Experimental
  * `PresentationRequest` Experimental
  * `PressureObserver` Experimental
  * `PressureRecord` Experimental
  * `ProcessingInstruction`
  * `Profiler` Experimental
  * `ProgressEvent`
  * `PromiseRejectionEvent`
  * `PublicKeyCredential`
  * `PublicKeyCredentialCreationOptions`
  * `PublicKeyCredentialRequestOptions`
  * `PushEvent`
  * `PushManager`
  * `PushMessageData`
  * `PushSubscription`
  * `PushSubscriptionOptions`


### Q
  * `QuotaExceededError` Experimental


### R
  * `RadioNodeList`
  * `Range`
  * `ReadableByteStreamController`
  * `ReadableStream`
  * `ReadableStreamBYOBReader`
  * `ReadableStreamBYOBRequest`
  * `ReadableStreamDefaultController`
  * `ReadableStreamDefaultReader`
  * `RelativeOrientationSensor`
  * `RemotePlayback`
  * `Report`
  * `ReportBody`
  * `ReportingObserver`
  * `Request`
  * `RequestInit`
  * `ResizeObserver`
  * `ResizeObserverEntry`
  * `ResizeObserverSize`
  * `Response`
  * `RestrictionTarget` Experimental
  * `RsaHashedImportParams`
  * `RsaHashedKeyGenParams`
  * `RsaOaepParams`
  * `RsaPssParams`
  * `RTCAudioSourceStats`
  * `RTCCertificate`
  * `RTCCertificateStats`
  * `RTCCodecStats`
  * `RTCDataChannel`
  * `RTCDataChannelEvent`
  * `RTCDataChannelStats`
  * `RTCDtlsTransport`
  * `RTCDTMFSender`
  * `RTCDTMFToneChangeEvent`
  * `RTCEncodedAudioFrame`
  * `RTCEncodedVideoFrame`
  * `RTCError`
  * `RTCErrorEvent`
  * `RTCIceCandidate`
  * `RTCIceCandidatePair`
  * `RTCIceCandidatePairStats`
  * `RTCIceCandidateStats`
  * `RTCIceParameters`
  * `RTCIceTransport`
  * `RTCIdentityAssertion` Experimental
  * `RTCInboundRtpStreamStats`
  * `RTCOutboundRtpStreamStats`
  * `RTCPeerConnection`
  * `RTCPeerConnectionIceErrorEvent`
  * `RTCPeerConnectionIceEvent`
  * `RTCPeerConnectionStats`
  * `RTCRemoteInboundRtpStreamStats`
  * `RTCRemoteOutboundRtpStreamStats`
  * `RTCRtpReceiver`
  * `RTCRtpScriptTransform`
  * `RTCRtpScriptTransformer`
  * `RTCRtpSender`
  * `RTCRtpTransceiver`
  * `RTCSctpTransport`
  * `RTCSessionDescription`
  * `RTCStatsReport`
  * `RTCTrackEvent`
  * `RTCTransformEvent`
  * `RTCTransportStats`
  * `RTCVideoSourceStats`


### S
  * `Sanitizer` Experimental
  * `SanitizerConfig` Experimental
  * `Scheduler`
  * `Scheduling` Experimental
  * `Screen`
  * `ScreenDetailed` Experimental
  * `ScreenDetails` Experimental
  * `ScreenOrientation`
  * `ScriptProcessorNode` Deprecated
  * `ScrollTimeline`
  * `SecurePaymentConfirmationRequest`
  * `SecurityPolicyViolationEvent`
  * `Selection`
  * `Sensor`
  * `SensorErrorEvent`
  * `Serial` Experimental
  * `SerialPort` Experimental
  * `ServiceWorker`
  * `ServiceWorkerContainer`
  * `ServiceWorkerGlobalScope`
  * `ServiceWorkerRegistration`
  * `ShadowRoot`
  * `SharedStorage` Experimental
  * `SharedStorageOperation` Experimental
  * `SharedStorageRunOperation` Experimental
  * `SharedStorageSelectURLOperation` Experimental
  * `SharedStorageWorklet` Experimental
  * `SharedStorageWorkletGlobalScope` Experimental
  * `SharedWorker`
  * `SharedWorkerGlobalScope`
  * `SnapEvent` Experimental
  * `SourceBuffer`
  * `SourceBufferList`
  * `SpeechGrammar` Non-standard Deprecated
  * `SpeechGrammarList` Experimental
  * `SpeechRecognition`
  * `SpeechRecognitionAlternative`
  * `SpeechRecognitionErrorEvent`
  * `SpeechRecognitionEvent`
  * `SpeechRecognitionResult`
  * `SpeechRecognitionResultList`
  * `SpeechSynthesis`
  * `SpeechSynthesisErrorEvent`
  * `SpeechSynthesisEvent`
  * `SpeechSynthesisUtterance`
  * `SpeechSynthesisVoice`
  * `StaticRange`
  * `StereoPannerNode`
  * `Storage`
  * `StorageAccessHandle`
  * `StorageEvent`
  * `StorageManager`
  * `StylePropertyMap`
  * `StylePropertyMapReadOnly`
  * `StyleSheet`
  * `StyleSheetList`
  * `SubmitEvent`
  * `SubtleCrypto`
  * `Summarizer` Experimental
  * `SVGAElement`
  * `SVGAngle`
  * `SVGAnimateColorElement` Deprecated
  * `SVGAnimatedAngle`
  * `SVGAnimatedBoolean`
  * `SVGAnimatedEnumeration`
  * `SVGAnimatedInteger`
  * `SVGAnimatedLength`
  * `SVGAnimatedLengthList`
  * `SVGAnimatedNumber`
  * `SVGAnimatedNumberList`
  * `SVGAnimatedPreserveAspectRatio`
  * `SVGAnimatedRect`
  * `SVGAnimatedString`
  * `SVGAnimatedTransformList`
  * `SVGAnimateElement`
  * `SVGAnimateMotionElement`
  * `SVGAnimateTransformElement`
  * `SVGAnimationElement`
  * `SVGCircleElement`
  * `SVGClipPathElement`
  * `SVGComponentTransferFunctionElement`
  * `SVGDefsElement`
  * `SVGDescElement`
  * `SVGDiscardElement` Deprecated
  * `SVGElement`
  * `SVGEllipseElement`
  * `SVGFEBlendElement`
  * `SVGFEColorMatrixElement`
  * `SVGFEComponentTransferElement`
  * `SVGFECompositeElement`
  * `SVGFEConvolveMatrixElement`
  * `SVGFEDiffuseLightingElement`
  * `SVGFEDisplacementMapElement`
  * `SVGFEDistantLightElement`
  * `SVGFEDropShadowElement`
  * `SVGFEFloodElement`
  * `SVGFEFuncAElement`
  * `SVGFEFuncBElement`
  * `SVGFEFuncGElement`
  * `SVGFEFuncRElement`
  * `SVGFEGaussianBlurElement`
  * `SVGFEImageElement`
  * `SVGFEMergeElement`
  * `SVGFEMergeNodeElement`
  * `SVGFEMorphologyElement`
  * `SVGFEOffsetElement`
  * `SVGFEPointLightElement`
  * `SVGFESpecularLightingElement`
  * `SVGFESpotLightElement`
  * `SVGFETileElement`
  * `SVGFETurbulenceElement`
  * `SVGFilterElement`
  * `SVGForeignObjectElement`
  * `SVGGElement`
  * `SVGGeometryElement`
  * `SVGGradientElement`
  * `SVGGraphicsElement`
  * `SVGImageElement`
  * `SVGLength`
  * `SVGLengthList`
  * `SVGLinearGradientElement`
  * `SVGLineElement`
  * `SVGMarkerElement`
  * `SVGMaskElement`
  * `SVGMetadataElement`
  * `SVGMPathElement`
  * `SVGNumber`
  * `SVGNumberList`
  * `SVGPathElement`
  * `SVGPatternElement`
  * `SVGPoint` Deprecated
  * `SVGPointList`
  * `SVGPolygonElement`
  * `SVGPolylineElement`
  * `SVGPreserveAspectRatio`
  * `SVGRadialGradientElement`
  * `SVGRect`
  * `SVGRectElement`
  * `SVGRenderingIntent` Deprecated
  * `SVGScriptElement`
  * `SVGSetElement`
  * `SVGStopElement`
  * `SVGStringList`
  * `SVGStyleElement`
  * `SVGSVGElement`
  * `SVGSwitchElement`
  * `SVGSymbolElement`
  * `SVGTextContentElement`
  * `SVGTextElement`
  * `SVGTextPathElement`
  * `SVGTextPositioningElement`
  * `SVGTitleElement`
  * `SVGTransform`
  * `SVGTransformList`
  * `SVGTSpanElement`
  * `SVGUnitTypes`
  * `SVGUseElement`
  * `SVGViewElement`
  * `SyncEvent`
  * `SyncManager`


### T
  * `TaskAttributionTiming` Experimental
  * `TaskController`
  * `TaskPriorityChangeEvent`
  * `TaskSignal`
  * `Text`
  * `TextDecoder`
  * `TextDecoderStream`
  * `TextEncoder`
  * `TextEncoderStream`
  * `TextEvent` Deprecated
  * `TextFormat` Experimental
  * `TextFormatUpdateEvent` Experimental
  * `TextMetrics`
  * `TextTrack`
  * `TextTrackCue`
  * `TextTrackCueList`
  * `TextTrackList`
  * `TextUpdateEvent` Experimental
  * `TimeEvent`
  * `TimeRanges`
  * `ToggleEvent`
  * `Touch`
  * `TouchEvent`
  * `TouchList`
  * `TrackEvent`
  * `TransformStream`
  * `TransformStreamDefaultController`
  * `TransitionEvent`
  * `Translator` Experimental
  * `TreeWalker`
  * `TrustedHTML`
  * `TrustedScript`
  * `TrustedScriptURL`
  * `TrustedTypePolicy`
  * `TrustedTypePolicyFactory`


### U
  * `UIEvent`
  * `URL`
  * `URLPattern`
  * `URLSearchParams`
  * `USB` Experimental
  * `USBAlternateInterface` Experimental
  * `USBConfiguration` Experimental
  * `USBConnectionEvent` Experimental
  * `USBDevice` Experimental
  * `USBEndpoint` Experimental
  * `USBInterface` Experimental
  * `USBInTransferResult` Experimental
  * `USBIsochronousInTransferPacket` Experimental
  * `USBIsochronousInTransferResult` Experimental
  * `USBIsochronousOutTransferPacket` Experimental
  * `USBIsochronousOutTransferResult` Experimental
  * `USBOutTransferResult` Experimental
  * `UserActivation`


### V
  * `ValidityState`
  * `VideoColorSpace`
  * `VideoDecoder`
  * `VideoEncoder`
  * `VideoFrame`
  * `VideoPlaybackQuality`
  * `VideoTrack`
  * `VideoTrackGenerator` Experimental
  * `VideoTrackList`
  * `ViewTimeline`
  * `ViewTransition`
  * `VirtualKeyboard` Experimental
  * `VisibilityStateEntry` Experimental
  * `VisualViewport`
  * `VRDisplay` Non-standard Deprecated
  * `VRDisplayCapabilities` Non-standard Deprecated
  * `VRDisplayEvent` Non-standard Deprecated
  * `VREyeParameters` Non-standard Deprecated
  * `VRFieldOfView` Non-standard Deprecated
  * `VRFrameData` Non-standard Deprecated
  * `VRLayerInit` Non-standard Deprecated
  * `VRPose` Non-standard Deprecated
  * `VRStageParameters` Non-standard Deprecated
  * `VTTCue`
  * `VTTRegion`


### W
  * `WakeLock`
  * `WakeLockSentinel`
  * `WaveShaperNode`
  * `WebGL2RenderingContext`
  * `WebGLActiveInfo`
  * `WebGLBuffer`
  * `WebGLContextEvent`
  * `WebGLFramebuffer`
  * `WebGLObject` Experimental
  * `WebGLProgram`
  * `WebGLQuery`
  * `WebGLRenderbuffer`
  * `WebGLRenderingContext`
  * `WebGLSampler`
  * `WebGLShader`
  * `WebGLShaderPrecisionFormat`
  * `WebGLSync`
  * `WebGLTexture`
  * `WebGLTransformFeedback`
  * `WebGLUniformLocation`
  * `WebGLVertexArrayObject`
  * `WebSocket`
  * `WebSocketStream` Experimental
  * `WebTransport`
  * `WebTransportBidirectionalStream`
  * `WebTransportDatagramDuplexStream`
  * `WebTransportError`
  * `WebTransportReceiveStream` Experimental
  * `WebTransportSendStream` Experimental
  * `WGSLLanguageFeatures`
  * `WheelEvent`
  * `Window`
  * `WindowClient`
  * `WindowControlsOverlay` Experimental
  * `WindowControlsOverlayGeometryChangeEvent` Experimental
  * `WindowSharedStorage` Experimental
  * `Worker`
  * `WorkerGlobalScope`
  * `WorkerLocation`
  * `WorkerNavigator`
  * `Worklet`
  * `WorkletGlobalScope`
  * `WorkletSharedStorage` Experimental
  * `WritableStream`
  * `WritableStreamDefaultController`
  * `WritableStreamDefaultWriter`


### X
  * `XMLDocument`
  * `XMLHttpRequest`
  * `XMLHttpRequestEventTarget`
  * `XMLHttpRequestUpload`
  * `XMLSerializer`
  * `XPathEvaluator`
  * `XPathExpression`
  * `XPathResult`
  * `XRAnchor` Experimental
  * `XRAnchorSet` Experimental
  * `XRBoundedReferenceSpace` Experimental
  * `XRCompositionLayer` Experimental
  * `XRCPUDepthInformation` Experimental
  * `XRCubeLayer` Experimental
  * `XRCylinderLayer` Experimental
  * `XRDepthInformation` Experimental
  * `XREquirectLayer` Experimental
  * `XRFrame` Experimental
  * `XRHand`
  * `XRHitTestResult` Experimental
  * `XRHitTestSource` Experimental
  * `XRInputSource`
  * `XRInputSourceArray` Experimental
  * `XRInputSourceEvent`
  * `XRInputSourcesChangeEvent`
  * `XRJointPose`
  * `XRJointSpace`
  * `XRLayer` Experimental
  * `XRLayerEvent` Experimental
  * `XRLightEstimate` Experimental
  * `XRLightProbe` Experimental
  * `XRMediaBinding` Experimental
  * `XRPose`
  * `XRProjectionLayer` Experimental
  * `XRQuadLayer` Experimental
  * `XRRay` Experimental
  * `XRReferenceSpace`
  * `XRReferenceSpaceEvent`
  * `XRRenderState` Experimental
  * `XRRigidTransform`
  * `XRSession` Experimental
  * `XRSessionEvent`
  * `XRSpace`
  * `XRSubImage` Experimental
  * `XRSystem` Experimental
  * `XRTransientInputHitTestResult` Experimental
  * `XRTransientInputHitTestSource` Experimental
  * `XRView` Experimental
  * `XRViewerPose`
  * `XRViewport`
  * `XRWebGLBinding` Experimental
  * `XRWebGLDepthInformation` Experimental
  * `XRWebGLLayer` Experimental
  * `XRWebGLSubImage` Experimental
  * `XSLTProcessor`


# SharedWorkerGlobalScope
The `SharedWorkerGlobalScope` object (the `SharedWorker` global scope) is accessible through the `self` keyword. Some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the JavaScript Reference. See the complete list of functions available to workers.
EventTarget  WorkerGlobalScope  SharedWorkerGlobalScope 
## Instance properties
This interface inherits properties from the `WorkerGlobalScope` interface, and its parent `EventTarget`.
`SharedWorkerGlobalScope.name` Read only
    
The name that the `SharedWorker` was (optionally) given when it was created using the `SharedWorker()` constructor. This is mainly useful for debugging purposes.
## Instance methods
This interface inherits methods from the `WorkerGlobalScope` interface, and its parent `EventTarget`.
`SharedWorkerGlobalScope.close()`
    
Discards any tasks queued in the `SharedWorkerGlobalScope`'s event loop, effectively closing this particular scope.
## Events
Listen to this event using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`connect`
    
Fired on shared workers when a new client connects.
  * `SharedWorker`
  * `WorkerGlobalScope`
  * Using Web workers
  * Functions available to workers


# Attribution Reporting API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Attribution Reporting API enables developers to measure conversions — for example when a user clicks an ad embedded on one site and then proceeds to purchase the item over on the vendor's site — and then access reports on those conversions. It does this without relying on third-party tracking cookies.
## Concepts and usage
Advertisers commonly want to measure how many users see an ad and then go on to view and purchase a product (conversions). This allows them to figure out what advertising placements are giving them the greatest return on investment (ROI) so they can adjust their advertising strategy accordingly. The process of measuring conversions usually includes capturing data such as:
  * Which users converted (for example purchased an item, or signed up for a service), and how many.
  * The geographic regions they are based in.
  * What sites the ads were placed on.
  * How many products were sold, services were signed up for, etc.
  * How much revenue was generated.


Traditionally on the web, conversion has been measured using third-party tracking cookies. An ad will typically be embedded on a web page in an `<iframe>`, which can set a cookie containing information about the user and their interaction with the ad.
Later on, when the user decides to visit the advertiser's site, provided it is from the same domain as the ad, that site can access the third-party cookie set previously by the ad. The advertiser can then associate the data from the ad with their own first-party data to answer questions such as "did the user purchase a product after interacting with an ad for the product from another site?"
This is bad for user privacy. At this point, any page from the same domain can get access to that cookie, plus information from sites that embed those pages. A surprisingly large number of parties will be able to access that data, and infer other data about the user based on their browsing habits.
The Attribution Reporting API provides a way to measure ad conversions in a way that protects user privacy.
### How does it work?
Let's illustrate how the Attribution Reporting API works via an example.
Say we have a online shop, `shop.example` (aka the advertiser), which embeds an ad for one of its products on a content site, `news.example` (aka the publisher). The ad content is found at `ad.shop.example`.
The online shop owners want to measure how many conversions they get from users interacting with the ad, viewing the product page on their site, and putting the product into their shopping cart.
The steps involved are as follows:
  1. When a user visits the `news.example` site, an attribution source can be registered for specific user interactions with the embedded ad. There are several ways that a user can interact with ads on the page. For an ad interaction to register an attribution source, the ad must send a request with an `Attribution-Reporting-Eligible` header to indicate that the response is eligible to register an attribution source. Registration will be completed if the response includes an appropriate `Attribution-Reporting-Register-Source` header. The attribution source can be, for example: 
     * A link. In this case, the interaction is the user clicking on the link (directly via an `<a>` element, or via a `Window.open()` call). The source is registered via the response to the navigation request.
     * An image such as an advertising banner or a 1x1 transparent tracking pixel. In this case, the interaction is the user visiting the page. The source is registered when the image loads, i.e., when the server responds to the image request.
     * A fetch request (i.e., a `fetch()` or `XMLHttpRequest`). In this case the interaction can be specified as whatever makes sense for your app — for example the fetch request could be invoked by a `click` or `submit` event. The source is registered once the response comes back.
  2. When the attribution source interaction occurs, the source data returned in the `Attribution-Reporting-Register-Source` header is stored in a private local cache accessible only by the browser. This data includes the contextual and first-party data available to the page and the advertiser, the origin of the ad tech company that is collecting the conversion data, and one or more destinations (eTLD+1s) where you expect the conversion from that ad to occur (i.e., the advertiser's site(s), for example `shop.example`).
  3. When the user later visits `shop.example`, this site can register an attribution trigger when an interaction indicates that a conversion has occurred (for example, the user clicks the "Add to cart" button on `shop.example`). The browser will then send a request along with an `Attribution-Reporting-Eligible` header to indicate that the response is eligible to register an attribution trigger, and registration will be completed if the response includes an appropriate `Attribution-Reporting-Register-Trigger` header. The attribution trigger can be, for example: 
     * An image such as a shopping cart icon or a 1x1 transparent tracking pixel. In this case, the interaction is the user visiting the page. The trigger is registered when the image loads, i.e., when the server responds to the image request.
     * A fetch request (i.e., a `fetch()` or `XMLHttpRequest`). In this case the interaction can be specified as whatever makes sense for your app — for example the fetch request could be invoked by a `click` or `submit` event. The trigger is registered once the response comes back.
  4. When the trigger attribution completes, the browser attempts to match the data from the Attribution-Reporting-Register-Trigger header with a source data entry saved in the private local cache (see 2.). See Registering attribution triggers for matching methodology and requirements.
  5. If a match is made, the browser sends report data to an endpoint on a reporting server typically owned by the ad tech provider where it can be securely analyzed. Unlike with cookies, the data is only available to the specific site you send it to - there will be no data shared elsewhere. These reports can be either: 
     * Event-level reports: Reports based on an attribution source event, where detailed source data is associated with coarse trigger data. For example, a report may look like "Click ID 200498 on `ad.shop.example` led to a purchase on `shop.example`", where "Click ID 200498" is the detailed source data, and "purchase" is the coarse trigger data. The detailed source data may encode first-party or contextual data from the source page, and the trigger data may encode the event from the trigger page.
     * Summary reports: More detailed reports that combine data from multiple conversions on both the source and trigger side. For example "Campaign ID 774653 on `news.example` has led to 654 sales of widgets on `shop.example` from users in Italy, with a total revenue of $9540." Compiling a summary report requires usage of an aggregation service (see for example the Google aggregation service).


For more information on implementing the functionality required for the above steps, see:
  1. Registering attribution sources
  2. Registering attribution triggers
  3. Generating reports


## Interfaces
The Attribution Reporting API doesn't define any distinct interfaces of its own.
### Extensions to other interfaces
`HTMLAnchorElement.attributionSrc`, `HTMLImageElement.attributionSrc`, `HTMLScriptElement.attributionSrc`
    
The `attributionSrc` property allows you to get and set the `attributionsrc` attribute on `<a>`, `<img>`, and `<script>` elements programmatically. It reflects the value of that attribute.
`fetch()` and the `Request()` constructor, the `attributionReporting` option
    
When generating a request via `fetch()`, this indicates that you want the response to be able to register an attribution source or trigger.
`XMLHttpRequest.setAttributionReporting()`
    
When generating a request via `XMLHttpRequest`, this indicates that you want the response to be able to register an attribution source or trigger.
`Window.open()`, the `attributionsrc` feature keyword
    
Causes completion of the registration of an attribution source and triggers the browser to store the associated source data (as provided in the `Attribution-Reporting-Register-Source` response header) when the `open()` method completes. Note that `Window.open()` calls cannot be used to register attribution triggers.
## HTML elements
`<a>`, `<img>`, and `<script>` — the `attributionsrc` attribute
    
Specifies that you want the browser to send an `Attribution-Reporting-Eligible` header along with the associated resource request. On the server-side this header is used to trigger sending an `Attribution-Reporting-Register-Source` or `Attribution-Reporting-Register-Trigger` header in the response. When registering an attribution source, this is required; when registering an attribution trigger it is only required if you want to specify a separate registration server to the resource the `src` attribute is pointing at. Note that `<a>` elements cannot be used to register attribution triggers.
## HTTP headers
`Attribution-Reporting-Eligible`
    
HTTP request that indicates that the corresponding response is eligible to register an attribution source or trigger.
`Attribution-Reporting-Register-Source`
    
HTTP response that registers a page feature as an attribution source. This is included as part of a response to a request that included an `Attribution-Reporting-Eligible` header.
`Attribution-Reporting-Register-Trigger`
    
HTTP response that registers a page feature as an attribution trigger. This is included as part of a response to a request that included an `Attribution-Reporting-Eligible` header.
`Permissions-Policy` `attribution-reporting` directive
    
Controls whether the current document is allowed to use attribution reporting.
## Enrollment and local testing
To use the Attribution Reporting API in your sites, you must specify it in the privacy sandbox enrollment process. If you don't do this, the API flow is blocked at response time, i.e., the response headers are ignored and sources and triggers are not registered.
You can still test your Attribution Reporting API code locally without enrollment. To allow local testing, enable the following Chrome developer flag:
`chrome://flags/#privacy-sandbox-enrollment-overrides`
## Examples
See Demo: Attribution Reporting API for an example implementation (see the source code also).
  * Attribution Reporting Header Validation tool
  * Attribution reporting on privacysandbox.google.com (2023)
  * Enable conversion measurement on privacysandbox.google.com (2023)
  * The Privacy Sandbox on privacysandbox.google.com (2023)


# SanitizerConfig
The `SanitizerConfig` dictionary of the HTML Sanitizer API represents a sanitizer configuration object. The configuration specifies what elements, attributes and comments are allowed or should be removed when inserting strings of HTML into an `Element` or `ShadowRoot`, or when parsing an HTML string into a `Document`.
An instance of this type can be passed to the `Sanitizer()` constructor to configure a `Sanitizer`, and is returned by `Sanitizer.get()`. It can also be passed as the `option.sanitizer` parameter when calling the sanitization methods:
  * `setHTML()` or `setHTMLUnsafe()` on `Element`.
  * `setHTML()` or `setHTMLUnsafe()` on `ShadowRoot`.
  * `Document.parseHTML()` or `Document.parseHTMLUnsafe()` static methods.


Note that normally a `Sanitizer` instance would be passed as the option instead of `SanitizerConfig` in the above methods, in particular because `sanitizer` instances are more efficient to share and modify.
## Instance properties
`elements`
    
An array indicating the elements to allow when sanitizing HTML, optionally also specifying their allowed or removed attributes.
Each element can be specified by name (a string), or as a object with the following properties:
`name`
    
A string containing the name of the element.
`namespace` Optional
    
A string containing the namespace of the element. The default namespace is `"http://www.w3.org/1999/xhtml"`.
`attributes` Optional
    
An array indicating the attributes to allow on this (allowed) element when sanitizing HTML.
Each attribute can be specified by name (a string), or as a object with the following properties:
`name`
    
A string containing the name of the attribute.
`namespace` Optional
    
A string containing the namespace of the attribute, which defaults to `null`.
`removeAttributes` Optional
    
An array indicating the attributes to remove on this (allowed) element when sanitizing HTML.
Each attribute can be specified by name (a string), or as a object with the following properties:
`name`
    
A string containing the name of the attribute.
`namespace` Optional
    
A string containing the namespace of the attribute, which defaults to `null`.
`removeElements`
    
An array indicating the elements to remove when sanitizing HTML.
Each element can be specified by name (a string), or as a object with the following properties:
`name`
    
A string containing the name of the element.
`namespace` Optional
    
A string containing the namespace of the element. The default namespace is `"http://www.w3.org/1999/xhtml"`.
`replaceWithChildrenElements`
    
An array indicating the elements to replace with their content when sanitizing HTML. This is primarily used to strip styles from text (for example, you could use this to change `<b>some text</b>` to `some text`).
Each element can be specified by name (a string), or as a object with the following properties:
`name`
    
A string containing the name of the element.
`namespace` Optional
    
A string containing the namespace of the element. The default namespace is `"http://www.w3.org/1999/xhtml"`.
`attributes`
    
An array indicating the attributes to allow when sanitizing HTML.
Each attribute can be specified by name (a string), or as a object with the following properties:
`name`
    
A string containing the name of the attribute.
`namespace` Optional
    
A string containing the namespace of the attribute, which defaults to `null`.
`removeAttributes`
    
An array indicating the attributes to remove from elements when sanitizing HTML.
Each attribute can be specified by name (a string), or as a object with the following properties:
`name`
    
A string containing the name of the attribute.
`namespace` Optional
    
A string containing the namespace of the attribute, which defaults to `null`.
`comments`
    
`true` if comments are allowed, and `false` if they are to be removed.
`dataAttributes`
    
`true` if data attributes are allowed, and `false` if they are to be removed.
## Examples
>
### Creating an "allow" configuration
This example shows how you might create an "allow" sanitizer configuration, and in this case pass it to the `Sanitizer()` constructor.
    
    const sanitizer = new Sanitizer({
      elements: ["div", "p", "script"],
      attributes: ["id"],
      replaceWithChildrenElements: ["b"],
      comments: true,
      dataAttributes: false,
    });
    
Note that you cannot specify both allow and remove lists in the same configuration without causing an exception when passing the configuration to the constructor or a sanitization method.
### Creating a "remove" configuration
This example shows how you might create a "remove" sanitizer configuration, and in this case pass it to the `Sanitizer()` constructor.
    
    const sanitizer = new Sanitizer({
      removeElements: ["span", "script"],
      removeAttributes: ["lang", "id"],
      comments: false,
    });
    
Note that you cannot specify both allow and remove lists in the same configuration without causing an exception when passing the configuration to the constructor or a sanitization method.
>
### api.Sanitizer.get
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`SanitizerConfig` No No 138 No No No No No No No No No  
### api.Sanitizer.Sanitizer
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`SanitizerConfig` No No 138 No No No No No No No No No  
# InputDeviceCapabilities API
The InputDeviceCapabilities API provides details about the underlying sources of input events. The API attempts to describe how the device behaves rather than what it is. For example, the first version of the API indicates whether a device fires touch events rather than whether it is a touch screen.
## Input device capabilities concepts and usage
Because DOM events abstract device input, they provide no way to learn what device or type of device fired an event. This can lead to instances where the same action triggers multiple event handlers. To deal with this, developers make assumptions and use heuristics to normalize behavior on web pages.
The InputDeviceCapabilities API addresses this problem by abstracting the capabilities of input devices. For example, let's say we have a web page that implements both a `touchstart` and a `mousedown` event. We can assume that if the touchstart event is triggered that the user's device has a touch interface. What about when the mousedown event is triggered? It would be useful to know if a `touchstart` event were also triggered so that we don't take the same action twice. We can do this by checking the sourceCapabilities property of the `UIEvent`.
    
    myButton.addEventListener("mousedown", (e) => {
      // Touch event case handled above, don't change the style again on tap.
      if (!e.sourceCapabilities.firesTouchEvents) myButton.classList.add("pressed");
    });
    
## Interfaces
`InputDeviceCapabilities` Experimental
    
Provides logical information about an input device.
## Extensions to other interfaces
`UIEvent.sourceCapabilities` Experimental Read only
    
Returns an instance of the `InputDeviceCapabilities` interface, which provides information about the physical device responsible for generating a touch event.
# Badging API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The Badging API gives web developers a method of setting a badge on a document or application, to act as a notification that state has changed without displaying a more distracting notification. A common use case for this would be an application with a messaging feature displaying a badge on the app icon to show that new messages have arrived.
## Concepts and Usage
Web developers frequently update document favicons or titles in order to indicate status. The Badging API provides a more elegant way to show status, by providing a method which has meaning to the user agent and can therefore be displayed in a way that matches the rest of the UI.
### Types of badges
There are two types of badges:
  * Document badges, which are typically shown in the browser tab near or on the page icon.
  * App badges, which are associated with the icon of an installed web app. These may display on the app icon in the dock, shelf, or home screen depending on the device in use.


### Badge states
A badge can have one of three possible values, which are set internally:
`nothing`
    
Indicating that no badge is currently set. A badge can be in this state due to it being cleared by the application, or being reset by the user agent.
`flag`
    
Indicating that the badge is set, but has no specific data to display. A badge will be in this state if the application has set a badge, but has not passed any value to the method.
an integer
    
A value passed when setting the badge. This value will never be `0`, passing a value of `0` when setting a badge will cause the user agent to clear the badge by setting it to `nothing`.
### Setting badges
A badge is set with the methods `setAppBadge()` (for installed apps). If no parameters are passed to these methods then the badge value is flag. The user agent will display its notification badge, for example, a colored circle on the icon.
These methods can also be passed a parameter `contents`, which should be a number. This will then be displayed as part of the badge. User agents may change this value in some way. For example, if you pass a very large number such as 4000, the user agent may display this as 99+ in the badge. User agents may also ignore this data and display a marker instead.
### Clearing badges
Badges are cleared with the `clearAppBadge()` methods. These do not take any parameters and set the badge to the value `nothing`. Additionally, passing a value of `0` to `setAppBadge()` will set the badge to `nothing` and clear the badge.
## Interfaces
None.
### Extensions to the Navigator interface
`Navigator.setAppBadge()`
    
Sets a badge on the icon associated with this app.
`Navigator.clearAppBadge()`
    
Clears the badge on the icon associated with this app.
### Extensions to the WorkerNavigator interface
`WorkerNavigator.setAppBadge()`
    
Sets a badge on the icon associated with this app.
`WorkerNavigator.clearAppBadge()`
    
Clears the badge on the icon associated with this app.
## Examples
To set a notification badge on the current app with a value of 12:
    
    navigator.setAppBadge(12);
    
To clear a notification badge on the current app:
    
    navigator.clearAppBadge();
    
  * Badging for app icons
  * Badging API Explainer


# RTCAudioSourceStats
The `RTCAudioSourceStats` dictionary of the WebRTC API provides statistics information about an audio track (`MediaStreamTrack`) that is attached to one or more senders (`RTCRtpSender`).
These statistics can be obtained by iterating the `RTCStatsReport` returned by `RTCRtpSender.getStats()` or `RTCPeerConnection.getStats()` until you find a report with the `type` of `media-source` and a `kind` of `audio`.
Note: For audio information about remotely sourced tracks (that are being received), see `RTCInboundRtpStreamStats`.
## Instance properties
`audioLevel` Experimental Optional
    
A number that represents the audio level of the media source.
`totalAudioEnergy` Experimental Optional
    
A number that represents the total audio energy of the media source over the lifetime of the stats object.
`totalSamplesDuration` Experimental Optional
    
A number that represents the total duration of all samples produced by the media source over the lifetime of the stats object.
### Common media-source properties
The following properties are present in both `RTCAudioSourceStats` and `RTCVideoSourceStats`: 
`trackIdentifier`
    
A string that contains the `id` value of the `MediaStreamTrack` associated with the audio source.
`kind`
    
A string indicating whether this object represents stats for a video source or a media source. For an `RTCAudioSourceStats` this will always be `audio`.
### Common instance properties
The following properties are common to all statistics objects. 
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"media-source"`, indicating that the object is an instance of either `RTCAudioSourceStats` or `RTCVideoSourceStats`.
## Description
The interface provides statistics about an audio media source attached to one or more senders. The information includes the current audio level, averaged over a short (implementation dependent) duration.
The statistics also include the accumulated total energy and total sample duration, at a particular timestamp. The totals can be used to determine the average audio level over the lifetime of the stats object. You can calculate a root mean square (RMS) value in the same units as `audioLevel` using the following formula:
totalAudioEnergytotalSamplesDuration\sqrt{\frac{totalAudioEnergy}{totalSamplesDuration}}
You can also use the accumulated totals to calculate the average audio level over an arbitrary time period.
The total audio energy of the stats object is accumulated by adding the energy of every sample over the lifetime of the stats object, while the total duration is accumulated by adding the duration of each sample. The energy of each sample is determined using the following formula, where `sample_level` is the level of the sample, `max_level` is the highest-intensity encodable value, and `duration` is the duration of the sample in seconds:
duration×(sample_levelmax_level)2duration \times⁢ \left(\left(\right. \frac{sample{\\_}level}{max{\\_}level} \left.\right)\right)^{2}
The average audio level between any two different `getStats()` calls, over any duration, can be calculated using the following equation:
totalAudioEnergy2-totalAudioEnergy1totalSamplesDuration2-totalSamplesDuration1\sqrt{\frac{\left(totalAudioEnergy\right)_{2} - \left(totalAudioEnergy\right)_{1}}{\left(totalSamplesDuration\right)_{2} - \left(totalSamplesDuration\right)_{1}}}
## Examples
This example shows how you might iterate the stats object returned from `RTCRtpSender.getStats()` to get the audio source stats, and then extract the `audioLevel`.
    
    // where sender is an RTCRtpSender
    const stats = await sender.getStats();
    let audioSourceStats = null;
    
    stats.forEach((report) => {
      if (report.type === "media-source" && report.kind==="audio") {
        audioSourceStats = report;
        break;
      }
    });
    
    const audioLevel = audioSourceStats?.audioLevel;
    
# BrowserCaptureMediaStreamTrack
The `BrowserCaptureMediaStreamTrack` interface of the Screen Capture API represents a single video track. It extends the `MediaStreamTrack` class with methods to limit the part of a self-capture stream (for example, a user's screen or window) that is captured.
EventTarget  MediaStreamTrack  BrowserCaptureMediaStreamTrack 
## Instance methods
`clone()` Experimental
    
Returns an uncropped, unrestricted clone of the original `BrowserCaptureMediaStreamTrack`.
`cropTo()` Experimental
    
Crops a self-capture stream to the area in which a specified DOM element is rendered.
`restrictTo()` Experimental
    
Restricts a self-capture stream to a specific DOM element.
## Examples
See Using the Element Capture and Region Capture APIs for in-context example code.
  * Screen Capture API
  * Using the Element Capture and Region Capture APIs


# Background Tasks API
The Cooperative Scheduling of Background Tasks API (also referred to as the Background Tasks API or the `requestIdleCallback()` API) provides the ability to queue tasks to be executed automatically by the user agent when it determines that there is free time to do so.
Note: This API is not available in Web Workers.
## Concepts and usage
The main thread of a Web browser is centered around its event loop. This code draws any pending updates to the `Document` currently being displayed, runs any JavaScript code the page needs to run, accepts events from input devices, and dispatches those events to the elements that should receive them. In addition, the event loop handles interactions with the operating system, updates to the browser's own user interface, and so forth. It's an extremely busy chunk of code, and your main JavaScript code may run right inside this thread along with all of this. Certainly most if not all code that is capable of making changes to the DOM is running in the main thread, since it's common for user interface changes to only be available to the main thread.
Because event handling and screen updates are two of the most obvious ways users notice performance issues, it's important for your code to be a good citizen of the Web and help to prevent stalls in the execution of the event loop. In the past, there's been no way to do this reliably other than by writing code that's as efficient as possible and by offloading as much work as possible to workers. `Window.requestIdleCallback()` makes it possible to become actively engaged in helping to ensure that the browser's event loop runs smoothly, by allowing the browser to tell your code how much time it can safely use without causing the system to lag. If you stay within the limit given, you can make the user's experience much better.
### Getting the most out of idle callbacks
Because idle callbacks are intended to give your code a way to cooperate with the event loop to ensure that the system is utilized to its full potential without over-tasking it, resulting in lag or other performance problems, you should be thoughtful about how you go about using them.
  * Use idle callbacks for tasks which don't have high priority. Because you don't know how many callbacks have been established, and you don't know how busy the user's system is, you don't know how often your callback will be run (unless you specify a `timeout`). There's no guarantee that every pass through the event loop (or even every screen update cycle) will include any idle callbacks being executed; if the event loop uses all available time, you're out of luck (again, unless you've used a `timeout`).
  * Idle callbacks should do their best not to overrun the time allotted. While the browser, your code, and the Web in general will continue to run normally if you go over the specified time limit (even if you go way over it), the time restriction is intended to ensure that you leave the system enough time to finish the current pass through the event loop and get on to the next one without causing other code to stutter or animation effects to lag. Currently, `timeRemaining()` has an upper limit of 50 milliseconds, but in reality you will often have less time than that, since the event loop may already be eating into that time on complex sites, with browser extensions needing processor time, and so forth.
  * Avoid making changes to the DOM within your idle callback. By the time your callback is run, the current frame has already finished drawing, and all layout updates and computations have been completed. If you make changes that affect layout, you may force a situation in which the browser has to stop and do recalculations that would otherwise be unnecessary. If your callback needs to change the DOM, it should use `Window.requestAnimationFrame()` to schedule that.
  * Avoid tasks whose run time can't be predicted. Your idle callback should avoid doing anything that could take an unpredictable amount of time. For example, anything which might affect layout should be avoided. You should also avoid resolving or rejecting `Promise`s, since that would invoke the handler for that promise's resolution or rejection as soon as your callback returns.
  * Use timeouts when you need to, but only when you need to. Using timeouts can ensure that your code runs in a timely manner, but it can also allow you to cause lag or animation stutters by mandating that the browser call you when there's not enough time left for you to run without disrupting performance.


## Interfaces
The Background Tasks API adds only one new interface:
`IdleDeadline`
    
An object of this type is passed to the idle callback to provide an estimate of how long the idle period is expected to last, as well as whether or not the callback is running because its timeout period has expired.
The `Window` interface is also augmented by this API to offer the new `requestIdleCallback()` and `cancelIdleCallback()` methods.
## Example
In this example, we'll take a look at how you can use `requestIdleCallback()` to run time-consuming, low-priority tasks during time the browser would otherwise be idle. In addition, this example demonstrates how to schedule updates to the document content using `requestAnimationFrame()`.
Below you'll find only the HTML and JavaScript for this example. The CSS is not shown, since it's not particularly crucial to understanding this functionality.
### HTML
In order to be oriented about what we're trying to accomplish, let's have a look at the HTML. This establishes a box (`id="container"`) that's used to present the progress of an operation (because you never know how long decoding "quantum filament tachyon emissions" will take, after all) as well as a second main box (`id="logBox"`), which is used to display textual output.
    
    <p>
      Demonstration of using cooperatively scheduled background tasks using the
      <code>requestIdleCallback()</code> method.
    </p>
    
    <div id="container">
      <div class="label">Decoding quantum filament tachyon emissions…</div>
    
      <progress id="progress" value="0"></progress>
    
      <button class="button" id="startButton">Start</button>
    
      <div class="label counter">
        Task <span id="currentTaskNumber">0</span> of
        <span id="totalTaskCount">0</span>
      </div>
    </div>
    
    <div id="logBox">
      <div class="logHeader">Log</div>
      <div id="log"></div>
    </div>
    
The progress box uses a `<progress>` element to show the progress, along with a label with sections that are changed to present numeric information about the progress. In addition, there's a "Start" button (creatively given the ID "startButton"), which the user will use to start the data processing.
### JavaScript
Now that the document structure is defined, construct the JavaScript code that will do the work. The goal: to be able to add requests to call functions to a queue, with an idle callback that runs those functions whenever the system is idle for long enough a time to make progress.
#### Variable declarations
    
    const taskList = [];
    let totalTaskCount = 0;
    let currentTaskNumber = 0;
    let taskHandle = null;
    
These variables are used to manage the list of tasks that are waiting to be performed, as well as status information about the task queue and its execution:
  * `taskList` is an `Array` of objects, each representing one task waiting to be run.
  * `totalTaskCount` is a counter of the number of tasks that have been added to the queue; it will only go up, never down. We use this to do the math to present progress as a percentage of total work to do.
  * `currentTaskNumber` is used to track how many tasks have been processed so far.
  * `taskHandle` is a reference to the task currently being processed.


    
    const totalTaskCountElem = document.getElementById("totalTaskCount");
    const currentTaskNumberElem = document.getElementById("currentTaskNumber");
    const progressBarElem = document.getElementById("progress");
    const startButtonElem = document.getElementById("startButton");
    const logElem = document.getElementById("log");
    
Next we have variables which reference the DOM elements we need to interact with. These elements are:
  * `totalTaskCountElem` is the `<span>` we use to insert the total number of tasks created into the status display in the progress box.
  * `currentTaskNumberElem` is the element used to display the number of tasks processed so far.
  * `progressBarElem` is the `<progress>` element showing the percentage of the tasks processed so far.
  * `startButtonElem` is the start button.
  * `logElem` is the `<div>` we'll insert logged text messages into.


    
    let logFragment = null;
    let statusRefreshScheduled = false;
    
Finally, we set up a couple of variables for other items:
  * `logFragment` will be used to store a `DocumentFragment` that's generated by our logging functions to create content to append to the log when the next animation frame is rendered.
  * `statusRefreshScheduled` is used to track whether or not we've already scheduled an update of the status display box for the upcoming frame, so that we only do it once per frame


#### Managing the task queue
Next, let's look at the way we manage the tasks that need to be performed. We're going to do this by creating a FIFO queue of tasks, which we'll run as time allows during the idle callback period.
##### Enqueueing tasks
First, we need a function that enqueues tasks for future execution. That function, `enqueueTask()`, looks like this:
    
    function enqueueTask(taskHandler, taskData) {
      taskList.push({
        handler: taskHandler,
        data: taskData,
      });
    
      totalTaskCount++;
    
      taskHandle ||= requestIdleCallback(runTaskQueue, { timeout: 1000 });
    
      scheduleStatusRefresh();
    }
    
`enqueueTask()` accepts as input two parameters:
  * `taskHandler` is a function which will be called to handle the task.
  * `taskData` is an object which is passed into the task handler as an input parameter, to allow the task to receive custom data.


To enqueue the task, we push an object onto the `taskList` array; the object contains the `taskHandler` and `taskData` values under the names `handler` and `data`, respectively, then increment `totalTaskCount`, which reflects the total number of tasks which have ever been enqueued (we don't decrement it when tasks are removed from the queue).
Next, we check to see if we already have an idle callback created; if `taskHandle` is 0, we know there isn't an idle callback yet, so we call `requestIdleCallback()` to create one. It's configured to call a function called `runTaskQueue()`, which we'll look at shortly, and with a `timeout` of 1 second, so that it will be run at least once per second even if there isn't any actual idle time available.
##### Running tasks
Our idle callback handler, `runTaskQueue()`, gets called when the browser determines there's enough idle time available to let us do some work or our timeout of one second expires. This function's job is to run our enqueued tasks.
    
    function runTaskQueue(deadline) {
      while (
        (deadline.timeRemaining() > 0 || deadline.didTimeout) &&
        taskList.length
      ) {
        const task = taskList.shift();
        currentTaskNumber++;
    
        task.handler(task.data);
        scheduleStatusRefresh();
      }
    
      if (taskList.length) {
        taskHandle = requestIdleCallback(runTaskQueue, { timeout: 1000 });
      } else {
        taskHandle = 0;
      }
    }
    
`runTaskQueue()`'s core is a loop which continues as long as there's time left (as determined by checking `deadline.timeRemaining`) to be sure it's more than 0 or if the timeout limit was reached (`deadline.didTimeout` is true), and as long as there are tasks in the task list.
For each task in the queue that we have time to execute, we do the following:
  1. We remove the task object from the queue.
  2. We increment `currentTaskNumber` to track how many tasks we've executed.
  3. We call the task's handler, `task.handler`, passing into it the task's data object (`task.data`).
  4. We call a function, `scheduleStatusRefresh()`, to handle scheduling a screen update to reflect changes to our progress.


When time runs out, if there are still tasks left in the list, we call `requestIdleCallback()` again so that we can continue to process the tasks the next time there's idle time available. If the queue is empty, we set taskHandle to 0 to indicate that we don't have a callback scheduled. That way, we'll know to request a callback next time `enqueueTask()` is called.
#### Updating the status display
One thing we want to be able to do is update our document with log output and progress information. However, you can't safely change the DOM from within an idle callback. Instead, we'll use `requestAnimationFrame()` to ask the browser to call us when it's safe to update the display.
##### Scheduling display updates
DOM changes are scheduled by calling the `scheduleStatusRefresh()` function.
    
    function scheduleStatusRefresh() {
      if (!statusRefreshScheduled) {
        requestAnimationFrame(updateDisplay);
        statusRefreshScheduled = true;
      }
    }
    
This is a simple function. It checks to see if we've already scheduled a display refresh by checking the value of `statusRefreshScheduled`. If it's `false`, we call `requestAnimationFrame()` to schedule a refresh, providing the `updateDisplay()` function to be called to handle that work.
##### Updating the display
The `updateDisplay()` function is responsible for drawing the contents of the progress box and the log. It's called by the browser when the DOM is in a safe condition for us to apply changes during the process of rendering the next frame.
    
    function updateDisplay() {
      const scrolledToEnd =
        logElem.scrollHeight - logElem.clientHeight <= logElem.scrollTop + 1;
    
      if (totalTaskCount) {
        if (progressBarElem.max !== totalTaskCount) {
          totalTaskCountElem.textContent = totalTaskCount;
          progressBarElem.max = totalTaskCount;
        }
    
        if (progressBarElem.value !== currentTaskNumber) {
          currentTaskNumberElem.textContent = currentTaskNumber;
          progressBarElem.value = currentTaskNumber;
        }
      }
    
      if (logFragment) {
        logElem.appendChild(logFragment);
        logFragment = null;
      }
    
      if (scrolledToEnd) {
        logElem.scrollTop = logElem.scrollHeight - logElem.clientHeight;
      }
    
      statusRefreshScheduled = false;
    }
    
First, `scrolledToEnd` is set to `true` if the text in the log is scrolled to the bottom; otherwise it's set to `false`. We'll use that to determine if we should update the scroll position to ensure that the log stays at the end when we're done adding content to it.
Next, we update the progress and status information if any tasks have been enqueued.
  1. If the current maximum value of the progress bar is different from the current total number of enqueued tasks (`totalTaskCount`), then we update the contents of the displayed total number of tasks (`totalTaskCountElem`) and the maximum value of the progress bar, so that it scales properly.
  2. We do the same thing with the number of tasks processed so far; if `progressBarElem.value` is different from the task number currently being processed (`currentTaskNumber`), then we update the displayed value of the currently-being-processed task and the current value of the progress bar.


Then, if there's text waiting to be added to the log (that is, if `logFragment` isn't `null`), we append it to the log element using `Element.appendChild()` and set `logFragment` to `null` so we don't add it again.
If the log was scrolled to the end when we started, we make sure it still is. Then we set `statusRefreshScheduled` to `false` to indicate that we've handled the refresh and that it's safe to request a new one.
#### Adding text to the log
The `log()` function adds the specified text to the log. Since we don't know at the time `log()` is called whether or not it's safe to immediately touch the DOM, we will cache the log text until it's safe to update. Above, in the code for `updateDisplay()`, you can find the code that actually adds the logged text to the log element when the animation frame is being updated.
    
    function log(text) {
      logFragment ??= document.createDocumentFragment();
      const el = document.createElement("div");
      el.textContent = text;
      logFragment.appendChild(el);
    }
    
First, we create a `DocumentFragment` object named `logFragment` if one doesn't currently exist. This element is a pseudo-DOM into which we can insert elements without immediately changing the main DOM itself.
We then create a new `<div>` element and set its contents to match the input `text`. Then we append the new element to the end of the pseudo-DOM in `logFragment`. `logFragment` will accumulate log entries until the next time `updateDisplay()` is called, once the DOM is ready for the changes.
### Running tasks
Now that we've got the task management and display maintenance code done, we can actually start setting up code to run tasks that get work done.
#### The task handler
The function we'll be using as our task handler—that is, the function that will be used as the value of the task object's `handler` property—is `logTaskHandler()`. It's a simple function that outputs a bunch of stuff to the log for each task. In your own application, you'd replace this code with whatever task it is you wish to perform during idle time. Just remember that anything you want to do that changes the DOM needs to be handled through `requestAnimationFrame()`.
    
    function logTaskHandler(data) {
      log(`Running task #${currentTaskNumber}`);
    
      for (let i = 0; i < data.count; i += 1) {
        log(`${(i + 1).toString()}. ${data.text}`);
      }
    }
    
#### The main program
Everything is triggered when the user clicks the Start button, which causes the `decodeTechnoStuff()` function to be called.
    
    function decodeTechnoStuff() {
      totalTaskCount = 0;
      currentTaskNumber = 0;
      updateDisplay();
    
      const n = getRandomIntInclusive(100, 200);
    
      for (let i = 0; i < n; i++) {
        const taskData = {
          count: getRandomIntInclusive(75, 150),
          text: `This text is from task number ${i + 1} of ${n}`,
        };
    
        enqueueTask(logTaskHandler, taskData);
      }
    }
    
    document
      .getElementById("startButton")
      .addEventListener("click", decodeTechnoStuff, false);
    
`decodeTechnoStuff()` starts by zeroing the values of totalTaskCount (the number of tasks added to the queue so far) and currentTaskNumber (the task currently being run), and then calls `updateDisplay()` to reset the display to its "nothing's happened yet" state.
This example will create a random number of tasks (between 100 and 200 of them). To do so, we use the `getRandomIntInclusive()` function that's provided as an example in the documentation for `Math.random()` to get the number of tasks to create.
Then we start a loop to create the actual tasks. For each task, we create an object, `taskData`, which includes two properties:
  * `count` is the number of strings to output into the log from the task.
  * `text` is the text to output to the log the number of times specified by `count`.


Each task is then enqueued by calling `enqueueTask()`, passing in `logTaskHandler()` as the handler function and the `taskData` object as the object to pass into the function when it's called.
### Result
Below is the actual functioning result of the code above. Try it out, play with it in your browser's developer tools, and experiment with using it in your own code.
  * `Window.requestIdleCallback()`
  * `Window.cancelIdleCallback()`
  * `IdleDeadline`


# SVGFEFuncRElement
The `SVGFEFuncRElement` interface corresponds to the `<feFuncR>` element.
EventTarget  Node  Element  SVGElement  SVGComponentTransferFunctionElement  SVGFEFuncRElement 
## Instance properties
This interface not provide any specific properties, but inherits properties from its parent interface, `SVGComponentTransferFunctionElement`.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGComponentTransferFunctionElement`.
  * `<feFuncR>`


# Battery Status API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Battery Status API, more often referred to as the Battery API, provides information about the system's battery charge level and lets you be notified by events that are sent when the battery level or charging status change. This can be used to adjust your app's resource usage to reduce battery drain when the battery is low, or to save changes before the battery runs out in order to prevent data loss.
Note: This API is not available in Web Workers (not exposed via `WorkerNavigator`).
## Interfaces
`BatteryManager`
    
Provides information about the system's battery charge level.
### Extensions to other interfaces
`Navigator.getBattery()`
    
Returns a `Promise` that resolves with a `BatteryManager` object.
## Example
In this example, we watch for changes both to the charging status (whether or not we're plugged in and charging) and for changes to the battery level and timing. This is done by listening for the `chargingchange`, `levelchange`, `chargingtimechange`, `dischargingtimechange` events.
    
    navigator.getBattery().then((battery) => {
      function updateAllBatteryInfo() {
        updateChargeInfo();
        updateLevelInfo();
        updateChargingInfo();
        updateDischargingInfo();
      }
      updateAllBatteryInfo();
    
      battery.addEventListener("chargingchange", () => {
        updateChargeInfo();
      });
      function updateChargeInfo() {
        console.log(`Battery charging? ${battery.charging ? "Yes" : "No"}`);
      }
    
      battery.addEventListener("levelchange", () => {
        updateLevelInfo();
      });
      function updateLevelInfo() {
        console.log(`Battery level: ${battery.level * 100}%`);
      }
    
      battery.addEventListener("chargingtimechange", () => {
        updateChargingInfo();
      });
      function updateChargingInfo() {
        console.log(`Battery charging time: ${battery.chargingTime} seconds`);
      }
    
      battery.addEventListener("dischargingtimechange", () => {
        updateDischargingInfo();
      });
      function updateDischargingInfo() {
        console.log(`Battery discharging time: ${battery.dischargingTime} seconds`);
      }
    });
    
See also the example in the specification.
>
### api.BatteryManager
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Battery_Status_API` 38 79 43–52 25 No 38 43–52 25 No 3.0 38 No  
`charging` 38 79 43–52 25 No 38 43–52 25 No 3.0 38 No  
`chargingTime` 38 79 43–52 25 No 4238–42Always equal to `0` or `Infinity`. 43–52 2925–29Always equal to `0` or `Infinity`. No 4.03.0–4.0Always equal to `0` or `Infinity`. 4238–42Always equal to `0` or `Infinity`. No  
`chargingchange_event` 38 79 43–52 25 No 38 43–52 25 No 3.0 38 No  
`chargingtimechange_event` 38 79 43–52 25 No 38 43–52 25 No 3.0 38 No  
`dischargingTime` 38 79 43–52 25 No 4238–42Always equal to `Infinity`. 43–52 2925–29Always equal to `Infinity`. No 4.03.0–4.0Always equal to `Infinity`. 4238–42Always equal to `Infinity`. No  
`dischargingtimechange_event` 38 79 43–52 25 No 38 43–52 25 No 3.0 38 No  
`level` 38 79 43–52 25 No 38 43–52 25 No 3.0 38 No  
`levelchange_event` 38 79 43–52 25 No 38 43–52 25 No 3.0 38 No  
`secure_context_required` 103 103 No No No 103 No 71 No 20.0 103 No  
### api.Navigator.getBattery
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Battery_Status_API` 38 79 43–52 25 No 38 43–52 25 No 3.0 38 No  
`secure_context_required` 103 103 No No No 103 No 71 No 20.0 103 No  
  * Hacks blog post - Using the Battery API


# NotificationEvent
Note: This feature is only available in Service Workers.
The `NotificationEvent` interface of the Notifications API represents a notification event dispatched on the `ServiceWorkerGlobalScope` of a `ServiceWorker`.
This interface inherits from the `ExtendableEvent` interface.
Note: Only persistent notification events, fired at the `ServiceWorkerGlobalScope` object, implement the `NotificationEvent` interface. Non-persistent notification events, fired at the `Notification` object, implement the `Event` interface.
Event  ExtendableEvent  NotificationEvent 
## Constructor
`NotificationEvent()`
    
Creates a new `NotificationEvent` object.
## Instance properties
Also inherits properties from its parent interface, `ExtendableEvent`.
`NotificationEvent.notification` Read only
    
Returns a `Notification` object representing the notification that was clicked to fire the event.
`NotificationEvent.action` Read only
    
Returns the string ID of the notification button the user clicked. This value returns an empty string if the user clicked the notification somewhere other than an action button, or the notification does not have a button.
## Instance methods
Also inherits methods from its parent interface, `ExtendableEvent`.
## Example
    
    self.addEventListener("notificationclick", (event) => {
      console.log(`On notification click: ${event.notification.tag}`);
      event.notification.close();
    
      // This looks to see if the current is already open and
      // focuses if it is
      event.waitUntil(
        clients
          .matchAll({
            type: "window",
          })
          .then((clientList) => {
            for (const client of clientList) {
              if (client.url === "/" && "focus" in client) return client.focus();
            }
            if (clients.openWindow) return clients.openWindow("/");
          }),
      );
    });
    
Note: This interface is specified in the Notifications API, but accessed through `ServiceWorkerGlobalScope`.
# SVGFEDistantLightElement
The `SVGFEDistantLightElement` interface corresponds to the `<feDistantLight>` element.
EventTarget  Node  Element  SVGElement  SVGFEDistantLightElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEDistantLightElement.azimuth` Read only
    
An `SVGAnimatedNumber` corresponding to the `azimuth` attribute of the given element.
`SVGFEDistantLightElement.elevation` Read only
    
An `SVGAnimatedNumber` corresponding to the `elevation` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
  * `<feDistantLight>`


# WEBGL_depth_texture extension
The `WEBGL_depth_texture` extension is part of the WebGL API and defines 2D depth and depth-stencil textures.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default. The constant in WebGL2 is `gl.UNSIGNED_INT_24_8`.
## Constants
This extension adds a new constant:
`ext.UNSIGNED_INT_24_8_WEBGL`
    
Unsigned integer type for 24-bit depth texture data.
## Extended methods
This extension extends `WebGLRenderingContext.texImage2D()`:
  * The `format` and `internalformat` parameters now accept `gl.DEPTH_COMPONENT` and `gl.DEPTH_STENCIL`.
  * The `type` parameter now accepts `gl.UNSIGNED_SHORT`, `gl.UNSIGNED_INT`, and `ext.UNSIGNED_INT_24_8_WEBGL`.
  * The `pixels` parameter now accepts a `Uint16Array` or a `Uint32Array` object.


This extension extends `WebGLRenderingContext.framebufferTexture2D()`:
  * The `attachment` parameter now accepts `gl.DEPTH_STENCIL_ATTACHMENT`.


## Examples
    
    const ext = gl.getExtension("WEBGL_depth_texture");
    
    gl.texImage2D(
      gl.TEXTURE_2D,
      0,
      gl.DEPTH_COMPONENT,
      512,
      512,
      0,
      gl.DEPTH_COMPONENT,
      gl.UNSIGNED_SHORT,
      null,
    );
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.texImage2D()`
  * `WebGLRenderingContext.framebufferTexture2D()`


# WebGLFramebuffer
Note: This feature is available in Web Workers.
The WebGLFramebuffer interface is part of the WebGL API and represents a collection of buffers that serve as a rendering destination.
WebGLObject  WebGLFramebuffer 
## Description
The `WebGLFramebuffer` object does not define any methods or properties of its own and its content is not directly accessible. When working with `WebGLFramebuffer` objects, the following methods of the `WebGLRenderingContext` are useful:
  * `WebGLRenderingContext.bindFramebuffer()`
  * `WebGLRenderingContext.createFramebuffer()`
  * `WebGLRenderingContext.deleteFramebuffer()`
  * `WebGLRenderingContext.isFramebuffer()`
  * `WebGLRenderingContext.framebufferRenderbuffer()`
  * `WebGLRenderingContext.framebufferTexture2D()`


## Examples
>
### Creating a frame buffer
    
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext("webgl");
    const buffer = gl.createFramebuffer();
    
  * `WebGLRenderingContext.bindFramebuffer()`
  * `WebGLRenderingContext.createFramebuffer()`
  * `WebGLRenderingContext.deleteFramebuffer()`
  * `WebGLRenderingContext.isFramebuffer()`
  * `WebGLRenderingContext.framebufferRenderbuffer()`
  * `WebGLRenderingContext.framebufferTexture2D()`
  * Other buffers: `WebGLBuffer`, `WebGLRenderbuffer`


# Console API
Note: This feature is available in Web Workers.
The Console API provides functionality to allow developers to perform debugging tasks, such as logging messages or the values of variables at set points in your code, or timing how long an operation takes to complete.
## Concepts and usage
The Console API started as a largely proprietary API, with different browsers implementing it, albeit in inconsistent ways. The Console API spec was created to define consistent behavior, and all modern browsers eventually settled on implementing this behavior — although some implementations still have their own additional proprietary functions. Find out about these at:
  * Google Chrome DevTools implementation
  * Safari DevTools implementation


Usage is very simple — the `console` object contains many methods that you can call to perform rudimentary debugging tasks, generally focused around logging various values to the browser's Web Console.
By far the most commonly-used method is `console.log()`, which is used to log the current value contained inside a specific variable.
## Interfaces
`console`
    
Provides rudimentary debugging functionality, including logging, stack traces, timers, and counters.
## Examples
    
    let myString = "Hello world";
    
    // Output "Hello world" to the console
    console.log(myString);
    
See the console reference page for more examples.
  * Tools
  * Web Console — how the Web Console in Firefox handles console API calls
  * about:debugging — how to see console output when the debugging target is a mobile device


# ImageDecoder
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Dedicated Web Workers.
The `ImageDecoder` interface of the WebCodecs API provides a way to unpack and decode encoded image data.
## Constructor
`ImageDecoder()`
    
Creates a new `ImageDecoder` object.
## Instance properties
`ImageDecoder.complete` Read only
    
Returns a boolean value indicating whether encoded data is completely buffered.
`ImageDecoder.completed` Read only
    
Returns a `Promise` that resolves once `complete` is true.
`ImageDecoder.tracks` Read only
    
Returns an `ImageTrackList` object listing the available tracks and providing a method for selecting a track to decode.
`ImageDecoder.type` Read only
    
Returns a string reflecting the MIME type configured during construction.
## Static methods
`ImageDecoder.isTypeSupported()`
    
Indicates if the provided MIME type is supported for unpacking and decoding.
## Instance methods
`ImageDecoder.close()`
    
Ends all pending work and releases system resources.
`ImageDecoder.decode()`
    
Enqueues a control message to decode the frame of an image.
`ImageDecoder.reset()`
    
Aborts all pending `decode()` operations.
## Examples
Given a `<canvas>` element:
    
    <canvas></canvas>
    
the following code decodes and renders an animated image to that canvas:
    
    let imageDecoder = null;
    let imageIndex = 0;
    
    function renderImage(result) {
      const canvas = document.querySelector("canvas");
      const canvasContext = canvas.getContext("2d");
    
      canvasContext.drawImage(result.image, 0, 0);
    
      const track = imageDecoder.tracks.selectedTrack;
    
      // We check complete here since `frameCount` won't be stable until all
      // data has been received. This may cause us to receive a RangeError
      // during the decode() call below which needs to be handled.
      if (imageDecoder.complete) {
        if (track.frameCount === 1) return;
    
        if (imageIndex + 1 >= track.frameCount) imageIndex = 0;
      }
    
      // Decode the next frame ahead of display so it's ready in time.
      imageDecoder
        .decode({ frameIndex: ++imageIndex })
        .then((nextResult) =>
          setTimeout(() => {
            renderImage(nextResult);
          }, result.image.duration / 1000.0),
        )
        .catch((e) => {
          // We can end up requesting an imageIndex past the end since
          // we're using a ReadableStream from fetch(), when this happens
          // just wrap around.
          if (e instanceof RangeError) {
            imageIndex = 0;
            imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
          } else {
            throw e;
          }
        });
    }
    
    function decodeImage(imageByteStream) {
      imageDecoder = new ImageDecoder({ data: imageByteStream, type: "image/gif" });
      imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
    }
    
    fetch("fancy.gif").then((response) => decodeImage(response.body));
    
# Keyboard API
The Keyboard API provides methods for working with a physical keyboard that is attached to a device running a browser.
It provides several capabilities. Keyboard mapping provides an interface for retrieving the string generated by particular physical key on a keyboard to correctly identify that key to a user. Keyboard locking enables a web page to capture keys that are normally reserved by the user agent or the underlying operating system. The intended use of the Keyboard API is by web applications such as games or remote access apps that provide a fullscreen immersive experience.
## Concepts and usage
>
### Keyboard mapping
On physical keyboards, the `code` attribute contains the physical location of the key that was pressed, and the `key` attribute contains the string generated by pressing the key at that physical location on the keyboard. The `key` value takes into account the keyboard's locale (for example, 'en-US'), layout (for example, 'QWERTY'), and modifier-key state (`Shift`, `Control`, etc.). Historically there has been no way to retrieve that information.
The Keyboard Map API provides a way to retrieve the string generated by a particular key press, through the `Keyboard` interface and the `KeyboardLayoutMap` interface. The `Keyboard` interface is accessed through `navigator.keyboard`. `Keyboard` provides the `Keyboard.getLayoutMap` method, which returns a promise that resolves with a `KeyboardLayoutMap` object that contains members for converting codes to keys. A list of valid code values is found in the Writing System Keys section of the UI Events KeyboardEvent code Values spec.
The following example demonstrates how to get the location-specific or layout-specific string associated with the key labeled `W` on an English QWERTY keyboard.
    
    if (navigator.keyboard) {
      const keyboard = navigator.keyboard;
      keyboard.getLayoutMap().then((keyboardLayoutMap) => {
        const upKey = keyboardLayoutMap.get("KeyW");
        window.alert(`Press ${upKey} to move up.`);
      });
    } else {
      // Do something else.
    }
    
### Keyboard locking
Richly interactive web pages, games, and remote-streaming experiences often require access to special keys and keyboard shortcuts while in fullscreen mode. Examples of such key/key combinations include `Escape`, `Alt+Tab`, and `Ctrl+N`. Those keys and key combinations are typically captured by the user agent or the underlying operating system, as illustrated in the following example.
To capture the `W`, `A`, `S`, and `D` keys, call `lock()` with a list that contains the key code attribute value for each of these keys:
    
    navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
    
This captures these keys regardless of which modifiers are used with the key press. Assuming a standard United States QWERTY layout, registering `KeyW` ensures that `W`, `Shift+W`, `Control+W`, `Control+Shift+W`, and all other key modifier combinations with `W` are sent to the app. The same applies to for `KeyA`, `KeyS`, and `KeyD`.
### Writing system keys
The codes passed `Keyboard.lock` and the various methods of the `KeyboardLayoutMap` interface are called "writing system keys".
"Writing system keys" are defined in the Writing System Keys section of the UI Events KeyboardEvent code Values spec, since the physical keys change meaning based on the current locale and keyboard layout. These keys are shown below. Blue keys are present on all standard keyboards while green keys are only available on some keyboards.
## Interfaces
`Keyboard` Experimental
    
Provides functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
`KeyboardLayoutMap` Experimental
    
A map-like object with functions for retrieving the string associated with specific physical keys.
### Extensions to other interfaces
`navigator.keyboard` Read only Experimental
    
Returns a `Keyboard` object which provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
>
### api.Keyboard
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Keyboard_API` 68 79 No 55 No 68 No 48 No 10.0 68 No  
`getLayoutMap` 69 79 No 56 No 69 No 48 No 10.0 69 No  
`lock` 68 79 No 55 No 68 No 48 No 10.0 68 No  
`unlock` 68 79 No 55 No 68 No 48 No 10.0 68 No  
### api.KeyboardLayoutMap
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`@@iterator` 69 79 No 56 No 69 No 48 No 10.0 69 No  
`Keyboard_API` 69 79 No 55 No 69 No 48 No 10.0 69 No  
`entries` 69 79 No 56 No 69 No 48 No 10.0 69 No  
`forEach` 69 79 No 56 No 69 No 48 No 10.0 69 No  
`get` 69 79 No 56 No 69 No 48 No 10.0 69 No  
`has` 69 79 No 56 No 69 No 48 No 10.0 69 No  
`keys` 69 79 No 56 No 69 No 48 No 10.0 69 No  
`size` 69 79 No 56 No 69 No 48 No 10.0 69 No  
`values` 69 79 No 56 No 69 No 48 No 10.0 69 No  
# RTCErrorEvent
The WebRTC API's `RTCErrorEvent` interface represents an error sent to a WebRTC object. It's based on the standard `Event` interface, but adds RTC-specific information describing the error, as shown below.
Event  RTCErrorEvent 
## Constructor
`RTCErrorEvent()`
    
Creates and returns a new `RTCErrorEvent` object.
## Instance properties
In addition to the standard properties available on the `Event` interface, `RTCErrorEvent` also includes the following:
`error` Read only
    
An `RTCError` object specifying the error which occurred; this object includes the type of error that occurred, information about where the error occurred (such as which line number in the SDP or what SCTP cause code was at issue).
## Instance methods
No additional methods are provided beyond any found on the parent interface, `Event`.
## Description
There are other data types used for error events in WebRTC, as needed for errors with special information sharing requirements. The most common of these is probably `RTCPeerConnectionIceErrorEvent`, used by the `icecandidateerror` event, which signals an error that has occurred while gathering ICE candidates during connection negotiation.
  * WebRTC API
  * `RTCError`
  * The `error` event occurs on the following interfaces: `RTCDataChannel` and `RTCDtlsTransport`
  * `RTCPeerConnectionIceErrorEvent`


# CredentialsContainer
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `CredentialsContainer` interface of the Credential Management API exposes methods to request credentials and notify the user agent when events such as successful sign in or sign out happen. This interface is accessible from `Navigator.credentials`.
## Instance properties
None.
## Instance methods
`CredentialsContainer.create()`
    
Returns a `Promise` that resolves with a new `Credential` instance based on the provided options, or `null` if no `Credential` object can be created. In exceptional circumstances, the `Promise` may reject.
`CredentialsContainer.get()`
    
Returns a `Promise` that resolves with the `Credential` instance that matches the provided parameters.
`CredentialsContainer.preventSilentAccess()`
    
Sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty `Promise`. For example, you might call this, after a user signs out of a website to ensure that they aren't automatically signed in on the next site visit. Earlier versions of the spec called this method `requireUserMediation()`. See Browser compatibility for support details.
`CredentialsContainer.store()`
    
Stores a set of credentials for a user, inside a provided `Credential` instance and returns that instance in a `Promise`.
# Worklet
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Worklet` interface is a lightweight version of Web Workers and gives developers access to low-level parts of the rendering pipeline.
With Worklets, you can run JavaScript and WebAssembly code to do graphics rendering or audio processing where high performance is required.
Worklets allow static import of ECMAScript modules, if supported, using `import`. Dynamic import is disallowed by the specification — calling `import()` will throw.
## Worklet types
Worklets are restricted to specific use cases; they cannot be used for arbitrary computations like Web Workers. The `Worklet` interface abstracts properties and methods common to all kind of worklets, and cannot be created directly. Instead, you can use one of the following classes:
Name Description Location Specification  
`AudioWorklet` For audio processing with custom AudioNodes. Web Audio render thread Web Audio API  
`AnimationWorklet` For creating scroll-linked and other high performance procedural animations.  Compositor thread CSS Animation Worklet API  
`LayoutWorklet` For defining the positioning and dimensions of custom elements. CSS Layout API  
`SharedStorageWorklet` For running private operations on cross-site data, without risk of data leakage. Main thread Shared Storage API  
Note: Paint worklets, defined by the CSS Painting API, don't subclass `Worklet`. They are accessed through a regular `Worklet` object obtained using `CSS.paintWorklet`.
For 3D rendering with WebGL, you don't use worklets. Instead, you write vertex shaders and fragment shaders using GLSL code, and those shaders will then run on the graphics card.
## Instance properties
The Worklet interface does not define any properties.
## Instance methods
`Worklet.addModule()`
    
Adds the script module at the given URL to the current worklet.
  * Houdini: Demystifying CSS on Google Developers (2016)
  * AudioWorklet :: What, Why, and How on YouTube (2017)
  * Enter AudioWorklet on Google Developers (2017)
  * Animation Worklet - HTTP203 Advent on YouTube (2017)


# CSSMathMin
The `CSSMathMin` interface of the CSS Typed Object Model API represents the CSS `min()` function. It inherits properties and methods from its parent `CSSNumericValue`.
CSSStyleValue  CSSNumericValue  CSSMathValue  CSSMathMin 
## Constructor
`CSSMathMin()` Experimental
    
Creates a new `CSSMathMin` object.
## Instance properties
`CSSMathMin.values` Read only
    
Returns a `CSSNumericArray` object which contains one or more `CSSNumericValue` objects.
## Static methods
The interface may also inherit methods from its parent interface, `CSSMathValue`.
## Instance methods
The interface may also inherit methods from its parent interface, `CSSMathValue`.
## Examples
To do
# CSSOM view API
The CSSOM view API lets you manipulate the visual view of a document, including getting the position of element layout boxes, obtaining the width or height of the viewport through script, and also scrolling an element.
## Guides
Coordinate systems
    
The coordinate systems used to specify a position in a display context such as a window on a monitor, a viewport on a mobile device, or a position on a sheet of paper when printing.
Viewport concepts
    
The concept of the viewport — what it is, its impact in terms of CSS, SVG, and mobile devices — and the difference between the visual viewport and the layout viewport.
## Interfaces
  * `MediaQueryList`
  * `MediaQueryListEvent`
  * `Screen`
  * `CaretPosition`
  * `VisualViewport`


## Extensions to other interfaces
This module adds properties, methods, and events to interfaces defined in other specifications.
### Extensions to Window
  * `devicePixelRatio`
  * `innerHeight`
  * `innerWidth`
  * `matchMedia()`
  * `moveBy()`
  * `moveTo()`
  * `outerHeight`
  * `outerWidth`
  * `pageXOffset` (see `scrollX`)
  * `pageYOffset` (see `scrollY`)
  * `resizeBy()`
  * `resizeTo()`
  * `screen`
  * `screenLeft`
  * `screenTop`
  * `screenX`
  * `screenY`
  * `visualViewport`
  * `scroll()`
  * `scrollBy()`
  * `scrollTo()`
  * `scrollX`
  * `scrollY`
  * `resize` event


### Extensions to Document
  * `elementFromPoint()`
  * `caretPositionFromPoint()`
  * `scrollingElement`
  * `scroll` event
  * `scrollend` event


### Extensions to Element
  * `checkVisibility()`
  * `clientHeight`
  * `clientLeft`
  * `clientTop`
  * `clientWidth`
  * `currentCSSZoom`
  * `getBoundingClientRect()`
  * `getClientRects()`
  * `scroll()`
  * `scrollBy()`
  * `scrollHeight`
  * `scrollIntoView()`
  * `scrollLeft`
  * `scrollTo()`
  * `scrollTop`
  * `scrollWidth`
  * `scroll` event
  * `scrollend` event


### Extensions to HTMLElement
  * `offsetHeight`
  * `offsetLeft`
  * `offsetParent`
  * `offsetTop`
  * `offsetWidth`


### Extensions to HTMLImageElement
  * `x`
  * `y`


### Extensions to Range
  * `getBoundingClientRect()`
  * `getClientRects()`


### Extensions to MouseEvent
  * `clientX`
  * `clientY`
  * `offsetX`
  * `offsetY`
  * `pageX`
  * `pageY`
  * `screenY`
  * `x`
  * `y`


This module defines geometric utility methods that apply to the `Text`, `Element`, `CSSPseudoElement`, and `Document` interfaces. These `GeometryUtils` features are not yet implemented in any browser.
  * CSS Object Model (CSSOM) API
  * CSSOM view module
  * CSS overflow module
  * CSS overscroll behavior module
  * CSS scroll snap module
  * Viewport
  * Layout viewport
  * Visual viewport
  * `zoom`
  * CSSOM
  * CSS pixel
  * Scroll container
  * `<meta>`


# AudioWorkletProcessor
The `AudioWorkletProcessor` interface of the Web Audio API represents an audio processing code behind a custom `AudioWorkletNode`. It lives in the `AudioWorkletGlobalScope` and runs on the Web Audio rendering thread. In turn, an `AudioWorkletNode` based on it runs on the main thread.
## Constructor
Note: The `AudioWorkletProcessor` and classes that derive from it cannot be instantiated directly from a user-supplied code. Instead, they are created only internally by the creation of an associated `AudioWorkletNode`s. The constructor of the deriving class is getting called with an options object, so you can perform a custom initialization procedures — see constructor page for details.
`AudioWorkletProcessor()`
    
Creates a new instance of an `AudioWorkletProcessor` object.
## Instance properties
`port` Read only
    
Returns a `MessagePort` used for bidirectional communication between the processor and the `AudioWorkletNode` which it belongs to. The other end is available under the `port` property of the node.
## Instance methods
The `AudioWorkletProcessor` interface does not define any methods of its own. However, you must provide a `process()` method, which is called in order to process the audio stream.
## Events
The `AudioWorkletProcessor` interface doesn't respond to any events.
## Usage notes
>
### Deriving classes
To define custom audio processing code you have to derive a class from the `AudioWorkletProcessor` interface. Although not defined on the interface, the deriving class must have the `process` method. This method gets called for each block of 128 sample-frames and takes input and output arrays and calculated values of custom `AudioParam`s (if they are defined) as parameters. You can use inputs and audio parameter values to fill the outputs array, which by default holds silence.
Optionally, if you want custom `AudioParam`s on your node, you can supply a `parameterDescriptors` property as a static getter on the processor. The array of `AudioParamDescriptor`-based objects returned is used internally to create the `AudioParam`s during the instantiation of the `AudioWorkletNode`.
The resulting `AudioParam`s reside in the `parameters` property of the node and can be automated using standard methods such as `linearRampToValueAtTime`. Their calculated values will be passed into the `process()` method of the processor for you to shape the node output accordingly.
### Processing audio
An example algorithm of creating a custom audio processing mechanism is:
  1. Create a separate file;
  2. In the file:
     1. Extend the `AudioWorkletProcessor` class (see "Deriving classes" section) and supply your own `process()` method in it;
     2. Register the processor using `AudioWorkletGlobalScope.registerProcessor()` method;
  3. Load the file using `addModule()` method on your audio context's `audioWorklet` property;
  4. Create an `AudioWorkletNode` based on the processor. The processor will be instantiated internally by the `AudioWorkletNode` constructor.
  5. Connect the node to the other nodes.


## Examples
In the example below we create a custom `AudioWorkletNode` that outputs white noise.
First, we need to define a custom `AudioWorkletProcessor`, which will output white noise, and register it. Note that this should be done in a separate file.
    
    // white-noise-processor.js
    class WhiteNoiseProcessor extends AudioWorkletProcessor {
      process(inputs, outputs, parameters) {
        const output = outputs[0];
        output.forEach((channel) => {
          for (let i = 0; i < channel.length; i++) {
            channel[i] = Math.random() * 2 - 1;
          }
        });
        return true;
      }
    }
    
    registerProcessor("white-noise-processor", WhiteNoiseProcessor);
    
Next, in our main script file we'll load the processor, create an instance of `AudioWorkletNode`, passing it the name of the processor, then connect the node to an audio graph.
    
    const audioContext = new AudioContext();
    await audioContext.audioWorklet.addModule("white-noise-processor.js");
    const whiteNoiseNode = new AudioWorkletNode(
      audioContext,
      "white-noise-processor",
    );
    whiteNoiseNode.connect(audioContext.destination);
    
  * Web Audio API
  * Using the Web Audio API
  * Using AudioWorklet


# GeolocationPosition
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `GeolocationPosition` interface represents the position of the concerned device at a given time. The position, represented by a `GeolocationCoordinates` object, comprehends the 2D position of the device, on a spheroid representing the Earth, but also its altitude and its speed.
## Instance properties
The `GeolocationPosition` interface doesn't inherit any properties.
`GeolocationPosition.coords` Read only
    
Returns a `GeolocationCoordinates` object defining the current location.
`GeolocationPosition.timestamp` Read only
    
Returns a timestamp, given as Unix time in milliseconds, representing the time at which the location was retrieved.
## Instance methods
The `GeolocationPosition` interface doesn't inherit any methods.
`GeolocationPosition.toJSON()`
    
Returns a JSON representation of the `GeolocationPosition` object and enables serialization with `JSON.stringify()`.
  * Using the Geolocation API
  * `Geolocation`


# PerformanceLongTaskTiming
The `PerformanceLongTaskTiming` interface provides information about tasks that occupy the UI thread for 50 milliseconds or more.
## Description
Long tasks that block the main thread for 50ms or more cause, among other issues:
  * Delayed Time to interactive (TTI).
  * High/variable input latency.
  * High/variable event handling latency.
  * Janky animations and scrolling.


A long task is any uninterrupted period where the main UI thread is busy for 50ms or longer. Common examples include:
  * Long-running event handlers.
  * Expensive reflows and other re-renders.
  * Work the browser does between different turns of the event loop that exceeds 50 ms.


Long tasks refer to "culprit browsing context container", or "the container" for short, which is the top-level page, `<iframe>`, `<embed>` or `<object>` that the task occurred within.
For tasks that don't occur within the top-level page and for figuring out which container is responsible for the long task, the `TaskAttributionTiming` interface provides the `containerId`, `containerName` and `containerSrc` properties, which may provide more information about the source of the task.
`PerformanceLongTaskTiming` inherits from `PerformanceEntry`.
PerformanceEntry  PerformanceLongTaskTiming 
## Instance properties
This interface extends the following `PerformanceEntry` properties for long task timing performance entry types by qualifying them as follows:
`PerformanceEntry.duration` Read only Experimental
    
Returns a `DOMHighResTimeStamp` representing the elapsed time between the start and end of the task, with a 1ms granularity.
`PerformanceEntry.entryType` Read only Experimental
    
Always returns `"longtask"`
`PerformanceEntry.name` Read only Experimental
    
Returns one of the following strings referring to the browsing context or frame that can be attributed to the long task:
  * `"cross-origin-ancestor"`
  * `"cross-origin-descendant"`
  * `"cross-origin-unreachable"`
  * `"multiple-contexts"`
  * `"same-origin-ancestor"`
  * `"same-origin-descendant"`
  * `"same-origin"`
  * `"self"`
  * `"unknown"`


`PerformanceEntry.startTime` Read only Experimental
    
Returns a `DOMHighResTimeStamp` representing the time when the task started.
This interface also supports the following properties:
`PerformanceLongTaskTiming.attribution` Read only Experimental
    
Returns a sequence of `TaskAttributionTiming` instances.
## Instance methods
`PerformanceLongTaskTiming.toJSON()` Experimental
    
Returns a JSON representation of the `PerformanceLongTaskTiming` object.
## Examples
>
### Getting long tasks
To get long task timing information, create a `PerformanceObserver` instance and then call its `observe()` method, passing in `"longtask"` as the value of the `type` option. You also need to set `buffered` to `true` to get access to long tasks the user agent buffered while constructing the document. The `PerformanceObserver` object's callback will then be called with a list of `PerformanceLongTaskTiming` objects which you can analyze.
    
    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        console.log(entry);
      });
    });
    
    observer.observe({ type: "longtask", buffered: true });
    
  * `TaskAttributionTiming`


# OffscreenCanvasRenderingContext2D
Note: This feature is available in Web Workers.
The `OffscreenCanvasRenderingContext2D` interface is a `CanvasRenderingContext2D` rendering context for drawing to the bitmap of an `OffscreenCanvas` object. It is similar to the `CanvasRenderingContext2D` object, with the following differences:
  * there is no support for user-interface features (`drawFocusIfNeeded`)
  * its `canvas` attribute refers to an `OffscreenCanvas` object rather than a `<canvas>` element
  * the bitmap for the placeholder `<canvas>` element belonging to the `OffscreenCanvas` object is updated during the rendering update of the `Window` or `Worker` that owns the `OffscreenCanvas`


## Example
The following code snippet creates a `Worker` object using the `Worker()` constructor. The `transferControlToOffscreen()` method is used to get an `OffscreenCanvas` object from the `<canvas>` element so it can be transferred to the worker:
    
    const canvas = document.getElementById("canvas");
    const offscreen = canvas.transferControlToOffscreen();
    const worker = new Worker("worker.js");
    worker.postMessage({ canvas: offscreen }, [offscreen]);
    
In the worker thread, we can use the `OffscreenCanvasRenderingContext2D` to draw to the bitmap of the `OffscreenCanvas` object:
    
    onmessage = (event) => {
      const canvas = event.data.canvas;
      const offCtx = canvas.getContext("2d");
      // draw to the offscreen canvas context
      offCtx.fillStyle = "red";
      offCtx.fillRect(0, 0, 100, 100);
    };
    
For a full example, see our OffscreenCanvas worker example (run OffscreenCanvas worker).
## Additional methods
The following method is new to the `OffscreenCanvasRenderingContext2D` interface and does not exist in the `CanvasRenderingContext2D` interface:
`commit()` Deprecated Non-standard
    
Pushes the rendered image to the context's `OffscreenCanvas` object's placeholder `<canvas>` element.
## Unsupported features
The following user interface method is not supported by the `OffscreenCanvasRenderingContext2D` interface:
`CanvasRenderingContext2D.drawFocusIfNeeded()`
    
If a given element is focused, this method draws a focus ring around the current path.
## Inherited properties and methods
The following properties and methods are inherited from `CanvasRenderingContext2D`. They have the same usage as in `CanvasRenderingContext2D`
### Context
`CanvasRenderingContext2D.getContextAttributes()` Experimental
    
Returns an object containing the actual context attributes. Context attributes can be requested with `OffscreenCanvas.getContext()`.
`CanvasRenderingContext2D.isContextLost()`
    
Returns `true` if the rendering context was lost.
### Drawing rectangles
`CanvasRenderingContext2D.clearRect()`
    
Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.
`CanvasRenderingContext2D.fillRect()`
    
Draws a filled rectangle at (x, y) position whose size is determined by width and height.
`CanvasRenderingContext2D.strokeRect()`
    
Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.
### Drawing text
The following methods and properties control drawing text. See also the `TextMetrics` object for text properties.
`CanvasRenderingContext2D.fillText()`
    
Draws (fills) a given text at the given (x, y) position.
`CanvasRenderingContext2D.strokeText()`
    
Draws (strokes) a given text at the given (x, y) position.
`CanvasRenderingContext2D.measureText()`
    
Returns a `TextMetrics` object.
`CanvasRenderingContext2D.textRendering`
    
Text rendering. Possible values: `auto` (default), `optimizeSpeed`, `optimizeLegibility`,
### Line styles
The following methods and properties control how lines are drawn.
`CanvasRenderingContext2D.lineWidth`
    
Width of lines. Default `1.0`.
`CanvasRenderingContext2D.lineCap`
    
Type of endings on the end of lines. Possible values: `butt` (default), `round`, `square`.
`CanvasRenderingContext2D.lineJoin`
    
Defines the type of corners where two lines meet. Possible values: `round`, `bevel`, `miter` (default).
`CanvasRenderingContext2D.miterLimit`
    
Miter limit ratio. Default `10`.
`CanvasRenderingContext2D.getLineDash()`
    
Returns the current line dash pattern array containing an even number of non-negative numbers.
`CanvasRenderingContext2D.setLineDash()`
    
Sets the current line dash pattern.
`CanvasRenderingContext2D.lineDashOffset`
    
Specifies where to start a dash array on a line.
### Text styles
The following properties control how text is laid out.
`CanvasRenderingContext2D.font`
    
Font setting. Default value `10px sans-serif`.
`CanvasRenderingContext2D.textAlign`
    
Text alignment setting. Possible values: `start` (default), `end`, `left`, `right`, `center`.
`CanvasRenderingContext2D.textBaseline`
    
Baseline alignment setting. Possible values: `top`, `hanging`, `middle`, `alphabetic` (default), `ideographic`, `bottom`.
`CanvasRenderingContext2D.direction`
    
Directionality. Possible values: `ltr`, `rtl`, `inherit` (default).
`CanvasRenderingContext2D.letterSpacing`
    
Letter spacing. Default: `0px`.
`CanvasRenderingContext2D.fontKerning`
    
Font kerning. Possible values: `auto` (default), `normal`, `none`.
`CanvasRenderingContext2D.fontStretch`
    
Font stretch. Possible values: `ultra-condensed`, `extra-condensed`, `condensed`, `semi-condensed`, `normal` (default), `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`.
`CanvasRenderingContext2D.fontVariantCaps`
    
Font variant caps. Possible values: `normal` (default), `small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps`.
`CanvasRenderingContext2D.textRendering` Experimental
    
Text rendering. Possible values: `auto` (default), `optimizeSpeed`, `optimizeLegibility`, `geometricPrecision`.
`CanvasRenderingContext2D.wordSpacing`
    
Word spacing. Default value: `0px`
`CanvasRenderingContext2D.lang` Experimental
    
Gets or sets the language of the canvas drawing context.
### Fill and stroke styles
Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.
`CanvasRenderingContext2D.fillStyle`
    
Color or style to use inside shapes. Default to `black`.
`CanvasRenderingContext2D.strokeStyle`
    
Color or style to use for the lines around shapes. Default to `black`.
### Gradients and patterns
`CanvasRenderingContext2D.createConicGradient()`
    
Creates a conic gradient around a point given by coordinates represented by the parameters.
`CanvasRenderingContext2D.createLinearGradient()`
    
Creates a linear gradient along the line given by the coordinates represented by the parameters.
`CanvasRenderingContext2D.createRadialGradient()`
    
Creates a radial gradient given by the coordinates of the two circles represented by the parameters.
`CanvasRenderingContext2D.createPattern()`
    
Creates a pattern using the specified image. It repeats the source in the directions specified by the repetition argument. This method returns a `CanvasPattern`.
### Shadows
`CanvasRenderingContext2D.shadowBlur`
    
Specifies the blurring effect. Default: `0`.
`CanvasRenderingContext2D.shadowColor`
    
Color of the shadow. Default: fully-transparent black.
`CanvasRenderingContext2D.shadowOffsetX`
    
Horizontal distance the shadow will be offset. Default: `0`.
`CanvasRenderingContext2D.shadowOffsetY`
    
Vertical distance the shadow will be offset. Default: `0`.
### Paths
The following methods can be used to manipulate paths of objects.
`CanvasRenderingContext2D.beginPath()`
    
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
`CanvasRenderingContext2D.closePath()`
    
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
`CanvasRenderingContext2D.moveTo()`
    
Moves the starting point of a new sub-path to the (x, y) coordinates.
`CanvasRenderingContext2D.lineTo()`
    
Connects the last point in the current sub-path to the specified (x, y) coordinates with a straight line.
`CanvasRenderingContext2D.bezierCurveTo()`
    
Adds a cubic Bézier curve to the current path.
`CanvasRenderingContext2D.quadraticCurveTo()`
    
Adds a quadratic Bézier curve to the current path.
`CanvasRenderingContext2D.arc()`
    
Adds a circular arc to the current path.
`CanvasRenderingContext2D.arcTo()`
    
Adds an arc to the current path with the given control points and radius, connected to the previous point by a straight line.
`CanvasRenderingContext2D.ellipse()`
    
Adds an elliptical arc to the current path.
`CanvasRenderingContext2D.rect()`
    
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
`CanvasRenderingContext2D.roundRect()`
    
Creates a path for a rectangle with rounded corners at position (x, y) with a size that is determined by width and height and radii determined by radii.
### Drawing paths
`CanvasRenderingContext2D.fill()`
    
Fills the current sub-paths with the current fill style.
`CanvasRenderingContext2D.stroke()`
    
Strokes the current sub-paths with the current stroke style.
`CanvasRenderingContext2D.clip()`
    
Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
`CanvasRenderingContext2D.isPointInPath()`
    
Reports whether or not the specified point is contained in the current path.
`CanvasRenderingContext2D.isPointInStroke()`
    
Reports whether or not the specified point is inside the area contained by the stroking of a path.
### Transformations
Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and `Path2D` objects. The methods listed below remain for historical and compatibility reasons as `DOMMatrix` objects are used in most parts of the API nowadays and will be used in the future instead.
`CanvasRenderingContext2D.getTransform()`
    
Retrieves the current transformation matrix being applied to the context.
`CanvasRenderingContext2D.rotate()`
    
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
`CanvasRenderingContext2D.scale()`
    
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
`CanvasRenderingContext2D.translate()`
    
Adds a translation transformation by moving the canvas and its origin x horizontally and y vertically on the grid.
`CanvasRenderingContext2D.transform()`
    
Multiplies the current transformation matrix with the matrix described by its arguments.
`CanvasRenderingContext2D.setTransform()`
    
Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments.
`CanvasRenderingContext2D.resetTransform()`
    
Resets the current transform by the identity matrix.
### Compositing
`CanvasRenderingContext2D.globalAlpha`
    
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0` (opaque).
`CanvasRenderingContext2D.globalCompositeOperation`
    
With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap.
### Drawing images
`CanvasRenderingContext2D.drawImage()`
    
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
### Pixel manipulation
See also the `ImageData` object.
`CanvasRenderingContext2D.createImageData()`
    
Creates a new, blank `ImageData` object with the specified dimensions. All of the pixels in the new object are transparent black.
`CanvasRenderingContext2D.getImageData()`
    
Returns an `ImageData` object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.
`CanvasRenderingContext2D.putImageData()`
    
Paints data from the given `ImageData` object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
### Image smoothing
`CanvasRenderingContext2D.imageSmoothingEnabled`
    
Image smoothing mode; if disabled, images will not be smoothed if scaled.
`CanvasRenderingContext2D.imageSmoothingQuality`
    
Allows you to set the quality of image smoothing.
### The canvas state
The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:
`CanvasRenderingContext2D.save()`
    
Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`.
`CanvasRenderingContext2D.restore()`
    
Restores the drawing style state to the last element on the 'state stack' saved by `save()`.
`CanvasRenderingContext2D.canvas`
    
A read-only reference to an `OffscreenCanvas` object.
`CanvasRenderingContext2D.getContextAttributes()` Experimental
    
Returns an object containing the actual context attributes. Context attributes can be requested with `HTMLCanvasElement.getContext()`.
`CanvasRenderingContext2D.reset()`
    
Resets the current drawing style state to the default values.
### Filters
`CanvasRenderingContext2D.filter`
    
Applies a CSS or SVG filter to the canvas; e.g., to change its brightness or blurriness.
## Unsupported properties and methods
The following method is not supported in the `OffscreenCanvasRenderingContext2D` interface:
`CanvasRenderingContext2D.drawFocusIfNeeded()`
    
If a given element is focused, this method draws a focus ring around the current path.
  * `HTMLCanvasElement`
  * `<canvas>`


# NavigationHistoryEntry
The `NavigationHistoryEntry` interface of the Navigation API represents a single navigation history entry.
These objects are commonly accessed via the `Navigation.currentEntry` property and `Navigation.entries()` method.
The Navigation API only exposes history entries created in the current browsing context that have the same origin as the current page (e.g., not navigations inside embedded `<iframe>`s, or cross-origin navigations), providing an accurate list of all previous history entries just for your app. This makes traversing the history a much less fragile proposition than with the older History API.
EventTarget  NavigationHistoryEntry 
## Instance properties
Inherits properties from its parent, `EventTarget`.
`id` Read only Experimental
    
Returns the `id` of the history entry. This is a unique, UA-generated value that always represents a specific history entry, useful to correlate it with an external resource such as a storage cache.
`index` Read only Experimental
    
Returns the index of the history entry in the history entries list (that is, the list returned by `Navigation.entries()`), or `-1` if the entry does not appear in the list.
`key` Read only Experimental
    
Returns the `key` of the history entry. This is a unique, UA-generated value that represents the history entry's slot in the entries list rather than the entry itself. It is used to navigate that particular slot via `Navigation.traverseTo()`. The `key` will be reused by other entries that replace the entry in the list (that is, if the `NavigateEvent.navigationType` is `replace`).
`sameDocument` Read only Experimental
    
Returns `true` if this history entry is for the same `document` as the current `Document` value, or `false` otherwise.
`url` Read only Experimental
    
Returns the absolute URL of this history entry. If the entry corresponds to a different document than the current one (like `sameDocument` property is `false`), and that document was fetched with a `Referrer-Policy` header set to `no-referrer` or `origin`, the property returns `null`.
## Instance methods
Inherits methods from its parent, `EventTarget`.
`getState()` Experimental
    
Returns a clone of the available state associated with this history entry.
## Events
`dispose` Experimental
    
Fires when the entry is no longer part of the history entry list.
## Examples
    
    function initHomeBtn() {
      // Get the key of the first loaded entry
      // so the user can always go back to this view.
      const { key } = navigation.currentEntry;
      backToHomeButton.onclick = () => {
        navigation.traverseTo(key);
      };
    }
    // Intercept navigate events, such as link clicks, and
    // replace them with single-page navigations
    navigation.addEventListener("navigate", (event) => {
      event.intercept({
        async handler() {
          // Navigate to a different view,
          // but the "home" button will always work.
        },
      });
    });
    
  * Modern client-side routing: the Navigation API
  * Navigation API explainer
  * Navigation API live demo (view demo source)


# Network Information API
Note: This feature is available in Web Workers.
The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi, 'cellular', etc.). This can be used to select high definition content or low definition content based on the user's connection.
The interface consists of a single `NetworkInformation` object, an instance of which is returned by the `Navigator.connection` property or the `WorkerNavigator.connection` property.
## Interfaces
`NetworkInformation`
    
Provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes. The `NetworkInformation` interface cannot be instantiated. It is instead accessed through the `Navigator` interface or the `WorkerNavigator` interface.
### Extensions to other interfaces
`Navigator.connection` Read only
    
Returns a `NetworkInformation` object containing information about the network connection of a device.
`WorkerNavigator.connection` Read only
    
Provides a `NetworkInformation` object containing information about the network connection of a device.
## Examples
>
### Detect connection changes
This example watches for changes to the user's connection.
    
    let type = navigator.connection.effectiveType;
    
    function updateConnectionStatus() {
      console.log(
        `Connection type changed from ${type} to ${navigator.connection.effectiveType}`,
      );
      type = navigator.connection.effectiveType;
    }
    
    navigator.connection.addEventListener("change", updateConnectionStatus);
    
### Preload large resources
The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the `preloadVideo` flag is set to `false`. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values of `NetworkInformation.type`. Regardless of the `type` value you can get an estimate of connection speed through the `NetworkInformation.effectiveType` property.
    
    let preloadVideo = true;
    const connection = navigator.connection;
    if (connection) {
      if (connection.effectiveType === "slow-2g") {
        preloadVideo = false;
      }
    }
    
  * Online and offline events


# ContentVisibilityAutoStateChangeEvent
The `ContentVisibilityAutoStateChangeEvent` interface is the event object for the `contentvisibilityautostatechange` event, which fires on any element with `content-visibility: auto` set on it when it starts or stops being relevant to the user and skipping its contents.
While the element is not relevant (between the start and end events), the user agent skips an element's rendering, including layout and painting. This can significantly improve page rendering speed. The `contentvisibilityautostatechange` event provides a way for an app's code to also start or stop rendering processes (e.g., drawing on a `<canvas>`) when they are not needed, thereby conserving processing power.
Note that even when hidden from view, element contents will remain semantically relevant (e.g., to assistive technology users), so this signal should not be used to skip significant semantic DOM updates.
Event  ContentVisibilityAutoStateChangeEvent 
## Constructor
`ContentVisibilityAutoStateChangeEvent()`
    
Creates a new `ContentVisibilityAutoStateChangeEvent` object instance.
## Instance properties
Inherits properties from its parent, `Event`.
`skipped` Read only
    
Returns `true` if the user agent is skipping the element's rendering, or `false` otherwise.
## Examples
    
    const canvasElem = document.querySelector("canvas");
    
    canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
    canvasElem.style.contentVisibility = "auto";
    
    function stateChanged(event) {
      if (event.skipped) {
        stopCanvasUpdates(canvasElem);
      } else {
        startCanvasUpdates(canvasElem);
      }
    }
    
    // Call this when the canvas updates need to start.
    function startCanvasUpdates(canvas) {
      // …
    }
    
    // Call this when the canvas updates need to stop.
    function stopCanvasUpdates(canvas) {
      // …
    }
    
  * The `contentvisibilityautostatechange` event
  * CSS Containment
  * The `content-visibility` property
  * The `contain` property


# GPUSupportedLimits
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUSupportedLimits` interface of the WebGPU API describes the limits supported by a `GPUAdapter`.
The `GPUSupportedLimits` object for the current adapter is accessed via the `GPUAdapter.limits` property.
You should note that, rather than reporting the exact limits of each GPU, browsers will likely report different tier values of different limits to reduce the unique information available to drive-by fingerprinting. For example, the tiers of a certain limit might be 2048, 8192, and 32768. If your GPU's actual limit is 16384, the browser will still report 8192.
Given that different browsers will handle this differently and the tier values may change over time, it is hard to provide an accurate account of what limit values to expect — thorough testing is advised.
## Instance properties
The following limits are represented by properties in a `GPUSupportedLimits` object. See the Limits section of the specification for detailed descriptions of what the limits relate to.
Limit name Default value  
`maxTextureDimension1D` 8192  
`maxTextureDimension2D` 8192  
`maxTextureDimension3D` 2048  
`maxTextureArrayLayers` 256  
`maxBindGroups` 4  
`maxBindingsPerBindGroup` 640  
`maxDynamicUniformBuffersPerPipelineLayout` 8  
`maxDynamicStorageBuffersPerPipelineLayout` 4  
`maxSampledTexturesPerShaderStage` 16  
`maxSamplersPerShaderStage` 16  
`maxStorageBuffersPerShaderStage` 8  
`maxStorageTexturesPerShaderStage` 4  
`maxUniformBuffersPerShaderStage` 12  
`maxUniformBufferBindingSize` 65536 bytes  
`maxStorageBufferBindingSize` 134217728 bytes (128 MB)  
`minUniformBufferOffsetAlignment` 256 bytes  
`minStorageBufferOffsetAlignment` 256 bytes  
`maxVertexBuffers` 8  
`maxBufferSize` 268435456 bytes (256 MB)  
`maxVertexAttributes` 16  
`maxVertexBufferArrayStride` 2048 bytes  
`maxInterStageShaderComponents` Deprecated Non-standard (use `maxInterStageShaderVariables` instead, see deprecation notice for more info) 60  
`maxInterStageShaderVariables` 16  
`maxColorAttachments` 8  
`maxColorAttachmentBytesPerSample` 32  
`maxComputeWorkgroupStorageSize` 16384 bytes  
`maxComputeInvocationsPerWorkgroup` 256  
`maxComputeWorkgroupSizeX` 256  
`maxComputeWorkgroupSizeY` 256  
`maxComputeWorkgroupSizeZ` 64  
`maxComputeWorkgroupsPerDimension` 65535  
## Examples
In the following code we query the `GPUAdapter.limits` value of `maxBindGroups` to see if it is equal to or greater than 6. Our theoretical example app ideally needs 6 bind groups, so if the returned value is >= 6, we add a maximum limit of 6 to the `requiredLimits` object. We then request a device with that limit requirement using `GPUAdapter.requestDevice()`:
    
    async function init() {
      if (!navigator.gpu) {
        throw Error("WebGPU not supported.");
      }
    
      const adapter = await navigator.gpu.requestAdapter();
      if (!adapter) {
        throw Error("Couldn't request WebGPU adapter.");
      }
    
      const requiredLimits = {};
    
      // App ideally needs 6 bind groups, so we'll try to request what the app needs
      if (adapter.limits.maxBindGroups >= 6) {
        requiredLimits.maxBindGroups = 6;
      }
    
      const device = await adapter.requestDevice({
        requiredLimits,
      });
    
      // …
    }
    
  * The WebGPU API


# ImageBitmapRenderingContext
Note: This feature is available in Web Workers.
The `ImageBitmapRenderingContext` interface is a canvas rendering context that provides the functionality to replace the canvas's contents with the given `ImageBitmap`. Its context id (the first argument to `HTMLCanvasElement.getContext()` or `OffscreenCanvas.getContext()`) is `"bitmaprenderer"`.
This interface is available in both the window and the worker context.
## Instance properties
`ImageBitmapRenderingContext.canvas` Read only
    
A read-only reference to the `HTMLCanvasElement` or `OffscreenCanvas` object that is associated with the given context.
## Instance methods
`ImageBitmapRenderingContext.transferFromImageBitmap()`
    
Displays the given `ImageBitmap` in the canvas associated with this rendering context. Ownership of the `ImageBitmap` is transferred to the canvas. This was previously named `transferImageBitmap()`, but was renamed in a spec change. The old name is being kept as an alias to avoid code breakage.
  * `OffscreenCanvas`


# BackgroundFetchManager
Note: This feature is available in Web Workers.
The `BackgroundFetchManager` interface of the Background Fetch API is a map where the keys are background fetch IDs and the values are `BackgroundFetchRegistration` objects.
## Instance properties
None.
## Instance methods
`fetch()` Experimental
    
Returns a `Promise` that resolves with a `BackgroundFetchRegistration` object for a supplied array of URLs and `Request` objects.
`get()` Experimental
    
Returns a `Promise` that resolves with the `BackgroundFetchRegistration` associated with the provided `id` or `undefined` if the `id` is not found.
`getIds()` Experimental
    
Returns the IDs of all registered background fetches.
## Examples
The example below shows how to get an instance of `BackgroundFetchManager` from a `ServiceWorkerRegistration` object and calls `fetch()` to download an audio file in the background.
    
    navigator.serviceWorker.ready.then(async (swReg) => {
      const bgFetch = await swReg.backgroundFetch.fetch(
        "my-fetch",
        ["/ep-5.mp3", "ep-5-artwork.jpg"],
        {
          title: "Episode 5: Interesting things.",
          icons: [
            {
              sizes: "300x300",
              src: "/ep-5-icon.png",
              type: "image/png",
            },
          ],
          downloadTotal: 60 * 1024 * 1024,
        },
      );
    });
    
# SVGFEColorMatrixElement
The `SVGFEColorMatrixElement` interface corresponds to the `<feColorMatrix>` element.
EventTarget  Node  Element  SVGElement  SVGFEColorMatrixElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEColorMatrixElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEColorMatrixElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFEColorMatrixElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEColorMatrixElement.type` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `type` attribute of the given element. It takes one of the `SVG_FECOLORMATRIX_TYPE_*` constants defined on this interface.
`SVGFEColorMatrixElement.values` Read only
    
An `SVGAnimatedNumberList` corresponding to the `values` attribute of the given element.
`SVGFEColorMatrixElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEColorMatrixElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEColorMatrixElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
## Static properties
`SVG_FECOLORMATRIX_TYPE_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_FECOLORMATRIX_TYPE_MATRIX` (1)
    
Corresponds to the value `matrix`.
`SVG_FECOLORMATRIX_TYPE_SATURATE` (2)
    
Corresponds to the value `saturate`.
`SVG_FECOLORMATRIX_TYPE_HUEROTATE` (3)
    
Corresponds to the value `hueRotate`.
`SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA` (4)
    
Corresponds to the value `luminanceToAlpha`.
  * `<feColorMatrix>`


# WindowControlsOverlay
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `WindowControlsOverlay` interface of the Window Controls Overlay API exposes information about the geometry of the title bar area in desktop Progressive Web Apps, and an event to know whenever it changes. This interface is accessible from `Navigator.windowControlsOverlay`.
EventTarget  WindowControlsOverlay 
## Instance properties
`WindowControlsOverlay.visible` Read only Experimental
    
A Boolean that indicates whether the window controls overlay is visible or not.
## Instance methods
`WindowControlsOverlay.getTitlebarAreaRect()` Experimental
    
Returns the size and position of the title bar.
## Events
Listen to these events using `EventTarget.addEventListener()` or by assigning an event listener to the relevant `oneventname` property of this interface.
`geometrychange` Experimental
    
Fired when the geometry of the title bar area changes.
## Examples
    
    if ("windowControlsOverlay" in navigator) {
      navigator.windowControlsOverlay.addEventListener(
        "geometrychange",
        (event) => {
          if (event.visible) {
            const rect = event.titlebarAreaRect;
            // Do something with the coordinates of the title bar area.
          }
        },
      );
    }
    
# USBConfiguration
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USBConfiguration` interface of the WebUSB API provides information about a particular configuration of a USB device and the interfaces that it supports.
## Constructor
`USBConfiguration()` Experimental
    
Creates a new `USBConfiguration` object which contains information about the configuration on the provided `USBDevice` with the given configuration value.
## Instance properties
`USBConfiguration.configurationValue` Read only Experimental
    
Returns the configuration value of this configuration. This is equal to the `bConfigurationValue` field of the configuration descriptor provided by the device defining this configuration.
`USBConfiguration.configurationName` Read only Experimental
    
Returns the name provided by the device to describe this configuration. This is equal to the value of the string descriptor with the index provided in the `iConfiguration` field of the configuration descriptor defining this configuration.
`USBConfiguration.interfaces` Read only Experimental
    
Returns an array containing instances of the `USBInterface` describing each interface supported by this configuration.
# OES_texture_float extension
The `OES_texture_float` extension is part of the WebGL API and exposes floating-point pixel types for textures.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default.
## Extended methods
This extension extends `WebGLRenderingContext.texImage2D()` and `WebGLRenderingContext.texSubImage2D()`:
  * The `type` parameter now accepts `gl.FLOAT`.
  * The `pixels` parameter now accepts a `Float32Array`.


## Limitation: Linear filtering
Linear filtering on floating-point textures is not allowed with this extension. If you set the magnification or minification filter in the `WebGLRenderingContext.texParameter()` method to one of `gl.LINEAR`, `gl.LINEAR_MIPMAP_NEAREST`, `gl.NEAREST_MIPMAP_LINEAR`, or `gl.LINEAR_MIPMAP_LINEAR`, and use floating-point textures, the texture will be marked as incomplete.
To use linear filtering on floating-point textures, enable the `OES_texture_float_linear` extension in addition to this extension.
## Floating-point color buffers
This extension implicitly enables the `WEBGL_color_buffer_float` extension (if supported), which allows rendering to 32-bit floating-point color buffers.
## Examples
    
    const ext = gl.getExtension("OES_texture_float");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.FLOAT, image);
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.texImage2D()`
  * `WebGLRenderingContext.texSubImage2D()`
  * `OES_texture_float_linear`
  * `OES_texture_half_float`
  * `OES_texture_half_float_linear`


# HTMLSpanElement
The `HTMLSpanElement` interface represents a `<span>` element and derives from the `HTMLElement` interface, but without implementing any additional properties or methods.
EventTarget  Node  Element  HTMLElement  HTMLSpanElement 
## Instance properties
This interface has no properties, but inherits properties from: `HTMLElement`.
## Instance methods
This interface has no methods, but inherits methods from: `HTMLElement`.
  * The HTML element implementing this interface: `<span>`.


# EXT_frag_depth extension
The `EXT_frag_depth` extension is part of the WebGL API and enables to set a depth value of a fragment from within the fragment shader.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default. It requires GLSL `#version 300 es`.
## Examples
Enable the extension:
    
    gl.getExtension("EXT_frag_depth");
    
Now the output variable `gl_FragDepthEXT` is available to set a depth value of a fragment from within the fragment shader:
    
    <script type="x-shader/x-fragment">
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
        gl_FragDepthEXT = 0.5;
      }
    </script>
    
  * `WebGLRenderingContext.getExtension()`


# NavigationTransition
The `NavigationTransition` interface of the Navigation API represents an ongoing navigation, that is, a navigation that hasn't yet reached the `navigatesuccess` or `navigateerror` stage.
It is accessed via the `Navigation.transition` property.
## Instance properties
`finished` Read only Experimental
    
Returns a `Promise` that fulfills at the same time the `navigatesuccess` event fires, or rejects at the same time the `navigateerror` event fires.
`from` Read only Experimental
    
Returns the `NavigationHistoryEntry` that the transition is coming from.
`navigationType` Read only Experimental
    
Returns the type of the ongoing navigation.
## Examples
    
    async function cleanupNavigation() {
      await navigation.transition.finished;
      // Navigation has completed successfully
      // Cleanup any ongoing monitoring
    }
    
  * Modern client-side routing: the Navigation API
  * Navigation API explainer
  * Navigation API live demo (view demo source)


# SVGSymbolElement
The `SVGSymbolElement` interface corresponds to the `<symbol>` element.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGSymbolElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGGraphicsElement`.
`SVGSymbolElement.viewBox` Read only
    
An `SVGAnimatedRect` corresponding to the `viewBox` attribute of the given `<symbol>` element.
`SVGSymbolElement.preserveAspectRatio` Read only
    
An `SVGAnimatedPreserveAspectRatio` corresponding to the `preserveAspectRatio` attribute of the given `<symbol>` element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGGraphicsElement`.
# NavigationCurrentEntryChangeEvent
The `NavigationCurrentEntryChangeEvent` interface of the Navigation API is the event object for the `currententrychange` event, which fires when the `Navigation.currentEntry` has changed.
This event will fire for same-document navigations (e.g., `back()` or `traverseTo()`), replacements (i.e., a `navigate()` call with `history` set to `replace`), or other calls that change the entry's state (e.g., `updateCurrentEntry()`, or the History API's `History.replaceState()`).
This event fires after the navigation is committed, meaning that the visible URL has changed and the `NavigationHistoryEntry` update has occurred. It is useful for migrating from usage of older API features like the `hashchange` or `popstate` events.
Event  NavigationCurrentEntryChangeEvent 
## Constructor
`NavigationCurrentEntryChangeEvent()` Experimental
    
Creates a new `NavigationCurrentEntryChangeEvent` object instance.
## Instance properties
Inherits properties from its parent, `Event`.
`from` Read only Experimental
    
Returns the `NavigationHistoryEntry` that was navigated from.
`navigationType` Read only Experimental
    
Returns the type of the navigation that resulted in the change.
## Examples
Navigation data reporting:
    
    navigation.addEventListener("currententrychange", () => {
      const data = navigation.currentEntry.getState();
      submitAnalyticsData(data.analytics);
    });
    
Setting up a per-entry event:
    
    navigation.addEventListener("currententrychange", () => {
      navigation.currentEntry.addEventListener("dispose", genericDisposeHandler);
    });
    
  * Modern client-side routing: the Navigation API
  * Navigation API explainer
  * Navigation API live demo (view demo source)


# NavigatorLogin
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `NavigatorLogin` interface of the Federated Credential Management (FedCM) API defines login functionality for federated identity providers (IdPs). Specifically, it enables a federated identity provider (IdP) to set its login status when a user signs into or out of the IdP.
See Update login status using the Login Status API for more details of how this is used.
`NavigatorLogin` is accessed via the `Navigator.login` property.
## Instance methods
`setStatus()`
    
Sets the login status of a federated identity provider (IdP), when called from the IdP's origin. By "login status", we mean "whether any users are logged into the IdP on the current browser or not".
## Examples
    
    /* Set logged-in status */
    navigator.login.setStatus("logged-in");
    
    /* Set logged-out status */
    navigator.login.setStatus("logged-out");
    
  * Federated Credential Management (FedCM) API


# VideoFrame
Note: This feature is available in Dedicated Web Workers.
The `VideoFrame` interface of the Web Codecs API represents a frame of a video.
`VideoFrame` is a transferable object.
## Description
A `VideoFrame` object can be created or accessed in a number of ways. The `MediaStreamTrackProcessor` breaks a media track into individual `VideoFrame` objects.
A `VideoFrame` is an image source and has a constructor that accepts any other canvas source ( an `SVGImageElement`, an `HTMLVideoElement`, an `HTMLCanvasElement`, an `ImageBitmap`, an `OffscreenCanvas`, or another `VideoFrame`). This means that a frame can be created from an image or video element.
A second constructor enables the creation of a `VideoFrame` from its binary pixel representation in an `ArrayBuffer`, a `TypedArray`, or a `DataView`.
Created frames may then turned into a media track, for example with the `MediaStreamTrackGenerator` interface that creates a media track from a stream of frames.
## Constructor
`VideoFrame()`
    
Creates a new `VideoFrame` object.
## Instance properties
`VideoFrame.format` Read only
    
Returns the pixel format of the `VideoFrame`.
`VideoFrame.codedWidth` Read only
    
Returns the width of the `VideoFrame` in pixels, potentially including non-visible padding, and prior to considering potential ratio adjustments.
`VideoFrame.codedHeight` Read only
    
Returns the height of the `VideoFrame` in pixels, potentially including non-visible padding, and prior to considering potential ratio adjustments.
`VideoFrame.codedRect` Read only
    
Returns a `DOMRectReadOnly` with the width and height matching `codedWidth` and `codedHeight`.
`VideoFrame.visibleRect` Read only
    
Returns a `DOMRectReadOnly` describing the visible rectangle of pixels for this `VideoFrame`.
`VideoFrame.displayWidth` Read only
    
Returns the width of the `VideoFrame` when displayed after applying aspect ratio adjustments.
`VideoFrame.displayHeight` Read only
    
Returns the height of the `VideoFrame` when displayed after applying aspect ratio adjustments.
`VideoFrame.duration` Read only
    
Returns an integer indicating the duration of the video in microseconds.
`VideoFrame.timestamp` Read only
    
Returns an integer indicating the timestamp of the video in microseconds.
`VideoFrame.colorSpace` Read only
    
Returns a `VideoColorSpace` object.
`VideoFrame.flip` Read only Experimental
    
Returns whether the `VideoFrame` is horizontally mirrored.
`VideoFrame.rotation` Read only Experimental
    
Returns the rotation (0, 90, 180, or 270) in degrees clockwise applied to the `VideoFrame`. Arbitrary numbers (including negatives) are rounded to the next quarter turn.
## Instance methods
`VideoFrame.allocationSize()`
    
Returns the number of bytes required to hold the `VideoFrame` as filtered by options passed into the method.
`VideoFrame.copyTo()`
    
Copies the contents of the `VideoFrame` to an `ArrayBuffer`.
`VideoFrame.clone()`
    
Creates a new `VideoFrame` object with reference to the same media resource as the original.
`VideoFrame.close()`
    
Clears all states and releases the reference to the media resource.
## Examples
In the following example frames are returned from a `MediaStreamTrackProcessor`, then encoded. See the full example and read more about it in the article Video processing with WebCodecs.
    
    let frame_counter = 0;
    
    const track = stream.getVideoTracks()[0];
    const media_processor = new MediaStreamTrackProcessor(track);
    
    const reader = media_processor.readable.getReader();
    while (true) {
      const result = await reader.read();
      if (result.done) break;
    
      let frame = result.value;
      if (encoder.encodeQueueSize > 2) {
        // Too many frames in flight, encoder is overwhelmed
        // let's drop this frame.
        frame.close();
      } else {
        frame_counter++;
        const insert_keyframe = frame_counter % 150 === 0;
        encoder.encode(frame, { keyFrame: insert_keyframe });
        frame.close();
      }
    }
    
  * Video processing with WebCodecs
  * WebCodecs examples


# GPUPipelineError
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUPipelineError` interface of the WebGPU API describes a pipeline failure. This is the value received when a `Promise` returned by a `GPUDevice.createComputePipelineAsync()` or `GPUDevice.createRenderPipelineAsync()` call rejects.
DOMException  GPUPipelineError 
## Constructor
`GPUPipelineError()`
    
Creates a new `GPUPipelineError` object instance.
## Instance properties
Inherits properties from its parent, `DOMException`.
`reason` Read only
    
An enumerated value that defines the reason the pipeline creation failed in a machine-readable way.
## Examples
In the following snippet we are attempting to create a `GPUComputePipeline` using `GPUDevice.createComputePipelineAsync()`. However, we have misspelt our compute pipeline `entryPoint` as `"maijn"` (it should be `"main"`), therefore pipeline creation fails, and our `catch` block prints the resulting reason and error message to the console.
    
    // …
    
    let computePipeline;
    
    try {
      computePipeline = await device.createComputePipelineAsync({
        layout: device.createPipelineLayout({
          bindGroupLayouts: [bindGroupLayout],
        }),
        compute: {
          module: shaderModule,
          entryPoint: "maijn",
        },
      });
    } catch (error) {
      // error is a GPUPipelineError object instance
      console.error(error.reason);
      console.error(`Pipeline creation failed: ${error.message}`);
    }
    
    // …
    
In this case, the given `reason` is `"Validation"`, and the `message` is `"Entry point "maijn" doesn't exist in the shader module [ShaderModule]."`
  * The WebGPU API
  * WebGPU Error Handling best practices


# Pointer events
Much of today's web content assumes the user's pointing device will be a mouse. However, since many devices support other types of pointing input devices, such as pen/stylus and touch surfaces, extensions to the existing pointing device event models are needed. Pointer events address that need.
Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers).
The pointer is a hardware-agnostic device that can target a specific set of screen coordinates. Having a single event model for pointers can simplify creating websites and applications and provide a good user experience regardless of the user's hardware. However, for scenarios when device-specific handling is desired, pointer events defines a `pointerType` property to inspect the device type which produced the event.
The events needed to handle generic pointer input are analogous to mouse events (`mousedown`/`pointerdown`, `mousemove`/`pointermove`, etc.). Consequently, pointer event types are intentionally similar to mouse event types.
Additionally, a pointer event contains the usual properties present in mouse events (client coordinates, target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc. In fact, the `PointerEvent` interface inherits all of the `MouseEvent` properties, thus facilitating the migration of content from mouse events to pointer events.
## Terminology
>
### active buttons state
The condition when a pointer has a non-zero value for the `buttons` property. For example, in the case of a pen, when the pen has physical contact with the digitizer, or at least one button is pressed while hovering.
### active pointer
Any pointer input device that can produce events. A pointer is considered active if it can still produce further events. For example, a pen that is a down state is considered active because it can produce additional events when the pen is lifted or moved.
### digitizer
A sensing device with a surface that can detect contact. Most commonly, the sensing device is a touch-enabled screen that can sense input from an input device such as a pen, stylus, or finger. Some sensing devices can detect the close proximity of the input device, and the state is expressed as a hover following the mouse.
### hit test
The process the browser uses to determine a target element for a pointer event. Typically, this is determined by considering the pointer's location and also the visual layout of elements in a document on screen media.
### pointer
A hardware-agnostic representation of input devices that can target a specific coordinate (or set of coordinates) on a screen. Examples of pointer input devices are mouse, pen/stylus, and touch contacts.
### pointer capture
Pointer capture allows the events for a pointer to be retargeted to a particular element other than the normal hit test result of the pointer's location. See capturing the pointer for an example.
Note: Pointer capture is different from pointer lock, which physically prevents the pointer from leaving a region.
### pointer event
A DOM `event` fired for a pointer.
## Interfaces
The primary interface is the `PointerEvent` interface which has a `constructor` plus several event types and associated global event handlers.
The standard also includes some extensions to the `Element` and `Navigator` interfaces.
The following sub-sections contain short descriptions of each interface and property.
### PointerEvent interface
The `PointerEvent` interface extends the `MouseEvent` interface and has the following properties.
`altitudeAngle` Read only
    
Represents the angle between a transducer (a pointer or stylus) axis and the X-Y plane of a device screen.
`azimuthAngle` Read only
    
Represents the angle between the Y-Z plane and the plane containing both the transducer (a pointer or stylus) axis and the Y axis.
`PointerEvent.persistentDeviceId` Read only
    
A unique identifier for the pointing device generating the `PointerEvent`.
`pointerId` Read only
    
A unique identifier for the pointer causing the event.
`width` Read only
    
The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer.
`height` Read only
    
the height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
`pressure` Read only
    
the normalized pressure of the pointer input in the range of `0` to `1`, where `0` and `1` represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
`tangentialPressure` Read only
    
The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range `-1` to `1`, where `0` is the neutral position of the control.
`tiltX` Read only
    
The plane angle (in degrees, in the range of `-90` to `90`) between the Y–Z plane and the plane containing both the pointer (e.g., pen stylus) axis and the Y axis.
`tiltY` Read only
    
the plane angle (in degrees, in the range of `-90` to `90`) between the X–Z plane and the plane containing both the pointer (e.g., pen stylus) axis and the X axis.
`twist` Read only
    
The clockwise rotation of the pointer (e.g., pen stylus) around its major axis in degrees, with a value in the range `0` to `359`.
`pointerType` Read only
    
Indicates the device type that caused the event (mouse, pen, touch, etc.).
`isPrimary` Read only
    
Indicates if the pointer represents the primary pointer of this pointer type.
### Event types and Global Event Handlers
Pointer events have ten event types, seven of which have similar semantics to their mouse event counterparts (`down`, `up`, `move`, `over`, `out`, `enter`, and `leave`).
Below is a short description of each event type.
Event Description  
`pointerover` Fired when a pointer is moved into an element's hit test boundaries.  
`pointerenter` Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants, including as a result of a `pointerdown` event from a device that does not support hover (see `pointerdown`).  
`pointerdown` Fired when a pointer becomes active buttons state.  
`pointermove` Fired when a pointer changes coordinates. This event is also used if the change in pointer state cannot be reported by other events.  
`pointerup` Fired when a pointer is no longer active buttons state.  
`pointercancel` A browser fires this event if it concludes the pointer will no longer be able to generate events (for example, if the related device is deactivated, or the browser decided to interpret the interaction as a pan/zoom instead). For information on how to control this behavior, see the section on the `touch-action` CSS property below.  
`pointerout` Fired for several reasons including: pointer is moved out of the hit test boundaries of an element; firing the pointerup event for a device that does not support hover (see `pointerup`); after firing the `pointercancel` event (see `pointercancel`); when a pen stylus leaves the hover range detectable by the digitizer.  
`pointerleave` Fired when a pointer is moved out of the hit test boundaries of an element. For pen devices, this event is fired when the stylus leaves the hover range detectable by the digitizer.  
`pointerrawupdate` Experimental Fired when a pointer changes any properties that don't fire `pointerdown` or `pointerup` events.  
`gotpointercapture` Fired when an element receives pointer capture.  
`lostpointercapture` Fired after pointer capture is released for a pointer.  
### Element extensions
There are three extensions to the `Element` interface:
`hasPointerCapture()`
    
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
`releasePointerCapture()`
    
Releases (stops) pointer capture that was previously set for a specific pointer event.
`setPointerCapture()`
    
Designates a specific element as the capture target of future pointer events.
### Navigator extension
The `Navigator.maxTouchPoints` property is used to determine the maximum number of simultaneous touch points that are supported at any single point in time.
## Examples
This section contains examples of basic usage of using the pointer events interfaces.
### Registering event handlers
This example registers a handler for every event type for the given element.
    
    <div id="target">Touch me…</div>
    
    
    function over_handler(event) {}
    function enter_handler(event) {}
    function down_handler(event) {}
    function move_handler(event) {}
    function up_handler(event) {}
    function cancel_handler(event) {}
    function out_handler(event) {}
    function leave_handler(event) {}
    function rawUpdate_handler(event) {}
    function gotCapture_handler(event) {}
    function lostCapture_handler(event) {}
    
    const el = document.getElementById("target");
    // Register pointer event handlers
    el.onpointerover = over_handler;
    el.onpointerenter = enter_handler;
    el.onpointerdown = down_handler;
    el.onpointermove = move_handler;
    el.onpointerup = up_handler;
    el.onpointercancel = cancel_handler;
    el.onpointerout = out_handler;
    el.onpointerleave = leave_handler;
    el.onpointerrawupdate = rawUpdate_handler;
    el.ongotpointercapture = gotCapture_handler;
    el.onlostpointercapture = lostCapture_handler;
    
### Event properties
This example illustrates accessing all of a pointer event's properties.
    
    <div id="target">Touch me…</div>
    
    
    const id = -1;
    
    function process_id(event) {
      // Process this event based on the event's identifier
    }
    function process_mouse(event) {
      // Process the mouse pointer event
    }
    function process_pen(event) {
      // Process the pen pointer event
    }
    function process_touch(event) {
      // Process the touch pointer event
    }
    function process_tilt(tiltX, tiltY) {
      // Tilt data handler
    }
    function process_pressure(pressure) {
      // Pressure handler
    }
    function process_non_primary(event) {
      // Non primary handler
    }
    
    function down_handler(ev) {
      // Calculate the touch point's contact area
      const area = ev.width * ev.height;
    
      // Compare cached id with this event's id and process accordingly
      if (id === ev.identifier) process_id(ev);
    
      // Call the appropriate pointer type handler
      switch (ev.pointerType) {
        case "mouse":
          process_mouse(ev);
          break;
        case "pen":
          process_pen(ev);
          break;
        case "touch":
          process_touch(ev);
          break;
        default:
          console.log(`pointerType ${ev.pointerType} is not supported`);
      }
    
      // Call the tilt handler
      if (ev.tiltX !== 0 && ev.tiltY !== 0) process_tilt(ev.tiltX, ev.tiltY);
    
      // Call the pressure handler
      process_pressure(ev.pressure);
    
      // If this event is not primary, call the non primary handler
      if (!ev.isPrimary) process_non_primary(ev);
    }
    
    const el = document.getElementById("target");
    // Register pointerdown handler
    el.onpointerdown = down_handler;
    
## Determining the Primary Pointer
In some scenarios there may be multiple pointers (for example a device with both a touchscreen and a mouse), or a pointer that supports multiple contact points (for example a touchscreen that supports multiple finger touches). The application can use the `isPrimary` property to identify a master pointer among the set of active pointers for each pointer type. If an application only wants to support a primary pointer, it can ignore all pointer events that are not primary.
A mouse has only one pointer, so it will always be the primary pointer. For touch input, a pointer is considered primary if the user touched the screen when there were no other active touches. For pen and stylus input, a pointer is considered primary if the user's pen initially contacted the screen when there were no other active pens contacting the screen.
## Determining button states
Some pointer devices (such as mouse and pen) support multiple buttons, and the button presses can be chorded (i.e., pressing an additional button while another button on the pointer device is already pressed).
To determine the state of button presses, pointer events uses the `button` and `buttons` properties of the `MouseEvent` interface (that `PointerEvent` inherits from).
The following table provides the values of `button` and `buttons` for the various device button states.
Device Button State button buttons  
Neither buttons nor touch/pen contact changed since last event `-1` —  
Mouse move with no buttons pressed, Pen moved while hovering with no buttons pressed — `0`  
Left Mouse, Touch Contact, Pen contact `0` `1`  
Middle Mouse `1` `4`  
Right Mouse, Pen barrel button `2` `2`  
X1 (back) Mouse `3` `8`  
X2 (forward) Mouse `4` `16`  
Pen eraser button `5` `32`  
Note: The `button` property indicates a change in the state of the button. However, as in the case of touch, when multiple events occur with one event, all of them have the same value.
## Capturing the pointer
Pointer capture allows events for a particular pointer event to be re-targeted to a particular element instead of the normal hit test at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling or panning).
Pointer capture will cause the target to capture all subsequent pointer events as if they were occurring over the capturing target. Accordingly, `pointerover`, `pointerenter`, `pointerleave`, and `pointerout` will not fire as long as this capture is set. For touchscreen browsers that allow direct manipulation, an implicit pointer capture will be called on the element when a `pointerdown` event triggers. The capture can be released manually by calling `element.releasePointerCapture` on the target element, or it will be implicitly released after a `pointerup` or `pointercancel` event.
Note: If you need to move an element in the DOM, then make sure to call `setPointerCapture()` after DOM movements so that `setPointerCapture()` will not lose track of it. E.g., if you need to use `Element.append()` to move an element somewhere else, then make sure to call `setPointerCapture()` on it only after the call to `Element.append()`.
The following example shows pointer capture being set on an element.
    
    <div id="target">Touch me…</div>
    
    
    function downHandler(ev) {
      const el = document.getElementById("target");
      // Element 'target' will receive/capture further events
      el.setPointerCapture(ev.pointerId);
    }
    
    const el = document.getElementById("target");
    el.onpointerdown = downHandler;
    
The following example shows a pointer capture being released (when a `pointercancel` event occurs. The browser does this automatically when a `pointerup` or `pointercancel` event occurs.
    
    <div id="target">Touch me…</div>
    
    
    function downHandler(ev) {
      const el = document.getElementById("target");
      // Element "target" will receive/capture further events
      el.setPointerCapture(ev.pointerId);
    }
    
    function cancelHandler(ev) {
      const el = document.getElementById("target");
      // Release the pointer capture
      el.releasePointerCapture(ev.pointerId);
    }
    
    const el = document.getElementById("target");
    // Register pointerdown and pointercancel handlers
    el.onpointerdown = downHandler;
    el.onpointercancel = cancelHandler;
    
## touch-action CSS property
The `touch-action` CSS property is used to specify whether or not the browser should apply its default (native) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.
A value of `auto` means the browser is free to apply its default touch behavior (to the specified region) and the value of `none` disables the browser's default touch behavior for the region. The values `pan-x` and `pan-y`, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value `manipulation` means the browser may consider touches that begin on the element are only for scrolling and zooming.
In the following example, default touch behavior is disabled for some `button` elements.
    
    button#tiny {
      touch-action: none;
    }
    
In the following example, when the `target` element is touched, it will only pan in the horizontal direction.
    
    #target {
      touch-action: pan-x;
    }
    
## Compatibility with mouse events
Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.
The browser may map generic pointer input to mouse events for compatibility with mouse-based content. This mapping of events is called compatibility mouse events. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:
  * Mouse events can only be prevented when the pointer is down.
  * Hovering pointers (e.g., a mouse with no buttons pressed) cannot have their mouse events prevented.
  * The `mouseover`, `mouseout`, `mouseenter`, and `mouseleave` events are never prevented (even if the pointer is down).


## Best practices
Here are some best practices to consider when using pointer events:
  * Minimize the amount of work performed in event handlers.
  * Add the event handlers to a specific target element (rather than the entire document or nodes higher up in the document tree).
  * The target element (node) should be large enough to accommodate the largest contact surface area (typically a finger touch). If the target area is too small, touching it could result in firing other events for adjacent elements.


Some additional values have been defined for the CSS `touch-action` property as part of the Pointer Events specification, but currently those values have limited implementation support.
  * Touch Events
  * Pointer Events Working Group
  * Mail list
  * W3C #pointerevents IRC channel
  * Touch/pointer tests and demos by Patrick H. Lauke


# GPUCommandEncoder
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUCommandEncoder` interface of the WebGPU API represents an encoder that collects a sequence of GPU commands to be issued to the GPU.
A `GPUCommandEncoder` object instance is created via the `GPUDevice.createCommandEncoder()` property.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Instance methods
`beginComputePass()`
    
Starts encoding a compute pass, returning a `GPUComputePassEncoder` that can be used to control computation.
`beginRenderPass()`
    
Starts encoding a render pass, returning a `GPURenderPassEncoder` that can be used to control rendering.
`clearBuffer()`
    
Encodes a command that fills a region of a `GPUBuffer` with zeroes.
`copyBufferToBuffer()`
    
Encodes a command that copies data from one `GPUBuffer` to another.
`copyBufferToTexture()`
    
Encodes a command that copies data from a `GPUBuffer` to a `GPUTexture`.
`copyTextureToBuffer()`
    
Encodes a command that copies data from a `GPUTexture` to a `GPUBuffer`.
`copyTextureToTexture()`
    
Encodes a command that copies data from one `GPUTexture` to another.
`finish()`
    
Completes recording of the command sequence encoded on this `GPUCommandEncoder`, returning a corresponding `GPUCommandBuffer`.
`insertDebugMarker()`
    
Marks a specific point in a series of encoded commands with a label.
`popDebugGroup()`
    
Ends a debug group, which is begun with a `pushDebugGroup()` call.
`pushDebugGroup()`
    
Begins a debug group, which is marked with a specified label, and will contain all subsequent encoded commands up until a `popDebugGroup()` method is invoked.
`resolveQuerySet()`
    
Encodes a command that resolves a `GPUQuerySet`, copying the results into a specified `GPUBuffer`.
`writeTimestamp()` Non-standard Deprecated
    
Encodes a command that writes a timestamp into a `GPUQuerySet` once the previous commands recorded into the same queued `GPUCommandBuffer` have been executed by the GPU.
## Examples
In our basic render demo, several commands are recorded via a `GPUCommandEncoder`:
    
    // …
    
    // Create GPUCommandEncoder
    const commandEncoder = device.createCommandEncoder();
    
    // Create GPURenderPassDescriptor to tell WebGPU which texture to draw into, then initiate render pass
    
    const renderPassDescriptor = {
      colorAttachments: [
        {
          clearValue: clearColor,
          loadOp: "clear",
          storeOp: "store",
          view: context.getCurrentTexture().createView(),
        },
      ],
    };
    
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    
    // Draw a triangle
    
    passEncoder.setPipeline(renderPipeline);
    passEncoder.setVertexBuffer(0, vertexBuffer);
    passEncoder.draw(3);
    
    // End the render pass
    
    passEncoder.end();
    
    // …
    
The commands encoded by the `GPUCommandEncoder` are recorded into a `GPUCommandBuffer` using the `GPUCommandEncoder.finish()` method. The command buffer is then passed into the queue via a `submit()` call, ready to be processed by the GPU.
    
    device.queue.submit([commandEncoder.finish()]);
    
Note: Study the WebGPU samples to find more command encoding examples.
  * The WebGPU API


# HTMLButtonElement
The `HTMLButtonElement` interface provides properties and methods (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating `<button>` elements.
EventTarget  Node  Element  HTMLElement  HTMLButtonElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLButtonElement.command`
    
A string value indicating the action to be performed on an element being controlled by this button.
`HTMLButtonElement.commandForElement`
    
A reference to an existing `Element` that the button controls.
`HTMLButtonElement.disabled`
    
A boolean value indicating whether or not the control is disabled, meaning that it does not accept any clicks.
`HTMLButtonElement.form` Read only
    
An `HTMLFormElement` reflecting the form that this button is associated with. If the button is a descendant of a form element, then this attribute is a reference to that form's associated `HTMLFormElement`. If the button is not a descendant of a form element, then the attribute can be a reference to any `HTMLFormElement` element in the same document it is related to, or the `null` value if none matches.
`HTMLButtonElement.formAction`
    
A string reflecting the URI of a resource that processes information submitted by the button. If specified, this attribute overrides the `action` attribute of the `<form>` element that owns this element.
`HTMLButtonElement.formEnctype`
    
A string reflecting the type of content that is used to submit the form to the server. If specified, this attribute overrides the `enctype` attribute of the `<form>` element that owns this element.
`HTMLButtonElement.formMethod`
    
A string reflecting the HTTP method that the browser uses to submit the form. If specified, this attribute overrides the `method` attribute of the `<form>` element that owns this element.
`HTMLButtonElement.formNoValidate`
    
A boolean value indicating that the form is not to be validated when it is submitted. If specified, this attribute overrides the `novalidate` attribute of the `<form>` element that owns this element.
`HTMLButtonElement.formTarget`
    
A string reflecting a name or keyword indicating where to display the response received after submitting the form. If specified, this attribute overrides the `target` attribute of the `<form>` element that owns this element.
`HTMLButtonElement.labels` Read only
    
A `NodeList` that represents a list of `<label>` elements that are labels for this button.
`HTMLButtonElement.name`
    
A string representing the object's name when submitted with a form. If specified, it must not be the empty string.
`HTMLButtonElement.popoverTargetAction`
    
Gets and sets the action to be performed (`"hide"`, `"show"`, or `"toggle"`) on a popover element being controlled by a control button. It reflects the value of the `popovertargetaction` HTML attribute.
`HTMLButtonElement.popoverTargetElement`
    
Gets and sets the popover element to control via a button. The JavaScript equivalent of the `popovertarget` HTML attribute.
`HTMLButtonElement.type`
    
A string indicating the behavior of the button. This is an enumerated attribute with the following possible values:
  * `submit`: The button submits the form. This is the default value if the attribute is not specified, or if it is dynamically changed to an empty or invalid value.
  * `reset`: The button resets the form.
  * `button`: The button does nothing.
  * `menu`: The button displays a menu.  Experimental


`HTMLButtonElement.willValidate` Read only
    
A boolean value indicating whether the button is a candidate for constraint validation. It is `false` if any conditions bar it from constraint validation, including: its `type` property is `reset` or `button`; it has a `<datalist>` ancestor; or the `disabled` property is set to `true`.
`HTMLButtonElement.validationMessage` Read only
    
A string representing the localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (`willValidate` is `false`), or it satisfies its constraints.
`HTMLButtonElement.validity` Read only
    
A `ValidityState` representing the validity states that this button is in.
`HTMLButtonElement.value`
    
A string representing the current form control value of the button.
## Instance methods
Inherits methods from its parent, `HTMLElement`.
`HTMLButtonElement.checkValidity()`
    
Returns `true` if the element's value has no validity problems; otherwise, returns `false`.
`HTMLButtonElement.reportValidity()`
    
Performs the same action as `checkValidity()`, but also reports the result to the user if the `invalid` event was not canceled.
`HTMLButtonElement.setCustomValidity()`
    
Sets the custom validity message for the element. Use the empty string to indicate that the element does not have a custom validity error.
  * HTML element implementing this interface: `<button>`


# IDBObjectStore
Note: This feature is available in Web Workers.
The `IDBObjectStore` interface of the IndexedDB API represents an object store in a database. Records within an object store are sorted according to their keys. This sorting enables fast insertion, look-up, and ordered retrieval.
## Instance properties
`IDBObjectStore.indexNames` Read only
    
A list of the names of indexes on objects in this object store.
`IDBObjectStore.keyPath` Read only
    
The key path of this object store. If this attribute is `null`, the application must provide a key for each modification operation.
`IDBObjectStore.name`
    
The name of this object store.
`IDBObjectStore.transaction` Read only
    
The `IDBTransaction` object to which this object store belongs.
`IDBObjectStore.autoIncrement` Read only
    
The value of the auto increment flag for this object store.
## Instance methods
`IDBObjectStore.add()`
    
Returns an `IDBRequest` object, and, in a separate thread, creates a structured clone of the `value`, and stores the cloned value in the object store. This is for adding new records to an object store.
`IDBObjectStore.clear()`
    
Creates and immediately returns an `IDBRequest` object, and clears this object store in a separate thread. This is for deleting all current records out of an object store.
`IDBObjectStore.count()`
    
Returns an `IDBRequest` object, and, in a separate thread, returns the total number of records that match the provided key or `IDBKeyRange`. If no arguments are provided, it returns the total number of records in the store.
`IDBObjectStore.createIndex()`
    
Creates a new index during a version upgrade, returning a new `IDBIndex` object in the connected database.
`IDBObjectStore.delete()`
    
returns an `IDBRequest` object, and, in a separate thread, deletes the store object selected by the specified key. This is for deleting individual records out of an object store.
`IDBObjectStore.deleteIndex()`
    
Destroys the specified index in the connected database, used during a version upgrade.
`IDBObjectStore.get()`
    
Returns an `IDBRequest` object, and, in a separate thread, returns the store object store selected by the specified key. This is for retrieving specific records from an object store.
`IDBObjectStore.getKey()`
    
Returns an `IDBRequest` object, and, in a separate thread retrieves and returns the record key for the object in the object stored matching the specified parameter.
`IDBObjectStore.getAll()`
    
Returns an `IDBRequest` object retrieves all objects in the object store matching the specified parameter or all objects in the store if no parameters are given.
`IDBObjectStore.getAllKeys()`
    
Returns an `IDBRequest` object retrieves record keys for all objects in the object store matching the specified parameter or all objects in the store if no parameters are given.
`IDBObjectStore.index()`
    
Opens an index from this object store after which it can, for example, be used to return a sequence of records sorted by that index using a cursor.
`IDBObjectStore.openCursor()`
    
Returns an `IDBRequest` object, and, in a separate thread, returns a new `IDBCursorWithValue` object. Used for iterating through an object store by primary key with a cursor.
`IDBObjectStore.openKeyCursor()`
    
Returns an `IDBRequest` object, and, in a separate thread, returns a new `IDBCursor`. Used for iterating through an object store with a key.
`IDBObjectStore.put()`
    
Returns an `IDBRequest` object, and, in a separate thread, creates a structured clone of the `value`, and stores the cloned value in the object store. This is for updating existing records in an object store when the transaction's mode is `readwrite`.
## Example
This example shows a variety of different uses of object stores, from updating the data structure with `IDBObjectStore.createIndex` inside an `onupgradeneeded` function, to adding a new item to our object store with `IDBObjectStore.add`. For a full working example, see our To-do Notifications app (view example live).
    
    // Let us open our database
    const DBOpenRequest = window.indexedDB.open("toDoList", 4);
    
    DBOpenRequest.onsuccess = (event) => {
      note.appendChild(document.createElement("li")).textContent =
        "Database initialized.";
    
      // store the result of opening the database in db.
      db = DBOpenRequest.result;
    };
    
    // This event handles the event whereby a new version of
    // the database needs to be created Either one has not
    // been created before, or a new version number has been
    // submitted via the window.indexedDB.open line above
    DBOpenRequest.onupgradeneeded = (event) => {
      const db = event.target.result;
    
      db.onerror = (event) => {
        note.appendChild(document.createElement("li")).textContent =
          "Error loading database.";
      };
    
      // Create an objectStore for this database
    
      const objectStore = db.createObjectStore("toDoList", {
        keyPath: "taskTitle",
      });
    
      // define what data items the objectStore will contain
    
      objectStore.createIndex("hours", "hours", { unique: false });
      objectStore.createIndex("minutes", "minutes", { unique: false });
      objectStore.createIndex("day", "day", { unique: false });
      objectStore.createIndex("month", "month", { unique: false });
      objectStore.createIndex("year", "year", { unique: false });
    
      objectStore.createIndex("notified", "notified", { unique: false });
    
      note.appendChild(document.createElement("li")).textContent =
        "Object store created.";
    };
    
    // Create a new item to add in to the object store
    const newItem = [
      {
        taskTitle: "Walk dog",
        hours: 19,
        minutes: 30,
        day: 24,
        month: "December",
        year: 2013,
        notified: "no",
      },
    ];
    
    // open a read/write db transaction, ready for adding the data
    const transaction = db.transaction(["toDoList"], "readwrite");
    
    // report on the success of the transaction completing, when everything is done
    transaction.oncomplete = (event) => {
      note.appendChild(document.createElement("li")).textContent =
        "Transaction completed.";
    };
    
    transaction.onerror = (event) => {
      note.appendChild(document.createElement("li")).textContent =
        "Transaction not opened due to error. Duplicate items not allowed.";
    };
    
    // create an object store on the transaction
    const objectStore = transaction.objectStore("toDoList");
    // make a request to add our newItem object to the object store
    const objectStoreRequest = objectStore.add(newItem[0]);
    
    objectStoreRequest.onsuccess = (event) => {
      note.appendChild(document.createElement("li")).textContent =
        "Request successful.";
    };
    
  * Using IndexedDB
  * Starting transactions: `IDBDatabase`
  * Using transactions: `IDBTransaction`
  * Setting a range of keys: `IDBKeyRange`
  * Using cursors: `IDBCursor`
  * Reference example: To-do Notifications (View the example live).


# ServiceWorker
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `ServiceWorker` interface of the Service Worker API provides a reference to a service worker. Multiple browsing contexts (e.g., pages, workers, etc.) can be associated with the same service worker, each through a unique `ServiceWorker` object.
A `ServiceWorker` object is available via a number of properties:
  * `ServiceWorkerRegistration.active`
  * `ServiceWorkerGlobalScope.serviceWorker`
  * `ServiceWorkerContainer.controller` — when the service worker is in `activating` or `activated` state
  * `ServiceWorkerRegistration.installing` — when the service worker is in `installing` state
  * `ServiceWorkerRegistration.waiting` — when the service worker is in `installed` state


The `ServiceWorker.state` property and `statechange` event can be used to check and observe changes in the lifecycle-state of the object's associated service worker. Related lifecycle events, such as `install` and `activate` are fired at the service worker itself.
Service workers allow static import of ECMAScript modules, if supported, using `import`. Dynamic import is disallowed by the specification — calling `import()` will throw.
Service workers can only be registered in the Window scope in some or all browsers, because the `ServiceWorker` object is not exposed to `DedicatedWorkerGlobalScope` and `SharedWorkerGlobalScope`. Check the browser compatibility for information.
EventTarget  ServiceWorker 
## Instance properties
The `ServiceWorker` interface inherits properties from its parent, `EventTarget`.
`ServiceWorker.scriptURL` Read only
    
Returns the `ServiceWorker` serialized script URL defined as part of `ServiceWorkerRegistration`. The URL must be on the same origin as the document that registers the `ServiceWorker`.
`ServiceWorker.state` Read only
    
Returns the state of the service worker. It returns one of the following values: `parsed`, `installing`, `installed`, `activating`, `activated`, or `redundant`.
## Instance methods
The `ServiceWorker` interface inherits methods from its parent, `EventTarget`.
`ServiceWorker.postMessage()`
    
Sends a message — consisting of any structured-cloneable JavaScript object — to the service worker. The message is transmitted to the service worker using a `message` event on its global scope.
## Events
`statechange`
    
Fired when `ServiceWorker.state` changes.
`error`
    
Fired when an error happens inside the `ServiceWorker` object.
## Examples
This code snippet is from the service worker registration-events sample (live demo). The code listens for any change in the `ServiceWorker.state` and returns its value.
    
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker
        .register("service-worker.js", {
          scope: "./",
        })
        .then((registration) => {
          let serviceWorker;
          if (registration.installing) {
            serviceWorker = registration.installing;
            document.querySelector("#kind").textContent = "installing";
          } else if (registration.waiting) {
            serviceWorker = registration.waiting;
            document.querySelector("#kind").textContent = "waiting";
          } else if (registration.active) {
            serviceWorker = registration.active;
            document.querySelector("#kind").textContent = "active";
          }
          if (serviceWorker) {
            // logState(serviceWorker.state);
            serviceWorker.addEventListener("statechange", (e) => {
              // logState(e.target.state);
            });
          }
        })
        .catch((error) => {
          // Something went wrong during registration. The service-worker.js file
          // might be unavailable or contain a syntax error.
        });
    } else {
      // The current browser doesn't support service workers.
      // Perhaps it is too old or we are not in a Secure Context.
    }
    
  * The Offline Cookbook (service workers)
  * Using Service Workers
  * Service worker basic code example
  * Using web workers


# InputDeviceInfo
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `InputDeviceInfo` interface of the Media Capture and Streams API gives access to the capabilities of the input device that it represents.
`InputDeviceInfo` objects are returned by `MediaDevices.enumerateDevices()` if the returned device is an audio or video input device.
MediaDeviceInfo  InputDeviceInfo 
## Instance properties
Also inherits properties from its parent interface, `MediaDeviceInfo`.
## Instance methods
Also inherits methods from its parent interface, `MediaDeviceInfo`.
`InputDeviceInfo.getCapabilities()`
    
Returns a `MediaTrackCapabilities` object describing the primary audio or video track of a device's `MediaStream`.
## Examples
The following example gets all media devices with `MediaDevices.enumerateDevices()`. If any of the devices are input devices then `console.log(device)` will print an `InputDeviceInfo` object to the console.
    
    navigator.mediaDevices.enumerateDevices().then((devices) => {
      devices.forEach((device) => {
        console.log(device); // an InputDeviceInfo object if the device is an input device, otherwise a MediaDeviceInfo object.
      });
    });
    
# NavigatorUAData
Note: This feature is available in Web Workers.
The `NavigatorUAData` interface of the User-Agent Client Hints API returns information about the browser and operating system of a user.
An instance of this object is returned by calling `Navigator.userAgentData` or `WorkerNavigator.userAgentData`. Therefore, this interface has no constructor.
Note: The terms high entropy and low entropy refer to the amount of information these values reveal about the browser. The values returned as properties are deemed low entropy, and unlikely to identify a user. The values returned by `NavigatorUAData.getHighEntropyValues()` could potentially reveal more information. These values are therefore retrieved via a `Promise`, allowing time for the browser to request user permission, or make other checks.
## Instance properties
`NavigatorUAData.brands` Read only Experimental
    
Returns an array of brand information containing the browser name and version.
`NavigatorUAData.mobile` Read only Experimental
    
Returns `true` if the user-agent is running on a mobile device.
`NavigatorUAData.platform` Read only Experimental
    
Returns the platform brand the user-agent is running on.
## Instance methods
`NavigatorUAData.getHighEntropyValues()` Experimental
    
Returns a `Promise` that resolves with a dictionary object containing the high entropy values the user-agent returns.
`NavigatorUAData.toJSON()` Experimental
    
A serializer that returns a JSON representation of the low entropy properties of the `NavigatorUAData` object.
## Examples
>
### Getting the brands
The following example prints the value of `NavigatorUAData.brands` to the console.
    
    console.log(navigator.userAgentData.brands);
    
### Returning high entropy values
In the following value a number of hints are requested using the `NavigatorUAData.getHighEntropyValues()` method. When the promise resolves, this information is printed to the console.
    
    navigator.userAgentData
      .getHighEntropyValues([
        "architecture",
        "model",
        "platform",
        "platformVersion",
        "fullVersionList",
      ])
      .then((ua) => {
        console.log(ua);
      });
    
  * Improving user privacy and developer experience with User-Agent Client Hints


# HTMLTableCellElement
The `HTMLTableCellElement` interface provides special properties and methods (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header cells (`<th>`) or data cells (`<td>`), in an HTML document.
EventTarget  Node  Element  HTMLElement  HTMLTableCellElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLTableCellElement.abbr`
    
A string that can be used on `<th>` elements (not on `<td>`), specifying an alternative label for the header cell. This alternate label can be used in other contexts, such as when describing the headers that apply to a data cell. This is used to offer a shorter term for use by screen readers in particular; and is a valuable accessibility tool. Usually, the value of `abbr` is an abbreviation or acronym, but can be any text that's appropriate contextually.
`HTMLTableCellElement.cellIndex` Read only
    
A number representing the cell's position in the `cells` collection of the `<tr>` the cell is contained within. If the cell doesn't belong to a `<tr>`, it returns `-1`.
`HTMLTableCellElement.colSpan`
    
A positive number indicating the number of columns this cell must span; this lets the cell occupy space across multiple columns of the table. It reflects the `colspan` attribute.
`HTMLTableCellElement.headers` Read only
    
A `DOMTokenList` describing a list of `id` of `<th>` elements that represent headers associated with the cell. It reflects the `headers` attribute.
`HTMLTableCellElement.rowSpan`
    
A positive number indicating the number of rows this cell must span; this lets a cell occupy space across multiple rows of the table. It reflects the `rowspan` attribute.
`HTMLTableCellElement.scope`
    
A string indicating the scope of a `<th>` cell. Possible values for `scope` are: `col`, `colgroup`, `row`, `rowgroup`, or the empty string (`""`).
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
## Deprecated properties
Warning: These properties have been deprecated and should no longer be used. They are documented primarily to help understand older code bases.
`HTMLTableCellElement.align` Deprecated
    
A string containing the value of the `align` attribute, if present, or empty string if not set. It can be used to set the alignment of the element's contents to the surrounding context of `"left"`, `"right"`, and `"center"`. Use the CSS `text-align` property instead.
`HTMLTableCellElement.axis` Deprecated
    
A string containing a name grouping cells in virtual. It reflects the obsolete `axis` attribute.
`HTMLTableCellElement.bgColor` Deprecated
    
A string containing the background color of the cells. It reflects the obsolete `bgColor` attribute.
`HTMLTableCellElement.ch` Deprecated
    
A string containing one single character. This character is the one to align all the cells of a column on. It reflects the `char` and defaults to the decimal points associated with the language, e.g., `'.'` for English, or `','` for French. This property was optional and was not very well supported.
`HTMLTableCellElement.chOff` Deprecated
    
A string containing an integer indicating how many characters must be left at the right (for left-to-right scripts; or at the left for right-to-left scripts) of the character defined by `HTMLTableCellElement.ch`. This property was optional and was not very well supported.
`HTMLTableCellElement.height` Deprecated
    
A string containing a length of pixel of the hinted height of the cell. It reflects the obsolete `height` attribute.
`HTMLTableCellElement.noWrap` Deprecated
    
A boolean value reflecting the `nowrap` attribute and indicating if cell content can be broken into several lines.
`HTMLTableCellElement.vAlign` Deprecated
    
A string representing an enumerated value indicating how the content of the cell must be vertically aligned. It reflects the `valign` attribute and can have one of the following values: `"top"`, `"middle"`, `"bottom"`, or `"baseline"`. Use the CSS `vertical-align` property instead.
`HTMLTableCellElement.width` Deprecated
    
A string specifying the number of pixels wide the cell should be drawn, if possible. This property reflects the also obsolete `width` attribute. Use the CSS `width` property instead.
  * The HTML elements implementing this interface: `<th>` and `<td>`.


# TouchList
The `TouchList` interface represents a list of contact points on a touch surface. For example, if the user has three fingers on the touch surface (such as a screen or trackpad), the corresponding `TouchList` object would have one `Touch` object for each finger, for a total of three entries.
This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs represent list structures using types based on JavaScript arrays, thus making many array methods available, and at the same time imposing additional semantics on their usage (such as making their items read-only).
These historical reasons do not mean that you as a developer should avoid `TouchList`. You don't create `TouchList` objects yourself, but you get them from APIs such as `TouchEvent.targetTouches`, and these APIs are not deprecated. However, be careful of the semantic differences from a real array.
## Instance properties
`TouchList.length` Read only
    
The number of `Touch` objects in the `TouchList`.
## Instance methods
`TouchList.item()`
    
Returns the `Touch` object at the specified index in the list.
## Example
See the example on the main Touch events article.
  * Touch events
  * `Document.createTouchList()`


# SVGElement
All of the SVG DOM interfaces that correspond directly to elements in the SVG language derive from the `SVGElement` interface.
EventTarget  Node  Element  SVGElement 
## Instance properties
Also inherits properties from the `Element` interface.
`SVGElement.attributeStyleMap` Read only
    
A `StylePropertyMap` representing the declarations of the element's `style` attribute.
`SVGElement.autofocus`
    
Whether the control should be focused when the page loads, or when a `<dialog>` or popover become shown.
`SVGElement.className` Deprecated Read only
    
An `SVGAnimatedString` that reflects the value of the `class` attribute on the given element, or the empty string if `class` is not present. This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to use `Element.classList` instead.
`SVGElement.dataset` Read only
    
A `DOMStringMap` object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element. These can also be defined in SVG using attributes of the form `data-*`, where `*` is the key name for the pair. This works just like HTML's `HTMLElement.dataset` property and HTML's `data-*` global attribute.
`SVGElement.nonce`
    
Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.
`SVGElement.ownerSVGElement` Read only
    
An `SVGSVGElement` referring to the nearest ancestor `<svg>` element. `null` if the given element is the outermost `<svg>` element.
`SVGElement.style`
    
A `CSSStyleDeclaration` representing the declarations of the element's `style` attribute.
`SVGElement.tabIndex`
    
The position of the element in the tabbing order.
`SVGElement.viewportElement` Read only
    
The `SVGElement` which established the current viewport. Often the nearest ancestor `<svg>` element. `null` if the given element is the outermost `<svg>` element.
## Instance methods
This interface also inherits methods from `Element`.
`SVGElement.blur()`
    
Removes keyboard focus from the currently focused element.
`SVGElement.focus()`
    
Makes the element the current keyboard focus.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the equivalent `on...` handler property.
`abort`
    
Fired when page loading is stopped before an SVG element has been allowed to load completely.
`error`
    
Fired when an SVG element does not load properly or when an error occurs during script execution.
`load`
    
Fires on an `SVGElement` when it is loaded in the browser.
`resize`
    
Fired when an SVG document is being resized.
`scroll`
    
Fired when an SVG document view is being shifted along the X and/or Y axes.
`unload`
    
Fired when the DOM implementation removes an SVG document from a window or frame.
  * HTML `data-*` attribute
  * SVG `data-*` attribute
  * Using custom data attributes in HTML


# DeviceMotionEventRotationRate
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
A `DeviceMotionEventRotationRate` interface of the Device Orientation Events provides information about the rate at which the device is rotating around all three axes.
## Instance properties
`DeviceMotionEventRotationRate.alpha` Read only
    
The amount of rotation around the Z axis, in degrees per second.
`DeviceMotionEventRotationRate.beta` Read only
    
The amount of rotation around the X axis, in degrees per second.
`DeviceMotionEventRotationRate.gamma` Read only
    
The amount of rotation around the Y axis, in degrees per second.
# ResizeObserver
The `ResizeObserver` interface reports changes to the dimensions of an `Element`'s content or border box, or the bounding box of an `SVGElement`.
Note: The content box is the box in which content can be placed, meaning the border box minus the padding and border width. The border box encompasses the content, padding, and border. See The box model for further explanation.
## Constructor
`ResizeObserver()`
    
Creates and returns a new `ResizeObserver` object.
## Instance properties
None.
## Instance methods
`ResizeObserver.disconnect()`
    
Unobserves all observed `Element` targets of a particular observer.
`ResizeObserver.observe()`
    
Initiates the observing of a specified `Element`.
`ResizeObserver.unobserve()`
    
Ends the observing of a specified `Element`.
## Examples
In the resize-observer-text.html (see source) example, we use the resize observer to change the `font-size` of a header and paragraph as a slider's value is changed causing the containing `<div>` to change width. This shows that you can respond to changes in an element's size, even if they have nothing to do with the viewport.
We also provide a checkbox to turn the observer off and on. If it is turned off, the text will not change in response to the `<div>`'s width changing.
The JavaScript looks like so:
    
    const h1Elem = document.querySelector("h1");
    const pElem = document.querySelector("p");
    const divElem = document.querySelector("body > div");
    const slider = document.querySelector('input[type="range"]');
    const checkbox = document.querySelector('input[type="checkbox"]');
    
    divElem.style.width = "600px";
    
    slider.addEventListener("input", () => {
      divElem.style.width = `${slider.value}px`;
    });
    
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        if (entry.contentBoxSize) {
          const contentBoxSize = entry.contentBoxSize[0];
          h1Elem.style.fontSize = `${Math.max(
            1.5,
            contentBoxSize.inlineSize / 200,
          )}rem`;
          pElem.style.fontSize = `${Math.max(
            1,
            contentBoxSize.inlineSize / 600,
          )}rem`;
        } else {
          h1Elem.style.fontSize = `${Math.max(
            1.5,
            entry.contentRect.width / 200,
          )}rem`;
          pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
        }
      }
    
      console.log("Size changed");
    });
    
    resizeObserver.observe(divElem);
    
    checkbox.addEventListener("change", () => {
      if (checkbox.checked) {
        resizeObserver.observe(divElem);
      } else {
        resizeObserver.unobserve(divElem);
      }
    });
    
## Observation Errors
Implementations following the specification invoke resize events before paint (that is, before the frame is presented to the user). If there was any resize event, style and layout are re-evaluated — which in turn may trigger more resize events. Infinite loops from cyclic dependencies are addressed by only processing elements deeper in the DOM during each iteration. Resize events that don't meet that condition are deferred to the next paint, and an error event is fired on the `Window` object, with the well-defined message string:
ResizeObserver loop completed with undelivered notifications.
Note that this only prevents user-agent lockup, not the infinite loop itself. For example, the following code will cause the width of `divElem` to grow indefinitely, with the above error message in the console repeating every frame:
    
    const divElem = document.querySelector("body > div");
    
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        entry.target.style.width = `${entry.contentBoxSize[0].inlineSize + 10}px`;
      }
    });
    
    resizeObserver.observe(divElem);
    
    window.addEventListener("error", (e) => {
      console.error(e.message);
    });
    
As long as the error event does not fire indefinitely, resize observer will settle and produce a stable, likely correct, layout. However, visitors may see a flash of broken layout, as a sequence of changes expected to happen in a single frame is instead happening over multiple frames.
If you want to prevent these errors, the solution depends on what your intended effect is. If you actually intend to have an infinite loop, you just need to defer the resizing code in your `ResizeObserver` callback to after the browser repaints. You can put it into a `requestAnimationFrame` callback.
    
    const divElem = document.querySelector("body > div");
    
    const resizeObserver = new ResizeObserver((entries) => {
      requestAnimationFrame(() => {
        for (const entry of entries) {
          entry.target.style.width = `${entry.contentBoxSize[0].inlineSize + 10}px`;
        }
      });
    });
    
    resizeObserver.observe(divElem);
    
    window.addEventListener("error", (e) => {
      console.error(e.message);
    });
    
If you don't intend to have an infinite loop, you should make sure your resizing code does not trigger the resize observer callback. There are many ways to do this, such as by setting an "expected size" and not resizing if the size is already at that value.
    
    const divElem = document.querySelector("body > div");
    const expectedSizes = new WeakMap();
    
    const resizeObserver = new ResizeObserver((entries) => {
      requestAnimationFrame(() => {
        for (const entry of entries) {
          const expectedSize = expectedSizes.get(entry.target);
          if (entry.contentBoxSize[0].inlineSize === expectedSize) {
            continue;
          }
          const newSize = entry.contentBoxSize[0].inlineSize + 10;
          entry.target.style.width = `${newSize}px`;
          expectedSizes.set(entry.target, newSize);
        }
      });
    });
    
    resizeObserver.observe(divElem);
    
    window.addEventListener("error", (e) => {
      console.error(e.message);
    });
    
  * Learn: The box model
  * `PerformanceObserver`
  * `IntersectionObserver` (part of the Intersection Observer API)
  * Upcoming container queries may be a viable alternative for implementing responsive design.


# SVGFEGaussianBlurElement
The `SVGFEGaussianBlurElement` interface corresponds to the `<feGaussianBlur>` element.
EventTarget  Node  Element  SVGElement  SVGFEGaussianBlurElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEGaussianBlurElement.edgeMode` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `edgeMode` attribute of the given element. Returns two identical values that are one of the following values:
`SVG_EDGEMODE_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_EDGEMODE_DUPLICATE` (1)
    
Corresponds to the `duplicate` value.
`SVG_EDGEMODE_WRAP` (2)
    
Corresponds to the `wrap` value.
`SVG_EDGEMODE_NONE` (3)
    
Corresponds to `none` value.
`SVGFEGaussianBlurElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEGaussianBlurElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFEGaussianBlurElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEGaussianBlurElement.stdDeviationX` Read only
    
An `SVGAnimatedNumber` corresponding to the (possibly automatically computed) X component of the `stdDeviation` attribute of the given element.
`SVGFEGaussianBlurElement.stdDeviationY` Read only
    
An `SVGAnimatedNumber` corresponding to the (possibly automatically computed) Y component of the `stdDeviation` attribute of the given element.
`SVGFEGaussianBlurElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEGaussianBlurElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEGaussianBlurElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface also inherits methods of its parent, `SVGElement`.
`SVGFEGaussianBlurElement.setStdDeviation()`
    
Sets the values for the `stdDeviation` attribute.
  * `<feGaussianBlur>`


# SpeechSynthesisVoice
The `SpeechSynthesisVoice` interface of the Web Speech API represents a voice that the system supports. Every `SpeechSynthesisVoice` has its own relative speech service including information about language, name and URI.
## Instance properties
`SpeechSynthesisVoice.default` Read only
    
A boolean value indicating whether the voice is the default voice for the current app language (`true`), or not (`false`.)
`SpeechSynthesisVoice.lang` Read only
    
Returns a BCP 47 language tag indicating the language of the voice.
`SpeechSynthesisVoice.localService` Read only
    
A boolean value indicating whether the voice is supplied by a local speech synthesizer service (`true`), or a remote speech synthesizer service (`false`.)
`SpeechSynthesisVoice.name` Read only
    
Returns a human-readable name that represents the voice.
`SpeechSynthesisVoice.voiceURI` Read only
    
Returns the type of URI and location of the speech synthesis service for this voice.
## Examples
The following snippet is excerpted from our Speech synthesizer demo.
    
    const synth = window.speechSynthesis;
    function populateVoiceList() {
      voices = synth.getVoices();
    
      for (const voice of voices) {
        const option = document.createElement("option");
        option.textContent = `${voice.name} (${voice.lang})`;
    
        if (voice.default) {
          option.textContent += " — DEFAULT";
        }
    
        option.setAttribute("data-lang", voice.lang);
        option.setAttribute("data-name", voice.name);
        voiceSelect.appendChild(option);
      }
    }
    
    populateVoiceList();
    if (speechSynthesis.onvoiceschanged !== undefined) {
      speechSynthesis.onvoiceschanged = populateVoiceList;
    }
    
    inputForm.onsubmit = (event) => {
      event.preventDefault();
    
      const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
      const selectedOption =
        voiceSelect.selectedOptions[0].getAttribute("data-name");
      for (const voice of voices) {
        if (voice.name === selectedOption) {
          utterThis.voice = voice;
        }
      }
      utterThis.pitch = pitch.value;
      utterThis.rate = rate.value;
      synth.speak(utterThis);
    
      utterThis.onpause = (event) => {
        const char = event.utterance.text.charAt(event.charIndex);
        console.log(
          `Speech paused at character ${event.charIndex} of "${event.utterance.text}", which is "${char}".`,
        );
      };
    
      inputTxt.blur();
    };
    
  * Web Speech API


# ShadowRoot
The `ShadowRoot` interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from a document's main DOM tree.
You can retrieve a reference to an element's shadow root using its `Element.shadowRoot` property, provided it was created using `Element.attachShadow()` with the `mode` option set to `open`.
EventTarget  Node  DocumentFragment  ShadowRoot 
## Instance properties
`ShadowRoot.activeElement` Read only
    
Returns the `Element` within the shadow tree that has focus.
`ShadowRoot.adoptedStyleSheets`
    
Add an array of constructed stylesheets to be used by the shadow DOM subtree. These may be shared with other DOM subtrees that share the same parent `Document` node, and the document itself.
`ShadowRoot.clonable` Read only
    
A boolean that indicates whether the shadow root is clonable.
`ShadowRoot.delegatesFocus` Read only
    
A boolean that indicates whether the shadow root delegates focus if a non-focusable node is selected.
`ShadowRoot.fullscreenElement` Read only
    
The element that's currently in full screen mode for this shadow tree.
`ShadowRoot.host` Read only
    
Returns a reference to the DOM element the `ShadowRoot` is attached to.
`ShadowRoot.innerHTML`
    
Sets or returns a reference to the DOM tree inside the `ShadowRoot`.
`ShadowRoot.mode` Read only
    
The mode of the `ShadowRoot`, either `open` or `closed`. This defines whether or not the shadow root's internal features are accessible from JavaScript.
`ShadowRoot.pictureInPictureElement` Read only
    
Returns the `Element` within the shadow tree that is currently being presented in picture-in-picture mode.
`ShadowRoot.pointerLockElement` Read only
    
Returns the `Element` set as the target for mouse events while the pointer is locked. `null` if lock is pending, pointer is unlocked, or if the target is in another tree.
`ShadowRoot.serializable` Read only
    
A boolean that indicates whether the shadow root is serializable. A serializable shadow root inside an element will be serialized by `Element.getHTML()` or `ShadowRoot.getHTML()` when its `options.serializableShadowRoots` parameter is set `true`. This is set when the shadow root is created.
`ShadowRoot.slotAssignment` Read only
    
Returns a string containing the type of slot assignment, either `manual` or `named`.
`ShadowRoot.styleSheets` Read only
    
Returns a `StyleSheetList` of `CSSStyleSheet` objects for stylesheets explicitly linked into, or embedded in a shadow tree.
## Instance methods
`ShadowRoot.getAnimations()`
    
Returns an array of all `Animation` objects currently in effect, whose target elements are descendants of the shadow tree.
`ShadowRoot.getSelection()` Non-standard
    
Returns a `Selection` object representing the range of text selected by the user, or the current position of the caret.
`ShadowRoot.elementFromPoint()` Non-standard
    
Returns the topmost element at the specified coordinates.
`ShadowRoot.elementsFromPoint()` Non-standard
    
Returns an array of all elements at the specified coordinates.
`ShadowRoot.setHTML()`
    
Provides an XSS-safe method to parse and sanitize a string of HTML into a `DocumentFragment`, which then replaces the existing tree in the shadow DOM.
`ShadowRoot.setHTMLUnsafe()`
    
Parses a string of HTML into a document fragment, without sanitization, which then replaces the shadowroot's original subtree. The HTML string may include declarative shadow roots, which would be parsed as template elements the HTML was set using `ShadowRoot.innerHTML`.
## Events
The following events are available to `ShadowRoot` via event bubbling from `HTMLSlotElement`:
`HTMLSlotElement` `slotchange` event
    
An event fired when the node(s) contained in that slot change.
## Examples
The following snippets are taken from our life-cycle-callbacks example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.
Inside the `<custom-square>` element's class definition we include some life cycle callbacks that make a call to an external function, `updateStyle()`, which actually applies the size and color to the element. You'll see that we are passing it `this` (the custom element itself) as a parameter.
    
    class Square extends HTMLElement {
      // …
      connectedCallback() {
        console.log("Custom square element added to page.");
        updateStyle(this);
      }
    
      attributeChangedCallback(name, oldValue, newValue) {
        console.log("Custom square element attributes changed.");
        updateStyle(this);
      }
      // …
    }
    
In the `updateStyle()` function itself, we get a reference to the shadow DOM using `Element.shadowRoot`. From here we use standard DOM traversal techniques to find the `<style>` element inside the shadow DOM and then update the CSS found inside it:
    
    function updateStyle(elem) {
      const shadow = elem.shadowRoot;
      const childNodes = shadow.childNodes;
      for (const node of childNodes) {
        if (node.nodeName === "STYLE") {
          node.textContent = `
    div {
      width: ${elem.getAttribute("l")}px;
      height: ${elem.getAttribute("l")}px;
      background-color: ${elem.getAttribute("c")};
    }
          `;
        }
      }
    }
    
  * Using the shadow DOM
  * Web components


# MIDIOutput
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MIDIOutput` interface of the Web MIDI API provides methods to add messages to the queue of an output device, and to clear the queue of messages.
EventTarget  MIDIPort  MIDIOutput 
## Instance properties
This interface doesn't implement any specific properties, but inherits properties from `MIDIPort`.
## Instance methods
This interface also inherits methods from `MIDIPort`.
`MIDIOutput.send()`
    
Queues a message to be sent to the MIDI port.
`MIDIOutput.clear()`
    
Clears any pending send data from the queue.
## Examples
The following example sends a middle C immediately on MIDI channel 1.
    
    function sendMiddleC(midiAccess, portID) {
      const noteOnMessage = [0x90, 60, 0x7f]; // note on, middle C, full velocity
      const output = midiAccess.outputs.get(portID);
      output.send(noteOnMessage); // sends the message.
    }
    
# CSSNumericArray
The `CSSNumericArray` interface of the CSS Typed Object Model API contains a list of `CSSNumericValue` objects.
## Instance properties
`CSSNumericArray.length` Read only
    
Returns how many `CSSNumericValue` objects are contained within the `CSSNumericArray`.
## Examples
To do.
# PerformanceElementTiming
The `PerformanceElementTiming` interface contains render timing information for image and text node elements the developer annotated with an `elementtiming` attribute for observation.
## Description
The aim of the Element Timing API is to give web developers or analytics tools the ability to measure rendering timestamps of critical elements on a page.
The API supports timing information on the following elements:
  * `<img>` elements,
  * `<image>` elements inside an `<svg>`,
  * poster images of `<video>` elements,
  * elements which have a contentful `background-image` property with a URL value for a resource that is actually available, and
  * groups of text nodes, such as a `<p>`.


The author flags an element for observation by adding the `elementtiming` attribute on the element.
`PerformanceElementTiming` inherits from `PerformanceEntry`.
PerformanceEntry  PerformanceElementTiming 
## Instance properties
This interface extends the following `PerformanceEntry` properties for event timing performance entry types by qualifying them as follows:
`PerformanceEntry.duration` Read only Experimental
    
Always returns `0` as `duration` does not apply to this interface.
`PerformanceEntry.entryType` Read only Experimental
    
Always returns `"element"`.
`PerformanceEntry.name` Read only Experimental
    
Returns `"image-paint"` for images and `"text-paint"` for text.
`PerformanceEntry.startTime` Read only Experimental
    
Returns the value of this entry's `renderTime` if it is not `0`, otherwise the value of this entry's `loadTime`.
This interface also supports the following properties:
`PerformanceElementTiming.element` Read only Experimental
    
An `Element` representing the element we are returning information about.
`PerformanceElementTiming.id` Read only Experimental
    
A string which is the `id` of the element.
`PerformanceElementTiming.identifier` Read only Experimental
    
A string which is the value of the `elementtiming` attribute on the element.
`PerformanceElementTiming.intersectionRect` Read only Experimental
    
A `DOMRectReadOnly` which is the rectangle of the element within the viewport.
`PerformanceElementTiming.loadTime` Read only Experimental
    
A `DOMHighResTimeStamp` with the loadTime of the element.
`PerformanceElementTiming.naturalHeight` Read only Experimental
    
An unsigned 32-bit integer (unsigned long) which is the intrinsic height of the image if this is applied to an image, 0 for text.
`PerformanceElementTiming.naturalWidth` Read only Experimental
    
An unsigned 32-bit integer (unsigned long) which is the intrinsic width of the image if this is applied to an image, 0 for text.
`PerformanceElementTiming.renderTime` Read only Experimental
    
A `DOMHighResTimeStamp` with the renderTime of the element.
`PerformanceElementTiming.url` Read only Experimental
    
A string which is the initial URL of the resources request for images, 0 for text.
## Instance methods
`PerformanceElementTiming.toJSON()` Experimental
    
Returns a JSON representation of the `PerformanceElementTiming` object.
## Examples
>
### Observing render time of specific elements
In this example two elements are being observed by adding the `elementtiming` attribute. A `PerformanceObserver` is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation.
    
    <img src="image.jpg" elementtiming="big-image" />
    <p elementtiming="text" id="text-id">text here</p>
    
    
    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        console.log(entry);
      });
    });
    observer.observe({ type: "element", buffered: true });
    
Two entries will be output to the console. The first containing details of the image, the second with details of the text node.
  * `elementtiming` HTML attribute


# SVGForeignObjectElement
The `SVGForeignObjectElement` interface provides access to the properties of `<foreignObject>` elements, as well as methods to manipulate them.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGForeignObjectElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGraphicsElement`.
`SVGForeignObjectElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given `<foreignObject>` element.
`SVGForeignObjectElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given `<foreignObject>` element.
`SVGForeignObjectElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given `<foreignObject>` element.
`SVGForeignObjectElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given `<foreignObject>` element.
## Instance methods
This interface has no methods but inherits methods from its parent, `SVGGraphicsElement`.
  * `<foreignObject>`


# GPUBindGroupLayout
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUBindGroupLayout` interface of the WebGPU API defines the structure and purpose of related GPU resources such as buffers that will be used in a pipeline, and is used as a template when creating `GPUBindGroup`s.
A `GPUBindGroupLayout` object instance is created using the `GPUDevice.createBindGroupLayout()` method.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Examples
Note: The WebGPU samples feature many more examples.
### Basic example
Our basic compute demo shows an example of creating a bind group layout and then using that as a template when creating a bind group.
    
    // …
    
    const bindGroupLayout = device.createBindGroupLayout({
      entries: [
        {
          binding: 0,
          visibility: GPUShaderStage.COMPUTE,
          buffer: {
            type: "storage",
          },
        },
      ],
    });
    
    const bindGroup = device.createBindGroup({
      layout: bindGroupLayout,
      entries: [
        {
          binding: 0,
          resource: {
            buffer: output,
          },
        },
      ],
    });
    
    // …
    
  * The WebGPU API


# PasswordCredential
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PasswordCredential` interface of the Credential Management API provides information about a username/password pair. In supporting browsers an instance of this class may be passed in the `credential` member of the `init` object for global `fetch()`.
Note: This interface is restricted to top-level contexts and cannot be used from an `<iframe>`.
Credential  PasswordCredential 
## Constructor
`PasswordCredential()` Experimental
    
Creates a new `PasswordCredential` object.
## Instance properties
Inherits properties from its ancestor, `Credential`.
`PasswordCredential.iconURL` Read only Experimental
    
A string containing a URL pointing to an image for an icon. This image is intended for display in a credential chooser. The URL must be accessible without authentication.
`PasswordCredential.name` Read only Experimental
    
A human-readable string that provides public name for display in a credential chooser.
`PasswordCredential.password` Read only Experimental
    
A string containing the password of the credential.
## Instance methods
None.
## Examples
    
    const cred = new PasswordCredential({
      id,
      password,
      name,
      iconURL,
    });
    
    navigator.credentials.store(cred).then(() => {
      // Do something else.
    });
    
# PromiseRejectionEvent
Note: This feature is available in Web Workers.
The `PromiseRejectionEvent` interface represents events which are sent to the global script context when JavaScript `Promise`s are rejected. These events are particularly useful for telemetry and debugging purposes.
For details, see Promise rejection events.
Event  PromiseRejectionEvent 
## Constructor
`PromiseRejectionEvent()`
    
Creates a `PromiseRejectionEvent` event, given the type of event (`unhandledrejection` or `rejectionhandled`) and other details.
## Instance properties
Also inherits properties from its parent `Event`.
`PromiseRejectionEvent.promise` Read only
    
The JavaScript `Promise` that was rejected.
`PromiseRejectionEvent.reason` Read only
    
A value or `Object` indicating why the promise was rejected, as passed to `Promise.reject()`.
## Instance methods
This interface has no unique methods; inherits methods from its parent `Event`.
## Events
`rejectionhandled`
    
Fired when a JavaScript `Promise` is rejected, and after the rejection is handled by the promise's rejection handling code.
`unhandledrejection`
    
Fired when a JavaScript `Promise` is rejected but there is no rejection handler to deal with the rejection.
## Examples
This simple example catches unhandled promise rejections and logs them for debugging purposes.
    
    window.onunhandledrejection = (e) => {
      console.log(e.reason);
    };
    
  * Using promises
  * `Promise`
  * `rejectionhandled`
  * `unhandledrejection`


# DOMRect
Note: This feature is available in Web Workers.
A `DOMRect` describes the size and position of a rectangle.
The type of box represented by the `DOMRect` is specified by the method or property that returned it. For example, `Range.getBoundingClientRect()` specifies the rectangle that bounds the content of the range using such objects.
It inherits from its parent, `DOMRectReadOnly`.
DOMRectReadOnly  DOMRect 
## Constructor
`DOMRect()`
    
Creates a new `DOMRect` object.
## Instance properties
`DOMRect` inherits properties from its parent, `DOMRectReadOnly`. The difference is that they are not read-only anymore.
`DOMRect.x`
    
The x coordinate of the `DOMRect`'s origin (typically the top-left corner of the rectangle).
`DOMRect.y`
    
The y coordinate of the `DOMRect`'s origin (typically the top-left corner of the rectangle).
`DOMRect.width`
    
The width of the `DOMRect`.
`DOMRect.height`
    
The height of the `DOMRect`.
`DOMRectReadOnly.top`
    
Returns the top coordinate value of the `DOMRect` (has the same value as `y`, or `y + height` if `height` is negative).
`DOMRectReadOnly.right`
    
Returns the right coordinate value of the `DOMRect` (has the same value as `x + width`, or `x` if `width` is negative).
`DOMRectReadOnly.bottom`
    
Returns the bottom coordinate value of the `DOMRect` (has the same value as `y + height`, or `y` if `height` is negative).
`DOMRectReadOnly.left`
    
Returns the left coordinate value of the `DOMRect` (has the same value as `x`, or `x + width` if `width` is negative).
## Static methods
`DOMRect` may also inherit static methods from its parent, `DOMRectReadOnly`.
`DOMRect.fromRect()`
    
Creates a new `DOMRect` object with a given location and dimensions.
## Instance methods
`DOMRect` may inherit methods from its parent, `DOMRectReadOnly`.
  * `DOMPoint`


# PaymentManager
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PaymentManager` interface of the Payment Handler API is used to manage various aspects of payment app functionality.
It is accessed via the `ServiceWorkerRegistration.paymentManager` property.
## Instance properties
`userHint` Experimental
    
Provides a hint for the browser to display along with the payment app's name and icon in the Payment Handler UI.
## Instance methods
`enableDelegations()` Experimental
    
Delegates responsibility for providing various parts of the required payment information to the payment app rather than collecting it from the browser (for example, via autofill).
## Examples
    
    navigator.serviceWorker.register("serviceworker.js").then((registration) => {
      registration.paymentManager.userHint = "Card number should be 16 digits";
    
      registration.paymentManager
        .enableDelegations(["shippingAddress", "payerName"])
        .then(() => {
          // …
        });
    
      // …
    });
    
  * Payment Handler API
  * Web-based payment apps overview
  * Setting up a payment method
  * Life of a payment transaction
  * Using the Payment Request API
  * Payment processing concepts


# RTCDataChannel
The `RTCDataChannel` interface represents a network channel which can be used for bidirectional peer-to-peer transfers of arbitrary data. Every data channel is associated with an `RTCPeerConnection`, and each peer connection can have up to a theoretical maximum of 65,534 data channels (the actual limit may vary from browser to browser).
To create a data channel and ask a remote peer to join you, call the `RTCPeerConnection`'s `createDataChannel()` method. The peer being invited to exchange data receives a `datachannel` event (which has type `RTCDataChannelEvent`) to let it know the data channel has been added to the connection.
`RTCDataChannel` is a transferable object.
EventTarget  RTCDataChannel 
## Instance properties
Also inherits properties from `EventTarget`.
`binaryType`
    
A string specifying the type of object that should be used to represent binary data received on the `RTCDataChannel`. Values are the same as allowed on the `WebSocket.binaryType` property: `blob` if `Blob` objects are being used, or `arraybuffer` if `ArrayBuffer` objects are being used. The default is `arraybuffer`.
`bufferedAmount` Read only
    
Returns the number of bytes of data currently queued to be sent over the data channel.
`bufferedAmountLowThreshold`
    
Specifies the number of bytes of buffered outgoing data that is considered "low". The default value is 0.
`id` Read only
    
Returns an ID number (between 0 and 65,534) which uniquely identifies the `RTCDataChannel`.
`label` Read only
    
Returns a string that contains a name describing the data channel. These labels are not required to be unique.
`maxPacketLifeTime` Read only
    
Returns the amount of time, in milliseconds, the browser is allowed to take to attempt to transmit a message, as set when the data channel was created, or `null`.
`maxRetransmits` Read only
    
Returns the maximum number of times the browser should try to retransmit a message before giving up, as set when the data channel was created, or `null`, which indicates that there is no maximum.
`negotiated` Read only
    
Indicates whether the `RTCDataChannel`'s connection was negotiated by the Web app (`true`) or by the WebRTC layer (`false`). The default is `false`.
`ordered` Read only
    
Indicates whether or not the data channel guarantees in-order delivery of messages; the default is `true`, which indicates that the data channel is indeed ordered.
`protocol` Read only
    
Returns a string containing the name of the subprotocol in use. If no protocol was specified when the data channel was created, then this property's value is the empty string (`""`).
`readyState` Read only
    
Returns a string which indicates the state of the data channel's underlying data connection. It can have one of the following values: `connecting`, `open`, `closing`, or `closed`.
### Obsolete properties
`reliable` Read only Deprecated Non-standard
    
Indicates whether or not the data channel is reliable.
## Instance methods
Also inherits methods from `EventTarget`.
`close()`
    
Closes the `RTCDataChannel`. Either peer is permitted to call this method to initiate closure of the channel.
`send()`
    
Sends data across the data channel to the remote peer.
## Events
`bufferedamountlow`
    
Sent when the number of bytes of data in the outgoing data buffer falls below the value specified by `bufferedAmountLowThreshold`.
`close`
    
Sent when the underlying data transport closes.
`closing`
    
Sent when the underlying data transport is about to start closing.
`error`
    
Sent when an error occurs on the data channel.
`message`
    
Sent when a message has been received from the remote peer. The message contents can be found in the event's `data` property.
`open`
    
Sent when the data channel is first opened, or when an existing data channel's underlying connection re-opens.
## Data format
The underlying data format is defined by the IEEE specification SDP Offer/Answer Procedures for SCTP over DTLS Transport(RFC 8841). The current format specifies its protocol as either `"UDP/DTLS/SCTP"` (UDP carrying DTLS carrying SCTP) or `"TCP/DTLS/SCTP"` (TCP carrying DTLS carrying SCTP). Older browsers may only specify `"DTLS/SCTP"`.
## Example
    
    const pc = new RTCPeerConnection();
    const dc = pc.createDataChannel("my channel");
    
    dc.onmessage = (event) => {
      console.log(`received: ${event.data}`);
    };
    
    dc.onopen = () => {
      console.log("datachannel open");
    };
    
    dc.onclose = () => {
      console.log("datachannel close");
    };
    
  * WebRTC API


# EncodedAudioChunk
Note: This feature is available in Dedicated Web Workers.
The `EncodedAudioChunk` interface of the WebCodecs API represents a chunk of encoded audio data.
## Constructor
`EncodedAudioChunk()`
    
Creates a new `EncodedAudioChunk` object.
## Instance properties
`EncodedAudioChunk.type` Read only
    
Returns a string indicating whether this chunk of data is a key chunk.
`EncodedAudioChunk.timestamp` Read only
    
Returns an integer representing the timestamp of the audio in microseconds.
`EncodedAudioChunk.duration` Read only
    
Returns an integer representing the duration of the audio in microseconds.
`EncodedAudioChunk.byteLength` Read only
    
Returns an integer representing the length of the audio in bytes.
## Instance methods
`EncodedAudioChunk.copyTo()`
    
Copies the encoded audio data.
# RTCDTMFToneChangeEvent
The `RTCDTMFToneChangeEvent` interface represents events sent to indicate that DTMF tones have started or finished playing. This interface is used by the `tonechange` event.
Event  RTCDTMFToneChangeEvent 
## Instance properties
In addition to the properties of `Event`, this interface offers the following:
`RTCDTMFToneChangeEvent.tone` Read only
    
A string specifying the tone which has begun playing, or an empty string (`""`) if the previous tone has finished playing.
## Constructors
`RTCDTMFToneChangeEvent()`
    
Returns a new `RTCDTMFToneChangeEvent`. It takes two parameters, the first being a string representing the type of the event (always `"tonechange"`); the second a dictionary containing the initial state of the properties of the event.
## Instance methods
Supports the methods defined in `Event`. There are no additional methods.
## Examples
This snippet is derived loosely from the full, working example you'll find in the section on When a tone finishes playing. It appends each tone to a display box as it's played, and, once all tones have been sent, re-enabled a previously-disabled "Send" button, allowing the next DTMF string to be entered.
    
    dtmfSender.addEventListener(
      "change",
      (event) => {
        if (event.tone !== "") {
          dialStringBox.innerText += event.tone;
        } else {
          sendDTMFButton.disabled = false;
        }
      },
      false,
    );
    
  * WebRTC
  * Its usual target: `RTCDTMFSender`.


# Intersection Observer API
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
## Overview
Historically, detecting visibility of an element, or the relative visibility of two elements in relation to each other, has been a difficult task for which solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish. As the web has matured, the need for this kind of information has grown. Intersection information is needed for many reasons, such as:
  * Lazy-loading of images or other content as a page is scrolled.
  * Implementing "infinite scrolling" websites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.
  * Reporting of visibility of advertisements in order to calculate ad revenues.
  * Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result.


Implementing intersection detection in the past involved event handlers and loops calling methods like `Element.getBoundingClientRect()` to build up the needed information for every element affected. Since all this code runs on the main thread, even one of these can cause performance problems. When a site is loaded with these tests, things can get downright ugly.
Consider a web page that uses infinite scrolling. It uses a vendor-provided library to manage the advertisements placed periodically throughout the page, has animated graphics here and there, and uses a custom library that draws notification boxes and the like. Each of these has its own intersection detection routines, all running on the main thread. The author of the website may not even realize this is happening, since they may know very little about the inner workings of the two libraries they are using. As the user scrolls the page, these intersection detection routines are firing constantly during the scroll handling code, resulting in an experience that leaves the user frustrated with the browser, the website, and their computer.
The Intersection Observer API lets code register a callback function that is executed whenever a particular element enters or exits an intersection with another element (or the viewport), or when the intersection between two elements changes by a specified amount. This way, sites no longer need to do anything on the main thread to watch for this kind of element intersection, and the browser is free to optimize the management of intersections as it sees fit.
One thing the Intersection Observer API can't do: trigger logic based on the exact number of pixels that overlap, or specifically on which ones they are. It only solves the common use case of "If they intersect by somewhere around N%, I need to do something."
## Concepts and usage
The Intersection Observer API allows you to configure a callback that is called when either of these circumstances occur:
  * A target element intersects either the device's viewport or a specified element. That specified element is called the root element or root for the purposes of the Intersection Observer API.
  * The first time the observer is initially asked to watch a target element.


Typically, you'll want to watch for intersection changes with regard to the target element's closest scrollable ancestor, or, if the target element isn't a descendant of a scrollable element, the device's viewport. To watch for intersection relative to the device's viewport, specify `null` for the `root` option. Keep reading for a more detailed explanation about intersection observer options.
Whether you're using the viewport or some other element as the root, the API works the same way, executing a callback function you provide whenever the visibility of the target element changes so that it crosses desired amounts of intersection with the root.
The degree of intersection between the target element and its root is the intersection ratio. This is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0.
### Creating an intersection observer
Create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other:
    
    const options = {
      root: document.querySelector("#scrollArea"),
      rootMargin: "0px",
      scrollMargin: "0px",
      threshold: 1.0,
    };
    
    const observer = new IntersectionObserver(callback, options);
    
A threshold of 1.0 means that when 100% of the target is visible within the element specified by the `root` option, the callback is invoked.
#### Intersection observer options
The `options` object passed into the `IntersectionObserver()` constructor let you control the circumstances under which the observer's callback is invoked. It has the following fields:
`root`
    
The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if `null`.
`rootMargin`
    
Margin around the root. A string of one to four values similar to the CSS `margin` property, e.g., `"10px 20px 30px 40px"` (top, right, bottom, left). The values can only be in pixels (`px`) or percentages (`%`). This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Negative values will shrink the bounding box of the root element and positive values will expand it. The default value, if not specified, is `"0px 0px 0px 0px"`.
`scrollMargin`
    
Margin around nested scroll containers that takes the same values/has same default as `rootMargin`. The margins are applied to nested scrollable containers before computing intersections. Positive values grow the clipping rectangle of the container, allowing targets to intersect before they becomes visible, while negative values shrink the clipping rectangle.
`threshold`
    
Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5. If you want the callback to run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1]. The default is 0 (meaning as soon as even one pixel is visible, the callback will be run). A value of 1.0 means that the threshold isn't considered passed until every pixel is visible.
`delay` Experimental
    
When tracking target visibility (trackVisibility is `true`), this can be used to set the minimum delay in milliseconds between notifications from this observer. Limiting the notification rate is desirable because the visibility calculation is computationally intensive. If tracking visibility, the value will be set to 100 for any value less than 100, and you should use the largest tolerable value. The value is 0 by default.
`trackVisibility` Experimental
    
A boolean indicating whether this `IntersectionObserver` is tracking changes in a target's visibility.
When `false` the browser will report intersections when the target element scrolls into the root element's viewport. When `true`, the browser will additionally check that the target is actually visible, and hasn't been covered by other elements or potentially been distorted or hidden by a filter, reduced opacity, or some transform. The value is `false` by default as tracking visibility is computationally intensive. If this is set, a `delay` should also be set.
#### Intersection change callbacks
The callback passed to the `IntersectionObserver()` constructor receives a list of `IntersectionObserverEntry` objects and the observer:
    
    const callback = (entries, observer) => {
      entries.forEach((entry) => {
        // Each entry describes an intersection change for one observed
        // target element:
        //   entry.boundingClientRect
        //   entry.intersectionRatio
        //   entry.intersectionRect
        //   entry.isIntersecting
        //   entry.rootBounds
        //   entry.target
        //   entry.time
      });
    };
    
The list of entries received by the callback includes one `IntersectionObserverEntry` object for each threshold-crossing event — multiple entries can be received at a time, either from multiple targets or from a single target crossing multiple thresholds in a short amount of time. The entries are dispatched using a queue, so they should be ordered by the time they were generated, but you should preferably use `IntersectionObserverEntry.time` to correctly order them. Each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, etc. The entry only contains information about that particular instant — if you want information that requires tracking over time, such as the scroll direction and speed, you may need to compute that yourself by memorizing previously received entries.
Be aware that your callback is executed on the main thread. It should operate as quickly as possible; if anything time-consuming needs to be done, use `Window.requestIdleCallback()`.
The code snippet below shows a callback which keeps a counter of how many times elements transition from not intersecting the root to intersecting by at least 75%. For a threshold value of 0.0 (default) the callback is called approximately upon transition of the boolean value of `isIntersecting`. The snippet thus first checks that the transition is a positive one, then determines whether `intersectionRatio` is above 75%, in which case it increments the counter.
    
    const intersectionCallback = (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          let elem = entry.target;
    
          if (entry.intersectionRatio >= 0.75) {
            intersectionCounter++;
          }
        }
      });
    };
    
#### Targeting an element to be observed
Once you have created the observer, you need to give it a target element to watch:
    
    const target = document.querySelector("#listItem");
    observer.observe(target);
    
    // the callback we set up for the observer will be executed now for the first time
    // it waits until we assign a target to our observer (even if the target is currently not visible)
    
Whenever the target meets a threshold specified for the `IntersectionObserver`, the callback is invoked.
Also, note that if you specified the `root` option, the target must be a descendant of the root element.
### How intersection is calculated
All areas considered by the Intersection Observer API are rectangles; elements which are irregularly shaped are considered as occupying the smallest rectangle which encloses all of the element's parts. Similarly, if the visible portion of an element is not rectangular, the element's intersection rectangle is considered to be the smallest rectangle that contains all the visible portions of the element.
It's useful to understand a bit about how the various properties provided by `IntersectionObserverEntry` describe an intersection.
#### The intersection root and root margin
Before we can track the intersection of an element with a container, we need to know what that container is. That container is the intersection root, or root element. This can be either a specific element in the document which is an ancestor of the element to be observed, or `null` to use the document's viewport as the container.
The root intersection rectangle is the rectangle used to check against the target or targets. This rectangle is determined like this:
  * If the intersection root is the implicit root (that is, the top-level `Document`), the root intersection rectangle is the viewport's rectangle.
  * If the intersection root has an overflow clip, the root intersection rectangle is the root element's content area.
  * Otherwise, the root intersection rectangle is the intersection root's bounding client rectangle (as returned by calling `getBoundingClientRect()` on it).


The root intersection rectangle can be adjusted further by setting the root margin, `rootMargin`, when creating the `IntersectionObserver`. The values in `rootMargin` define offsets added to each side of the intersection root's bounding box to create the final intersection root bounds (which are disclosed in `IntersectionObserverEntry.rootBounds` when the callback is executed). Positive values grow the box, while negative values shrink it. Each offset value can be only expressed in pixels (px) or a percentage (%).
The effect of growing the box using the root margin is to allow overflow targets to intersect with the root before they become visible. This can be used, for example, to start loading images just before they come into view, rather than at the point they become visible.
In the example below, we have a scrollable box and an element that's initially out of view. You can adjust the root right margin, and see that:
  * If the margin is positive, the red element is considered intersecting with the root even if it's not visible, because it's intersecting with the root's margin area.
  * If the margin is negative, then even when the red element starts to become visible, it's still not considered intersecting with the root because the root's bounding box is shrunk.


#### The intersection root and scroll margin
Consider the case where you have a root element that contains nested scroll containers, and you want to observe intersections with a target inside one of those scrollable containers. Intersections with the target element start being observable, by default, when the target is visible within the area defined by the root; in other words, when the container is scrolled into view in the root and the target is scrolled into view within the clipping rectangle of its container.
You can use a scroll margin to start observing intersections before or after the target is scrolled into view within its scroll container. The margin is added to all nested scroll containers in the root, including the root element if it is also a scroll container, and has the effect of either growing (positive margins) or shrinking (negative margin) the clipping region used for calculating intersections.
Note: You could create an intersection observer on each scroll container for which you want a scroll margin, and use the root margin property to achieve a similar effect. Using a scroll margin is more ergonomic, as in most cases you can have just one intersection observer for all nested targets.
In the example below, we have a scrollable box and an image carousel that is initially out of view. An observer on the root element observes the image element targets within the carousel. When an image element starts to intersect with the root element, the image is loaded, the intersection is logged, and the observer is removed.
Scroll down to display the carousel. The visible images should immediately load. If you scroll the carousel, you should observe that the images are loaded as soon as the element becomes visible.
After resetting the example you can use the provided control to change the scroll margin percentage. If you set a positive value like 20% the clip rectangle of the scroll container will be increased by 20%, and you should observe that images are detected and loaded before they come into view. Similarly, a negative value will mean that the intersection is detected once images are already in view.
#### Thresholds
Rather than reporting every infinitesimal change in how much a target element is visible, the Intersection Observer API uses thresholds. When you create an observer, you can provide one or more numeric values representing percentages of the target element which are visible. Then, the API only reports changes to visibility which cross these thresholds.
For example, if you want to be informed every time a target's visibility passes backward or forward through each 25% mark, you would specify the array [0, 0.25, 0.5, 0.75, 1] as the list of thresholds when creating the observer.
When the callback is invoked, it receives a list of `IntersectionObserverEntry` objects, one for each observed target which has had the degree to which it intersects the root change such that the amount exposed crosses over one of the thresholds, in either direction.
You can see if the target currently intersects the root by looking at the entry's `isIntersecting` property; if its value is `true`, the target is at least partially intersecting the root element or document. This lets you determine whether the entry represents a transition from the elements intersecting to no longer intersecting or a transition from not intersecting to intersecting.
Note that it's possible to have a zero intersection rectangle, which can happen if the intersection is exactly along the boundary between the two or the area of `boundingClientRect` is zero. This state of the target and root sharing a boundary line is not considered enough to be considered transitioning into an intersecting state.
To get a feeling for how thresholds work, try scrolling the box below around. Each colored box within it displays the percentage of itself that's visible in all four of its corners, so you can see these ratios change over time as you scroll the container. Each box has a different set of thresholds:
  * The first box has a threshold for each percentage point of visibility; that is, the `IntersectionObserver.thresholds` array is `[0.00, 0.01, 0.02, /*…,*/ 0.99, 1.00]`.
  * The second box has a single threshold, at the 50% mark.
  * The third box has thresholds every 10% of visibility (0%, 10%, 20%, etc.).
  * The last box has thresholds each 25%.


#### Tracking visibility and delay
By default the observer provides notifications when the target element is scrolled into the root element's viewport. While this is all that is needed in many situations, sometimes it is important that intersections are not reported when the target has been "visually compromised". For example, when measuring analytics or ad impressions, it is important that target elements are not hidden or distorted, in whole or in part.
The `trackVisibility` setting tells the observer to only report intersections for targets that the browser does not consider to be visually compromised, such as by altering the opacity, or applying a filter or transform. The algorithm is conservative, and may omit elements that are technically visible, such as those with only a slight opacity reduction.
The visibility calculation is computationally expensive and should only be used when necessary. When tracking visibility a `delay` should also be set to limit the minimum reporting period. The recommendation is that you set the delay to the largest tolerable value (the minimum delay when tracking visibility is 100 milliseconds).
#### Clipping and the intersection rectangle
The browser computes the final intersection rectangle as follows; this is all done for you, but it can be helpful to understand these steps in order to better grasp exactly when intersections will occur.
  1. The target element's bounding rectangle (that is, the smallest rectangle that fully encloses the bounding boxes of every component that makes up the element) is obtained by calling `getBoundingClientRect()` on the target. This is the largest the intersection rectangle may be. The remaining steps will remove any portions that don't intersect.
  2. Starting at the target's immediate parent block and moving outward, each containing block's clipping (if any) is applied to the intersection rectangle. A block's clipping is determined based on the intersection of the two blocks and the clipping mode (if any) specified by the `overflow` property. Setting `overflow` to anything but `visible` causes clipping to occur.
  3. If one of the containing elements is the root of a nested browsing context (such as the document contained in an `<iframe>`), the intersection rectangle is clipped to the containing context's viewport, and recursion upward through the containers continues with the container's containing block. So if the top level of an `<iframe>` is reached, the intersection rectangle is clipped to the frame's viewport, then the frame's parent element is the next block recursed through toward the intersection root.
  4. When recursion upward reaches the intersection root, the resulting rectangle is mapped to the intersection root's coordinate space.
  5. The resulting rectangle is then updated by intersecting it with the root intersection rectangle.
  6. This rectangle is, finally, mapped to the coordinate space of the target's `document`.


## Interfaces
`IntersectionObserver`
    
The primary interface for the Intersection Observer API. Provides methods for creating and managing an observer which can watch any number of target elements for the same intersection configuration. Each observer can asynchronously observe changes in the intersection between one or more target elements and a shared ancestor element or with their top-level `Document`'s viewport. The ancestor or viewport is referred to as the root.
`IntersectionObserverEntry`
    
Describes the intersection between the target element and its root container at a specific moment of transition. Objects of this type can only be obtained in two ways: as an input to your `IntersectionObserver` callback, or by calling `IntersectionObserver.takeRecords()`.
## A simple example
This simple example causes a target element to change its color and transparency as it becomes more or less visible. At Timing element visibility with the Intersection Observer API, you can find a more extensive example showing how to time how long a set of elements (such as ads) are visible to the user and to react to that information by recording statistics or by updating elements.
### HTML
The HTML for this example is very short, with a primary element which is the box that we'll be targeting (with the creative ID `"box"`) and some contents within the box.
    
    <div id="box">
      <div class="vertical">Welcome to <strong>The Box!</strong></div>
    </div>
    
### CSS
The CSS isn't terribly important for the purposes of this example; it lays out the element and establishes that the `background-color` and `border` attributes can participate in CSS transitions, which we'll use to affect the changes to the element as it becomes more or less obscured.
    
    #box {
      background-color: rgb(40 40 190 / 100%);
      border: 4px solid rgb(20 20 120);
      transition:
        background-color 1s,
        border 1s;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    
    .vertical {
      color: white;
      font: 32px "Arial";
    }
    
    .extra {
      width: 350px;
      height: 350px;
      margin-top: 10px;
      border: 4px solid rgb(20 20 120);
      text-align: center;
      padding: 20px;
    }
    
### JavaScript
Finally, let's take a look at the JavaScript code that uses the Intersection Observer API to make things happen.
#### Setting up
First, we need to prepare some variables and install the observer.
    
    const numSteps = 20.0;
    
    let boxElement;
    let prevRatio = 0.0;
    let increasingColor = "rgb(40 40 190 / ratio)";
    let decreasingColor = "rgb(190 40 40 / ratio)";
    
    // Set things up
    window.addEventListener(
      "load",
      (event) => {
        boxElement = document.querySelector("#box");
    
        createObserver();
      },
      false,
    );
    
The constants and variables we set up here are:
`numSteps`
    
A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.
`prevRatio`
    
This variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible.
`increasingColor`
    
A string defining a color we'll apply to the target element when the visibility ratio is increasing. The word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured.
`decreasingColor`
    
Similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing.
We call `Window.addEventListener()` to start listening for the `load` event; once the page has finished loading, we get a reference to the element with the ID `"box"` using `querySelector()`, then call the `createObserver()` method we'll create in a moment to handle building and installing the intersection observer.
#### Creating the intersection observer
The `createObserver()` method is called once page load is complete to handle actually creating the new `IntersectionObserver` and starting the process of observing the target element.
    
    function createObserver() {
      let observer;
    
      let options = {
        root: null,
        rootMargin: "0px",
        threshold: buildThresholdList(),
      };
    
      observer = new IntersectionObserver(handleIntersect, options);
      observer.observe(boxElement);
    }
    
This begins by setting up an `options` object containing the settings for the observer. We want to watch for changes in visibility of the target element relative to the document's viewport, so `root` is `null`. We need no margin, so the margin offset, `rootMargin`, is specified as "0px". This causes the observer to watch for changes in the intersection between the target element's bounds and those of the viewport, without any added (or subtracted) space.
The list of visibility ratio thresholds, `threshold`, is constructed by the function `buildThresholdList()`. The threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjustable.
Once `options` is ready, we create the new observer, calling the `IntersectionObserver()` constructor, specifying a function to be called when intersection crosses one of our thresholds, `handleIntersect()`, and our set of options. We then call `observe()` on the returned observer, passing into it the desired target element.
We could opt to monitor multiple elements for visibility intersection changes with respect to the viewport by calling `observer.observe()` for each of those elements, if we wanted to do so.
#### Building the array of threshold ratios
The `buildThresholdList()` function, which builds the list of thresholds, looks like this:
    
    function buildThresholdList() {
      let thresholds = [];
      let numSteps = 20;
    
      for (let i = 1.0; i <= numSteps; i++) {
        let ratio = i / numSteps;
        thresholds.push(ratio);
      }
    
      thresholds.push(0);
      return thresholds;
    }
    
This builds the array of thresholds—each of which is a ratio between 0.0 and 1.0, by pushing the value `i/numSteps` onto the `thresholds` array for each integer `i` between 1 and `numSteps`. It also pushes 0 to include that value. The result, given the default value of `numSteps` (20), is the following list of thresholds:
# Ratio # Ratio  
0 0.05 11 0.6  
1 0.1 12 0.65  
2 0.15 13 0.7  
3 0.2 14 0.75  
4 0.25 15 0.8  
5 0.3 16 0.85  
6 0.35 17 0.9  
7 0.4 18 0.95  
8 0.45 19 1  
9 0.5 20 0  
10 0.55  
We could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing. But this example leaves room for adding configuration controls to adjust the granularity, for example.
#### Handling intersection changes
When the browser detects that the target element (in our case, the one with the ID `"box"`) has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, `handleIntersect()`:
    
    function handleIntersect(entries, observer) {
      entries.forEach((entry) => {
        if (entry.intersectionRatio > prevRatio) {
          entry.target.style.backgroundColor = increasingColor.replace(
            "ratio",
            entry.intersectionRatio,
          );
        } else {
          entry.target.style.backgroundColor = decreasingColor.replace(
            "ratio",
            entry.intersectionRatio,
          );
        }
    
        prevRatio = entry.intersectionRatio;
      });
    }
    
For each `IntersectionObserverEntry` in the list `entries`, we look to see if the entry's `intersectionRatio` is going up; if it is, we set the target's `background-color` to the string in `increasingColor` (remember, it's `"rgb(40 40 190 / ratio)"`), replaces the word "ratio" with the entry's `intersectionRatio`. The result: not only does the color get changed, but the transparency of the target element changes, too; as the intersection ratio goes down, the background color's alpha value goes down with it, resulting in an element that's more transparent.
Similarly, if the `intersectionRatio` is going down, we use the string `decreasingColor` and replace the word "ratio" in that with the `intersectionRatio` before setting the target element's `background-color`.
Finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable `prevRatio`.
### Result
Below is the resulting content. Scroll this page up and down and notice how the appearance of the box changes as you do so.
There's an even more extensive example at Timing element visibility with the Intersection Observer API.
  * Intersection Observer polyfill
  * Timing element visibility with the Intersection Observer API
  * `IntersectionObserver` and `IntersectionObserverEntry`


# Response
Note: This feature is available in Web Workers.
The `Response` interface of the Fetch API represents the response to a request.
You can create a new `Response` object using the `Response()` constructor, but you are more likely to encounter a `Response` object being returned as the result of another API operation—for example, a service worker `FetchEvent.respondWith`, or a simple `fetch()`.
## Constructor
`Response()`
    
Creates a new `Response` object.
## Instance properties
`Response.body` Read only
    
A `ReadableStream` of the body contents.
`Response.bodyUsed` Read only
    
Stores a boolean value that declares whether the body has been used in a response yet.
`Response.headers` Read only
    
The `Headers` object associated with the response.
`Response.ok` Read only
    
A boolean indicating whether the response was successful (status in the range `200` – `299`) or not.
`Response.redirected` Read only
    
Indicates whether or not the response is the result of a redirect (that is, its URL list has more than one entry).
`Response.status` Read only
    
The status code of the response. (This will be `200` for a success).
`Response.statusText` Read only
    
The status message corresponding to the status code. (e.g., `OK` for `200`).
`Response.type` Read only
    
The type of the response (e.g., `basic`, `cors`).
`Response.url` Read only
    
The URL of the response.
## Static methods
`Response.error()`
    
Returns a new `Response` object associated with a network error.
`Response.redirect()`
    
Returns a new response with a different URL.
`Response.json()`
    
Returns a new `Response` object for returning the provided JSON encoded data.
## Instance methods
`Response.arrayBuffer()`
    
Returns a promise that resolves with an `ArrayBuffer` representation of the response body.
`Response.blob()`
    
Returns a promise that resolves with a `Blob` representation of the response body.
`Response.bytes()`
    
Returns a promise that resolves with a `Uint8Array` representation of the response body.
`Response.clone()`
    
Creates a clone of a `Response` object.
`Response.formData()`
    
Returns a promise that resolves with a `FormData` representation of the response body.
`Response.json()`
    
Returns a promise that resolves with the result of parsing the response body text as `JSON`.
`Response.text()`
    
Returns a promise that resolves with a text representation of the response body.
## Examples
>
### Fetching an image
In our basic fetch example (run example live) we use a simple `fetch()` call to grab an image and display it in an `<img>` element. The `fetch()` call returns a promise, which resolves to the `Response` object associated with the resource fetch operation.
You'll notice that since we are requesting an image, we need to run `Response.blob` to give the response its correct MIME type.
    
    const image = document.querySelector(".my-image");
    fetch("flowers.jpg")
      .then((response) => response.blob())
      .then((blob) => {
        const objectURL = URL.createObjectURL(blob);
        image.src = objectURL;
      });
    
You can also use the `Response()` constructor to create your own custom `Response` object:
    
    const response = new Response();
    
### A PHP Call
Here we call a PHP program file that generates a JSON string, displaying the result as a JSON value.
    
    // Function to fetch JSON using PHP
    const getJSON = async () => {
      // Generate the Response object
      const response = await fetch("getJSON.php");
      if (response.ok) {
        // Get JSON value from the response body
        return response.json();
      }
      throw new Error("*** PHP file not found");
    };
    
    // Call the function and output value or error message to console
    getJSON()
      .then((result) => console.log(result))
      .catch((error) => console.error(error));
    
  * ServiceWorker API
  * HTTP access control (CORS)
  * HTTP


# File System API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The File System API — with extensions provided via the File System Access API to access files on the device file system — allows read, write and file management capabilities.
See Relationship to other file-related APIs for a comparison between this API, the File and Directory Entries API, and the File API.
## Concepts and Usage
This API allows interaction with files on a user's local device, or on a user-accessible network file system. Core functionality of this API includes reading files, writing or saving files, and access to directory structure.
Most of the interaction with files and directories is accomplished through handles. A parent `FileSystemHandle` class helps define two child classes: `FileSystemFileHandle` and `FileSystemDirectoryHandle`, for files and directories respectively.
The handles represent a file or directory on the user's system. You can first gain access to them by showing the user a file or directory picker using methods such as `window.showOpenFilePicker()` and `window.showDirectoryPicker()`. Once these are called, the file picker presents itself and the user selects either a file or directory. Once this happens successfully, a handle is returned.
You can also gain access to file handles via:
  * The `DataTransferItem.getAsFileSystemHandle()` method of the HTML Drag and Drop API.
  * The File Handling API.


Each handle provides its own functionality and there are a few differences depending on which one you are using (see the interfaces section for specific details). You then can access file data, or information (including children) of the directory selected. This API opens up potential functionality the web has been lacking. Still, security has been of utmost concern when designing the API, and access to file/directory data is disallowed unless the user specifically permits it (note that this is not the case with the Origin private file system, because it is not visible to the user).
Note: The different exceptions that can be thrown when using the features of this API are listed on relevant pages as defined in the spec. However, the situation is made more complex by the interaction of the API and the underlying operating system. A proposal has been made to list the error mappings in the spec, which includes useful related information.
Note: Objects based on `FileSystemHandle` can also be serialized into an IndexedDB database instance, or transferred via `postMessage()`.
### Origin private file system
The origin private file system (OPFS) is a storage endpoint provided as part of the File System API, which is private to the origin of the page and not visible to the user like the regular file system. It provides access to a special kind of file that is highly optimized for performance and offers in-place write access to its content.
The following are some possible use cases:
  * Apps with persistent uploader
    * When a file or directory is selected for upload, you can copy the file into a local sandbox and upload a chunk at a time.
    * The app can restart uploads after an interruption, such as the browser being closed or crashing, connectivity getting interrupted, or the computer getting shut down.
  * Video game or other apps with lots of media assets
    * The app downloads one or several large tarballs and expands them locally into a directory structure.
    * The app pre-fetches assets in the background, so the user can go to the next task or game level without waiting for a download.
  * Audio or photo editor with offline access or local cache (great for performance and speed)
    * The app can write to files in place (for example, overwriting just the ID3/EXIF tags and not the entire file).
  * Offline video viewer
    * The app can download large files (>1GB) for later viewing.
    * The app can access partially downloaded files (so that you can watch the first chapter of your DVD, even if the app is still downloading the rest of the content or if the app didn't complete the download because you had to run to catch a train).
  * Offline web mail client
    * The client downloads attachments and stores them locally.
    * The client caches attachments for later upload.


Read our Origin private file system for instructions on how to use it.
### Saving files
  * In the case of the asynchronous handles, use the `FileSystemWritableFileStream` interface. Once the data you'd like to save is in a format of `Blob`, `String` object, string literal or `buffer`, you can open a stream and save the data to a file. This can be the existing file or a new file.
  * In the case of the synchronous `FileSystemSyncAccessHandle`, you write changes to a file using the `write()` method. You can optionally also call `flush()` if you need the changes committed to disk at a specific time (otherwise you can leave the underlying operating system to handle this when it sees fit, which should be OK in most cases).


## Interfaces
`FileSystemChangeRecord` Experimental
    
Contains details of a single change observed by a `FileSystemObserver`.
`FileSystemHandle`
    
An object which represents a file or directory entry. Multiple handles can represent the same entry. For the most part you do not work with `FileSystemHandle` directly but rather its child interfaces `FileSystemFileHandle` and `FileSystemDirectoryHandle`.
`FileSystemFileHandle`
    
Provides a handle to a file system entry.
`FileSystemDirectoryHandle`
    
Provides a handle to a file system directory.
`FileSystemObserver` Experimental
    
Provides a mechanism to observe changes to selected files or directories.
`FileSystemSyncAccessHandle`
    
Provides a synchronous handle to a file system entry, which operates in-place on a single file on disk. The synchronous nature of the file reads and writes allows for higher performance for critical methods in contexts where asynchronous operations come with high overhead, e.g., WebAssembly. This class is only accessible inside dedicated Web Workers for files within the origin private file system.
`FileSystemWritableFileStream`
    
A `WritableStream` object with additional convenience methods, which operates on a single file on disk.
### Extensions to other interfaces
`Window.showDirectoryPicker()`
    
Displays a directory picker which allows the user to select a directory.
`Window.showOpenFilePicker()`
    
Shows a file picker that allows a user to select a file or multiple files.
`Window.showSaveFilePicker()`
    
Shows a file picker that allows a user to save a file.
`DataTransferItem.getAsFileSystemHandle()`
    
Returns a `Promise` that fulfills with a `FileSystemFileHandle` if the dragged item is a file, or fulfills with a `FileSystemDirectoryHandle` if the dragged item is a directory.
`StorageManager.getDirectory()`
    
Used to obtain a reference to a `FileSystemDirectoryHandle` object allowing access to a directory and its contents, stored in the origin private file system. Returns a `Promise` that fulfills with a `FileSystemDirectoryHandle` object.
## Examples
>
### Accessing files
The below code allows the user to choose a file from the file picker.
    
    async function getFile() {
      // Open file picker and destructure the result the first handle
      const [fileHandle] = await window.showOpenFilePicker();
      const file = await fileHandle.getFile();
      return file;
    }
    
The following asynchronous function presents a file picker and once a file is chosen, uses the `getFile()` method to retrieve the contents.
    
    const pickerOpts = {
      types: [
        {
          description: "Images",
          accept: {
            "image/*": [".png", ".gif", ".jpeg", ".jpg"],
          },
        },
      ],
      excludeAcceptAllOption: true,
      multiple: false,
    };
    
    async function getTheFile() {
      // Open file picker and destructure the result the first handle
      const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
    
      // get file contents
      const fileData = await fileHandle.getFile();
    }
    
### Accessing directories
The following example returns a directory handle with the specified name. If the directory does not exist, it is created.
    
    const dirName = "directoryToGetName";
    
    // assuming we have a directory handle: 'currentDirHandle'
    const subDir = currentDirHandle.getDirectoryHandle(dirName, { create: true });
    
The following asynchronous function uses `resolve()` to find the path to a chosen file, relative to a specified directory handle.
    
    async function returnPathDirectories(directoryHandle) {
      // Get a file handle by showing a file picker:
      const [handle] = await self.showOpenFilePicker();
      if (!handle) {
        // User cancelled, or otherwise failed to open a file.
        return;
      }
    
      // Check if handle exists inside our directory handle
      const relativePaths = await directoryHandle.resolve(handle);
    
      if (relativePaths === null) {
        // Not inside directory handle
      } else {
        // relativePaths is an array of names, giving the relative path
    
        for (const name of relativePaths) {
          // log each entry
          console.log(name);
        }
      }
    }
    
### Writing to files
The following asynchronous function opens the save file picker, which returns a `FileSystemFileHandle` once a file is selected. A writable stream is then created using the `FileSystemFileHandle.createWritable()` method.
A user defined `Blob` is then written to the stream which is subsequently closed.
    
    async function saveFile() {
      // create a new handle
      const newHandle = await window.showSaveFilePicker();
    
      // create a FileSystemWritableFileStream to write to
      const writableStream = await newHandle.createWritable();
    
      // write our file
      await writableStream.write(imgBlob);
    
      // close the file and write the contents to disk.
      await writableStream.close();
    }
    
The following show different examples of options that can be passed into the `write()` method.
    
    // just pass in the data (no options)
    writableStream.write(data);
    
    // writes the data to the stream from the determined position
    writableStream.write({ type: "write", position, data });
    
    // updates the current file cursor offset to the position specified
    writableStream.write({ type: "seek", position });
    
    // resizes the file to be size bytes long
    writableStream.write({ type: "truncate", size });
    
### Synchronously reading and writing files in OPFS
This example synchronously reads and writes a file to the origin private file system.
The following asynchronous event handler function is contained inside a Web Worker. On receiving a message from the main thread it:
  * Creates a synchronous file access handle.
  * Gets the size of the file and creates an `ArrayBuffer` to contain it.
  * Reads the file contents into the buffer.
  * Encodes the message and writes it to the end of the file.
  * Persists the changes to disk and closes the access handle.


    
    onmessage = async (e) => {
      // retrieve message sent to work from main script
      const message = e.data;
    
      // Get handle to draft file in OPFS
      const root = await navigator.storage.getDirectory();
      const draftHandle = await root.getFileHandle("draft.txt", { create: true });
      // Get sync access handle
      const accessHandle = await draftHandle.createSyncAccessHandle();
    
      // Get size of the file.
      const fileSize = accessHandle.getSize();
      // Read file content to a buffer.
      const buffer = new DataView(new ArrayBuffer(fileSize));
      const readBuffer = accessHandle.read(buffer, { at: 0 });
    
      // Write the message to the end of the file.
      const encoder = new TextEncoder();
      const encodedMessage = encoder.encode(message);
      const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });
    
      // Persist changes to disk.
      accessHandle.flush();
    
      // Always close FileSystemSyncAccessHandle if done.
      accessHandle.close();
    };
    
Note: In earlier versions of the spec, `close()`, `flush()`, `getSize()`, and `truncate()` were unergonomically specified as asynchronous methods. This has now been amended, but some browsers still support the asynchronous versions.
>
### api.FileSystemHandle
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`File_System_API` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
`isSameEntry` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
`kind` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
`move` No No 111 No 15.2 No 111 No 15.2 No No 15.2  
`name` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
`queryPermission` 86 86 No 72 No 109 No 74 No 21.0 109 No  
`remove` 110 110 No 96 No 110 No 74 No 21.0 110 No  
`requestPermission` 86 86 No 72 No 109 No 74 No 21.0 109 No  
### api.FileSystemFileHandle
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`File_System_API` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
`createSyncAccessHandle` 102 102 111 88 15.2 109 111 74 15.2 21.0 109 15.2  
`createWritable` 86 86 111 72 26 109 111 74 26 21.0 109 26  
`getFile` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
### api.FileSystemDirectoryHandle
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`@@asyncIterator` 86 86 111 72 16.4 109 111 74 16.4 21.0 109 16.4  
`File_System_API` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
`entries` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
`getDirectoryHandle` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
`getFileHandle` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
`keys` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
`removeEntry` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
`resolve` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
`values` 86 86 111 72 15.2 109 111 74 15.2 21.0 109 15.2  
### api.FileSystemWritableFileStream
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`File_System_API` 86 86 111 72 26 109 111 74 26 21.0 109 26  
`seek` 86 86 111 72 26 109 111 74 26 21.0 109 26  
`truncate` 86 86 111 72 26 109 111 74 26 21.0 109 26  
`write` 86 86 111 72 26 109 111 74 26 21.0 109 26  
### api.FileSystemSyncAccessHandle
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`File_System_API` 102 102 111 88 15.2 109 111 74 15.2 21.0 109 15.2  
`close` 102 102 111 88 15.2 109 111 74 15.2 21.0 109 15.2  
`flush` 102 102 111 88 15.2 109 111 74 15.2 21.0 109 15.2  
`getSize` 102 102 111 88 15.2 109 111 74 15.2 21.0 109 15.2  
`read` 102 102 111 88 15.2 109 111 74 15.2 21.0 109 15.2  
`truncate` 102 102 111 88 15.2 109 111 74 15.2 21.0 109 15.2  
`write` 102 102 111 88 15.2 109 111 74 15.2 21.0 109 15.2  
  * The File System Access API: simplifying access to local files
  * The origin private file system


# Clipboard API
The Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste), as well as to asynchronously read from and write to the system clipboard.
Note: Use this API in preference to the deprecated `document.execCommand()` method for accessing the clipboard.
Note: This API is not available in Web Workers (not exposed via `WorkerNavigator`).
## Concepts and usage
The system clipboard is a data buffer belonging to the operating system hosting the browser, which is used for short-term data storage and/or data transfers between documents or applications. It is usually implemented as an anonymous, temporary data buffer, sometimes called the paste buffer, that can be accessed from most or all programs within the environment via defined programming interfaces.
The Clipboard API allows users to programmatically read and write text and other kinds of data to and from the system clipboard in secure contexts, provided the user has met the criteria outlined in the Security considerations.
Events are fired as the result of `cut`, `copy`, and `paste` operations modifying the clipboard. The events have a default action, for example the `copy` action copies the current selection to the system clipboard by default. The default action can be overridden by the event handler — see each of the events for more information.
## Interfaces
`Clipboard` Secure context
    
Provides an interface for reading and writing text and data to or from the system clipboard. The specification refers to this as the 'Async Clipboard API'.
`ClipboardEvent`
    
Represents events providing information related to modification of the clipboard, that is `cut`, `copy`, and `paste` events. The specification refers to this as the 'Clipboard Event API'.
`ClipboardItem` Secure context
    
Represents a single item format, used when reading or writing data.
### Extensions to other interfaces
The Clipboard API extends the following APIs, adding the listed features.
`Navigator.clipboard` Read only Secure context
    
Returns a `Clipboard` object that provides read and write access to the system clipboard.
`Element` `copy` event
    
An event fired whenever the user initiates a copy action.
`Element` `cut` event
    
An event fired whenever the user initiates a cut action.
`Element` `paste` event
    
An event fired whenever the user initiates a paste action.
## Security considerations
The Clipboard API allows users to programmatically read and write text and other kinds of data to and from the system clipboard in secure contexts.
The specification requires that a user has recently interacted with the page in order to read from the clipboard (transient user activation is required). If the read operation is caused by user interaction with a browser or OS "paste element" (such as a context menu), the browser is expected to prompt the user for acknowledgement. For writing to the clipboard the specification expects that the page has been granted the Permissions API `clipboard-write` permission, and the browser may also require transient user activation. Browsers may place additional restrictions over use of the methods to access the clipboard.
Browser implementations have diverged from the specification. The differences are captured in the Browser compatibility section and the current state is summarized below:
Chromium browsers:
  * Reading requires the Permissions API `clipboard-read` permission be granted. Transient activation is not required.
  * Writing requires either the `clipboard-write` permission or transient activation. If the permission is granted, it persists, and further transient activation is not required.
  * The HTTP Permissions-Policy permissions `clipboard-read` and `clipboard-write` must be allowed for `<iframe>` elements that access the clipboard.
  * No persistent paste-prompt is displayed when a read operation is caused by a browser or OS "paste element".


Firefox & Safari:
  * Reading and writing require transient activation.
  * The paste-prompt is suppressed if reading same-origin clipboard content, but not cross-origin content.
  * The `clipboard-read` and `clipboard-write` permissions are not supported (and not planned to be supported) by Firefox or Safari.


Firefox Web Extensions:
  * Reading text is only available for extensions with the Web Extension `clipboardRead` permission. With this permission the extension does not require transient activation or a paste prompt.
  * Writing text is available in secure context and with transient activation. With the Web Extension `clipboardWrite` permission transient activation is not required.


## Examples
>
### Accessing the clipboard
The system clipboard is accessed through the `Navigator.clipboard` global.
This snippet fetches the text from the clipboard and appends it to the first element found with the class `editor`. Since `readText()` returns an empty string if the clipboard isn't text, this code is safe.
    
    navigator.clipboard
      .readText()
      .then(
        (clipText) => (document.querySelector(".editor").innerText += clipText),
      );
    
>
### api.Clipboard
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Clipboard_API` 66 79 63 53 13.1 66 63 47 13.4 9.0 66 13.4  
`read` 76The user must grant the `clipboard-read` permission. 79The user must grant the `clipboard-read` permission. 127["This method must be called within user gesture event handlers.", "Web extensions require the `clipboardRead` permission in manifest to read data. With this permission, the extension does not require a user interaction and does not display a paste prompt.", "A paste prompt is displayed when the clipboard is read. If the clipboard contains same-origin content, the prompt is suppressed."] 63The user must grant the `clipboard-read` permission. 13.1 76The user must grant the `clipboard-read` permission. 127["This method must be called within user gesture event handlers.", "Web extensions require the `clipboardRead` permission in manifest to read data. With this permission, the extension does not require a user interaction and does not display a paste prompt.", "A paste prompt is displayed when the clipboard is read. If the clipboard contains same-origin content, the prompt is suppressed."] 54The user must grant the `clipboard-read` permission. 13.4 12.0The user must grant the `clipboard-read` permission. 76The user must grant the `clipboard-read` permission. 13.4  
`readText` 66The user must grant the `clipboard-read` permission. 79The user must grant the `clipboard-read` permission. 125["This method must be called within user gesture event handlers.", "Web extensions require the `clipboardRead` permission in manifest to read data. With this permission, the extension does not require a user interaction and does not display a paste prompt.", "A paste prompt is displayed when the clipboard is read. If the clipboard contains same-origin content, the prompt is suppressed."] 53The user must grant the `clipboard-read` permission. 13.1 66The user must grant the `clipboard-read` permission. 125["This method must be called within user gesture event handlers.", "Web extensions require the `clipboardRead` permission in manifest to read data. With this permission, the extension does not require a user interaction and does not display a paste prompt.", "A paste prompt is displayed when the clipboard is read. If the clipboard contains same-origin content, the prompt is suppressed."] 47The user must grant the `clipboard-read` permission. 13.4 9.0The user must grant the `clipboard-read` permission. 66The user must grant the `clipboard-read` permission. 13.4  
`type_image-png` 76 79 127 63 13.1 76 127 54 13.4 12.0 76 13.4  
`type_text-html` 86 86 127 72 13.1 86 127 61 13.4 14.0 86 13.4  
`type_text-plain` 76 79 127 63 13.1 76 127 54 13.4 12.0 76 13.4  
`write` 76["From version 107, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 107, the user must grant the `clipboard-write` permission."] 79 127["This method must be called within user gesture event handlers.", "Web extensions require the `clipboardWrite` permission in manifest to read data. With this permission, the extension does not require a user interaction and does not display a paste prompt.", "A paste prompt is displayed when the clipboard is read. If the clipboard contains same-origin content, the prompt is suppressed."] 63["From version 93, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 93, the user must grant the `clipboard-write` permission."] 13.1 76["From version 107, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 107, the user must grant the `clipboard-write` permission."] 127["This method must be called within user gesture event handlers.", "Web extensions require the `clipboardWrite` permission in manifest to read data. With this permission, the extension does not require a user interaction and does not display a paste prompt.", "A paste prompt is displayed when the clipboard is read. If the clipboard contains same-origin content, the prompt is suppressed."] 54["From version 73, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 73, the user must grant the `clipboard-write` permission."] 13.4 12.0["From version 21.0, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 21.0, the user must grant the `clipboard-write` permission."] 76["From version 107, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 107, the user must grant the `clipboard-write` permission."] 13.4  
`writeText` 66["From version 107, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 107, the user must grant the `clipboard-write` permission."] 79["From version 107, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 107, the user must grant the `clipboard-write` permission."] 63["This method must be called within user gesture event handlers.", "Web extensions require the `clipboardRead` permission in manifest to read data. With this permission, the extension does not require a user interaction and does not display a paste prompt.", "A paste prompt is displayed when the clipboard is read. If the clipboard contains same-origin content, the prompt is suppressed."] 53["From version 93, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 93, the user must grant the `clipboard-write` permission."] 13.1This method must be called within user gesture event handlers. 66["From version 107, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 107, the user must grant the `clipboard-write` permission."] 63["This method must be called within user gesture event handlers.", "Web extensions require the `clipboardRead` permission in manifest to read data. With this permission, the extension does not require a user interaction and does not display a paste prompt.", "A paste prompt is displayed when the clipboard is read. If the clipboard contains same-origin content, the prompt is suppressed."] 47["From version 73, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 73, the user must grant the `clipboard-write` permission."] 13.4This method must be called within user gesture event handlers. 9.0["From version 21.0, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 21.0, the user must grant the `clipboard-write` permission."] 66["From version 107, this method must be called within user gesture event handlers, or the user must grant the `clipboard-write` permission.", "Before version 107, the user must grant the `clipboard-write` permission."] 13.4This method must be called within user gesture event handlers.  
### api.ClipboardEvent
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`ClipboardEvent` 58 17 22 45 10.1 58 22 43 10.3 7.0 58 10.3  
`Clipboard_API` 41 12 22["When pasting multiple files, only returns the first file. See bug 1954680.", "Before Firefox 140, when pasting multiple files, and the first file was not acceptable, returned no file. See bug 1961170."] 28 10.1 41 22["When pasting multiple files, only returns the first file. See bug 1954680.", "Before Firefox for Android 140, when pasting multiple files, and the first file was not acceptable, returned no file. See bug 1961170."] 28 10.3 4.0 41 10.3  
`clipboardData` 41 12 22 28 10.1 41 22 28 10.3 4.0 41 10.3  
### api.ClipboardItem
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`ClipboardItem` 13398–133Only accepts a `Blob` or a Promise resolving to a `Blob` as the item data.76–98Only accepts a `Blob` as the item data. See bug 40103226. 13398–133Only accepts a `Blob` or a Promise resolving to a `Blob` as the item data.79–98Only accepts a `Blob` as the item data. See bug 40103226. 127 11884–118Only accepts a `Blob` or a Promise resolving to a `Blob` as the item data.63–84Only accepts a `Blob` as the item data. See bug 40103226. 13.1 9884–98The `ClipboardItem` constructor only accepts a blob as the item data, but not strings or Promises that resolve to strings or blobs. See bug 40103226. 127 6860–68The `ClipboardItem` constructor only accepts a blob as the item data, but not strings or Promises that resolve to strings or blobs. See bug 40103226. 13.4 18.014.0–18.0The `ClipboardItem` constructor only accepts a blob as the item data, but not strings or Promises that resolve to strings or blobs. See bug 40103226. 9884–98The `ClipboardItem` constructor only accepts a blob as the item data, but not strings or Promises that resolve to strings or blobs. See bug 40103226. 13.4  
`Clipboard_API` 76 79 127 63 13.1 84 127 60 13.4 14.0 84 13.4  
`getType` 76 79 127 63 13.1 84 127 60 13.4 14.0 84 13.4  
`presentationStyle` No No 127 No 13.1 No 127 No 13.4 No No 13.4  
`supports_static` 121 121 127 107 18.4 121 127 81 18.4 25.0 121 18.4  
`type_image_svg_xml` 124 124 No 110 No 124 No 82 No 27.0 124 No  
`type_web` 104 104 No 90 No 104 No 71 No 20.0 104 No  
`types` 76 79 127 63 13.1 84 127 60 13.4 14.0 84 13.4  
  * Image support for Async Clipboard article


# Window Controls Overlay API
The Window Controls Overlay API gives Progressive Web Apps installed on desktop operating systems the ability to hide the default window title bar and display their own content over the full surface area of the app window, turning the control buttons (maximize, minimize, and close) into an overlay.
## Opting-in to the feature
Before using this feature, the following conditions must be true:
  * The Web App Manifest's `display_override` member must be set to `window-controls-overlay`.
  * The Progressive Web App must be installed on a desktop operating system.


## Main concepts
Progressive Web Apps installed on desktop devices can be displayed in standalone app windows, just like native apps. Here is what an application window looks like:
As seen above, the app window is made of two main areas:
  * The title bar area at the top.
  * The application content area at the bottom, which displays the HTML content from the PWA.


The title bar area contains the system-critical maximize, minimize, and close buttons (their position may vary across operating systems), the name of the application (which comes from the `<title>` HTML element in the page), and possibly user-agent-specific PWA buttons.
With the Window Controls Overlay feature, Progressive Web Apps can display their web content over the whole app window surface area. Because the window control buttons and user-agent-specific PWA buttons must remain visible, they get turned into an overlay displayed on top of the web content.
The part of the title bar that normally contains the application name is hidden, and the area that it normally occupies becomes available via the Window Controls Overlay API.
PWAs can use the API to position content in this area, and avoid having content hidden behind the control buttons overlay, similar to how web authors can account for the presence of notches on certain mobile devices.
## CSS environment variables
Progressive Web Apps can position their web content in the area that the title bar normally occupies by using the `titlebar-area-x`, `titlebar-area-y`, `titlebar-area-width`, and `titlebar-area-height` CSS environment variables. See Using env() to ensure content is not obscured by window control buttons in desktop PWAs.
## Interfaces
`WindowControlsOverlay` Experimental
    
Provides information about the visibility and geometry of the title bar and an event to know whenever it changes.
`WindowControlsOverlayGeometryChangeEvent` Experimental
    
Represents events providing information related to the desktop Progress Web App's title var region when its size or visibility changes.
### Extensions to other interfaces
`Navigator.windowControlsOverlay`
    
Returns the `WindowControlsOverlay` interface, which exposes information about the title bar geometry in desktop Progressive Web Apps.
  * Customize the window controls overlay of your PWA's title bar
  * Breaking Out of the Box
  * Display content in the title bar


# DOMMatrix
Note: This feature is available in Web Workers.
The `DOMMatrix` interface represents 4×4 matrices, suitable for 2D and 3D operations including rotation and translation. It is a mutable version of the `DOMMatrixReadOnly` interface. The interface is available inside web workers.
`WebKitCSSMatrix` and `SVGMatrix` are aliases to `DOMMatrix`.
DOMMatrixReadOnly  DOMMatrix 
## Constructor
`DOMMatrix()`
    
Creates and returns a new `DOMMatrix` object.
## Instance properties
This interface inherits properties from `DOMMatrixReadOnly`, though some of these properties are altered to be mutable.
`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`
    
Double-precision floating-point values representing each component of a 4×4 matrix, where `m11` through `m14` are the first column, `m21` through `m24` are the second column, and so forth.
`a`, `b`, `c`, `d`, `e`, `f`
    
Double-precision floating-point values representing the components of a 4×4 matrix which are required in order to perform 2D rotations and translations. These are aliases for specific components of a 4×4 matrix, as shown below.
`2D` `3D equivalent`  
`a` `m11`  
`b` `m12`  
`c` `m21`  
`d` `m22`  
`e` `m41`  
`f` `m42`  
## Instance methods
This interface includes the following methods, as well as the methods it inherits from `DOMMatrixReadOnly`.
`DOMMatrix.invertSelf()`
    
Modifies the matrix by inverting it. If the matrix can't be inverted, its components are all set to `NaN`, and `is2D` returns `false`.
`DOMMatrix.multiplySelf()`
    
Modifies the matrix by post-multiplying it with the specified `DOMMatrix`. This is equivalent to the dot product `A⋅B`, where matrix `A` is the source matrix and `B` is the matrix given as an input to the method. Returns itself.
`DOMMatrix.preMultiplySelf()`
    
Modifies the matrix by pre-multiplying it with the specified `DOMMatrix`. Returns itself.
`DOMMatrix.translateSelf()`
    
Modifies the matrix by applying the specified vector. The default vector is `[0, 0, 0]`. Returns itself.
`DOMMatrix.scaleSelf()`
    
Modifies the matrix by applying the specified scaling factors, with the center located at the specified origin. Also returns itself. By default, the scaling factor is `1` for all three axes, and the origin is `(0, 0, 0)`. Returns itself.
`DOMMatrix.scale3dSelf()`
    
Modifies the matrix by applying the specified scaling factor to all three axes, centered on the given origin. Returns itself.
`DOMMatrix.rotateSelf()`
    
Modifies the matrix by rotating itself around each axis by the specified number of degrees. Returns itself.
`DOMMatrix.rotateAxisAngleSelf()`
    
Modifies the matrix by rotating it by the specified angle around the given vector. Returns itself.
`DOMMatrix.rotateFromVectorSelf()`
    
Modifies the matrix by rotating it by the angle between the specified vector and `(1, 0)`. Returns itself.
`DOMMatrix.setMatrixValue()`
    
Replaces the contents of the matrix with the matrix described by the specified transform or transforms. Returns itself.
`DOMMatrix.skewXSelf()`
    
Modifies the matrix by applying the specified skew transformation along the X-axis. Returns itself.
`DOMMatrix.skewYSelf()`
    
Modifies the matrix by applying the specified skew transformation along the Y-axis. Returns itself.
## Static methods
This interface inherits methods from `DOMMatrixReadOnly`.
`fromFloat32Array()`
    
Creates a new mutable `DOMMatrix` object given an array of single-precision (32-bit) floating-point values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a `TypeError` exception is thrown.
`fromFloat64Array()`
    
Creates a new mutable `DOMMatrix` object given an array of double-precision (64-bit) floating-point values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a `TypeError` exception is thrown.
`fromMatrix()`
    
Creates a new mutable `DOMMatrix` object given an existing matrix or an object which provides the values for its properties.
## Usage notes
The matrix defined by the `DOMMatrix` interface is comprised of four rows of four columns each. While it's beyond the scope of this article to explain the mathematics involved, this 4×4 size is enough to describe any transformation you might apply to either 2D or 3D geometries.
Here are the positions of the 16 elements (m_11 through m_44) which comprise the 4×4 abstract matrix:
[m11m21m31m41m12m22m32m42m13m23m33m43m14m24m34m44]\left [ \begin{matrix} m_{11} & m_{21} & m_{31} & m_{41} \\\ m_{12} & m_{22} & m_{32} & m_{42} \\\ m_{13} & m_{23} & m_{33} & m_{43} \\\ m_{14} & m_{24} & m_{34} & m_{44} \end{matrix} \right ]
The `DOMMatrix` interface is designed with the intent that it will be used for all matrices within markup.
  * `DOMMatrixReadOnly.is2D`
  * `DOMMatrixReadOnly.isIdentity`


# GPUExternalTexture
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUExternalTexture` interface of the WebGPU API represents a wrapper object containing an `HTMLVideoElement` snapshot that can be used as a texture in GPU rendering operations.
A `GPUExternalTexture` object instance is created using `GPUDevice.importExternalTexture()`.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Examples
In the WebGPU samples Video Uploading sample, a `GPUExternalTexture` object (created via a `GPUDevice.importExternalTexture()` call) is used as the value of a bind group entry `resource`, specified when creating a `GPUBindGroup` via a `GPUDevice.createBindGroup()` call:
    
    // …
    const uniformBindGroup = device.createBindGroup({
      layout: pipeline.getBindGroupLayout(0),
      entries: [
        {
          binding: 1,
          resource: sampler,
        },
        {
          binding: 2,
          resource: device.importExternalTexture({
            source: video,
          }),
        },
      ],
    });
    // …
    
  * The WebGPU API


# GPU
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPU` interface of the WebGPU API is the starting point for using WebGPU. It can be used to return a `GPUAdapter` from which you can request devices, configure features and limits, and more.
The `GPU` object for the current context is accessed via the `Navigator.gpu` or `WorkerNavigator.gpu` properties.
## Instance properties
`wgslLanguageFeatures` Read only
    
A `WGSLLanguageFeatures` object that reports the WGSL language extensions supported by the WebGPU implementation.
## Instance methods
`requestAdapter()`
    
Returns a `Promise` that fulfills with a `GPUAdapter` object instance. From this you can request a `GPUDevice`, which is the primary interface for using WebGPU functionality.
`getPreferredCanvasFormat()`
    
Returns the optimal canvas texture format for displaying 8-bit depth, standard dynamic range content on the current system.
## Examples
>
### Requesting an adapter and a device
    
    async function init() {
      if (!navigator.gpu) {
        throw Error("WebGPU not supported.");
      }
    
      const adapter = await navigator.gpu.requestAdapter();
      if (!adapter) {
        throw Error("Couldn't request WebGPU adapter.");
      }
    
      const device = await adapter.requestDevice();
    
      // …
    }
    
### Configuring a GPUCanvasContext with the optimal texture format
    
    const canvas = document.querySelector("#gpuCanvas");
    const context = canvas.getContext("webgpu");
    
    context.configure({
      device,
      format: navigator.gpu.getPreferredCanvasFormat(),
      alphaMode: "premultiplied",
    });
    
  * The WebGPU API


# Web Crypto API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The Web Crypto API is an interface allowing a script to use cryptographic primitives in order to build systems using cryptography.
Some browsers implemented an interface called `Crypto` without having it well defined or being cryptographically sound. In order to avoid confusion, methods and properties of this interface have been removed from browsers implementing the Web Crypto API, and all Web Crypto API methods are available on a new interface: `SubtleCrypto`. The `Crypto.subtle` property gives access to an object implementing it.
Warning: The Web Crypto API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle.
Even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts.
Errors in security system design and implementation can make the security of the system completely ineffective.
Please learn and experiment, but don't guarantee or imply the security of your work before an individual knowledgeable in this subject matter thoroughly reviews it. The Crypto 101 Course can be a great place to start learning about the design and implementation of secure systems.
## Interfaces
`Crypto`
    
Provides basic cryptography features, such as a cryptographically strong random number generator, and access to cryptographic primitives via a `SubtleCrypto` object. An object of this type can be accessed in the global scope using `Window.crypto` or `WorkerGlobalScope.crypto`.
`SubtleCrypto`
    
Represents an object that provides low-level cryptographic functions for key generation, encryption, decryption, key wrapping and unwrapping, and so on.
`CryptoKey`
    
Represents a cryptographic key obtained from one of the `SubtleCrypto` methods `generateKey()`, `deriveKey()`, `importKey()`, or `unwrapKey()`.
### Dictionaries
`AesCbcParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.encrypt()`, `SubtleCrypto.decrypt()`, `SubtleCrypto.wrapKey()`, or `SubtleCrypto.unwrapKey()`, when using the AES-CBC algorithm.
`AesCtrParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.encrypt()`, `SubtleCrypto.decrypt()`, `SubtleCrypto.wrapKey()`, or `SubtleCrypto.unwrapKey()`, when using the AES-CTR algorithm.
`AesGcmParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.encrypt()`, `SubtleCrypto.decrypt()`, `SubtleCrypto.wrapKey()`, or `SubtleCrypto.unwrapKey()`, when using the AES-GCM algorithm.
`AesKeyGenParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.generateKey()`, when generating an AES key: that is, when the algorithm is identified as any of AES-CBC, AES-CTR, AES-GCM, or AES-KW.
`CryptoKeyPair`
    
Represents a public and private key pair used for an asymmetric cryptography algorithm.
`EcKeyGenParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.generateKey()`, when generating any elliptic-curve-based key pair: that is, when the algorithm is identified as either of ECDSA or ECDH.
`EcKeyImportParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.importKey()` or `SubtleCrypto.unwrapKey()`, when generating any elliptic-curve-based key pair: that is, when the algorithm is identified as either of ECDSA or ECDH.
`EcdhKeyDeriveParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.deriveKey()`, when using the ECDH algorithm.
`EcdsaParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.sign()` or `SubtleCrypto.verify()` when using the ECDSA algorithm.
`HkdfParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.deriveKey()`, when using the HKDF algorithm.
`HmacImportParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.importKey()` or `SubtleCrypto.unwrapKey()`, when generating a key for the HMAC algorithm.
`HmacKeyGenParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.generateKey()`, when generating a key for the HMAC algorithm.
`Pbkdf2Params`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.deriveKey()`, when using the PBKDF2 algorithm.
`RsaHashedImportParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.importKey()` or `SubtleCrypto.unwrapKey()`, when importing any RSA-based key pair: that is, when the algorithm is identified as any of RSASSA-PKCS1-v1_5, RSA-PSS, or RSA-OAEP.
`RsaHashedKeyGenParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.generateKey()`, when generating any RSA-based key pair: that is, when the algorithm is identified as any of RSASSA-PKCS1-v1_5, RSA-PSS, or RSA-OAEP.
`RsaOaepParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.encrypt()`, `SubtleCrypto.decrypt()`, `SubtleCrypto.wrapKey()`, or `SubtleCrypto.unwrapKey()`, when using the RSA_OAEP algorithm.
`RsaPssParams`
    
Represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.sign()` or `SubtleCrypto.verify()`, when using the RSA-PSS algorithm.
### Extensions to other interfaces
`Window.crypto`
    
Represents the `Crypto` object associated with the global object in the main thread scope.
`WorkerGlobalScope.crypto`
    
Represents `Crypto` object associated with the global object in worker scope.
# HTMLQuoteElement
The `HTMLQuoteElement` interface provides special properties and methods (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating quoting elements, like `<blockquote>` and `<q>`, but not the `<cite>` element.
EventTarget  Node  Element  HTMLElement  HTMLQuoteElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLQuoteElement.cite`
    
A string reflecting the `cite` HTML attribute, containing a URL for the source of the quotation.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML elements implementing this interface: `<blockquote>` and `<q>`, but not `<cite>`.


# SnapEvent
The `SnapEvent` interface defines the event object for the `scrollsnapchanging` and `scrollsnapchange` events. Respectively, these fire on a scroll container when the browser determines that a new scroll snap target is pending (will be selected when the current scroll gesture ends), and when a new snap target is selected.
These events can be used to run code in response to new elements being snapped to; `SnapEvent` exposes references to the element snapped to in the inline and/or block direction. The property values available on `SnapEvent` correspond directly to the value of the `scroll-snap-type` CSS property set on the scroll container:
  * If the snap axis is specified as `block` (or a physical axis value that equates to `block` in the current writing mode), only `snapTargetBlock` returns an element reference.
  * If the snap axis is specified as `inline` (or a physical axis value that equates to `inline` in the current writing mode), only `snapTargetInline` returns an element reference.
  * If the snap axis is specified as `both`, `snapTargetBlock` and `snapTargetInline` return an element reference.

Event  SnapEvent 
## Constructor
`SnapEvent()` Experimental
    
Creates a new `SnapEvent` object instance.
## Instance properties
Inherits properties from its parent, `Event`.
`snapTargetBlock` Read only Experimental
    
Returns a reference to the element snapped to in the block direction when the event fired, or `null` if scroll snapping only occurs in the inline direction so no element is snapped to in the block direction.
`snapTargetInline` Read only Experimental
    
Returns a reference to the element snapped to in the inline direction when the event fired, or `null` if scroll snapping only occurs in the block direction so no element is snapped to in the inline direction.
## Examples
>
###  `scrollsnapchanging` example
In the following `scrollsnapchanging` handler function snippet, we set the `snapTargetBlock` element's `class` attribute to `pending` using the `Element.className` property, which could be used to style the element differently when it becomes a pending snap target.
Note that this handler is intended to be set on a block-direction scroll container (vertically-scrolling if the page is set to a horizontal `writing-mode`), therefore only the `snapTargetBlock` element will change between multiple events firing. `SnapEvent.snapTargetInline` will return `null`, because no snapping occurs in the inline direction.
    
    scrollingElem.addEventListener("scrollsnapchanging", (event) => {
      // Set current pending snap target class to "pending"
      event.snapTargetBlock.className = "pending";
    
      // Logs the new pending block-direction snap target element
      console.log(event.snapTargetBlock);
    
      // Logs null; no inline snapping occurs
      console.log(event.snapTargetInline);
    });
    
###  `scrollsnapchange` example
In the following `scrollsnapchange` handler function snippet, we set a `selected` class on the `SnapEvent.snapTargetBlock` element, which could be used to style a newly-selected snap target to look like it has been selected (for example, with an animation).
    
    scrollingElem.addEventListener("scrollsnapchange", (event) => {
      event.snapTargetBlock.className = "selected";
    });
    
  * `scrollsnapchanging` event
  * `scrollsnapchange` event
  * CSS scroll snap module
  * Using scroll snap events
  * Scroll Snap Events on developer.chrome.com (2024)


# MediaStream Recording API
The MediaStream Recording API, sometimes referred to as the Media Recording API or the MediaRecorder API, is closely affiliated with the Media Capture and Streams API and the WebRTC API. The MediaStream Recording API makes it possible to capture the data generated by a `MediaStream` or `HTMLMediaElement` object for analysis, processing, or saving to disk. It's also surprisingly easy to work with.
## Concepts and usage
The MediaStream Recording API is comprised of a single major interface, `MediaRecorder`, which does all the work of taking the data from a `MediaStream` and delivering it to you for processing. The data is delivered by a series of `dataavailable` events, already in the format you specify when creating the `MediaRecorder`. You can then process the data further or write it to file as desired.
### Overview of the recording process
The process of recording a stream is simple:
  1. Set up a `MediaStream` or `HTMLMediaElement` (in the form of an `<audio>` or `<video>` element) to serve as the source of the media data.
  2. Create a `MediaRecorder` object, specifying the source stream and any desired options (such as the container's MIME type or the desired bit rates of its tracks).
  3. Set `ondataavailable` to an event handler for the `dataavailable` event; this will be called whenever data is available for you.
  4. Once the source media is playing and you've reached the point where you're ready to record video, call `MediaRecorder.start()` to begin recording.
  5. Your `dataavailable` event handler gets called every time there's data ready for you to do with as you will; the event has a `data` attribute whose value is a `Blob` that contains the media data. You can force a `dataavailable` event to occur, thereby delivering the latest sound to you so you can filter it, save it, or whatever.
  6. Recording stops automatically when the source media stops playing.
  7. You can stop recording at any time by calling `MediaRecorder.stop()`.


Note: Individual `Blob`s containing slices of the recorded media will not necessarily be individually playable. The media needs to be reassembled before playback.
If anything goes wrong during recording, an `error` event is sent to the `MediaRecorder`. You can listen for `error` events by setting up a `onerror` event handler.
Example here, we use an HTML Canvas as source of the `MediaStream`, and stop recording after 9 seconds.
    
    const canvas = document.querySelector("canvas");
    
    // Optional frames per second argument.
    const stream = canvas.captureStream(25);
    const recordedChunks = [];
    
    console.log(stream);
    const options = { mimeType: "video/webm; codecs=vp9" };
    const mediaRecorder = new MediaRecorder(stream, options);
    
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start();
    
    function handleDataAvailable(event) {
      console.log("data-available");
      if (event.data.size > 0) {
        recordedChunks.push(event.data);
        console.log(recordedChunks);
        download();
      } else {
        // …
      }
    }
    function download() {
      const blob = new Blob(recordedChunks, {
        type: "video/webm",
      });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      document.body.appendChild(a);
      a.style = "display: none";
      a.href = url;
      a.download = "test.webm";
      a.click();
      URL.revokeObjectURL(url);
    }
    
    // demo: to download after 9sec
    setTimeout((event) => {
      console.log("stopping");
      mediaRecorder.stop();
    }, 9000);
    
### Examining and controlling the recorder status
You can also use the properties of the `MediaRecorder` object to determine the state of the recording process, and its `pause()` and `resume()` methods to pause and resume recording of the source media.
If you need or want to check to see if a specific MIME type is supported, that's possible as well. Just call `MediaRecorder.isTypeSupported()`.
### Examining potential input sources
If your goal is to record camera and/or microphone input, you may wish to examine the available input devices before beginning the process of constructing the `MediaRecorder`. To do so, you'll need to call `navigator.mediaDevices.enumerateDevices()` to get a list of the available media devices. You can then examine that list and identify the potential input sources, and even filter the list based on desired criteria.
In this code snippet, `enumerateDevices()` is used to examine the available input devices, locate those which are audio input devices, and create `<option>` elements that are then added to a `<select>` element representing an input source picker.
    
    navigator.mediaDevices.enumerateDevices().then((devices) => {
      devices.forEach((device) => {
        const menu = document.getElementById("input-devices");
        if (device.kind === "audioinput") {
          const item = document.createElement("option");
          item.textContent = device.label;
          item.value = device.deviceId;
          menu.appendChild(item);
        }
      });
    });
    
Code similar to this can be used to let the user restrict the set of devices they wish to use.
### For more information
To learn more about using the MediaStream Recording API, see Using the MediaStream Recording API, which shows how to use the API to record audio clips. A second article, Recording a media element, describes how to receive a stream from an `<audio>` or `<video>` element and use the captured stream (in this case, recording it and saving it to a local disk).
## Interfaces
`BlobEvent`
    
Each time a chunk of media data is finished being recorded, it's delivered to consumers in `Blob` form using a `BlobEvent` of type `dataavailable`.
`MediaRecorder`
    
The primary interface that implements the MediaStream Recording API.
`MediaRecorderErrorEvent` Deprecated Non-standard
    
The interface that represents errors thrown by the MediaStream Recording API. Its `error` property is a `DOMException` that specifies that error occurred.
## Examples
>
### Basic video recording
    
    <button id="record-btn">Start</button>
    <video id="player" src="" autoplay controls></video>
    
    
    const recordBtn = document.getElementById("record-btn");
    const video = document.getElementById("player");
    
    let chunks = [];
    let isRecording = false;
    let mediaRecorder = null;
    
    const constraints = { video: true };
    
    recordBtn.addEventListener("click", async () => {
      if (!isRecording) {
        // Acquire a recorder on load
        if (!mediaRecorder) {
          const stream = await navigator.mediaDevices.getUserMedia(constraints);
          mediaRecorder = new MediaRecorder(stream);
          mediaRecorder.addEventListener("dataavailable", (e) => {
            console.log("data available");
            chunks.push(e.data);
          });
          mediaRecorder.addEventListener("stop", (e) => {
            console.log("onstop fired");
            const blob = new Blob(chunks, { type: "video/ogv; codecs=opus" });
            video.src = window.URL.createObjectURL(blob);
          });
          mediaRecorder.addEventListener("error", (e) => {
            console.error("An error occurred:", e);
          });
        }
        isRecording = true;
        recordBtn.textContent = "Stop";
        chunks = [];
        mediaRecorder.start();
        console.log("recorder started");
      } else {
        isRecording = false;
        recordBtn.textContent = "Start";
        mediaRecorder.stop();
        console.log("recorder stopped");
      }
    });
    
  * Media Capture and Streams API landing page
  * `MediaDevices.getUserMedia()`
  * simpl.info MediaStream Recording demo, by Sam Dutton
  * HTML5's Media Recorder API in Action on Chrome and Firefox
  * MediaRecorder polyfill for Safari and Edge
  * TutorRoom: HTML video capture/playback/download using getUserMedia and the MediaStream Recording API (source on GitHub)
  * Advanced media stream recorder sample
  * OpenLang: HTML video language lab web application using MediaDevices and the MediaStream Recording API for video recording (source on GitHub)
  * MediaStream Recorder API Now Available in Safari Technology Preview 73


# BluetoothRemoteGATTCharacteristic
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `BluetoothRemoteGattCharacteristic` interface of the Web Bluetooth API represents a GATT Characteristic, which is a basic data element that provides further information about a peripheral's service.
EventTarget  BluetoothRemoteGATTCharacteristic 
## Instance properties
`BluetoothRemoteGATTCharacteristic.service` Read only Experimental
    
Returns the `BluetoothRemoteGATTService` this characteristic belongs to.
`BluetoothRemoteGATTCharacteristic.uuid` Read only Experimental
    
Returns a string containing the UUID of the characteristic, for example `'00002a37-0000-1000-8000-00805f9b34fb'` for the Heart Rate Measurement characteristic.
`BluetoothRemoteGATTCharacteristic.properties` Read only Experimental
    
Returns the properties of this characteristic.
`BluetoothRemoteGATTCharacteristic.value` Read only Experimental
    
The currently cached characteristic value. This value gets updated when the value of the characteristic is read or updated via a notification or indication.
## Instance methods
`BluetoothRemoteGATTCharacteristic.getDescriptor()` Experimental
    
Returns a `Promise` that resolves to the first `BluetoothRemoteGATTDescriptor` for a given descriptor UUID.
`BluetoothRemoteGATTCharacteristic.getDescriptors()` Experimental
    
Returns a `Promise` that resolves to an `Array` of all `BluetoothRemoteGATTDescriptor` objects for a given descriptor UUID.
`BluetoothRemoteGATTCharacteristic.readValue()` Experimental
    
Returns a `Promise` that resolves to an `DataView` holding a duplicate of the `value` property if it is available and supported. Otherwise it throws an error.
`BluetoothRemoteGATTCharacteristic.writeValue()` Deprecated
    
Sets the `value` property to the bytes contained in a given `ArrayBuffer`, writes the characteristic value with optional response, and returns the resulting `Promise`.
`BluetoothRemoteGATTCharacteristic.writeValueWithResponse()` Experimental
    
Sets the `value` property to the bytes contained in a given `ArrayBuffer`, writes the characteristic value with required response, and returns the resulting `Promise`.
`BluetoothRemoteGATTCharacteristic.writeValueWithoutResponse()` Experimental
    
Sets the `value` property to the bytes contained in a given `ArrayBuffer`, writes the characteristic value without response, and returns the resulting `Promise`.
`BluetoothRemoteGATTCharacteristic.startNotifications()` Experimental
    
Returns a `Promise` that resolves when `navigator.bluetooth` is added to the active notification context.
`BluetoothRemoteGATTCharacteristic.stopNotifications()` Experimental
    
Returns a `Promise` that resolves when `navigator.bluetooth` is removed from the active notification context.
## Events
`characteristicvaluechanged` Experimental
    
Fired on a `BluetoothRemoteGATTCharacteristic` when its value changes.
# PressureObserver
Note: This feature is available in Web Workers, except for Service Workers.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PressureObserver` interface is part of the Compute Pressure API and is used to observe the pressure changes of system resources such as the CPU.
## Constructor
`PressureObserver()` Experimental
    
Creates and returns a new `PressureObserver` object.
## Static properties
`PressureObserver.knownSources` Read only Experimental
    
Returns an array of `source` values supported by the user agent.
## Instance methods
`PressureObserver.observe()` Experimental
    
Invokes the pressure observer's callback function when a pressure record for the specified `source` is observed.
`PressureObserver.unobserve()` Experimental
    
Stops the pressure observer callback from receiving pressure records from the specified `source`.
`PressureObserver.disconnect()` Experimental
    
Stops the pressure observer callback from receiving pressure records from all sources.
`PressureObserver.takeRecords()` Experimental
    
Returns the current list of pressure records stored in the pressure observer, emptying it out.
## Examples
>
### Log current pressure
This example creates a `PressureObserver` and takes action whenever there is a pressure change. The sample interval is set to 1000ms, meaning that there will be updates at most every second.
    
    function callback(records) {
      const lastRecord = records[records.length - 1];
      console.log(`Current pressure ${lastRecord.state}`);
      if (lastRecord.state === "critical") {
        // disable video feeds
      } else if (lastRecord.state === "serious") {
        // disable video filter effects
      } else {
        // enable all video feeds and filter effects
      }
    }
    
    try {
      const observer = new PressureObserver(callback);
      await observer.observe("cpu", {
        sampleInterval: 1000, // 1000ms
      });
    } catch (error) {
      // report error setting up the observer
    }
    
  * `PerformanceObserver`
  * `MutationObserver`
  * `ResizeObserver`
  * `IntersectionObserver`


# Channel Messaging API
Note: This feature is available in Web Workers.
The Channel Messaging API allows two separate scripts running in different browsing contexts attached to the same document (e.g., two IFrames, or the main document and an IFrame, two documents via a `SharedWorker`, or two workers) to communicate directly, passing messages between one another through two-way channels (or pipes) with a port at each end.
## Concepts and usage
A message channel is created using the `MessageChannel()` constructor. Once created, the two ports of the channel can be accessed through the `MessageChannel.port1` and `MessageChannel.port2` properties (which both return `MessagePort` objects.) The app that created the channel uses `port1`, and the app at the other end of the port uses `port2` — you send a message to `port2`, and transfer the port over to the other browsing context using `window.postMessage` along with two arguments (the message to send, and the object to transfer ownership of, in this case the port itself.)
When these transferable objects are transferred, they are no longer usable on the context they previously belonged to. A port, after it is sent, can no longer be used by the original context.
The other browsing context can listen for the message using `onmessage`, and grab the contents of the message using the event's `data` attribute. You could then respond by sending a message back to the original document using `MessagePort.postMessage`.
When you want to stop sending messages down the channel, you can invoke `MessagePort.close` to close the ports.
Find out more about how to use this API in Using channel messaging.
## Interfaces
`MessageChannel`
    
Creates a new message channel to send messages across.
`MessagePort`
    
Controls the ports on the message channel, allowing sending of messages from one port and listening out for them arriving at the other.
## Examples
  * We have published a channel messaging basic demo on GitHub (run it live too), which shows a really simple single message transfer between a page and an embedded `<iframe>`.
  * You can also see a multimessaging demo (run this live), which shows a slightly more complex setup that can send multiple messages between main page and IFrame.

>
### api.MessageChannel
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`MessageChannel` 2 12 41 10.6 5 18 41 11 4.2 1.0 4.4 4.2  
`Channel_Messaging_API` 2 12 41 10.6 5 18 41 11 4.2 1.0 4.4 4.2  
`port1` 2 12 41 10.6 5 18 41 11 4.2 1.0 4.4 4.2  
`port2` 2 12 41 10.6 5 18 41 11 4.2 1.0 4.4 4.2  
### api.MessagePort
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Channel_Messaging_API` 2 12 41 10.6 5 18 41 11 4.2 1.0 4.4 4.2  
`close` 2 12 41 10.6 5 18 41 11 4.2 1.0 4.4 4.2  
`message_event` 2 12 41 10.6 5 18 41 11.5 4.2 1.0 4.4 4.2  
`messageerror_event` 60 18 57 47 16.4 60 57 47 16.4 8.0 60 16.4  
`postMessage` 2 12 41 10.6 5 18 41 11 4.2 1.0 4.4 4.2  
`start` 2 12 41 10.6 5 18 41 11 4.2 1.0 4.4 4.2  
`worker_support` 4 12 41 ≤15 5 18 41 ≤14 4.2 1.0 4.4 4.2  
  * Using channel messaging
  * Web Workers API
  * Broadcast Channel API


# PageRevealEvent
The `PageRevealEvent` event object is made available inside handler functions for the `pagereveal` event.
During a cross-document navigation, it allows you to manipulate a related view transition (providing access to the relevant `ViewTransition` object) from the document being navigated to, if a view transition was triggered by the navigation.
Outside view transitions, this event is also useful for cases such as triggering a startup animation, or reporting a page view. It's equivalent to the first `Window.requestAnimationFrame()` run after a cross-document navigation, if you were to trigger `requestAnimationFrame()` in the `<head>` of the document. For example, if you ran the following `reveal()` function in the `<head>`:
    
    function reveal() {
      // Include startup animation here
    }
    /* This will fire in the first rendered frame after loading */
    requestAnimationFrame(() => reveal());
    
    /* This will fire if the page is restored from BFCache */
    window.onpagehide = () => requestAnimationFrame(() => reveal());
    
## Constructor
`PageRevealEvent()`
    
Creates a new `PageRevealEvent` object instance.
## Instance properties
`viewTransition` Read only
    
Contains a `ViewTransition` object representing the active view transition for the cross-document navigation.
## Examples
    
    window.addEventListener("pagereveal", async (e) => {
      // If the "from" history entry does not exist, return
      if (!navigation.activation.from) return;
    
      // Only run this if an active view transition exists
      if (e.viewTransition) {
        const fromUrl = new URL(navigation.activation.from.url);
        const currentUrl = new URL(navigation.activation.entry.url);
    
        // Went from profile page to homepage
        // ~> Set VT names on the relevant list item
        if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {
          const profile = extractProfileNameFromUrl(fromUrl);
    
          // Set view-transition-name values on the elements to animate
          document.querySelector(`#${profile} span`).style.viewTransitionName =
            "name";
          document.querySelector(`#${profile} img`).style.viewTransitionName =
            "avatar";
    
          // Remove names after snapshots have been taken
          // so that we're ready for the next navigation
          await e.viewTransition.ready;
          document.querySelector(`#${profile} span`).style.viewTransitionName =
            "none";
          document.querySelector(`#${profile} img`).style.viewTransitionName =
            "none";
        }
    
        // Went to profile page
        // ~> Set VT names on the main title and image
        if (isProfilePage(currentUrl)) {
          // Set view-transition-name values on the elements to animate
          document.querySelector(`#detail main h1`).style.viewTransitionName =
            "name";
          document.querySelector(`#detail main img`).style.viewTransitionName =
            "avatar";
    
          // Remove names after snapshots have been taken
          // so that we're ready for the next navigation
          await e.viewTransition.ready;
          document.querySelector(`#detail main h1`).style.viewTransitionName =
            "none";
          document.querySelector(`#detail main img`).style.viewTransitionName =
            "none";
        }
      }
    });
    
Note: See List of Chrome DevRel team members for the live demo this code is taken from.
  * View Transition API


# TextEncoderStream
Note: This feature is available in Web Workers.
The `TextEncoderStream` interface of the Encoding API converts a stream of strings into bytes in the UTF-8 encoding. It is the streaming equivalent of `TextEncoder`.
## Constructor
`TextEncoderStream()`
    
Creates a new `TextEncoderStream` object.
## Instance properties
`TextEncoderStream.encoding` Read only
    
Always returns `"utf-8"`.
`TextEncoderStream.readable` Read only
    
Returns the `ReadableStream` instance controlled by this object.
`TextEncoderStream.writable` Read only
    
Returns the `WritableStream` instance controlled by this object.
## Examples
Examples of streaming structured data and HTML
  * `TextDecoderStream`
  * Streams API Concepts
  * Experimenting with the Streams API
  * Streaming requests with the fetch API, developer.chrome.com (2020)


# MediaQueryList
A `MediaQueryList` object stores information on a media query applied to a document, with support for both immediate and event-driven matching against the state of the document.
You can create a `MediaQueryList` by calling `matchMedia()` on the `window` object. The resulting object handles sending notifications to listeners when the media query state changes (i.e., when the media query test starts or stops evaluating to `true`).
This is very useful for adaptive design, since this makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, and allows you to programmatically make changes to a document based on media query status.
EventTarget  MediaQueryList 
## Instance properties
The `MediaQueryList` interface inherits properties from its parent interface, `EventTarget`.
`matches` Read only
    
A boolean value that returns `true` if the `document` currently matches the media query list, or `false` if not.
`media` Read only
    
A string representing a serialized media query.
## Instance methods
The `MediaQueryList` interface inherits methods from its parent interface, `EventTarget`.
`addListener()` Deprecated
    
Adds to the `MediaQueryList` a callback which is invoked whenever the media query status—whether or not the document matches the media queries in the list—changes. This method exists primarily for backward compatibility; if possible, you should instead use `addEventListener()` to watch for the `change` event.
`removeListener()` Deprecated
    
Removes the specified listener callback from the callbacks to be invoked when the `MediaQueryList` changes media query status, which happens any time the document switches between matching and not matching the media queries listed in the `MediaQueryList`. This method has been kept for backward compatibility; if possible, you should generally use `removeEventListener()` to remove change notification callbacks (which should have previously been added using `addEventListener()`).
## Events
The following events are delivered to `MediaQueryList` objects:
`change`
    
Sent to the `MediaQueryList` when the result of running the media query against the document changes. For example, if the media query is `(width >= 400px)`, the `change` event is fired any time the width of the document's viewport changes such that its width moves across the 400px boundary in either direction.
## Examples
This example creates a `MediaQueryList` and then sets up a listener to detect when the media query status changes, running a custom function when it does to change the appearance of the page.
    
    const para = document.querySelector("p");
    const mql = window.matchMedia("(width <= 600px)");
    
    function screenTest(e) {
      if (e.matches) {
        /* the viewport is 600 pixels wide or less */
        para.textContent = "This is a narrow screen — less than 600px wide.";
        document.body.style.backgroundColor = "red";
      } else {
        /* the viewport is more than 600 pixels wide */
        para.textContent = "This is a wide screen — more than 600px wide.";
        document.body.style.backgroundColor = "blue";
      }
    }
    
    mql.addEventListener("change", screenTest);
    
Note: You can find this example on GitHub (see the source code, and also see it running live).
You can find other examples on the individual property and method pages.
  * Media queries
  * Using media queries from code
  * `window.matchMedia()`
  * `MediaQueryListEvent`
  * The article `Window.devicePixelRatio` also has a useful example


# DeviceMotionEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `DeviceMotionEvent` interface of the Device Orientation Events provides web developers with information about the speed of changes for the device's position and orientation.
Warning: Currently, Firefox and Chrome do not handle the coordinates the same way. Take care about this while using them.
Event  DeviceMotionEvent 
## Constructor
`DeviceMotionEvent()`
    
Creates a new `DeviceMotionEvent`.
## Instance properties
`DeviceMotionEvent.acceleration` Read only
    
An object giving the acceleration of the device on the three axis X, Y and Z. Acceleration is expressed in m/s².
`DeviceMotionEvent.accelerationIncludingGravity` Read only
    
An object giving the acceleration of the device on the three axis X, Y and Z with the effect of gravity. Acceleration is expressed in m/s².
`DeviceMotionEvent.rotationRate` Read only
    
An object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. Rotation rate is expressed in degrees per seconds.
`DeviceMotionEvent.interval` Read only
    
A number representing the interval of time, in milliseconds, at which data is obtained from the device.
## Example
    
    window.addEventListener("devicemotion", (event) => {
      console.log(`${event.acceleration.x} m/s2`);
    });
    
  * Detecting device orientation
  * Orientation and motion data explained
  * `DeviceOrientationEvent`
  * `deviceorientation` event
  * `deviceorientationabsolute` event
  * `devicemotion` event
  * `Accelerometer`
  * `LinearAccelerationSensor`


# CSSTransformValue
The `CSSTransformValue` interface of the CSS Typed Object Model API represents `transform-list` values as used by the CSS `transform` property.
CSSStyleValue  CSSTransformValue 
## Interfaces based on CSSTransformValue
Below is a list of interfaces based on the `CSSTransformValue` interface.
  * `CSSTranslate`
  * `CSSRotate`
  * `CSSScale`
  * `CSSSkew`
  * `CSSSkewX`
  * `CSSSkewY`
  * `CSSPerspective`
  * `CSSMatrixComponent`


## Constructor
`CSSTransformValue()`
    
Creates a new `CSSTransformValue` object.
## Instance properties
`CSSTransformValue.length` Read only
    
Returns how many transform components are contained within the `CSSTransformValue`.
`CSSTransformValue.is2D` Read only
    
Returns a boolean indicating whether the transform is 2D or 3D.
## Instance methods
Inherits methods from its ancestor `CSSStyleValue`.
`CSSTransformValue.toMatrix()`
    
Returns a new `DOMMatrix` object.
`CSSTransformValue.entries()`
    
Returns an array of a given object's own enumerable property `[key, value]` pairs in the same order as that provided by a `for...in` loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
`CSSTransformValue.forEach()`
    
Executes a provided function once for each element of the `CSSTransformValue` object.
`CSSTransformValue.keys()`
    
Returns a new array iterator object that contains the keys for each index in the `CSSTransformValue` object.
`CSSTransformValue.values()`
    
Returns a new array iterator object that contains the values for each index in the `CSSTransformValue` object.
## Examples
To Do.
# StereoPannerNode
The `StereoPannerNode` interface of the Web Audio API represents a simple stereo panner node that can be used to pan an audio stream left or right. It is an `AudioNode` audio-processing module that positions an incoming audio stream in a stereo image using a low-cost equal-power panning algorithm.
The `pan` property takes a unitless value between `-1` (full left pan) and `1` (full right pan). This interface was introduced as a much simpler way to apply a simple panning effect than having to use a full `PannerNode`.
EventTarget  AudioNode  StereoPannerNode 
Number of inputs `1`  
Number of outputs `1`  
Channel count mode `"clamped-max"`  
Channel count `2`  
Channel interpretation `"speakers"`  
## Constructor
`StereoPannerNode()`
    
Creates a new instance of a `StereoPannerNode` object.
## Instance properties
Inherits properties from its parent, `AudioNode`.
`StereoPannerNode.pan` Read only
    
An a-rate `AudioParam` representing the amount of panning to apply.
## Instance methods
No specific method; inherits methods from its parent, `AudioNode`.
## Example
See `BaseAudioContext.createStereoPanner()` for example code.
  * Using the Web Audio API


# CSS Font Loading API
Note: This feature is available in Web Workers.
The CSS Font Loading API provides events and interfaces for dynamically loading font resources.
## Concepts and usage
CSS stylesheets allow authors to use custom fonts; specifying fonts to download using the `@font-face` rule, and applying them to elements with the `font-family` property. The point at which a font is downloaded is controlled by the user agent. Most agents only fetch and load fonts when they are first needed, which can result in a perceptible delay.
The CSS Font Loading API overcomes this problem by letting authors control and track when a font face is fetched and loaded, and when it is added to the font face set owned by the document or worker. Adding a font face to the document or worker font face set allows the user agent to fetch and load the associated font resource automatically if needed. A font face can be loaded either before or after it is added to a font face set, but it must be added to the set before it can be used for drawing.
Font faces are defined in `FontFace` objects, which specify a binary or URL font source and other properties of font in much the same way as the CSS `@font-face` rule. `FontFace` objects are added to the document or worker `FontFaceSet` using `Document.fonts` and `WorkerGlobalScope.fonts`, respectively. Authors can trigger download of fonts using either `FontFace` or `FontFaceSet`, and monitor loading completion. `FontFaceSet` can additionally be used to determine when all fonts required by a page have loaded and the document layout is complete.
The `FontFace.status` property indicates the font face loading status: `unloaded`, `loading`, `loaded` or `failed`. This status is initially `unloaded`. It is set to `loading` when the file is being downloaded or the font data is being processed, and to `failed` if the font definition is invalid or the font data cannot be loaded. The status is set to `loaded` when the font face data has been successfully fetched (if needed) and loaded.
### Defining a font face
Font faces are created using the `FontFace` constructor, which takes as parameters: the font family, the font source, and optional descriptors. The format and grammar of these arguments is the same as the equivalent `@font-face` definition.
The font source can either be binary data in an `ArrayBuffer` or a font resource at a URL. A typical font face definition using a URL source might be as shown below. Note that the `url()` function is required for URL font sources.
    
    const font = new FontFace("my-font", 'url("my-font.woff")', {
      style: "italic",
      weight: "400",
      stretch: "condensed",
    });
    
Note: As with `@font-face`, some descriptors represent the expected data in the font data and are used for font matching, while others actually set/define properties of the generated font face. For example, setting the `style` to "italic" indicates that the file contains italic fonts; it is up to the author to specify a file for which this is true.
Font faces with a binary source are automatically loaded if the font definition is valid and the font data can be loaded — `FontFace.status` is set to `loaded` on success and `failed` otherwise. Font faces with a URL source are validated but not automatically loaded — `FontFace.status` is set `unloaded` if the font face definition is valid and `failed` otherwise.
### Adding a font to a document or worker
Font faces are usually added to the document or worker `FontFaceSet` to allow the user agent to automatically load the font when needed, and must be added in order for the font to be used for rendering text.
The code below shows a font face being added to the document.
    
    // Define a FontFace
    const font = new FontFace("my-font", 'url("my-font.woff")', {
      style: "italic",
      weight: "400",
      stretch: "condensed",
    });
    
    // Add to the document.fonts (FontFaceSet)
    document.fonts.add(font);
    
### Loading a font
A font face can be loaded manually by calling `FontFace.load()`, or by calling `FontFaceSet.load()` if the font face has been added to the `FontFaceSet`. Note that attempting to load an already-loaded font has no effect.
The code below shows how to define a font face, add it to the document fonts, and then initiate a font load.
    
    // Define a FontFace
    const font = new FontFace("my-font", 'url("my-font.woff")');
    
    // Add to the document.fonts (FontFaceSet)
    document.fonts.add(font);
    
    // Load the font
    font.load();
    
    // Wait until the fonts are all loaded
    document.fonts.ready.then(() => {
      // Use the font to render text (for example, in a canvas)
    });
    
Note that the `font.load()` returns a promise, so we could have handled the completion of font loading by chaining `then` afterwards. Using `document.fonts.ready` can be better in some circumstances, as it is only called when all fonts in the document have been resolved and layout is complete.
## Interfaces
`FontFace`
    
Represents a single usable font face.
`FontFaceSet`
    
An interface loading font faces and checking their download statuses.
`FontFaceSetLoadEvent`
    
Fired whenever a `FontFaceSet` loads.
## Examples
>
### Basic font loading
This is a very simple example that shows a font being loaded from Google Fonts and used to draw text to a canvas. The example also logs the `status` immediately after creation and after loading.
#### HTML
This code defines a canvas for drawing to and a textarea for logging.
    
    <canvas id="js-canvas"></canvas>
    <textarea id="log" rows="3" cols="100"></textarea>
    
#### JavaScript
First we get the element to which we will log, and the canvas that will be used to render text in the downloaded font.
    
    const log = document.getElementById("log");
    
    const canvas = document.getElementById("js-canvas");
    canvas.width = 650;
    canvas.height = 75;
    
Next we define a `FontFace` that has a URL source that is a Google Font and add it to `document.fonts`. We then log the font status, which should be `unloaded`.
    
    const bitterFontFace = new FontFace(
      "FontFamily Bitter",
      'url("https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2")',
    );
    document.fonts.add(bitterFontFace);
    log.textContent += `Bitter font: ${bitterFontFace.status}\n`; // > Bitter font: unloaded
    
Then we call the `FontFace.load()` method to load the font face, and wait on the returned promise. Once the promise resolves we log the loaded status (which should be `loaded`) and draw text in the loaded font to the canvas.
    
    bitterFontFace.load().then(
      () => {
        log.textContent += `Bitter font: ${bitterFontFace.status}\n`; // > Bitter font: loaded
    
        const ctx = canvas.getContext("2d");
        ctx.font = '36px "FontFamily Bitter"';
        ctx.fillText("Bitter font loaded", 20, 50);
      },
      (err) => {
        console.error(err);
      },
    );
    
Note that we could also have waited on the promise returned by the `FontFace.loaded` property, or on `FontFaceSet.ready`.
#### Result
The result is shown below. It should show the name of the font drawn on the canvas in the downloaded font, and a log showing the load status before and after loading.
### Font loading with events
This example is similar to the previous one, except that it uses `FontFaceSet.load()` to load the font. It also demonstrates how to listen for font loading events.
#### HTML
    
    <canvas id="js-canvas"></canvas>
    <textarea id="log" rows="25" cols="100"></textarea>
    
#### JavaScript
The code below defines a canvas context for drawing text, defines a font face, and adds it to the document font face set.
    
    const log = document.getElementById("log");
    
    const canvas = document.getElementById("js-canvas");
    canvas.width = 650;
    canvas.height = 75;
    const ctx = canvas.getContext("2d");
    
    const oxygenFontFace = new FontFace(
      "FontFamily Oxygen",
      'url("https://fonts.gstatic.com/s/oxygen/v5/qBSyz106i5ud7wkBU-FrPevvDin1pK8aKteLpeZ5c0A.woff2")',
    );
    document.fonts.add(oxygenFontFace);
    log.textContent += `Oxygen status: ${oxygenFontFace.status}\n`;
    
Next we use `load()` on the font face set to load the font, specifying which of the fonts to load. The method returns a `Promise`. If the promise is resolved we use the font to draw some text. If it is rejected the error is logged.
    
    document.fonts.load("36px FontFamily Oxygen").then(
      (fonts) => {
        log.textContent += `Bitter font: ${fonts}\n`; // > Oxygen font: loaded
        log.textContent += `Bitter font: ${oxygenFontFace.status}\n`; // > Oxygen font: loaded
        ctx.font = '36px "FontFamily Oxygen"';
        ctx.fillText("Oxygen font loaded", 20, 50);
      },
      (err) => {
        console.error(err);
      },
    );
    
Instead of waiting on a promise we might instead use events to track the font loading operation. The code below listens for the `loading` and `loadingerror` events and logs the number of font faces for each case. In the `loadingdone` event listener we additionally iterate through the font faces and log the family names.
    
    document.fonts.addEventListener("loading", (event) => {
      log.textContent += `loading_event: ${event.fontfaces.length}\n`;
    });
    document.fonts.addEventListener("loadingerror", (event) => {
      log.textContent += `loadingerror_event: ${event.fontfaces.length}\n`;
    });
    document.fonts.addEventListener("loadingdone", (event) => {
      log.textContent += `loadingdone_event: ${event.fontfaces.length}\n`;
      event.fontfaces.forEach((value) => {
        log.textContent += `  fontface: ${value.family}\n`;
      });
    });
    
The last bit of code demonstrates how you can monitor the completion of font loading using the promise returned by `FontFaceSet.ready`. Unlike the other mechanisms this returns when all fonts defined in the document have been downloaded and layout is complete.
When the promise resolves we iterate the values in the document's font faces.
    
    document.fonts.ready.then(() => {
      log.textContent += `\nFontFaces in document: ${document.fonts.size}.\n`;
    
      for (const fontFace of document.fonts.values()) {
        log.textContent += "FontFace:\n";
        for (const property in fontFace) {
          log.textContent += `  ${property}: ${fontFace[property]}\n`;
        }
      }
    });
    
#### Result
The output below shows the text drawn in "Oxygen" font. This also shows logging from the events and when the promise returned by `document.fonts.ready` resolves.
# WakeLock
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `WakeLock` interface of the Screen Wake Lock API can be used to request a lock that prevents device screens from dimming or locking when an application needs to keep running.
This interface, and hence the system wake lock, is exposed through the `Navigator.wakeLock` property.
## Instance methods
`request()`
    
Returns a `Promise` that fulfills with a `WakeLockSentinel` object if the screen wake lock is granted.
## Examples
The following code `awaits` the request for a `WakeLockSentinel` object, and continues if the request is granted.
The `WakeLock.request()` method is wrapped in a `try...catch` statement to catch cases when the promise might be rejected rejected, such as due to low device power.
    
    try {
      const wakeLock = await navigator.wakeLock.request("screen");
    } catch (err) {
      // the wake lock request fails - usually system related, such being low on battery
      console.log(`${err.name}, ${err.message}`);
    }
    
Note that the screen wake lock may be revoked by the device after it has been granted. The returned `WakeLockSentinel` can be used to check the status of the lock, and/or to manually cancel a held screen wake lock.
  * Stay awake with the Screen Wake Lock API


# Presentation API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Presentation API lets a user agent (such as a Web browser) effectively display web content through large presentation devices such as projectors and network-connected televisions. Supported types of multimedia devices include both displays which are wired using HDMI, DVI, or the like, or wireless, using DLNA, Chromecast, AirPlay, or Miracast.
In general, a web page uses the Presentation Controller API to specify the web content to be rendered on presentation device and initiate the presentation session. With Presentation Receiver API, the presenting web content obtains the session status. With providing both the controller page and the receiver one with a messaged-based channel, a Web developer can implement the interaction between these two pages.
Depending on the connection mechanism provided by the presentation device, any controller- and receiver page can be rendered by the same user agent, or by separated user agents.
  * For 1-UA mode devices, both pages are loaded by the same user agent. However, rendering result of the receiver page will be sent to the presentation device via supported remote rendering protocol.
  * For 2-UAs mode device, the receiver page is loaded directly on the presentation device. Controlling user agent communicates with presentation device via supported presentation control protocol, to control the presentation session and to transmit the message between two pages.


## Interfaces
`Presentation`
    
In controlling browsing context, the `Presentation` interface provides a mechanism to override the browser default behavior of launching presentation to external screen. In receiving browsing context, `Presentation` interface provides the access to the available presentation connections.
`PresentationRequest`
    
Initiates or reconnects to a presentation made by a controlling browsing context.
`PresentationAvailability`
    
A PresentationAvailability object is associated with available presentation displays and represents the presentation display availability for a presentation request.
`PresentationConnectionAvailableEvent`
    
The `PresentationConnectionAvailableEvent` is fired on a `PresentationRequest` when a connection associated with the object is created.
`PresentationConnection`
    
Each presentation connection is represented by a PresentationConnection object.
`PresentationConnectionCloseEvent`
    
A `PresentationConnectionCloseEvent` is fired when a presentation connection enters a `closed` state.
`PresentationReceiver`
    
The PresentationReceiver allows a receiving browsing context to access the controlling browsing contexts and communicate with them.
`PresentationConnectionList`
    
`PresentationConnectionList` represents the collection of non-terminated presentation connections. It is also a monitor for the event of new available presentation connection.
## Example
Example codes below highlight the usage of main features of the Presentation API: `controller.html` implements the controller and `presentation.html` implements the presentation. Both pages are served from the domain `https://example.org` (`https://example.org/controller.html` and `https://example.org/presentation.html`). These examples assume that the controlling page is managing one presentation at a time. Please refer to the comments in the code examples for further details.
### Monitor availability of presentation displays
In `controller.html`:
    
    <button id="presentBtn" class="hidden">Present</button>
    
    
    .hidden {
      display: none;
    }
    
    
    // The Present button is visible if at least one presentation display is available
    const presentBtn = document.getElementById("presentBtn");
    
    // It is also possible to use relative presentation URL e.g. "presentation.html"
    const presUrls = [
      "https://example.com/presentation.html",
      "https://example.net/alternate.html",
    ];
    
    // Show or hide present button depending on display availability
    const handleAvailabilityChange = (available) => {
      if (available) {
        presentBtn.classList.remove("hidden");
      } else {
        presentBtn.classList.add("hidden");
      }
    };
    
    // Promise is resolved as soon as the presentation display availability is known.
    const request = new PresentationRequest(presUrls);
    request
      .getAvailability()
      .then((availability) => {
        // availability.value may be kept up-to-date by the controlling UA as long
        // as the availability object is alive. It is advised for the web developers
        // to discard the object as soon as it's not needed.
        handleAvailabilityChange(availability.value);
        availability.onchange = () => {
          handleAvailabilityChange(availability.value);
        };
      })
      .catch(() => {
        // Availability monitoring is not supported by the platform, so discovery of
        // presentation displays will happen only after request.start() is called.
        // Pretend the devices are available for simplicity; or, one could implement
        // a third state for the button.
        handleAvailabilityChange(true);
      });
    
### Starting a new presentation
In `controller.html`:
    
    presentBtn.onclick = () => {
      // Start new presentation.
      request
        .start()
        // The connection to the presentation will be passed to setConnection on success.
        .then(setConnection);
      // Otherwise, the user canceled the selection dialog or no screens were found.
    };
    
### Reconnect to a presentation
In the `controller.html` file:
    
    <button id="reconnectBtn" class="hidden">Reconnect</button>
    
    
    const reconnect = () => {
      const presId = localStorage.getItem("presId");
      // presId is mandatory when reconnecting to a presentation.
      if (presId) {
        request
          .reconnect(presId)
          // The new connection to the presentation will be passed to
          // setConnection on success.
          .then(setConnection);
        // No connection found for presUrl and presId, or an error occurred.
      }
    };
    // On navigation of the controller, reconnect automatically.
    reconnect();
    // Or allow manual reconnection.
    reconnectBtn.onclick = reconnect;
    
### Presentation initiation by the controlling UA
In the `controller.html` file:
    
    navigator.presentation.defaultRequest = new PresentationRequest(presUrls);
    navigator.presentation.defaultRequest.onconnectionavailable = (evt) => {
      setConnection(evt.connection);
    };
    
Setting `presentation.defaultRequest` allows the page to specify the `PresentationRequest` to use when the controlling UA initiates a presentation.
### Monitor connection's state and exchange data
In `controller.html`:
    
    <button id="disconnectBtn" class="hidden">Disconnect</button>
    <button id="stopBtn" class="hidden">Stop</button>
    <button id="reconnectBtn" class="hidden">Reconnect</button>
    
    
    let connection;
    
    // The Disconnect and Stop buttons are visible if there is a connected presentation
    const stopBtn = document.querySelector("#stopBtn");
    const reconnectBtn = document.querySelector("#reconnectBtn");
    const disconnectBtn = document.querySelector("#disconnectBtn");
    
    stopBtn.onclick = () => {
      connection?.terminate();
    };
    
    disconnectBtn.onclick = () => {
      connection?.close();
    };
    
    function setConnection(newConnection) {
      // Disconnect from existing presentation, if not attempting to reconnect
      if (
        connection &&
        connection !== newConnection &&
        connection.state !== "closed"
      ) {
        connection.onclose = undefined;
        connection.close();
      }
    
      // Set the new connection and save the presentation ID
      connection = newConnection;
      localStorage.setItem("presId", connection.id);
    
      function showConnectedUI() {
        // Allow the user to disconnect from or terminate the presentation
        stopBtn.classList.remove("hidden");
        disconnectBtn.classList.remove("hidden");
        reconnectBtn.classList.add("hidden");
      }
    
      function showDisconnectedUI() {
        disconnectBtn.classList.add("hidden");
        stopBtn.classList.add("hidden");
        if (localStorage.getItem("presId")) {
          // If there is a presId in localStorage, allow the user to reconnect
          reconnectBtn.classList.remove("hidden");
        } else {
          reconnectBtn.classList.add("hidden");
        }
      }
    
      // Monitor the connection state
      connection.onconnect = () => {
        showConnectedUI();
    
        // Register message handler
        connection.onmessage = (message) => {
          console.log(`Received message: ${message.data}`);
        };
    
        // Send initial message to presentation page
        connection.send("Say hello");
      };
    
      connection.onclose = () => {
        connection = null;
        showDisconnectedUI();
      };
    
      connection.onterminate = () => {
        localStorage.removeItem("presId");
        connection = null;
        showDisconnectedUI();
      };
    }
    
### Monitor available connection(s) and say hello
In `presentation.html`:
    
    const addConnection = (connection) => {
      connection.onmessage = (message) => {
        if (message.data === "Say hello") connection.send("hello");
      };
    };
    
    navigator.presentation.receiver.connectionList.then((list) => {
      list.connections.forEach((connection) => {
        addConnection(connection);
      });
      list.onconnectionavailable = (evt) => {
        addConnection(evt.connection);
      };
    });
    
### Passing locale information with a message
In the `controller.html` file:
    
    connection.send('{"string": "你好，世界!", "lang": "zh-CN"}');
    connection.send('{"string": "こんにちは、世界!", "lang": "ja"}');
    connection.send('{"string": "안녕하세요, 세계!", "lang": "ko"}');
    connection.send('{"string": "Hello, world!", "lang": "en-US"}');
    
In the `presentation.html` file:
    
    connection.onmessage = (message) => {
      const messageObj = JSON.parse(message.data);
      const spanElt = document.createElement("SPAN");
      spanElt.lang = messageObj.lang;
      spanElt.textContent = messageObj.string;
      document.body.appendChild(spanElt);
    };
    
Presentation API polyfill contains a JavaScript polyfill of the Presentation API specification under standardization within the Second Screen Working Group at W3C. The polyfill is mostly intended for exploring how the Presentation API may be implemented on top of different presentation mechanisms.
# GPUPipelineLayout
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUPipelineLayout` interface of the WebGPU API defines the `GPUBindGroupLayout`s used by a pipeline. `GPUBindGroup`s used with the pipeline during command encoding must have compatible `GPUBindGroupLayout`s.
A `GPUPipelineLayout` object instance is created using the `GPUDevice.createPipelineLayout()` method.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Examples
Note: The WebGPU samples feature many more examples.
### Basic pipeline layout example
The following snippet:
  * Creates a `GPUBindGroupLayout` that describes a binding with a buffer, a texture, and a sampler.
  * Creates a `GPUPipelineLayout` based on the `GPUBindGroupLayout`.


    
    // …
    
    const bindGroupLayout = device.createBindGroupLayout({
      entries: [
        {
          binding: 0,
          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
          buffer: {},
        },
        {
          binding: 1,
          visibility: GPUShaderStage.FRAGMENT,
          texture: {},
        },
        {
          binding: 2,
          visibility: GPUShaderStage.FRAGMENT,
          sampler: {},
        },
      ],
    });
    
    const pipelineLayout = device.createPipelineLayout({
      bindGroupLayouts: [bindGroupLayout],
    });
    
    // …
    
  * The WebGPU API


# HTMLFencedFrameElement
The `HTMLFencedFrameElement` interface represents a `<fencedframe>` element in JavaScript and provides configuration properties.
EventTarget  Node  Element  HTMLElement  HTMLFencedFrameElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLFencedFrameElement.allow` Experimental
    
Gets and sets the value of the corresponding `<fencedframe>` `allow` attribute, which represents a Permissions Policy applied to the content when it is first embedded.
`HTMLFencedFrameElement.config` Experimental
    
a `FencedFrameConfig` object, which represents the navigation of a `<fencedframe>`, i.e., what content will be displayed in it. A `FencedFrameConfig` is returned from a source such as the Protected Audience API.
`HTMLFencedFrameElement.height` Experimental
    
Gets and sets the value of the corresponding `<fencedframe>` `height` attribute, which specifies the height of the element.
`HTMLFencedFrameElement.width` Experimental
    
Gets and sets the value of the corresponding `<fencedframe>` `width` attribute, which specifies the width of the element.
## Examples
To set what content will be shown in a `<fencedframe>`, a utilizing API (such as Protected Audience or Shared Storage) generates a `FencedFrameConfig` object, which is then set as the value of the `<fencedframe>`'s `config` property.
The following example gets a `FencedFrameConfig` from a Protected Audience API's ad auction, which is then used to display the winning ad in a `<fencedframe>`:
    
    const frameConfig = await navigator.runAdAuction({
      // … auction configuration
      resolveToConfig: true,
    });
    
    const frame = document.createElement("fencedframe");
    frame.config = frameConfig;
    
Note: `resolveToConfig: true` must be passed in to the `runAdAuction()` call to obtain a `FencedFrameConfig` object. If it is not set, the resulting `Promise` will resolve to a URN that can only be used in an `<iframe>`.
  * Fenced frames on privacysandbox.google.com
  * The Privacy Sandbox on privacysandbox.google.com


# WebGLVertexArrayObject
Note: This feature is available in Web Workers.
The `WebGLVertexArrayObject` interface is part of the WebGL 2 API, represents vertex array objects (VAOs) pointing to vertex array data, and provides names for different sets of vertex data.
WebGLObject  WebGLVertexArrayObject 
When working with `WebGLVertexArrayObject` objects, the following methods are useful:
  * `WebGL2RenderingContext.createVertexArray()`
  * `WebGL2RenderingContext.deleteVertexArray()`
  * `WebGL2RenderingContext.isVertexArray()`
  * `WebGL2RenderingContext.bindVertexArray()`


Note: The `OES_vertex_array_object` extension allows you to use vertex array objects in a WebGL 1 context.
## Examples
    
    const vao = gl.createVertexArray();
    gl.bindVertexArray(vao);
    
    // …
    
    // calls to bindBuffer or vertexAttribPointer
    // which will be "recorded" in the VAO
    
    // …
    
  * `OES_vertex_array_object`


# IdleDetector
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Dedicated Web Workers.
The `IdleDetector` interface of the Idle Detection API provides methods and events for detecting user activity on a device or screen.
This interface requires a secure context.
EventTarget  IdleDetector 
## Constructor
`IdleDetector()` Experimental
    
Creates a new `IdleDetector` object.
## Instance properties
`IdleDetector.userState` Read only Experimental
    
Returns a string indicating whether the users has interacted with either the screen or the device within the threshold provided to `start()`, one of `"active"` or `"idle"`. This attribute returns `null` before `start()` is called.
`IdleDetector.screenState` Read only Experimental
    
Returns a string indicating whether the screen is locked, one of `"locked"` or `"unlocked"`. This attribute returns `null` before `start()` is called.
## Events
`change` Experimental
    
Called when the value of `userState` or `screenState` has changed.
## Static methods
`IdleDetector.requestPermission()` Experimental
    
Returns a `Promise` that resolves when the user has chosen whether to grant the origin access to their idle state. Resolves with `"granted"` on acceptance and `"denied"` on refusal.
## Instance methods
`IdleDetector.start()` Experimental
    
Returns a `Promise` that resolves when the detector starts listening for changes in the user's idle state. `userState` and `screenState` are given initial values. This method takes an optional `options` object with the `threshold` in milliseconds where inactivity should be reported and `signal` for an `AbortSignal` to abort the idle detector.
## Examples
The following example shows creating a detector and logging changes to the user's idle state. A button is used to get the necessary user activation before requesting permission.
    
    const controller = new AbortController();
    const signal = controller.signal;
    
    startButton.addEventListener("click", async () => {
      if ((await IdleDetector.requestPermission()) !== "granted") {
        console.error("Idle detection permission denied.");
        return;
      }
    
      try {
        const idleDetector = new IdleDetector();
        idleDetector.addEventListener("change", () => {
          const userState = idleDetector.userState;
          const screenState = idleDetector.screenState;
          console.log(`Idle change: ${userState}, ${screenState}.`);
        });
    
        await idleDetector.start({
          threshold: 60_000,
          signal,
        });
        console.log("IdleDetector is active.");
      } catch (err) {
        // Deal with initialization errors like permission denied,
        // running outside of top-level frame, etc.
        console.error(err.name, err.message);
      }
    });
    
    stopButton.addEventListener("click", () => {
      controller.abort();
      console.log("IdleDetector is stopped.");
    });
    
# NavigationPreloadManager
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `NavigationPreloadManager` interface of the Service Worker API provides methods for managing the preloading of resources in parallel with service worker bootup.
If supported, an object of this type is returned by `ServiceWorkerRegistration.navigationPreload`. The result of a preload fetch request is waited on using the promise returned by `FetchEvent.preloadResponse`.
## Instance methods
`NavigationPreloadManager.enable()`
    
Enables navigation preloading, returning a `Promise` that resolves with `undefined`.
`NavigationPreloadManager.disable()`
    
Disables navigation preloading, returning a `Promise` that resolves with `undefined`.
`NavigationPreloadManager.setHeaderValue()`
    
Sets the value of the `Service-Worker-Navigation-Preload` HTTP header sent in preloading requests and returns an empty `Promise`.
`NavigationPreloadManager.getState()`
    
Returns a `Promise` that resolves to an object with properties that indicate whether preloading is enabled, and what value will be sent in the `Service-Worker-Navigation-Preload` HTTP header in preloading requests.
## Description
Service workers handle `fetch()` events on behalf of a site, for pages within a given scope. When a user navigates to a page that uses a service worker, the browser boots up the worker (if it isn't already running), then sends it a fetch event and waits for the result. On receiving an event, the worker returns the resource from a cache if it is present, or otherwise fetches the resource from the remote server (storing a copy for returning in future requests).
A service worker cannot process events from the browser until it has booted. This is unavoidable, but usually doesn't have much impact. Service workers are often already started (they remain active for some time after processing other requests). Even if a service worker does have to boot, much of the time it may be returning values from a cache, which is very fast. However, in those cases where a worker has to boot before it can start fetching a remote resource, then the delay can be significant.
The `NavigationPreloadManager` provides a mechanism to allow fetching of the resources to run in parallel with service worker boot, so that by the time the worker is able to handle the fetch request from the browser, the resource may already have been fully or partially downloaded. This makes the case where the worker has to start up "no worse" than when the worker is already started, and in some cases better.
The preload manager sends the `Service-Worker-Navigation-Preload` HTTP header with preload requests, allowing responses to be customized for preload requests. This might be used, for example, to reduce the data sent to just part of the original page, or to customize the response based on the user's log-in state.
## Examples
The examples here are from Speed up Service Worker with Navigation Preloads (developer.chrome.com).
### Feature detection and enabling navigation preloading
Below we enable navigation preloading in the service worker's `activate` event handler, after first using `ServiceWorkerRegistration.navigationPreload` to determine if the feature is supported (this returns either the `NavigationPreloadManager` for the service worker or `undefined` if the feature is not supported).
    
    addEventListener("activate", (event) => {
      event.waitUntil(
        (async () => {
          if (self.registration.navigationPreload) {
            // Enable navigation preloads!
            await self.registration.navigationPreload.enable();
          }
        })(),
      );
    });
    
### Using a preloaded response
The following code shows a service worker fetch event handler that uses a preloaded response (`FetchEvent.preloadResponse`).
The `fetch` event handler calls `FetchEvent.respondWith()` to pass a promise back to the controlled page. This promise will resolve with the requested resource, which may be from the cache, a preloaded fetch request, or a new network request.
If there is a matching URL request in the `Cache` object, then the code returns a resolved promise for fetching the response from the cache. If no match is found in the cache, the code returns the resolved preloaded response (`FetchEvent.preloadResponse`). If there is no matching cache entry or preloaded response, the code starts a new fetch operation from the network and returns the (unresolved) promise for that fetch operation.
    
    addEventListener("fetch", (event) => {
      event.respondWith(
        (async () => {
          // Respond from the cache if we can
          const cachedResponse = await caches.match(event.request);
          if (cachedResponse) return cachedResponse;
    
          // Else, use the preloaded response, if it's there
          const response = await event.preloadResponse;
          if (response) return response;
    
          // Else try the network.
          return fetch(event.request);
        })(),
      );
    });
    
### Custom responses
The browser sends the HTTP header `Service-Worker-Navigation-Preload` with preload requests, with a default directive value of `true`. This allows servers to differentiate between normal and preload fetch requests, and to send different responses in each case if required.
Note: If the response from preload and normal fetch operations can be different, then the server must set `Vary: Service-Worker-Navigation-Preload` to ensure that the different responses are cached.
The header value can be changed to any other string value using `NavigationPreloadManager.setHeaderValue()` in order to provide additional context for the prefetch operation. For example, you might set the value to the ID of your most recently cached resource, so that the server won't return any resources unless they are actually needed. Similarly, you could configure the returned information based on authentication status instead of using cookies.
The code below shows how to set the value of the header directive to some variable `newValue`.
    
    navigator.serviceWorker.ready
      .then((registration) =>
        registration.navigationPreload.setHeaderValue(newValue),
      )
      .then(() => {
        console.log("Done!");
      });
    
Speed up Service Worker with Navigation Preloads > Custom responses for preloads provides a more complete example of a site where the response for an article web page is constructed from a cached header and footer, so that only the article content is returned for a prefetch.
### Getting the state
You can use `NavigationPreloadManager.getState()` to check whether navigation preloading is enabled and to determine what directive value is sent with the `Service-Worker-Navigation-Preload` HTTP header for preload requests.
The code below shows how to get the promise that resolves to a `state` object and log the result.
    
    navigator.serviceWorker.ready
      .then((registration) => registration.navigationPreload.getState())
      .then((state) => {
        console.log(state.enabled); // boolean
        console.log(state.headerValue); // string
      });
    
  * Speed up Service Worker with Navigation Preloads (developer.chrome.com)


# CSSStyleValue
The `CSSStyleValue` interface of the CSS Typed Object Model API is the base class of all CSS values accessible through the Typed OM API. An instance of this class may be used anywhere a string is expected.
## Interfaces based on CSSStyleValue
Below is a list of interfaces based on the `CSSStyleValue` interface.
  * `CSSImageValue`
  * `CSSKeywordValue`
  * `CSSNumericValue`
  * `CSSPositionValue`
  * `CSSTransformValue`
  * `CSSUnparsedValue`


## Static methods
`CSSStyleValue.parse()`
    
Sets a specific CSS property to the specified values and returns the first value as a `CSSStyleValue` object.
`CSSStyleValue.parseAll()`
    
Sets all occurrences of a specific CSS property to the specified value and returns an array of `CSSStyleValue` objects, each containing one of the supplied values.
# PerformanceLongAnimationFrameTiming
The `PerformanceLongAnimationFrameTiming` interface is specified in the Long Animation Frames API and provides metrics on long animation frames (LoAFs) that occupy rendering and block other tasks from being executed.
## Description
Long animation frames (LoAFs) are rendering updates that are delayed beyond 50ms. LoAFs can result in slow user interface (UI) updates, making controls appear unresponsive and causing janky (non-smooth) animated effects and scrolling. This often leads to user frustration.
The `PerformanceLongAnimationFrameTiming` interface provides the following granular set of information on LoAFs, allowing developers to narrow down their root causes:
  * A detailed set of timestamps for each LoAF.
  * Detailed information on each script that contributed to creating the LoAF, via the `PerformanceLongAnimationFrameTiming.scripts` property. This returns an array of `PerformanceScriptTiming` objects, one for each script.


`PerformanceLongAnimationFrameTiming` inherits from `PerformanceEntry`.
PerformanceEntry  PerformanceLongAnimationFrameTiming 
## Instance properties
This interface extends the following `PerformanceEntry` properties for long animation frame performance entries:
`PerformanceEntry.duration` Read only Experimental
    
Returns a `DOMHighResTimeStamp` representing the time taken in milliseconds to process the LoAF in its entirety.
`PerformanceEntry.entryType` Read only Experimental
    
Returns the entry type, which is always `"long-animation-frame"`.
`PerformanceEntry.name` Read only Experimental
    
Returns the entry name, which is always `"long-animation-frame"`.
`PerformanceEntry.startTime` Read only Experimental
    
Returns a `DOMHighResTimeStamp` representing the time when the animation frame started.
This interface also supports the following properties:
`PerformanceLongAnimationFrameTiming.blockingDuration` Read only Experimental
    
Returns a `DOMHighResTimeStamp` indicating the total time in milliseconds that the main thread was blocked from responding to high priority tasks, such as user input. This is calculated by taking all the long tasks within the LoAF that have a `duration` of more than `50ms`, subtracting `50ms` from each, adding the rendering time to the longest task time, and summing the results.
`PerformanceLongAnimationFrameTiming.firstUIEventTimestamp` Read only Experimental
    
Returns a `DOMHighResTimeStamp` indicating the time of the first UI event — such as a mouse or keyboard event — to be queued during the current animation frame.
`PerformanceLongAnimationFrameTiming.renderStart` Read only Experimental
    
Returns a `DOMHighResTimeStamp` indicating the start time of the rendering cycle, which includes `Window.requestAnimationFrame()` callbacks, style and layout calculation, `ResizeObserver` callbacks, and `IntersectionObserver` callbacks.
`PerformanceLongAnimationFrameTiming.scripts` Read only Experimental
    
Returns an array of `PerformanceScriptTiming` instances.
`PerformanceLongAnimationFrameTiming.styleAndLayoutStart` Read only Experimental
    
Returns a `DOMHighResTimeStamp` indicating the beginning of the time period spent in style and layout calculations for the current animation frame.
## Instance methods
`PerformanceLongAnimationFrameTiming.toJSON()` Experimental
    
Returns a JSON representation of the `PerformanceLongAnimationFrameTiming` object.
## Examples
See Long animation frame timing for examples related to the Long Animation Frames API.
  * Long animation frame timing
  * `PerformanceScriptTiming`


# TrustedTypePolicyFactory
Note: This feature is available in Web Workers.
The `TrustedTypePolicyFactory` interface of the Trusted Types API creates policies and allows the verification of Trusted Type objects against created policies.
## Instance properties
`TrustedTypePolicyFactory.emptyHTML` Read only
    
Returns a `TrustedHTML` object containing an empty string.
`TrustedTypePolicyFactory.emptyScript` Read only
    
Returns a `TrustedScript` object containing an empty string.
`TrustedTypePolicyFactory.defaultPolicy` Read only
    
Returns the default `TrustedTypePolicy` or null if this is empty.
## Instance methods
`TrustedTypePolicyFactory.createPolicy()`
    
Creates a `TrustedTypePolicy` object that implements the rules passed as `policyOptions`.
`TrustedTypePolicyFactory.isHTML()`
    
When passed a value checks that it is a valid `TrustedHTML` object.
`TrustedTypePolicyFactory.isScript()`
    
When passed a value checks that it is a valid `TrustedScript` object.
`TrustedTypePolicyFactory.isScriptURL()`
    
When passed a value checks that it is a valid `TrustedScriptURL` object.
`TrustedTypePolicyFactory.getAttributeType()`
    
Allows web developers to check whether a Trusted Type is required for an element and attribute, and if so which one.
`TrustedTypePolicyFactory.getPropertyType()`
    
Allows web developers to check whether a Trusted Type is required for a property, and if so which one.
## Examples
The below code creates a policy with the name `"myEscapePolicy"` with a function defined for `createHTML()` which sanitizes HTML.
We then use the policy to sanitize a string, creating a `TrustedHTML` object, `escaped`. This object can be tested with `isHTML()` to ensure that it was created by one of our policies.
    
    const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
      createHTML: (string) => string.replace(/</g, "&lt;"),
    });
    
    const escaped = escapeHTMLPolicy.createHTML("<img src=x onerror=alert(1)>");
    
    console.log(trustedTypes.isHTML(escaped)); // true;
    
# CSSScale
The `CSSScale` interface of the CSS Typed Object Model API represents the scale() and scale3d() values of the individual `transform` property in CSS. It inherits properties and methods from its parent `CSSTransformValue`.
CSSTransformComponent  CSSScale 
## Constructor
`CSSScale()`
    
Creates a new `CSSScale` object.
## Instance properties
`x`
    
Returns or sets the x-axis value.
`y`
    
Returns or sets the y-axis value.
`z`
    
Returns or sets the z-axis value.
## Examples
To do.
# GainNode
The `GainNode` interface represents a change in volume. It is an `AudioNode` audio-processing module that causes a given gain to be applied to the input data before its propagation to the output. A `GainNode` always has exactly one input and one output, both with the same number of channels.
The gain is a unitless value, changing with time, that is multiplied to each corresponding sample of all input channels. If modified, the new gain is instantly applied, causing unaesthetic 'clicks' in the resulting audio. To prevent this from happening, never change the value directly but use the exponential interpolation methods on the `AudioParam` interface.
EventTarget  AudioNode  GainNode 
Number of inputs `1`  
Number of outputs `1`  
Channel count mode `"max"`  
Channel count `2` (not used in the default count mode)  
Channel interpretation `"speakers"`  
## Constructor
`GainNode()`
    
Creates and returns a new `GainNode` object. As an alternative, you can use the `BaseAudioContext.createGain()` factory method; see Creating an AudioNode.
## Instance properties
Inherits properties from its parent, `AudioNode`.
`GainNode.gain` Read only
    
An a-rate `AudioParam` representing the amount of gain to apply. You have to set `AudioParam.value` or use the methods of `AudioParam` to change the effect of gain.
## Instance methods
No specific method; inherits methods from its parent, `AudioNode`.
## Example
See `BaseAudioContext.createGain()` for example code showing how to use an `AudioContext` to create a `GainNode`.
  * Using the Web Audio API


# PeriodicSyncEvent
Note: This feature is only available in Service Workers.
The `PeriodicSyncEvent` interface of the Web Periodic Background Synchronization API provides a way to run tasks in the service worker with network connectivity.
An instance of this event is passed to the `periodicsync` handler. This happens periodically, at an interval greater than or equal to that set in the `PeriodicSyncManager.register()` method. Other implementation-specific factors such as the user's engagement with the site decide the actual interval.
Event  ExtendableEvent  PeriodicSyncEvent 
## Constructor
`PeriodicSyncEvent()` Experimental
    
Creates a new `PeriodicSyncEvent` object. This constructor is not typically used. The browser creates these objects itself and provides them to `onperiodicsync` callback.
## Instance properties
Inherits properties from its parent, `ExtendableEvent`.
`PeriodicSyncEvent.tag` Read only Experimental
    
Returns the developer-defined identifier for this `PeriodicSyncEvent`. Multiple tags can be used by the web app to run different periodic tasks at different frequencies.
## Instance methods
Inherits methods from its parent, `ExtendableEvent`.
## Examples
The following example shows how to respond to a periodic sync event in the service worker.
    
    self.addEventListener("periodicsync", (event) => {
      if (event.tag === "get-latest-news") {
        event.waitUntil(fetchAndCacheLatestNews());
      }
    });
    
`fetchAndCacheLatestNews` is a developer defined function.
  * Richer offline experiences with the Periodic Background Sync API


# EXT_sRGB extension
The `EXT_sRGB` extension is part of the WebGL API and adds sRGB support to textures and framebuffer objects.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default. The constants in WebGL2 are: `gl.SRGB`, `gl.SRGB8`, `gl.SRGB8_ALPHA8` and `gl.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING`.
## Constants
This extension exposes the following constants, which can be used in the `texImage2D()`, `texSubImage2D()`, `renderbufferStorage()` and `getFramebufferAttachmentParameter()` methods.
`ext.SRGB_EXT`
    
Unsized sRGB format that leaves the precision up to the driver.
`ext.SRGB_ALPHA_EXT`
    
Unsized sRGB format with unsized alpha component.
`ext.SRGB8_ALPHA8_EXT`
    
Sized (8-bit) sRGB and alpha formats.
`ext.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING_EXT`
    
Returns the framebuffer color encoding (`gl.LINEAR` or `ext.SRGB_EXT`).
## Examples
    
    const ext = gl.getExtension("EXT_sRGB");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.texImage2D(
      gl.TEXTURE_2D,
      0,
      ext.SRGB_EXT,
      512,
      512,
      0,
      ext.SRGB_EXT,
      gl.UNSIGNED_BYTE,
      image,
    );
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.texImage2D()`
  * `WebGLRenderingContext.texSubImage2D()`
  * `WebGLRenderingContext.renderbufferStorage()`
  * `WebGLRenderingContext.getFramebufferAttachmentParameter()`


# FontFaceSet
Note: This feature is available in Web Workers.
The `FontFaceSet` interface of the CSS Font Loading API manages the loading of font-faces and querying of their download status.
A `FontFaceSet` instance is a `Set`-like object that can hold an ordered set of `FontFace` objects.
This property is available as `Document.fonts`, or `self.fonts` in web workers.
EventTarget  FontFaceSet 
## Instance properties
`FontFaceSet.status` Read only
    
Indicates the font-face's loading status. It will be one of `'loading'` or `'loaded'`.
`FontFaceSet.ready` Read only
    
`Promise` which resolves once font loading and layout operations have completed.
`FontFaceSet.size` Read only
    
Returns the number of values in the `FontFaceSet`.
### Events
`loading`
    
Fires when a font-face set has started loading.
`loadingdone`
    
Fires when a font face set has finished loading.
`loadingerror`
    
Fires when an error occurred whilst loading a font-face set.
## Instance methods
`FontFaceSet.add()`
    
Adds a font to the font set.
`FontFaceSet.check()`
    
A boolean value that indicates whether a font is loaded, but doesn't initiate a load when it isn't.
`FontFaceSet.clear()`
    
Removes all manually-added fonts from the font set. CSS-connected fonts are unaffected.
`FontFaceSet.delete()`
    
Removes a manually-added font from the font set. CSS-connected fonts are unaffected.
`FontFaceSet.entries()`
    
Returns a new iterator with the values for each element in the `FontFaceSet` in insertion order.
`FontFaceSet.forEach()`
    
Executes a provided function for each value in the `FontFaceSet` object.
`FontFaceSet.has()`
    
Returns a `Boolean` asserting whether an element is present with the given value.
`FontFaceSet.keys()`
    
An alias for `FontFaceSet.values()`.
`FontFaceSet.load()`
    
Returns a `Promise` which resolves to a list of font-faces for a requested font.
`FontFaceSet.values()`
    
Returns a new iterator object that yields the values for each element in the `FontFaceSet` object in insertion order.
# GPUShaderModule
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUShaderModule` interface of the WebGPU API represents an internal shader module object, a container for WGSL shader code that can be submitted to the GPU for execution by a pipeline.
A `GPUShaderModule` object instance is created using `GPUDevice.createShaderModule()`.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Instance methods
`getCompilationInfo()`
    
Returns a `Promise` that fulfills with a `GPUCompilationInfo` object containing messages generated during the `GPUShaderModule`'s compilation.
## Examples
In our basic render demo, our shader module is created using the following code:
    
    const shaders = `
    struct VertexOut {
      @builtin(position) position : vec4f,
      @location(0) color : vec4f
    }
    
    @vertex
    fn vertex_main(@location(0) position: vec4f,
                   @location(1) color: vec4f) -> VertexOut
    {
      var output : VertexOut;
      output.position = position;
      output.color = color;
      return output;
    }
    
    @fragment
    fn fragment_main(fragData: VertexOut) -> @location(0) vec4f
    {
      return fragData.color;
    }
    `;
    
    async function init() {
      if (!navigator.gpu) {
        throw Error("WebGPU not supported.");
      }
    
      const adapter = await navigator.gpu.requestAdapter();
    
      if (!adapter) {
        throw Error("Couldn't request WebGPU adapter.");
      }
    
      const device = await adapter.requestDevice();
    
      // …
      // later on
    
      const shaderModule = device.createShaderModule({
        code: shaders,
      });
    
      // …
    }
    
  * The WebGPU API


# FileSystemFileHandle
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `FileSystemFileHandle` interface of the File System API represents a handle to a file system entry. The interface is accessed through the `window.showOpenFilePicker()` method.
Note that read and write operations depend on file-access permissions that do not persist after a page refresh if no other tabs for that origin remain open. The `queryPermission` method of the `FileSystemHandle` interface can be used to verify permission state before accessing a file.
FileSystemHandle  FileSystemFileHandle 
## Instance properties
Inherits properties from its parent, `FileSystemHandle`.
## Instance methods
Inherits methods from its parent, `FileSystemHandle`.
`getFile()`
    
Returns a `Promise` which resolves to a `File` object representing the state on disk of the entry represented by the handle.
`createSyncAccessHandle()`
    
Returns a `Promise` which resolves to a `FileSystemSyncAccessHandle` object that can be used to synchronously read from and write to a file. The synchronous nature of this method brings performance advantages, but it is only usable inside dedicated Web Workers.
`createWritable()`
    
Returns a `Promise` which resolves to a newly created `FileSystemWritableFileStream` object that can be used to write to a file.
## Examples
>
### Reading a File
The following asynchronous function presents a file picker and once a file is chosen, uses the `getFile()` method to retrieve the contents.
    
    async function getTheFile() {
      const pickerOpts = {
        types: [
          {
            description: "Images",
            accept: {
              "image/*": [".png", ".gif", ".jpeg", ".jpg"],
            },
          },
        ],
        excludeAcceptAllOption: true,
        multiple: false,
      };
    
      // open file picker
      const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
      // get file contents
      const fileData = await fileHandle.getFile();
      return fileData;
    }
    
### Writing a File
The following asynchronous function writes the given contents to the file handle, and thus to disk.
    
    async function writeFile(fileHandle, contents) {
      // Create a FileSystemWritableFileStream to write to.
      const writable = await fileHandle.createWritable();
    
      // Write the contents of the file to the stream.
      await writable.write(contents);
    
      // Close the file and write the contents to disk.
      await writable.close();
    }
    
### Synchronously reading and writing a file
The following asynchronous event handler function is contained inside a Web Worker. On receiving a message from the main thread it:
  * Creates a synchronous file access handle.
  * Gets the size of the file and creates an `ArrayBuffer` to contain it.
  * Reads the file contents into the buffer.
  * Encodes the message and writes it to the end of the file.
  * Persists the changes to disk and closes the access handle.


    
    onmessage = async (e) => {
      // Retrieve message sent to work from main script
      const message = e.data;
    
      // Get handle to draft file
      const root = await navigator.storage.getDirectory();
      const draftHandle = await root.getFileHandle("draft.txt", { create: true });
      // Get sync access handle
      const accessHandle = await draftHandle.createSyncAccessHandle();
    
      // Get size of the file.
      const fileSize = accessHandle.getSize();
      // Read file content to a buffer.
      const buffer = new DataView(new ArrayBuffer(fileSize));
      const readBuffer = accessHandle.read(buffer, { at: 0 });
    
      // Write the message to the end of the file.
      const encoder = new TextEncoder();
      const encodedMessage = encoder.encode(message);
      const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });
    
      // Persist changes to disk.
      accessHandle.flush();
    
      // Always close FileSystemSyncAccessHandle if done.
      accessHandle.close();
    };
    
Note: In earlier versions of the spec, `close()`, `flush()`, `getSize()`, and `truncate()` were wrongly specified as asynchronous methods, and older versions of some browsers implement them in this way. However, all current browsers that support these methods implement them as synchronous methods.
  * File System API
  * The File System Access API: simplifying access to local files


# SVGFEMergeElement
The `SVGFEMergeElement` interface corresponds to the `<feMerge>` element.
EventTarget  Node  Element  SVGElement  SVGFEMergeElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEMergeElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEMergeElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEMergeElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEMergeElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEMergeElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
  * `<feMerge>`


# Canvas API
The Canvas API provides a means for drawing graphics via JavaScript and the HTML `<canvas>` element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the `<canvas>` element, draws hardware-accelerated 2D and 3D graphics.
## Basic example
This simple example draws a green rectangle onto a canvas.
### HTML
    
    <canvas id="canvas"></canvas>
    
### JavaScript
The `Document.getElementById()` method gets a reference to the HTML `<canvas>` element. Next, the `HTMLCanvasElement.getContext()` method gets that element's context—the thing onto which the drawing will be rendered.
The actual drawing is done using the `CanvasRenderingContext2D` interface. The `fillStyle` property makes the rectangle green. The `fillRect()` method places its top-left corner at (10, 10), and gives it a size of 150 units wide by 100 tall.
    
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    
    ctx.fillStyle = "green";
    ctx.fillRect(10, 10, 150, 100);
    
### Result
## Reference
  * `HTMLCanvasElement`
  * `CanvasRenderingContext2D`
  * `CanvasGradient`
  * `CanvasPattern`
  * `ImageBitmap`
  * `ImageData`
  * `TextMetrics`
  * `OffscreenCanvas`
  * `Path2D` Experimental
  * `ImageBitmapRenderingContext` Experimental


Note: The interfaces related to the `WebGLRenderingContext` are referenced under WebGL.
Note: `OffscreenCanvas` is also available in web workers.
`CanvasCaptureMediaStreamTrack` is a related interface.
## Guides and tutorials
Canvas tutorial
    
A comprehensive tutorial covering both the basic usage of the Canvas API and its advanced features.
HTML5 Canvas Deep Dive
    
A hands-on, book-length introduction to the Canvas API and WebGL.
Canvas Handbook
    
A handy reference for the Canvas API.
Manipulating video using canvas
    
Combining `<video>` and `<canvas>` to manipulate video data in real time.
## Libraries
The Canvas API is extremely powerful, but not always simple to use. The libraries listed below can make the creation of canvas-based projects faster and easier.
  * EaselJS is an open-source canvas library that makes creating games, generative art, and other highly graphical experiences easy.
  * Fabric.js is an open-source canvas library with SVG parsing capabilities.
  * heatmap.js is an open-source library for creating canvas-based data heat maps.
  * JavaScript InfoVis Toolkit creates interactive data visualizations.
  * Konva.js is a 2D canvas library for desktop and mobile applications.
  * p5.js has a full set of canvas drawing functionality for artists, designers, educators, and beginners.
  * Phaser is a fast, free and fun open source framework for Canvas and WebGL powered browser games.
  * Pts.js is a library for creative coding and visualization in canvas and SVG.
  * Rekapi is an animation key-framing API for Canvas.
  * Scrawl-canvas is an open-source JavaScript library for creating and manipulating 2D canvas elements.
  * The ZIM framework provides conveniences, components, and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials.
  * Sprig is a beginner-friendly, open-source, tile-based game development library that uses Canvas.


Note: See the WebGL API for 2D and 3D libraries that use WebGL.
  * WebGL


# GPUCanvasContext
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUCanvasContext` interface of the WebGPU API represents the WebGPU rendering context of a `<canvas>` element, returned via an `HTMLCanvasElement.getContext()` call with a `contextType` of `"webgpu"`.
## Instance properties
`canvas` Read only
    
Returns a reference to the canvas that the context was created from.
## Instance methods
`configure()`
    
Configures the context to use for rendering with a given `GPUDevice` and clears the canvas to transparent black.
`getConfiguration()`
    
Returns the current configuration set for the context.
`getCurrentTexture()`
    
Returns the next `GPUTexture` to be composited to the document by the canvas context.
`unconfigure()`
    
Removes any previously-set context configuration, and destroys any textures produced while the canvas context was configured.
## Examples
    
    const canvas = document.querySelector("#gpuCanvas");
    const context = canvas.getContext("webgpu");
    
    context.configure({
      device,
      format: navigator.gpu.getPreferredCanvasFormat(),
      alphaMode: "premultiplied",
    });
    
  * The WebGPU API


# RestrictionTarget
The `RestrictionTarget` interface of the Screen Capture API provides a static method, `fromElement()`, which returns a `RestrictionTarget` instance that can be used to restrict a captured video track to a specified DOM element.
## Static methods
`fromElement()` Experimental
    
Returns a `RestrictionTarget` instance that can be used to restrict a captured video track to a specified DOM element (plus its descendants).
## Examples
    
    // Options for getDisplayMedia()
    const displayMediaOptions = {
      preferCurrentTab: true,
    };
    
    // Create restriction target from DOM element
    const demoElem = document.querySelector("#demo");
    const restrictionTarget = await RestrictionTarget.fromElement(demoElem);
    
    // Capture video stream from user's webcam and isolate video track
    const stream =
      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    const [track] = stream.getVideoTracks();
    
    // Restrict video track
    await track.restrictTo(restrictionTarget);
    
    // Broadcast restricted stream in <video> element
    videoElem.srcObject = stream;
    
See Using the Element Capture and Region Capture APIs for in-context example code.
  * Screen Capture API
  * Using the Element Capture and Region Capture APIs


# HTMLMediaElement
The `HTMLMediaElement` interface adds to `HTMLElement` the properties and methods needed to support basic media-related capabilities that are common to audio and video.
The `HTMLVideoElement` and `HTMLAudioElement` elements both inherit this interface.
EventTarget  Node  Element  HTMLElement  HTMLMediaElement 
## Instance properties
This interface also inherits properties from its ancestors `HTMLElement`, `Element`, `Node`, and `EventTarget`.
`HTMLMediaElement.audioTracks` Read only
    
An `AudioTrackList` that lists the `AudioTrack` objects contained in the element.
`HTMLMediaElement.autoplay`
    
A boolean value that reflects the `autoplay` HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption.
Note: Automatically playing audio when the user doesn't expect or desire it is a poor user experience and should be avoided in most cases, though there are exceptions. See the Autoplay guide for media and Web Audio APIs for more information. Keep in mind that browsers may ignore autoplay requests, so you should ensure that your code isn't dependent on autoplay working.
`HTMLMediaElement.buffered` Read only
    
Returns a `TimeRanges` object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the `buffered` property is accessed.
`HTMLMediaElement.controls`
    
A boolean that reflects the `controls` HTML attribute, indicating whether user interface items for controlling the resource should be displayed.
`HTMLMediaElement.controlsList`
    
Returns a `DOMTokenList` that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls. The `DOMTokenList` takes one or more of three possible values: `nodownload`, `nofullscreen`, and `noremoteplayback`.
`HTMLMediaElement.crossOrigin`
    
A string indicating the CORS setting for this media element.
`HTMLMediaElement.currentSrc` Read only
    
Returns a string with the absolute URL of the chosen media resource.
`HTMLMediaElement.currentTime`
    
A double-precision floating-point value indicating the current playback time in seconds; if the media has not started to play and has not been seeked, this value is the media's initial playback time. Setting this value seeks the media to the new time. The time is specified relative to the media's timeline.
`HTMLMediaElement.defaultMuted`
    
A boolean that reflects the `muted` HTML attribute, which indicates whether the media element's audio output should be muted by default.
`HTMLMediaElement.defaultPlaybackRate`
    
A `double` indicating the default playback rate for the media.
`HTMLMediaElement.disableRemotePlayback`
    
A boolean that sets or returns the remote playback state, indicating whether the media element is allowed to have a remote playback UI.
`HTMLMediaElement.duration` Read only
    
A read-only double-precision floating-point value indicating the total duration of the media in seconds. If no media data is available, the returned value is `NaN`. If the media is of indefinite length (such as streamed live media, a WebRTC call's media, or similar), the value is `Infinity`.
`HTMLMediaElement.ended` Read only
    
Returns a boolean that indicates whether the media element has finished playing.
`HTMLMediaElement.error` Read only
    
Returns a `MediaError` object for the most recent error, or `null` if there has not been an error.
`HTMLMediaElement.loop`
    
A boolean that reflects the `loop` HTML attribute, which indicates whether the media element should start over when it reaches the end.
`HTMLMediaElement.mediaKeys` Read only Secure context
    
Returns a `MediaKeys` object, that is a set of keys that the element can use for decryption of media data during playback. If no key is available, it can be `null`.
`HTMLMediaElement.muted`
    
A boolean that determines whether audio is muted. `true` if the audio is muted and `false` otherwise.
`HTMLMediaElement.networkState` Read only
    
Returns a `unsigned short` (enumeration) indicating the current state of fetching the media over the network.
`HTMLMediaElement.paused` Read only
    
Returns a boolean that indicates whether the media element is paused.
`HTMLMediaElement.playbackRate`
    
A `double` that indicates the rate at which the media is being played back.
`HTMLMediaElement.played` Read only
    
Returns a `TimeRanges` object that contains the ranges of the media source that the browser has played, if any.
`HTMLMediaElement.preload`
    
A string that reflects the `preload` HTML attribute, indicating what data should be preloaded, if any. Possible values are: `none`, `metadata`, `auto`.
`HTMLMediaElement.preservesPitch`
    
A boolean value that determines if the pitch of the sound will be preserved. If set to `false`, the pitch will adjust to the speed of the audio.
`HTMLMediaElement.readyState` Read only
    
Returns a `unsigned short` (enumeration) indicating the readiness state of the media.
`HTMLMediaElement.remote` Read only
    
Return a `RemotePlayback` object instance associated with the media element.
`HTMLMediaElement.seekable` Read only
    
Returns a `TimeRanges` object that contains the time ranges that the user is able to seek to, if any.
`HTMLMediaElement.seeking` Read only
    
Returns a boolean that indicates whether the media is in the process of seeking to a new position.
`HTMLMediaElement.sinkId` Read only Secure context
    
Returns a string that is the unique ID of the audio device delivering output, or an empty string if the user agent default audio device is being used.
`HTMLMediaElement.src`
    
A string that reflects the `src` HTML attribute, which contains the URL of a media resource to use.
`HTMLMediaElement.srcObject`
    
An object which serves as the source of the media associated with the `HTMLMediaElement`, or `null` if not assigned.
`HTMLMediaElement.textTracks` Read only
    
Returns a `TextTrackList` object containing the list of `TextTrack` objects contained in the element.
`HTMLMediaElement.videoTracks` Read only
    
Returns a `VideoTrackList` object containing the list of `VideoTrack` objects contained in the element.
`HTMLMediaElement.volume`
    
A `double` indicating the audio volume, from 0.0 (silent) to 1.0 (loudest).
## Obsolete properties
These properties are obsolete and should not be used, even if a browser still supports them.
`HTMLMediaElement.controller` Deprecated Non-standard
    
A `MediaController` object that represents the media controller assigned to the element, or `null` if none is assigned.
`HTMLMediaElement.mediaGroup` Deprecated Non-standard
    
A string that reflects the `mediagroup` HTML attribute, which indicates the name of the group of elements it belongs to. A group of media elements shares a common `MediaController`.
`HTMLMediaElement.mozAudioCaptured` Read only Non-standard Deprecated
    
Returns a boolean. Related to audio stream capture.
`HTMLMediaElement.mozFragmentEnd` Non-standard Deprecated
    
A `double` that provides access to the fragment end time if the media element has a fragment URI for `currentSrc`, otherwise it is equal to the media duration.
## Instance methods
This interface also inherits methods from its ancestors `HTMLElement`, `Element`, `Node`, and `EventTarget`.
`HTMLMediaElement.addTextTrack()`
    
Adds a new `TextTrack` object (such as a track for subtitles) to a media element. This is a programmatic interface only and does not affect the DOM.
`HTMLMediaElement.captureStream()`
    
Returns `MediaStream`, captures a stream of the media content.
`HTMLMediaElement.canPlayType()`
    
Given a string specifying a MIME media type (potentially with the `codecs` parameter included), `canPlayType()` returns the string `probably` if the media should be playable, `maybe` if there's not enough information to determine whether the media will play or not, or an empty string if the media cannot be played.
`HTMLMediaElement.fastSeek()`
    
Quickly seeks to the given time with low precision.
`HTMLMediaElement.load()`
    
Resets the media to the beginning and selects the best available source from the sources provided using the `src` attribute or the `<source>` element.
`HTMLMediaElement.pause()`
    
Pauses the media playback.
`HTMLMediaElement.play()`
    
Begins playback of the media.
`HTMLMediaElement.seekToNextFrame()` Deprecated Non-standard
    
Seeks to the next frame in the media. This non-standard, experimental method makes it possible to manually drive reading and rendering of media at a custom speed, or to move through the media frame-by-frame to perform filtering or other operations.
`HTMLMediaElement.setMediaKeys()` Secure context
    
Returns `Promise`. Sets the `MediaKeys` keys to use when decrypting media during playback.
`HTMLMediaElement.setSinkId()` Secure context
    
Sets the ID of the audio device to use for output and returns a `Promise`. This only works when the application is authorized to use the specified device.
## Obsolete methods
These methods are obsolete and should not be used, even if a browser still supports them.
`HTMLMediaElement.mozCaptureStream()` Non-standard
    
The Firefox-prefixed equivalent of `HTMLMediaElement.captureStream()`. See its browser compatibility for details.
`HTMLMediaElement.mozCaptureStreamUntilEnded()` Non-standard Deprecated
    
[enter description]
`HTMLMediaElement.mozGetMetadata()` Non-standard Deprecated
    
Returns `Object`, which contains properties that represent metadata from the playing media resource as `{key: value}` pairs. A separate copy of the data is returned each time the method is called. This method must be called after the `loadedmetadata` event fires.
## Events
Inherits events from its parent, `HTMLElement`.
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`abort`
    
Fired when the resource was not fully loaded, but not as the result of an error.
`canplay`
    
Fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
`canplaythrough`
    
Fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
`durationchange`
    
Fired when the duration property has been updated.
`emptied`
    
Fired when the media has become empty; for example, when the media has already been loaded (or partially loaded), and the `HTMLMediaElement.load()` method is called to reload it.
`encrypted`
    
Fired when initialization data is found in the media that indicates the media is encrypted.
`ended`
    
Fired when playback stops when end of the media (<audio> or <video>) is reached or because no further data is available.
`error`
    
Fired when the resource could not be loaded due to an error.
`loadeddata`
    
Fired when the first frame of the media has finished loading.
`loadedmetadata`
    
Fired when the metadata has been loaded.
`loadstart`
    
Fired when the browser has started to load a resource.
`pause`
    
Fired when a request to pause play is handled and the activity has entered its paused state, most commonly occurring when the media's `HTMLMediaElement.pause()` method is called.
`play`
    
Fired when the `paused` property is changed from `true` to `false`, as a result of the `HTMLMediaElement.play()` method, or the `autoplay` attribute.
`playing`
    
Fired when playback is ready to start after having been paused or delayed due to lack of data.
`progress`
    
Fired periodically as the browser loads a resource.
`ratechange`
    
Fired when the playback rate has changed.
`seeked`
    
Fired when a seek operation completes.
`seeking`
    
Fired when a seek operation begins.
`stalled`
    
Fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
`suspend`
    
Fired when the media data loading has been suspended.
`timeupdate`
    
Fired when the time indicated by the `currentTime` property has been updated.
`volumechange`
    
Fired when the volume has changed.
`waiting`
    
Fired when playback has stopped because of a temporary lack of data.
`waitingforkey`
    
Fired when playback is first blocked while waiting for a key.
>
### References
  * `<video>` and `<audio>` HTML elements
  * `HTMLVideoElement` and `HTMLAudioElement` interfaces, derived from `HTMLMediaElement`


### Guides
  * Web media technologies
  * Learning area: HTML video and audio
  * Media type and format guide
  * Handling media support issues in web content


# FencedFrameConfig
The `FencedFrameConfig` interface represents the navigation of a `<fencedframe>`, i.e., what content will be displayed in it.
`FencedFrameConfig` objects cannot be constructed manually via JavaScript. They are returned from a source such as the Protected Audience API and set as the value of `HTMLFencedFrameElement.config`.
A `FencedFrameConfig` object instance has an exposed method, but it also maps to internal config information containing opaque properties not accessible from JavaScript. This includes information such as the source of the loaded content and interest groups for advertising purposes. It is key to how fenced frames help to implement key use cases while respecting user privacy.
## Instance methods
`setSharedStorageContext()` Experimental
    
Passes in data from the embedding document to the `<fencedframe>`'s shared storage.
## Examples
>
### Basic usage
To set what content will be shown in a `<fencedframe>`, a utilizing API (such as Protected Audience or Shared Storage) generates a `FencedFrameConfig` object, which is then set as the value of the `<fencedframe>`'s `config` property.
The following example gets a `FencedFrameConfig` from a Protected Audience API's ad auction, which is then used to display the winning ad in a `<fencedframe>`:
    
    const frameConfig = await navigator.runAdAuction({
      // … auction configuration
      resolveToConfig: true,
    });
    
    const frame = document.createElement("fencedframe");
    frame.config = frameConfig;
    
Note: `resolveToConfig: true` must be passed in to the `runAdAuction()` call to obtain a `FencedFrameConfig` object. If it is not set, the resulting `Promise` will resolve to a URN that can only be used in an `<iframe>`.
### Passing contextual data via `setSharedStorageContext()`
You can use the Private Aggregation API to create reports that combine event-level data inside fenced frames with contextual data from the embedding document. `setSharedStorageContext()` can be used to pass contextual data from the embedder to shared storage worklets initiated by the Protected Audience API.
In the following example, we store data from both the embedding page and the fenced frame in shared storage.
In the embedding page, we will set a mock event ID as the shared storage context using `setSharedStorageContext()`:
    
    const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });
    
    // Data from the embedder that you want to pass to the shared storage worklet
    frameConfig.setSharedStorageContext("some-event-id");
    
    const frame = document.createElement("fencedframe");
    frame.config = frameConfig;
    
Inside the fenced frame, we add the worklet module with `window.sharedStorage.worklet.addModule()`, and then send the event-level data into the shared storage worklet using `window.sharedStorage.run()` (this is unrelated to the contextual data from the embedding document):
    
    const frameData = {
      // Data available only inside the fenced frame
    };
    
    await window.sharedStorage.worklet.addModule("reporting-worklet.js");
    
    await window.sharedStorage.run("send-report", {
      data: {
        frameData,
      },
    });
    
In the `reporting-worklet.js` worklet, we read the embedding document's event ID from `sharedStorage.context` and the frame's event-level data from the data object, then report them through Private Aggregation:
    
    class ReportingOperation {
      convertEventIdToBucket(eventId) {
        // …
      }
      convertEventPayloadToValue(info) {
        // …
      }
    
      async run(data) {
        // Data from the embedder
        const eventId = sharedStorage.context;
    
        // Data from the fenced frame
        const eventPayload = data.frameData;
    
        privateAggregation.sendHistogramReport({
          bucket: convertEventIdToBucket(eventId),
          value: convertEventPayloadToValue(eventPayload),
        });
      }
    }
    
    register("send-report", ReportingOperation);
    
  * Fenced frames on privacysandbox.google.com
  * The Privacy Sandbox on privacysandbox.google.com


# CSSNestedDeclarations
The `CSSNestedDeclarations` interface of the CSS Rule API is used to group nested `CSSRule`s.
The interface allows the CSS Object Model (CSSOM to mirror the structure of CSS documents with nested CSS rules, and ensure that rules are parsed and evaluated in the order that they are declared.
Note: Implementations that do not support this interface may parse nested rules in the wrong order. See Browser compatibility for more information.
CSSRule  CSSNestedDeclarations 
## Instance properties
Inherits properties from its ancestor `CSSRule`.
`CSSNestedDeclarations.style` Read only
    
Returns the values of the nested rules.
## Instance methods
No specific methods; inherits methods from its ancestor `CSSRule`.
## Examples
>
### CSS
The CSS below includes a selector `.foo` that contains two declarations and a media query.
    
    .foo {
      background-color: silver;
      @media screen {
        color: tomato;
      }
      color: black;
    }
    
This is represented by a number of JavaScript objects in the CSS Object Model:
  * A `CSSStyleRule` object that represents the `background-color: silver` rule. This can be returned via `document.styleSheets[0].cssRules[0]`.
  * A `CSSMediaRule` object that represents the `@media screen` rule, and which can be returned via `document.styleSheets[0].cssRules[0].cssRules[0]`. 
    * The `CSSMediaRule` object contains a `CSSNestedDeclaration` object which represents the `color: tomato` rule nested by the `@media screen` rule. This can be returned via `document.styleSheets[0].cssRules[0].cssRules[0].cssRules[0]`.
  * The final rule is a `CSSNestedDeclaration` object that represents the `color: black` rule in the stylesheet, and which can be returned via `document.styleSheets[0].cssRules[0].cssRules[1]`.


Note: All top-level styles after the first `CSSNestedDeclaration` must also be represented as `CSSNestedDeclaration` objects in order to follow the CSS nested declarations rule
### CSSOM (CSS Object Model)
    
    ↳ CSSStyleRule
      .style
        - background-color: silver
      ↳ CSSMediaRule
        ↳ CSSNestedDeclarations
          .style (CSSStyleDeclaration, 1) =
          - color: tomato
      ↳ CSSNestedDeclarations
        .style (CSSStyleDeclaration, 1) =
          - color: black
    
  * `CSSNestedDeclarations.style`
  * The Nested Declarations Rule


# Payment Handler API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The Payment Handler API provides a standardized set of functionality for web applications to directly handle payments, rather than having to be redirected to a separate site for payment handling.
When a merchant website initiates payment via the Payment Request API, the Payment Handler API handles discovery of applicable payment apps, presenting them as choices to the user, opening a payment handler window once a choice has been made to allow the user to enter their payment details, and handling the payment transaction with the payment app.
Communication with payment apps (authorization, passing of payment credentials) is handled via Service Workers.
## Concepts and usage
On a merchant website, a payment request is initiated by the construction of a new `PaymentRequest` object:
    
    const request = new PaymentRequest(
      [
        {
          supportedMethods: "https://bobbucks.dev/pay",
        },
      ],
      {
        total: {
          label: "total",
          amount: { value: "10", currency: "USD" },
        },
      },
    );
    
The `supportedMethods` property specifies a URL representing the payment method supported by the merchant. To use more than one payment method, you would specify them in an array of objects, like this:
    
    const request = new PaymentRequest(
      [
        {
          supportedMethods: "https://alicebucks.dev/pay",
        },
        {
          supportedMethods: "https://bobbucks.dev/pay",
        },
      ],
      {
        total: {
          label: "total",
          amount: { value: "10", currency: "USD" },
        },
      },
    );
    
### Making payment apps available
In supporting browsers, the process starts by requesting a payment method manifest file from each URL. A payment method manifest is typically called something like `payment-manifest.json` (the exact name can be whatever you like), and should be structured like this:
    
    {
      "default_applications": ["https://bobbucks.dev/manifest.json"],
      "supported_origins": ["https://alicepay.friendsofalice.example"]
    }
    
Given a payment method identifier like `https://bobbucks.dev/pay`, the browser:
  1. Starts loading `https://bobbucks.dev/pay` and checks its HTTP headers. 
     1. If a `Link` header is found with `rel="payment-method-manifest"`, then it downloads the payment method manifest at that location instead (see Optionally route the browser to find the payment method manifest in another location for details).
     2. Otherwise, parse the response body of `https://bobbucks.dev/pay` as the payment method manifest.
  2. Parses the downloaded content as JSON with `default_applications` and `supported_origins` members.


These members have the following purposes:
  * `default_applications` tells the browser where to find the default payment app that can use the BobBucks payment method if it doesn't already have one installed.
  * `supported_origins` tells the browser what other payment apps are permitted to handle the BobBucks payment if needed. If they are already installed on the device, they will be presented to the user as alternative payment options alongside the default application.


From the payment method manifest, the browser gets the URL of the default payment apps' web app manifest files, which can be called whatever you like, and look something like this:
    
    {
      "name": "Pay with BobBucks",
      "short_name": "BobBucks",
      "description": "This is an example of the Payment Handler API.",
      "icons": [
        {
          "src": "images/manifest/icon-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
          "src": "images/manifest/icon-512x512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ],
      "serviceworker": {
        "src": "service-worker.js",
        "scope": "/",
        "use_cache": false
      },
      "start_url": "/",
      "display": "standalone",
      "theme_color": "#3f51b5",
      "background_color": "#3f51b5",
      "related_applications": [
        {
          "platform": "play",
          "id": "com.example.android.samplepay",
          "min_version": "1",
          "fingerprints": [
            {
              "type": "sha256_cert",
              "value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
            }
          ]
        }
      ]
    }
    
When the `PaymentRequest.show()` method is invoked by the merchant app in response to a user gesture, the browser uses the `name` and `icons` information found in each manifest to present the payment apps to the user in the browser-provided Payment Request UI.
  * If there are multiple payment app options, a list of options is presented to the user for them to choose from. Selecting a payment app will start the payment flow, which causes the browser to Just-In-Time (JIT) install the web app if necessary, registering the service worker specified in the `serviceworker` member so it can handle the payment.
  * If there is only one payment app option, the `PaymentRequest.show()` method will start the payment flow with this payment app, JIT-installing it if necessary, as described above. This is an optimization to avoid presenting the user with a list that contains only one payment app choice.


Note: If `prefer_related_applications` is set to `true` in the payment app manifest, the browser will launch the platform-specific payment app specified in `related_applications` to handle the payment (if it is available) instead of the web payment app.
See Serve a web app manifest for more details.
### Checking whether the payment app is ready to pay with
The Payment Request API's `PaymentRequest.canMakePayment()` method returns `true` if a payment app is available on the customer's device, meaning that a payment app that supports the payment method is discovered, and that the platform-specific payment app is installed, or the web-based payment app is ready to be registered.
    
    async function checkCanMakePayment() {
      // …
    
      const canMakePayment = await request.canMakePayment();
      if (!canMakePayment) {
        // Fallback to other means of payment or hide the button.
      }
    }
    
The Payment Handler API adds an additional mechanism to prepare for handling a payment. The `canmakepayment` event is fired on a payment app's service worker to check whether it is ready to handle a payment. Specifically, it is fired when the merchant website calls the `PaymentRequest()` constructor. The service worker can then use the `CanMakePaymentEvent.respondWith()` method to respond appropriately:
    
    self.addEventListener("canmakepayment", (e) => {
      e.respondWith(
        new Promise((resolve, reject) => {
          someAppSpecificLogic()
            .then((result) => {
              resolve(result);
            })
            .catch((error) => {
              reject(error);
            });
        }),
      );
    });
    
The promise returned by `respondWith()` resolves with a boolean to signal that it is ready to handle a payment request (`true`), or not (`false`).
### Handling the payment
After the `PaymentRequest.show()` method is invoked, a `paymentrequest` event is fired on the service worker of the payment app. This event is listened for inside the payment app's service worker to begin the next stage of the payment process.
    
    let payment_request_event;
    let resolver;
    let client;
    
    // `self` is the global object in service worker
    self.addEventListener("paymentrequest", async (e) => {
      if (payment_request_event) {
        // If there's an ongoing payment transaction, reject it.
        resolver.reject();
      }
      // Preserve the event for future use
      payment_request_event = e;
    
      // …
    });
    
When a `paymentrequest` event is received, the payment app can open a payment handler window by calling `PaymentRequestEvent.openWindow()`. The payment handler window will present the customers with a payment app interface where they can authenticate, choose shipping address and options, and authorize the payment.
When the payment has been handled, `PaymentRequestEvent.respondWith()` is used to pass the payment result back to the merchant website.
See Receive a payment request event from the merchant for more details of this stage.
### Managing payment app functionality
Once a payment app service worker is registered, you can use the service worker's `PaymentManager` instance (accessed via `ServiceWorkerRegistration.paymentManager`) to manage various aspects of the payment app's functionality.
For example:
    
    navigator.serviceWorker.register("serviceworker.js").then((registration) => {
      registration.paymentManager.userHint = "Card number should be 16 digits";
    
      registration.paymentManager
        .enableDelegations(["shippingAddress", "payerName"])
        .then(() => {
          // …
        });
    
      // …
    });
    
  * `PaymentManager.userHint` is used to provide a hint for the browser to display along with the payment app's name and icon in the Payment Handler UI.
  * `PaymentManager.enableDelegations()` is used to delegate responsibility for providing various parts of the required payment information to the payment app rather than collecting it from the browser (for example, via autofill).


## Interfaces
`CanMakePaymentEvent`
    
The event object for the `canmakepayment` event, fired on a payment app's service worker when it has been successfully registered to signal that it is ready to handle payments.
`PaymentManager`
    
Used to manage various aspects of payment app functionality. Accessed via the `ServiceWorkerRegistration.paymentManager` property.
`PaymentRequestEvent` Experimental
    
The event object for the `paymentrequest` event, fired on a payment app's service worker when a payment flow has been initiated on the merchant website via the `PaymentRequest.show()` method.
## Extensions to other interfaces
`canmakepayment` event
    
Fired on a payment app's `ServiceWorkerGlobalScope` when it has been successfully registered, to signal that it is ready to handle payments.
`paymentrequest` event
    
Fired on a payment app's `ServiceWorkerGlobalScope` when a payment flow has been initiated on the merchant website via the `PaymentRequest.show()` method.
`ServiceWorkerRegistration.paymentManager`
    
Returns a payment app's `PaymentManager` instance, which is used to manage various payment app functionality.
  * BobBucks sample payment app
  * Web-based payment apps overview
  * Setting up a payment method
  * Life of a payment transaction
  * Using the Payment Request API
  * Payment processing concepts


# CSS
The `CSS` interface holds useful CSS-related methods. No objects with this interface are implemented: it contains only static methods and is therefore a utilitarian interface.
## Static properties
`CSS.highlights`
    
Provides access to the `HighlightRegistry` used to style arbitrary text ranges using the CSS Custom Highlight API.
`CSS.paintWorklet` Experimental Secure context
    
Provides access to the Worklet responsible for all the classes related to painting.
## Instance properties
The CSS interface is a utility interface and no object of this type can be created: only static properties are defined on it.
## Static methods
No inherited static methods.
`CSS.registerProperty()`
    
Registers custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
`CSS.supports()`
    
Returns a boolean value indicating if the pair property-value, or the condition, given in parameter is supported.
`CSS.escape()`
    
Can be used to escape a string mostly for use as part of a CSS selector.
CSS factory functions
    
Can be used to return a new `CSSUnitValue` with a value of the parameter number of the units of the name of the factory function method used.
    
    CSS.em(3); // CSSUnitValue {value: 3, unit: "em"}
    
## Instance methods
The CSS interface is a utility interface and no object of this type can be created: only static methods are defined on it.
# EyeDropper API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The EyeDropper API provides a mechanism for creating an eyedropper tool. Using this tool, users can sample colors from their screens, including outside of the browser window.
## Concept
Creative applications often allow users to sample colors from drawings or shapes in the application to reuse. Web applications can use the EyeDropper API to provide a similar eyedropper mode, provided by the browser.
Using the API, a web application can start the eyedropper mode. Once started, the cursor changes to indicate to the user that the mode is active. The user can then either select a color from anywhere on the screen, or dismiss the eyedropper mode by pressing `Escape`.
## Security and privacy measures
To prevent malicious websites from getting pixel data from a user's screen without them realizing, the EyeDropper API implements the following measures:
  * The API doesn't let the eyedropper mode start without user intent. The `EyeDropper.open()` method can only be called in response to a user action (such as a button click).
  * No pixel information can be retrieved without user intent. The promise returned by `EyeDropper.open()` only resolves to a color value in response to a user action (clicking on a pixel). So the eyedropper cannot be used in the background without the user noticing it.
  * To help users notice the eyedropper mode more easily, it is made obvious by browsers. The normal mouse cursor disappears after a short delay and a magnifying glass appears instead. There is also a delay between when the eyedropper mode starts and when the user can select a pixel to ensure the user has had time to see the magnifying glass.
  * Users are also able to cancel the eyedropper mode at any time (by pressing the `Escape` key).


## Interfaces
`EyeDropper` Experimental
    
The `EyeDropper` interface represents an instance of an eyedropper tool that can be opened and used by the user to select colors from the screen.
  * Picking colors of any pixel on the screen with the EyeDropper API
  * The EyeDropper API W3C/SMPTE Joint Workshop


# MIDIMessageEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MIDIMessageEvent` interface of the Web MIDI API represents the event passed to the `midimessage` event of the `MIDIInput` interface. A `midimessage` event is fired every time a MIDI message is sent from a device represented by a `MIDIInput`, for example when a MIDI keyboard key is pressed, a knob is tweaked, or a slider is moved.
Event  MIDIMessageEvent 
## Constructor
`MIDIMessageEvent()`
    
Creates a new `MIDIMessageEvent` object instance.
## Instance properties
This interface also inherits properties from `Event`.
`MIDIMessageEvent.data`
    
A `Uint8Array` containing the data bytes of a single MIDI message. See the MIDI specification for more information on its form.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from `Event`.
## Examples
The following example prints all MIDI messages to the console.
    
    navigator.requestMIDIAccess().then((midiAccess) => {
      Array.from(midiAccess.inputs).forEach((input) => {
        input[1].onmidimessage = (msg) => {
          console.log(msg);
        };
      });
    });
    
# WebGLSampler
Note: This feature is available in Web Workers.
The `WebGLSampler` interface is part of the WebGL 2 API and stores sampling parameters for `WebGLTexture` access inside of a shader.
WebGLObject  WebGLSampler 
When working with `WebGLSampler` objects, the following methods of the `WebGL2RenderingContext` are useful:
  * `WebGL2RenderingContext.createSampler()`
  * `WebGL2RenderingContext.deleteSampler()`
  * `WebGL2RenderingContext.isSampler()`
  * `WebGL2RenderingContext.bindSampler()`
  * `WebGL2RenderingContext.getSamplerParameter()`


## Examples
>
### Creating a `WebGLSampler` object
in this example, `gl` must be a `WebGL2RenderingContext`. `WebGLSampler` objects are not available in WebGL 1.
    
    const sampler = gl.createSampler();
    
# ReadableStream
Note: This feature is available in Web Workers.
The `ReadableStream` interface of the Streams API represents a readable stream of byte data. The Fetch API offers a concrete instance of a `ReadableStream` through the `body` property of a `Response` object.
`ReadableStream` is a transferable object.
## Constructor
`ReadableStream()`
    
Creates and returns a readable stream object from the given handlers.
## Instance properties
`ReadableStream.locked` Read only
    
Returns a boolean indicating whether or not the readable stream is locked to a reader.
## Static methods
`ReadableStream.from()` Experimental
    
Returns `ReadableStream` from a provided iterable or async iterable object, such as an array, a set, an async generator, and so on.
## Instance methods
`ReadableStream.cancel()`
    
Returns a `Promise` that resolves when the stream is canceled. Calling this method signals a loss of interest in the stream by a consumer. The supplied `reason` argument will be given to the underlying source, which may or may not use it.
`ReadableStream.getReader()`
    
Creates a reader and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.
`ReadableStream.pipeThrough()`
    
Provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair.
`ReadableStream.pipeTo()`
    
Pipes the current ReadableStream to a given `WritableStream` and returns a `Promise` that fulfills when the piping process completes successfully, or rejects if any errors were encountered.
`ReadableStream.tee()`
    
The `tee` method tees this readable stream, returning a two-element array containing the two resulting branches as new `ReadableStream` instances. Each of those streams receives the same incoming data.
## Async iteration
`ReadableStream` implements the async iterable protocol. This enables asynchronous iteration over the chunks in a stream using the `for await...of` syntax:
    
    const stream = new ReadableStream(getSomeSource());
    
    for await (const chunk of stream) {
      // Do something with each 'chunk'
    }
    
The async iterator consumes the stream until it runs out of data or otherwise terminates. The loop can also exit early due to a `break`, `throw`, or `return` statement.
While iterating, the stream is locked to prevent other consumers from acquiring a reader (attempting to iterate over a stream that is already locked will throw a `TypeError`). This lock is released when the loop exits.
By default, exiting the loop will also cancel the stream, so that it can no longer be used. To continue to use a stream after exiting the loop, pass `{ preventCancel: true }` to the stream's `values()` method:
    
    for await (const chunk of stream.values({ preventCancel: true })) {
      // Do something with 'chunk'
      break;
    }
    // Acquire a reader for the stream and continue reading ...
    
## Examples
>
### Fetch stream
In the following example, an artificial `Response` is created to stream HTML fragments fetched from another resource to the browser.
It demonstrates the usage of a `ReadableStream` in combination with a `Uint8Array`.
    
    fetch("https://www.example.org")
      .then((response) => response.body)
      .then((rb) => {
        const reader = rb.getReader();
    
        return new ReadableStream({
          start(controller) {
            // The following function handles each data chunk
            function push() {
              // "done" is a Boolean and value a "Uint8Array"
              reader.read().then(({ done, value }) => {
                // If there is no more data to read
                if (done) {
                  console.log("done", done);
                  controller.close();
                  return;
                }
                // Get the data and send it to the browser via the controller
                controller.enqueue(value);
                // Check chunks by logging to the console
                console.log(done, value);
                push();
              });
            }
    
            push();
          },
        });
      })
      .then((stream) =>
        // Respond with our stream
        new Response(stream, { headers: { "Content-Type": "text/html" } }).text(),
      )
      .then((result) => {
        // Do things with result
        console.log(result);
      });
    
### Convert an iterator or async iterator to a stream
The `from()` static method can convert an iterator, such as an `Array` or `Map`, or an (async) iterator to a readable stream:
    
    const myReadableStream = ReadableStream.from(iteratorOrAsyncIterator);
    
On browsers that don't support the `from()` method you can instead create your own custom readable stream to achieve the same result:
    
    function iteratorToStream(iterator) {
      return new ReadableStream({
        async pull(controller) {
          const { value, done } = await iterator.next();
    
          if (value) {
            controller.enqueue(value);
          }
          if (done) {
            controller.close();
          }
        },
      });
    }
    
Warning: This example assumes that the return value (`value` when `done` is `true`), if present, is also a chunk to be enqueued. Some iterator APIs may use the return value for different purposes. You may need to adjust the code based on the API you are interacting with.
### Async iteration of a stream using for await...of
This example shows how you can process the `fetch()` response using a `for await...of` loop to iterate through the arriving chunks.
    
    const response = await fetch("https://www.example.org");
    let total = 0;
    
    // Iterate response.body (a ReadableStream) asynchronously
    for await (const chunk of response.body) {
      // Do something with each chunk
      // Here we just accumulate the size of the response.
      total += chunk.length;
    }
    
    // Do something with the total
    console.log(total);
    
  * Streams API concepts
  * Using readable streams
  * Using readable byte stream
  * Web-streams-polyfill


# SVGFEFuncGElement
The `SVGFEFuncGElement` interface corresponds to the `<feFuncG>` element.
EventTarget  Node  Element  SVGElement  SVGComponentTransferFunctionElement  SVGFEFuncGElement 
## Instance properties
This interface not provide any specific properties, but inherits properties from its parent interface, `SVGComponentTransferFunctionElement`.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGComponentTransferFunctionElement`.
  * `<feFuncG>`


# GamepadPose
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `GamepadPose` interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information).
This interface is accessible through the `Gamepad.pose` property.
## Instance properties
`GamepadPose.hasOrientation` Read only Experimental
    
Returns a boolean indicating whether the gamepad is capable of returning orientation information (`true`) or not (`false`).
`GamepadPose.hasPosition` Read only Experimental
    
Returns a boolean indicating whether the gamepad is capable of returning position information (`true`) or not (`false`).
`GamepadPose.position` Read only Experimental
    
Returns the position of the `Gamepad` as a 3D vector.
`GamepadPose.linearVelocity` Read only Experimental
    
Returns the linear velocity of the `Gamepad`, in meters per second.
`GamepadPose.linearAcceleration` Read only Experimental
    
Returns the linear acceleration of the `Gamepad`, in meters per second per second.
`GamepadPose.orientation` Read only Experimental
    
Returns the orientation of the `Gamepad`, as a quaternion value.
`GamepadPose.angularVelocity` Read only Experimental
    
Returns the angular velocity of the `Gamepad`, in radians per second.
`GamepadPose.angularAcceleration` Read only Experimental
    
Returns the angular acceleration of the `Gamepad`, in meters per second per second.
## Examples
TBD.
  * WebVR API
  * Gamepad API


# Payment Request API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Payment Request API provides a consistent user experience for merchants and users. It is not a new way of paying for things; instead, it's a way for users to select their preferred way of paying for things and make that information available to a merchant.
## Concepts and usage
Many problems related to online shopping cart abandonment can be traced to checkout forms, which can be difficult and time-consuming to fill out and often require multiple steps to complete. The Payment Request API is meant to reduce the steps needed to complete payment online, potentially doing away with checkout forms. It aims to make the checkout process more accessible by having payment apps store a user's details, which are passed along to a merchant, hopefully without requiring an HTML form.
To request a payment, a web page creates a `PaymentRequest` object in response to a user action that initiates a payment, such as clicking a "Purchase" button. The `PaymentRequest` allows the web page to exchange information with the user agent while the user provides input to complete the transaction.
You can find a complete guide in Using the Payment Request API.
Note: The API is available inside cross-origin `<iframe>` elements only if they have had the `allowpaymentrequest` attribute set on them.
## Interfaces
`PaymentAddress` Deprecated Non-standard
    
An object that contains address information; used for billing and shipping addresses, for example.
`PaymentRequest`
    
An object that provides the API for creating and managing the user agent's payment interface.
`PaymentRequestUpdateEvent`
    
Enables the web page to update the details of the payment request in response to a user action.
`PaymentMethodChangeEvent`
    
Represents the user changing payment instrument (e.g., switching from one payment method to another).
`PaymentResponse`
    
An object returned after the user selects a payment method and approves a payment request.
`MerchantValidationEvent` Deprecated
    
Represents the browser requiring the merchant (website) to validate themselves as allowed to use a particular payment handler (e.g., registered as allowed to use Apple Pay).
  * Using the Payment Request API
  * Payment processing concepts
  * Introducing the Payment Request API for Apple Pay
  * Google Pay API PaymentRequest Tutorial
  * Samsung Pay Web Payments Integration Guide
  * W3C Payment Request API FAQ
  * Permissions Policy directive `payment`


# HTMLTitleElement
The `HTMLTitleElement` interface is implemented by a document's `<title>`. This element inherits all of the properties and methods of the `HTMLElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLTitleElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLTitleElement.text`
    
A string representing the text of the document's title.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
## Example
Do not confuse: `document.title` with `document.querySelector('title')`
The former is just a setter/getter method to set or get the inner text value of the document title, while the latter is the `HTMLTitleElement` object. So you cannot write: `document.title.text = "Hello world!";`
Instead, you can simply write: `document.title = "Hello world!";` which is an equivalent to `document.querySelector('title').text = "Hello world!";`
  * The HTML element implementing this interface: `<title>`.


# HTMLScriptElement
HTML `<script>` elements expose the `HTMLScriptElement` interface, which provides special properties and methods for manipulating the behavior and execution of `<script>` elements (beyond the inherited `HTMLElement` interface).
JavaScript files should be served with the `text/javascript` MIME type, but browsers are lenient and block them only if the script is served with an image type (`image/*`), video type (`video/*`), audio type (`audio/*`), or `text/csv`. If the script is blocked, its element receives an `error` event; otherwise, it receives a `load` event.
EventTarget  Node  Element  HTMLElement  HTMLScriptElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLScriptElement.attributionSrc` Secure context Experimental
    
Gets and sets the `attributionsrc` attribute on a `<script>` element programmatically, reflecting the value of that attribute. `attributionsrc` specifies that you want the browser to send an `Attribution-Reporting-Eligible` header along with the script resource request. On the server-side this is used to trigger sending an `Attribution-Reporting-Register-Source` or `Attribution-Reporting-Register-Trigger` header in the response, to register a JavaScript-based attribution source or attribution trigger, respectively.
`HTMLScriptElement.async`
    
A boolean value that controls how the script should be executed. For classic scripts, if the `async` property is set to `true`, the external script will be fetched in parallel to parsing and evaluated as soon as it is available. For module scripts, if the `async` property is set to `true`, the script and all their dependencies will be fetched in parallel to parsing and evaluated as soon as they are available.
`HTMLScriptElement.blocking`
    
A string indicating that certain operations should be blocked on the fetching of the script. It reflects the `blocking` attribute of the `<script>` element.
`HTMLScriptElement.charset` Deprecated
    
A string representing the character encoding of an external script. It reflects the `charset` attribute.
`HTMLScriptElement.crossOrigin`
    
A string reflecting the CORS setting for the script element. For classic scripts from other origins, this controls if error information will be exposed.
`HTMLScriptElement.defer`
    
A boolean value that controls how the script should be executed. For classic scripts, if the `defer` property is set to `true`, the external script will be executed after the document has been parsed, but before firing `DOMContentLoaded` event. For module scripts, the `defer` property has no effect.
`HTMLScriptElement.event` Deprecated
    
A string; an obsolete way of registering event handlers on elements in an HTML document.
`HTMLScriptElement.fetchPriority`
    
An optional string representing a hint given to the browser on how it should prioritize fetching of an external script relative to other external scripts. If this value is provided, it must be one of the possible permitted values: `high` to fetch at a high priority, `low` to fetch at a low priority, or `auto` to indicate no preference (which is the default). It reflects the `fetchpriority` attribute of the `<script>` element.
`HTMLScriptElement.integrity`
    
A string that contains inline metadata that a browser can use to verify that a fetched resource has been delivered without unexpected manipulation. It reflects the `integrity` attribute of the `<script>` element.
`HTMLScriptElement.noModule`
    
A boolean value that if true, stops the script's execution in browsers that support ES modules — used to run fallback scripts in older browsers that do not support JavaScript modules.
`HTMLScriptElement.referrerPolicy`
    
A string that reflects the `referrerPolicy` HTML attribute indicating which referrer to use when fetching the script, and fetches done by that script.
`HTMLScriptElement.src`
    
A string representing the URL of an external script; this can be used as an alternative to embedding a script directly within a document. It reflects the `src` attribute of the `<script>` element.
`HTMLScriptElement.text`
    
A string that joins and returns the contents of all `Text` nodes inside the `<script>` element (ignoring other nodes like comments) in tree order. On setting, it acts the same way as the `Node.textContent` property.
Note: When inserted using the `Document.write()` method, `<script>` elements execute (typically synchronously), but when inserted using `Element.innerHTML` or `Element.outerHTML`, they do not execute at all.
`HTMLScriptElement.type`
    
A string representing the type of the script. It reflects the `type` attribute of the `<script>` element.
## Static methods
`HTMLScriptElement.supports()`
    
Returns `true` if the browser supports scripts of the specified type and `false` otherwise. This method provides a simple and unified method for script-related feature detection.
## Instance methods
No specific methods; inherits methods from its parent, `HTMLElement`.
## Events
No specific events; inherits events from its parent, `HTMLElement`.
## Examples
>
### Dynamically importing scripts
Let's create a function that imports new scripts within a document creating a `<script>` node immediately before the `<script>` that hosts the following code (through `document.currentScript`). These scripts will be asynchronously executed. For more details, see the `defer` and `async` properties.
    
    function loadError(oError) {
      throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
    }
    
    function prefixScript(url, onloadFunction) {
      const newScript = document.createElement("script");
      newScript.onerror = loadError;
      if (onloadFunction) {
        newScript.onload = onloadFunction;
      }
      document.currentScript.parentNode.insertBefore(
        newScript,
        document.currentScript,
      );
      newScript.src = url;
    }
    
This next function, instead of prepending the new scripts immediately before the `document.currentScript` element, appends them as children of the `<head>` tag.
    
    function loadError(oError) {
      throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
    }
    
    function affixScriptToHead(url, onloadFunction) {
      const newScript = document.createElement("script");
      newScript.onerror = loadError;
      if (onloadFunction) {
        newScript.onload = onloadFunction;
      }
      document.head.appendChild(newScript);
      newScript.src = url;
    }
    
Sample usage:
    
    affixScriptToHead("myScript1.js");
    affixScriptToHead("myScript2.js", () => {
      alert('The script "myScript2.js" has been correctly loaded.');
    });
    
### Checking if a script type is supported
`HTMLScriptElement.supports()` provides a unified mechanism for checking whether a browser supports particular types of scripts.
The example below shows how to check for module support, using the existence of the `noModule` attribute as a fallback.
    
    function checkModuleSupport() {
      if ("supports" in HTMLScriptElement) {
        return HTMLScriptElement.supports("module");
      }
      return "noModule" in document.createElement("script");
    }
    
Classic scripts are assumed to be supported on all browsers.
  * HTML `<script>` element
  * HTML `<noscript>` element
  * `document.currentScript`
  * Web Workers (code snippets similar to scripts but executed in another global context)


# VideoPlaybackQuality
A `VideoPlaybackQuality` object is returned by the `HTMLVideoElement.getVideoPlaybackQuality()` method and contains metrics that can be used to determine the playback quality of a video.
## Instance properties
The `VideoPlaybackQuality` interface doesn't inherit properties from any other interfaces.
`creationTime` Read only
    
A `DOMHighResTimeStamp` containing the time in milliseconds between the start of the navigation and the creation of the object.
`droppedVideoFrames` Read only
    
An `unsigned long` giving the number of video frames dropped since the creation of the associated `HTMLVideoElement`.
`totalVideoFrames` Read only
    
An `unsigned long` giving the number of video frames created and dropped since the creation of the associated `HTMLVideoElement`.
### Obsolete properties
`corruptedVideoFrames` Read only Deprecated
    
An `unsigned long` giving the number of video frames corrupted since the creation of the associated `HTMLVideoElement`. A corrupted frame may be created or dropped.
`totalFrameDelay` Read only Deprecated Non-standard
    
A `double` containing the sum of the frame delay since the creation of the associated `HTMLVideoElement`. The frame delay is the difference between a frame's theoretical presentation time and its effective display time.
## Instance methods
The `VideoPlaybackQuality` interface has no methods, and does not inherit any.
  * The `HTMLVideoElement.getVideoPlaybackQuality()` method to get a `VideoPlaybackQuality` object
  * `MediaSource`
  * `SourceBuffer`


# SVGDescElement
The `SVGDescElement` interface corresponds to the `<desc>` element.
EventTarget  Node  Element  SVGElement  SVGDescElement 
## Instance properties
Inherits methods from its parent interface, `SVGElement`.
## Instance methods
Inherits methods from its parent interface, `SVGElement`.
  * `<desc>`


# CropTarget
The `CropTarget` interface of the Screen Capture API provides a static method, `fromElement()`, which returns a `CropTarget` instance that can be used to crop a captured video track to the area in which a specified element is rendered.
## Static methods
`fromElement()` Experimental
    
Returns a `CropTarget` instance that can be used to crop a captured video track to the area in which a specified element is rendered.
## Examples
    
    // Options for getDisplayMedia()
    const displayMediaOptions = {
      preferCurrentTab: true,
    };
    
    // Create crop target from DOM element
    const demoElem = document.querySelector("#demo");
    const cropTarget = await CropTarget.fromElement(demoElem);
    
    // Capture video stream from user's webcam and isolate video track
    const stream =
      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    const [track] = stream.getVideoTracks();
    
    // Crop video track
    await track.cropTo(cropTarget);
    
    // Broadcast cropped stream in <video> element
    videoElem.srcObject = stream;
    
See Using the Element Capture and Region Capture APIs for in-context example code.
  * Screen Capture API
  * Using the Element Capture and Region Capture APIs


# DOMParser
The `DOMParser` interface provides the ability to parse XML or HTML source code from a string into a DOM `Document`.
You can perform the opposite operation—converting a DOM tree into XML or HTML source—using the `XMLSerializer` interface.
In the case of an HTML document, you can also replace portions of the DOM with new DOM trees built from HTML by setting the value of the `Element.innerHTML` and `outerHTML` properties. These properties can also be read to fetch HTML fragments corresponding to the corresponding DOM subtree.
Note that `XMLHttpRequest` can parse XML and HTML directly from a URL-addressable resource, returning a `Document` in its `response` property.
Note: Be aware that block-level elements like `<p>` will be automatically closed if another block-level element is nested inside and therefore parsed before the closing `</p>` tag.
## Constructor
`DOMParser()`
    
Creates a new `DOMParser` object.
## Instance methods
`DOMParser.parseFromString()`
    
Parses a string using either the HTML parser or the XML parser, returning an `HTMLDocument` or `XMLDocument`.
## Examples
The documentation for `DOMParser.parseFromString()`, this interface's only method, contains examples for parsing XML, SVG, and HTML strings.
  * Parsing and serializing XML
  * `XMLHttpRequest`
  * `XMLSerializer`
  * `JSON.parse()` \- counterpart for `JSON` documents.


# HkdfParams
The `HkdfParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.deriveKey()`, when using the HKDF algorithm.
## Instance properties
`name`
    
A string. This should be set to `HKDF`.
`hash`
    
A string or an object containing a single property called `name` with a string value. It is an identifier for the digest algorithm to use. This should be one of the following:
  * `SHA-256`: selects the SHA-256 algorithm.
  * `SHA-384`: selects the SHA-384 algorithm.
  * `SHA-512`: selects the SHA-512 algorithm.


Warning: `SHA-1` is also supported here but the SHA-1 algorithm is considered vulnerable and should no longer be used.
`salt`
    
An `ArrayBuffer`, a `TypedArray`, or a `DataView`. The HKDF specification states that adding salt "adds significantly to the strength of HKDF". Ideally, the salt is a random or pseudo-random value with the same length as the output of the digest function. Unlike the input key material passed into `deriveKey()`, salt does not need to be kept secret.
`info`
    
An `ArrayBuffer`, a `TypedArray`, or a `DataView` representing application-specific contextual information. This is used to bind the derived key to an application or context, and enables you to derive different keys for different contexts while using the same input key material. It's important that this should be independent of the input key material itself. This property is required but may be an empty buffer.
## Examples
See the examples for `SubtleCrypto.deriveKey()`.
Browsers that support the "HKDF" algorithm for the `SubtleCrypto.deriveKey()` method will support this type.
  * `SubtleCrypto.deriveKey()`.


# WritableStreamDefaultController
Note: This feature is available in Web Workers.
The `WritableStreamDefaultController` interface of the Streams API represents a controller allowing control of a `WritableStream`'s state. When constructing a `WritableStream`, the underlying sink is given a corresponding `WritableStreamDefaultController` instance to manipulate.
## Constructor
None. `WritableStreamDefaultController` instances are created automatically during `WritableStream` construction.
## Instance properties
`WritableStreamDefaultController.signal` Read only
    
Returns the `AbortSignal` associated with the controller.
## Instance methods
`WritableStreamDefaultController.error()`
    
Causes any future interactions with the associated stream to error.
## Examples
    
    const writableStream = new WritableStream({
      start(controller) {
        // do stuff with controller
    
        // error stream if necessary
        controller.error("My stream is broken");
      },
      write(chunk, controller) {
        // …
      },
      close(controller) {
        // …
      },
      abort(err) {
        // …
      },
    });
    
# DeviceOrientationEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `DeviceOrientationEvent` interface of the Device Orientation Events provides web developers with information from the physical orientation of the device running the web page.
Event  DeviceOrientationEvent 
## Constructor
`DeviceOrientationEvent.DeviceOrientationEvent()`
    
Creates a new `DeviceOrientationEvent`.
## Instance properties
`DeviceOrientationEvent.absolute` Read only
    
A boolean that indicates whether or not the device is providing orientation data absolutely.
`DeviceOrientationEvent.alpha` Read only
    
A number representing the motion of the device around the z axis, express in degrees with values ranging from 0 (inclusive) to 360 (exclusive).
`DeviceOrientationEvent.beta` Read only
    
A number representing the motion of the device around the x axis, express in degrees with values ranging from -180 (inclusive) to 180 (exclusive). This represents a front to back motion of the device.
`DeviceOrientationEvent.gamma` Read only
    
A number representing the motion of the device around the y axis, express in degrees with values ranging from -90 (inclusive) to 90 (exclusive). This represents a left to right motion of the device.
`DeviceOrientationEvent.webkitCompassHeading` Non-standard Read only
    
A number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 360.
`DeviceOrientationEvent.webkitCompassAccuracy` Non-standard Read only
    
The accuracy of the compass means that the deviation is positive or negative. It's usually 10.
## Example
    
    window.addEventListener("deviceorientation", (event) => {
      console.log(`${event.alpha} : ${event.beta} : ${event.gamma}`);
    });
    
  * Detecting device orientation
  * Orientation and motion data explained
  * `DeviceMotionEvent`
  * `devicemotion` event
  * `deviceorientation` event
  * `deviceorientationabsolute` event


# Storage Access API
The Storage Access API provides a way for cross-site content loaded in a third-party context (i.e., embedded in an `<iframe>`) to gain access to third-party cookies and unpartitioned state that it would typically only have access to in a first-party context (i.e., when loaded directly in a browser tab).
The Storage Access API is relevant to user agents that, by default, block access to third-party cookies and unpartitioned state to improve privacy (for example, to prevent tracking). There are legitimate uses for third-party cookies and unpartitioned state that we still want to enable, even with these default restrictions in place. Examples include single sign-on (SSO) with federated identity providers (IdPs), or persisting user details such as location data or viewing preferences across different sites.
The API provides methods that allow embedded resources to check whether they currently have access to third-party cookies and, if not, to request access from the user agent.
## Concepts and usage
Browsers implement several storage access features and policies restricting access to third-party cookies and unpartitioned state. These range from giving embedded resources under each top-level origin a unique cookie storage space (partitioned cookies) to outright blocking of cookie access when resources are loaded in a third-party context.
The semantics around third-party cookie and unpartitioned state blocking features and policies differ from browser to browser, but the core functionality is similar. Cross-site resources embedded in a third-party context are not given access to the same state that they would have access to when loaded in a first-party context. This is done with good intent — browser vendors want to take steps to better protect their user's privacy and security. Examples include leaving them less open to having their activity tracked across different sites, and less vulnerable to exploits such as cross-site request forgery (CSRF).
However, there are legitimate uses for embedded cross-site content accessing third-party cookies and unpartitioned state, which the above features and policies are known to break. Let's say you've got a series of different sites that provide access to different products — `heads-example.com`, `shoulders-example.com`, `knees-example.com`, and `toes-example.com`.
Alternatively, you might separate your content or services into different country domains for localization purposes — `example.com`, `example.ua`, `example.br`, etc. — or in some other way.
You might have accompanying utility sites with components embedded in all the other sites, for example, to provide SSO (`sso-example.com`) or general personalization services (`services-example.com`). These utility sites will want to share their state with the sites they are embedded in via cookies. They cannot share first-party cookies because they are on different domains, and third-party cookies will no longer work in browsers that block them.
In such situations, site owners often encourage users to add their site as an exception or to disable third-party cookie-blocking policies entirely. Users who wish to continue interacting with their content must significantly relax their blocking policy for resources loaded from all embedded origins and possibly across all websites.
The Storage Access API is intended to solve this problem; embedded cross-site content can request unrestricted access to third-party cookies and unpartitioned state on a frame-by-frame basis via the `Document.requestStorageAccess()` method. It can also check whether it already has access via the `Document.hasStorageAccess()` method.
### Unpartitioned versus partitioned cookies
It is important to note that the Storage Access API is only needed to provide access to unpartitioned third-party cookies. This means cookies stored in the traditional way since the early web — all cookies set on the same site are stored in the same cookie jar. This is in contrast to partitioned cookies, where embedded resources under each top-level site are given a unique cookie storage space, thereby making tracking users across sites via these cookies impossible.
Browsers have various mechanisms to partition third-party cookie access, for example Firefox Total Cookie Protection and Cookies Having Independent Partitioned State (CHIPS).
When we talk about third-party cookies in the context of the Storage Access API, we implicitly mean unpartitioned third-party cookies.
### How it works
Embedded content that has a legitimate need for third party cookie or unpartitioned state access can request access using the Storage Access API as follows:
  1. It can call the `Document.hasStorageAccess()` method to check whether it has the access it needs already.
  2. If not, it can request access via the `Document.requestStorageAccess()` method.
  3. Depending on the browser, the user will be asked whether to grant access to the requesting embed in slightly different ways. 
     * Safari shows prompts for all embedded content that has not previously received storage access.
     * Firefox only prompts users after an origin has requested storage access on more than a threshold number of sites.
     * Chrome shows prompts for all embedded content that has not previously received storage access. It will however automatically grant access and skip prompts if the embedded content and embedding site are part of the same related website set.
  4. Access is granted or denied based on whether the content meets all the security requirements — see Security measures for general requirements, and Browser-specific variations for some browser-specific security requirements. The `Promise`-based nature of `requestStorageAccess()` allows you to run code to handle success and failure cases. 
     * Modern spec behavior dictates that access is granted per-frame — every separate content embed has its third-party cookie access blocked by default, and needs to call `requestStorageAccess()` to opt in to access. If a content embed has received access, and same-site embeds then call `requestStorageAccess()`, their promises will fulfill automatically. But they still need to opt in.
     * The only exception to the "blocked by default" behavior is when a content embed makes a successful `requestStorageAccess()`, but then performs a same-origin navigation (for example reloading itself). In such cases, the storage access is carried over from the previous navigation.
     * In older spec versions, the access was per-page (Safari is the only browser still using this model). When one embed received third-party cookie access via `requestStorageAccess()`, all other same-site embeds would automatically receive access. This was not desirable behavior from a security standpoint — for example, if `shop.example.com` embedded `locator.users.com` to allow users to use their location info while shopping, and `locator.users.com` called `requestStorageAccess()`, `shop.example.com` and any other sites it embeds would be able to access its cookies, but also access cookies from `private.users.com`, which is not intended to be embedded. Read more about the motivations behind this change.
  5. Once access is granted, a permission key is stored in the browser with the structure `<top-level site, embedded site>`. For example, if the embedding site is `embedder.com`, and the embed is `locator.example.com`, the key would be `<embedder.com, example.com>`. Same-site embeds (`docs.example.com`, `profile.example.com`, etc.) would then be able to call `requestStorageAccess()` and the promise would fulfill automatically, as mentioned earlier. 
     * Older spec versions used the more specific permission key structure `<top-level site, embedded origin>`, which meant that same-site, cross-origin embeds didn't match the permission key and had to go through the whole process separately.


Note: In cases where a top-level site has its cookies partitioned, the Storage Access API isn't required, as sharing the cookies by default has no privacy risk.
## Security measures
Several different security measures could cause a `Document.requestStorageAccess()` call to fail. Check the below list if you are having trouble getting a request to work:
  1. The call must be associated with a user gesture (transient activation) such as a tap or click. This prevents embedded content on the page from spamming the browser or user with excessive access requests. Note that this isn't required if:
     * Permission to use the API has already been granted, for example by another same-site resource calling `requestStorageAccess()`.
     * The caller is a top-level document or same-site to the top-level document. In such cases, `requestStorageAccess()` probably doesn't need to be called at all.
  2. The document and top-level document must not have a `null` origin.
  3. Origins that have never been interacted with as a first party do not have a notion of first-party storage. From the user's perspective, they only have a third-party relationship with that origin. Access requests are automatically denied if the browser detects that the user hasn't interacted with the embedded content in a first-party context recently (in Firefox, "recently" means within 30 days).
  4. The document's window must be a secure context.
  5. Sandboxed `<iframe>`s cannot be granted storage access by default for security reasons. The API therefore also adds the `allow-storage-access-by-user-activation` sandbox token. The embedding website needs to add this to allow storage access requests to be successful, along with `allow-scripts` and `allow-same-origin` to allow it to execute a script to call the API and execute it in an origin that can have cookies/state:
         <iframe
           sandbox="allow-storage-access-by-user-activation
                         allow-scripts
                         allow-same-origin">
           …
         </iframe>
         
  6. Usage of this feature may be blocked by a `storage-access` Permissions Policy set on your server.


Note: The document may also be required to pass additional browser-specific checks. Examples: allowlists, blocklists, on-device classification, user settings, anti-clickjacking heuristics, or prompting the user for explicit permission.
## Browser-specific variations
Although the API surface is the same, websites using the Storage Access API should expect differences in the level and extent of third-party cookie access they receive between different browsers, due to differences in their storage access policies.
### Chrome
  * Cookies must have `SameSite=None` explicitly set on them, because the default value for Chrome is `SameSite=Lax` (`SameSite=None` is the default in Firefox and Safari).
  * Cookies must have the `Secure` attribute set on them.
  * The storage access grants are phased out after 30 days of browser usage passed without user interaction. Interaction with the embedded content extends this limit by another 30 days. This doesn't occur when `Document.requestStorageAccessFor()` is called because the user is already on the page.


### Firefox
  * If the embedded origin `tracker.example` has already obtained third-party cookie access on the top-level origin `foo.example`, and the user visits a page from `foo.example` embedding a page from `tracker.example` again in less than 30 days, the embedded origin will have third-party cookie access immediately when loading.
  * The storage access grants are phased out after 30 calendar days have passed.


Documentation for Firefox's new storage access policy for blocking tracking cookies includes a detailed description of the scope of storage access grants.
### Safari
  * The storage access grants are phased out after 30 days of browser usage passed without user interaction. Successful use of the Storage Access API resets this counter.


## Examples
  * See Using the Storage Access API for an implementation guide with code examples.


## API methods
`Document.hasStorageAccess()`
    
Returns a `Promise` that resolves with a boolean value indicating whether the document has access to third-party cookies.
`Document.hasUnpartitionedCookieAccess()`
    
New name for `Document.hasStorageAccess()`.
`Document.requestStorageAccess()`
    
Allows content loaded in a third-party context (i.e., embedded in an `<iframe>`) to request access to third-party cookies and unpartitioned state; returns a `Promise` that resolves if the access was granted, and rejects if access was denied.
`Document.requestStorageAccessFor()` Experimental
    
A proposed extension to the Storage Access API that allows top-level sites to request third-party cookie access on behalf of embedded content originating from another site in the same related website set. Returns a `Promise` that resolves if the access was granted, and rejects if access was denied.
Note: User interaction propagates to the promise returned by these methods, allowing the callers to take actions requiring user interaction without requiring a second click. For example, a caller could open a pop-up window from the resolved promise without triggering Firefox's pop-up blocker.
### Additions to other APIs
`Permissions.query()`, the `"storage-access"` feature name
    
In supporting browsers, this can query whether third-party cookie access has been granted in general, that is, to another same-site embed. If so, you can call `requestStorageAccess()` without user interaction, and the promise will resolve automatically.
`Permissions.query()`, the `"top-level-storage-access"` feature name  Experimental
    
A separate feature name used to query whether permission to access third-party cookies has already been granted via `requestStorageAccessFor()`. If so, you don't need to call `requestStorageAccessFor()` again.
>
### api.Document.hasStorageAccess
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Storage_Access_API` 119 85 65 105 11.1 120 65 80 11.3 25.0 120 11.3  
### api.Document.hasUnpartitionedCookieAccess
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Storage_Access_API` 125 125 No 111 No 125 No 83 No 27.0 125 No  
### api.Document.requestStorageAccess
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Storage_Access_API` 119 85 65 105 11.1Client-side storage access granted per-page (see explanation) 120 65 80 11.3Client-side storage access granted per-page (see explanation) 25.0 No 11.3Client-side storage access granted per-page (see explanation)  
`types_parameter` 125 No No 111 No 125 No 83 No 27.0 No No  
### api.Document.requestStorageAccessFor
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Storage_Access_API` 119Requires the calling top-level page and the embedded document (that the storage access is being requested for) to be part of the same related website set. 119Requires the calling top-level page and the embedded document (that the storage access is being requested for) to be part of the same related website set. No 105Requires the calling top-level page and the embedded document (that the storage access is being requested for) to be part of the same related website set. No 119Requires the calling top-level page and the embedded document (that the storage access is being requested for) to be part of the same related website set. No 79Requires the calling top-level page and the embedded document (that the storage access is being requested for) to be part of the same related website set. No 25.0Requires the calling top-level page and the embedded document (that the storage access is being requested for) to be part of the same related website set. No No  
### api.Permissions.permission_storage-access
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Storage_Access_API` 119 85 117 105 No 120 117 80 No 25.0 No No  
  * Using the Storage Access API
  * Introducing Storage Access API (WebKit blog)


# EXT_disjoint_timer_query extension
The EXT_disjoint_timer_query extension is part of the WebGL API and provides a way to measure the duration of a set of GL commands, without stalling the rendering pipeline.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension should be available in WebGL1 contexts only. `EXT_disjoint_timer_query_webgl2` is available in WebGL 2 contexts.
In WebGL 2, the OpenGL method `getQueryObject()` is renamed to `WebGL2RenderingContext.getQueryParameter`. In WebGL 2, other queries (such as occlusion queries and primitive queries) are possible using `WebGLQuery` objects.
## Types
This extension exposes a new type:
`GLuint64EXT`
    
Unsigned 64-bit integer number.
## Constants
This extension exposes seven new constants.
`ext.QUERY_COUNTER_BITS_EXT`
    
A `GLint` indicating the number of bits used to hold the query result for the given target.
`ext.CURRENT_QUERY_EXT`
    
A `WebGLQuery` object, which is the currently active query for the given target.
`ext.QUERY_RESULT_EXT`
    
A `GLuint64EXT` containing the query result.
`ext.QUERY_RESULT_AVAILABLE_EXT`
    
A `GLboolean` indicating whether or not a query result is available.
`ext.TIME_ELAPSED_EXT`
    
Elapsed time (in nanoseconds).
`ext.TIMESTAMP_EXT`
    
The current time.
`ext.GPU_DISJOINT_EXT`
    
A `GLboolean` indicating whether or not the GPU performed any disjoint operation.
## Instance methods
This extension exposes eight new methods.
`ext.createQueryEXT()`
    
Creates a new `WebGLQuery`.
`ext.deleteQueryEXT()`
    
Deletes a given `WebGLQuery`.
`ext.isQueryEXT()`
    
Returns `true` if a given object is a valid `WebGLQuery`.
`ext.beginQueryEXT()`
    
The timer starts when all commands prior to `beginQueryEXT` have been fully executed.
`ext.endQueryEXT()`
    
The timer stops when all commands prior to `endQueryEXT` have been fully executed.
`ext.queryCounterEXT()`
    
Records the current time into the corresponding query object.
`ext.getQueryEXT()`
    
Returns information about a query target.
`ext.getQueryObjectEXT()`
    
Return the state of a query object.
## Examples
    
    const ext = gl.getExtension("EXT_disjoint_timer_query");
    
  * `WebGLRenderingContext.getExtension()`


# SVGAnimatedLength
The `SVGAnimatedLength` interface represents attributes of type <length> which can be animated.
## Instance properties
`baseVal` Read only
    
An `SVGLength` representing the base value of the given attribute before applying any animations.
`animVal` Read only
    
If the given attribute or property is being animated, an `SVGLength` containing the current animated value of the attribute or property. If the given attribute or property is not currently being animated, an `SVGLength` containing the same value as `baseVal`.
## Instance methods
This interface does not implement any specific methods.
  * `SVGLength`


# USBDevice
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USBDevice` interface of the WebUSB API provides access to metadata about a paired USB device and methods for controlling it.
## Instance properties
`USBDevice.configuration` Read only Experimental
    
A `USBConfiguration` object for the currently selected interface for a paired USB device.
`USBDevice.configurations` Read only Experimental
    
An `array` of device-specific interfaces for controlling a paired USB device.
`USBDevice.deviceClass` Read only Experimental
    
One of three properties that identify USB devices for the purpose of loading a USB driver that will work with that device. The other two properties are `USBDevice.deviceSubclass` and `USBDevice.deviceProtocol`.
`USBDevice.deviceProtocol` Read only Experimental
    
One of three properties that identify USB devices for the purpose of loading a USB driver that will work with that device. The other two properties are `USBDevice.deviceClass` and `USBDevice.deviceSubclass`.
`USBDevice.deviceSubclass` Read only Experimental
    
One of three properties that identify USB devices for the purpose of loading a USB driver that will work with that device. The other two properties are `USBDevice.deviceClass` and `USBDevice.deviceProtocol`.
`USBDevice.deviceVersionMajor` Read only Experimental
    
The major version number of the device in a semantic versioning scheme.
`USBDevice.deviceVersionMinor` Read only Experimental
    
The minor version number of the device in a semantic versioning scheme.
`USBDevice.deviceVersionSubminor` Read only Experimental
    
The patch version number of the device in a semantic versioning scheme.
`USBDevice.manufacturerName` Read only Experimental
    
The name of the organization that manufactured the USB device.
`USBDevice.opened` Read only Experimental
    
Indicates whether a session has been started with a paired USB device.
`USBDevice.productId` Read only Experimental
    
The manufacturer-defined code that identifies a USB device.
`USBDevice.productName` Read only Experimental
    
The manufacturer-defined name that identifies a USB device.
`USBDevice.serialNumber` Read only Experimental
    
The manufacturer-defined serial number for the specific USB device.
`USBDevice.usbVersionMajor` Read only Experimental
    
One of three properties that declare the USB protocol version supported by the device. The other two properties are `USBDevice.usbVersionMinor` and `USBDevice.usbVersionSubminor`.
`USBDevice.usbVersionMinor` Read only Experimental
    
One of three properties that declare the USB protocol version supported by the device. The other two properties are `USBDevice.usbVersionMajor` and `USBDevice.usbVersionSubminor`.
`USBDevice.usbVersionSubminor` Read only Experimental
    
One of three properties that declare the USB protocol version supported by the device. The other two properties are `USBDevice.usbVersionMajor` and `USBDevice.usbVersionMinor`.
`USBDevice.vendorId` Read only Experimental
    
The official usb.org-assigned vendor ID.
## Instance methods
`USBDevice.claimInterface()` Experimental
    
Returns a `Promise` that resolves when the requested interface is claimed for exclusive access.
`USBDevice.clearHalt()` Experimental
    
Returns a `Promise` that resolves when a halt condition is cleared.
`USBDevice.controlTransferIn()` Experimental
    
Returns a `Promise` that resolves with a `USBInTransferResult` when a command or status operation has been transmitted to the USB device.
`USBDevice.controlTransferOut()` Experimental
    
Returns a `Promise` that resolves with a `USBOutTransferResult` when a command or status operation has been transmitted from the USB device.
`USBDevice.close()` Experimental
    
Returns a `Promise` that resolves when all open interfaces are released and the device session has ended.
`USBDevice.forget()` Experimental
    
Returns a `Promise` that resolves after all open interfaces are released, the device session has ended, and the permission is reset.
`USBDevice.isochronousTransferIn()` Experimental
    
Returns a `Promise` that resolves with a `USBIsochronousInTransferResult` when time sensitive information has been transmitted to the USB device.
`USBDevice.isochronousTransferOut()` Experimental
    
Returns a `Promise` that resolves with a `USBIsochronousOutTransferResult` when time sensitive information has been transmitted from the USB device.
`USBDevice.open()` Experimental
    
Returns a `Promise` that resolves when a device session has started.
`USBDevice.releaseInterface()` Experimental
    
Returns a `Promise` that resolves when a claimed interface is released from exclusive access.
`USBDevice.reset()` Experimental
    
Returns a `Promise` that resolves when the device is reset and all app operations canceled and their promises rejected.
`USBDevice.selectAlternateInterface()` Experimental
    
Returns a `Promise` that resolves when the specified alternative endpoint is selected.
`USBDevice.selectConfiguration()` Experimental
    
Returns a `Promise` that resolves when the specified configuration is selected.
`USBDevice.transferIn()` Experimental
    
Returns a `Promise` that resolves with a `USBInTransferResult` when bulk or interrupt data is received from the USB device.
`USBDevice.transferOut()` Experimental
    
Returns a `Promise` that resolves with a `USBOutTransferResult` when bulk or interrupt data is sent to the USB device.
# SVGNumber
The `SVGNumber` interface corresponds to the `<number>` basic data type.
An `SVGNumber` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
## Instance properties
`SVGNumber.value`
    
A float representing the number.
Note: If the `SVGNumber` is read-only, a `DOMException` with the code NO_MODIFICATION_ALLOWED_ERR is raised on an attempt to change the value.
## Instance methods
This interface doesn't provide any specific methods.
# WebRTC API
WebRTC (Web Real-Time Communication) is a technology that enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary. The set of standards that comprise WebRTC makes it possible to share data and perform teleconferencing peer-to-peer, without requiring that the user install plug-ins or any other third-party software.
WebRTC consists of several interrelated APIs and protocols which work together to achieve this. The documentation you'll find here will help you understand the fundamentals of WebRTC, how to set up and use both data and media connections, and more.
## WebRTC concepts and usage
WebRTC serves multiple purposes; together with the Media Capture and Streams API, they provide powerful multimedia capabilities to the Web, including support for audio and video conferencing, file exchange, screen sharing, identity management, and interfacing with legacy telephone systems including support for sending DTMF (touch-tone dialing) signals. Connections between peers can be made without requiring any special drivers or plug-ins, and can often be made without any intermediary servers.
Connections between two peers are represented by the `RTCPeerConnection` interface. Once a connection has been established and opened using `RTCPeerConnection`, media streams (`MediaStream`s) and/or data channels (`RTCDataChannel`s) can be added to the connection.
Media streams can consist of any number of tracks of media information; tracks, which are represented by objects based on the `MediaStreamTrack` interface, may contain one of a number of types of media data, including audio, video, and text (such as subtitles or even chapter names). Most streams consist of at least one audio track and likely also a video track, and can be used to send and receive both live media or stored media information (such as a streamed movie).
You can also use the connection between two peers to exchange arbitrary binary data using the `RTCDataChannel` interface. This can be used for back-channel information, metadata exchange, game status packets, file transfers, or even as a primary channel for data transfer.
### Interoperability
WebRTC is in general well supported in modern browsers, but some incompatibilities remain. The adapter.js library is a shim to insulate apps from these incompatibilities.
## WebRTC reference
Because WebRTC provides interfaces that work together to accomplish a variety of tasks, we have divided up the reference by category. Please see the sidebar for an alphabetical list.
### Connection setup and management
These interfaces, dictionaries, and types are used to set up, open, and manage WebRTC connections. Included are interfaces representing peer media connections, data channels, and interfaces used when exchanging information on the capabilities of each peer in order to select the best possible configuration for a two-way media connection.
#### Interfaces
`RTCPeerConnection`
    
Represents a WebRTC connection between the local computer and a remote peer. It is used to handle efficient streaming of data between the two peers.
`RTCDataChannel`
    
Represents a bi-directional data channel between two peers of a connection.
`RTCDataChannelEvent`
    
Represents events that occur while attaching a `RTCDataChannel` to a `RTCPeerConnection`. The only event sent with this interface is `datachannel`.
`RTCSessionDescription`
    
Represents the parameters of a session. Each `RTCSessionDescription` consists of a description `type` indicating which part of the offer/answer negotiation process it describes and of the SDP descriptor of the session.
`RTCStatsReport`
    
Provides information detailing statistics for a connection or for an individual track on the connection; the report can be obtained by calling `RTCPeerConnection.getStats()`.
`RTCIceCandidate`
    
Represents a candidate Interactive Connectivity Establishment (ICE) server for establishing an `RTCPeerConnection`.
`RTCIceTransport`
    
Represents information about an ICE transport.
`RTCPeerConnectionIceEvent`
    
Represents events that occur in relation to ICE candidates with the target, usually an `RTCPeerConnection`. Only one event is of this type: `icecandidate`.
`RTCRtpSender`
    
Manages the encoding and transmission of data for a `MediaStreamTrack` on an `RTCPeerConnection`.
`RTCRtpReceiver`
    
Manages the reception and decoding of data for a `MediaStreamTrack` on an `RTCPeerConnection`.
`RTCTrackEvent`
    
The interface used to represent a `track` event, which indicates that an `RTCRtpReceiver` object was added to the `RTCPeerConnection` object, indicating that a new incoming `MediaStreamTrack` was created and added to the `RTCPeerConnection`.
`RTCSctpTransport`
    
Provides information which describes a Stream Control Transmission Protocol (SCTP) transport and also provides a way to access the underlying Datagram Transport Layer Security (DTLS) transport over which SCTP packets for all of an `RTCPeerConnection`'s data channels are sent and received.
#### Events
`bufferedamountlow`
    
The amount of data currently buffered by the data channel—as indicated by its `bufferedAmount` property—has decreased to be at or below the channel's minimum buffered data size, as specified by `bufferedAmountLowThreshold`.
`close`
    
The data channel has completed the closing process and is now in the `closed` state. Its underlying data transport is completely closed at this point. You can be notified before closing completes by watching for the `closing` event instead.
`closing`
    
The `RTCDataChannel` has transitioned to the `closing` state, indicating that it will be closed soon. You can detect the completion of the closing process by watching for the `close` event.
`connectionstatechange`
    
The connection's state, which can be accessed in `connectionState`, has changed.
`datachannel`
    
A new `RTCDataChannel` is available following the remote peer opening a new data channel. This event's type is `RTCDataChannelEvent`.
`error`
    
An `RTCErrorEvent` indicating that an error occurred on the data channel.
`error`
    
An `RTCErrorEvent` indicating that an error occurred on the `RTCDtlsTransport`. This error will be either `dtls-failure` or `fingerprint-failure`.
`gatheringstatechange`
    
The `RTCIceTransport`'s gathering state has changed.
`icecandidate`
    
An `RTCPeerConnectionIceEvent` which is sent whenever the local device has identified a new ICE candidate which needs to be added to the local peer by calling `setLocalDescription()`.
`icecandidateerror`
    
An `RTCPeerConnectionIceErrorEvent` indicating that an error has occurred while gathering ICE candidates.
`iceconnectionstatechange`
    
Sent to an `RTCPeerConnection` when its ICE connection's state—found in the `iceConnectionState` property—changes.
`icegatheringstatechange`
    
Sent to an `RTCPeerConnection` when its ICE gathering state—found in the `iceGatheringState` property—changes.
`message`
    
A message has been received on the data channel. The event is of type `MessageEvent`.
`negotiationneeded`
    
Informs the `RTCPeerConnection` that it needs to perform session negotiation by calling `createOffer()` followed by `setLocalDescription()`.
`open`
    
The underlying data transport for the `RTCDataChannel` has been successfully opened or re-opened.
`selectedcandidatepairchange`
    
The currently-selected pair of ICE candidates has changed for the `RTCIceTransport` on which the event is fired.
`track`
    
The `track` event, of type `RTCTrackEvent` is sent to an `RTCPeerConnection` when a new track is added to the connection following the successful negotiation of the media's streaming.
`signalingstatechange`
    
Sent to the peer connection when its `signalingState` has changed. This happens as a result of a call to either `setLocalDescription()` or `setRemoteDescription()`.
`statechange`
    
The state of the `RTCDtlsTransport` has changed.
`statechange`
    
The state of the `RTCIceTransport` has changed.
`statechange`
    
The state of the `RTCSctpTransport` has changed.
`rtctransform`
    
An encoded video or audio frame is ready to process using a transform stream in a worker.
#### Types
`RTCSctpTransport.state`
    
Indicates the state of an `RTCSctpTransport` instance.
### Identity and security
These APIs are used to manage user identity and security, in order to authenticate the user for a connection.
`RTCIdentityProvider`
    
Enables a user agent is able to request that an identity assertion be generated or validated.
`RTCIdentityAssertion`
    
Represents the identity of the remote peer of the current connection. If no peer has yet been set and verified this interface returns `null`. Once set it can't be changed.
`RTCIdentityProviderRegistrar`
    
Registers an identity provider (idP).
`RTCCertificate`
    
Represents a certificate that an `RTCPeerConnection` uses to authenticate.
### Telephony
These interfaces and events are related to interactivity with Public-Switched Telephone Networks (PSTNs). They're primarily used to send tone dialing sounds—or packets representing those tones—across the network to the remote peer.
#### Interfaces
`RTCDTMFSender`
    
Manages the encoding and transmission of Dual-Tone Multi-Frequency (DTMF) signaling for an `RTCPeerConnection`.
`RTCDTMFToneChangeEvent`
    
Used by the `tonechange` event to indicate that a DTMF tone has either begun or ended. This event does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated).
#### Events
`tonechange`
    
Either a new DTMF tone has begun to play over the connection, or the last tone in the `RTCDTMFSender`'s `toneBuffer` has been sent and the buffer is now empty. The event's type is `RTCDTMFToneChangeEvent`.
### Encoded Transforms
These interfaces and events are used to process incoming and outgoing encoded video and audio frames using a transform stream running in a worker.
#### Interfaces
`RTCRtpScriptTransform`
    
An interface for inserting transform stream(s) running in a worker into the RTC pipeline.
`RTCRtpScriptTransformer`
    
The worker-side counterpart of an `RTCRtpScriptTransform` that passes options from the main thread, along with a readable stream and writeable stream that can be used to pipe encoded frames through a `TransformStream`.
`RTCEncodedVideoFrame`
    
Represents an encoded video frame to be transformed in the RTC pipeline.
`RTCEncodedAudioFrame`
    
Represents an encoded audio frame to be transformed in the RTC pipeline.
#### Properties
`RTCRtpReceiver.transform`
    
A property used to insert a transform stream into the receiver pipeline for incoming encoded video and audio frames.
`RTCRtpSender.transform`
    
A property used to insert a transform stream into the sender pipeline for outgoing encoded video and audio frames.
#### Events
`rtctransform`
    
An RTC transform is ready to run in the worker, or an encoded video or audio frame is ready to process.
## Guides
Introduction to the Real-time Transport Protocol (RTP)
    
The Real-time Transport Protocol (RTP), defined in RFC 3550, is an IETF standard protocol to enable real-time connectivity for exchanging data that needs real-time priority. This article provides an overview of what RTP is and how it functions in the context of WebRTC.
Introduction to WebRTC protocols
    
This article introduces the protocols on top of which the WebRTC API is built.
WebRTC connectivity
    
A guide to how WebRTC connections work and how the various protocols and interfaces can be used together to build powerful communication apps.
Lifetime of a WebRTC session
    
WebRTC lets you build peer-to-peer communication of arbitrary data, audio, or video—or any combination thereof—into a browser application. In this article, we'll look at the lifetime of a WebRTC session, from establishing the connection all the way through closing the connection when it's no longer needed.
Establishing a connection: The perfect negotiation pattern
    
Perfect negotiation is a design pattern which is recommended for your signaling process to follow, which provides transparency in negotiation while allowing both sides to be either the offerer or the answerer, without significant coding needed to differentiate the two.
Signaling and two-way video calling
    
A tutorial and example which turns a WebSocket-based chat system created for a previous example and adds support for opening video calls among participants. The chat server's WebSocket connection is used for WebRTC signaling.
Codecs used by WebRTC
    
A guide to the codecs which WebRTC requires browsers to support as well as the optional ones supported by various popular browsers. Included is a guide to help you choose the best codecs for your needs.
Using WebRTC data channels
    
This guide covers how you can use a peer connection and an associated `RTCDataChannel` to exchange arbitrary data between two peers.
Using DTMF with WebRTC
    
WebRTC's support for interacting with gateways that link to old-school telephone systems includes support for sending DTMF tones using the `RTCDTMFSender` interface. This guide shows how to do so.
Using WebRTC Encoded Transforms
    
This guide shows how a web application can modify incoming and outgoing WebRTC encoded video and audio frames, using a `TransformStream` running into a worker.
## Tutorials
Improving compatibility using WebRTC adapter.js
    
The WebRTC organization provides on GitHub the WebRTC adapter to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.
A simple RTCDataChannel sample
    
The `RTCDataChannel` interface is a feature which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the WebSocket API, so that the same programming model can be used for each.
Building an internet connected phone with Peer.js
    
This tutorial is a step-by-step guide on how to build a phone using Peer.js
### WebRTC-proper protocols
  * Application Layer Protocol Negotiation for Web Real-Time Communications
  * WebRTC Audio Codec and Processing Requirements
  * RTCWeb Data Channels
  * RTCWeb Data Channel Protocol
  * Web Real-Time Communication (WebRTC): Media Transport and Use of RTP
  * WebRTC Security Architecture
  * Transports for RTCWEB


### Related supporting protocols
  * Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocol
  * Session Traversal Utilities for NAT (STUN)
  * URI Scheme for the Session Traversal Utilities for NAT (STUN) Protocol
  * Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers
  * An Offer/Answer Model with Session Description Protocol (SDP)
  * Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization


  * `MediaDevices`
  * `MediaStreamEvent`
  * `MediaStreamTrack`
  * `MessageEvent`
  * `MediaStream`
  * Media Capture and Streams API
  * Firefox multistream and renegotiation for Jitsi Videobridge
  * Peering Through the WebRTC Fog with SocketPeer
  * Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics
  * Web media technologies


# PerformanceEventTiming
The `PerformanceEventTiming` interface of the Event Timing API provides insights into the latency of certain event types triggered by user interaction.
## Description
This API enables visibility into slow events by providing event timestamps and duration for certain event types (see below). For example, you can monitor the time between a user action and the start of its event handler, or the time an event handler takes to run.
This API is particularly useful for measuring the Interaction to Next Paint (INP): the longest time (minus some outliers) from the point when a user interacts with your app to the point until the browser was actually able to respond to that interaction.
You typically work with `PerformanceEventTiming` objects by creating a `PerformanceObserver` instance and then calling its `observe()` method, passing in `"event"` or `"first-input"` as the value of the `type` option. The `PerformanceObserver` object's callback will then be called with a list of `PerformanceEventTiming` objects which you can analyze. See the example below for more.
By default, `PerformanceEventTiming` entries are exposed when their `duration` is 104ms or greater. Research suggests that user input that is not handled within 100ms is considered slow and 104ms is the first multiple of 8 greater than 100ms (for security reasons, this API is rounded to the nearest multiple of 8ms). However, you can set the `PerformanceObserver` to a different threshold using the `durationThreshold` option in the `observe()` method.
This interface inherits methods and properties from its parent, `PerformanceEntry`:
PerformanceEntry  PerformanceEventTiming 
### Events exposed
The following event types are exposed by the Event Timing API:
Click events `auxclick`, `click`, `contextmenu`, `dblclick`  
Composition events `compositionend`, `compositionstart`, `compositionupdate`  
Drag & drop events `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, `drop`  
Input events `beforeinput`, `input`  
Keyboard events `keydown`, `keypress`, `keyup`  
Mouse events `mousedown`, `mouseenter`, `mouseleave`, `mouseout`, `mouseover`, `mouseup`  
Pointer events `pointerover`, `pointerenter`, `pointerdown`, `pointerup`, `pointercancel`, `pointerout`, `pointerleave`, `gotpointercapture`, `lostpointercapture`  
Touch events `touchstart`, `touchend`, `touchcancel`  
Note that the following events are not included in the list because they are continuous events and no meaningful event counts or performance metrics can be obtained at this point: `mousemove`, `pointermove`, `pointerrawupdate`, `touchmove`, `wheel`, `drag`.
To get a list of all exposed events, you can also look up keys in the `performance.eventCounts` map:
    
    const exposedEventsList = [...performance.eventCounts.keys()];
    
## Constructor
This interface has no constructor on its own. See the example below for how to typically get the information the `PerformanceEventTiming` interface holds.
## Instance properties
This interface extends the following `PerformanceEntry` properties for event timing performance entry types by qualifying them as follows:
`PerformanceEntry.duration` Read only
    
Returns a `DOMHighResTimeStamp` representing the time from `startTime` to the next rendering paint (rounded to the nearest 8ms).
`PerformanceEntry.entryType` Read only
    
Returns `"event"` (for long events) or `"first-input"` (for the first user interaction).
`PerformanceEntry.name` Read only
    
Returns the associated event's type.
`PerformanceEntry.startTime` Read only
    
Returns a `DOMHighResTimeStamp` representing the associated event's `timestamp` property. This is the time the event was created and can be considered as a proxy for the time the user interaction occurred.
This interface also supports the following properties:
`PerformanceEventTiming.cancelable` Read only
    
Returns the associated event's `cancelable` property.
`PerformanceEventTiming.interactionId` Read only Experimental
    
Returns the ID that uniquely identifies the user interaction which triggered the associated event.
`PerformanceEventTiming.processingStart` Read only
    
Returns a `DOMHighResTimeStamp` representing the time at which event dispatch started. To measure the time between a user action and the time the event handler starts to run, calculate `processingStart-startTime`.
`PerformanceEventTiming.processingEnd` Read only
    
Returns a `DOMHighResTimeStamp` representing the time at which the event dispatch ended. To measure the time the event handler took to run, calculate `processingEnd-processingStart`.
`PerformanceEventTiming.target` Read only
    
Returns the associated event's last target, if it is not removed.
## Instance methods
`PerformanceEventTiming.toJSON()`
    
Returns a JSON representation of the `PerformanceEventTiming` object.
## Examples
>
### Getting event timing information
To get event timing information, create a `PerformanceObserver` instance and then call its `observe()` method, passing in `"event"` or `"first-input"` as the value of the `type` option. You also need to set `buffered` to `true` to get access to events the user agent buffered while constructing the document. The `PerformanceObserver` object's callback will then be called with a list of `PerformanceEventTiming` objects which you can analyze.
    
    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        // Full duration
        const duration = entry.duration;
    
        // Input delay (before processing event)
        const delay = entry.processingStart - entry.startTime;
    
        // Synchronous event processing time
        // (between start and end dispatch)
        const eventHandlerTime = entry.processingEnd - entry.processingStart;
        console.log(`Total duration: ${duration}`);
        console.log(`Event delay: ${delay}`);
        console.log(`Event handler duration: ${eventHandlerTime}`);
      });
    });
    
    // Register the observer for events
    observer.observe({ type: "event", buffered: true });
    
You can also set a different `durationThreshold`. The default is 104ms and the minimum possible duration threshold is 16ms.
    
    observer.observe({ type: "event", durationThreshold: 16, buffered: true });
    
  * Intersection Observer API
  * Page Visibility API


# AbortSignal
Note: This feature is available in Web Workers.
The `AbortSignal` interface represents a signal object that allows you to communicate with an asynchronous operation (such as a fetch request) and abort it if required via an `AbortController` object.
EventTarget  AbortSignal 
## Instance properties
Also inherits properties from its parent interface, `EventTarget`.
`AbortSignal.aborted` Read only
    
A Boolean that indicates whether the request(s) the signal is communicating with is/are aborted (`true`) or not (`false`).
`AbortSignal.reason` Read only
    
A JavaScript value providing the abort reason, once the signal has aborted.
## Static methods
Also inherits methods from its parent interface, `EventTarget`.
`AbortSignal.abort()`
    
Returns an `AbortSignal` instance that is already set as aborted.
`AbortSignal.any()`
    
Returns an `AbortSignal` that aborts when any of the given abort signals abort.
`AbortSignal.timeout()`
    
Returns an `AbortSignal` instance that will automatically abort after a specified time.
## Instance methods
Also inherits methods from its parent interface, `EventTarget`.
`AbortSignal.throwIfAborted()`
    
Throws the signal's abort `reason` if the signal has been aborted; otherwise it does nothing.
## Events
Also inherits events from its parent interface, `EventTarget`.
Listen to this event using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`abort`
    
Invoked when the asynchronous operations the signal is communicating with is/are aborted. Also available via the `onabort` property.
## Examples
>
### Aborting a fetch operation using an explicit signal
The following snippet shows how we might use a signal to abort downloading a video using the Fetch API.
We first create an abort controller using the `AbortController()` constructor, then grab a reference to its associated `AbortSignal` object using the `AbortController.signal` property.
When the fetch request is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request, and allows us to abort it by calling `AbortController.abort()`. Below you can see that the fetch operation is aborted in the second event listener, which triggered when the abort button (`abortBtn`) is clicked.
When `abort()` is called, the `fetch()` promise rejects with a `DOMException` named `AbortError`.
    
    let controller;
    const url = "video.mp4";
    
    const downloadBtn = document.querySelector(".download");
    const abortBtn = document.querySelector(".abort");
    
    downloadBtn.addEventListener("click", fetchVideo);
    
    abortBtn.addEventListener("click", () => {
      if (controller) {
        controller.abort();
        console.log("Download aborted");
      }
    });
    
    async function fetchVideo() {
      controller = new AbortController();
      const signal = controller.signal;
    
      try {
        const response = await fetch(url, { signal });
        console.log("Download complete", response);
        // process response further
      } catch (err) {
        console.error(`Download error: ${err.message}`);
      }
    }
    
If the request is aborted after the `fetch()` call has been fulfilled but before the response body has been read, then attempting to read the response body will reject with an `AbortError` exception.
    
    async function get() {
      const controller = new AbortController();
      const request = new Request("https://example.org/get", {
        signal: controller.signal,
      });
    
      const response = await fetch(request);
      controller.abort();
      // The next line will throw `AbortError`
      const text = await response.text();
      console.log(text);
    }
    
You can find a full working example on GitHub; you can also see it running live.
### Aborting a fetch operation with a timeout
If you need to abort the operation on timeout then you can use the static `AbortSignal.timeout()` method. This returns an `AbortSignal` that will automatically timeout after a certain number of milliseconds.
The code snippet below shows how you would either succeed in downloading a file, or handle a timeout error after 5 seconds. Note that when there is a timeout the `fetch()` promise rejects with a `TimeoutError` `DOMException`. This allows code to differentiate between timeouts (for which user notification is probably required), and user aborts.
    
    const url = "video.mp4";
    
    try {
      const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
      const result = await res.blob();
      // …
    } catch (err) {
      if (err.name === "TimeoutError") {
        console.error("Timeout: It took more than 5 seconds to get the result!");
      } else if (err.name === "AbortError") {
        console.error(
          "Fetch aborted by user action (browser stop button, closing tab, etc.",
        );
      } else {
        // A network error, or some other problem.
        console.error(`Error: type: ${err.name}, message: ${err.message}`);
      }
    }
    
### Aborting a fetch with timeout or explicit abort
If you want to abort from multiple signals, you can use `AbortSignal.any()` to combine them into a single signal. The following example shows this using `fetch`:
    
    try {
      const controller = new AbortController();
      const timeoutSignal = AbortSignal.timeout(5000);
      const res = await fetch(url, {
        // This will abort the fetch when either signal is aborted
        signal: AbortSignal.any([controller.signal, timeoutSignal]),
      });
      const body = await res.json();
    } catch (e) {
      if (e.name === "AbortError") {
        // Notify the user of abort.
      } else if (e.name === "TimeoutError") {
        // Notify the user of timeout
      } else {
        // A network error, or some other problem.
        console.log(`Type: ${e.name}, Message: ${e.message}`);
      }
    }
    
Note: Unlike when using `AbortSignal.timeout()`, there is no way to tell whether the final abort was caused by a timeout.
### Implementing an abortable API
An API that needs to support aborting can accept an `AbortSignal` object, and use its state to trigger abort signal handling when needed.
A `Promise`-based API should respond to the abort signal by rejecting any unsettled promise with the `AbortSignal` abort `reason`. For example, consider the following `myCoolPromiseAPI`, which takes a signal and returns a promise. The promise is rejected immediately if the signal is already aborted, or if the abort event is detected. Otherwise it completes normally and then resolves the promise.
    
    function myCoolPromiseAPI(/* …, */ { signal }) {
      return new Promise((resolve, reject) => {
        // If the signal is already aborted, immediately throw in order to reject the promise.
        if (signal.aborted) {
          reject(signal.reason);
          return;
        }
    
        // Perform the main purpose of the API
        // Call resolve(result) when done.
    
        // Watch for 'abort' signals
        signal.addEventListener("abort", () => {
          // Stop the main operation
          // Reject the promise with the abort reason.
          reject(signal.reason);
        });
      });
    }
    
The API might then be used as shown. Note that `AbortController.abort()` is called to abort the operation.
    
    const controller = new AbortController();
    const signal = controller.signal;
    
    startSpinner();
    
    myCoolPromiseAPI({ /* …, */ signal })
      .then((result) => {})
      .catch((err) => {
        if (err.name === "AbortError") return;
        showUserErrorMessage();
      })
      .then(() => stopSpinner());
    
    controller.abort();
    
APIs that do not return promises might react in a similar manner. In some cases it may make sense to absorb the signal.
  * Fetch API
  * Abortable Fetch by Jake Archibald


# TrustedScriptURL
Note: This feature is available in Web Workers.
The `TrustedScriptURL` interface of the Trusted Types API represents a string that a developer can insert into an injection sink that will parse it as a URL of an external script. These objects are created via `TrustedTypePolicy.createScriptURL()` and therefore have no constructor.
The value of a `TrustedScriptURL` object is set when the object is created and cannot be changed by JavaScript as there is no setter exposed.
## Instance methods
`TrustedScriptURL.toJSON()`
    
Returns a JSON representation of the stored data.
`TrustedScriptURL.toString()`
    
A string containing the sanitized URL.
## Examples
The constant `sanitized` is an object created via a Trusted Types policy.
    
    const sanitized = scriptPolicy.createScriptURL(
      "https://example.com/my-script.js",
    );
    console.log(sanitized); /* a TrustedScriptURL object */
    
  * Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types


# CSSFontPaletteValuesRule
The `CSSFontPaletteValuesRule` interface represents an `@font-palette-values` at-rule.
CSSRule  CSSFontPaletteValuesRule 
## Instance properties
Inherits properties from its ancestor `CSSRule`.
`CSSFontPaletteValuesRule.name` Read only
    
A string with the name of the font palette.
`CSSFontPaletteValuesRule.fontFamily` Read only
    
A string indicating the font families on which the rule has to be applied.
`CSSFontPaletteValuesRule.basePalette` Read only
    
A string indicating the base palette associated with the rule.
`CSSFontPaletteValuesRule.overrideColors` Read only
    
A string indicating the colors of the base palette that are overwritten and the new colors.
## Instance methods
Inherits methods from its ancestor `CSSRule`.
## Examples
>
### Read associated font family using CSSOM
This example first defines an `@import` and an `@font-palette-values` at-rule. Then it reads the `@font-palette-values` rule and displays its name. As these rules live in the last stylesheet added to the document, the palette will be the second `CSSRule` returned by the last stylesheet in the document (`document.styleSheets[document.styleSheets.length-1].cssRules`). So, `rules[1]` returns a `CSSFontPaletteValuesRule` object, from which we can access `fontFamily`.
#### HTML
    
    <pre id="log">The @font-palette-values at-rule font families:</pre>
    
#### CSS
    
    @import "https://fonts.googleapis.com/css2?family=Bungee+Spice";
    
    @font-palette-values --Alternate {
      font-family: "Bungee Spice";
      override-colors:
        0 #00ffbb,
        1 #007744;
    }
    
    .alternate {
      font-palette: --Alternate;
    }
    
#### JavaScript
    
    const log = document.getElementById("log");
    
    const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
    const fontPaletteValuesRule = rules[1]; // aA CSSFontPaletteValuesRule interface
    log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;
    
#### Result
  * `@font-palette-values`


# GeolocationCoordinates
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `GeolocationCoordinates` interface represents the position and altitude of the device on Earth, as well as the accuracy with which these properties are calculated. The geographic position information is provided in terms of World Geodetic System coordinates (WGS84).
## Instance properties
The `GeolocationCoordinates` interface doesn't inherit any properties.
`GeolocationCoordinates.latitude` Read only
    
Returns a `double` representing the position's latitude in decimal degrees.
`GeolocationCoordinates.longitude` Read only
    
Returns a `double` representing the position's longitude in decimal degrees.
`GeolocationCoordinates.altitude` Read only
    
Returns a `double` representing the position's altitude in meters, relative to nominal sea level. This value can be `null` if the implementation cannot provide the data.
`GeolocationCoordinates.accuracy` Read only
    
Returns a `double` representing the accuracy of the `latitude` and `longitude` properties, expressed in meters.
`GeolocationCoordinates.altitudeAccuracy` Read only
    
Returns a `double` representing the accuracy of the `altitude` expressed in meters. This value can be `null` if the implementation cannot provide the data.
`GeolocationCoordinates.heading` Read only
    
Returns a `double` representing the direction towards which the device is facing. This value, specified in degrees, indicates how far off from heading true north the device is. `0` degrees represents true north, and the direction is determined clockwise (which means that east is `90` degrees and west is `270` degrees). If `speed` is `0` or the device is unable to provide `heading` information, `heading` is `null`.
`GeolocationCoordinates.speed` Read only
    
Returns a `double` representing the velocity of the device in meters per second. This value can be `null`.
## Instance methods
The `GeolocationCoordinates` interface doesn't inherit any methods.
`GeolocationCoordinates.toJSON()`
    
Returns a JSON representation of the `GeolocationCoordinates` object and enables serialization with `JSON.stringify()`.
  * Using the Geolocation API
  * `Geolocation`


# RTCIceCandidate
The `RTCIceCandidate` interface—part of the WebRTC API—represents a candidate Interactive Connectivity Establishment (ICE) configuration which may be used to establish an `RTCPeerConnection`.
An ICE candidate describes the protocols and routing needed for WebRTC to be able to communicate with a remote device. When starting a WebRTC peer connection, typically a number of candidates are proposed by each end of the connection, until they mutually agree upon one which describes the connection they decide will be best. WebRTC then uses that candidate's details to initiate the connection.
For details on how the ICE process works, see Lifetime of a WebRTC session. The article WebRTC connectivity provides additional useful details.
## Constructor
`RTCIceCandidate()`
    
Creates an `RTCIceCandidate` object to represent a single ICE candidate, optionally configured based on a configuration object.
Note: For backwards compatibility, the constructor also accepts as input a string containing the value of the `candidate` property instead of the configuration object.
## Instance properties
`address` Read only
    
A string containing the IP address of the candidate.
`candidate` Read only
    
A string representing the transport address for the candidate that can be used for connectivity checks. The format of this address is a `candidate-attribute` as defined in RFC 5245. This string is empty (`""`) if the `RTCIceCandidate` is an "end of candidates" indicator.
`component` Read only
    
A string which indicates whether the candidate is an RTP or an RTCP candidate; its value is either `rtp` or `rtcp`, and is derived from the `"component-id"` field in the `candidate` a-line string.
`foundation` Read only
    
Returns a string containing a unique identifier that is the same for any candidates of the same type, share the same base (the address from which the ICE agent sent the candidate), and come from the same STUN server. This is used to help optimize ICE performance while prioritizing and correlating candidates that appear on multiple `RTCIceTransport` objects.
`port` Read only
    
An integer value indicating the candidate's port number.
`priority` Read only
    
A long integer value indicating the candidate's priority.
`protocol` Read only
    
A string indicating whether the candidate's protocol is `"tcp"` or `"udp"`.
`relatedAddress` Read only
    
If the candidate is derived from another candidate, `relatedAddress` is a string containing that host candidate's IP address. For host candidates, this value is `null`.
`relatedPort` Read only
    
For a candidate that is derived from another, such as a relay or reflexive candidate, the `relatedPort` is a number indicating the port number of the candidate from which this candidate is derived. For host candidates, the `relatedPort` property is `null`.
`sdpMid` Read only
    
A string specifying the candidate's media stream identification tag which uniquely identifies the media stream within the component with which the candidate is associated, or `null` if no such association exists.
`sdpMLineIndex` Read only
    
If not `null`, `sdpMLineIndex` indicates the zero-based index number of the media description (as defined in RFC 4566) in the SDP with which the candidate is associated.
`tcpType` Read only
    
If `protocol` is `"tcp"`, `tcpType` represents the type of TCP candidate. Otherwise, `tcpType` is `null`.
`type` Read only
    
A string indicating the type of candidate as one of the strings listed on `RTCIceCandidate.type`.
`usernameFragment` Read only
    
A string containing a randomly-generated username fragment ("ice-ufrag") which ICE uses for message integrity along with a randomly-generated password ("ice-pwd"). You can use this string to verify generations of ICE generation; each generation of the same ICE process will use the same `usernameFragment`, even across ICE restarts.
## Instance methods
`toJSON()`
    
Returns a JSON representation of the `RTCIceCandidate`'s current configuration. The format of the representation is the same as the `candidateInfo` object that can optionally be passed to the `RTCIceCandidate()` constructor to configure a candidate.
## Examples
For examples, see the article Signaling and video calling, which demonstrates the entire process.
# DragEvent
The `DragEvent` interface is a DOM event that represents a drag and drop interaction. The user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another DOM element). Applications are free to interpret a drag and drop interaction in an application-specific way.
This interface inherits properties from `MouseEvent` and `Event`.
Event  UIEvent  MouseEvent  DragEvent 
## Instance properties
`DragEvent.dataTransfer` Read only
    
The data that is transferred during a drag and drop interaction.
## Constructors
Although this interface has a constructor, it is not possible to create a useful DataTransfer object from script, since `DataTransfer` objects have a processing and security model that is coordinated by the browser during drag-and-drops.
`DragEvent()`
    
Creates a synthetic and untrusted DragEvent.
## Event types
`drag`
    
This event is fired when an element or text selection is being dragged.
`dragend`
    
This event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).
`dragenter`
    
This event is fired when a dragged element or text selection enters a valid drop target.
`dragleave`
    
This event is fired when a dragged element or text selection leaves a valid drop target.
`dragover`
    
This event is fired continuously when an element or text selection is being dragged and the mouse pointer is over a valid drop target (every 50 ms WHEN mouse is not moving ELSE much faster between 5 ms (slow movement) and 1ms (fast movement) approximately. This firing pattern is different than `mouseover` ).
`dragstart`
    
This event is fired when the user starts dragging an element or text selection.
`drop`
    
This event is fired when an element or text selection is dropped on a valid drop target.
## Example
An Example of each property, constructor, event type and global event handlers is included in their respective reference page.
  * Drag and drop
  * Drag Operations
  * Recommended Drag Types


# HTMLDialogElement
The `HTMLDialogElement` interface provides methods to manipulate `<dialog>` elements. It inherits properties and methods from the `HTMLElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLDialogElement 
## Instance properties
Also inherits properties from its parent interface, `HTMLElement`.
`HTMLDialogElement.closedBy`
    
A string that sets or returns the `closedby` attribute value of the `<dialog>` element, which indicates the types of user actions that can be used to close the dialog.
`HTMLDialogElement.open`
    
A boolean value reflecting the `open` HTML attribute, indicating whether the dialog is available for interaction.
`HTMLDialogElement.returnValue`
    
A string that sets or returns the return value for the dialog.
## Instance methods
Also inherits methods from its parent interface, `HTMLElement`.
`HTMLDialogElement.close()`
    
Closes the dialog. An optional string may be passed as an argument, updating the `returnValue` of the dialog.
`HTMLDialogElement.requestClose()`
    
Requests to close the dialog. An optional string may be passed as an argument, updating the `returnValue` of the dialog.
`HTMLDialogElement.show()`
    
Displays the dialog modelessly, i.e., still allowing interaction with content outside of the dialog.
`HTMLDialogElement.showModal()`
    
Displays the dialog as a modal, over the top of any other dialogs that might be present. Everything outside the dialog are inert with interactions outside the dialog being blocked.
## Events
Also inherits events from its parent interface, `HTMLElement`.
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`cancel`
    
Fired when the dialog is requested to close, whether with the escape key, or via the `HTMLDialogElement.requestClose()` method.
`close`
    
Fired when the dialog is closed, whether with the escape key, the `HTMLDialogElement.close()` method, or via submitting a form within the dialog with `method="dialog"`.
## Examples
>
### Opening a modal dialog
The following example shows a button that, when clicked, uses the `HTMLDialogElement.showModal()` function to open a modal `<dialog>` containing a form.
While open, everything other than the modal dialog's contents is inert. You can click the Cancel button to close the dialog (via the `HTMLDialogElement.close()` function), or submit the form via the Confirm button.
The example demonstrates how you might use all the "state change" events that can be fired on the dialog: `cancel` and `close`, and the inherited events `beforetoggle`, and `toggle`.
#### HTML
    
    <!-- pop-up dialog box, containing a form -->
    <dialog id="favDialog">
      <form method="dialog">
        <p>
          <label for="favAnimal">Favorite animal:</label>
          <select id="favAnimal" name="favAnimal">
            <option></option>
            <option>Brine shrimp</option>
            <option>Red panda</option>
            <option>Spider monkey</option>
          </select>
        </p>
        <div>
          <button id="cancel" type="reset">Cancel</button>
          <button id="submit" type="submit">Confirm</button>
        </div>
      </form>
    </dialog>
    
    <div>
      <button id="updateDetails">Update details</button>
    </div>
    
#### JavaScript
##### Showing the dialog
The code first gets objects for the `<button>` elements, the `<dialog>` element, and the `<select>` element. It then adds a listener to call the `HTMLDialogElement.showModal()` function when the Update button is clicked.
    
    const updateButton = document.getElementById("updateDetails");
    const confirmButton = document.getElementById("submit");
    const cancelButton = document.getElementById("cancel");
    const dialog = document.getElementById("favDialog");
    const selectElement = document.getElementById("favAnimal");
    
    // Update button opens a modal dialog
    updateButton.addEventListener("click", () => {
      dialog.showModal();
    });
    
##### Cancel and confirm buttons
Next we add listeners to the Confirm and Cancel button `click` events. The handlers call `HTMLDialogElement.close()` with the selection value (if present) and no value, which in turn set the return value of the dialog (`HTMLDialogElement.returnValue`) to the selection value and `null`, respectively.
    
    // Confirm button closes dialog if there is a selection.
    confirmButton.addEventListener("click", () => {
      if (selectElement.value) {
        // Set dialog.returnValue to selected value
        dialog.close(selectElement.value);
      }
    });
    
    // Cancel button closes the dialog box
    cancelButton.addEventListener("click", () => {
      dialog.close(); // Set dialog.returnValue to null
    });
    
Calling `close()` also fires the `close` event, which we implement below by logging the return value of the dialog. If the Confirm button was clicked this should be the selected value in the dialog, otherwise it should be `null`.
    
    dialog.addEventListener("close", (event) => {
      log(`close_event: (dialog.returnValue: "${dialog.returnValue}")`);
    });
    
##### Cancel event
The `cancel` event is fired when "platform specific methods" are used to close the dialog, such as the `Esc` key. It is also fired when the `HTMLDialogElement.requestClose()` method is called. The event is "cancelable" which means that we could use it to prevent the dialog from closing. Here we just treat the cancel as a "close" operation, and reset the `HTMLDialogElement.returnValue` to `""` to clear any value that may have been set.
    
    dialog.addEventListener("cancel", (event) => {
      log(`cancel_event: (dialog.returnValue: "${dialog.returnValue}")`);
      dialog.returnValue = ""; // Reset value
    });
    
##### Toggle event
The `toggle` event (inherited from `HTMLElement`) is fired just after a dialog has opened or closed (but before the `closed` event).
Here we add a listener to log when the Dialog opens and closes.
Note: The `toggle` and `beforetoggle` events may not be fired at dialog elements on all browsers. On these browser versions you can instead check the `HTMLDialogElement.open` property after attempting to open/close the dialog.
    
    dialog.addEventListener("toggle", (event) => {
      log(`toggle_event: Dialog ${event.newState}`);
    });
    
##### Beforetoggle event
The `beforetoggle` event (inherited from `HTMLElement`) is a cancellable event that is fired just before a dialog is opened or closed. If needed, this can be used to prevent a dialog from showing, or to perform actions on other elements that are affected by the dialog open/close state, such as adding classes on them to trigger animations.
In this case we just log the old and new state.
    
    dialog.addEventListener("beforetoggle", (event) => {
      log(
        `beforetoggle event: oldState: ${event.oldState}, newState: ${event.newState}`,
      );
    
      // Call event.preventDefault() to prevent a dialog opening
      /*
        if (shouldCancel()) {
            event.preventDefault();
        }
      */
    });
    
#### Result
Try out the example below. Note that both `Confirm` and `Cancel` buttons result in the `close` event being fired, and that the result should reflect the selected dialog option.
>
### api.HTMLDialogElement
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`HTMLDialogElement` 37 79 98 24 15.4 37 98 24 15.4 3.0 37 15.4  
`cancel_event` 37 79 98 24 15.4 37 98 24 15.4 3.0 37 15.4  
`close` 37 79 98 24 15.4 37 98 24 15.4 3.0 37 15.4  
`close_event` 37 79 98 24 15.4 37 98 24 15.4 3.0 37 15.4  
`closedBy` 134 134 141 119 No 134 141 88 No No 134 No  
`open` 37 79 98 24 15.4 37 98 24 15.4 3.0 37 15.4  
`requestClose` 134 134 139 119 18.4 134 139 88 18.4 No 134 18.4  
`returnValue` 37 79 98 24 15.4 37 98 24 15.4 3.0 37 15.4  
`show` 37 79 98 24 15.4 37 98 24 15.4 3.0 37 15.4  
`showModal` 37 79 98 24 15.4 37 98 24 15.4 3.0 37 15.4  
### api.HTMLElement.beforetoggle_event.dialog_elements
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`HTMLDialogElement` 132 132 133 117 26 132 133 87 26 No 132 26  
### api.HTMLElement.toggle_event.dialog_elements
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`HTMLDialogElement` 132 132 133 117 26 132 133 87 26 No 132 26  
  * The HTML element implementing this interface: `<dialog>`.


# Gamepad
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Gamepad` interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id.
A Gamepad object can be returned in one of two ways: via the `gamepad` property of the `gamepadconnected` and `gamepaddisconnected` events, or by grabbing any position in the array returned by the `Navigator.getGamepads()` method.
Note: The support of gamepad features varies across different combinations of platforms and controllers. Even if the controller supports a certain feature (for example, haptic feedback), the platform may not support it for that controller.
## Instance properties
`Gamepad.axes` Read only
    
An array representing the controls with axes present on the device (e.g., analog thumb sticks).
`Gamepad.buttons` Read only
    
An array of `gamepadButton` objects representing the buttons present on the device.
`Gamepad.connected` Read only
    
A boolean indicating whether the gamepad is still connected to the system.
`Gamepad.displayId` Read only Deprecated Non-standard
    
Returns the `VRDisplay.displayId` of an associated `VRDisplay` (if relevant) — the `VRDisplay` that the gamepad is controlling the displayed scene of.
`Gamepad.hand` Read only Experimental
    
An enum defining what hand the controller is being held in, or is most likely to be held in.
`Gamepad.hapticActuators` Read only Experimental
    
An array containing `GamepadHapticActuator` objects, each of which represents haptic feedback hardware available on the controller.
`Gamepad.vibrationActuator` Read only
    
A `GamepadHapticActuator` object, which represents haptic feedback hardware available on the controller.
`Gamepad.id` Read only
    
A string containing identifying information about the controller.
`Gamepad.index` Read only
    
An integer that is auto-incremented to be unique for each device currently connected to the system.
`Gamepad.mapping` Read only
    
A string indicating whether the browser has remapped the controls on the device to a known layout.
`Gamepad.pose` Read only Experimental
    
A `GamepadPose` object representing the pose information associated with a WebVR controller (e.g., its position and orientation in 3D space).
`Gamepad.timestamp` Read only
    
A `DOMHighResTimeStamp` representing the last time the data for this gamepad was updated.
## Example
    
    window.addEventListener("gamepadconnected", (e) => {
      console.log(
        "Gamepad connected at index %d: %s. %d buttons, %d axes.",
        e.gamepad.index,
        e.gamepad.id,
        e.gamepad.buttons.length,
        e.gamepad.axes.length,
      );
    });
    
  * Using the Gamepad API
  * Gamepad API


# WebGLUniformLocation
Note: This feature is available in Web Workers.
The WebGLUniformLocation interface is part of the WebGL API and represents the location of a uniform variable in a shader program.
## Description
The `WebGLUniformLocation` object does not define any methods or properties of its own and its content is not directly accessible. When working with `WebGLUniformLocation` objects, the following methods of the `WebGLRenderingContext` are useful:
  * `WebGLRenderingContext.getUniformLocation()`
  * `WebGLRenderingContext.uniform()`


## Examples
>
### Getting an uniform location
    
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext("webgl");
    
    const location = gl.getUniformLocation(WebGLProgram, "uniformName");
    
  * `WebGLRenderingContext.getUniformLocation()`


# SVGFilterElement
The `SVGFilterElement` interface provides access to the properties of `<filter>` elements, as well as methods to manipulate them.
EventTarget  Node  Element  SVGElement  SVGFilterElement 
## Instance properties
`SVGFilterElement.href` Read only
    
An `SVGAnimatedString` that corresponds to the `href` or `xlink:href` Deprecated attribute of the given `<filter>` element.
`SVGFilterElement.filterUnits` Read only
    
An `SVGAnimatedEnumeration` that corresponds to the `filterUnits` attribute of the given `<filter>` element. Takes one of the constants defined in `SVGUnitTypes`.
`SVGFilterElement.primitiveUnits` Read only
    
An `SVGAnimatedEnumeration` that corresponds to the `primitiveUnits` attribute of the given `<filter>` element. Takes one of the constants defined in `SVGUnitTypes`.
`SVGFilterElement.x` Read only
    
An `SVGAnimatedLength` that corresponds to the `x` attribute on the given `<filter>` element.
`SVGFilterElement.y` Read only
    
An `SVGAnimatedLength` that corresponds to the `y` attribute of the given `<filter>` element.
`SVGFilterElement.width` Read only
    
An `SVGAnimatedLength` that corresponds to the `width` attribute of the given `<filter>` element.
`SVGFilterElement.height` Read only
    
An `SVGAnimatedLength` that corresponds to the `height` attribute of the given `<filter>` element.
  * `<filter>`


# SVGMetadataElement
The `SVGMetadataElement` interface corresponds to the `<metadata>` element.
EventTarget  Node  Element  SVGElement  SVGMetadataElement 
## Instance properties
This interface doesn't implement any specific properties, but inherits properties from its parent interface, `SVGElement`.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.
# PerformanceNavigationTiming
The `PerformanceNavigationTiming` interface provides methods and properties to store and retrieve metrics regarding the browser's document navigation events. For example, this interface can be used to determine how much time it takes to load or unload a document.
Only the current document is included in the performance timeline, so there is only one `PerformanceNavigationTiming` object in the performance timeline. It inherits all of the properties and methods of `PerformanceResourceTiming` and `PerformanceEntry`.
PerformanceEntry  PerformanceResourceTiming  PerformanceNavigationTiming 
The following diagram shows all of the timestamp properties defined in `PerformanceNavigationTiming`.
## Instance properties
This interface extends the following `PerformanceEntry` properties by qualifying and constraining them as follows:
`PerformanceEntry.entryType` Read only
    
Returns `"navigation"`.
`PerformanceEntry.name` Read only
    
Returns the document's URL. Note that text fragments, and any other fragment directives, are stripped from the URL.
`PerformanceEntry.startTime` Read only
    
Returns a `DOMHighResTimeStamp` with a value of `0`.
`PerformanceEntry.duration` Read only
    
Returns a `timestamp` that is the difference between the `PerformanceNavigationTiming.loadEventEnd` and `PerformanceEntry.startTime` properties.
This interface also extends the following `PerformanceResourceTiming` properties by qualifying and constraining them as follows:
`PerformanceResourceTiming.initiatorType` Read only
    
Returns `"navigation"`.
The interface also supports the following properties:
`PerformanceNavigationTiming.activationStart` Read only Experimental Non-standard
    
A `DOMHighResTimeStamp` representing the time between when a document starts prerendering and when it is activated.
`PerformanceNavigationTiming.criticalCHRestart` Read only Experimental
    
A `DOMHighResTimeStamp` representing the time at which the connection restart occurred due to `Critical-CH` HTTP response header mismatch.
`PerformanceNavigationTiming.domComplete` Read only
    
A `DOMHighResTimeStamp` representing the time immediately before the user agent sets the document's `readyState` to `"complete"`.
`PerformanceNavigationTiming.domContentLoadedEventEnd` Read only
    
A `DOMHighResTimeStamp` representing the time immediately after the current document's `DOMContentLoaded` event handler completes.
`PerformanceNavigationTiming.domContentLoadedEventStart` Read only
    
A `DOMHighResTimeStamp` representing the time immediately before the current document's `DOMContentLoaded` event handler starts.
`PerformanceNavigationTiming.domInteractive` Read only
    
A `DOMHighResTimeStamp` representing the time immediately before the user agent sets the document's `readyState` to `"interactive"`.
`PerformanceNavigationTiming.loadEventEnd` Read only
    
A `DOMHighResTimeStamp` representing the time immediately after the current document's `load` event handler completes.
`PerformanceNavigationTiming.loadEventStart` Read only
    
A `DOMHighResTimeStamp` representing the time immediately before the current document's `load` event handler starts.
`PerformanceNavigationTiming.notRestoredReasons` Read only Experimental
    
A `NotRestoredReasons` object providing report data on reasons why the current document was blocked from using the back/forward cache (bfcache) on navigation.
`PerformanceNavigationTiming.redirectCount` Read only
    
A number representing the number of redirects since the last non-redirect navigation in the current browsing context.
`PerformanceNavigationTiming.type` Read only
    
A string representing the navigation type. Either `"navigate"`, `"reload"`, or `"back_forward"`.
`PerformanceNavigationTiming.unloadEventEnd` Read only
    
A `DOMHighResTimeStamp` representing the time immediately after the current document's `unload` event handler completes.
`PerformanceNavigationTiming.unloadEventStart` Read only
    
A `DOMHighResTimeStamp` representing the time immediately before the current document's `unload` event handler starts.
## Instance methods
`PerformanceNavigationTiming.toJSON()`
    
Returns a JSON representation of the `PerformanceNavigationTiming` object.
  * `Performance.navigation`
  * `PerformanceNavigation`


# IDBOpenDBRequest
Note: This feature is available in Web Workers.
The `IDBOpenDBRequest` interface of the IndexedDB API provides access to the results of requests to open or delete databases (performed using `IDBFactory.open` and `IDBFactory.deleteDatabase`), using specific event handler attributes.
EventTarget  IDBRequest  IDBOpenDBRequest 
## Instance properties
Also inherits properties from its parents `IDBRequest` and `EventTarget`.
## Instance methods
No methods, but inherits methods from its parents `IDBRequest` and `EventTarget`.
## Events
Events defined on parent interfaces, `IDBRequest` and `EventTarget`, can also be dispatched on `IDBOpenDBRequest` objects.
Listen to these generic and specific events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
Events specific to this interface are:
`blocked`
    
Fired when an open connection to a database is blocking a `versionchange` transaction on the same database. Also available via the `onblocked` property.
`upgradeneeded`
    
Fired when an attempt was made to open a database with a version number higher than its current version. Also available via the `onupgradeneeded` property.
## Example
In the following example you can see the onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded. For a full working example, see our To-do Notifications app (view example live.)
    
    let db;
    
    // Let us open our database
    const DBOpenRequest = window.indexedDB.open("toDoList", 4);
    
    // these event handlers act on the database being opened.
    DBOpenRequest.onerror = (event) => {
      note.appendChild(document.createElement("li")).textContent =
        "Error loading database.";
    };
    
    DBOpenRequest.onsuccess = (event) => {
      note.appendChild(document.createElement("li")).textContent =
        "Database initialized.";
    
      // store the result of opening the database in the db
      // variable. This is used a lot below
      db = DBOpenRequest.result;
    
      // Run the displayData() function to populate the task
      // list with all the to-do list data already in the IDB
      displayData();
    };
    
    // This event handles the event whereby a new version of
    // the database needs to be created Either one has not
    // been created before, or a new version number has been
    // submitted via the window.indexedDB.open line above
    // it is only implemented in recent browsers
    DBOpenRequest.onupgradeneeded = (event) => {
      const db = event.target.result;
    
      db.onerror = (event) => {
        note.appendChild(document.createElement("li")).textContent =
          "Error loading database.";
      };
    
      // Create an objectStore for this database
      const objectStore = db.createObjectStore("toDoList", {
        keyPath: "taskTitle",
      });
    
      // define what data items the objectStore will contain
    
      objectStore.createIndex("hours", "hours", { unique: false });
      objectStore.createIndex("minutes", "minutes", { unique: false });
      objectStore.createIndex("day", "day", { unique: false });
      objectStore.createIndex("month", "month", { unique: false });
      objectStore.createIndex("year", "year", { unique: false });
      objectStore.createIndex("notified", "notified", { unique: false });
    };
    
  * Using IndexedDB
  * Starting transactions: `IDBDatabase`
  * Using transactions: `IDBTransaction`
  * Setting a range of keys: `IDBKeyRange`
  * Retrieving and making changes to your data: `IDBObjectStore`
  * Using cursors: `IDBCursor`
  * Reference example: To-do Notifications (View the example live).


# ImageBitmap
Note: This feature is available in Web Workers.
The `ImageBitmap` interface represents a bitmap image which can be drawn to a `<canvas>` without undue latency. It can be created from a variety of source objects using the `Window.createImageBitmap()` or `WorkerGlobalScope.createImageBitmap()` factory method. `ImageBitmap` provides an asynchronous and resource efficient pathway to prepare textures for rendering in WebGL.
`ImageBitmap` is a transferable object.
## Instance properties
`ImageBitmap.height` Read only
    
An `unsigned long` representing the height, in CSS pixels, of the `ImageBitmap`.
`ImageBitmap.width` Read only
    
An `unsigned long` representing the width, in CSS pixels, of the `ImageBitmap`.
## Instance methods
`ImageBitmap.close()`
    
Disposes of all graphical resources associated with an `ImageBitmap`.
  * `Window.createImageBitmap`
  * `WorkerGlobalScope.createImageBitmap`
  * `CanvasRenderingContext2D.drawImage()`
  * `WebGLRenderingContext.texImage2D()`
  * `OffscreenCanvas.transferToImageBitmap()`


# WebHID API
Note: This feature is available in Web Workers, except for Shared Web Workers.
A Human Interface Device (HID) is a type of device that takes input from or provides output to humans. It also refers to the HID protocol, a standard for bi-directional communication between a host and a device that is designed to simplify the installation procedure. The HID protocol was originally developed for USB devices but has since been implemented over many other protocols, including Bluetooth.
## Interfaces
`HID`
    
Provides methods for connecting to HID devices, listing attached HID devices and event handlers for connected HID devices.
`HIDDevice`
    
Represents an HID device. It's possible for a single physical device to be represented by multiple `HIDDevice` objects.
`HIDInputReportEvent`
    
Passed to the `HIDDevice` `inputreport` event when an input report is received from any associated HID device.
`HIDConnectionEvent`
    
Passed to `HID` `connect` and `disconnect` events when a device is connected or disconnected.
## Examples
You can connect to a device with the `requestDevice()` method. In this case, we select from all the available devices.
    
    const device = await navigator.hid.requestDevice({ filters: [] });
    // A popup titled `... wants to connect to a HID Device` with `Cancel` and `Connect` buttons will show up with a device list to select from.
    // Select one and click on `Connect` button. Then the device will be an array with the selected device in it.
    
We can retrieve all the devices the website has been granted access to previously and log the device names to the console.
    
    let devices = await navigator.hid.getDevices();
    devices.forEach((device) => {
      console.log(`HID: ${device.productName}`);
    });
    
We can register event listeners for disconnection of any HID devices.
    
    navigator.hid.addEventListener("disconnect", (event) => {
      console.log(`HID disconnected: ${event.device.productName}`);
      console.dir(event);
    });
    // For example, when my connected keyboard gets disconnected, the log in the console will show:
    // HID disconnected: USB Keyboard
    // {
    //    bubbles: false
    //    cancelBubble: false
    //    cancelable: false
    //    composed: false
    //    currentTarget: HID {onconnect: null, ondisconnect: null}
    //    defaultPrevented: false
    //    device: HIDDevice {oninputreport: null, opened: false, vendorId: 6700, productId: 11555, productName: "USB Keyboard", …}
    //    eventPhase: 0
    //    isTrusted: true
    //    path: []
    //    returnValue: true
    //    srcElement: HID {onconnect: null, ondisconnect: null}
    //    target: HID {onconnect: null, ondisconnect: null}
    //    timeStamp: 18176.600000023842
    //    type: "disconnect"
    // }
    
    // The event above is an instance of the HIDConnectionEvent interface.
    
# RadioNodeList
The `RadioNodeList` interface represents a collection of elements in a `<form>` returned by a call to `HTMLFormControlsCollection.namedItem()`.
NodeList  RadioNodeList 
## Instance properties
The `RadioNodeList` interface inherits the properties of `NodeList`.
`RadioNodeList.value`
    
If the underlying element collection contains radio buttons, the `value` property represents the checked radio button. On retrieving the `value` property, the `value` of the currently `checked` radio button is returned as a string. If the collection does not contain any radio buttons or none of the radio buttons in the collection is in `checked` state, the empty string is returned. On setting the `value` property, the first radio button input element whose `value` property is equal to the new value will be set to `checked`.
## Instance methods
The `RadioNodeList` interface inherits the methods of `NodeList`.
  * The `<form>`, `<input>` elements.


# EXT_blend_minmax extension
The `EXT_blend_minmax` extension is part of the WebGL API and extends blending capabilities by adding two new blend equations: the minimum or maximum color components of the source and destination colors.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default. The constants in WebGL2 are `gl.MIN` and `gl.MAX`.
## Constants
This extension adds two new constants, which can be used in `WebGLRenderingContext.blendEquation()` and `WebGLRenderingContext.blendEquationSeparate()`:
`ext.MIN_EXT`
    
Produces the minimum color components of the source and destination colors.
`ext.MAX_EXT`
    
Produces the maximum color components of the source and destination colors.
## Examples
    
    const ext = gl.getExtension("EXT_blend_minmax");
    
    gl.blendEquation(ext.MIN_EXT);
    gl.blendEquation(ext.MAX_EXT);
    
    gl.blendEquationSeparate(ext.MIN_EXT, ext.MAX_EXT);
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.blendEquation()`
  * `WebGLRenderingContext.blendEquationSeparate()`


# MediaSourceHandle
Note: This feature is available in Dedicated Web Workers.
The `MediaSourceHandle` interface of the Media Source Extensions API is a proxy for a `MediaSource` that can be transferred from a dedicated worker back to the main thread and attached to a media element via its `HTMLMediaElement.srcObject` property. `MediaSource` objects are not transferable because they are event targets, hence the need for `MediaSourceHandle`s.
It can be accessed via the `MediaSource.handle` property.
Each `MediaSource` object created inside a dedicated worker has its own distinct `MediaSourceHandle`. The `MediaSource.handle` getter will always return the `MediaSourceHandle` instance specific to the associated dedicated worker `MediaSource` instance. If the handle has already been transferred to the main thread using `postMessage()`, the handle instance in the worker is technically detached and can't be transferred again.
`MediaSourceHandle` is a transferable object.
## Instance properties
None.
## Instance methods
None.
## Examples
The `handle` property can be accessed inside a dedicated worker and the resulting `MediaSourceHandle` object is then transferred over to the thread that created the worker (in this case the main thread) via a `postMessage()` call:
    
    // Inside dedicated worker
    let mediaSource = new MediaSource();
    let handle = mediaSource.handle;
    // Transfer the handle to the context that created the worker
    postMessage({ arg: handle }, [handle]);
    
    mediaSource.addEventListener("sourceopen", () => {
      // Await sourceopen on MediaSource before creating SourceBuffers
      // and populating them with fetched media — MediaSource won't
      // accept creation of SourceBuffers until it is attached to the
      // HTMLMediaElement and its readyState is "open"
    });
    
Over in the main thread, we receive the handle via a `message` event handler, attach it to a `<video>` via its `HTMLMediaElement.srcObject` property, and `play` the video:
    
    worker.addEventListener("message", (msg) => {
      let mediaSourceHandle = msg.data.arg;
      video.srcObject = mediaSourceHandle;
      video.play();
    });
    
Note: `MediaSourceHandle`s cannot be successfully transferred into or via a shared worker or service worker.
  * MSE-in-Workers Demo by Matt Wolenetz
  * Media Source Extensions API
  * `MediaSource`
  * `SourceBuffer`


# TaskController
Note: This feature is available in Web Workers.
The `TaskController` interface of the Prioritized Task Scheduling API represents a controller object that can be used to both abort and change the priority of one or more prioritized tasks. If there is no need to change task priorities, then `AbortController` can be used instead.
A new `TaskController` instance is created using the `TaskController()` constructor, optionally specifying a priority for its associated signal (a `TaskSignal`). If not specified, the signal will have a priority of `"user-visible"` by default.
The controller's signal can be passed as an argument to the `Scheduler.postTask()` method for one or more tasks. For mutable tasks (only) the task is initialized with the signal priority, and can later be changed by calling `TaskController.setPriority()`. For immutable tasks, any priority initialized or set by the controller is ignored.
Tasks can be aborted by calling `abort()` on the controller.
AbortController  TaskController 
## Constructor
`TaskController()`
    
Creates a new `TaskController` object, optionally specifying the priority of its associated `signal`.
## Instance methods
This interface also inherits the methods of its parent, `AbortController`.
`TaskController.setPriority()`
    
Sets the priority of the controller's `signal`, and hence the priority of any tasks with which it is associated. This notifies observers of the priority change by dispatching a `prioritychange` event.
## Instance properties
This interface also inherits the properties of its parent, `AbortController`.
`TaskController.signal` Read only
    
Returns a `TaskSignal` object instance. The signal is passed to tasks so that they can be aborted or re-prioritized by the controller. The property is inherited from `AbortController`.
## Examples
Note: Additional "live" examples can be found in: Prioritized Task Scheduling API Examples.
First we create a task controller, setting the priority of its associated signal to `user-blocking`.
    
    // Create a TaskController, setting its signal priority to 'user-blocking'
    const controller = new TaskController({ priority: "user-blocking" });
    
We then add an event listener for `prioritychange` events (here `addEventListener()` is called, but we could instead assign a handler to `TaskSignal.onprioritychange`). The handler uses previousPolicy on the event to get the original priority and `TaskSignal.priority` on the event target to get the new priority.
    
    // Listen for 'prioritychange' events on the controller's signal.
    controller.signal.addEventListener("prioritychange", (event) => {
      const previousPriority = event.previousPriority;
      const newPriority = event.target.priority;
      console.log(`Priority changed from ${previousPriority} to ${newPriority}.`);
    });
    
We can also listen for `abort` events as shown below. This same approach would be used if the controller was an `AbortController`.
    
    controller.signal.addEventListener("abort", (event) => {
      console.log("Task aborted");
    });
    
Next we post the task, passing the controller signal in the optional argument. In this case the task is just an arrow function that resolves the promise by returning some text. We use `then` and `catch` to handle when the task resolves or is rejected, logging the return text or the error in each case. Note that in a later code block we abort the task, so only the `catch()` block will actually be run!
    
    // Post task using the controller's signal.
    // The signal priority sets the initial priority of the task
    scheduler
      .postTask(() => "Task execute", { signal: controller.signal })
      .then((taskResult) => {
        console.log(`${taskResult}`);
      }) // Aborted (won't run)
      .catch((error) => {
        console.log(`Catch error: ${error}`);
      }); // Log error
    
We can use the controller to manage the task. Here we can change the priority using `TaskController.setPriority()`. This will trigger the associated `prioritychange` event.
    
    // Change the priority to 'background' using the controller
    controller.setPriority("background");
    
Finally, the task can be aborted by calling `abort()` on the controller.
    
    // Abort the task
    controller.abort();
    
The console output of this example would be:
    
    The priority changed from user-blocking to background.
    Task aborted
    Catch error: AbortError
    
# EXT_float_blend extension
The WebGL API's `EXT_float_blend` extension allows blending and draw buffers with 32-bit floating-point components.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is available to both, WebGL1 and WebGL2 contexts. However, to use it, you need to enable the use of 32-bit floating-point draw buffers by enabling the extension `WEBGL_color_buffer_float` (for WebGL1) or `EXT_color_buffer_float` (for WebGL2). Doing so automatically enables `EXT_float_blend` as well, if and only if `EXT_float_blend` is also supported. Support for `EXT_color_buffer_float` does not imply support for `EXT_float_blend`.
With this extension enabled, calling `drawArrays()` or `drawElements()` with blending enabled and a draw buffer with 32-bit floating-point components will no longer result in an `INVALID_OPERATION` error.
## Usage notes
On devices that support the `EXT_float_blend` extension, it is automatically, implicitly, enabled when any one or more of `EXT_color_buffer_float`, `OES_texture_float`, or `WEBGL_color_buffer_float` are enabled. This ensures that content written before `EXT_float_blend` was exposed by WebGL will function as expected.
## Examples
    
    const gl = canvas.getContext("webgl2");
    
    // enable necessary extensions
    gl.getExtension("EXT_color_buffer_float");
    gl.getExtension("EXT_float_blend");
    
    const tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, tex);
    
    // use floating point format
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, 1, 1, 0, gl.RGBA, gl.FLOAT, null);
    
    const fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
    gl.framebufferTexture2D(
      gl.FRAMEBUFFER,
      gl.COLOR_ATTACHMENT0,
      gl.TEXTURE_2D,
      tex,
      0,
    );
    
    // enable blending
    gl.enable(gl.BLEND);
    
    gl.drawArrays(gl.POINTS, 0, 1);
    // won't throw gl.INVALID_OPERATION with the extension enabled
    
  * WebGL API
  * Using WebGL extensions
  * WebGL tutorial
  * `WebGLRenderingContext.getExtension()`
  * `EXT_color_buffer_float`
  * `WEBGL_color_buffer_float`
  * `WebGLRenderingContext.drawArrays()`
  * `WebGLRenderingContext.drawElements()`


# AbortController
Note: This feature is available in Web Workers.
The `AbortController` interface represents a controller object that allows you to abort one or more Web requests as and when desired.
You can create a new `AbortController` object using the `AbortController()` constructor. Communicating with an asynchronous operation is done using an `AbortSignal` object.
## Constructor
`AbortController()`
    
Creates a new `AbortController` object instance.
## Instance properties
`AbortController.signal` Read only
    
Returns an `AbortSignal` object instance, which can be used to communicate with, or to abort, an asynchronous operation.
## Instance methods
`AbortController.abort()`
    
Aborts an asynchronous operation before it has completed. This is able to abort fetch requests, consumption of any response bodies, and streams.
## Examples
Note: There are additional examples in the `AbortSignal` reference.
In the following snippet, we aim to download a video using the Fetch API.
We first create a controller using the `AbortController()` constructor, then grab a reference to its associated `AbortSignal` object using the `AbortController.signal` property.
When the fetch request is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling `AbortController.abort()`, as seen below in the second event listener.
When `abort()` is called, the `fetch()` promise rejects with a `DOMException` named `AbortError`.
    
    let controller;
    const url = "video.mp4";
    
    const downloadBtn = document.querySelector(".download");
    const abortBtn = document.querySelector(".abort");
    
    downloadBtn.addEventListener("click", fetchVideo);
    
    abortBtn.addEventListener("click", () => {
      if (controller) {
        controller.abort();
        console.log("Download aborted");
      }
    });
    
    async function fetchVideo() {
      controller = new AbortController();
      const signal = controller.signal;
    
      try {
        const response = await fetch(url, { signal });
        console.log("Download complete", response);
        // process response further
      } catch (err) {
        console.error(`Download error: ${err.message}`);
      }
    }
    
If the request is aborted after the `fetch()` call has been fulfilled but before the response body has been read, then attempting to read the response body will reject with an `AbortError` exception.
    
    async function get() {
      const controller = new AbortController();
      const request = new Request("https://example.org/get", {
        signal: controller.signal,
      });
    
      const response = await fetch(request);
      controller.abort();
      // The next line will throw `AbortError`
      const text = await response.text();
      console.log(text);
    }
    
You can find a full working example on GitHub; you can also see it running live.
  * Fetch API
  * Abortable Fetch by Jake Archibald


# WEBGL_lose_context extension
The WEBGL_lose_context extension is part of the WebGL API and exposes functions to simulate losing and restoring a `WebGLRenderingContext`.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is available to both, WebGL1 and WebGL2 contexts.
## Instance methods
`WEBGL_lose_context.loseContext()`
    
Simulates losing the context.
`WEBGL_lose_context.restoreContext()`
    
Simulates restoring the context.
## Examples
With this extension, you can simulate the `webglcontextlost` and `webglcontextrestored` events:
    
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext("webgl");
    
    canvas.addEventListener("webglcontextlost", (event) => {
      console.log(event);
    });
    
    gl.getExtension("WEBGL_lose_context").loseContext();
    
    // WebGLContextEvent event with type "webglcontextlost" is logged.
    
  * `WebGLRenderingContext.isContextLost()`
  * Events: `webglcontextlost`, `webglcontextrestored`, `webglcontextcreationerror`


# PresentationConnectionCloseEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PresentationConnectionCloseEvent` interface of the Presentation API is fired on a `PresentationConnection` when it is closed.
Event  PresentationConnectionCloseEvent 
## Constructor
`PresentationConnectionCloseEvent()` Experimental
    
Creates a new PresentationConnectionCloseEvent.
## Instance properties
`PresentationConnectionCloseEvent.message` Read only Experimental
    
A human-readable message that provides more information about why the connection was closed.
`PresentationConnectionCloseEvent.reason` Read only Experimental
    
Indicates why the connection was closed. This property takes one of the following values: `error`, `closed`, or `wentaway`.
# TouchEvent
The `TouchEvent` interface represents an `UIEvent` which is sent when the state of contacts with a touch-sensitive surface changes. This surface can be a touch screen or trackpad, for example. The event can describe one or more points of contact with the screen and includes support for detecting movement, addition and removal of contact points, and so forth.
Touches are represented by the `Touch` object; each touch is described by a position, size and shape, amount of pressure, and target element. Lists of touches are represented by `TouchList` objects.
Event  UIEvent  TouchEvent 
## Constructor
`TouchEvent()`
    
Creates a `TouchEvent` object.
## Instance properties
This interface inherits properties from its parent, `UIEvent` and `Event`.
`TouchEvent.altKey` Read only
    
A Boolean value indicating whether or not the alt key was down when the touch event was fired.
`TouchEvent.changedTouches` Read only
    
A `TouchList` of all the `Touch` objects representing individual points of contact whose states changed between the previous touch event and this one.
`TouchEvent.ctrlKey` Read only
    
A Boolean value indicating whether or not the control key was down when the touch event was fired.
`TouchEvent.metaKey` Read only
    
A Boolean value indicating whether or not the meta key was down when the touch event was fired.
`TouchEvent.shiftKey` Read only
    
A Boolean value indicating whether or not the shift key was down when the touch event was fired.
`TouchEvent.targetTouches` Read only
    
A `TouchList` of all the `Touch` objects that are both currently in contact with the touch surface and were also started on the same element that is the target of the event.
`TouchEvent.touches` Read only
    
A `TouchList` of all the `Touch` objects representing all current points of contact with the surface, regardless of target or changed status.
`TouchEvent.rotation` Non-standard Read only
    
Change in rotation (in degrees) since the event's beginning. Positive values indicate clockwise rotation; negative values indicate counterclockwise rotation. Initial value: `0.0`.
`TouchEvent.scale` Non-standard Read only
    
Distance between two digits since the event's beginning. Expressed as a floating-point multiple of the initial distance between the digits at the beginning of the event. Values below 1.0 indicate an inward pinch (zoom out). Values above 1.0 indicate an outward unpinch (zoom in). Initial value: `1.0`.
## Touch event types
There are several types of event that can be fired to indicate that touch-related changes have occurred. You can determine which of these has happened by looking at the event's `TouchEvent.type` property.
`touchstart`
    
Sent when the user places a touch point on the touch surface. The event's target will be the `element` in which the touch occurred.
`touchend`
    
Sent when the user removes a touch point from the surface; that is, when they lift a finger or stylus from the surface. This is also sent if the touch point moves off the edge of the surface; for example, if the user's finger slides off the edge of the screen.
The event's target is the same `element` that received the `touchstart` event corresponding to the touch point, even if the touch point has moved outside that element.
The touch point (or points) that were removed from the surface can be found in the `TouchList` specified by the `changedTouches` attribute.
`touchmove`
    
Sent when the user moves a touch point along the surface. The event's target is the same `element` that received the `touchstart` event corresponding to the touch point, even if the touch point has moved outside that element.
This event is also sent if the values of the radius, rotation angle, or force attributes of a touch point change.
Note: The rate at which `touchmove` events is sent is browser-specific, and may also vary depending on the capability of the user's hardware. You must not rely on a specific granularity of these events.
`touchcancel`
    
Sent when a touch point has been disrupted in some way. There are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as browser to browser):
  * An event of some kind occurred that canceled the touch; this might happen if a modal alert pops up during the interaction.
  * The touch point has left the document window and moved into the browser's UI area, a plug-in, or other external content.
  * The user has placed more touch points on the screen than can be supported, in which case the earliest `Touch` in the `TouchList` gets canceled.


### Using with addEventListener() and preventDefault()
It's important to note that in many cases, both touch and mouse events get sent (in order to let non-touch-specific code still interact with the user). If you use touch events, you should call `preventDefault()` to keep the mouse event from being sent as well.
The exception to this is Chrome, starting with version 56 (desktop, Chrome for Android, and Android webview), where the default value for the `passive` option for `touchstart` and `touchmove` is `true` and calls to `preventDefault()` will have no effect. To override this behavior, you need to set the `passive` option to `false`, after which calling `preventDefault()` will work as specified. The change to treat listeners as `passive` by default prevents the listener from blocking page rendering while a user is scrolling. A demo is available on the Chrome Developer site.
## Example
See the example on the main Touch events article.
  * Touch events
  * `GestureEvent`


# USBEndpoint
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USBEndpoint` interface of the WebUSB API provides information about an endpoint provided by the USB device. An endpoint represents a unidirectional data stream into or out of a device.
## Constructor
`USBEndpoint()` Experimental
    
Creates a new `USBEndpoint` object which will be populated with information about the endpoint on the provided `USBAlternateInterface` with the given endpoint number and transfer direction.
## Instance properties
`USBEndpoint.endpointNumber` Experimental
    
Returns this endpoint's "endpoint number" which is a value from 1 to 15 extracted from the `bEndpointAddress` field of the endpoint descriptor defining this endpoint. This value is used to identify the endpoint when calling methods on `USBDevice`.
`USBEndpoint.direction` Experimental
    
Returns the direction in which this endpoint transfers data, one of:
  * `"in"` \- Data is transferred from device to host.
  * `"out"` \- Data is transferred from host to device.


`USBEndpoint.type` Experimental
    
Returns the type of this endpoint, one of:
  * `"bulk"` \- Provides reliable data transfer for large payloads. Data sent through a bulk endpoint is guaranteed to be delivered or generate an error but may be preempted by other data traffic.
  * `"interrupt"` \- Provides reliable data transfer for small payloads. Data sent through an interrupt endpoint is guaranteed to be delivered or generate an error and is also given dedicated bus time for transmission.
  * `"isochronous"` \- Provides unreliable data transfer for payloads that must be delivered periodically. They are given dedicated bus time but if a deadline is missed the data is dropped.


`USBEndpoint.packetSize` Experimental
    
Returns the size of the packets that data sent through this endpoint will be divided into.
## Examples
While sometimes the developer knows ahead of time the exact layout of a device's endpoints there are cases where this must be discovered at runtime. For example, a USB serial device must provide bulk input and output endpoints but their endpoint numbers will depend on what other interfaces the device provides.
This code identifies the correct endpoints by searching for the interface implementing the USB CDC interface class and then identifying the candidate endpoints based on their type and direction.
    
    let inEndpoint = undefined;
    let outEndpoint = undefined;
    
    for (const { alternates } of device.configuration.interfaces) {
      // Only support devices with out multiple alternate interfaces.
      const alternate = alternates[0];
    
      // Identify the interface implementing the USB CDC class.
      const USB_CDC_CLASS = 10;
      if (alternate.interfaceClass !== USB_CDC_CLASS) {
        continue;
      }
    
      for (const endpoint of alternate.endpoints) {
        // Identify the bulk transfer endpoints.
        if (endpoint.type !== "bulk") {
          continue;
        }
    
        if (endpoint.direction === "in") {
          inEndpoint = endpoint.endpointNumber;
        } else if (endpoint.direction === "out") {
          outEndpoint = endpoint.endpointNumber;
        }
      }
    }
    
# Serial
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Dedicated Web Workers.
The `Serial` interface of the Web Serial API provides attributes and methods for finding and connecting to serial ports from a web page.
EventTarget  Serial 
## Instance methods
`Serial.requestPort()` Experimental
    
Returns a `Promise` that resolves with an instance of `SerialPort` representing the device chosen by the user. This method must be called via transient activation.
`Serial.getPorts()` Experimental
    
Returns a `Promise` that resolves with an array of `SerialPort` objects representing serial ports connected to the host which the origin has permission to access.
## Events
The following events are available to `Serial` via event bubbling from `SerialPort`:
`SerialPort` `connect` event
    
An event fired when a port has been connected to the device.
`SerialPort` `disconnect` event
    
An event fired when a port has been disconnected from the device.
## Examples
The following example shows how a site can check for available ports and allow the user to grant it permission to access additional ports.
On load event listeners are added for the `connect` and `disconnect` events so that the site can react when a device is connected or disconnected from the system. The `getPorts()` method is then called to see which ports are connected that the site already has access to.
If the site doesn't have access to any connected ports it has to wait until it has user activation to proceed. In this example we use a `click` event handler on a button for this task. A filter is passed to `requestPort()` with a USB vendor ID in order to limit the set of devices shown to the user to only USB devices built by a particular manufacturer.
    
    navigator.serial.addEventListener("connect", (e) => {
      // Connect to `e.target` or add it to a list of available ports.
    });
    
    navigator.serial.addEventListener("disconnect", (e) => {
      // Remove `e.target` from the list of available ports.
    });
    
    navigator.serial.getPorts().then((ports) => {
      // Initialize the list of available ports with `ports` on page load.
    });
    
    button.addEventListener("click", () => {
      const usbVendorId = 0xabcd;
      navigator.serial
        .requestPort({ filters: [{ usbVendorId }] })
        .then((port) => {
          // Connect to `port` or add it to the list of available ports.
        })
        .catch((e) => {
          // The user didn't select a port.
        });
    });
    
# USBInTransferResult
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USBInTransferResult` interface of the WebUSB API provides the result from a call to the `transferIn()` and `controlTransferIn()` methods of the `USBDevice` interface. It represents the result from requesting a transfer of data from the USB device to the USB host.
## Constructor
`USBInTransferResult()` Experimental
    
Creates a new `USBInTransferResult` object with the provided `status` and `data` fields.
## Instance properties
`USBInTransferResult.data` Read only Experimental
    
Returns a `DataView` object containing the data received from the USB device, if any.
`USBInTransferResult.status` Read only Experimental
    
Returns the status of the transfer request, one of:
  * `"ok"` \- The transfer was successful.
  * `"stall"` \- The device indicated an error by generating a stall condition on the endpoint. A stall on the control endpoint does not need to be cleared. A stall on a bulk or interrupt endpoint must be cleared by calling `clearHalt()` before `transferIn()` can be called again.
  * `"babble"` \- The device responded with more data than was expected.


# WebVTT API
Web Video Text Tracks (WebVTT) are text tracks providing specific text "cues" that are time-aligned with other media, such as video or audio tracks. The WebVTT API provides functionality to define and manipulate these text tracks. The WebVTT API is primarily used for displaying subtitles or captions that overlay with video content, but it has other uses: providing chapter information for easier navigation and generic metadata that needs to be time-aligned with audio or video content.
## Concepts and usage
A text track is a container for time-aligned text data that can be played in parallel with a video or audio track to provide a translation, transcription, or overview of the content. A video or audio media element may define tracks of different kinds or in different languages, allowing users to display appropriate tracks based on their preferences or needs.
The different kinds of text data that can be specified are listed below. Note that browsers do not necessarily support all kinds of text tracks.
  * `subtitles` provide a textual translation of spoken dialog. This is the default type of text track, and if used, the source language must be specified.
  * `captions` provide a transcription of spoken text, and may include information about other audio such as music or background noise. They are intended for hearing impaired users.
  * `chapters` provide high level navigation information, allowing users to more easily switch to relevant content.
  * `metadata` is used for any other kinds of time-aligned information.


The individual time-aligned units of text data within a track are referred to as "cues". Each cue has a start time, end time, and textual payload. It may also have "cue settings", which affect its display region, position, alignment, and/or size. Lastly, a cue may have a label, which can be used to select it for CSS styling.
A text track and cues can be defined in a file using the WebVTT File Format, and then associated with a particular `<video>` element using the `<track>` element.
Alternatively you can add a `TextTrack` to a media element in JavaScript using `HTMLMediaElement.addTextTrack()`, and then add individual `VTTCue` objects to the track with `TextTrack.addCue()`.
The `::cue` CSS pseudo-element can be used both in HTML and in a WebVTT file to style the cues for a particular element, for a particular tag within a cue, for a VTT class, or for a cue with a particular label. The `::cue-region` pseudo-element is intended for styling cues in a particular region, but is not supported in any browser.
Most important WebVTT features can be accessed using either the file format or Web API.
## Interfaces
`VTTCue`
    
Represents a cue, the text displayed in a particular timeslice of the text track associated with a media element.
`VTTRegion`
    
Represents a portion of a video element onto which a `VTTCue` can be rendered.
`TextTrack`
    
Represents a text track, which holds the list of cues to display along with an associated media element at various points while it plays.
`TextTrackCue`
    
An abstract base class for various cue types, such as `VTTCue`.
`TextTrackCueList`
    
An array-like object that represents a dynamically updating list of `TextTrackCue` objects. An instance of this type is obtained from `TextTrack.cues` in order to get all the cues in the `TextTrack` object.
`TextTrackList`
    
Represents a list of the text tracks defined for a media element, with each track represented by a separate `TextTrack` instance in the list.
### Related interfaces
`TrackEvent`
    
Part of the HTML DOM API, this is the interface for the `addtrack` and `removetrack` events that are fired when a track is added or removed from `TextTrackList` (or more generally, when a track is added/removed from an HTML media element).
### Related CSS extensions
These CSS pseudo-element are used to style cues in media with VTT tracks.
`::cue`
    
Matches cues within a selected element in media with VTT tracks.
Note: The specification defines another pseudo-element, `::cue-region`, but this is not supported by any browsers.
## Examples
>
### Using the WebVTT API to add captions
#### HTML
The following example adds a new `TextTrack` to the video, then adds cues using `TextTrack.addCue()` method calls, with constructed `VTTCue` objects as arguments.
    
    <video controls src="/shared-assets/videos/friday.mp4"></video>
    
#### CSS
    
    video {
      width: 420px;
      height: 300px;
    }
    
#### JavaScript
    
    let video = document.querySelector("video");
    let track = video.addTextTrack("captions", "Captions", "en");
    track.mode = "showing";
    track.addCue(new VTTCue(0, 0.9, "Hildy!"));
    track.addCue(new VTTCue(1, 1.4, "How are you?"));
    track.addCue(new VTTCue(1.5, 2.9, "Tell me, is the lord of the universe in?"));
    track.addCue(new VTTCue(3, 4.2, "Yes, he's in - in a bad humor"));
    track.addCue(new VTTCue(4.3, 6, "Somebody must've stolen the crown jewels"));
    console.log(track.cues);
    
#### Result
### Displaying VTT content defined in a file
This example demonstrates how to add the same set of captions to the video seen in the above Using the WebVTT API to add captions example. This time, however, we will do it declaratively using a `<track>` element.
First, let's define the captions inside a "captions.vtt" file:
    
    WEBVTT
    
    00:00.000 --> 00:00.900
    Hildy!
    
    00:01.000 --> 00:01.400
    How are you?
    
    00:01.500 --> 00:02.900
    Tell me, is the lord of the universe in?
    
    00:03.000 --> 00:04.200
    Yes, he's in - in a bad humor
    
    00:04.300 --> 00:06.000
    Somebody must've stolen the crown jewels
    
We can then add this to a `<video>` element using the `<track>` element. The following HTML would result in the same text track as the previous example:
    
    <video controls src="video.webm">
      <track default kind="captions" src="captions.vtt" srclang="en" />
    </video>
    
We can add multiple `<track>` elements to specify different kinds of tracks in multiple languages, using the `kind` and `srclang` attributes. Note that, if `kind` is specified, `srclang` must be set too. The `default` attribute may be added to just one `<track>`: this is the one that will be played if user preferences don't specify a particular language or kind.
    
    <video controls src="video.webm">
      <track default kind="captions" src="captions.vtt" srclang="en" />
      <track kind="subtitles" src="subtitles.vtt" srclang="en" />
      <track kind="descriptions" src="descriptions.vtt" srclang="en" />
      <track kind="chapters" src="chapters_de.vtt" srclang="de" />
      <track kind="subtitles" src="subtitles_en.vtt" srclang="en" />
    </video>
    
### Styling WebVTT in HTML or a stylesheet
You can style WebVTT cues by matching elements using the `::cue` pseudo-element. This allows you to modify the appearance of all cue text, or just specific elements. In this example, we'll add some styling to the first example above.
Note: It is also possible to define styles in the WebVTT File Format.
#### HTML
The HTML for the video itself is the same as we saw previously:
    
    <video controls src="/shared-assets/videos/friday.mp4"></video>
    
#### CSS
First, we use the `::cue` pseudo-element to select all video text cues, giving them larger red and a gradient background.
    
    video::cue {
      font-size: 1.5rem;
      background-image: linear-gradient(to bottom, yellow, lightyellow);
      color: red;
    }
    
We then use `::cue` to select text that has been marked up using the `u` and `b` elements and style them green and yellow, respectively.
    
    video::cue(u) {
      color: green;
    }
    
    video::cue(b) {
      color: purple;
    }
    
#### JavaScript
The JavaScript is the same as in the first example, except that we have marked up some of the cue text using `<b>` (bold) and `<u>` (underline) tags. By default the marked text would be displayed as bold or underlined (depending on the tag) but we have used the `::cue` in the previous section to also style the text to be green and purple, respectively.
    
    let video = document.querySelector("video");
    let track = video.addTextTrack("captions", "Captions", "en");
    track.mode = "showing";
    track.addCue(new VTTCue(0, 0.9, "Hildy!"));
    track.addCue(new VTTCue(1, 1.4, "How are you?"));
    track.addCue(
      new VTTCue(1.5, 2.9, "Tell me, is the <u>lord of the universe</u> in?"),
    );
    track.addCue(new VTTCue(3, 4.2, "Yes, he's in - in a bad humor"));
    track.addCue(
      new VTTCue(4.3, 6, "Somebody must've <b>stolen</b> the crown jewels"),
    );
    console.log(track.cues);
    
#### Result
### More cue styling examples
This example shows more examples of how you can mark up cue text with tags and then style them. The same markup and styles can be used in the WebVTT File Format.
The HTML and CSS for displaying the video itself is the same as for the first example above so here we only show the specific code for marking up and styling the text.
#### Styling by tag type
The first cue we create will be displayed for all 6 seconds of the video and display text marked up with `b`, `u`, `i` and `c` tags.
    
    let video = document.querySelector("video");
    
    let track = video.addTextTrack("captions", "Captions", "en");
    track.mode = "showing";
    
    track.addCue(
      new VTTCue(
        0,
        6,
        "Styles: Normal <b>bold</b> <u>underlined</u> <i>italic</i> <c>class</c>",
      ),
    );
    
First, we'll add a rule to make all cues 1.2 times bigger than normal.
    
    video::cue {
      font-size: 1.2rem;
    }
    
Then we style each of the tags above with a different color.
    
    video::cue(u) {
      color: green;
    }
    
    video::cue(b) {
      color: purple;
    }
    
    video::cue(i) {
      color: red;
    }
    
    video::cue(c) {
      color: lavender;
    }
    
#### Styling by class
The second cue is displayed right after the first one and includes the same tags. However, they all have a class of `myclass` applied to them.
    
    track.addCue(
      new VTTCue(
        1,
        6,
        "Styles: Class markup: <b.myclass>bold</b> <u.myclass>underlined</u> <i.myclass>italic</i> <c.myclass>class</c>",
      ),
    );
    
We style all items with the `.myclass` class with a light blue text color, except for the specific case of `c.myclass`, which is given a blue text color.
    
    video::cue(.myclass) {
      color: lightblue;
    }
    
    video::cue(c.myclass) {
      color: blue;
    }
    
#### Styling using attributes
The next two cues are displayed after two and then three seconds. The first displays text marked up with the `lang` tag for three locales of English, while the second displays a `<v>` (voice) tag with the "Bob" attribute.
    
    track.addCue(
      new VTTCue(
        2,
        6,
        "<lang en>Lang markup: 'en'</lang>  <lang en-GB>Text: 'en-GB'</lang> <lang en-US>Text: 'en-US'</lang>",
      ),
    );
    
    track.addCue(new VTTCue(3, 6, "<v Bob>Bob's voice</v>"));
    
We use the `lang` attribute selector to give each language variant a different text color.
    
    video::cue([lang="en"]) {
      color: lightgreen;
    }
    
    video::cue([lang="en-GB"]) {
      color: darkgreen;
    }
    
    video::cue(:lang(en-US)) {
      color: #6082b6;
    }
    
Then we use the `v` tag and attribute selector for `voice` to color text in "Bob's voice" orange.
    
    video::cue(v[voice="Bob"]) {
      color: orange;
    }
    
#### Result
The example should the cues with color coding that matches the styling above (if the text is not colored, then `::cue` is not supported on your browser).
>
### api.VTTCue
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`VTTCue` 33 79 31 20 8 33 31 20 8 2.0 4.4.3 8  
`WebVTT_API` 23 12 31 ≤12.1 6 25 31 ≤12.1 8 1.5 4.4 8  
`align` 23 79 31 ≤12.1 6 25 31 ≤12.1 8 1.5 4.4 8  
`getCueAsHTML` 23 12 31 ≤12.1 6 25 31 ≤12.1 8 1.5 4.4 8  
`line` 23 79 31 ≤12.1 6 25 31 ≤12.1 8 1.5 4.4 8  
`lineAlign` No No 31 No 14.1 No 31 No 14.5 No No 14.5  
`position` 23 79 31 ≤12.1 6 25 31 ≤12.1 8 1.5 4.4 8  
`positionAlign` No No 31 No 14.1 No 31 No 14.5 No No 14.5  
`region` No No 59 No 14.1 No 59 No 14.5 No No 14.5  
`size` 23 79 31 ≤12.1 6 25 31 ≤12.1 8 1.5 4.4 8  
`snapToLines` 23 79 31 ≤12.1 6 25 31 ≤12.1 8 1.5 4.4 8  
`text` 23 12 31 ≤12.1 6 25 31 ≤12.1 8 1.5 4.4 8  
`vertical` 23 79 31 15 6 25 31 14 8 1.5 4.4 8  
### api.TextTrack
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`WebVTT_API` 23 12 31Firefox versions before Firefox 50 didn't display captions when playing media without one or more video tracks being played. ≤12.1 6 25 31 ≤12.1 7 1.5 4.4 7  
`activeCues` 23 12 31Starting in Firefox 69, cues are no longer incorrectly loaded when the `TextTrack`'s `mode` is `disabled`; if that's the case, the returned list is empty. ≤12.1 6 25 31 ≤12.1 7 1.5 4.4 7  
`addCue` 23 12 31 ≤12.1 6 25 31 ≤12.1 7 1.5 4.4 7  
`cuechange_event` 23 12 31 ≤12.1 6 25 31 ≤12.1 7 1.5 4.4 7  
`cues` 23 12 31Starting in Firefox 69, cues are no longer incorrectly loaded when the `TextTrack`'s `mode` is `disabled`; if that's the case, the returned list is empty. ≤12.1 6 25 31 ≤12.1 7 1.5 4.4 7  
`id` 33 18 31 20 8 33 31 20 8 2.0 4.4.3 8  
`inBandMetadataTrackDispatchType` No 12–79 31 No 8 No 31 No 8 No No 8  
`kind` 23 12 31 ≤12.1 6 25 31 ≤12.1 7 1.5 4.4 7  
`label` 23 12 31 ≤12.1 6 25 31 ≤12.1 7 1.5 4.4 7  
`language` 23 12 31 ≤12.1 6 25 31 ≤12.1 7 1.5 4.4 7  
`mode` 23 12 31Before Firefox 52, using JavaScript to change the mode of a text track that's part of a media element would send one change event to the element's textTracks TextTrackList for each change, even if multiple changes are made in a single pass through the Firefox event loop. Starting in Firefox 52, these changes are reflected by a single event. ≤12.1 6 25 31 ≤12.1 7 1.5 4.4 7  
`removeCue` 23 12 31 ≤12.1 6 25 31 ≤12.1 7 1.5 4.4 7  
`sourceBuffer` No No No No 8 No No No 13Exposed in Mobile Safari on iPad but not on iPhone. No No 13Exposed in Mobile Safari on iPad but not on iPhone.  
### api.VTTRegion
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`VTTRegion` No No 59 No 7 No 59 No 7 No No 7  
`WebVTT_API` No No 59 No 7 No 59 No 7 No No 7  
`id` No No 59 No 7 No 59 No 7 No No 7  
`lines` No No 59 No 12.1 No 59 No 12.2 No No 12.2  
`regionAnchorX` No No 59 No 7 No 59 No 7 No No 7  
`regionAnchorY` No No 59 No 7 No 59 No 7 No No 7  
`scroll` No No 59 No 7 No 59 No 7 No No 7  
`viewportAnchorX` No No 59 No 7 No 59 No 7 No No 7  
`viewportAnchorY` No No 59 No 7 No 59 No 7 No No 7  
`width` No No 59 No 7 No 59 No 7 No No 7  
  * The CSS `::cue` and `::cue()` pseudo-elements


# Notification
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `Notification` interface of the Notifications API is used to configure and display desktop notifications to the user.
These notifications' appearance and specific functionality vary across platforms but generally they provide a way to asynchronously provide information to the user.
EventTarget  Notification 
## Constructor
`Notification()`
    
Creates a new instance of the `Notification` object.
## Static properties
Also inherits properties from its parent interface, `EventTarget`.
`Notification.permission` Read only
    
A string representing the current permission to display notifications. Possible values are:
  * `denied` — The user refuses to have notifications displayed.
  * `granted` — The user accepts having notifications displayed.
  * `default` — The user choice is unknown and therefore the browser will act as if the value were denied.


`Notification.maxActions` Read only Experimental
    
The maximum number of actions supported by the device and the User Agent.
## Instance properties
Also inherits properties from its parent interface, `EventTarget`.
`Notification.actions` Read only Experimental
    
The actions array of the notification as specified in the constructor's `options` parameter.
`Notification.badge` Read only
    
A string containing the URL of an image to represent the notification when there is not enough space to display the notification itself such as for example, the Android Notification Bar. On Android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.
`Notification.body` Read only
    
The body string of the notification as specified in the constructor's `options` parameter.
`Notification.data` Read only
    
Returns a structured clone of the notification's data.
`Notification.dir` Read only
    
The text direction of the notification as specified in the constructor's `options` parameter.
`Notification.icon` Read only
    
The URL of the image used as an icon of the notification as specified in the constructor's `options` parameter.
`Notification.image` Read only Experimental
    
The URL of an image to be displayed as part of the notification, as specified in the constructor's `options` parameter.
`Notification.lang` Read only
    
The language code of the notification as specified in the constructor's `options` parameter.
`Notification.renotify` Read only Experimental
    
Specifies whether the user should be notified after a new notification replaces an old one.
`Notification.requireInteraction` Read only
    
A boolean value indicating that a notification should remain active until the user clicks or dismisses it, rather than closing automatically.
`Notification.silent` Read only
    
Specifies whether the notification should be silent — i.e., no sounds or vibrations should be issued regardless of the device settings.
`Notification.tag` Read only
    
The ID of the notification (if any) as specified in the constructor's `options` parameter.
`Notification.timestamp` Read only Experimental
    
Specifies the time at which a notification is created or applicable (past, present, or future).
`Notification.title` Read only
    
The title of the notification as specified in the first parameter of the constructor.
`Notification.vibrate` Read only Experimental
    
Specifies a vibration pattern for devices with vibration hardware to emit.
## Static methods
Also inherits methods from its parent interface, `EventTarget`.
`Notification.requestPermission()`
    
Requests permission from the user to display notifications.
## Instance methods
Also inherits methods from its parent interface, `EventTarget`.
`Notification.close()`
    
Programmatically closes a notification instance.
## Events
Also inherits events from its parent interface, `EventTarget`.
`click`
    
Fires when the user clicks the notification.
`close`
    
Fires when the user closes the notification.
`error`
    
Fires when the notification encounters an error.
`show`
    
Fires when the notification is displayed.
## Examples
Assume this basic HTML:
    
    <button>Notify me!</button>
    
It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.
    
    document.querySelector("button").addEventListener("click", notifyMe);
    
    function notifyMe() {
      if (!("Notification" in window)) {
        // Check if the browser supports notifications
        alert("This browser does not support desktop notification");
      } else if (Notification.permission === "granted") {
        // Check whether notification permissions have already been granted;
        // if so, create a notification
        const notification = new Notification("Hi there!");
        // …
      } else if (Notification.permission !== "denied") {
        // We need to ask the user for permission
        Notification.requestPermission().then((permission) => {
          // If the user accepts, let's create a notification
          if (permission === "granted") {
            const notification = new Notification("Hi there!");
            // …
          }
        });
      }
    
      // At last, if the user has denied notifications, and you
      // want to be respectful there is no need to bother them anymore.
    }
    
We no longer show a live sample on this page, as Chrome and Firefox no longer allow notification permissions to be requested from cross-origin `<iframe>`s, with other browsers to follow. To see an example in action, check out our To-do list example (also see the app running live).
Note: In the above example we spawn notifications in response to a user gesture (clicking a button). This is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture. Firefox is already doing this from version 72, for example.
  * Using the Notifications API


# SpeechRecognitionAlternative
The `SpeechRecognitionAlternative` interface of the Web Speech API represents a single word that has been recognized by the speech recognition service.
## Instance properties
`SpeechRecognitionAlternative.transcript` Read only
    
Returns a string containing the transcript of the recognized word.
`SpeechRecognitionAlternative.confidence` Read only
    
Returns a numeric estimate between 0 and 1 of how confident the speech recognition system is that the recognition is correct.
## Examples
This code is excerpted from our Speech color changer example.
    
    recognition.onresult = (event) => {
      // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
      // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
      // It has a getter so it can be accessed like an array
      // The first [0] returns the SpeechRecognitionResult at position 0.
      // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects
      // that contain individual results.
      // These also have getters so they can be accessed like arrays.
      // The second [0] returns the SpeechRecognitionAlternative at position 0.
      // We then return the transcript property of the SpeechRecognitionAlternative object
      const color = event.results[0][0].transcript;
      diagnostic.textContent = `Result received: ${color}.`;
      bg.style.backgroundColor = color;
    };
    
  * Web Speech API


# Selection
A `Selection` object represents the range of text selected by the user or the current position of the caret. Each `document` is associated with a unique selection object, which can be retrieved by `document.getSelection()` or `window.getSelection()` and then be examined and modified.
A user may make a selection from left to right (in document order) or right to left (reverse of document order). The anchor is where the user began the selection and the focus is where the user ends the selection. If you make a selection with a desktop mouse, the anchor is placed where you pressed the mouse button, and the focus is placed where you released the mouse button.
Note: Anchor and focus should not be confused with the start and end positions of a selection. The anchor can be placed before the focus or vice versa, depending on the direction you made your selection.
## Instance properties
`Selection.anchorNode` Read only
    
Returns the `Node` in which the selection begins. Can return `null` if selection never existed in the document (e.g., an iframe that was never clicked on).
`Selection.anchorOffset` Read only
    
Returns a number representing the offset of the selection's anchor within the `anchorNode`. If `anchorNode` is a text node, this is the number of characters within anchorNode preceding the anchor. If `anchorNode` is an element, this is the number of child nodes of the `anchorNode` preceding the anchor.
`Selection.direction` Read only
    
A string describing the direction of the current selection.
`Selection.focusNode` Read only
    
Returns the `Node` in which the selection ends. Can return `null` if selection never existed in the document (e.g., an iframe that was never clicked on).
`Selection.focusOffset` Read only
    
Returns a number representing the offset of the selection's focus within the `focusNode`. If `focusNode` is a text node, this is the number of characters within `focusNode` preceding the focus. If `focusNode` is an element, this is the number of child nodes of the `focusNode` preceding the focus.
`Selection.isCollapsed` Read only
    
Returns a Boolean indicating whether the selection's start and end points are at the same position.
`Selection.rangeCount` Read only
    
Returns the number of ranges in the selection.
`Selection.type` Read only
    
Returns a string describing the type of the current selection.
## Instance methods
`Selection.addRange()`
    
A `Range` object that will be added to the selection.
`Selection.collapse()`
    
Collapses the current selection to a single point.
`Selection.collapseToEnd()`
    
Collapses the selection to the end of the last range in the selection.
`Selection.collapseToStart()`
    
Collapses the selection to the start of the first range in the selection.
`Selection.containsNode()`
    
Indicates if a certain node is part of the selection.
`Selection.deleteFromDocument()`
    
Deletes the selection's content from the document.
`Selection.empty()`
    
Removes all ranges from the selection, leaving the `anchorNode` and `focusNode` properties equal to `null` and nothing selected.
`Selection.extend()`
    
Moves the focus of the selection to a specified point.
`Selection.getComposedRanges()`
    
Returns an array of `StaticRange` objects, each that represents a selection that might cross shadow DOM boundaries.
`Selection.getRangeAt()`
    
Returns a `Range` object representing one of the ranges currently selected.
`Selection.modify()`
    
Changes the current selection.
`Selection.removeRange()`
    
Removes a range from the selection.
`Selection.removeAllRanges()`
    
Removes all ranges from the selection.
`Selection.selectAllChildren()`
    
Adds all the children of the specified node to the selection.
`Selection.setBaseAndExtent()`
    
Sets the selection to be a range including all or parts of two specified DOM nodes, and any content located between them.
`Selection.setPosition()`
    
Collapses the current selection to a single point.
`Selection.toString()`
    
Returns a string currently being represented by the selection object, i.e., the currently selected text.
## Notes
>
### String representation of a selection
Calling the `Selection.toString()` method returns the text contained within the selection, e.g.:
    
    const selObj = window.getSelection();
    window.alert(selObj);
    
Note that using a selection object as the argument to `window.alert` will call the object's `toString` method.
### Multiple ranges in a selection
A selection object represents the `Range`s that the user has selected. Typically, it holds only one range, accessed as follows:
    
    const selObj = window.getSelection();
    const range = selObj.getRangeAt(0);
    
  * `selObj` is a Selection object
  * `range` is a `Range` object


As the Selection API specification notes, the Selection API was initially created by Netscape and allowed multiple ranges (for instance, to allow the user to select a column from a `<table>`). However, browsers other than Gecko did not implement multiple ranges, and the specification also requires the selection to always have a single range.
### Selection and input focus
Selection and input focus (indicated by `Document.activeElement`) have a complex relationship that varies by browser. In cross-browser compatible code, it's better to handle them separately.
Safari and Chrome (unlike Firefox) currently focus the element containing selection when modifying the selection programmatically; it's possible that this may change in the future (see W3C bug 14383 and WebKit bug 38696).
### Behavior of Selection API in terms of editing host focus changes
The Selection API has a common behavior (i.e., shared between browsers) that governs how focus behavior changes for editing hosts after certain methods are called.
The behavior is as follows:
  1. An editing host gains focus if the previous selection was outside of it.
  2. A Selection API method is called, causing a new selection to be made with the selection range inside the editing host.
  3. Focus then moves to the editing host.


Note: The Selection API methods may only move focus to an editing host, not to other focusable elements (e.g., `<a>`).
The above behavior applies to selections made using the following methods:
  * `Selection.collapse()`
  * `Selection.collapseToStart()`
  * `Selection.collapseToEnd()`
  * `Selection.extend()`
  * `Selection.selectAllChildren()`
  * `Selection.addRange()`
  * `Selection.setBaseAndExtent()`


And when the `Range` is modified using the following methods:
  * `Range.setStart()`
  * `Range.setEnd()`
  * `Range.setStartBefore()`
  * `Range.setStartAfter()`
  * `Range.setEndBefore()`
  * `Range.setEndAfter()`
  * `Range.collapse()`
  * `Range.selectNode()`
  * `Range.selectNodeContents()`


### Glossary
Other key terms used in this section.
anchor
    
The anchor of a selection is the beginning point of the selection. When making a selection with a mouse, the anchor is where in the document the mouse button is initially pressed. As the user changes the selection using the mouse or the keyboard, the anchor does not move.
editing host
    
An editable element (e.g., an HTML element with `contenteditable` set, or the HTML child of a document that has `designMode` enabled).
focus of a selection
    
The focus of a selection is the end point of the selection. When making a selection with a mouse, the focus is where in the document the mouse button is released. As the user changes the selection using the mouse or the keyboard, the focus is the end of the selection that moves.
Note: This is not the same as the focused element of the document, as returned by `document.activeElement`.
range
    
A range is a contiguous part of a document. A range can contain entire nodes as well as portions of nodes (such as a portion of a text node). A user will normally only select a single range at a time, but it's possible for a user to select multiple ranges (e.g., by using the `Control` key). A range can be retrieved from a selection as a `range` object. Range objects can also be created via the DOM and programmatically added or removed from a selection.
  * `Window.getSelection`, `Document.getSelection`, `Range`
  * Selection-related events: `selectionchange` and `selectstart`
  * HTML inputs provide simpler helper APIs for working with selection (see `HTMLInputElement.setSelectionRange()`)
  * `Document.activeElement`, `HTMLElement.focus`, and `HTMLElement.blur`


# CSSScopeRule
The `CSSScopeRule` interface of the CSS Object Model represents a CSS `@scope` at-rule.
CSSRule  CSSGroupingRule  CSSScopeRule 
## Instance properties
Inherits properties from its ancestors `CSSGroupingRule` and `CSSRule`.
`end`
    
Returns a string containing the value of the `@scope` at-rule's scope limit.
`start`
    
Returns a string containing the value of the `@scope` at-rule's scope root.
## Instance methods
Inherits methods from its ancestors `CSSGroupingRule` and `CSSRule`.
## Examples
>
### Accessing @scope information in JavaScript
Assuming the following is the only stylesheet attached to a document:
    
    @scope (.outer) to (.inner) {
      :scope {
        background: yellow;
      }
    }
    
The following JavaScript could be used to access information about the contained `@scope` block:
    
    const scopeBlock = document.styleSheets[0].cssRules[0];
    
    console.log(scopeBlock.start); // Returns ".outer"
    console.log(scopeBlock.end); // Returns ".inner"
    
  * `@scope`
  * `:scope`


# SVGImageElement
The `SVGImageElement` interface corresponds to the `<image>` element.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGImageElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGraphicsElement`.
`SVGImageElement.crossOrigin`
    
A string reflecting the `crossorigin` content attribute, which represents the CORS setting of the given `<image>` element.
`SVGImageElement.decoding`
    
Represents a hint given to the browser on how it should decode the image.
`SVGImageElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given `<image>` element.
`SVGImageElement.href` Read only
    
An `SVGAnimatedString` corresponding to the `href` or `xlink:href` Deprecated attribute of the given `<image>` element.
`SVGImageElement.preserveAspectRatio` Read only
    
An `SVGAnimatedPreserveAspectRatio` corresponding to the `preserveAspectRatio` attribute of the given `<image>` element.
`SVGImageElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given `<image>` element.
`SVGImageElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given `<image>` element.
`SVGImageElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given `<image>` element.
## Instance methods
This interface also inherits methods from its parent interface, `SVGGraphicsElement`.
`SVGImageElement.decode()`
    
Initiates asynchronous decoding of the image data. Returns a `Promise` which resolves once the image data is ready to be used.
# WebGLRenderbuffer
Note: This feature is available in Web Workers.
The WebGLRenderbuffer interface is part of the WebGL API and represents a buffer that can contain an image, or that can be a source or target of a rendering operation.
WebGLObject  WebGLRenderbuffer 
## Description
The `WebGLRenderbuffer` object does not define any methods or properties of its own and its content is not directly accessible. When working with `WebGLRenderbuffer` objects, the following methods are useful:
  * `WebGLRenderingContext.bindRenderbuffer()`
  * `WebGLRenderingContext.createRenderbuffer()`
  * `WebGLRenderingContext.deleteRenderbuffer()`
  * `WebGLRenderingContext.framebufferRenderbuffer()`
  * `WebGLRenderingContext.getRenderbufferParameter()`
  * `WebGLRenderingContext.isRenderbuffer()`
  * `WebGLRenderingContext.renderbufferStorage()`
  * `WebGL2RenderingContext.renderbufferStorageMultisample()`


## Examples
>
### Creating a render buffer
    
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext("webgl");
    const buffer = gl.createRenderbuffer();
    
  * `WebGLRenderingContext.bindRenderbuffer()`
  * `WebGLRenderingContext.createRenderbuffer()`
  * `WebGLRenderingContext.deleteRenderbuffer()`
  * `WebGLRenderingContext.framebufferRenderbuffer()`
  * `WebGLRenderingContext.getRenderbufferParameter()`
  * `WebGLRenderingContext.isRenderbuffer()`
  * `WebGLRenderingContext.renderbufferStorage()`
  * Other buffers: `WebGLBuffer`, `WebGLFramebuffer`


# SVGAnimationElement
The `SVGAnimationElement` interface is the base interface for all of the animation element interfaces: `SVGAnimateElement`, `SVGSetElement`, `SVGAnimateColorElement`, `SVGAnimateMotionElement` and `SVGAnimateTransformElement`.
EventTarget  Node  Element  SVGElement  SVGAnimationElement 
## Instance properties
This interface also inherits properties from its parent, `SVGElement`.
`SVGAnimationElement.requiredExtensions` Read only
    
An `SVGStringList` reflecting the `requiredExtensions` attribute of the given element.
`SVGAnimationElement.systemLanguage` Read only
    
An `SVGStringList` reflecting the `systemLanguage` attribute of the given element.
`SVGAnimationElement.targetElement` Read only
    
An `SVGElement` representing the element which is being animated. If no target element is being animated (for example, because the `href` specifies an unknown element) the value returned is `null`.
## Instance methods
This interface also inherits methods from its parent, `SVGElement`.
`SVGAnimationElement.getStartTime()`
    
Returns a float representing the begin time, in seconds, for this animation element's current interval, if it exists, regardless of whether the interval has begun yet. If there is no current interval, then a `DOMException` with code `INVALID_STATE_ERR` is thrown.
`SVGAnimationElement.getCurrentTime()`
    
Returns a float representing the current time in seconds relative to time zero for the given time container.
`SVGAnimationElement.getSimpleDuration()`
    
Returns a float representing the number of seconds for the simple duration for this animation. If the simple duration is undefined (e.g., the end time is indefinite), then a `DOMException` with code `NOT_SUPPORTED_ERR` is raised.
`SVGAnimationElement.beginElement()`
    
Creates a begin instance time for the current time. The new instance time is added to the begin instance times list. The behavior of this method is equivalent to `beginElementAt(0)`.
`SVGAnimationElement.beginElementAt()`
    
Creates a begin instance time for the current time plus the specified offset. The new instance time is added to the begin instance times list.
`SVGAnimationElement.endElement()`
    
Creates an end instance time for the current time. The new instance time is added to the end instance times list. The behavior of this method is equivalent to `endElementAt(0)`.
`SVGAnimationElement.endElementAt()`
    
Creates an end instance time for the current time plus the specified offset. The new instance time is added to the end instance times list.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `on...` handler property of this interface.
`beginEvent`
    
Fired when the element local timeline begins to play.
`endEvent`
    
Fired when at the active end of the animation is reached.
`repeatEvent`
    
Fired when the element's local timeline repeats. It will be fired each time the element repeats, after the first iteration.
# EXT_color_buffer_float extension
The `EXT_color_buffer_float` extension is part of WebGL and adds the ability to render a variety of floating point formats.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is available to WebGL 2 contexts only.
For WebGL 1, see the `EXT_color_buffer_half_float` and `WEBGL_color_buffer_float` extensions.
## Extended methods
The following sized formats become color-renderable:
  * `gl.R16F`,
  * `gl.RG16F`,
  * `gl.RGBA16F`,
  * `gl.R32F`,
  * `gl.RG32F`,
  * `gl.RGBA32F`,
  * `gl.R11F_G11F_B10F`.


Color-renderable means:
  * The `WebGLRenderingContext.renderbufferStorage()` method now accepts these formats.
  * Framebuffers with attached textures of these formats may now be FRAMEBUFFER_COMPLETE.


## Examples
`gl` must be a `WebGL2RenderingContext`. This extension does not work in WebGL 1 contexts.
    
    const ext = gl.getExtension("EXT_color_buffer_float");
    
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA16F, 256, 256);
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.renderbufferStorage()`
  * `EXT_color_buffer_half_float`
  * `WEBGL_color_buffer_float`


# SVGViewElement
The `SVGViewElement` interface provides access to the properties of `<view>` elements, as well as methods to manipulate them.
EventTarget  Node  Element  SVGElement  SVGViewElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGViewElement.viewBox` Read only
    
An `SVGAnimatedRect` corresponding to the `viewBox` attribute of the given `<view>` element.
`SVGViewElement.preserveAspectRatio` Read only
    
An `SVGAnimatedPreserveAspectRatio` corresponding to the `preserveAspectRatio` attribute of the given `<view>` element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.
  * `<view>`


# Attr
The `Attr` interface represents one of an element's attributes as an object. In most situations, you will directly retrieve the attribute value as a string (e.g., `Element.getAttribute()`), but some cases may require interacting with `Attr` instances (e.g., `Element.getAttributeNode()`).
EventTarget  Node  Attr 
The core idea of an object of type `Attr` is the association between a name and a value. An attribute may also be part of a namespace and, in this case, it also has a URI identifying the namespace, and a prefix that is an abbreviation for the namespace.
The name is deemed local when it ignores the eventual namespace prefix and deemed qualified when it includes the prefix of the namespace, if any, separated from the local name by a colon (`:`). We have three cases: an attribute outside of a namespace, an attribute inside a namespace without a prefix defined, an attribute inside a namespace with a prefix:
Attribute Namespace name Namespace prefix Attribute local name Attribute qualified name  
`myAttr` none none `myAttr` `myAttr`  
`myAttr` `mynamespace` none `myAttr` `myAttr`  
`myAttr` `mynamespace` `myns` `myAttr` `myns:myAttr`  
Note: This interface represents only attributes present in the tree representation of the `Element`, being a SVG, an HTML or a MathML element. It doesn't represent the property of an interface associated with such element, such as `HTMLTableElement` for a `<table>` element. (See this article for more information about attributes and how they are reflected into properties.)
## Instance properties
This interface also inherits the properties of its parent interfaces, `Node` and `EventTarget`.
`localName` Read only
    
A string representing the local part of the qualified name of the attribute.
`name` Read only
    
The attribute's qualified name. If the attribute is not in a namespace, it will be the same as `localName` property.
`namespaceURI` Read only
    
A string representing the URI of the namespace of the attribute, or `null` if there is no namespace.
`ownerElement` Read only
    
The `Element` the attribute belongs to.
`prefix` Read only
    
A string representing the namespace prefix of the attribute, or `null` if a namespace without prefix or no namespace are specified.
`specified` Read only Deprecated
    
This property always returns `true`.
`value`
    
The attribute's value, a string that can be set and get using this property.
## Instance methods
This interface has no specific methods, but inherits the methods of its parent interfaces, `Node` and `EventTarget`.
  * Other nodes are `CDATASection`, `CharacterData`, `Comment`, `Document`, `Element`, `ProcessingInstruction`, and `Text`.


# WEBGL_compressed_texture_s3tc_srgb extension
The `WEBGL_compressed_texture_s3tc_srgb` extension is part of the WebGL API and exposes four S3TC compressed texture formats for the sRGB colorspace.
Compressed textures reduce the amount of memory needed to store a texture on the GPU, allowing for higher resolution textures or more of the same resolution textures.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is available to both WebGL1 and WebGL2 contexts.
## Constants
The compressed texture formats are exposed by four constants and can be used in two functions: `compressedTexImage2D()` and `compressedTexSubImage2D()`.
`ext.COMPRESSED_SRGB_S3TC_DXT1_EXT`
    
A DXT1-compressed image in an sRGB image format.
`ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT`
    
A DXT1-compressed image in an sRGB image format with an on/off alpha value.
`ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT`
    
A DXT3-compressed image in an sRGBA image format.
`ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT`
    
A DXT5-compressed image in an sRGBA image format.
## Examples
    
    const ext = gl.getExtension("WEBGL_compressed_texture_s3tc_srgb");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.compressedTexImage2D(
      gl.TEXTURE_2D,
      0,
      ext.COMPRESSED_SRGB_S3TC_DXT1_EXT,
      512,
      512,
      0,
      textureData,
    );
    
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    
  * S3 Texture Compression – OpenGL wiki
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.compressedTexImage2D()`
  * `WebGLRenderingContext.compressedTexSubImage2D()`
  * `WebGLRenderingContext.getParameter()`


# HTMLElement
The `HTMLElement` interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.
EventTarget  Node  Element  HTMLElement 
## Instance properties
Also inherits properties from its parent, `Element`.
`HTMLElement.accessKey`
    
A string representing the access key assigned to the element.
`HTMLElement.accessKeyLabel` Read only
    
Returns a string containing the element's assigned access key.
`HTMLElement.anchorElement` Read only Non-standard Experimental
    
Returns a reference to the element's anchor element, or `null` if it doesn't have one.
`HTMLElement.attributeStyleMap` Read only
    
A `StylePropertyMap` representing the declarations of the element's `style` attribute.
`HTMLElement.autocapitalize`
    
A string that represents the element's capitalization behavior for user input. Valid values are: `none`, `off`, `on`, `characters`, `words`, `sentences`.
`HTMLElement.autofocus`
    
A boolean value reflecting the `autofocus` HTML global attribute, which indicates whether the control should be focused when the page loads, or when dialog or popover become shown if specified in an element inside `<dialog>` elements or elements whose popover attribute is set.
`HTMLElement.autocorrect`
    
A boolean that represents whether or not text input by a user should be automatically corrected. This reflects the `autocorrect` HTML global attribute.
`HTMLElement.contentEditable`
    
A string, where a value of `true` means the element is editable and a value of `false` means it isn't.
`HTMLElement.dataset` Read only
    
Returns a `DOMStringMap` with which script can read and write the element's custom data attributes (`data-*`).
`HTMLElement.dir`
    
A string, reflecting the `dir` global attribute, representing the directionality of the element. Possible values are `"ltr"`, `"rtl"`, and `"auto"`.
`HTMLElement.draggable`
    
A boolean value indicating if the element can be dragged.
`HTMLElement.editContext` Experimental
    
Returns the `EditContext` associated with the element, or `null` if there isn't one.
`HTMLElement.enterKeyHint`
    
A string defining what action label (or icon) to present for the enter key on virtual keyboards.
`HTMLElement.hidden`
    
A string or boolean value reflecting the value of the element's `hidden` attribute.
`HTMLElement.inert`
    
A boolean value indicating whether the user agent must act as though the given node is absent for the purposes of user interaction events, in-page text searches ("find in page"), and text selection.
`HTMLElement.innerText`
    
Represents the rendered text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard. As a setter, it replaces the content inside the selected element, converting any line breaks into `<br>` elements.
`HTMLElement.inputMode`
    
A string value reflecting the value of the element's `inputmode` attribute.
`HTMLElement.isContentEditable` Read only
    
Returns a boolean value indicating whether or not the content of the element can be edited.
`HTMLElement.lang`
    
A string representing the language of an element's attributes, text, and element contents.
`HTMLElement.nonce`
    
Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.
`HTMLElement.offsetHeight` Read only
    
Returns a `double` containing the height of an element, relative to the layout.
`HTMLElement.offsetLeft` Read only
    
Returns a `double`, the distance from this element's left border to its `offsetParent`'s left border.
`HTMLElement.offsetParent` Read only
    
An `Element` that is the element from which all offset calculations are currently computed.
`HTMLElement.offsetTop` Read only
    
Returns a `double`, the distance from this element's top border to its `offsetParent`'s top border.
`HTMLElement.offsetWidth` Read only
    
Returns a `double` containing the width of an element, relative to the layout.
`HTMLElement.outerText`
    
Represents the rendered text content of a node and its descendants. As a getter, it is the same as `HTMLElement.innerText` (it represents the rendered text content of an element and its descendants). As a setter, it replaces the selected node and its contents with the given value, converting any line breaks into `<br>` elements.
`HTMLElement.popover`
    
Gets and sets an element's popover state via JavaScript (`"auto"`, `"hint"`, or `"manual"`), and can be used for feature detection. Reflects the value of the `popover` global HTML attribute.
`HTMLElement.spellcheck`
    
A boolean value that controls the spell-checking hint. It is available on all HTML elements, though it doesn't affect all of them.
`HTMLElement.style`
    
A `CSSStyleDeclaration` representing the declarations of the element's `style` attribute.
`HTMLElement.tabIndex`
    
A `long` representing the position of the element in the tabbing order.
`HTMLElement.title`
    
A string containing the text that appears in a popup box when mouse is over the element.
`HTMLElement.translate`
    
A boolean value representing the translation.
`HTMLElement.virtualKeyboardPolicy` Experimental
    
A string indicating the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available, if the element's content is editable (for example, it is an `<input>` or `<textarea>` element, or an element with the `contenteditable` attribute set).
`HTMLElement.writingSuggestions`
    
A string indicating if browser-provided writing suggestions should be enabled under the scope of the element or not.
## Instance methods
Also inherits methods from its parent, `Element`.
`HTMLElement.attachInternals()`
    
Returns an `ElementInternals` object, and enables a custom element to participate in HTML forms.
`HTMLElement.blur()`
    
Removes keyboard focus from the currently focused element.
`HTMLElement.click()`
    
Sends a mouse click event to the element.
`HTMLElement.focus()`
    
Makes the element the current keyboard focus.
`HTMLElement.hidePopover()`
    
Hides a popover element by removing it from the top layer and styling it with `display: none`.
`HTMLElement.showPopover()`
    
Shows a popover element by adding it to the top layer and removing `display: none;` from its styles.
`HTMLElement.togglePopover()`
    
Toggles a popover element between the hidden and showing states.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
Also, inherits events from its parent, `Element`.
`change`
    
Fired when the `value` of an `<input>`, `<select>`, or `<textarea>` element has been changed and committed by the user. Unlike the `input` event, the `change` event is not necessarily fired for each alteration to an element's `value`.
`command`
    
Fires on an element that is controlled via a `button` with valid `commandForElement` and `command` values, whenever the button is interacted with (e.g., it is clicked).
`error`
    
Fired when a resource failed to load, or can't be used.
`load`
    
Fires for elements containing a resource when the resource has successfully loaded.
### Drag & drop events
`drag`
    
This event is fired when an element or text selection is being dragged.
`dragend`
    
This event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).
`dragenter`
    
This event is fired when a dragged element or text selection enters a valid drop target.
`dragleave`
    
This event is fired when a dragged element or text selection leaves a valid drop target.
`dragover`
    
This event is fired continuously when an element or text selection is being dragged and the mouse pointer is over a valid drop target (every 50 ms WHEN mouse is not moving ELSE much faster between 5 ms (slow movement) and 1ms (fast movement) approximately. This firing pattern is different than `mouseover` ).
`dragstart`
    
This event is fired when the user starts dragging an element or text selection.
`drop`
    
This event is fired when an element or text selection is dropped on a valid drop target.
### Toggle events
`beforetoggle`
    
Fired when the element is a popover or `<dialog>`, before it is hidden or shown.
`toggle`
    
Fired when the element is a popover, `<dialog>`, or `<details>` element, just after it is hidden or shown.
  * `Element`


# HTMLLIElement
The `HTMLLIElement` interface exposes specific properties and methods (beyond those defined by regular `HTMLElement` interface it also has available to it by inheritance) for manipulating list elements.
EventTarget  Node  Element  HTMLElement  HTMLLIElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLLIElement.type` Deprecated
    
A string representing the type of the bullets, `"disc"`, `"square"` or `"circle"`. As the standard way of defining the list type is via the CSS `list-style-type` property, use the CSSOM methods to set it via a script.
`HTMLLIElement.value`
    
An integer indicating the ordinal position of the list element inside a given `<ol>`. It reflects the `value` attribute of the HTML `<li>` element, and can be smaller than `0`. If the `<li>` element is not a child of an `<ol>` element, the property has no meaning.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<li>`


# NDEFReader
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `NDEFReader` interface of the Web NFC API is used to read from and write data to compatible NFC devices, e.g., NFC tags supporting NDEF, when these devices are within the reader's magnetic induction field.
EventTarget  NDEFReader 
## Constructor
`NDEFReader()` Experimental
    
Returns a new `NDEFReader` object.
## Instance methods
The `NDEFReader` interface inherits the methods of `EventTarget`, its parent interface.
`NDEFReader.scan()` Experimental
    
Activates a reading device and returns a `Promise` that either resolves when an NFC tag read operation is scheduled or rejects if a hardware or permission error is encountered. This method triggers a permission prompt if the "nfc" permission has not been previously granted.
`NDEFReader.write()` Experimental
    
Attempts to write an NDEF message to a tag and returns a `Promise` that either resolves when a message has been written to the tag or rejects if a hardware or permission error is encountered. This method triggers a permission prompt if the "nfc" permission has not been previously granted.
## Events
Inherits events from its parent, `EventTarget`.
`reading` Experimental
    
Fires when a new reading is available from compatible NFC devices.
`readingerror` Experimental
    
Fires when a tag is in proximity of a reading device, but cannot be read.
## Examples
>
### Handling initial reads while writing
The example below shows how to coordinate between a common reading handler and one used specifically for a single write. In order to write, a tag needs to be found and read. This gives you the ability to check whether it is actually a tag that you want to write to. That's why it's recommended that you call `write()` from a reading event.
    
    const ndef = new NDEFReader();
    let ignoreRead = false;
    
    ndef.onreading = (event) => {
      if (ignoreRead) {
        return; // write pending, ignore read.
      }
    
      console.log("We read a tag, but not during pending write!");
    };
    
    function write(data) {
      ignoreRead = true;
      return new Promise((resolve, reject) => {
        ndef.addEventListener(
          "reading",
          (event) => {
            // Check if we want to write to this tag, or reject.
            ndef
              .write(data)
              .then(resolve, reject)
              .finally(() => (ignoreRead = false));
          },
          { once: true },
        );
      });
    }
    
    await ndef.scan();
    try {
      await write("Hello World");
      console.log("We wrote to a tag!");
    } catch (err) {
      console.error("Something went wrong", err);
    }
    
# MediaStream
The `MediaStream` interface of the Media Capture and Streams API represents a stream of media content. A stream consists of several tracks, such as video or audio tracks. Each track is specified as an instance of `MediaStreamTrack`.
You can obtain a `MediaStream` object either by using the constructor or by calling functions such as `MediaDevices.getUserMedia()`, `MediaDevices.getDisplayMedia()`, or `HTMLCanvasElement.captureStream()` and `HTMLMediaElement.captureStream()`.
EventTarget  MediaStream 
## Constructor
`MediaStream()`
    
Creates and returns a new `MediaStream` object. You can create an empty stream, a stream which is based upon an existing stream, or a stream that contains a specified list of tracks (specified as an array of `MediaStreamTrack` objects).
## Instance properties
This interface inherits properties from its parent, `EventTarget`.
`MediaStream.active` Read only
    
A Boolean value that returns `true` if the `MediaStream` is active, or `false` otherwise.
`MediaStream.id` Read only
    
A string containing a 36-character universally unique identifier (UUID) for the object.
## Instance methods
This interface inherits methods from its parent, `EventTarget`.
`MediaStream.addTrack()`
    
Stores a copy of the `MediaStreamTrack` given as argument. If the track has already been added to the `MediaStream` object, nothing happens.
`MediaStream.clone()`
    
Returns a clone of the `MediaStream` object. The clone will, however, have a unique value for `id`.
`MediaStream.getAudioTracks()`
    
Returns a list of the `MediaStreamTrack` objects stored in the `MediaStream` object that have their `kind` attribute set to `audio`. The order is not defined, and may not only vary from one browser to another, but also from one call to another.
`MediaStream.getTrackById()`
    
Returns the track whose ID corresponds to the one given in parameters, `trackId`. If no parameter is given, or if no track with that ID does exist, it returns `null`. If several tracks have the same ID, it returns the first one.
`MediaStream.getTracks()`
    
Returns a list of all `MediaStreamTrack` objects stored in the `MediaStream` object, regardless of the value of the `kind` attribute. The order is not defined, and may not only vary from one browser to another, but also from one call to another.
`MediaStream.getVideoTracks()`
    
Returns a list of the `MediaStreamTrack` objects stored in the `MediaStream` object that have their `kind` attribute set to `"video"`. The order is not defined, and may not only vary from one browser to another, but also from one call to another.
`MediaStream.removeTrack()`
    
Removes the `MediaStreamTrack` given as argument. If the track is not part of the `MediaStream` object, nothing happens.
## Events
`addtrack`
    
Fired when a new `MediaStreamTrack` object is added.
`removetrack`
    
Fired when a `MediaStreamTrack` object has been removed.
`active` Non-standard
    
Fired when the MediaStream is activated.
`inactive` Non-standard
    
Fired when the MediaStream is inactivated.
  * Using the MediaStream Recording API
  * WebRTC API
  * Web Audio API
  * `MediaStreamTrack`


# MIDIPort
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MIDIPort` interface of the Web MIDI API represents a MIDI input or output port.
A `MIDIPort` instance is created when a new MIDI device is connected. Therefore it has no constructor.
EventTarget  MIDIPort 
## Instance properties
`MIDIPort.id` Read only
    
Returns a string containing the unique ID of the port.
`MIDIPort.manufacturer` Read only
    
Returns a string containing the manufacturer of the port.
`MIDIPort.name` Read only
    
Returns a string containing the system name of the port.
`MIDIPort.type` Read only
    
Returns a string containing the type of the port, one of:
`"input"`
    
The `MIDIPort` is an input port.
`"output"`
    
The `MIDIPort` is an output port.
`MIDIPort.version` Read only
    
Returns a string containing the version of the port.
`MIDIPort.state` Read only
    
Returns a string containing the state of the port, one of:
`"disconnected"`
    
The device that this `MIDIPort` represents is disconnected from the system.
`"connected"`
    
The device that this `MIDIPort` represents is currently connected.
`MIDIPort.connection` Read only
    
Returns a string containing the connection state of the port, one of:
`"open"`
    
The device that this `MIDIPort` represents has been opened and is available.
`"closed"`
    
The device that this `MIDIPort` represents has not been opened, or has been closed.
`"pending"`
    
The device that this `MIDIPort` represents has been opened but has subsequently disconnected.
## Instance methods
This interface also inherits methods from `EventTarget`.
`MIDIPort.open()`
    
Makes the MIDI device connected to this `MIDIPort` explicitly available, and returns a `Promise` which resolves once access to the port has been successful.
`MIDIPort.close()`
    
Makes the MIDI device connected to this `MIDIPort` unavailable, changing the `state` from `"open"` to `"closed"`. This returns a `Promise` which resolves once the port has been closed.
## Events
`statechange`
    
Called when an existing port changes its state or connection.
## Examples
>
### List ports and their information
The following example lists input and output ports, and displays information about them using properties of `MIDIPort`.
    
    function listInputsAndOutputs(midiAccess) {
      for (const entry of midiAccess.inputs) {
        const input = entry[1];
        console.log(
          `Input port [type:'${input.type}'] id:'${input.id}' manufacturer: '${input.manufacturer}' name: '${input.name}' version: '${input.version}'`,
        );
      }
    
      for (const entry of midiAccess.outputs) {
        const output = entry[1];
        console.log(
          `Output port [type:'${output.type}'] id: '${output.id}' manufacturer: '${output.manufacturer}' name: '${output.name}' version: '${output.version}'`,
        );
      }
    }
    
### Add available ports to a select list
The following example takes the list of input ports and adds them to a select list, in order that a user can choose the device they want to use.
    
    inputs.forEach((port, key) => {
      const opt = document.createElement("option");
      opt.text = port.name;
      document.getElementById("port-selector").add(opt);
    });
    
# OES_draw_buffers_indexed
The `OES_draw_buffers_indexed` extension is part of the WebGL API and enables the use of different blend options when writing to multiple color buffers simultaneously.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL2 contexts.
## Instance methods
`OES_draw_buffers_indexed.blendEquationiOES()`
    
Sets both the RGB and alpha blend equations for a particular draw buffer.
`OES_draw_buffers_indexed.blendEquationSeparateiOES()`
    
Sets the RGB and alpha blend equations separately for a particular draw buffer.
`OES_draw_buffers_indexed.blendFunciOES()`
    
Defines which function is used when blending pixels for a particular draw buffer.
`OES_draw_buffers_indexed.blendFuncSeparateiOES()`
    
Defines which function is used when blending pixels for RGB and alpha components separately for a particular draw buffer.
`OES_draw_buffers_indexed.colorMaskiOES()`
    
Sets which color components to enable or to disable when drawing or rendering for a particular draw buffer.
`OES_draw_buffers_indexed.disableiOES()`
    
Disables blending for a particular draw buffer.
`OES_draw_buffers_indexed.enableiOES()`
    
Enables blending for a particular draw buffer.
## Examples
>
### Using the `OES_draw_buffers_indexed` extension
Enable the extension with a call to `WebGLRenderingContext.getExtension()`.
    
    const ext = gl.getExtension("OES_draw_buffers_indexed");
    
You can now enable blending, set blending equation, blending function, and color mask for a particular draw buffer.
    
    // For gl.DRAW_BUFFER0
    ext.enableiOES(gl.BLEND, 0);
    ext.blendEquationiOES(0, gl.FUNC_ADD);
    ext.blendFunciOES(0, gl.ONE, gl.ONE);
    ext.colorMaskiOES(0, 1, 0, 0, 0);
    
    // For gl.DRAW_BUFFER1
    ext.enableiOES(gl.BLEND, 1);
    ext.blendEquationSeparateiOES(1, gl.FUNC_ADD, gl.FUNC_SUBTRACT);
    ext.blendFuncSeparateiOES(
      1,
      gl.SRC_ALPHA,
      gl.ONE_MINUS_SRC_ALPHA,
      gl.ZERO,
      gl.ZERO,
    );
    ext.colorMaskiOES(1, 0, 1, 0, 0);
    
To retrieve settings for a particular draw buffer, use `WebGL2RenderingContext.getIndexedParameter()`.
    
    // For gl.DRAW_BUFFER0
    gl.getIndexedParameter(gl.BLEND_EQUATION_RGB, 0);
    gl.getIndexedParameter(gl.BLEND_EQUATION_ALPHA, 0);
    gl.getIndexedParameter(gl.BLEND_SRC_RGB, 0);
    gl.getIndexedParameter(gl.BLEND_SRC_ALPHA, 0);
    gl.getIndexedParameter(gl.BLEND_DST_RGB, 0);
    gl.getIndexedParameter(gl.BLEND_DST_ALPHA, 0);
    gl.getIndexedParameter(gl.COLOR_WRITEMASK, 0);
    
    // For gl.DRAW_BUFFER1
    gl.getIndexedParameter(gl.BLEND_EQUATION_RGB, 1);
    gl.getIndexedParameter(gl.BLEND_EQUATION_ALPHA, 1);
    gl.getIndexedParameter(gl.BLEND_SRC_RGB, 1);
    gl.getIndexedParameter(gl.BLEND_SRC_ALPHA, 1);
    gl.getIndexedParameter(gl.BLEND_DST_RGB, 1);
    gl.getIndexedParameter(gl.BLEND_DST_ALPHA, 1);
    gl.getIndexedParameter(gl.COLOR_WRITEMASK, 1);
    
You can use `WebGLRenderingContext.getParameter()` to see how many draw buffers are available.
    
    const maxDrawBuffers = gl.getParameter(gl.MAX_DRAW_BUFFERS);
    
# PublicKeyCredentialCreationOptions
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PublicKeyCredentialCreationOptions` dictionary represents the object passed to `CredentialsContainer.create()` as the value of the `publicKey` option: that is, when using `create()` to create a public key credential using the Web Authentication API.
## Instance properties
`attestation` Optional
    
A string specifying the relying party's preference for how the attestation statement (i.e., provision of verifiable evidence of the authenticity of the authenticator and its data) is conveyed during credential creation. The value can be one of the following:
`"none"`
    
Specifies that the relying party is not interested in authenticator attestation. This might be to avoid additional user consent for round trips to the relying party server to relay identifying information, or round trips to an attestation certificate authority (CA), with the aim of making the authentication process smoother. If `"none"` is chosen as the `attestation` value, and the authenticator signals that it uses a CA to generate its attestation statement, the client app will replace it with a "None" attestation statement, indicating that no attestation statement is available.
`"direct"`
    
Specifies that the relying party wants to receive the attestation statement as generated by the authenticator.
`"enterprise"`
    
Specifies that the Relying Party wants to receive an attestation statement that may include uniquely identifying information. This is intended for controlled deployments within an enterprise where the organization wishes to tie registrations to specific authenticators.
`"indirect"`
    
Specifies that the relying party wants to receive a verifiable attestation statement, but it will allow the client to decide how to receive it. For example, the client could choose to replace the authenticator's assertion statement with one generated by an Anonymization CA to protect user privacy.
If `attestation` is omitted, it will default to `"none"`.
`attestationFormats` Optional
    
An array of strings specifying the relying party's preference for the attestation statement format used by the authenticator. Values should be ordered from highest to lowest preference, and should be considered hints — the authenticator may choose to issue an attestation statement in a different format. For a list of valid formats, see WebAuthn Attestation Statement Format Identifiers.
If omitted, `attestationFormats` defaults to an empty array.
`authenticatorSelection` Optional
    
An object whose properties are criteria used to filter out the potential authenticators for the credential creation operation. This object can contain the properties:
`authenticatorAttachment` Optional
    
A string indicating which authenticator attachment type should be permitted for the chosen authenticator. Possible values are:
`"platform"`
    
The authenticator is part of the device WebAuthn is running on (termed a platform authenticator), therefore WebAuthn will communicate with it using a transport available to that platform, such as a platform-specific API. A public key credential bound to a platform authenticator is called a platform credential.
`"cross-platform"`
    
The authenticator is not a part of the device WebAuthn is running on (termed a roaming authenticator as it can roam between different devices), therefore WebAuthn will communicate with it using a cross-platform transport protocol such as Bluetooth or NFC. A public key credential bound to a roaming authenticator is called a roaming credential.
If omitted, any type of authenticator, either platform or cross-platform, can be selected for the credential creation operation.
`requireResidentKey` Optional
    
A boolean. If set to `true`, it indicates that a resident key is required (see `residentKey`) This property is deprecated, but still available in some implementations for backwards compatibility with WebAuthn Level 1. The value should be set to `true` if `residentKey` is set to `"required"`.
If omitted, `requireResidentKey` defaults to `false`.
`residentKey` Optional
    
A string that specifies the extent to which the relying party desires to create a client-side discoverable credential (that is, one that is usable in authentication requests where the relying party does not provide credential IDs — `navigator.credentials.get()` is called with an empty `allowCredentials` value). The alternative is a server-side credential, where the relying party must provide credential IDs in the `get()` `allowCredentials` value. Possible values are:
`"discouraged"`
    
The relying party prefers creation of a server-side credential, but will accept a client-side discoverable credential.
`"preferred"`
    
The relying party strongly prefers creation of a client-side discoverable credential, but will accept a server-side credential. The user agent should guide the user through setting up user verification, if needed, to create a discoverable credential. This takes precedence over the `userVerification` setting.
`"required"`
    
The relying party requires a client-side discoverable credential. If one cannot be created, a `NotAllowedError` `DOMException` is thrown. See the `create()` exceptions list for more details.
If omitted, `residentKey` defaults to `"required"` if `requireResidentKey` is `true`, otherwise the default value is `"discouraged"`.
`userVerification` Optional
    
A string that specifies the relying party's requirements for user verification for the `create()` operation. Possible values are:
`"discouraged"`
    
The relying party prefers no user verification for the `create()` operation, in the interests of minimizing disruption to the user experience.
`"preferred"`
    
The relying party prefers user verification for the `create()` operation, but it will not fail if user verification cannot be performed.
`"required"`
    
The relying party requires user verification for the `create()` operation — if user verification cannot be performed, an error is thrown.
If omitted, `userVerification` defaults to `"preferred"`.
`challenge`
    
An `ArrayBuffer`, `TypedArray`, or `DataView` provided by the relying party's server and used as a cryptographic challenge. This value will be signed by the authenticator and the signature will be sent back as part of `AuthenticatorAttestationResponse.attestationObject`.
`excludeCredentials` Optional
    
An `Array` of objects describing existing credentials that are already mapped to this user account (as identified by `user.id`). This is provided by the relying party, and checked by the user agent to avoid creating a new public key credential on an authenticator that already has a credential mapped to the specified user account. Each item should be of the form:
`id`
    
An `ArrayBuffer`, `TypedArray`, or `DataView` representing the existing credential ID.
`transports` Optional
    
An `Array` of strings representing allowed transports. Possible transports are: `"ble"`, `"hybrid"`, `"internal"`, `"nfc"`, and `"usb"` (see `getTransports()` for more details).
`type`
    
A string defining the type of public key credential to create. This can currently take a single value, `"public-key"`, but more values may be added in the future.
If the `create()` call is attempting to create a duplicate public key credential on an authenticator, the user agent will guide to user to create the credential using a different authenticator, or fail if that is not possible.
If `excludeCredentials` is omitted, it defaults to an empty array.
`extensions` Optional
    
An object containing properties representing the input values for any requested extensions. These extensions are used to specific additional processing by the client or authenticator during the credential creation process. Examples include specifying whether a returned credential is discoverable, or whether the relying party will be able to store large blob data associated with a credential.
Extensions are optional and different browsers may recognize different extensions. Processing extensions is always optional for the client: if a browser does not recognize a given extension, it will just ignore it. For information on using extensions, and which ones are supported by which browsers, see Web Authentication extensions.
`hints` Optional Experimental
    
An array of strings providing hints as to what UI the browser should provide for the user to create a public key credential.
The strings can be any of the following:
`"security-key"`
    
The UI should recommend using a separate physical security key (such as a YubiKey) to create the credential.
`"client-device"`
    
The UI should recommend using an authenticator available on the same device they are using to access the RP client to create the credential. It is analogous to the `authenticatorAttachment` `platform` value.
`"hybrid"`
    
The UI should recommend using a general-purpose authenticator, such as a smartphone-based authenticator app, to create the credential. This favors using a cross-device approach to handling authentication, relying on a combination of laptop and smartphone, for example.
The `authenticatorAttachment` `cross-platform` value is essentially a combination of the `hints` option `security-key` and `hybrid` values — if a device doesn't have bluetooth and an RP specifies `attachment: "cross-platform"`, the resulting UI will likely be similar to the `hints: "security-key"` UI.
When multiple strings are included in the array, their order denotes the order of preference, from high to low. Supporting browsers that respect the hints should use the first one that they understand.
The `hints` option provides a more flexible way to specify UI preferences for creating a credential than the `authenticatorAttachment` option, which completely hides the non-chosen option. `hints` also allow indicating a preference for either security keys or hybrid, which is not possible to do with `authenticatorAttachment`.
Specified `hints` may contradict hints provided in the `authenticatorAttachment` option. When the provided `hints` contradict this option, the `hints` take precedence. `hints` may also be ignored by the browser under specific circumstances, for example if a hinted authenticator type is not usable on the user's device.
For some specific code and UI examples, see Introducing hints, Related Origin Requests and JSON serialization for WebAuthn in Chrome.
`pubKeyCredParams`
    
An `Array` of objects which specify the key types and signature algorithms the Relying Party supports, ordered from most preferred to least preferred. The client and authenticator will make a best-effort to create a credential of the most preferred type possible. These objects will contain the following properties:
`alg`
    
A number that is equal to a COSE Algorithm Identifier, representing the cryptographic algorithm to use for this credential type. It is recommended that relying parties that wish to support a wide range of authenticators should include at least the following values in the provided choices:
  * `-8`: EdDSA
  * `-7`: ES256
  * `-257`: RS256


`type`
    
A string defining the type of public key credential to create. This can currently take a single value, `"public-key"`, but more values may be added in the future.
If none of the listed credential types can be created, the `create()` operation fails.
`rp`
    
An object describing the relying party that requested the credential creation. It can contain the following properties:
`id` Optional
    
A string representing the ID of the relying party. A public key credential can only be used for authentication with the same relying party (as identified by the `publicKey.rpId` in a `navigator.credentials.get()` call) it was registered with — the IDs need to match.
The `id` cannot include a port or scheme like a standard origin, but the domain scheme must be `https` scheme. The `id` needs to equal the origin's effective domain, or a domain suffix thereof. So for example if the relying party's origin is `https://login.example.com:1337`, the following `id`s are valid:
  * `login.example.com`
  * `example.com`


But not:
  * `m.login.example.com`
  * `com`


If omitted, `id` defaults to the document origin — which would be `login.example.com` in the above example.
`name`
    
A string representing the name of the relying party (e.g., `"Facebook"`). This is the name the user will be presented with when creating or validating a WebAuthn operation.
`timeout` Optional
    
A numerical hint, in milliseconds, which indicates the time the calling web app is willing to wait for the creation operation to complete. This hint may be overridden by the browser.
`user`
    
An object describing the user account for which the credential is generated. It can contain the following properties:
`displayName`
    
A string providing a human-friendly user display name (example: `"Maria Sanchez"`), which will have been set by user during initial registration with the relying party.
`id`
    
An `ArrayBuffer`, `TypedArray`, or `DataView` representing a unique ID for the user account. This value has a maximum length of 64 bytes, and is not intended to be displayed to the user.
`name`
    
A string providing a human-friendly identifier for the user's account, to help distinguish between different accounts with similar `displayName`s. This could be an email address (such as `"elaina.sanchez@example.com"`), phone number (for example `"+12345678901"`), or some other kind of user account identifier (for example `"ElainaSanchez667"`).
## Examples
>
### Creating a public key credential
This example creates a `PublicKeyCredentialCreationOptions`, specifying only the required properties, and using defaults for the rest.
It then passes the object into `navigator.credentials.create()`, to create a new public key credential.
    
    const publicKey = {
      challenge: challengeFromServer,
      rp: { id: "acme.com", name: "ACME Corporation" },
      user: {
        id: new Uint8Array([79, 252, 83, 72, 214, 7, 89, 26]),
        name: "jamiedoe",
        displayName: "Jamie Doe",
      },
      pubKeyCredParams: [{ type: "public-key", alg: -7 }],
    };
    
    const publicKeyCredential = await navigator.credentials.create({ publicKey });
    
A successful `create()` call returns a promise that resolves with a `PublicKeyCredential` object instance, representing a public key credential that can later be used to authenticate a user via a WebAuthn `get()` call. Its `PublicKeyCredential.response` property contains an `AuthenticatorAttestationResponse` object providing access to several useful pieces of information including the authenticator data, public key, transport mechanisms, and more.
    
    navigator.credentials.create({ publicKey }).then((publicKeyCredential) => {
      const response = publicKeyCredential.response;
    
      // Access attestationObject ArrayBuffer
      const attestationObj = response.attestationObject;
    
      // Access client JSON
      const clientJSON = response.clientDataJSON;
    
      // Return authenticator data ArrayBuffer
      const authenticatorData = response.getAuthenticatorData();
    
      // Return public key ArrayBuffer
      const pk = response.getPublicKey();
    
      // Return public key algorithm identifier
      const pkAlgo = response.getPublicKeyAlgorithm();
    
      // Return permissible transports array
      const transports = response.getTransports();
    });
    
Some of this data will need to be stored on the server for future authentication operations against this credential — for example the public key, the algorithm used, and the permissible transports.
See Creating a key pair and registering a user for more information about how the overall flow works.
# XMLHttpRequestUpload
Note: This feature is available in Web Workers, except for Service Workers.
The `XMLHttpRequestUpload` interface represents the upload process for a specific `XMLHttpRequest`. It is an opaque object that represents the underlying, browser-dependent, upload process. It is an `XMLHttpRequestEventTarget` and can be obtained by calling `XMLHttpRequest.upload`.
EventTarget  XMLHttpRequestEventTarget  XMLHttpRequestUpload 
## Instance properties
This interface has no specific property, but inherits the properties of `XMLHttpRequestEventTarget` and of `EventTarget`.
## Instance methods
This interface has no specific method, but inherits the methods of `XMLHttpRequestEventTarget` and of `EventTarget`.
## Events
This interface has no specific event, but inherits the events of `XMLHttpRequestEventTarget`.
## Examples
>
### Uploading a file with a timeout
This allows you to upload a file to a server; it displays a progress bar while the upload is happening as well as a message with the progress and the results, success or failure. An abort button allows to stop an upload.
#### HTML
    
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>XMLHttpRequestUpload test</title>
        <link rel="stylesheet" href="xhrupload_test.css" />
        <script src="xhrupload_test.js"></script>
      </head>
      <body>
        <main>
          <h1>Upload a file</h1>
          <p>
            <label for="file">File to upload</label><input type="file" id="file" />
          </p>
          <p>
            <progress></progress>
          </p>
          <p>
            <output></output>
          </p>
          <p>
            <button disabled id="abort">Abort</button>
          </p>
        </main>
      </body>
    </html>
    
#### CSS
    
    body {
      background-color: lightblue;
    }
    
    main {
      margin: 50px auto;
      text-align: center;
    }
    
    #file {
      display: none;
    }
    
    label[for="file"] {
      background-color: lightgrey;
      padding: 10px;
    }
    
    progress {
      display: none;
    }
    
    progress.visible {
      display: inline;
    }
    
#### JavaScript
    
    const fileInput = document.getElementById("file");
    const progressBar = document.querySelector("progress");
    const log = document.querySelector("output");
    const abortButton = document.getElementById("abort");
    
    fileInput.addEventListener("change", () => {
      const xhr = new XMLHttpRequest();
      xhr.timeout = 2000; // 2 seconds
    
      // Link abort button
      abortButton.addEventListener(
        "click",
        () => {
          xhr.abort();
        },
        { once: true },
      );
    
      // When the upload starts, we display the progress bar
      xhr.upload.addEventListener("loadstart", (event) => {
        progressBar.classList.add("visible");
        progressBar.value = 0;
        progressBar.max = event.total;
        log.textContent = "Uploading (0%)…";
        abortButton.disabled = false;
      });
    
      // Each time a progress event is received, we update the bar
      xhr.upload.addEventListener("progress", (event) => {
        progressBar.value = event.loaded;
        log.textContent = `Uploading (${(
          (event.loaded / event.total) *
          100
        ).toFixed(2)}%)…`;
      });
    
      // When the upload is finished, we hide the progress bar.
      xhr.upload.addEventListener("loadend", (event) => {
        progressBar.classList.remove("visible");
        if (event.loaded !== 0) {
          log.textContent = "Upload finished.";
        }
        abortButton.disabled = true;
      });
    
      // In case of an error, an abort, or a timeout, we hide the progress bar
      // Note that these events can be listened to on the xhr object too
      function errorAction(event) {
        progressBar.classList.remove("visible");
        log.textContent = `Upload failed: ${event.type}`;
      }
      xhr.upload.addEventListener("error", errorAction);
      xhr.upload.addEventListener("abort", errorAction);
      xhr.upload.addEventListener("timeout", errorAction);
    
      // Build the payload
      const fileData = new FormData();
      fileData.append("file", fileInput.files[0]);
    
      // Theoretically, event listeners could be set after the open() call
      // but browsers are buggy here
      xhr.open("POST", "upload_test.php", true);
    
      // Note that the event listener must be set before sending (as it is a preflighted request)
      xhr.send(fileData);
    });
    
  * `XMLHttpRequest`


# DOMException
Note: This feature is available in Web Workers.
The `DOMException` interface represents an abnormal event (called an exception) that occurs as a result of calling a method or accessing a property of a web API. This is how error conditions are described in web APIs.
Each exception has a name, which is a short "PascalCase"-style string identifying the error or abnormal condition.
`DOMException` is a Serializable object, so it can be cloned with `structuredClone()` or copied between Workers using `postMessage()`.
## Constructor
`DOMException()`
    
Returns a `DOMException` object with a specified message and name.
## Instance properties
`DOMException.code` Deprecated Read only
    
Returns one of the legacy error code constants, or `0` if none match.
`DOMException.message` Read only
    
Returns a string representing a message or description associated with the given error name.
`DOMException.name` Read only
    
Returns a string that contains one of the strings associated with an error name.
## Error names
Common error names are listed here. Some APIs define their own sets of names, so this is not necessarily a complete list.
The following deprecated historical errors don't have an error name but instead have only a legacy constant code value and a legacy constant name:
  * Legacy code value: `2`, legacy constant name: `DOMSTRING_SIZE_ERR`
  * Legacy code value: `6`, legacy constant name: `NO_DATA_ALLOWED_ERR`
  * Legacy code value: `16`, legacy constant name: `VALIDATION_ERR`


Note: Because historically the errors were identified by a numeric value that corresponded with a named variable defined to have that value, some of the entries below indicate the legacy code value and constant name that were used in the past.
`IndexSizeError`
    
The index is not in the allowed range. For example, this can be thrown by the `Range` object. (Legacy code value: `1` and legacy constant name: `INDEX_SIZE_ERR`)
`HierarchyRequestError`
    
The node tree hierarchy is not correct. (Legacy code value: `3` and legacy constant name: `HIERARCHY_REQUEST_ERR`)
`WrongDocumentError`
    
The object is in the wrong `Document`. (Legacy code value: `4` and legacy constant name: `WRONG_DOCUMENT_ERR`)
`InvalidCharacterError`
    
The string contains invalid characters. (Legacy code value: `5` and legacy constant name: `INVALID_CHARACTER_ERR`)
`NoModificationAllowedError`
    
The object cannot be modified. (Legacy code value: `7` and legacy constant name: `NO_MODIFICATION_ALLOWED_ERR`)
`NotFoundError`
    
The object cannot be found here. (Legacy code value: `8` and legacy constant name: `NOT_FOUND_ERR`)
`NotSupportedError`
    
The operation is not supported. (Legacy code value: `9` and legacy constant name: `NOT_SUPPORTED_ERR`)
`InUseAttributeError`
    
The attribute is in use. (Legacy code value: `10` and legacy constant name: `INUSE_ATTRIBUTE_ERR`)
`InvalidStateError`
    
The object is in an invalid state. (Legacy code value: `11` and legacy constant name: `INVALID_STATE_ERR`)
`SyntaxError`
    
The string did not match the expected pattern. (Legacy code value: `12` and legacy constant name: `SYNTAX_ERR`)
`InvalidModificationError`
    
The object cannot be modified in this way. (Legacy code value: `13` and legacy constant name: `INVALID_MODIFICATION_ERR`)
`NamespaceError`
    
The operation is not allowed by Namespaces in XML. (Legacy code value: `14` and legacy constant name: `NAMESPACE_ERR`)
`InvalidAccessError`
    
The object does not support the operation or argument. (Legacy code value: `15` and legacy constant name: `INVALID_ACCESS_ERR`)
`TypeMismatchError` Deprecated
    
The type of the object does not match the expected type. (Legacy code value: `17` and legacy constant name: `TYPE_MISMATCH_ERR`) This value is deprecated; the JavaScript `TypeError` exception is now raised instead of a `DOMException` with this value.
`SecurityError`
    
The operation is insecure. (Legacy code value: `18` and legacy constant name: `SECURITY_ERR`)
`NetworkError` Experimental
    
A network error occurred. (Legacy code value: `19` and legacy constant name: `NETWORK_ERR`)
`AbortError` Experimental
    
The operation was aborted. (Legacy code value: `20` and legacy constant name: `ABORT_ERR`)
`URLMismatchError` Experimental
    
The given URL does not match another URL. (Legacy code value: `21` and legacy constant name: `URL_MISMATCH_ERR`)
`QuotaExceededError`
    
The quota has been exceeded. (Legacy code value: `22` and legacy constant name: `QUOTA_EXCEEDED_ERR`) It is a proper interface that derives from `DOMException`.
`TimeoutError`
    
The operation timed out. (Legacy code value: `23` and legacy constant name: `TIMEOUT_ERR`)
`InvalidNodeTypeError` Experimental
    
The node is incorrect or has an incorrect ancestor for this operation. (Legacy code value: `24` and legacy constant name: `INVALID_NODE_TYPE_ERR`)
`DataCloneError` Experimental
    
The object can not be cloned. (Legacy code value: `25` and legacy constant name: `DATA_CLONE_ERR`)
`EncodingError` Experimental
    
The encoding or decoding operation failed (No legacy code value and constant name).
`NotReadableError` Experimental
    
The input/output read operation failed (No legacy code value and constant name).
`UnknownError` Experimental
    
The operation failed for an unknown transient reason (e.g., out of memory) (No legacy code value and constant name).
`ConstraintError` Experimental
    
A mutation operation in a transaction failed because a constraint was not satisfied (No legacy code value and constant name).
`DataError` Experimental
    
Provided data is inadequate (No legacy code value and constant name).
`TransactionInactiveError` Experimental
    
A request was placed against a transaction that is currently not active or is finished (No legacy code value and constant name).
`ReadOnlyError` Experimental
    
The mutating operation was attempted in a "readonly" transaction (No legacy code value and constant name).
`VersionError` Experimental
    
An attempt was made to open a database using a lower version than the existing version (No legacy code value and constant name).
`OperationError` Experimental
    
The operation failed for an operation-specific reason (No legacy code value and constant name).
`NotAllowedError`
    
The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission (No legacy code value and constant name).
  * A polyfill of `DOMException` is available in `core-js`
  * `DOMError`


# CanvasCaptureMediaStreamTrack
The `CanvasCaptureMediaStreamTrack` interface of the Media Capture and Streams API represents the video track contained in a `MediaStream` being generated from a `<canvas>` following a call to `HTMLCanvasElement.captureStream()`.
EventTarget  MediaStreamTrack  CanvasCaptureMediaStreamTrack 
## Instance properties
This interface inherits the properties of its parent, `MediaStreamTrack`.
`CanvasCaptureMediaStreamTrack.canvas` Read only
    
Returns the `HTMLCanvasElement` object whose surface is captured in real-time.
## Instance methods
This interface inherits the methods of its parent, `MediaStreamTrack`.
`CanvasCaptureMediaStreamTrack.requestFrame()`
    
Manually forces a frame to be captured and sent to the stream. This lets applications that wish to specify the frame capture times directly do so, if they specified a `frameRate` of 0 when calling `captureStream()`.
  * `HTMLCanvasElement.captureStream()` to begin capturing frames from a canvas


# SubmitEvent
The `SubmitEvent` interface defines the object used to represent an HTML form's `submit` event. This event is fired at the `<form>` when the form's submit action is invoked.
Event  SubmitEvent 
## Constructor
`SubmitEvent()`
    
Creates and returns a new `SubmitEvent` object whose `type` and other options are configured as specified. Note that currently the only valid `type` for a `SubmitEvent` is `submit`.
## Instance properties
In addition to the properties listed below, this interface inherits the properties of its parent interface, `Event`.
`submitter` Read only
    
An `HTMLElement` object which identifies the button or other element which was invoked to trigger the form being submitted.
## Instance methods
While `SubmitEvent` offers no methods of its own, it inherits any specified by its parent interface, `Event`.
## Examples
In this example, a shopping cart may have an assortment of different submit buttons depending on factors such as the user's settings, the shop's settings, and any minimum or maximum shopping card totals established by the payment processors. Each of the submit elements' `id` is used to identify which payment processor the button corresponds to.
    
    let form = document.querySelector("form");
    form.addEventListener("submit", (event) => {
      let submitter = event.submitter;
      let handler = submitter.id;
    
      if (handler) {
        processOrder(form, handler);
      } else {
        showAlertMessage(
          "An unknown or unaccepted payment type was selected. Please try again.",
          "OK",
        );
      }
    });
    
The handler ID is obtained by using the `submit` event's `submitter` property to get the submit button, from which we then get the ID. With that in hand, we can call a `processOrder()` function to handle the order, passing along the form and the handler ID.
# SVGUseElement
## SVG use DOM interface
The `SVGUseElement` interface corresponds to the `<use>` element.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGUseElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGGraphicsElement`.
`SVGUseElement.href` Read only
    
An `SVGAnimatedString` corresponding to the `href` or `xlink:href` Deprecated attribute of the given element.
`SVGUseElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGUseElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
`SVGUseElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGUseElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGGraphicsElement`.
  * `<use>`


# Selection API
Note: This API is not available in Web Workers (not exposed via `WorkerNavigator`).
The Selection API enables developers to access and manipulate the portion of a document selected by the user.
The `Window.getSelection()` and `Document.getSelection()` methods return a `Selection` object representing the portion of the document selected by the user. A `Selection` object provides methods to:
  * access the currently selected nodes
  * modify the current selection, expanding or collapsing it or selecting an entirely different part of the document
  * delete parts of the current selection from the DOM.


The Selection API also provides two events, both firing on `Document`:
  * the `selectstart` event is fired when the user starts to make a new selection
  * the `selectionchange` event is fired when the current selection changes.


## Interfaces
`Selection`
    
An interface which represents the part of the document selected by the user or the current position of the caret.
`Document.getSelection()`
    
A method returning a `Selection` object representing the current selection or current position of the caret.
`Window.getSelection()`
    
A method returning a `Selection` object representing the current selection or current position of the caret.
`Document.selectionchange`
    
An event which is fired when the current selection is changed.
`Node.selectstart`
    
An event which is fired when a user starts a new selection.
# HTMLDataListElement
The `HTMLDataListElement` interface provides special properties (beyond the `HTMLElement` object interface it also has available to it by inheritance) to manipulate `<datalist>` elements and their content.
EventTarget  Node  Element  HTMLElement  HTMLDataListElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLDataListElement.options` Read only
    
A `HTMLCollection` representing a collection of the contained option elements.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<datalist>`


# Scheduler
Note: This feature is available in Web Workers.
The `Scheduler` interface of the Prioritized Task Scheduling API provides methods for scheduling prioritized tasks.
A `Scheduler` can be accessed from the global object using `Window.scheduler` or `WorkerGlobalScope.scheduler` within a worker.
## Instance properties
None.
## Instance methods
`Scheduler.postTask()`
    
Adds a task to the scheduler as a callback, optionally specifying a priority, delay, and/or a signal for aborting the task.
`Scheduler.yield()`
    
Yields control of the main thread back to the browser, returning a promise that resolves to continue execution where it left off.
## Examples
If the feature is defined, an instance of this object is returned by the `globalThis` property in both workers and the main thread.
The code below shows a simple task that resolves with the text 'Task executing'. This text is logged on success. The code also shows a `catch` block, which would be required in more complex code to handle when a task is aborted or throws an error.
    
    if ("scheduler" in this) {
      // Post task with default priority: 'user-visible' (no other options)
      // When the task resolves, Promise.then() logs the result.
      scheduler
        .postTask(() => "Task executing")
        .then((taskResult) => console.log(`${taskResult}`)) // Log result
        .catch((error) => console.error(`Error: ${error}`)); // Log errors
    }
    
For more comprehensive example code see Prioritized Task Scheduling API > Examples.
# HighlightRegistry
The `HighlightRegistry` interface of the CSS Custom Highlight API is used to register `Highlight` objects to be styled using the API. It is accessed via `CSS.highlights`.
A `HighlightRegistry` instance is a `Map`-like object, in which each key is the name string for a custom highlight, and the corresponding value is the associated `Highlight` object.
## Instance properties
The `HighlightRegistry` interface doesn't inherit any properties.
`HighlightRegistry.size` Read only
    
Returns the number of `Highlight` objects currently registered.
## Instance methods
The `HighlightRegistry` interface doesn't inherit any methods.
`HighlightRegistry.clear()`
    
Remove all `Highlight` objects from the registry.
`HighlightRegistry.delete()`
    
Remove the named `Highlight` object from the registry.
`HighlightRegistry.entries()`
    
Returns a new iterator object that contains each `Highlight` object in the registry, in insertion order.
`HighlightRegistry.forEach()`
    
Calls the given callback once for each `Highlight` object in the registry, in insertion order.
`HighlightRegistry.get()`
    
Gets the named `Highlight` object from the registry.
`HighlightRegistry.has()`
    
Returns a boolean asserting whether a `Highlight` object is present the registry or not.
`HighlightRegistry.highlightsFromPoint()` Experimental
    
Returns an array of objects representing the custom highlights applied at a specific point within the viewport.
`HighlightRegistry.keys()`
    
An alias for `HighlightRegistry.values()`.
`HighlightRegistry.set()`
    
Adds the given `Highlight` object to the registry with the given name, or updates the named `Highlight` object, if it already exists in the registry.
`HighlightRegistry.values()`
    
Returns a new iterator object that yields the `Highlight` objects in the registry, in insertion order.
## Examples
>
### Registering a highlight
The following example demonstrates how to create ranges, instantiate a new `Highlight` object for them, and register the highlight using the `HighlightRegistry`, to style it on the page:
#### HTML
    
    <p id="foo">CSS Custom Highlight API</p>
    
#### CSS
    
    ::highlight(my-custom-highlight) {
      background-color: peachpuff;
    }
    
#### JavaScript
    
    const text = document.getElementById("foo").firstChild;
    
    if (!CSS.highlights) {
      text.textContent =
        "The CSS Custom Highlight API is not supported in this browser!";
    }
    
    // Create a couple of ranges.
    const range1 = new Range();
    range1.setStart(text, 0);
    range1.setEnd(text, 3);
    
    const range2 = new Range();
    range2.setStart(text, 21);
    range2.setEnd(text, 24);
    
    // Create a custom highlight for these ranges.
    const highlight = new Highlight(range1, range2);
    
    // Register the ranges in the HighlightRegistry.
    CSS.highlights.set("my-custom-highlight", highlight);
    
#### Result
  * The CSS Custom Highlight API
  * CSS custom highlight API module
  * CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web


# WheelEvent
The `WheelEvent` interface represents events that occur due to the user moving a mouse wheel or similar input device.
Note: This is the standard wheel event interface to use. Old versions of browsers implemented the non-standard and non-cross-browser-compatible `MouseWheelEvent` and `MouseScrollEvent` interfaces. Use this interface and avoid the non-standard ones.
Don't confuse the `wheel` event with the `scroll` event:
  * A `wheel` event doesn't necessarily dispatch a `scroll` event. For example, the element may be unscrollable at all. Zooming actions using the wheel or trackpad also fire `wheel` events.
  * A `scroll` event isn't necessarily triggered by a `wheel` event. Elements can also be scrolled by using the keyboard, dragging a scrollbar, or using JavaScript.
  * Even when the `wheel` event does trigger scrolling, the `delta*` values in the `wheel` event don't necessarily reflect the content's scrolling direction.

Event  UIEvent  MouseEvent  WheelEvent 
## Constructor
`WheelEvent()`
    
Creates a `WheelEvent` object.
## Instance properties
This interface inherits properties from its ancestors, `MouseEvent`, `UIEvent`, and `Event`.
`WheelEvent.deltaX` Read only
    
Returns a `double` representing the horizontal scroll amount.
`WheelEvent.deltaY` Read only
    
Returns a `double` representing the vertical scroll amount.
`WheelEvent.deltaZ` Read only
    
Returns a `double` representing the scroll amount for the z-axis.
`WheelEvent.deltaMode` Read only
    
Returns an `unsigned long` representing the unit of the `delta*` values' scroll amount.
`WheelEvent.wheelDelta` Read only Deprecated Non-standard
    
Returns an integer (32-bit) representing the distance in pixels.
`WheelEvent.wheelDeltaX` Read only Deprecated Non-standard
    
Returns an integer representing the horizontal scroll amount.
`WheelEvent.wheelDeltaY` Read only Deprecated Non-standard
    
Returns an integer representing the vertical scroll amount.
Note: Element: mousewheel event has additional documentation about the deprecated properties `wheelDelta`, `wheelDeltaX`, `wheelDeltaY`.
## Instance methods
This interface doesn't define any specific methods, but inherits methods from its ancestors, `MouseEvent`, `UIEvent`, and `Event`.
  * `wheel` event
  * Interfaces replaced by this one: 
    * Gecko's legacy mouse wheel event object: `MouseScrollEvent`


# MediaTrackSupportedConstraints
The `MediaTrackSupportedConstraints` dictionary establishes the list of constrainable properties recognized by the user agent or browser in its implementation of the `MediaStreamTrack` object. An object conforming to `MediaTrackSupportedConstraints` is returned by `MediaDevices.getSupportedConstraints()`.
Because of the way interface definitions in WebIDL work, if a constraint is requested but not supported, no error will occur. Instead, the specified constraints will be applied, with any unrecognized constraints stripped from the request. That can lead to confusing and hard to debug errors, so be sure to use `getSupportedConstraints()` to retrieve this information before attempting to establish constraints if you need to know the difference between silently ignoring a constraint and a constraint being accepted.
An actual constraint set is described using an object based on the `MediaTrackConstraints` dictionary.
To learn more about how constraints work, see Capabilities, constraints, and settings.
## Instance properties
Some combination—but not necessarily all—of the following properties will exist on the object.
`autoGainControl`
    
A Boolean whose value is `true` if the `autoGainControl` constraint is supported in the current environment.
`width`
    
A Boolean value whose value is `true` if the `width` constraint is supported in the current environment.
`height`
    
A Boolean value whose value is `true` if the `height` constraint is supported in the current environment.
`aspectRatio`
    
A Boolean value whose value is `true` if the `aspectRatio` constraint is supported in the current environment.
`frameRate`
    
A Boolean value whose value is `true` if the `frameRate` constraint is supported in the current environment.
`facingMode`
    
A Boolean value whose value is `true` if the `facingMode` constraint is supported in the current environment.
`resizeMode`
    
A Boolean value whose value is `true` if the `resizeMode` constraint is supported in the current environment.
`volume` Deprecated Non-standard
    
A Boolean value whose value is `true` if the `volume` constraint is supported in the current environment.
`sampleRate`
    
A Boolean value whose value is `true` if the `sampleRate` constraint is supported in the current environment.
`sampleSize`
    
A Boolean value whose value is `true` if the `sampleSize` constraint is supported in the current environment.
`echoCancellation`
    
A Boolean value whose value is `true` if the `echoCancellation` constraint is supported in the current environment.
`latency`
    
A Boolean value whose value is `true` if the `latency` constraint is supported in the current environment.
`noiseSuppression`
    
A Boolean whose value is `true` if the `noiseSuppression` constraint is supported in the current environment.
`suppressLocalAudioPlayback`
    
A Boolean whose value is `true` if the `suppressLocalAudioPlayback` constraint is supported in the current environment.
`channelCount`
    
A Boolean value whose value is `true` if the `channelCount` constraint is supported in the current environment.
`deviceId`
    
A Boolean value whose value is `true` if the `deviceId` constraint is supported in the current environment.
`groupId`
    
A Boolean value whose value is `true` if the `groupId` constraint is supported in the current environment.
### Instance properties specific to shared screen tracks
For tracks containing video sources from the user's screen contents, the following additional properties are may be included in addition to those available for video tracks.
`displaySurface`
    
A Boolean value which is `true` if the `displaySurface` constraint is supported in the current environment.
`logicalSurface`
    
A Boolean value which is `true` if the `logicalSurface` constraint is supported in the current environment.
  * Media Capture and Streams API
  * Capabilities, constraints, and settings
  * Screen Capture API
  * Using the Screen Capture API
  * `MediaTrackConstraints`
  * `MediaDevices.getUserMedia()`
  * `MediaStreamTrack.getConstraints()`
  * `MediaStreamTrack.applyConstraints()`
  * `MediaStreamTrack.getSettings()`


# BackgroundFetchRecord
Note: This feature is available in Web Workers.
The `BackgroundFetchRecord` interface of the Background Fetch API represents an individual request and response.
A `BackgroundFetchRecord` is created by the `BackgroundFetchRegistration.matchAll()` method, therefore there is no constructor for this interface.
There will be one `BackgroundFetchRecord` for each resource requested by `fetch()`.
## Instance properties
`request` Read only Experimental
    
Returns a `Request`.
`responseReady` Read only Experimental
    
Returns a promise that resolves with a `Response`.
## Examples
In this example an individual `BackgroundFetchRecord` is returned using `BackgroundFetchRegistration.matchAll()`. The `BackgroundFetchRecord.request` and `BackgroundFetchRecord.responseReady` are returned and logged to the console.
    
    bgFetch.match("/ep-5.mp3").then(async (record) => {
      if (!record) {
        console.log("No record found");
        return;
      }
    
      console.log(`Here's the request`, record.request);
      const response = await record.responseReady;
      console.log(`And here's the response`, response);
    });
    
# CryptoKeyPair
The `CryptoKeyPair` dictionary of the Web Crypto API represents a key pair for an asymmetric cryptography algorithm, also known as a public-key algorithm.
A `CryptoKeyPair` object can be obtained using `SubtleCrypto.generateKey()`, when the selected algorithm is one of the asymmetric algorithms: RSASSA-PKCS1-v1_5, RSA-PSS, RSA-OAEP, ECDSA, or ECDH.
It contains two properties, which are both `CryptoKey` objects: a `privateKey` property containing the private key and a `publicKey` property containing the public key.
## Instance properties
`CryptoKeyPair.privateKey`
    
A `CryptoKey` object representing the private key. For encryption and decryption algorithms, this key is used to decrypt. For signing and verification algorithms it is used to sign.
`CryptoKeyPair.publicKey`
    
A `CryptoKey` object representing the public key. For encryption and decryption algorithms, this key is used to encrypt. For signing and verification algorithms it is used to verify signatures.
## Examples
The examples for `SubtleCrypto` methods often use `CryptoKeyPair` objects. For example:
  * `SubtleCrypto.generateKey()`
  * `SubtleCrypto.deriveKey()`
  * `SubtleCrypto.importKey()`
  * `SubtleCrypto.exportKey()`
  * `SubtleCrypto.wrapKey()`
  * `SubtleCrypto.unwrapKey()`
  * `SubtleCrypto.encrypt()`
  * `SubtleCrypto.decrypt()`
  * `SubtleCrypto.sign()`
  * `SubtleCrypto.verify()`


  * `SubtleCrypto.generateKey`.
  * `SubtleCrypto.sign` and `SubtleCrypto.verify`.
  * `SubtleCrypto.encrypt` and `SubtleCrypto.decrypt`.


# Credential Management API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Credential Management API enables a website to create, store, and retrieve credentials. A credential is an item which enables a system to make an authentication decision: for example, to decide whether to sign a user into an account. We can think of it as a piece of evidence that a user presents to a website to demonstrate that they really are the person they are claiming to be.
## Concepts and usage
The central interface is the `CredentialsContainer`, which is accessed through the `navigator.credentials` property and provides three main functions:
  * `create()`: create a new credential.
  * `store()`: store a new credential locally.
  * `get()`: retrieve a credential, which can then be used to log a user in.


The API supports four different types of credential, which are all represented as subclasses of `Credential`:
Type Interface  
Password `PasswordCredential`  
Federated identity `IdentityCredential`, `FederatedCredential` (deprecated)  
One-time password (OTP) `OTPCredential`  
Web Authentication `PublicKeyCredential`  
The guide page Credential types gives an overview of the different credential types and how they are used.
## Interfaces
`Credential`
    
Provides information about an entity as a prerequisite to a trust decision.
`CredentialsContainer`
    
Exposes methods to request credentials and notify the user agent when interesting events occur such as successful sign in or sign out. This interface is accessible from `navigator.credentials`.
`FederatedCredential`
    
Provides information about credentials from a federated identity provider, which is an entity that a website trusts to correctly authenticate a user, and which provides an API for that purpose. OpenID Connect is an example of such a framework.
`PasswordCredential`
    
Provides information about a username/password pair.
### Extensions to other interfaces
`Navigator.credentials` Read only
    
Returns the `CredentialsContainer` interface which exposes methods to request credentials and notify the user agent when interesting events occur such as successful sign in or sign out.
>
### api.Credential
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Credential_Management_API` 51 18 60 38 13 51 60 41 13 5.0 51 13  
`id` 51 18 60 38 13 51 60 41 13 5.0 51 13  
`isConditionalMediationAvailable_static` No No No No 16 No No No 16 No No 16  
`type` 51 18 60 38 13 51 60 41 13 5.0 51 13  
### api.CredentialsContainer
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Credential_Management_API` 51 18 60 38 13 51 60 41 13 5.0 51 13  
`create` 60 18 60 47 13 60 60 44 13 8.0 60 13  
`get` 51 18 60 38 13 51 60 41 13 5.0 51 13  
`preventSilentAccess` 6051–60 18 60 4738–47 1713–17This method exists, but always rejected with a `NotSupportedError` exception. 6051–60 60 4441–44 1713–17This method exists, but always rejected with a `NotSupportedError` exception. 8.05.0–8.0 6051–60 1713–17This method exists, but always rejected with a `NotSupportedError` exception.  
`store` 51 79 60 38 13 51 60 41 13 5.0 51 13  
### api.FederatedCredential
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`FederatedCredential` 51 79 No 38 No 51 No 41 No 5.0 51 No  
`Credential_Management_API` 51 79 No 38 No 51 No 41 No 5.0 51 No  
`protocol` 51 79 No 38 No 51 No 41 No 5.0 51 No  
`provider` 51 79 No 38 No 51 No 41 No 5.0 51 No  
### api.PasswordCredential
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`PasswordCredential` 51 79 No 38 No 51 No 41 No 5.0 51 No  
`Credential_Management_API` 51 79 No 38 No 51 No 41 No 5.0 51 No  
`iconURL` 51 79 No 38 No 51 No 41 No 5.0 51 No  
`name` 51 79 No 38 No 51 No 41 No 5.0 51 No  
`password` 60 79 No 47 No 60 No 44 No 8.0 60 No  
  * Web Authentication API
  * WebOTP API
  * Federated Credential Management (FedCM) API


# AnimationTimeline
The `AnimationTimeline` interface of the Web Animations API represents the timeline of an animation. This interface exists to define timeline features, inherited by other timeline types:
  * `DocumentTimeline`
  * `ScrollTimeline`
  * `ViewTimeline`


## Instance properties
`currentTime` Read only
    
Returns the time value in milliseconds for this timeline or `null` if this timeline is inactive.
  * `DocumentTimeline`, `ScrollTimeline`, `ViewTimeline`
  * `Document.timeline`
  * Web Animations API
  * CSS scroll-driven animations


# Web Audio API
The Web Audio API provides a powerful and versatile system for controlling audio on the Web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.
## Web audio concepts and usage
The Web Audio API involves handling audio operations inside an audio context, and has been designed to allow modular routing. Basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. Several sources — with different types of channel layout — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.
Audio nodes are linked into chains and simple webs by their inputs and outputs. They typically start with one or more sources. Sources provide arrays of sound intensities (samples) at very small timeslices, often tens of thousands of them per second. These could be either computed mathematically (such as `OscillatorNode`), or they can be recordings from sound/video files (like `AudioBufferSourceNode` and `MediaElementAudioSourceNode`) and audio streams (`MediaStreamAudioSourceNode`). In fact, sound files are just recordings of sound intensities themselves, which come in from microphones or electric instruments, and get mixed down into a single, complicated wave.
Outputs of these nodes could be linked to inputs of others, which mix or modify these streams of sound samples into different streams. A common modification is multiplying the samples by a value to make them louder or quieter (as is the case with `GainNode`). Once the sound has been sufficiently processed for the intended effect, it can be linked to the input of a destination (`BaseAudioContext.destination`), which sends the sound to the speakers or headphones. This last connection is only necessary if the user is supposed to hear the audio.
A simple, typical workflow for web audio would look something like this:
  1. Create audio context
  2. Inside the context, create sources — such as `<audio>`, oscillator, stream
  3. Create effects nodes, such as reverb, biquad filter, panner, compressor
  4. Choose final destination of audio, for example your system speakers
  5. Connect the sources up to the effects, and the effects to the destination.


Timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate. So applications such as drum machines and sequencers are well within reach.
The Web Audio API also allows us to control how audio is spatialized. Using a system based on a source-listener model, it allows control of the panning model and deals with distance-induced attenuation induced by a moving source (or moving listener).
Note: You can read about the theory of the Web Audio API in a lot more detail in our article Basic concepts behind Web Audio API.
## Web Audio API target audience
The Web Audio API can seem intimidating to those that aren't familiar with audio or music terms, and as it incorporates a great deal of functionality it can prove difficult to get started if you are a developer.
It can be used to incorporate audio into your website or application, by providing atmosphere like futurelibrary.no, or auditory feedback on forms. However, it can also be used to create advanced interactive instruments. With that in mind, it is suitable for both developers and musicians alike.
We have a simple introductory tutorial for those that are familiar with programming but need a good introduction to some of the terms and structure of the API.
There's also a Basic Concepts Behind Web Audio API article, to help you understand the way digital audio works, specifically in the realm of the API. This also includes a good introduction to some of the concepts the API is built upon.
Learning coding is like playing cards — you learn the rules, then you play, then you go back and learn the rules again, then you play again. So if some of the theory doesn't quite fit after the first tutorial and article, there's an advanced tutorial which extends the first one to help you practice what you've learnt, and apply some more advanced techniques to build up a step sequencer.
We also have other tutorials and comprehensive reference material available that covers all features of the API. See the sidebar on this page for more.
If you are more familiar with the musical side of things, are familiar with music theory concepts, want to start building instruments, then you can go ahead and start building things with the advanced tutorial and others as a guide (the above-linked tutorial covers scheduling notes, creating bespoke oscillators and envelopes, as well as an LFO among other things.)
If you aren't familiar with the programming basics, you might want to consult some beginner's JavaScript tutorials first and then come back here — see our Beginner's JavaScript learning module for a great place to begin.
## Web Audio API interfaces
The Web Audio API has a number of interfaces and associated events, which we have split up into nine categories of functionality.
### General audio graph definition
General containers and definitions that shape audio graphs in Web Audio API usage.
`AudioContext`
    
The `AudioContext` interface represents an audio-processing graph built from audio modules linked together, each represented by an `AudioNode`. An audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an `AudioContext` before you do anything else, as everything happens inside a context.
`AudioNode`
    
The `AudioNode` interface represents an audio-processing module like an audio source (e.g., an HTML `<audio>` or `<video>` element), audio destination, intermediate processing module (e.g., a filter like `BiquadFilterNode`, or volume control like `GainNode`).
`AudioParam`
    
The `AudioParam` interface represents an audio-related parameter, like one of an `AudioNode`. It can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.
`AudioParamMap`
    
Provides a map-like interface to a group of `AudioParam` interfaces, which means it provides the methods `forEach()`, `get()`, `has()`, `keys()`, and `values()`, as well as a `size` property.
`BaseAudioContext`
    
The `BaseAudioContext` interface acts as a base definition for online and offline audio-processing graphs, as represented by `AudioContext` and `OfflineAudioContext` respectively. You wouldn't use `BaseAudioContext` directly — you'd use its features via one of these two inheriting interfaces.
The `ended` event
    
The `ended` event is fired when playback has stopped because the end of the media was reached.
### Defining audio sources
Interfaces that define audio sources for use in the Web Audio API.
`AudioScheduledSourceNode`
    
The `AudioScheduledSourceNode` is a parent interface for several types of audio source node interfaces. It is an `AudioNode`.
`OscillatorNode`
    
The `OscillatorNode` interface represents a periodic waveform, such as a sine or triangle wave. It is an `AudioNode` audio-processing module that causes a given frequency of wave to be created.
`AudioBuffer`
    
The `AudioBuffer` interface represents a short audio asset residing in memory, created from an audio file using the `BaseAudioContext.decodeAudioData` method, or created with raw data using `BaseAudioContext.createBuffer`. Once decoded into this form, the audio can then be put into an `AudioBufferSourceNode`.
`AudioBufferSourceNode`
    
The `AudioBufferSourceNode` interface represents an audio source consisting of in-memory audio data, stored in an `AudioBuffer`. It is an `AudioNode` that acts as an audio source.
`MediaElementAudioSourceNode`
    
The `MediaElementAudioSourceNode` interface represents an audio source consisting of an HTML `<audio>` or `<video>` element. It is an `AudioNode` that acts as an audio source.
`MediaStreamAudioSourceNode`
    
The `MediaStreamAudioSourceNode` interface represents an audio source consisting of a `MediaStream` (such as a webcam, microphone, or a stream being sent from a remote computer). If multiple audio tracks are present on the stream, the track whose `id` comes first lexicographically (alphabetically) is used. It is an `AudioNode` that acts as an audio source.
`MediaStreamTrackAudioSourceNode`
    
A node of type `MediaStreamTrackAudioSourceNode` represents an audio source whose data comes from a `MediaStreamTrack`. When creating the node using the `createMediaStreamTrackSource()` method to create the node, you specify which track to use. This provides more control than `MediaStreamAudioSourceNode`.
### Defining audio effects filters
Interfaces for defining effects that you want to apply to your audio sources.
`BiquadFilterNode`
    
The `BiquadFilterNode` interface represents a simple low-order filter. It is an `AudioNode` that can represent different kinds of filters, tone control devices, or graphic equalizers. A `BiquadFilterNode` always has exactly one input and one output.
`ConvolverNode`
    
The `ConvolverNode` interface is an `AudioNode` that performs a Linear Convolution on a given `AudioBuffer`, and is often used to achieve a reverb effect.
`DelayNode`
    
The `DelayNode` interface represents a delay-line; an `AudioNode` audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.
`DynamicsCompressorNode`
    
The `DynamicsCompressorNode` interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
`GainNode`
    
The `GainNode` interface represents a change in volume. It is an `AudioNode` audio-processing module that causes a given gain to be applied to the input data before its propagation to the output.
`WaveShaperNode`
    
The `WaveShaperNode` interface represents a non-linear distorter. It is an `AudioNode` that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.
`PeriodicWave`
    
Describes a periodic waveform that can be used to shape the output of an `OscillatorNode`.
`IIRFilterNode`
    
Implements a general infinite impulse response (IIR) filter; this type of filter can be used to implement tone-control devices and graphic equalizers as well.
### Defining audio destinations
Once you are done processing your audio, these interfaces define where to output it.
`AudioDestinationNode`
    
The `AudioDestinationNode` interface represents the end destination of an audio source in a given context — usually the speakers of your device.
`MediaStreamAudioDestinationNode`
    
The `MediaStreamAudioDestinationNode` interface represents an audio destination consisting of a WebRTC `MediaStream` with a single `AudioMediaStreamTrack`, which can be used in a similar way to a `MediaStream` obtained from `getUserMedia()`. It is an `AudioNode` that acts as an audio destination.
### Data analysis and visualization
If you want to extract time, frequency, and other data from your audio, the `AnalyserNode` is what you need.
`AnalyserNode`
    
The `AnalyserNode` interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.
### Splitting and merging audio channels
To split and merge audio channels, you'll use these interfaces.
`ChannelSplitterNode`
    
The `ChannelSplitterNode` interface separates the different channels of an audio source out into a set of mono outputs.
`ChannelMergerNode`
    
The `ChannelMergerNode` interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.
### Audio spatialization
These interfaces allow you to add audio spatialization panning effects to your audio sources.
`AudioListener`
    
The `AudioListener` interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.
`PannerNode`
    
The `PannerNode` interface represents the position and behavior of an audio source signal in 3D space, allowing you to create complex panning effects.
`StereoPannerNode`
    
The `StereoPannerNode` interface represents a simple stereo panner node that can be used to pan an audio stream left or right.
### Audio processing in JavaScript
Using audio worklets, you can define custom audio nodes written in JavaScript or WebAssembly. Audio worklets implement the `Worklet` interface, a lightweight version of the `Worker` interface.
`AudioWorklet`
    
The `AudioWorklet` interface is available through the `AudioContext` object's `audioWorklet`, and lets you add modules to the audio worklet to be executed off the main thread.
`AudioWorkletNode`
    
The `AudioWorkletNode` interface represents an `AudioNode` that is embedded into an audio graph and can pass messages to the corresponding `AudioWorkletProcessor`.
`AudioWorkletProcessor`
    
The `AudioWorkletProcessor` interface represents audio processing code running in a `AudioWorkletGlobalScope` that generates, processes, or analyzes audio directly, and can pass messages to the corresponding `AudioWorkletNode`.
`AudioWorkletGlobalScope`
    
The `AudioWorkletGlobalScope` interface is a `WorkletGlobalScope`-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worklet thread rather than on the main thread.
#### Obsolete: script processor nodes
Before audio worklets were defined, the Web Audio API used the `ScriptProcessorNode` for JavaScript-based audio processing. Because the code runs in the main thread, they have bad performance. The `ScriptProcessorNode` is kept for historic reasons but is marked as deprecated.
`ScriptProcessorNode` Deprecated
    
The `ScriptProcessorNode` interface allows the generation, processing, or analyzing of audio using JavaScript. It is an `AudioNode` audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the `AudioProcessingEvent` interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.
`audioprocess` (event)  Deprecated
    
The `audioprocess` event is fired when an input buffer of a Web Audio API `ScriptProcessorNode` is ready to be processed.
`AudioProcessingEvent` Deprecated
    
The `AudioProcessingEvent` represents events that occur when a `ScriptProcessorNode` input buffer is ready to be processed.
### Offline/background audio processing
It is possible to process/render an audio graph very quickly in the background — rendering it to an `AudioBuffer` rather than to the device's speakers — with the following.
`OfflineAudioContext`
    
The `OfflineAudioContext` interface is an `AudioContext` interface representing an audio-processing graph built from linked together `AudioNode`s. In contrast with a standard `AudioContext`, an `OfflineAudioContext` doesn't really render the audio but rather generates it, as fast as it can, in a buffer.
`complete` (event)
    
The `complete` event is fired when the rendering of an `OfflineAudioContext` is terminated.
`OfflineAudioCompletionEvent`
    
The `OfflineAudioCompletionEvent` represents events that occur when the processing of an `OfflineAudioContext` is terminated. The `complete` event uses this interface.
## Guides and tutorials
Advanced techniques: Creating and sequencing audio
    
In this tutorial, we're going to cover sound creation and modification, as well as timing and scheduling. We will introduce sample loading, envelopes, filters, wavetables, and frequency modulation. If you're familiar with these terms and looking for an introduction to their application with the Web Audio API, you've come to the right place.
Background audio processing using AudioWorklet
    
This article explains how to create an audio worklet processor and use it in a Web Audio application.
Basic concepts behind Web Audio API
    
This article explains some of the audio theory behind how the features of the Web Audio API work to help you make informed decisions while designing how your app routes audio. If you are not already a sound engineer, it will give you enough background to understand why the Web Audio API works as it does.
Controlling multiple parameters with ConstantSourceNode
    
This article demonstrates how to use a `ConstantSourceNode` to link multiple parameters together so they share the same value, which can be changed by setting the value of the `ConstantSourceNode.offset` parameter.
Example and tutorial: Simple synth keyboard
    
This article presents the code and working demo of a video keyboard you can play using the mouse. The keyboard allows you to switch among the standard waveforms as well as one custom waveform, and you can control the main gain using a volume slider beneath the keyboard. This example makes use of the following Web API interfaces: `AudioContext`, `OscillatorNode`, `PeriodicWave`, and `GainNode`.
Using IIR filters
    
The `IIRFilterNode` interface of the Web Audio API is an `AudioNode` processor that implements a general infinite impulse response (IIR) filter; this type of filter can be used to implement tone control devices and graphic equalizers, and the filter response parameters can be specified, so that it can be tuned as needed. This article looks at how to implement one, and use it in a simple example.
Using the Web Audio API
    
Let's take a look at getting started with the Web Audio API. We'll briefly look at some concepts, then study a simple boombox example that allows us to load an audio track, play and pause it, and change its volume and stereo panning.
Visualizations with Web Audio API
    
One of the most interesting features of the Web Audio API is the ability to extract frequency, waveform, and other data from your audio source, which can then be used to create visualizations. This article explains how, and provides a couple of basic use cases.
Web Audio API best practices
    
There's no strict right or wrong way when writing creative code. As long as you consider security, performance, and accessibility, you can adapt to your own style. In this article, we'll share a number of best practices — guidelines, tips, and tricks for working with the Web Audio API.
Web audio spatialization basics
    
As if its extensive variety of sound processing (and other) options wasn't enough, the Web Audio API also includes facilities to allow you to emulate the difference in sound as a listener moves around a sound source, for example panning as you move around a sound source inside a 3D game. The official term for this is spatialization, and this article will cover the basics of how to implement such a system.
## Examples
You can find a number of examples at our webaudio-examples repo on GitHub.
>
### Tutorials/guides
  * Basic concepts behind Web Audio API
  * Using the Web Audio API
  * Advanced techniques: creating sound, sequencing, timing, scheduling
  * Autoplay guide for media and Web Audio APIs
  * Using IIR filters
  * Visualizations with Web Audio API
  * Web audio spatialization basics
  * Controlling multiple parameters with ConstantSourceNode
  * Mixing Positional Audio and WebGL (2012)
  * Developing Game Audio with the Web Audio API (2012)


### Libraries
  * Tone.js: a framework for creating interactive music in the browser.
  * howler.js: a JS audio library that defaults to Web Audio API and falls back to HTML Audio, as well as providing other useful features.
  * Mooog: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.
  * XSound: Web Audio API Library for Synthesizer, Effects, Visualization, Recording, etc.
  * OpenLang: HTML video language lab web application using the Web Audio API to record and combine video and audio from different sources into a single file (source on GitHub)
  * Pts.js: Simplifies web audio visualization (guide)


### Related topics
  * Web media technologies
  * Guide to media types and formats on the web


# WEBGL_debug_renderer_info extension
The `WEBGL_debug_renderer_info` extension is part of the WebGL API and exposes two constants with information about the graphics driver for debugging purposes.
Depending on the privacy settings of the browser, this extension might only be available to privileged contexts. Generally, the graphics driver information should only be used in edge cases to optimize your WebGL content or to debug GPU problems. The `WebGLRenderingContext.getParameter()` method can help you to detect which features are supported and the `failIfMajorPerformanceCaveat` context attribute lets you control if a context should be returned at all, if the performance would be dramatically slow.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: Depending on the privacy settings of the browser, this extension might only be available to privileged contexts or not work at all. In Firefox, if `privacy.resistFingerprinting` is set to `true`, this extensions is disabled.
This extension is available to both, WebGL1 and WebGL2 contexts.
## Constants
ext.UNMASKED_VENDOR_WEBGL
    
Vendor string of the graphics driver.
ext.UNMASKED_RENDERER_WEBGL
    
Renderer string of the graphics driver.
## Examples
With the help of this extension, privileged contexts are able to retrieve debugging information about the user's graphic driver:
    
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext("webgl");
    
    const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
    const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
    const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
    
    console.log(vendor);
    console.log(renderer);
    
  * `WebGLRenderingContext.getExtension()`


# SyncManager
Note: This feature is available in Web Workers.
The `SyncManager` interface of the Background Synchronization API provides an interface for registering and listing sync registrations.
## Instance properties
None.
## Instance methods
`SyncManager.register()`
    
Create a new sync registration and return a `Promise`.
`SyncManager.getTags()`
    
Return a list of developer-defined identifiers for `SyncManager` registrations.
# HIDDevice
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers, except for Shared Web Workers.
The `HIDDevice` interface of the WebHID API represents a HID Device. It provides properties for accessing information about the device, methods for opening and closing the connection, and the sending and receiving of reports.
EventTarget  HIDDevice 
## Instance properties
This interface also inherits properties from `EventTarget`.
`HIDDevice.opened` Read only Experimental
    
Returns a `boolean`, true if the device has an open connection.
`HIDDevice.vendorId` Read only Experimental
    
Returns the vendorId of the HID device.
`HIDDevice.productId` Read only Experimental
    
Returns the productId of the HID device.
`HIDDevice.productName` Read only Experimental
    
Returns a string containing the product name of the HID device.
`HIDDevice.collections` Read only Experimental
    
Returns an array of report formats for the HID device.
### Events
`inputreport` Experimental
    
Fires when a report is sent from the device.
## Instance methods
This interface also inherits methods from `EventTarget`.
`HIDDevice.open()` Experimental
    
Opens a connection to this HID device, and returns a `Promise` which resolves once the connection has been successful.
`HIDDevice.close()` Experimental
    
Closes the connection to this HID device, and returns a `Promise` which resolves once the connection has been closed.
`HIDDevice.forget()` Experimental
    
Closes the connection to this HID device and resets access permission, and returns a `Promise` which resolves once the permission was reset.
`HIDDevice.sendReport()` Experimental
    
Sends an output report to this HID Device, and returns a `Promise` which resolves once the report has been sent.
`HIDDevice.sendFeatureReport()` Experimental
    
Sends a feature report to this HID device, and returns a `Promise` which resolves once the report has been sent.
`HIDDevice.receiveFeatureReport()` Experimental
    
Receives a feature report from this HID device in the form of a `Promise` which resolves with a `DataView`. This allows typed access to the contents of this message.
## Examples
The following example demonstrates listening for an `inputreport` event that will allow the application to detect which button is pressed on a Joy-Con Right device.
    
    device.addEventListener("inputreport", (event) => {
      const { data, device, reportId } = event;
    
      // Handle only the Joy-Con Right device and a specific report ID.
      if (device.productId !== 0x2007 && reportId !== 0x3f) return;
    
      const value = data.getUint8(0);
      if (value === 0) return;
    
      const someButtons = { 1: "A", 2: "X", 4: "B", 8: "Y" };
      console.log(`User pressed button ${someButtons[value]}.`);
    });
    
In the following example `sendFeatureReport` is used to make a device blink.
    
    const reportId = 1;
    for (let i = 0; i < 10; i++) {
      // Turn off
      await device.sendFeatureReport(reportId, Uint32Array.from([0, 0]));
      await new Promise((resolve) => setTimeout(resolve, 100));
      // Turn on
      await device.sendFeatureReport(reportId, Uint32Array.from([512, 0]));
      await new Promise((resolve) => setTimeout(resolve, 100));
    }
    
You can see more examples, and live demos in the article Connecting to uncommon HID devices.
# AbstractRange
The `AbstractRange` abstract interface is the base class upon which all DOM range types are defined. A range is an object that indicates the start and end points of a section of content within the document.
Note: As an abstract interface, you will not directly instantiate an object of type `AbstractRange`. Instead, you will use the `Range` or `StaticRange` interfaces. To understand the difference between those two interfaces, and how to choose which is appropriate for your needs, consult each interface's documentation.
## Instance properties
`collapsed` Read only
    
A Boolean value which is `true` if the range is collapsed. A collapsed range is a range whose start position and end position are the same, resulting in a zero-character-long range.
`endContainer` Read only
    
The `Node` object in which the end of the range, as specified by the `endOffset` property, is located.
`endOffset` Read only
    
An integer value indicating the offset, in characters, from the beginning of the node's contents to the last character of the range represented by the range object. This value must be less than the length of the `endContainer` node.
`startContainer` Read only
    
The DOM `Node` in which the beginning of the range, as specified by the `startOffset` property, is located.
`startOffset` Read only
    
An integer value indicating the offset, in characters, from the beginning of the node's contents to the first character of the contents referred to by the range object. This value must be less than the length of the node indicated in `startContainer`.
## Instance methods
The `AbstractRange` interface doesn't provide any methods.
## Usage notes
>
### Range types
All ranges of content within a `document` are described using instances of interfaces based on `AbstractRange`. There are two such interfaces:
`Range`
    
The `Range` interface has been around for a long time and has only recently been redefined to be based upon `AbstractRange` as the need arose to define other forms of range data. `Range` provides methods that allow you to alter the range's endpoints, as well as methods to compare ranges, detect intersections between ranges, and so forth.
`StaticRange`
    
A `StaticRange` is a basic range which cannot be changed once it's been created. Specifically, as the node tree mutates and changes, the range does not. This is useful when you need to specify a range that will only be used once, since it avoids the performance and resource impact of the more complex `Range` interface.
### Contents of elements
When trying to access the contents of an element, keep in mind that the element itself is a node, but so is any text inside it. In order to set a range endpoint within the text of an element, be sure to find the text node inside the element:
    
    const startElem = document.querySelector("p");
    const endElem = startElem.querySelector("span");
    const range = document.createRange();
    
    range.setStart(startElem, 0);
    range.setEnd(endElem, endElem.childNodes[0].length / 2);
    const contents = range.cloneContents();
    
    document.body.appendChild(contents);
    
This example creates a new range, `range`, and sets its starting point to the third child node of the first element. The end point is set to be the middle of the first child of the span, and then the range is used to copy the contents of the range.
### Ranges and the hierarchy of the DOM
In order to define a range of characters within a document in a way that is able to span across zero or more node boundaries, and which is as resilient as possible to changes to the DOM, you can't specify the offset to the first and last characters in the HTML. There are a few good reasons for that.
First, after your page is loaded, the browser isn't thinking in terms of HTML. Once it's been loaded, the page is a tree of DOM `Node` objects, so you need to specify the beginning and ending locations of a range in terms of nodes and positions within nodes.
Second, in order to support the mutability of the DOM tree as much as possible, you need a way to represent positions relative to nodes in the tree, rather than global positions within the entire document. By defining points within the document as offsets within a given node, those positions remain consistent with the content even as nodes are added to, removed from, or moved around within the DOM tree—within reason. There are fairly obvious limitations (such as if a node is moved to be after the endpoint of a range, or if the content of a node is heavily altered), but it's far better than nothing.
Third, using node-relative positions to define the start and end positions will generally be easier to make perform well. Rather than having to negotiate the DOM figuring out what your global offset refers to, the user agent (browser) can instead go directly to the node indicated by the starting position and start from there, working its way forward until it reaches the given offset into the ending node.
To illustrate this, consider the HTML below:
    
    <div class="container">
      <div class="header">
        <img src="" class="sitelogo" />
        <h1>The Ultimate Website</h1>
      </div>
      <article>
        <section class="entry" id="entry1">
          <h2>Section 1: An interesting thing…</h2>
          <p>A <em>very</em> interesting thing happened on the way to the forum…</p>
          <aside class="callout">
            <h2>Aside</h2>
            <p>An interesting aside to share with you…</p>
          </aside>
        </section>
      </article>
      <pre id="log"></pre>
    </div>
    
After loading the HTML and constructing the DOM representation of the document, the resulting DOM tree looks like this:
In this diagram, the nodes representing HTML elements are shown in green. Each row beneath them shows the next layer of depth into the DOM tree. Blue nodes are text nodes, containing the text that gets shown onscreen. Each element's contents are linked below it in the tree, potentially spawning a series of branches below as elements include other elements and text nodes.
If you want to create a range that incorporates the contents of the `<p>` element whose contents are `"A <em>very</em> interesting thing happened on the way to the forum…"`, you can do so like this:
    
    const pRange = document.createRange();
    pRange.selectNodeContents(document.querySelector("#entry1 p"));
    
Since we wish to select the entire contents of the `<p>` element, including its descendants, this works perfectly.
If we wish to instead copy the text "An interesting thing…" from the `<section>`'s heading (an h2 element) through the end of the letters "ve" in the `<em>` within the paragraph below it, the following code would work:
    
    const range = document.createRange();
    const startNode = document.querySelector("section h2").childNodes[0];
    range.setStart(startNode, 11);
    
    const endNode = document.querySelector("#entry1 p em").childNodes[0];
    range.setEnd(endNode, 2);
    
    const fragment = range.cloneContents();
    
Here an interesting problem arises—we are capturing content from multiple nodes located at different levels of the DOM hierarchy, and then only part of one of them. What should the result look like?
As it turns out, the DOM specification fortunately addresses this exact issue. For example, in this case, we're calling `cloneContents()` on the range to create a new `DocumentFragment` object providing a DOM subtree which replicates the contents of the specified range. To do this, `cloneContents()` constructs all the nodes needed to preserve the structure of the indicated range, but no more than necessary.
In this example, the start of the specified range is found within the text node below the section's heading, which means that the new `DocumentFragment` will need to contain an h2 and, below it, a text node.
The range's end is located below the `<p>` element, so that will be needed within the new fragment. So will the text node containing the word "A", since that's included in the range. Finally, an `<em>` and a text node below it will be added below the `<p>` as well.
The contents of the text nodes are then determined by the offsets into those text nodes given when calling `setStart()` and `setEnd()`. Given the offset of 11 into the heading's text, that node will contain "An interesting thing…". Similarly, the last text node will contain "ve", given the request for the first two characters of the ending node.
The resulting document fragment looks like this:
Notice especially that the contents of this fragment are all below the shared common parent of the topmost nodes within it. The parent `<section>` is not needed to replicate the cloned content, so it isn't included.
## Example
Consider this simple HTML fragment of HTML.
    
    <p><strong>This</strong> is a paragraph.</p>
    
Imagine using a `Range` to extract the word "paragraph" from this. The code to do that looks like the following:
    
    const paraNode = document.querySelector("p");
    const paraTextNode = paraNode.childNodes[1];
    
    const range = document.createRange();
    range.setStart(paraTextNode, 6);
    range.setEnd(paraTextNode, paraTextNode.length - 1);
    
    const fragment = range.cloneContents();
    document.body.appendChild(fragment);
    
First we get references to the paragraph node itself as well as to the second child node within the paragraph. The first child is the `<strong>` element. The second child is the text node " is a paragraph.".
With the text node reference in hand, we create a new `Range` object by calling `createRange()` on the `Document` itself. We set the starting position of the range to the sixth character of the text node's string, and the end position to the length of the text node's string minus one. This sets the range to encompass the word "paragraph".
We then finish up by calling `cloneContents()` on the `Range` to create a new `DocumentFragment` object which contains the portion of the document encompassed by the range. After that, we use `appendChild()` to add that fragment at the end of the document's body, as obtained from `document.body`.
The result looks like this:
# CSS Typed Object Model API
The CSS Typed Object Model API simplifies CSS property manipulation by exposing CSS values as typed JavaScript objects rather than strings. This not only simplifies CSS manipulation, but also lessens the negative impact on performance as compared to `HTMLElement.style`.
Generally, CSS values can be read and written in JavaScript as strings, which can be slow and cumbersome. CSS Typed Object Model API provides interfaces to interact with underlying values, by representing them with specialized JS objects that can be manipulated and understood more easily and more reliably than string parsing and concatenation. This is easier for authors (for example, numeric values are reflected with actual JS numbers, and have unit-aware mathematical operations defined for them). It is also generally faster, as values can be directly manipulated and then cheaply translated back into underlying values without having to both build and parse strings of CSS.
CSS Typed OM both allows for the performant manipulation of values assigned to CSS properties while enabling maintainable code that is both more understandable and easier to write.
## Interfaces
>
### `CSSStyleValue`
The `CSSStyleValue` interface of the CSS Typed Object Model API is the base class of all CSS values accessible through the Typed OM API. An instance of this class may be used anywhere a string is expected.
`CSSStyleValue.parse()`
    
Method that allows `CSSNumericValue` to be constructed from a CSS string. It sets a specific CSS property to the specified values and returns the first value as a `CSSStyleValue` object.
`CSSStyleValue.parseAll()`
    
Method that sets all occurrences of a specific CSS property to the specified value and returns an array of `CSSStyleValue` objects, each containing one of the supplied values.
### `StylePropertyMap`
The `StylePropertyMap` interface of the CSS Typed Object Model API provides a representation of a CSS declaration block that is an alternative to `CSSStyleDeclaration`.
`StylePropertyMap.set()`
    
Method that changes the CSS declaration with the given property to the value given.
`StylePropertyMap.append()`
    
Method that adds a new CSS declaration to the `StylePropertyMap` with the given property and value.
`StylePropertyMap.delete()`
    
Method that removes the CSS declaration with the given property from the `StylePropertyMap`.
`StylePropertyMap.clear()`
    
Method that removes all declarations in the `StylePropertyMap`.
### `CSSUnparsedValue`
The `CSSUnparsedValue` interface of the CSS Typed Object Model API represents property values that reference custom properties. It consists of a list of string fragments and variable references.
`CSSUnparsedValue()` constructor
    
Creates a new `CSSUnparsedValue` object which represents property values that reference custom properties.
`CSSUnparsedValue.entries()`
    
Method returning an array of a given object's own enumerable property `[key, value]` pairs in the same order as that provided by a `for...in` loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
`CSSUnparsedValue.forEach()`
    
Method executing a provided function once for each element of the `CSSUnparsedValue`.
`CSSUnparsedValue.keys()`
    
Method returning a new array iterator object that contains the keys for each index in the array.
###  `CSSKeywordValue` Serialization
The `CSSKeywordValue` interface of the CSS Typed Object Model API creates an object to represent CSS keywords and other identifiers.
`CSSKeywordValue()` constructor
    
Constructor creates a new `CSSKeywordValue()` object which represents CSS keywords and other identifiers.
`CSSKeywordValue.value()`
    
Property of the `CSSKeywordValue` interface returning or setting the value of the `CSSKeywordValue`.
## CSSStyleValue Interfaces
`CSSStyleValue` is the base class through which all CSS values are expressed. Subclasses include:
`CSSImageValue`
    
An interface representing values for properties that take an image, for example `background-image`, `list-style-image`, or `border-image-source`.
`CSSKeywordValue`
    
An interface which creates an object to represent CSS keywords and other identifiers. When used where a string is expected, it will return the value of `CSSKeyword.value`.
`CSSMathValue`
    
A tree of subclasses representing numeric values that are more complicated than a single value and unit, including:
  * `CSSMathInvert` \- represents a CSS `calc()` value used as `calc(1 / <value>)`.
  * `CSSMathMax` \- represents the CSS `max()` function.
  * `CSSMathMin` \- represents the CSS `min()` function.
  * `CSSMathNegate` \- negates the value passed into it.
  * `CSSMathProduct` \- represents the result obtained by calling `add()`, `sub()`, or `toSum()` on `CSSNumericValue`.
  * `CSSMathSum` \- represents the result obtained by calling `add()`, `sub()`, or `toSum()` on `CSSNumericValue`.


`CSSNumericValue`
    
An interface representing operations that all numeric values can perform, including:
  * `CSSNumericValue.add` \- Adds supplied numbers to the `CSSNumericValue`.
  * `CSSNumericValue.sub` \- Subtracts supplied numbers to the `CSSNumericValue`.
  * `CSSNumericValue.mul` \- Multiplies supplied numbers to the `CSSNumericValue`.
  * `CSSNumericValue.div` \- Divides the `CSSNumericValue` by the supplied value, throwing an error if `0`.
  * `CSSNumericValue.min` \- Returns the minimum value passed
  * `CSSNumericValue.max` \- Returns the maximum value passed
  * `CSSNumericValue.equals` \- Returns true if all the values are the exact same type and value, in the same order. Otherwise, false
  * `CSSNumericValue.to` \- Converts `value` into another one with the specified unit. 
  * `CSSNumericValue.toSum`
  * `CSSNumericValue.type`
  * `CSSNumericValue.parse` \- Returns a number parsed from a CSS string


`CSSPositionValue`
    
Represents values for properties that take a position, for example object-position.
`CSSTransformValue`
    
An interface representing a list of `transform` list values. They "contain" one or more `CSSTransformComponent`s, which represent individual `transform` function values.
`CSSUnitValue`
    
An interface representing numeric values that can be represented as a single unit, or a named number and percentage.
`CSSUnparsedValue`
    
Represents property values that reference custom properties. It consists of a list of string fragments and variable references.
>
### api.CSSStyleValue
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`CSS_Typed_OM_API` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`parseAll_static` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`parse_static` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`toString` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
### api.StylePropertyMap
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`CSS_Typed_OM_API` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`append` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`clear` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`delete` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`set` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
### api.CSSUnparsedValue
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`@@iterator` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`CSSUnparsedValue` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`CSS_Typed_OM_API` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`entries` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`forEach` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`keys` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`length` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`values` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
### api.CSSKeywordValue
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`CSSKeywordValue` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`CSS_Typed_OM_API` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
`value` 66 79 No 53 16.4 66 No 47 16.4 9.0 66 16.4  
  * CSS Painting API
  * Using the CSS Typed Object Model
  * CSS Houdini


# URL Pattern API
Note: This feature is available in Web Workers.
The URL Pattern API defines a syntax that is used to create URL pattern matchers. These patterns can be matched against URLs or individual URL components.
## Concepts and usage
Patterns are specified using the `URLPattern` interface. The pattern syntax is based on the syntax from the path-to-regexp library. Patterns can contain:
  * Literal strings which will be matched exactly.
  * Wildcards (`/posts/*`) that match any character.
  * Named groups (`/books/:id`) which extract a part of the matched URL.
  * Non-capturing groups (`/books{/old}?`) which make parts of a pattern optional or be matched multiple times.
  * `RegExp` groups (`/books/(\\d+)`) which make arbitrarily complex regex matches. Note that the parentheses are not part of the regex but instead define their contents as a regex. Some APIs prohibit the use of regular expression groups in `URLPattern` objects. The `hasRegExpGroups` property indicates whether or not regular expression groups are used.


You can find details about the syntax in the pattern syntax section below.
## Interfaces
`URLPattern`
    
Represents a pattern that can match URLs or parts of URLs. The pattern can contain capturing groups that extract parts of the matched URL.
## Pattern syntax
The syntax for patterns is based on the path-to-regexp JavaScript library. This syntax is similar to the one used in Ruby on Rails, or JavaScript frameworks like Express or Next.js.
### Fixed text and capture groups
Each pattern can contain a combination of fixed text and groups. The fixed text is a sequence of characters that is matched exactly. Groups match an arbitrary string based on matching rules. Each URL part has its own default rules that are explained below, but they can be overwritten.
    
    // A pattern matching some fixed text
    const pattern = new URLPattern({ pathname: "/books" });
    console.log(pattern.test("https://example.com/books")); // true
    console.log(pattern.exec("https://example.com/books").pathname.groups); // {}
    
    
    // A pattern matching with a named group
    const pattern = new URLPattern({ pathname: "/books/:id" });
    console.log(pattern.test("https://example.com/books/123")); // true
    console.log(pattern.exec("https://example.com/books/123").pathname.groups); // { id: '123' }
    
### Segment wildcard
By default, a group matching the `pathname` part of the URL will match all characters but the forward slash (`/`). In the `hostname` part, the group will match all characters except the dot (`.`). In all other parts, the group will match all characters. The segment wildcard is non-greedy, meaning that it will match the shortest possible string.
### Regex matchers
Instead of using the default match rules for a group, you can specify a regex for each group by specifying it in parentheses. This regex defines the matching rules for the group. Below is an example of a regex matcher on a named group that constrains the group to only match if it contains one or more digits:
    
    const pattern1 = new URLPattern("/books/:id(\\d+)", "https://example.com");
    console.log(pattern1.test("https://example.com/books/123")); // true
    console.log(pattern1.test("https://example.com/books/abc")); // false
    console.log(pattern1.test("https://example.com/books/")); // false
    
You can also use regex when constructing a `URLPattern` with the object syntax.
    
    const pattern2 = new URLPattern({ pathname: "/books/:id(\\d+)" });
    console.log(pattern2.test("https://example.com/books/123")); // true
    console.log(pattern2.test("https://example.com/books/abc")); // false
    console.log(pattern2.test("https://example.com/books/")); // false
    
#### Pathname matching
The `pathname` URL-part always starts with `/`. If you omit the `/` in your regular expression the match will fail. The example below
    
    // Doesn't match, because omits the `/`
    const pattern1 = new URLPattern({ pathname: "(b.*)" });
    console.log(pattern1.test("https://example.com/b")); // false
    console.log(pattern1.test("https://example.com/ba")); // false
    
The following examples include the `/`:
    
    // Matches URL where path is exactly "/b"
    const pattern2 = new URLPattern({ pathname: "(/b)" });
    console.log(pattern2.test("https://example.com/b")); // true
    console.log(pattern2.test("https://example.com/ba")); // false
    
    // Matches URL where path is /b followed by any number of characters
    const pattern3 = new URLPattern({ pathname: "(/b.*)" });
    console.log(pattern3.test("https://example.com/b")); // true
    console.log(pattern3.test("https://example.com/ba")); // true
    
#### Start and end of line anchors
The start of line anchor (`^`) and end-of line anchor (`$`) are used to anchor patterns to the start and end of the test string, respectively. While these can be specified for the start and end of an URL-part they are redundant. This is because all URL-parts are implicitly preceded by the `^` anchor, and followed by the `$` anchor.
The following code demonstrates that it doesn't matter whether or not `^` is specified. The example uses a pattern in the `protocol` URL-part, but the other parts of the URL behave the same.
    
    // with `^` in protocol
    const pattern1 = new URLPattern({ protocol: "(^https?)" });
    console.log(pattern1.test("https://example.com/index.html")); // true
    
    // without `^` in protocol
    const pattern2 = new URLPattern({ protocol: "(https?)" });
    console.log(pattern2.test("https://example.com/index.html")); // true
    
The code below demonstrates that it doesn't matter whether or not `$` is specified.
    
    // with `$` in pathname
    const pattern1 = new URLPattern({ pathname: "(/path$)" });
    console.log(pattern1.test("https://example.com/path")); // true
    
    // without `$` in pathname
    const pattern2 = new URLPattern({ pathname: "(/path)" });
    console.log(pattern2.test("https://example.com/path")); // true
    
    // with `$` in hash
    const pattern3 = new URLPattern({ hash: "(/hash$)" });
    console.log(pattern3.test("https://example.com/#hash")); // true
    
    // without `$` in hash
    const pattern4 = new URLPattern({ hash: "(/hash)" });
    console.log(pattern4.test("https://example.com/#hash")); // true
    
#### Lookahead and lookbehind assertions
Lookahead and lookbehind asserts allow you to specify that text ahead or behind the current parsing position matches a particular pattern, without that match being captured, or the characters being consumed.
There are four types of assertions:
  * `(?=...)`: A positive lookahead assertion specifies a pattern that the following characters must match.
  * `(?!...)`: A negative lookahead assertion specifies a pattern that the following characters must not match.
  * `(?<=...)`: A positive lookbehind assertion specifies a pattern that the preceding characters must match.
  * `(?<!...)`: A negative lookbehind assertion specifies a pattern that the preceding characters must not match.


Be careful when using lookahead and lookbehind assertions with `URLPattern`, as there is some behavior you may find unintuitive. For example, you would expect the following lookahead assertion to match a `pathname` of `/ab`, but this is not what happens.
    
    const pattern = new URLPattern({ pathname: "(/a(?=b))" });
    console.log(pattern.test("https://example.com/ab")); // false
    
The `URLPattern` engine matches the test string against the `pathname` pattern, first finding the match for `/a` and then asserts that the next character in the test URL is `b` — but not consuming it. The engine continues matching the test URL at the unconsumed character `b`, but there is nothing left in the pattern to match it against, which causes the match to fail.
For the match to work the pattern has to consume all the characters in the test string. To consume the `b` character you could add `b` to the end of the expression, a `.` to match any character, or `.*` to match all characters after the lookahead assertion:
    
    // positive-lookahead
    const pattern1 = new URLPattern({ pathname: "(/a(?=b).*)" });
    console.log(pattern1.test("https://example.com/ab")); // true
    console.log(pattern1.test("https://example.com/ax")); // false
    
The next example shows a negative lookahead match for `/a` which is not followed by `b`. Note that the assertion is followed by `.*` to consume the character matched by the assertion.
    
    // negative-lookahead - matches /a<not b><anything>
    const pattern2 = new URLPattern({ pathname: "(/a(?!b).*)" });
    console.log(pattern2.test("https://example.com/ab")); // false
    console.log(pattern2.test("https://example.com/ax")); // true
    
The following example shows a positive lookbehind match that matches on a pathname like `/ba`. The pattern matches `/`, then `.` to consume the next character, followed by the assertion that the previous character was a `b`, and then an `a`.
    
    // positive-lookbehind
    const pattern = new URLPattern({ pathname: "(/.(?<=b)a)" });
    console.log(pattern.test("https://example.com/ba")); // true
    console.log(pattern.test("https://example.com/xa")); // false
    
This example shows a negative lookbehind match that matches on a pathname like `/<not b>a`. The pattern matches `/`, then `.` to consume the next character (`x`), followed by the assertion that the previous character was not `b`, and then an `a`.
    
    // negative-lookbehind
    const pattern4 = new URLPattern({ pathname: "(/.*(?<!b)a)" });
    console.log(pattern4.test("https://example.com/ba")); // false
    console.log(pattern4.test("https://example.com/xa")); // true
    
#### Other regex matcher limitations
Some other regex patterns may not work as you may expect:
  * Parentheses need to be escaped in range expressions within URLPattern even though they don't in RegExp.
        new URLPattern({ pathname: "([()])" }); // throws
        new URLPattern({ pathname: "([\\(\\)])" }); // ok
        
        new RegExp("[()]"); // ok
        new RegExp("[\\(\\)]"); // ok
        


### Unnamed and named groups
Groups can either be named or unnamed. Named groups are specified by prefixing the group name with a colon (`:`). Regex groups that are not prefixed by a colon and a name are unnamed. Unnamed groups are numerically indexed in the match result based on their order in the pattern.
    
    // A named group
    const pattern = new URLPattern("/books/:id(\\d+)", "https://example.com");
    console.log(pattern.exec("https://example.com/books/123").pathname.groups); // { id: '123' }
    
    
    // An unnamed group
    const pattern = new URLPattern("/books/(\\d+)", "https://example.com");
    console.log(pattern.exec("https://example.com/books/123").pathname.groups); // { '0': '123' }
    
### Group modifiers
Groups can also have modifiers. These are specified after the group name (or after the regex if there is one). There are three modifiers: `?` to make the group optional, `+` to make the group repeat one or more times, and `*` to make the group repeat zero or more times.
    
    // An optional group
    const pattern = new URLPattern("/books/:id?", "https://example.com");
    console.log(pattern.test("https://example.com/books/123")); // true
    console.log(pattern.test("https://example.com/books")); // true
    console.log(pattern.test("https://example.com/books/")); // false
    console.log(pattern.test("https://example.com/books/123/456")); // false
    console.log(pattern.test("https://example.com/books/123/456/789")); // false
    
    
    // A repeating group with a minimum of one
    const pattern = new URLPattern("/books/:id+", "https://example.com");
    console.log(pattern.test("https://example.com/books/123")); // true
    console.log(pattern.test("https://example.com/books")); // false
    console.log(pattern.test("https://example.com/books/")); // false
    console.log(pattern.test("https://example.com/books/123/456")); // true
    console.log(pattern.test("https://example.com/books/123/456/789")); // true
    
    
    // A repeating group with a minimum of zero
    const pattern = new URLPattern("/books/:id*", "https://example.com");
    console.log(pattern.test("https://example.com/books/123")); // true
    console.log(pattern.test("https://example.com/books")); // true
    console.log(pattern.test("https://example.com/books/")); // false
    console.log(pattern.test("https://example.com/books/123/456")); // true
    console.log(pattern.test("https://example.com/books/123/456/789")); // true
    
### Group delimiters
Patterns can also contain group delimiters. These are pieces of a pattern that are surrounded by curly braces (`{}`). These group delimiters are not captured in the match result like capturing groups, but can still have modifiers applied to them, just like groups. If group delimiters are not modified by a modifier, they are treated as if the items in them were just part of the parent pattern. Group delimiters may not contain other group delimiters, but may contain any other pattern items (capturing groups, regex, wildcard, or fixed text).
    
    // A group delimiter with a ? (optional) modifier
    const pattern = new URLPattern("/book{s}?", "https://example.com");
    console.log(pattern.test("https://example.com/books")); // true
    console.log(pattern.test("https://example.com/book")); // true
    console.log(pattern.exec("https://example.com/books").pathname.groups); // {}
    
    
    // A group delimiter without a modifier
    const pattern = new URLPattern("/book{s}", "https://example.com");
    console.log(pattern.pathname); // /books
    console.log(pattern.test("https://example.com/books")); // true
    console.log(pattern.test("https://example.com/book")); // false
    
    
    // A group delimiter containing a capturing group
    const pattern = new URLPattern({ pathname: "/blog/:id(\\d+){-:title}?" });
    console.log(pattern.test("https://example.com/blog/123-my-blog")); // true
    console.log(pattern.test("https://example.com/blog/123")); // true
    console.log(pattern.test("https://example.com/blog/my-blog")); // false
    
### Automatic group prefixing in pathnames
In patterns that match against the `pathname` part of a URL, groups get an automatic slash (`/`) prefix added if the group definition is preceded by a slash (`/`). This is useful for groups with modifiers, as it allows for repeating groups to work as expected.
If you do not want automatic prefixing, you can disable it by surrounding the group with group delimiters (`{}`). Group delimiters do not have automatic prefixing behavior.
    
    // A pattern with an optional group, preceded by a slash
    const pattern = new URLPattern("/books/:id?", "https://example.com");
    console.log(pattern.test("https://example.com/books/123")); // true
    console.log(pattern.test("https://example.com/books")); // true
    console.log(pattern.test("https://example.com/books/")); // false
    
    
    // A pattern with a repeating group, preceded by a slash
    const pattern = new URLPattern("/books/:id+", "https://example.com");
    console.log(pattern.test("https://example.com/books/123")); // true
    console.log(pattern.test("https://example.com/books/123/456")); // true
    console.log(pattern.test("https://example.com/books/123/")); // false
    console.log(pattern.test("https://example.com/books/123/456/")); // false
    
    
    // Segment prefixing does not occur outside of pathname patterns
    const pattern = new URLPattern({ hash: "/books/:id?" });
    console.log(pattern.test("https://example.com#/books/123")); // true
    console.log(pattern.test("https://example.com#/books")); // false
    console.log(pattern.test("https://example.com#/books/")); // true
    
    
    // Disabling segment prefixing for a group using a group delimiter
    const pattern = new URLPattern({ pathname: "/books/{:id}?" });
    console.log(pattern.test("https://example.com/books/123")); // true
    console.log(pattern.test("https://example.com/books")); // false
    console.log(pattern.test("https://example.com/books/")); // true
    
### Wildcard tokens
The wildcard token (`*`) is a shorthand for an unnamed capturing group that matches all characters zero or more times. You can place this anywhere in the pattern. The wildcard is greedy, meaning that it will match the longest possible string.
    
    // A wildcard at the end of a pattern
    const pattern = new URLPattern("/books/*", "https://example.com");
    console.log(pattern.test("https://example.com/books/123")); // true
    console.log(pattern.test("https://example.com/books")); // false
    console.log(pattern.test("https://example.com/books/")); // true
    console.log(pattern.test("https://example.com/books/123/456")); // true
    
    
    // A wildcard in the middle of a pattern
    const pattern = new URLPattern("/*.png", "https://example.com");
    console.log(pattern.test("https://example.com/image.png")); // true
    console.log(pattern.test("https://example.com/image.png/123")); // false
    console.log(pattern.test("https://example.com/folder/image.png")); // true
    console.log(pattern.test("https://example.com/.png")); // true
    
### Trailing slashes in pathname are not matched by default
Trailing slashes in a pathname are not automatically matched. The example below demonstrates that a `URLPattern` match for a pathname of `/books` will match `https://example.com/books` but not `https://example.com/books/` (and vice versa):
    
    const patternSlash = new URLPattern({ pathname: "/books/" });
    console.log(patternSlash.test("https://example.com/books")); // false
    console.log(patternSlash.test("https://example.com/books/")); // true
    
    const patternNoSlash = new URLPattern({ pathname: "/books" });
    console.log(patternNoSlash.test("https://example.com/books")); // false
    console.log(patternNoSlash.test("https://example.com/books/")); // true
    
If you want to match both then you need to use a match pattern that allows either. The easiest approach is to use a group delimiter that contains a forward slash, followed by the optional modifier. This will match the pattern with or without a terminating forward slash.
    
    const patternOptionalSlash = new URLPattern({ pathname: "/books{/}?" });
    console.log(patternOptionalSlash.test("https://example.com/books")); // true
    console.log(patternOptionalSlash.test("https://example.com/books/")); // true
    
### Pattern normalization
When a pattern is parsed it is automatically normalized to a canonical form. For example, Unicode characters are percent-encoded in the pathname property, punycode encoding is used in the hostname, default port numbers are elided, paths like `/foo/./bar/` are collapsed to `/foo/bar`, etc. In addition, there are some pattern representations that parse to the same underlying meaning, like `foo` and `{foo}`. Such cases are normalized to the simplest form. In this case `{foo}` is normalized to `foo`, for example.
## Inheritance from a base URL
Both the match patterns defined in `URLPattern` and the test URLs used in `URLPattern.test()` and `URLPattern.exec()` allow the inputs to be specified with an optional base URL (this base URL is a separate parameter when specifying the URL as a string, and a separate property when specifying the URL as an object).
If a base URL is defined then URL-parts may be inherited from the base URL and used to set parts of the pattern or test URL. URL resolution is much the same as you would expect when resolving a `URL` that is specified with a base URL.
The `username` and `password` are never inherited from the base URL.
Only URL parts that are "more specific" than the most-specific part defined in the input will be inherited from the base URL. The following lists show the order of specificity:
  * `protocol` (most specific), `hostname`, `port`, `pathname`, `search`, `hash`
  * `protocol`, `hostname`, `port`, `username`, `password`


What this means, for example, is that if the `protocol` is specified in the input URL, then nothing is more specific, so nothing will be inherited from the base URL. However if the `pathname` part is specified in the input, the `protocol`, `hostname` and `port` may be inherited from the base URL, but the `search` and `hash` will not.
Note that URL components that are not specified in the string/input object or inherited from the base URL will default to the wildcard value (`"*"`) for a `URLPattern` and to the empty string (`""`) for a test URL.
## Case sensitivity
The URL Pattern API treats many parts of the URL as case-sensitive by default when matching. In contrast, many client-side JavaScript frameworks use case-insensitive URL matching. An `ignoreCase` option is available on the `URLPattern()` constructor to enable case-insensitive matching if desired.
    
    // Case-sensitive matching by default
    const pattern = new URLPattern("https://example.com/2022/feb/*");
    console.log(pattern.test("https://example.com/2022/feb/xc44rsz")); // true
    console.log(pattern.test("https://example.com/2022/Feb/xc44rsz")); // false
    
Setting the `ignoreCase` option to `true` in the constructor switches all matching operations to case-insensitive for the given pattern:
    
    // Case-insensitive matching
    const pattern = new URLPattern("https://example.com/2022/feb/*", {
      ignoreCase: true,
    });
    console.log(pattern.test("https://example.com/2022/feb/xc44rsz")); // true
    console.log(pattern.test("https://example.com/2022/Feb/xc44rsz")); // true
    
## Examples
>
### Filter on a specific URL component
The following example shows how a `URLPattern` filters a specific URL component. When the `URLPattern()` constructor is called with a structured object of component patterns any missing components default to the `*` wildcard value.
    
    // Construct a URLPattern that matches a specific domain and its subdomains.
    // All other URL components default to the wildcard `*` pattern.
    const pattern = new URLPattern({
      hostname: "{*.}?example.com",
    });
    
    console.log(pattern.hostname); // '{*.}?example.com'
    
    console.log(pattern.protocol); // '*'
    console.log(pattern.port); // '*'
    console.log(pattern.username); // '*'
    console.log(pattern.password); // '*'
    console.log(pattern.pathname); // '*'
    console.log(pattern.search); // '*'
    console.log(pattern.hash); // '*'
    
    console.log(pattern.test("https://example.com/foo/bar")); // true
    console.log(pattern.test({ hostname: "cdn.example.com" })); // true
    console.log(pattern.test("custom-protocol://example.com/other/path?q=1")); // true
    
    // Prints `false` because the hostname component does not match
    console.log(pattern.test("https://cdn-example.com/foo/bar"));
    
### Construct a URLPattern from a full URL string
The following example shows how to construct a `URLPattern` from a full URL string with embedded patterns. For example, a `:` can be both the URL protocol suffix, like `https:`, and the beginning of a named pattern group, like `:foo`. It "just works" if there is no ambiguity between whether a character is part of the URL syntax or part of the pattern syntax.
    
    // Construct a URLPattern that matches URLs to CDN servers loading jpg images.
    // URL components not explicitly specified result in the wild string ("*")
    const pattern = new URLPattern("https://cdn-*.example.com/*.jpg");
    
    console.log(pattern.protocol); // 'https'
    console.log(pattern.hostname); // 'cdn-*.example.com'
    console.log(pattern.pathname); // '/*.jpg'
    
    console.log(pattern.username); // '*'
    console.log(pattern.password); // '*'
    console.log(pattern.search); // '*'
    console.log(pattern.hash); // '*'
    
    // `true`
    console.log(
      pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg"),
    );
    
    // `true` because the search pattern defaults to wildcard
    console.log(
      pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg?q=1"),
    );
    
### Constructing a URLPattern with an ambiguous URL string
The following example shows how a `URLPattern` constructed from an ambiguous string will favor treating characters as part of the pattern syntax. In this case the `:` character could be the protocol component suffix or it could be the prefix for a named group in the pattern. The constructor chooses to treat this as part of the pattern and therefore determines this is a relative pathname pattern. Since there is no base URL the relative pathname cannot be resolved and it throws an error.
    
    // Throws because this is interpreted as a single relative pathname pattern
    // with a ":foo" named group and there is no base URL.
    const pattern = new URLPattern("data:foo*");
    
### Escaping characters to disambiguate URLPattern constructor strings
The following example shows how an ambiguous constructor string character can be escaped to be treated as a URL separator instead of a pattern character. Here `:` is escaped as `\\:`.
    
    // Constructs a URLPattern treating the `:` as the protocol suffix.
    const pattern = new URLPattern("data\\:foo*");
    
    console.log(pattern.protocol); // 'data'
    console.log(pattern.pathname); // 'foo*'
    console.log(pattern.username); // '*'
    console.log(pattern.password); // '*'
    console.log(pattern.hostname); // ''
    console.log(pattern.port); // ''
    console.log(pattern.search); // '*'
    console.log(pattern.hash); // '*'
    
    console.log(pattern.test("data:foobar")); // true
    
### Using base URLs for test() and exec()
The following example shows how `test()` and `exec()` can use base URLs.
    
    const pattern = new URLPattern({ hostname: "example.com", pathname: "/foo/*" });
    
    console.log(pattern.protocol); // '*'
    console.log(pattern.pathname); // '/foo/*'
    console.log(pattern.username); // '*'
    console.log(pattern.password); // '*'
    console.log(pattern.hostname); // 'example.com'
    console.log(pattern.port); // '*'
    console.log(pattern.search); // '*'
    console.log(pattern.hash); // '*'
    
    // `true` as the hostname is inherited from `baseURL` property
    // (so is the protocol, but that is matched by the pattern wildcard)
    console.log(
      pattern.test({
        pathname: "/foo/bar",
        baseURL: "https://example.com/baz",
      }),
    );
    
    // Prints `true` as the hostname in the second argument base URL matches.
    console.log(pattern.test("/foo/bar", "https://example.com/baz"));
    
    // Throws because the second argument cannot be passed with the object input.
    try {
      pattern.test({ pathname: "/foo/bar" }, "https://example.com/baz");
    } catch (e) {}
    
    // The `exec()` method takes the same arguments as `test()`.
    const result = pattern.exec("/foo/bar", "https://example.com/baz");
    console.log(result.pathname.input); // '/foo/bar'
    console.log(result.pathname.groups[0]); // 'bar'
    console.log(result.hostname.input); // 'example.com'
    
### Using base URLs in the URLPattern constructor
The following example shows how base URLs can also be used to construct the `URLPattern`. The base URL is treated strictly as a URL and cannot contain any pattern syntax itself.
The pattern only inherits URL parts from the base URL that are less specific than those in the other properties.
In this case the `pathname` is specified so the protocol and host can be inherited, but not the search, hash, username, or password. The properties that are not inherited default to the wildcard string (`"*"`). The exception is the port, which is set to the empty string because the hostname is inherited from the base URL (which has an implied "default port" value).
    
    const pattern1 = new URLPattern({
      pathname: "/foo/*",
      baseURL: "https://example.com",
    });
    
    console.log(pattern1.protocol); // 'https'
    console.log(pattern1.hostname); // 'example.com'
    console.log(pattern1.pathname); // '/foo/*'
    console.log(pattern1.username); // '*'
    console.log(pattern1.password); // '*'
    console.log(pattern1.port); // ''
    console.log(pattern1.search); // '*'
    console.log(pattern1.hash); // '*'
    
    // Equivalent to pattern1
    const pattern2 = new URLPattern("/foo/*", "https://example.com");
    
    // Throws because a relative constructor string must have a base URL to resolve
    // against.
    try {
      const pattern3 = new URLPattern("/foo/*");
    } catch (e) {}
    
### Accessing matched group values
The following example shows how input values that match pattern groups can later be accessed from the `exec()` result object.
The `input` property is the string that is matched by the pattern: in this case it's `cdn.example.com`. The `groups` property contains captured groups, indexed by number for unnamed groups, and name for named groups. In this case, there is only one unnamed group for the wildcard property, with the value `cdn`.
    
    const pattern = new URLPattern({ hostname: "*.example.com" });
    const result = pattern.exec({ hostname: "cdn.example.com" });
    
    console.log(result.hostname); // {"groups": {"0": "cdn"}, "input": "cdn.example.com"}
    
### Accessing matched named group values
The following example shows how groups can be given custom names which can be used to accessed the matched value in the result object.
The match patterns in the pattern are indicated by the `:` symbol followed by a name. The same names then appear as keys in the `groups` property, with the matching values being the matched part of the test URL. The `input` property contains the whole part of the URL that matched the `pathname` pattern.
    
    // Construct a URLPattern using matching groups with custom names.
    
    const pattern = new URLPattern({ pathname: "/:product/:user/:action" });
    const result = pattern.exec({ pathname: "/store/wanderview/view" });
    
    console.log(result.pathname);
    /*
    {
        "groups": {
            "product": "store",
            "user": "wanderview",
            "action": "view"
        },
        "input": "/store/wanderview/view"
    }
    */
    
    // These names can then be later used to access the matched values
    // in the result object, such as "user" below.
    console.log(result.pathname.groups.user); // 'wanderview'
    
### Regular expression with unnamed group
The following example shows how a matching group can use a regular expression to match either `/foo` or `/bar` in a test URL. The group is unnamed, so will be referenced by an index number in the result.
    
    const pattern = new URLPattern({ pathname: "/(foo|bar)" });
    
    console.log(pattern.test({ pathname: "/foo" })); // true
    console.log(pattern.test({ pathname: "/bar" })); // true
    console.log(pattern.test({ pathname: "/baz" })); // false
    
    const result = pattern.exec({ pathname: "/foo" });
    console.log(result.pathname.groups[0]); // 'foo'
    
### Regular expression with a named group
The following example shows how to use a custom regular expression with a named group.
The group is named `type`, and matches a path which is either `/foo` or `/bar`.
    
    const pattern = new URLPattern({ pathname: "/:type(foo|bar)" });
    const result = pattern.exec({ pathname: "/foo" });
    
    console.log(result.pathname.groups.type); // 'foo'
    
### Making matching groups optional
The following example shows how to make a matching group optional by placing a `?` modifier after it.
For the pathname component this also causes any preceding `/` character to be treated as an optional prefix to the group.
    
    const pattern = new URLPattern({ pathname: "/product/(index.html)?" });
    
    console.log(pattern.test({ pathname: "/product/index.html" })); // true
    console.log(pattern.test({ pathname: "/product" })); // true
    
    const pattern2 = new URLPattern({ pathname: "/product/:action?" });
    
    console.log(pattern2.test({ pathname: "/product/view" })); // true
    console.log(pattern2.test({ pathname: "/product" })); // true
    
Wildcards can be made optional as well. This may not seem to make sense since they already match the empty string, but it also makes the prefix `/` optional in a pathname pattern.
    
    const pattern3 = new URLPattern({ pathname: "/product/*?" });
    
    console.log(pattern3.test({ pathname: "/product/wanderview/view" })); // true
    console.log(pattern3.test({ pathname: "/product" })); // true
    console.log(pattern3.test({ pathname: "/product/" })); // true
    
### Making matching groups repeated
The following example shows how a matching group can be made repeated by placing `+` modifier after it. In the `pathname` component this also treats the `/` prefix as special, so that it effectively the start of the repeating group.
    
    const pattern = new URLPattern({ pathname: "/product/:action+" });
    const result = pattern.exec({ pathname: "/product/do/some/thing/cool" });
    
    console.log(result.pathname);
    // { "groups": { "action": "do/some/thing/cool" }, "input": "/product/do/some/thing/cool" }
    
Note that `/product` does not match because it is not followed by `/` and at least one character.
    
    console.log(pattern.test({ pathname: "/product" })); // false
    console.log(pattern.test({ pathname: "/product/" })); // false
    console.log(pattern.test({ pathname: "/product/do" })); // true
    console.log(pattern.test({ pathname: "/product/do/" })); // false
    
### Making matching groups optional and repeated
The following example shows how to make a matching group that is both optional and repeated. Do this by placing a `*` modifier after the group. Again, the pathname component treats the `/` prefix as special.
It both becomes optional and is also repeated with the group.
    
    const pattern = new URLPattern({ pathname: "/product/:action*" });
    const result = pattern.exec({ pathname: "/product/do/some/thing/cool" });
    
    console.log(result.pathname);
    // { "groups": { "action": "do/some/thing/cool" }, "input": "/product/do/some/thing/cool" }
    
Note that unlike the previous example, `/product` matches because the repeating segments, including `/` are optional. However there must be at least one character to capture after a forward slash to match the repeating group.
    
    console.log(pattern.test({ pathname: "/product" })); // true
    console.log(pattern.test({ pathname: "/product/" })); // false
    console.log(pattern.test({ pathname: "/product/do" })); // true
    console.log(pattern.test({ pathname: "/product/do/" })); // false
    
### Using a custom prefix or suffix for an optional or repeated modifier
The following example shows how curly braces (a group delimiter) can be with a named group to denote a custom prefix and/or suffix to be operated on by a subsequent `?`, `*`, or `+` modifier.
For example, `{:subdomain.}*` matches against any subdomain of `example.com` and the domain itself. The match is assigned to the named group "subdomain".
    
    const pattern = new URLPattern({ hostname: "{:subdomain.}*example.com" });
    const result = pattern.exec({ hostname: "foo.bar.example.com" });
    
    console.log(pattern.test({ hostname: "example.com" })); // true
    console.log(pattern.test({ hostname: "foo.bar.example.com" })); // true
    console.log(pattern.test({ hostname: ".example.com" })); // false
    
    console.log(result.hostname);
    // { "groups": { "subdomain": "foo.bar" }, "input": "foo.bar.example.com" }
    
### Making text optional or repeated without a matching group
The following example shows how curly braces can be used to denote fixed text values as optional or repeated without using a matching group.
The pattern below matches either `/product` or `/products/` but because group delimiter are non-capturing by default, the result is not found in a corresponding match group.
    
    const pattern = new URLPattern({ pathname: "/product{/}?" });
    
    console.log(pattern.test({ pathname: "/product" })); // true
    console.log(pattern.test({ pathname: "/product/" })); // true
    
    const result = pattern.exec({ pathname: "/product/" });
    console.log(result.pathname.groups); // {}
    
### Using multiple components and features at once
The following example shows how many features can be combined across multiple URL components.
    
    const pattern = new URLPattern({
      protocol: "http{s}?",
      username: ":user?",
      password: ":pass?",
      hostname: "{:subdomain.}*example.com",
      pathname: "/product/:action*",
    });
    
    const result = pattern.exec(
      "http://foo:bar@sub.example.com/product/view?q=12345",
    );
    
    console.log(result.username.groups.user); // 'foo'
    console.log(result.password.groups.pass); // 'bar'
    console.log(result.hostname.groups.subdomain); // 'sub'
    console.log(result.pathname.groups.action); // 'view'
    
  * A polyfill of `URLPattern` is available on GitHub
  * The pattern syntax used by URLPattern is similar to the syntax used by path-to-regexp


# CSSGroupingRule
The `CSSGroupingRule` interface of the CSS Object Model represents any CSS at-rule that contains other rules nested within it.
CSSRule  CSSGroupingRule 
## Instance properties
This interface also inherits properties from `CSSRule`.
`CSSGroupingRule.cssRules` Read only
    
Returns a `CSSRuleList` of the CSS rules in the media rule.
## Instance methods
This interface also inherits methods from `CSSRule`.
`CSSGroupingRule.deleteRule`
    
Deletes a rule from the style sheet.
`CSSGroupingRule.insertRule`
    
Inserts a new style rule into the current style sheet.
  * Using dynamic styling information


# AudioWorkletGlobalScope
The `AudioWorkletGlobalScope` interface of the Web Audio API represents a global execution context for user-supplied code, which defines custom `AudioWorkletProcessor`-derived classes.
Each `BaseAudioContext` has a single `AudioWorklet` available under the `audioWorklet` property, which runs its code in a single `AudioWorkletGlobalScope`.
As the global execution context is shared across the current `BaseAudioContext`, it's possible to define any other variables and perform any actions allowed in worklets — apart from defining `AudioWorkletProcessor` derived classes.
WorkletGlobalScope  AudioWorkletGlobalScope 
## Instance properties
This interface also inherits properties defined on its parent interface, `WorkletGlobalScope`.
`currentFrame` Read only
    
Returns an integer that represents the ever-increasing current sample-frame of the audio block being processed. It is incremented by 128 (the size of a render quantum) after the processing of each audio block.
`currentTime` Read only
    
Returns a double that represents the ever-increasing context time of the audio block being processed. It is equal to the `currentTime` property of the `BaseAudioContext` the worklet belongs to.
`sampleRate` Read only
    
Returns a float that represents the sample rate of the associated `BaseAudioContext`.
`port` Read only Experimental
    
Returns a `MessagePort` for custom, asynchronous communication between code in the main thread and the global scope of an audio worklet. This allows for custom messages, such as sending and receiving control data or global settings.
## Instance methods
This interface also inherits methods defined on its parent interface, `WorkletGlobalScope`.
`registerProcessor()`
    
Registers a class derived from the `AudioWorkletProcessor` interface. The class can then be used by creating an `AudioWorkletNode`, providing its registered name.
## Examples
In this example we output all global properties into the console in the constructor of a custom `AudioWorkletProcessor`.
First we need to define the processor, and register it. Note that this should be done in a separate file.
    
    // AudioWorkletProcessor defined in : test-processor.js
    class TestProcessor extends AudioWorkletProcessor {
      constructor() {
        super();
    
        // Logs the current sample-frame and time at the moment of instantiation.
        // They are accessible from the AudioWorkletGlobalScope.
        console.log(currentFrame);
        console.log(currentTime);
      }
    
      // The process method is required - output silence,
      // which the outputs are already filled with.
      process(inputs, outputs, parameters) {
        return true;
      }
    }
    
    // Logs the sample rate, that is not going to change ever,
    // because it's a read-only property of a BaseAudioContext
    // and is set only during its instantiation.
    console.log(sampleRate);
    
    // You can declare any variables and use them in your processors
    // for example it may be an ArrayBuffer with a wavetable
    const usefulVariable = 42;
    console.log(usefulVariable);
    
    registerProcessor("test-processor", TestProcessor);
    
Next, in our main scripts file we'll load the processor, create an instance of `AudioWorkletNode` — passing the name of the processor to it — and connect the node to an audio graph. We should see the output of `console.log()` calls in the console:
    
    const audioContext = new AudioContext();
    await audioContext.audioWorklet.addModule("test-processor.js");
    const testNode = new AudioWorkletNode(audioContext, "test-processor");
    testNode.connect(audioContext.destination);
    
  * Web Audio API
  * Using the Web Audio API
  * Using AudioWorklet


# SVGAnimatedNumberList
The `SVGAnimatedNumberList` interface represents a list of attributes of type <number> which can be animated.
## Instance properties
`SVGAnimatedNumberList.baseVal` Read only
    
An `SVGNumberList` that represents the base value of the given attribute before applying any animations.
`SVGAnimatedNumberList.animVal` Read only
    
A read only `SVGNumberList` that represents the current animated value of the given attribute. If the given attribute is not currently being animated, then the `SVGNumberList` will have the same contents as `baseVal`. The object referenced by `animVal` will always be distinct from the one referenced by `baseVal`, even when the attribute is not animated.
## Instance methods
The `SVGAnimatedNumberList` interface do not provide any specific methods.
# ReadableStreamDefaultController
Note: This feature is available in Web Workers.
The `ReadableStreamDefaultController` interface of the Streams API represents a controller allowing control of a `ReadableStream`'s state and internal queue. Default controllers are for streams that are not byte streams.
## Constructor
None. `ReadableStreamDefaultController` instances are created automatically during `ReadableStream` construction.
## Instance properties
`ReadableStreamDefaultController.desiredSize` Read only
    
Returns the desired size required to fill the stream's internal queue.
## Instance methods
`ReadableStreamDefaultController.close()`
    
Closes the associated stream.
`ReadableStreamDefaultController.enqueue()`
    
Enqueues a given chunk in the associated stream.
`ReadableStreamDefaultController.error()`
    
Causes any future interactions with the associated stream to error.
## Examples
In the following simple example, a custom `ReadableStream` is created using a constructor (see our Simple random stream example for the full code). The `start()` function generates a random string of text every second and enqueues it into the stream. A `cancel()` function is also provided to stop the generation if `ReadableStream.cancel()` is called for any reason.
Note that a `ReadableStreamDefaultController` object is provided as the parameter of the `start()` and `pull()` functions.
When a button is pressed, the generation is stopped, the stream is closed using `ReadableStreamDefaultController.close()`, and another function is run, which reads the data back out of the stream.
    
    let interval;
    const stream = new ReadableStream({
      start(controller) {
        interval = setInterval(() => {
          let string = randomChars();
    
          // Add the string to the stream
          controller.enqueue(string);
    
          // show it on the screen
          let listItem = document.createElement("li");
          listItem.textContent = string;
          list1.appendChild(listItem);
        }, 1000);
    
        button.addEventListener("click", () => {
          clearInterval(interval);
          fetchStream();
          controller.close();
        });
      },
      pull(controller) {
        // We don't really need a pull in this example
      },
      cancel() {
        // This is called if the reader cancels,
        // so we should stop generating strings
        clearInterval(interval);
      },
    });
    
  * Streams API concepts
  * Using readable streams
  * `ReadableStream`
  * Web-streams-polyfill


# RTCError
The `RTCError` interface describes an error which has occurred while handling WebRTC operations. It's based upon the standard `DOMException` interface that describes general DOM errors.
DOMException  RTCError 
## Constructor
`RTCError()`
    
Creates and returns a new `RTCError` object initialized with the different parameters and, optionally, a string to use as the value of the error's `message` property.
## Instance properties
In addition to the properties defined by the parent interface, `DOMException`, `RTCError` includes the following properties:
`errorDetail` Read only
    
A string specifying the WebRTC-specific error code identifying the type of error that occurred.
`receivedAlert` Read only
    
An unsigned long integer value indicating the fatal DTLS error which was received from the network. Only valid if the `errorDetail` string is `dtls-failure`. If `null`, no DTLS error was received.
`sctpCauseCode` Read only
    
If `errorDetail` is `sctp-failure`, this property is a long integer specifying the SCTP cause code indicating the cause of the failed SCTP negotiation. `null` if the error isn't an SCTP error.
`sdpLineNumber` Read only
    
If `errorDetail` is `sdp-syntax-error`, this property is a long integer identifying the line number of the SDP on which the syntax error occurred. `null` if the error isn't an SDP syntax error.
`sentAlert` Read only
    
If `errorDetail` is `dtls-failure`, this property is an unsigned long integer indicating the fatal DTLS error that was sent out by this device. If `null`, no DTLS error was transmitted.
Note: All `RTCError` objects have their `name` set to `OperationError`.
## Examples
In this example, a handler is established for an `RTCDataChannel`'s `error` event.
    
    dataChannel.addEventListener("error", (event) => {
      let error = event.error; // event.error is an RTCError
    
      if (error.errorDetail === "sdp-syntax-error") {
        let errLine = error.sdpLineNumber;
        let errMessage = error.message;
    
        let alertMessage = `A syntax error occurred interpreting line ${errLine} of the SDP: ${errMessage}`;
        showMyAlertMessage("Data Channel Error", alertMessage);
      } else {
        terminateMyConnection();
      }
    });
    
If the error is an SDP syntax error—indicated by its `errorDetail` property being `sdp-syntax-error`—, a message string is constructed to present the error message and the line number within the SDP at which the error occurred. This message is then displayed using a function called `showMyAlertMessage()`, which stands in for whatever output mechanism this code might use.
Any other error is treated as terminal, causing a `terminateMyConnection()` function to be called.
The above example uses `addEventListener()` to add the handler for `error` events. You can also use the `RTCDataChannel` object's `onerror` event handler property, like this:
    
    dataChannel.onerror = (event) => {
      let error = event.error;
    
      /* and so forth */
    };
    
# URLSearchParams
Note: This feature is available in Web Workers.
The `URLSearchParams` interface defines utility methods to work with the query string of a URL.
`URLSearchParams` objects are iterable, so they can directly be used in a `for...of` structure to iterate over key/value pairs in the same order as they appear in the query string, for example the following two lines are equivalent:
    
    for (const [key, value] of mySearchParams) {
    }
    for (const [key, value] of mySearchParams.entries()) {
    }
    
Although `URLSearchParams` is functionally similar to a `Map`, when iterating, it may suffer from some pitfalls that `Map` doesn't encounter due to how it's implemented.
## Constructor
`URLSearchParams()`
    
Returns a `URLSearchParams` object instance.
## Instance properties
`size` Read only
    
Indicates the total number of search parameter entries.
## Instance methods
`URLSearchParams[Symbol.iterator]()`
    
Returns an `iterator` allowing iteration through all key/value pairs contained in this object in the same order as they appear in the query string.
`URLSearchParams.append()`
    
Appends a specified key/value pair as a new search parameter.
`URLSearchParams.delete()`
    
Deletes search parameters that match a name, and optional value, from the list of all search parameters.
`URLSearchParams.entries()`
    
Returns an `iterator` allowing iteration through all key/value pairs contained in this object in the same order as they appear in the query string.
`URLSearchParams.forEach()`
    
Allows iteration through all values contained in this object via a callback function.
`URLSearchParams.get()`
    
Returns the first value associated with the given search parameter.
`URLSearchParams.getAll()`
    
Returns all the values associated with a given search parameter.
`URLSearchParams.has()`
    
Returns a boolean value indicating if a given parameter, or parameter and value pair, exists.
`URLSearchParams.keys()`
    
Returns an `iterator` allowing iteration through all keys of the key/value pairs contained in this object.
`URLSearchParams.set()`
    
Sets the value associated with a given search parameter to the given value. If there are several values, the others are deleted.
`URLSearchParams.sort()`
    
Sorts all key/value pairs, if any, by their keys.
`URLSearchParams.toString()`
    
Returns a string containing a query string suitable for use in a URL.
`URLSearchParams.values()`
    
Returns an `iterator` allowing iteration through all values of the key/value pairs contained in this object.
## Examples
>
### Using URLSearchParams
    
    const paramsString = "q=URLUtils.searchParams&topic=api";
    const searchParams = new URLSearchParams(paramsString);
    
    // Iterating the search parameters
    for (const p of searchParams) {
      console.log(p);
    }
    
    console.log(searchParams.has("topic")); // true
    console.log(searchParams.has("topic", "fish")); // false
    console.log(searchParams.get("topic") === "api"); // true
    console.log(searchParams.getAll("topic")); // ["api"]
    console.log(searchParams.get("foo") === null); // true
    console.log(searchParams.append("topic", "webdev"));
    console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=api&topic=webdev"
    console.log(searchParams.set("topic", "More webdev"));
    console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=More+webdev"
    console.log(searchParams.delete("topic"));
    console.log(searchParams.toString()); // "q=URLUtils.searchParams"
    
Search parameters can also be an object.
    
    const paramsObj = { foo: "bar", baz: "bar" };
    const searchParams = new URLSearchParams(paramsObj);
    
    console.log(searchParams.toString()); // "foo=bar&baz=bar"
    console.log(searchParams.has("foo")); // true
    console.log(searchParams.get("foo")); // "bar"
    
### Parsing window.location
Unlike `URL`, the `Location` interface does not provide a readily-available `searchParams` property. We can parse `location.search` with `URLSearchParams`.
    
    // Assume page has location:
    // https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams?foo=a
    const paramsString = window.location.search;
    const searchParams = new URLSearchParams(paramsString);
    console.log(searchParams.get("foo")); // a
    
### Duplicate search parameters
    
    const paramStr = "foo=bar&foo=baz";
    const searchParams = new URLSearchParams(paramStr);
    
    console.log(searchParams.toString()); // "foo=bar&foo=baz"
    console.log(searchParams.has("foo")); // true
    console.log(searchParams.get("foo")); // bar, only returns the first value
    console.log(searchParams.getAll("foo")); // ["bar", "baz"]
    
### No URL parsing
The `URLSearchParams` constructor does not parse full URLs. However, it will strip an initial leading `?` off of a string, if present.
    
    const paramsString1 = "http://example.com/search?query=%40";
    const searchParams1 = new URLSearchParams(paramsString1);
    
    console.log(searchParams1.has("query")); // false
    console.log(searchParams1.has("http://example.com/search?query")); // true
    
    console.log(searchParams1.get("query")); // null
    console.log(searchParams1.get("http://example.com/search?query")); // "@" (equivalent to decodeURIComponent('%40'))
    
    const paramsString2 = "?query=value";
    const searchParams2 = new URLSearchParams(paramsString2);
    console.log(searchParams2.has("query")); // true
    
    const url = new URL("http://example.com/search?query=%40");
    const searchParams3 = new URLSearchParams(url.search);
    console.log(searchParams3.has("query")); // true
    
### Percent encoding
`URLSearchParams` objects percent-encode anything in the `application/x-www-form-urlencoded` percent-encode set (which contains all code points except ASCII alphanumeric, `*`, `-`, `.`, and `_`), and encode U+0020 SPACE as `+`. However, it only handles percent-encoding when serializing and deserializing full URL search params syntax. When interacting with individual keys and values, you always use the unencoded version.
    
    // Creation from parsing a string: percent-encoding is decoded
    const params = new URLSearchParams("%24%25%26=%28%29%2B");
    // Retrieving all keys/values: only decoded values are returned
    console.log([...params]); // [["$%&", "()+"]]
    // Getting an individual value: use the decoded key and get the decoded value
    console.log(params.get("$%&")); // "()+"
    console.log(params.get("%24%25%26")); // null
    // Setting an individual value: use the unencoded key and value
    params.append("$%&$#@+", "$#&*@#()+");
    // Serializing: percent-encoding is applied
    console.log(params.toString());
    // "%24%25%26=%28%29%2B&%24%25%26%24%23%40%2B=%24%23%26*%40%23%28%29%2B"
    
If you append a key/value pair with a percent-encoded key, that key is treated as unencoded and is encoded again.
    
    const params = new URLSearchParams();
    
    params.append("%24%26", "value");
    params.toString(); // "%2524%2526=value"
    
### Preserving plus signs
The `URLSearchParams` constructor interprets plus signs (`+`) as spaces, which might cause problems. In the example below, we use hexadecimal escape sequences to mimic a string containing binary data (where every byte carries information) that needs to be stored in the URL search params. Note how the encoded string produced by `btoa()` contains `+` and isn't preserved by `URLSearchParams`.
    
    const rawData = "\x13à\x17@\x1F\x80";
    const base64Data = btoa(rawData); // 'E+AXQB+A'
    
    const searchParams = new URLSearchParams(`bin=${base64Data}`); // 'bin=E+AXQB+A'
    const binQuery = searchParams.get("bin"); // 'E AXQB A', '+' is replaced by spaces
    
    console.log(atob(binQuery) === rawData); // false
    
Never construct `URLSearchParams` objects using dynamically interpolated strings. Instead, use the `append()` method, which as mentioned above, interprets all characters as-is.
    
    const rawData = "\x13à\x17@\x1F\x80";
    const base64Data = btoa(rawData); // 'E+AXQB+A'
    
    const searchParams = new URLSearchParams();
    searchParams.append("bin", base64Data); // 'bin=E%2BAXQB%2BA'
    const binQuery = searchParams.get("bin"); // 'E+AXQB+A'
    
    console.log(atob(binQuery) === rawData); // true
    
### Interaction with URL.searchParams
The `URL.searchParams` property exposes the URL's `search` string as a `URLSearchParams` object. When updating this `URLSearchParams`, the URL's `search` is updated with its serialization. However, `URL.search` encodes a subset of characters that `URLSearchParams` does, and encodes spaces as `%20` instead of `+`. This may cause some surprising interactions—if you update `searchParams`, even with the same values, the URL may be serialized differently.
    
    const url = new URL("https://example.com/?a=b ~");
    console.log(url.href); // "https://example.com/?a=b%20~"
    console.log(url.searchParams.toString()); // "a=b+%7E"
    // This should be a no-op, but it changes the URL's query to the
    // serialization of its searchParams
    url.searchParams.sort();
    console.log(url.href); // "https://example.com/?a=b+%7E"
    
    const url2 = new URL("https://example.com?search=1234&param=my%20param");
    console.log(url2.search); // "?search=1234&param=my%20param"
    url2.searchParams.delete("search");
    console.log(url2.search); // "?param=my+param"
    
### Empty value vs. no value
`URLSearchParams` doesn't distinguish between a parameter with nothing after the `=`, and a parameter that doesn't have a `=` altogether.
    
    const emptyVal = new URLSearchParams("foo=&bar=baz");
    console.log(emptyVal.get("foo")); // returns ''
    const noEquals = new URLSearchParams("foo&bar=baz");
    console.log(noEquals.get("foo")); // also returns ''
    console.log(noEquals.toString()); // 'foo=&bar=baz'
    
  * Polyfill of `URLSearchParams` in `core-js`
  * The `URL` interface.
  * Google Developers: Easy URL manipulation with URLSearchParams


# WebUSB API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The WebUSB API provides a way to expose non-standard Universal Serial Bus (USB) compatible devices services to the web, to make USB safer and easier to use.
## Concepts and Usage
USB is the de-facto standard for wired peripherals. The USB devices that you connect to your computer are typically grouped into a number of device classes—such as keyboards, mice, video devices, and so on. These are supported using the operating system's class driver. Many of these are also web accessible via the WebHID API.
In addition to these standardized devices, there are a large number of devices that don't fit into any class. These need custom drivers, and are inaccessible from the web due to the native code required to take advantage of them. Installing one of these devices often involves searching on a manufacturer's website for drivers and, should you wish to use the device on another computer, repeating the process again.
WebUSB provides a way for these non-standardized USB device services to be exposed to the web. This means that hardware manufacturers will be able to provide a way for their device to be accessed from the web, without having to provide their own API.
When connecting a new WebUSB-compatible device, the browser displays a notification providing a link to the manufacturer's website. On arriving at the site the browser prompts for permission to connect to the device, then the device is ready for use. No drivers need be downloaded and installed.
## Interfaces
`USB`
    
Provides attributes and methods for finding and connecting USB devices from a web page.
`USBConnectionEvent`
    
The event type passed to `USB` `connect` or `disconnect` events when the user agent detects a new USB device has been connected to, or disconnected from the host.
`USBDevice`
    
Provides access to metadata about a paired USB device and methods for controlling it.
`USBInTransferResult`
    
Represents the result from requesting a transfer of data from the USB device to the USB host.
`USBOutTransferResult`
    
Represents the result from requesting a transfer of data from the USB host to the USB device.
`USBIsochronousInTransferPacket`
    
Represents the status of an individual packet from a request to transfer data from the USB device to the USB host over an isochronous endpoint.
`USBIsochronousInTransferResult`
    
Represents the result from requesting a transfer of data from the USB device to the USB host.
`USBIsochronousOutTransferPacket`
    
Represents the status of an individual packet from a request to transfer data from the USB host to the USB device over an isochronous endpoint.
`USBIsochronousOutTransferResult`
    
Represents the result from requesting a transfer of data from the USB host to the USB device.
`USBConfiguration`
    
Provides information about a particular configuration of a USB device and the interfaces that it supports.
`USBInterface`
    
Provides information about an interface provided by the USB device.
`USBAlternateInterface`
    
Provides information about a particular configuration of an interface provided by the USB device.
`USBEndPoint`
    
Provides information about an endpoint provided by the USB device.
## Examples
>
### Accessing a connected device
The following example demonstrates how to access a connected Arduino device using `USB.requestDevice()`, which has a vendorId of `0x2341`.
    
    navigator.usb
      .requestDevice({ filters: [{ vendorId: 0x2341 }] })
      .then((device) => {
        console.log(device.productName); // "Arduino Micro"
        console.log(device.manufacturerName); // "Arduino LLC"
      })
      .catch((error) => {
        console.error(error);
      });
    
### Finding all connected devices
You can find all connected devices with `USB.getDevices()`. In the following example, with the Arduino device connected, product and manufacturer name are printed to the console.
    
    navigator.usb.getDevices().then((devices) => {
      devices.forEach((device) => {
        console.log(device.productName); // "Arduino Micro"
        console.log(device.manufacturerName); // "Arduino LLC"
      });
    });
    
  * Access USB Devices on the Web


# Web Storage API
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
## Concepts and usage
The two mechanisms within Web Storage are as follows:
  * `sessionStorage` is partitioned by browser tabs and by origin. The main document, and all embedded browsing contexts (iframes), are grouped by their origin and each origin has access to its own separate storage area. Closing the browser tab destroys all `sessionStorage` data associated with that tab.
  * `localStorage` is partitioned by origin only. All documents with the same origin have access to the same `localStorage` area, and it persists even when the browser is closed and reopened.


These mechanisms are available via the `Window.sessionStorage` and `Window.localStorage` properties. Accessing one of these will return an instance of a `Storage` object, through which data items can be set, retrieved and removed. A different storage object is used for the `sessionStorage` and `localStorage` for each origin — they function and are controlled separately.
To learn about the amount of storage available using the APIs, and what happens when storage limits are exceeded, see Storage quotas and eviction criteria.
Both `sessionStorage` and `localStorage` in Web Storage are synchronous in nature. This means that when data is set, retrieved, or removed from these storage mechanisms, the operations are performed synchronously, blocking the execution of other JavaScript code until the operation is completed. This synchronous behavior can potentially affect the performance of the web application, especially if there is a large amount of data being stored or retrieved.
Developers should be cautious when performing operations on `sessionStorage` or `localStorage` that involve a significant amount of data or computationally intensive tasks. It is important to optimize code and minimize synchronous operations to prevent blocking the user interface and causing delays in the application's responsiveness.
Asynchronous alternatives, such as IndexedDB, may be more suitable for scenarios where performance is a concern or when dealing with larger datasets. These alternatives allow for non-blocking operations, enabling smoother user experiences and better performance in web applications.
Note: Access to Web Storage from third-party IFrames is denied if the user has disabled third-party cookies.
## Determining storage access by a third party
Each origin has its own storage — this is true for both web storage and shared storage. However, access of third-party (i.e., embedded) code to shared storage depends on its browsing context. The context in which a third-party code from another origin runs determines the storage access of the third-party code.
Third-party code can be added to another site by injecting it with a `<script>` element or by setting the source of an `<iframe>` to a site that contains third-party code. The method used for integrating third-party code determines the browsing context of the code.
  * If your third-party code is added to another site with a `<script>` element, your code will be executed in the browsing context of the embedder. Therefore, when you call `Storage.setItem()` or `SharedStorage.set()`, the key/value pair will be written to the embedder's storage. From the browser's perspective, there is no difference between first-party code and third-party code when a `<script>` tag is used.
  * When your third-party code is added to another site within an `<iframe>`, the code inside the `<iframe>` will be executed with the origin of the `<iframe>`'s browsing context. If the code inside the `<iframe>` calls `Storage.setItem()`, data will be written into the local or session storage of the `<iframe>`'s origin. If the `<iframe>` code calls `SharedStorage.set()`, the data will be written into the shared storage of the `<iframe>`'s origin.


## Web Storage interfaces
`Storage`
    
Allows you to set, retrieve and remove data for a specific domain and storage type (session or local).
`Window`
    
The Web Storage API extends the `Window` object with two new properties — `Window.sessionStorage` and `Window.localStorage` — which provide access to the current domain's session and local `Storage` objects respectively, and a `storage` event handler that fires when a storage area changes (e.g., a new item is stored).
`StorageEvent`
    
The `storage` event is fired on a document's `Window` object when a storage area changes.
## Examples
To illustrate some typical web storage usage, we have created an example, imaginatively called Web Storage Demo. The landing page provides controls that can be used to customize the color, font and decorative image. When you choose different options, the page is instantly updated; in addition your choices are stored in `localStorage`, so that when you leave the page then load it again later on your choices are remembered.
In addition, we have provided an event output page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as the `StorageEvent` is fired.
>
### api.Window.localStorage
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_Storage_API` 4 12 3.5 10.5 4 18 4 11 3.2 1.0 4.4 3.2  
### api.Window.sessionStorage
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_Storage_API` 4 12 2 10.5 4 18 4 11 3.2 1.0 4.4 3.2  
## Private Browsing / Incognito modes
Private windows, incognito mode, and similarly named privacy browsing options, don't store data like history and cookies. In private mode, `localStorage` is treated like `sessionStorage`. The storage APIs are still available and fully functional, but all data stored in the private window is deleted when the browser or browser tab is closed.
  * Using the Web Storage API
  * Browser storage quotas and eviction criteria


# MediaStreamTrackAudioSourceNode
The `MediaStreamTrackAudioSourceNode` interface is a type of `AudioNode` which represents a source of audio data taken from a specific `MediaStreamTrack` obtained through the WebRTC or Media Capture and Streams APIs.
The audio itself might be input from a microphone or other audio sampling device, or might be received through a `RTCPeerConnection`, among other possible options.
A `MediaStreamTrackAudioSourceNode` has no inputs and exactly one output, and is created using the `AudioContext.createMediaStreamTrackSource()` method. This interface is similar to `MediaStreamAudioSourceNode`, except it lets you specifically state the track to use, rather than assuming the first audio track on a stream.
EventTarget  AudioNode  MediaStreamTrackAudioSourceNode 
Number of inputs `0`  
Number of outputs `1`  
Channel count defined by the first audio `MediaStreamTrack` passed to the `AudioContext.createMediaStreamTrackSource()` method that created it.   
## Constructor
`MediaStreamTrackAudioSourceNode()`
    
Creates a new `MediaStreamTrackAudioSourceNode` object instance with the specified options.
## Instance properties
The `MediaStreamTrackAudioSourceNode` interface has no properties of its own; however, it inherits the properties of its parent, `AudioNode`.
## Instance methods
Inherits methods from its parent, `AudioNode`.
## Example
See `AudioContext.createMediaStreamSource()` for example code that uses this object.
  * Using the Web Audio API
  * WebRTC API
  * Media Capture and Streams API (Media Streams)
  * `MediaStreamAudioSourceNode`


# OES_element_index_uint extension
The `OES_element_index_uint` extension is part of the WebGL API and adds support for `gl.UNSIGNED_INT` types to `WebGLRenderingContext.drawElements()`.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default.
## Extended methods
This extension extends `WebGLRenderingContext.drawElements()`:
  * The `type` parameter now accepts `gl.UNSIGNED_INT`.


## Examples
    
    const ext = gl.getExtension("OES_element_index_uint");
    
    gl.drawElements(gl.POINTS, 8, gl.UNSIGNED_INT, 0);
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.drawElements()`


# StorageManager
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `StorageManager` interface of the Storage API provides an interface for managing persistence permissions and estimating available storage. You can get a reference to this interface using either `navigator.storage` or `WorkerNavigator.storage`.
## Instance methods
`StorageManager.estimate()`
    
Returns a `Promise` that resolves to an object containing usage and quota numbers for your origin.
`StorageManager.getDirectory()`
    
Used to obtain a reference to a `FileSystemDirectoryHandle` object allowing access to a directory and its contents, stored in the origin private file system. Returns a `Promise` that fulfills with a `FileSystemDirectoryHandle` object.
`StorageManager.persist()`
    
Returns a `Promise` that resolves to `true` if the user agent is able to persist your site's storage.
`StorageManager.persisted()`
    
Returns a `Promise` that resolves to `true` if persistence has already been granted for your site's storage.
# HTMLDivElement
The `HTMLDivElement` interface provides special properties (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating `<div>` elements.
EventTarget  Node  Element  HTMLElement  HTMLDivElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLDivElement.align` Deprecated
    
A string representing an enumerated property indicating alignment of the element's contents with respect to the surrounding context. The possible values are `"left"`, `"right"`, `"justify"`, and `"center"`.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<div>`.


# PerformanceResourceTiming
Note: This feature is available in Web Workers.
The `PerformanceResourceTiming` interface enables retrieval and analysis of detailed network timing data regarding the loading of an application's resources. An application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource, such as an `XMLHttpRequest`, `<SVG>`, image, or script.
PerformanceEntry  PerformanceResourceTiming 
## Description
The interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, DNS lookup start and end times, response start and end times, and more. Additionally, the interface extends `PerformanceEntry` with other properties which provide data about the size of the fetched resource as well as the type of resource that initiated the fetch.
### Typical resource timing metrics
The properties of this interface allow you to calculate certain resource timing metrics. Common use cases include:
  * Measuring TCP handshake time (`connectEnd` \- `connectStart`)
  * Measuring DNS lookup time (`domainLookupEnd` \- `domainLookupStart`)
  * Measuring redirection time (`redirectEnd` \- `redirectStart`)
  * Measuring interim request time (`firstInterimResponseStart` \- `finalResponseHeadersStart`)
  * Measuring request time (`responseStart` \- `requestStart`)
  * Measuring TLS negotiation time (`requestStart` \- `secureConnectionStart`)
  * Measuring time to fetch (without redirects) (`responseEnd` \- `fetchStart`)
  * Measuring ServiceWorker processing time (`fetchStart` \- `workerStart`)
  * Checking if content was compressed (`decodedBodySize` should not be `encodedBodySize`)
  * Checking if local caches were hit (`transferSize` should be `0`)
  * Checking if modern and fast protocols are used (`nextHopProtocol` should be HTTP/2 or HTTP/3)
  * Checking if the correct resources are render-blocking (`renderBlockingStatus`)


## Instance properties
>
### Inherited from `PerformanceEntry`
This interface extends the following `PerformanceEntry` properties for resource performance entry types by qualifying and constraining them as follows:
`PerformanceEntry.duration` Read only
    
Returns a `timestamp` that is the difference between the `responseEnd` and the `startTime` properties.
`PerformanceEntry.entryType` Read only
    
Returns `"resource"`.
`PerformanceEntry.name` Read only
    
Returns the resource's URL.
`PerformanceEntry.startTime` Read only
    
Returns the `timestamp` for the time a resource fetch started. This value is equivalent to `PerformanceResourceTiming.fetchStart`.
### Timestamps
The interface supports the following timestamp properties which you can see in the diagram and are listed in the order in which they are recorded for the fetching of a resource. An alphabetical listing is shown in the navigation, at left.
`PerformanceResourceTiming.redirectStart` Read only
    
A `DOMHighResTimeStamp` that represents the start time of the fetch which initiates the redirect.
`PerformanceResourceTiming.redirectEnd` Read only
    
A `DOMHighResTimeStamp` immediately after receiving the last byte of the response of the last redirect.
`PerformanceResourceTiming.workerStart` Read only
    
Returns a `DOMHighResTimeStamp` immediately before dispatching the `FetchEvent` if a Service Worker thread is already running, or immediately before starting the Service Worker thread if it is not already running. If the resource is not intercepted by a Service Worker the property will always return 0.
`PerformanceResourceTiming.fetchStart` Read only
    
A `DOMHighResTimeStamp` immediately before the browser starts to fetch the resource.
`PerformanceResourceTiming.domainLookupStart` Read only
    
A `DOMHighResTimeStamp` immediately before the browser starts the domain name lookup for the resource.
`PerformanceResourceTiming.domainLookupEnd` Read only
    
A `DOMHighResTimeStamp` representing the time immediately after the browser finishes the domain name lookup for the resource.
`PerformanceResourceTiming.connectStart` Read only
    
A `DOMHighResTimeStamp` immediately before the browser starts to establish the connection to the server to retrieve the resource.
`PerformanceResourceTiming.secureConnectionStart` Read only
    
A `DOMHighResTimeStamp` immediately before the browser starts the handshake process to secure the current connection.
`PerformanceResourceTiming.connectEnd` Read only
    
A `DOMHighResTimeStamp` immediately after the browser finishes establishing the connection to the server to retrieve the resource.
`PerformanceResourceTiming.requestStart` Read only
    
A `DOMHighResTimeStamp` immediately before the browser starts requesting the resource from the server.
`PerformanceResourceTiming.firstInterimResponseStart` Experimental Read only
    
A `DOMHighResTimeStamp` that represents the interim response time (for example, 100 Continue or 103 Early Hints).
`PerformanceResourceTiming.responseStart` Read only
    
A `DOMHighResTimeStamp` immediately after the browser receives the first byte of the response from the server (which may be an interim response).
`PerformanceResourceTiming.finalResponseHeadersStart` Experimental Read only
    
A `DOMHighResTimeStamp` that represents the final headers response time (for example, 200 Success), after any interim response time.
`PerformanceResourceTiming.responseEnd` Read only
    
A `DOMHighResTimeStamp` immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.
### Additional resource information
Additionally, this interface exposes the following properties containing more information about a resource:
`PerformanceResourceTiming.contentType` Read only Experimental
    
A string representing a minimized and standardized version of the MIME-type of the fetched resource.
`PerformanceResourceTiming.decodedBodySize` Read only
    
A number that is the size (in octets) received from the fetch (HTTP or cache) of the message body, after removing any applied content encoding.
`PerformanceResourceTiming.deliveryType` Experimental Read only
    
Indicates how the resource was delivered — for example from the cache or from a navigational prefetch.
`PerformanceResourceTiming.encodedBodySize` Read only
    
A number representing the size (in octets) received from the fetch (HTTP or cache), of the payload body, before removing any applied content encodings.
`PerformanceResourceTiming.initiatorType` Read only
    
A string representing the web platform feature that initiated the performance entry.
`PerformanceResourceTiming.nextHopProtocol` Read only
    
A string representing the network protocol used to fetch the resource, as identified by the ALPN Protocol ID (RFC7301).
`PerformanceResourceTiming.renderBlockingStatus` Read only
    
A string representing the render-blocking status. Either `"blocking"` or `"non-blocking"`.
`PerformanceResourceTiming.responseStatus` Read only
    
A number representing the HTTP response status code returned when fetching the resource.
`PerformanceResourceTiming.transferSize` Read only
    
A number representing the size (in octets) of the fetched resource. The size includes the response header fields plus the response payload body.
`PerformanceResourceTiming.serverTiming` Read only
    
An array of `PerformanceServerTiming` entries containing server timing metrics.
## Instance methods
`PerformanceResourceTiming.toJSON()`
    
Returns a JSON representation of the `PerformanceResourceTiming` object.
## Examples
>
### Logging resource timing information
Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
    
    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        console.log(entry);
      });
    });
    
    observer.observe({ type: "resource", buffered: true });
    
Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:
    
    const resources = performance.getEntriesByType("resource");
    resources.forEach((entry) => {
      console.log(entry);
    });
    
## Security requirements
>
### Cross-origin timing information
Many of the resource timing properties are restricted to return `0` or an empty string when the resource is a cross-origin request. To expose cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.
For example, to allow `https://developer.mozilla.org` to see resource timing information, the cross-origin resource should send:
    
    Timing-Allow-Origin: https://developer.mozilla.org
    
  * Resource timing (Overview)


# CSSNumericValue
The `CSSNumericValue` interface of the CSS Typed Object Model API represents operations that all numeric values can perform.
CSSStyleValue  CSSNumericValue 
## Interfaces based on CSSNumericValue
Below is a list of interfaces based on the CSSNumericValue interface.
  * `CSSMathClamp`
  * `CSSMathInvert`
  * `CSSMathMax`
  * `CSSMathMin`
  * `CSSMathNegate`
  * `CSSMathProduct`
  * `CSSMathSum`
  * `CSSMathValue`
  * `CSSNumericArray`
  * `CSSUnitValue`


## Instance properties
None.
## Static methods
`CSSNumericValue.parse`
    
Allows a `CSSNumericValue` to be constructed directly from a string containing CSS.
## Instance methods
`CSSNumericValue.add`
    
Adds a supplied number to the `CSSNumericValue`.
`CSSNumericValue.sub`
    
Subtracts a supplied number from the `CSSNumericValue`.
`CSSNumericValue.mul`
    
Multiplies the `CSSNumericValue` by the supplied value.
`CSSNumericValue.div`
    
Divides the `CSSNumericValue` by the supplied value.
`CSSNumericValue.min`
    
Returns the minimum value passed
`CSSNumericValue.max`
    
Returns the maximum value passed
`CSSNumericValue.equals`
    
True if all the values are the exact same type and value, in the same order. Otherwise, false.
`CSSNumericValue.to`
    
Converts `value` into another one with the specified unit.
`CSSNumericValue.toSum`
    
Converts an existing `CSSNumericValue` into a `CSSMathSum` object with values of a specified unit.
`CSSNumericValue.type`
    
Returns the type of `CSSNumericValue`, one of `angle`, `flex`, `frequency`, `length`, `resolution`, `percent`, `percentHint`, or `time`.
  * `CSSImageValue`
  * `CSSKeywordValue`
  * `CSSPositionValue`
  * `CSSTransformValue`
  * `CSSUnparsedValue`


# FileSystemSyncAccessHandle
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is only available in Dedicated Web Workers.
The `FileSystemSyncAccessHandle` interface of the File System API represents a synchronous handle to a file system entry.
This class is only accessible inside dedicated Web Workers (so that its methods do not block execution on the main thread) for files within the origin private file system, which is not visible to end-users.
As a result, its methods are not subject to the same security checks as methods running on files within the user-visible file system, and so are much more performant. This makes them suitable for significant, large-scale file updates such as SQLite database modifications.
The interface is accessed through the `FileSystemFileHandle.createSyncAccessHandle()` method.
Note: In earlier versions of the spec, `close()`, `flush()`, `getSize()`, and `truncate()` were wrongly specified as asynchronous methods, and older versions of some browsers implement them in this way. However, all current browsers that support these methods implement them as synchronous methods.
## Instance properties
None.
## Instance methods
`close()`
    
Closes an open synchronous file handle, disabling any further operations on it and releasing the exclusive lock previously put on the file associated with the file handle.
`flush()`
    
Persists any changes made to the file associated with the handle via the `write()` method to disk.
`getSize()`
    
Returns the size of the file associated with the handle in bytes.
`read()`
    
Reads the content of the file associated with the handle into a specified buffer, optionally at a given offset.
`truncate()`
    
Resizes the file associated with the handle to a specified number of bytes.
`write()`
    
Writes the content of a specified buffer to the file associated with the handle, optionally at a given offset.
## Examples
The following asynchronous event handler function is contained inside a Web Worker. On receiving a message from the main thread it:
  * Creates a synchronous file access handle.
  * Gets the size of the file and creates an `ArrayBuffer` to contain it.
  * Reads the file contents into the buffer.
  * Encodes the message and writes it to the end of the file.
  * Persists the changes to disk and closes the access handle.


    
    onmessage = async (e) => {
      // Retrieve message sent to work from main script
      const message = e.data;
    
      // Get handle to draft file
      const root = await navigator.storage.getDirectory();
      const draftHandle = await root.getFileHandle("draft.txt", { create: true });
      // Get sync access handle
      const accessHandle = await draftHandle.createSyncAccessHandle();
    
      // Get size of the file.
      const fileSize = accessHandle.getSize();
      // Read file content to a buffer.
      const buffer = new DataView(new ArrayBuffer(fileSize));
      const readBuffer = accessHandle.read(buffer, { at: 0 });
    
      // Write the message to the end of the file.
      const encoder = new TextEncoder();
      const encodedMessage = encoder.encode(message);
      const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });
    
      // Persist changes to disk.
      accessHandle.flush();
    
      // Always close FileSystemSyncAccessHandle if done.
      accessHandle.close();
    };
    
  * File System API
  * The File System Access API: simplifying access to local files


# OscillatorNode
The `OscillatorNode` interface represents a periodic waveform, such as a sine wave. It is an `AudioScheduledSourceNode` audio-processing module that causes a specified frequency of a given wave to be created—in effect, a constant tone.
EventTarget  AudioNode  AudioScheduledSourceNode  OscillatorNode 
Number of inputs `0`  
Number of outputs `1`  
Channel count mode `max`  
Channel count `2` (not used in the default count mode)  
Channel interpretation `speakers`  
## Constructor
`OscillatorNode()`
    
Creates a new instance of an `OscillatorNode` object, optionally providing an object specifying default values for the node's properties. As an alternative, you can use the `BaseAudioContext.createOscillator()` factory method; see Creating an AudioNode.
## Instance properties
Also inherits properties from its parent, `AudioScheduledSourceNode`.
`OscillatorNode.frequency`
    
An a-rate `AudioParam` representing the frequency of oscillation in hertz (though the `AudioParam` returned is read-only, the value it represents is not). The default value is 440 Hz (a standard middle-A note).
`OscillatorNode.detune`
    
An a-rate `AudioParam` representing detuning of oscillation in cents (though the `AudioParam` returned is read-only, the value it represents is not). The default value is 0.
`OscillatorNode.type`
    
A string which specifies the shape of waveform to play; this can be one of a number of standard values, or `custom` to use a `PeriodicWave` to describe a custom waveform. Different waves will produce different tones. Standard values are `"sine"`, `"square"`, `"sawtooth"`, `"triangle"` and `"custom"`. The default is `"sine"`.
## Instance methods
Also inherits methods from its parent, `AudioScheduledSourceNode`.
`OscillatorNode.setPeriodicWave()`
    
Sets a `PeriodicWave` which describes a periodic waveform to be used instead of one of the standard waveforms; calling this sets the `type` to `custom`.
`AudioScheduledSourceNode.start()`
    
Specifies the exact time to start playing the tone.
`AudioScheduledSourceNode.stop()`
    
Specifies the time to stop playing the tone.
## Events
Also inherits events from its parent, `AudioScheduledSourceNode`.
## Examples
>
### Using an OscillatorNode
The following example shows basic usage of an `AudioContext` to create an oscillator node and to start playing a tone on it. For an applied example, check out our Violent Theremin demo (see app.js for relevant code).
    
    // create web audio api context
    const audioCtx = new AudioContext();
    
    // create Oscillator node
    const oscillator = audioCtx.createOscillator();
    
    oscillator.type = "square";
    oscillator.frequency.setValueAtTime(440, audioCtx.currentTime); // value in hertz
    oscillator.connect(audioCtx.destination);
    oscillator.start();
    
### Different oscillator node types
The four built-in oscillator types are `sine`, `square`, `triangle` and `sawtooth`. They are the shape of the waveform generated by an oscillator. Fun fact: These are the defaults for most synths because they are waveforms which are easy to generate electronically. This example visualizes the waveforms for the different types at different frequencies.
    
    <div class="controls">
      <label for="type-select">
        Oscillator type
        <select id="type-select">
          <option>sine</option>
          <option>square</option>
          <option>triangle</option>
          <option>sawtooth</option>
        </select>
      </label>
    
      <label for="freq-range">
        Frequency
        <input
          type="range"
          min="100"
          max="800"
          step="10"
          value="250"
          id="freq-range" />
      </label>
      <button data-playing="init" id="play-button">Play</button>
    </div>
    
    <canvas id="wave-graph"></canvas>
    
The code is in two parts: in the first part, we set up the sound stuff.
    
    const typeSelect = document.getElementById("type-select");
    const frequencyControl = document.getElementById("freq-range");
    const playButton = document.getElementById("play-button");
    
    const audioCtx = new AudioContext();
    const osc = new OscillatorNode(audioCtx, {
      type: typeSelect.value,
      frequency: frequencyControl.valueAsNumber,
    });
    // Rather than creating a new oscillator for every start and stop
    // which you would do in an audio application, we are just going
    // to mute/un-mute for demo purposes - this means we need a gain node
    const gain = new GainNode(audioCtx);
    const analyser = new AnalyserNode(audioCtx, {
      fftSize: 1024,
      smoothingTimeConstant: 0.8,
    });
    osc.connect(gain).connect(analyser).connect(audioCtx.destination);
    
    typeSelect.addEventListener("change", () => {
      osc.type = typeSelect.value;
    });
    
    frequencyControl.addEventListener("input", () => {
      osc.frequency.value = frequencyControl.valueAsNumber;
    });
    
    playButton.addEventListener("click", () => {
      if (audioCtx.state === "suspended") {
        audioCtx.resume();
      }
    
      if (playButton.dataset.playing === "init") {
        osc.start(audioCtx.currentTime);
        playButton.dataset.playing = "true";
        playButton.innerText = "Pause";
      } else if (playButton.dataset.playing === "false") {
        gain.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.2);
        playButton.dataset.playing = "true";
        playButton.innerText = "Pause";
      } else if (playButton.dataset.playing === "true") {
        gain.gain.linearRampToValueAtTime(0.0001, audioCtx.currentTime + 0.2);
        playButton.dataset.playing = "false";
        playButton.innerText = "Play";
      }
    });
    
As for the second part, we draw the waveform on a canvas using the `AnalyserNode` we created above.
    
    const dpr = window.devicePixelRatio;
    const w = 500 * dpr;
    const h = 300 * dpr;
    const canvasEl = document.getElementById("wave-graph");
    canvasEl.width = w;
    canvasEl.height = h;
    const canvasCtx = canvasEl.getContext("2d");
    
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    analyser.getByteTimeDomainData(dataArray);
    
    // draw an oscilloscope of the current oscillator
    function draw() {
      analyser.getByteTimeDomainData(dataArray);
    
      canvasCtx.fillStyle = "white";
      canvasCtx.fillRect(0, 0, w, h);
    
      canvasCtx.lineWidth = 4.0;
      canvasCtx.strokeStyle = "black";
      canvasCtx.beginPath();
    
      const sliceWidth = (w * 1.0) / bufferLength;
      let x = 0;
    
      for (let i = 0; i < bufferLength; i++) {
        const v = dataArray[i] / 128.0;
        const y = (v * h) / 2;
        if (i === 0) {
          canvasCtx.moveTo(x, y);
        } else {
          canvasCtx.lineTo(x, y);
        }
        x += sliceWidth;
      }
    
      canvasCtx.lineTo(w, h / 2);
      canvasCtx.stroke();
    
      requestAnimationFrame(draw);
    }
    
    draw();
    
Warning: This example makes a noise!
  * Using the Web Audio API


# StylePropertyMap
The `StylePropertyMap` interface of the CSS Typed Object Model API provides a representation of a CSS declaration block that is an alternative to `CSSStyleDeclaration`.
StylePropertyMapReadOnly  StylePropertyMap 
## Instance properties
Inherits properties from its parent, `StylePropertyMapReadOnly`.
## Instance methods
Inherits methods from its parent, `StylePropertyMapReadOnly`.
`StylePropertyMap.append()`
    
Adds a new CSS declaration to the `StylePropertyMap` with the given property and value.
`StylePropertyMap.clear()`
    
Removes all declarations in the `StylePropertyMap`.
`StylePropertyMap.delete()`
    
Removes the CSS declaration with the given property.
`StylePropertyMap.set()`
    
Changes the CSS declaration with the given property.
# InterventionReportBody
Note: This feature is available in Web Workers.
The `InterventionReportBody` interface of the Reporting API represents the body of an intervention report.
An intervention report is generated when usage of a feature in a web document has been blocked by the browser for reasons such as security, performance, or user annoyance. So for example, a script was been stopped because it was significantly slowing down the browser, or the browser's autoplay policy blocked audio from playing without a user gesture to trigger it.
A deprecation report is generated when a deprecated feature (for example a deprecated API method) is used on a document being observed by a `ReportingObserver`. In addition to the support of this API, receiving useful intervention warnings relies on browser vendors adding these warnings for the relevant features.
## Constructor
An instance of `InterventionReportBody` is returned as the value of `Report.body` when `Report.Type` is `intervention`. The interface has no constructor.
## Instance properties
This interface also inherits properties from `ReportBody`.
`InterventionReportBody.id` Experimental Read only
    
A string representing the intervention that generated the report. This can be used to group reports.
`InterventionReportBody.message` Experimental Read only
    
A string containing a human-readable description of the intervention, including information such how the intervention could be avoided. This typically matches the message a browser will display in its DevTools console when an intervention is imposed, if one is available.
`InterventionReportBody.sourceFile` Experimental Read only
    
A string containing the path to the source file where the intervention occurred, if known, or `null` otherwise.
`InterventionReportBody.lineNumber` Experimental Read only
    
A string representing the line in the source file in which the intervention occurred, if known, or `null` otherwise.
`InterventionReportBody.columnNumber` Experimental Read only
    
A string representing the column in the source file in which the intervention occurred, if known, or `null` otherwise.
## Instance methods
This interface also inherits methods from `ReportBody`.
`InterventionReportBody.toJSON()` Experimental
    
A serializer which returns a JSON representation of the `InterventionReportBody` object.
## Examples
In this example we create a new `ReportingObserver` to observe intervention reports, then print details of each property of the first report to the console.
    
    const options = {
      types: ["intervention"],
      buffered: true,
    };
    
    const observer = new ReportingObserver((reports, observer) => {
      const firstReport = reports[0];
      console.log(firstReport.type); // intervention
      console.log(firstReport.body.id);
      console.log(firstReport.body.message);
      console.log(firstReport.body.sourceFile);
      console.log(firstReport.body.lineNumber);
      console.log(firstReport.body.columnNumber);
    }, options);
    
  * Reporting API
  * The Reporting API


# IDBKeyRange
Note: This feature is available in Web Workers.
The `IDBKeyRange` interface of the IndexedDB API represents a continuous interval over some data type that is used for keys. Records can be retrieved from `IDBObjectStore` and `IDBIndex` objects using keys or a range of keys. You can limit the range using lower and upper bounds. For example, you can iterate over all values of a key in the value range A–Z.
A key range can be a single value or a range with upper and lower bounds or endpoints. If the key range has both upper and lower bounds, then it is bounded; if it has no bounds, it is unbounded. A bounded key range can either be open (the endpoints are excluded) or closed (the endpoints are included). To retrieve all keys within a certain range, you can use the following code constructs:
Range Code  
All keys ≥ x  `IDBKeyRange.lowerBound(x)`  
All keys > x  `IDBKeyRange.lowerBound(x, true)`  
All keys ≤ y  `IDBKeyRange.upperBound(y)`  
All keys < y  `IDBKeyRange.upperBound(y, true)`  
All keys ≥ x && ≤ y  `IDBKeyRange.bound(x, y)`  
All keys > x &&< y  `IDBKeyRange.bound(x, y, true, true)`  
All keys > x && ≤ y  `IDBKeyRange.bound(x, y, true, false)`  
All keys ≥ x &&< y  `IDBKeyRange.bound(x, y, false, true)`  
The key = z  `IDBKeyRange.only(z)`  
A key is in a key range if the following conditions are true:
  * The lower value of the key range is one of the following:
    * `undefined`
    * Less than key value
    * Equal to key value if `lowerOpen` is `false`.
  * The upper value of the key range is one of the following:
    * `undefined`
    * Greater than key value
    * Equal to key value if `upperOpen` is `false`.


## Instance properties
`IDBKeyRange.lower` Read only
    
Lower bound of the key range.
`IDBKeyRange.upper` Read only
    
Upper bound of the key range.
`IDBKeyRange.lowerOpen` Read only
    
Returns false if the lower-bound value is included in the key range.
`IDBKeyRange.upperOpen` Read only
    
Returns false if the upper-bound value is included in the key range.
## Static methods
`IDBKeyRange.bound()`
    
Creates a new key range with upper and lower bounds.
`IDBKeyRange.only()`
    
Creates a new key range containing a single value.
`IDBKeyRange.lowerBound()`
    
Creates a new key range with only a lower bound.
`IDBKeyRange.upperBound()`
    
Creates a new upper-bound key range.
## Instance methods
`IDBKeyRange.includes()`
    
Returns a boolean indicating whether a specified key is inside the key range.
## Examples
The following example illustrates how you'd use a key range. Here we declare a `keyRangeValue` as a range between values of `"A"` and `"F"`. We open a transaction (using `IDBTransaction`) and an object store, and open a cursor with `IDBObjectStore.openCursor`, declaring `keyRangeValue` as its optional key range value. This means that the cursor will only retrieve records with keys inside that range. This range includes the values `"A"` and `"F"`, as we haven't declared that they should be open bounds. If we used `IDBKeyRange.bound("A", "F", true, true);`, then the range would not include `"A"` and `"F"`, only the values between them.
Note: For a more complete example allowing you to experiment with key range, have a look at our IDBKeyRange-example repo (view the example live too.)
    
    function displayData() {
      const keyRangeValue = IDBKeyRange.bound("A", "F");
    
      const transaction = db.transaction(["fThings"], "readonly");
      const objectStore = transaction.objectStore("fThings");
    
      objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
          const listItem = document.createElement("li");
          listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
          list.appendChild(listItem);
    
          cursor.continue();
        } else {
          console.log("Entries all displayed.");
        }
      };
    }
    
  * Using IndexedDB
  * Starting transactions: `IDBDatabase`
  * Using transactions: `IDBTransaction`
  * Retrieving and making changes to your data: `IDBObjectStore`
  * Using cursors: `IDBCursor`
  * Reference example: To-do Notifications (View the example live).


# RelativeOrientationSensor
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `RelativeOrientationSensor` interface of the Sensor APIs describes the device's physical orientation without regard to the Earth's reference coordinate system.
To use this sensor, the user must grant permission to the `'accelerometer'`, and `'gyroscope'` device sensors through the Permissions API. In addition, this feature may be blocked by a Permissions Policy set on your server.
EventTarget  Sensor  OrientationSensor  RelativeOrientationSensor 
## Constructor
`RelativeOrientationSensor()`
    
Creates a new `RelativeOrientationSensor` object.
## Instance properties
No specific properties; inherits properties from its ancestors `OrientationSensor` and `Sensor`.
## Instance methods
No specific methods; inherits methods from its ancestors `OrientationSensor` and `Sensor`.
## Events
No specific events; inherits events from its ancestor, `Sensor`.
## Examples
>
### Basic Example
The following example, which is loosely based on Intel's Orientation Phone demo, instantiates an `RelativeOrientationSensor` with a frequency of 60 times a second.
Note: The Intel demo this is based on uses the `AbsoluteOrientationSensor`. On each reading it uses `OrientationSensor.quaternion` to rotate a visual model of a phone.
    
    const options = { frequency: 60, referenceFrame: "device" };
    const sensor = new RelativeOrientationSensor(options);
    
    sensor.addEventListener("reading", () => {
      // model is a Three.js object instantiated elsewhere.
      model.quaternion.fromArray(sensor.quaternion).inverse();
    });
    sensor.addEventListener("error", (error) => {
      if (event.error.name === "NotReadableError") {
        console.log("Sensor is not available.");
      }
    });
    sensor.start();
    
### Permissions Example
Using orientation sensors requires requesting permissions for multiple device sensors. Because the `Permissions` interface uses promises, a good way to request permissions is to use `Promise.all`.
    
    const sensor = new RelativeOrientationSensor();
    Promise.all([
      navigator.permissions.query({ name: "accelerometer" }),
      navigator.permissions.query({ name: "gyroscope" }),
    ]).then((results) => {
      if (results.every((result) => result.state === "granted")) {
        sensor.start();
        // …
      } else {
        console.log("No permissions to use RelativeOrientationSensor.");
      }
    });
    
# SVGFEDiffuseLightingElement
The `SVGFEDiffuseLightingElement` interface corresponds to the `<feDiffuseLighting>` element.
EventTarget  Node  Element  SVGElement  SVGFEDiffuseLightingElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEDiffuseLightingElement.diffuseConstant` Read only
    
An `SVGAnimatedNumber` corresponding to the `diffuseConstant` attribute of the given element.
`SVGFEDiffuseLightingElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEDiffuseLightingElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFEDiffuseLightingElement.kernelUnitLengthX` Read only
    
An `SVGAnimatedNumber` corresponding to the X component of the `kernelUnitLength` attribute of the given element.
`SVGFEDiffuseLightingElement.kernelUnitLengthY` Read only
    
An `SVGAnimatedNumber` corresponding to the Y component of the `kernelUnitLength` attribute of the given element.
`SVGFEDiffuseLightingElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEDiffuseLightingElement.surfaceScale` Read only
    
An `SVGAnimatedNumber` corresponding to the `surfaceScale` attribute of the given element.
`SVGFEDiffuseLightingElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEDiffuseLightingElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEDiffuseLightingElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
  * `<feDiffuseLighting>`


# CSSPerspective
The `CSSPerspective` interface of the CSS Typed Object Model API represents the perspective() value of the individual `transform` property in CSS. It inherits properties and methods from its parent `CSSTransformValue`.
CSSTransformComponent  CSSPerspective 
## Constructor
`CSSPerspective()`
    
Creates a new `CSSPerspective` object.
## Instance properties
`length`
    
Returns or sets the distance from z=0.
## Examples
To do
# XPathEvaluator
The `XPathEvaluator` interface allows to compile and evaluate XPath expressions.
## Constructor
`XPathEvaluator()`
    
Creates a new `XPathEvaluator` object.
## Instance methods
`XPathEvaluator.createExpression()`
    
Creates a parsed XPath expression with resolved namespaces.
`XPathEvaluator.createNSResolver()` Deprecated
    
Returns the input as-is.
`XPathEvaluator.evaluate()`
    
Evaluates an XPath expression string and returns a result of the specified type if possible.
## Example
>
### Count the number of `<div>` elements
The following example shows the use of the `XPathEvaluator` interface.
#### HTML
    
    <div>XPath example</div>
    <div>Number of &lt;div&gt; elements: <output></output></div>
    
#### JavaScript
    
    const xpath = "//div";
    const evaluator = new XPathEvaluator();
    const expression = evaluator.createExpression(xpath);
    const result = expression.evaluate(
      document,
      XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
    );
    document.querySelector("output").textContent = result.snapshotLength;
    
#### Result
  * `document.createExpression()`
  * `XPathExpression`


# HTMLPreElement
The `HTMLPreElement` interface exposes specific properties and methods (beyond those of the `HTMLElement` interface it also has available to it by inheritance) for manipulating a block of preformatted text (`<pre>`).
EventTarget  Node  Element  HTMLElement  HTMLPreElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLPreElement.width` Deprecated
    
A `long` value reflecting the obsolete `width` attribute, containing a fixed-size length for the `<pre>` element.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<pre>`


# WEBGL_draw_buffers extension
The `WEBGL_draw_buffers` extension is part of the WebGL API and enables a fragment shader to write to several textures, which is useful for deferred shading, for example.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default. In WebGL 2, the constants are available without the "WEBGL" suffix and the new GLSL built-ins require GLSL `#version 300 es`.
## Constants
This extension exposes new constants, which can be used in the `gl.framebufferRenderbuffer()`, `gl.framebufferTexture2D()`, `gl.getFramebufferAttachmentParameter()` `ext.drawBuffersWEBGL()`, and `gl.getParameter()` methods.
`ext.COLOR_ATTACHMENT0_WEBGL`, `ext.COLOR_ATTACHMENT1_WEBGL`, `ext.COLOR_ATTACHMENT2_WEBGL`, `ext.COLOR_ATTACHMENT3_WEBGL`, `ext.COLOR_ATTACHMENT4_WEBGL`, `ext.COLOR_ATTACHMENT5_WEBGL`, `ext.COLOR_ATTACHMENT6_WEBGL`, `ext.COLOR_ATTACHMENT7_WEBGL`, `ext.COLOR_ATTACHMENT8_WEBGL`, `ext.COLOR_ATTACHMENT9_WEBGL`, `ext.COLOR_ATTACHMENT10_WEBGL`, `ext.COLOR_ATTACHMENT11_WEBGL`, `ext.COLOR_ATTACHMENT12_WEBGL`, `ext.COLOR_ATTACHMENT13_WEBGL`, `ext.COLOR_ATTACHMENT14_WEBGL`, `ext.COLOR_ATTACHMENT15_WEBGL`
    
A `GLenum` specifying a color buffer.
`ext.DRAW_BUFFER0_WEBGL`, `ext.DRAW_BUFFER1_WEBGL`, `ext.DRAW_BUFFER2_WEBGL`, `ext.DRAW_BUFFER3_WEBGL`, `ext.DRAW_BUFFER4_WEBGL`, `ext.DRAW_BUFFER5_WEBGL`, `ext.DRAW_BUFFER6_WEBGL`, `ext.DRAW_BUFFER7_WEBGL`, `ext.DRAW_BUFFER8_WEBGL ext.DRAW_BUFFER9_WEBGL`, `ext.DRAW_BUFFER10_WEBGL`, `ext.DRAW_BUFFER11_WEBGL`, `ext.DRAW_BUFFER12_WEBGL`, `ext.DRAW_BUFFER13_WEBGL`, `ext.DRAW_BUFFER14_WEBGL`, `ext.DRAW_BUFFER15_WEBGL`
    
A `GLenum` returning a draw buffer.
`ext.MAX_COLOR_ATTACHMENTS_WEBGL`
    
A `GLint` indicating the maximum number of framebuffer color attachment points.
`ext.MAX_DRAW_BUFFERS_WEBGL`
    
A `GLint` indicating the maximum number of draw buffers.
## Instance methods
This extension exposes one new method.
`ext.drawBuffersWEBGL()`
    
Defines the draw buffers to which all fragment colors are written. (When using `WebGL2`, this method is available as `gl.drawBuffers()` by default).
## Examples
Enabling the extension:
    
    const ext = gl.getExtension("WEBGL_draw_buffers");
    
Binding multiple textures (to a `tx[]` array) to different framebuffer color attachments:
    
    const fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
    gl.framebufferTexture2D(
      gl.FRAMEBUFFER,
      ext.COLOR_ATTACHMENT0_WEBGL,
      gl.TEXTURE_2D,
      tx[0],
      0,
    );
    gl.framebufferTexture2D(
      gl.FRAMEBUFFER,
      ext.COLOR_ATTACHMENT1_WEBGL,
      gl.TEXTURE_2D,
      tx[1],
      0,
    );
    gl.framebufferTexture2D(
      gl.FRAMEBUFFER,
      ext.COLOR_ATTACHMENT2_WEBGL,
      gl.TEXTURE_2D,
      tx[2],
      0,
    );
    gl.framebufferTexture2D(
      gl.FRAMEBUFFER,
      ext.COLOR_ATTACHMENT3_WEBGL,
      gl.TEXTURE_2D,
      tx[3],
      0,
    );
    
Mapping the color attachments to draw buffer slots that the fragment shader will write to using `gl_FragData`:
    
    ext.drawBuffersWEBGL([
      ext.COLOR_ATTACHMENT0_WEBGL, // gl_FragData[0]
      ext.COLOR_ATTACHMENT1_WEBGL, // gl_FragData[1]
      ext.COLOR_ATTACHMENT2_WEBGL, // gl_FragData[2]
      ext.COLOR_ATTACHMENT3_WEBGL, // gl_FragData[3]
    ]);
    
Shader code that writes to multiple textures:
    
    <script type="x-shader/x-fragment">
      #extension GL_EXT_draw_buffers : require
    
      precision highp float;
    
      void main(void) {
        gl_FragData[0] = vec4(0.25);
        gl_FragData[1] = vec4(0.5);
        gl_FragData[2] = vec4(0.75);
        gl_FragData[3] = vec4(1.0);
      }
    </script>
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGL2RenderingContext.drawBuffers()`
  * WebGL deferred shading - Mozilla Hacks blog


# GPUSupportedFeatures
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUSupportedFeatures` interface of the WebGPU API is a `Set`-like object that describes additional functionality supported by a `GPUAdapter`.
The `GPUSupportedFeatures` object for the current adapter is accessed via the `GPUAdapter.features` property — use this to test what features your current setup supports. To create a `GPUDevice` with a specific feature enabled, you need to specify it in the `requiredFeatures` array of the `GPUAdapter.requestDevice()` descriptor.
You should note that not all features will be available to WebGPU in all browsers that support it, even if the features are supported by the underlying hardware. This could be due to constraints in the underlying system, browser, or adapter. For example:
  * The underlying system might not be able to guarantee exposure of a feature in a way that is compatible with a certain browser.
  * The browser vendor might not have found a secure way to implement support for that feature, or might just not have gotten round to it yet.


If you are hoping to take advantage of a specific additional feature in a WebGPU app, thorough testing is advised.
## Available features
The following additional features are defined in WebGPU. Bear in mind that the exact set of features available will vary across implementations and physical devices, and will change over time.
Feature name Description  
`bgra8unorm-storage` When enabled, allows `STORAGE_BINDING` `usage` of `bgra8unorm`-`format` `GPUTexture`s.  
`clip-distances` When enabled, allows the use of `clip_distances` in WGSL.  
`core-features-and-limits` When enabled, signifies that the `GPUAdapter` / `GPUDevice` is able to use all core WebGPU features and limits, which allows applications to support devices with the Direct 3D 12, Metal, and Vulkan platform graphics APIs (note that Safari only supports Metal). This is also referred to as "core" WebGPU. Currently, all adapters have "core" WebGPU available, and it is enabled automatically on all devices even if not requested. This feature will enable adapters and devices to differentiate between "core" WebGPU and "compatibility mode", which will provide support for older graphics APIs (such as Direct 3D 11 and OpenGL ES) at the expense of performance and feature set.  
`depth-clip-control` Allows depth-clipping to be disabled. If `depth-clip-control` is enabled, the `unclippedDepth` property is available on the `primitive` object included as part of the `createRenderPipeline()` or `createRenderPipelineAsync()` descriptor when creating a `GPURenderPipeline`. `primitive` describes how a pipeline constructs and rasterizes primitives from its vertex inputs. Set `unclipped-depth` to `true` to disable depth-clipping.  
`depth32float-stencil8` Allows creation of textures with the format `depth32float-stencil8`. If `depth32float-stencil8` is enabled, the `depth32float-stencil8` value can be used for the `format` property of the `createTexture()` descriptor when creating a `GPUTexture`.  
`dual-source-blending` When enabled, allows the use of `dual_source_blending` in WGSL, which uses both pixel shader outputs (`@blend_src(0)` and `@blend_src(1)`) as inputs to a blending operation with the single color attachment at `@location(0)`. Over in WebGPU, `dual-source-blending` enables the following blend factor operations (specified in the `dstFactor` and `srcFactor` properties of `createRenderPipeline()` and `createRenderPipelineAsync()` descriptors): `src1`, `one-minus-src1`, `src1-alpha`, and `one-minus-src1-alpha`.  
`float32-blendable` When enabled, allows blending of `r32float`-, `rg32float`-, and `rgba32float`-`format` `GPUTexture`s.  
`float32-filterable` When enabled, allows filtering of `r32float`-, `rg32float`-, and `rgba32float`-`format` `GPUTexture`s.  
`indirect-first-instance` When enabled, allows the use of non-zero `firstInstance` values in the `indirectBuffer` property of the `drawIndirect()` and `drawIndexedIndirect()` methods available on `GPURenderPassEncoder` and `GPURenderBundleEncoder` instances.  
`rg11b10ufloat-renderable` When enabled, allows `RENDER_ATTACHMENT` `usage` of `rg11b10ufloat`-`format` `GPUTexture`s, as well as their blending and multisampling.  
`shader-f16` When enabled, allows the use of the half-precision floating-point type `f16` in WGSL.  
`subgroups` When enabled, allows the use of subgroups in WGSL. Subgroups enable SIMD-level parallelism, allowing threads in a workgroup to communicate and execute collective math operations such as calculating a sum of numbers, and offering an efficient method for cross-thread data sharing. Note that the `subgroupMinSize` and `subgroupMaxSize` properties can be useful to check if, for example, you have a hardcoded algorithm that requires a subgroup of a certain size. You can use f16 values with subgroups when you request a GPUDevice with both the `shader-f16` and `subgroups` features.  
`texture-compression-bc` Allows creation of two-dimensional BC compressed textures. If `texture-compression-bc` is enabled, the following values can be used for the `format` property of the `createTexture()` descriptor when creating a `GPUTexture`: `bc1-rgba-unorm`, `bc1-rgba-unorm-srgb`, `bc2-rgba-unorm`, `bc2-rgba-unorm-srgb`, `bc3-rgba-unorm`, `bc3-rgba-unorm-srgb`, `bc4-r-unorm`, `bc4-r-snorm`, `bc5-rg-unorm`, `bc5-rg-snorm`, `bc6h-rgb-ufloat`, `bc6h-rgb-float`, `bc7-rgba-unorm`, and `bc7-rgba-unorm-srgb`.  
`texture-compression-bc-sliced-3d` Allows creation of three-dimensional BC compressed textures. If `texture-compression-bc-sliced-3d` is enabled, `texture-compression-bc` must also be enabled, as it enables the BC texture formats to be used (see `texture-compression-bc`, above) in the first two dimensions. `texture-compression-bc-sliced-3d` enables those same textures to be used in the third dimension. Adapters that support `texture-compression-bc` always support `texture-compression-bc-sliced-3d`. Note that this feature is not currently supported in any browser.   
`texture-compression-astc` Allows creation of two-dimensional ASTC compressed textures. If `texture-compression-astc` is enabled, the following values can be used for the `format` property of the `createTexture()` descriptor when creating a `GPUTexture`: `astc-4x4-unorm`, `astc-4x4-unorm-srgb`, `astc-5x4-unorm`, `astc-5x4-unorm-srgb`, `astc-5x5-unorm`, `astc-5x5-unorm-srgb`, `astc-6x5-unorm`, `astc-6x5-unorm-srgb`, `astc-6x6-unorm`, `astc-6x6-unorm-srgb`, `astc-8x5-unorm`, `astc-8x5-unorm-srgb`, `astc-8x6-unorm`, `astc-8x6-unorm-srgb`, `astc-8x8-unorm`, `astc-8x8-unorm-srgb`, `astc-10x5-unorm`, `astc-10x5-unorm-srgb`, `astc-10x6-unorm`, `astc-10x6-unorm-srgb`, `astc-10x8-unorm`, `astc-10x8-unorm-srgb`, `astc-10x10-unorm`, `astc-10x10-unorm-srgb`, `astc-12x10-unorm`, `astc-12x10-unorm-srgb`, and `astc-12x12-unorm``astc-12x12-unorm-srgb`.  
`texture-compression-astc-sliced-3d` Allows creation of three-dimensional ASTC compressed textures. If `texture-compression-astc-sliced-3d` is enabled, `texture-compression-astc` must also be enabled, as it enables the ASTC texture formats to be used (see `texture-compression-astc`, above) in the first two dimensions. `texture-compression-astc-sliced-3d` enables those same textures to be used in the third dimension. Adapters that support `texture-compression-astc` do not always support `texture-compression-astc-sliced-3d`. Note that this feature is not currently supported in any browser.   
`texture-compression-etc2` Allows creation of two-dimensional ETC2 compressed textures. If `texture-compression-etc2` is enabled, the following values can be used for the `format` property of the `createTexture()` descriptor when creating a `GPUTexture`: `etc2-rgb8unorm`, `etc2-rgb8unorm-srgb`, `etc2-rgb8a1unorm`, `etc2-rgb8a1unorm-srgb`, `etc2-rgba8unorm`, `etc2-rgba8unorm-srgb`, `eac-r11unorm`, `eac-r11snorm`, `eac-rg11unorm`, and `eac-rg11snorm`.  
`timestamp-query` Allows timestamp queries to be run, which measure the time taken to run compute and render passes. If `timestamp-query` is enabled, the `timestamp` value can be set for the `type` property of the `createQuerySet()` descriptor when creating a `GPUQuerySet`. In addition, the `timestampWrites` property can be set on the `beginComputePass()` and `beginRenderPass()` descriptor when creating a `GPUComputePassEncoder` and `GPURenderPassEncoder`, respectively. `GPUQuerySet` objects are referenced within the objects included in the `timestampWrites` property, to specify where timestamps should be written to.  
## Instance properties
The following properties are available to all read-only `Set`-like objects (the links below are to the `Set` global object reference page).
`size`
    
Returns the number of values in the set.
## Instance methods
The following methods are available to all read-only `Set`-like objects (the below links are to the `Set` global object reference page).
`has()`
    
Returns a boolean asserting whether an element is present with the given value in the set or not.
`values()`
    
Returns a new iterator object that yields the values for each element in the set in insertion order.
`keys()`
    
An alias for `values()`.
`entries()`
    
Returns a new iterator object that contains `[value, value]` for each element in the set, in insertion order.
`forEach()`
    
Calls a provided callback function once for each value present in the set, in insertion order.
## Examples
    
    async function init() {
      if (!navigator.gpu) {
        throw Error("WebGPU not supported.");
      }
    
      const adapter = await navigator.gpu.requestAdapter();
      if (!adapter) {
        throw Error("Couldn't request WebGPU adapter.");
      }
    
      const adapterFeatures = adapter.features;
    
      // Return the size of the set
      console.log(adapterFeatures.size);
    
      // Check whether a feature is supported by the adapter
      console.log(adapterFeatures.has("texture-compression-astc"));
    
      // Iterate through all the set values using values()
      const valueIterator = adapterFeatures.values();
      for (const value of valueIterator) {
        console.log(value);
      }
    
      // Iterate through all the set values using keys()
      const keyIterator = adapterFeatures.keys();
      for (const value of keyIterator) {
        console.log(value);
      }
    
      // Iterate through all the set values using entries()
      const entryIterator = adapterFeatures.entries();
      for (const entry of entryIterator) {
        console.log(entry[0]);
      }
    
      // Iterate through all the set values using forEach()
      adapterFeatures.forEach((value) => {
        console.log(value);
      });
    
      // …
    }
    
  * The WebGPU API
  * The specification Feature Index


# EventCounts
The `EventCounts` interface of the Performance API provides the number of events that have been dispatched for each event type.
An `EventCounts` instance is a read-only `Map`-like object, in which each key is the name string for an event type, and the corresponding value is an integer indicating the number of events that have been dispatched for that event type.
## Constructor
This interface has no constructor. You typically get an instance of this object using the `performance.eventCounts` property.
## Instance properties
`size`
    
See `Map.prototype.size` for details.
## Instance methods
`entries()`
    
See `Map.prototype.entries()` for details.
`forEach()`
    
See `Map.prototype.forEach()` for details.
`get()`
    
See `Map.prototype.get()` for details.
`has()`
    
See `Map.prototype.has()` for details.
`keys()`
    
See `Map.prototype.keys()` for details.
`values()`
    
See `Map.prototype.values()` for details.
## Examples
>
### Working with EventCount maps
Below are a few examples to get information from an `EventCounts` map. Note that the map is read-only and the `clear()`, `delete()`, and `set()` methods aren't available.
    
    for (entry of performance.eventCounts.entries()) {
      const type = entry[0];
      const count = entry[1];
    }
    
    const clickCount = performance.eventCounts.get("click");
    
    const isExposed = performance.eventCounts.has("mousemove");
    const exposedEventsCount = performance.eventCounts.size;
    const exposedEventsList = [...performance.eventCounts.keys()];
    
  * `performance.eventCounts`
  * `PerformanceEventTiming`
  * `Map`


# HTMLOutputElement
The `HTMLOutputElement` interface provides properties and methods (beyond those inherited from `HTMLElement`) for manipulating the layout and presentation of `<output>` elements.
EventTarget  Node  Element  HTMLElement  HTMLOutputElement 
## Instance properties
This interface also inherits properties from its parent, `HTMLElement`.
`HTMLOutputElement.defaultValue`
    
A string representing the default value of the element, initially the empty string.
`HTMLOutputElement.form` Read only
    
An `HTMLFormElement` indicating the form associated with the control, reflecting the `form` HTML attribute if it is defined.
`HTMLOutputElement.htmlFor` Read only
    
A `DOMTokenList` reflecting the `for` HTML attribute, containing a list of IDs of other elements in the same document that contribute to (or otherwise affect) the calculated `value`.
`HTMLOutputElement.labels` Read only
    
A `NodeList` of `<label>` elements associated with the element.
`HTMLOutputElement.name`
    
A string reflecting the `name` HTML attribute, containing the name for the control that is submitted with form data.
`HTMLOutputElement.type` Read only
    
The string `"output"`.
`HTMLOutputElement.validationMessage` Read only
    
A string representing a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation (`willValidate` is `false`), or it satisfies its constraints.
`HTMLOutputElement.validity` Read only
    
A `ValidityState` representing the validity states that this element is in.
`HTMLOutputElement.value`
    
A string representing the value of the contents of the elements. Behaves like the `Node.textContent` property.
`HTMLOutputElement.willValidate` Read only
    
Returns a boolean value that indicates whether the element is a candidate for constraint validation. Always `false` for `HTMLOutputElement` objects.
## Instance methods
This interface also inherits methods from its parent, `HTMLElement`.
`HTMLOutputElement.checkValidity()`
    
Checks the validity of the element and returns a boolean value holding the check result.
`HTMLOutputElement.reportValidity()`
    
This method reports the problems with the constraints on the element, if any, to the user. If there are problems, fires an `invalid` event at the element, and returns `false`; if there are no problems, it returns `true`.
When the problem is reported, the user agent may focus the element and change the scrolling position of the document or perform some other action that brings the element to the user's attention. User agents may report more than one constraint violation if this element suffers from multiple problems at once. If the element is not rendered, then the user agent may report the error for the running script instead of notifying the user.
`HTMLOutputElement.setCustomValidity()`
    
Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
## Modes
This element behaves in one of two modes: default mode and value mode.
### Default mode
Initially, the element is in default mode, and so the contents of the element represent both the value of the element and its default value.
If the element is in default mode when the descendants of the element are changed in any way, the `defaultValue` property is set to the value of the `textContent` property.
Resetting the form puts the element into default mode, and sets the `textContent` property to the value of the `defaultValue` property.
### Value mode
The element goes into value mode when the contents of the `value` property are set. The `value` property otherwise behaves like the `textContent` property. When the element is in value mode, the default value is accessible only through the `defaultValue` property.
  * The HTML element implementing this interface: `<output>`.


# CSS Properties and Values API
The CSS Properties and Values API — part of the CSS Houdini umbrella of APIs — allows developers to explicitly define their CSS custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
## Interfaces
`CSS.registerProperty`
    
Defines how a browser should parse CSS custom properties. Access this interface through `CSS.registerProperty` in JavaScript.
`@property`
    
Defines how a browser should parse CSS custom properties. Access this interface through `@property` at-rule in CSS.
## Examples
The following will register a custom property named `--my-color` using `CSS.registerProperty` in JavaScript. `--my-color` will use the CSS color syntax, it will have a default value of `#c0ffee`, and it will not inherit its value:
    
    window.CSS.registerProperty({
      name: "--my-color",
      syntax: "<color>",
      inherits: false,
      initialValue: "#c0ffee",
    });
    
The same registration can take place in CSS using the `@property` at-rule:
    
    @property --my-color {
      syntax: "<color>";
      inherits: false;
      initial-value: #c0ffee;
    }
    
>
### api.CSSPropertyRule
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`CSS_Properties_and_Values_API` 85 85 128 71 16.4 85 128 60 16.4 14.0 85 16.4  
`inherits` 85 85 128 71 16.4 85 128 60 16.4 14.0 85 16.4  
`initialValue` 85 85 128 71 16.4 85 128 60 16.4 14.0 85 16.4  
`name` 85 85 128 71 16.4 85 128 60 16.4 14.0 85 16.4  
`syntax` 85 85 128 71 16.4 85 128 60 16.4 14.0 85 16.4  
### api.CSS.registerProperty_static
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`CSS_Properties_and_Values_API` 78 79 128 65 16.4 78 128 56 16.4 12.0 78 16.4  
  * Using the CSS properties and values API
  * CSS Painting API
  * CSS Typed Object Model
  * Houdini APIs


# SVGLineElement
The `SVGLineElement` interface provides access to the properties of `<line>` elements, as well as methods to manipulate them.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGGeometryElement  SVGLineElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGeometryElement`.
`SVGLineElement.x1` Read only
    
Returns an `SVGAnimatedLength` that corresponds to attribute `x1` on the given `<line>` element.
`SVGLineElement.y1` Read only
    
Returns an `SVGAnimatedLength` that corresponds to attribute `y1` on the given `<line>` element.
`SVGLineElement.x2` Read only
    
Returns an `SVGAnimatedLength` that corresponds to attribute `x2` on the given `<line>` element.
`SVGLineElement.y2` Read only
    
Returns an `SVGAnimatedLength` that corresponds to attribute `y2` on the given `<line>` element.
## Instance methods
Inherits methods from its parent interface, `SVGGeometryElement`.
  * `<line>` SVG Element


# HTML Sanitizer API
The HTML Sanitizer API allows developers to take strings of HTML and filter out unwanted elements, attributes, and other HTML entities when they are inserted into the DOM or a shadow DOM.
## Concepts and usage
Web applications often need to work with untrusted HTML on the client side, for example, as part of a client-side templating solution, when rendering user generated content, or if including data in a frame from another site.
Injecting untrusted HTML can make a site vulnerable to various types of attacks. In particular, cross-site scripting (XSS) attacks work by injecting untrusted HTML into the DOM that then executes JavaScript in the context of the current origin — allowing malicious code to run as though it was served from the site's origin. These attacks can be mitigated by removing unsafe HTML elements and attributes before they are injected into the DOM.
The HTML Sanitizer API provides a number of methods for removing unwanted HTML entities from HTML input before it is injected into the DOM. These come in XSS-safe versions that enforce removal of all unsafe elements and attributes, and potentially unsafe versions that give developers full control over the HTML entities that are allowed.
### Sanitization methods
The HTML Sanitizer API provides XSS-safe and XSS-unsafe methods for injecting HTML strings into an `Element` or a `ShadowRoot`, and for parsing HTML into a `Document`.
  * Safe methods: `Element.setHTML()`, `ShadowRoot.setHTML()`, and `Document.parseHTML()`.
  * Unsafe methods: `Element.setHTMLUnsafe()`, `ShadowRoot.setHTMLUnsafe()`, and `Document.parseHTMLUnsafe()`.


All the methods take the HTML to be injected and an optional sanitizer configuration as arguments. The configuration defines the HTML entities that will be filtered out of the input before it is injected. The `Element` methods are context aware, and will additionally drop any elements that the HTML specification does not allow in the target element.
The safe methods always remove XSS-unsafe elements and attributes. If no sanitizer is passed as a parameter they will use the default sanitizer configuration, which allows all elements and attributes except those that are known to be unsafe, such as `<script>` elements and `onclick` event handlers. If a custom sanitizer is used, it is implicitly updated to remove any elements and attributes that are not XSS-safe (note that the passed sanitizer is not modified, and might still allow unsafe entities if used with an unsafe method).
The safe methods should be used instead of `Element.innerHTML`, `Element.outerHTML`, or `ShadowRoot.innerHTML`, for injecting untrusted HTML content. For example, in most case you can use `Element.setHTML()` with the default sanitizer as a drop-in replacement for `Element.innerHTML`. The same methods can also be used for injecting trusted HTML strings that do not need to contain any XSS-unsafe elements.
The XSS-unsafe methods will use whatever sanitizer configuration is passed as an argument. If no sanitizer is passed, then all HTML elements and attributes allowed by the context will be injected. This is similar to using `Element.innerHTML` except that the method will parse shadow roots, drop elements that aren't appropriate in the context, and allow some other input that is not allowed when using the property.
The unsafe methods should only be used with untrusted HTML that needs to contain some XSS-unsafe elements or attributes. This is still unsafe, but allows you to reduce the risk by restricting unsafe entities to the minimal set. For example, if you wanted to inject unsafe HTML but for some reason you needed the input to include the `onblur` handler, you could more safely do so by amending the default sanitizer and using an unsafe method as shown:
    
    const sanitizer = Sanitizer(); // Default sanitizer
    sanitizer.allowAttribute("onblur"); // Allow onblur
    
    someElement.setHTMLUnsafe(untrustedString, { sanitizer });
    
### Sanitizer configuration
A sanitizer configuration defines what HTML entities will be allowed, replaced, or removed when the sanitizer is used, including elements, attributes, data-attributes, and comments.
There are two very closely related sanitizer configuration interfaces, either of which can be passed to all the sanitization methods.
  * `SanitizerConfig` is a dictionary object that defines arrays of elements or attributes that are allowed or disallowed when the configuration is used, properties that indicate whether comments and data attributes will be allowed or omitted, and so on.
  * `Sanitizer` is essentially a wrapper around a `SanitizerConfig` that provides methods to ergonomically and consistently add and remove entities from the various lists in configuration. For example, you can use a method to add an allowed attribute, and it will also remove the attribute from the disallowed array (if present). The interface also provides methods to return a copy of the underlying `SanitizerConfig` and also to update the sanitizer so that it is XSS-safe. It may provide normalizations of the sanitizer configuration used to construct it, making it easier to understand and reuse.


While you can use either interface in any of the sanitizing methods, `Sanitizer` is likely to be more efficient to share and reuse than `SanitizerConfig`.
#### Allow and remove configurations
You can build up a configuration in two ways: allow configurations and remove configurations.
In "allow configurations" you specify the elements and attributes you wish to allow (or replace with child elements): all other elements/attributes in the input will be dropped. For example, the following configuration allows only `<p>` and `<div>` elements, and `cite` and `onclick` attributes on any element. It will also replace `<b>` elements with their child nodes, effectively stripping the style their nested content.
    
    const sanitizer = Sanitizer({
      elements: ["p", "div"],
      replaceWithChildrenElements: ["b"],
      attributes: ["cite", "onclick"],
    });
    
When an allow configuration is used, it is easy to understand what elements will be allowed in the DOM when the HTML is parsed. They are useful when you know exactly what HTML entities you want to be able to inject in a particular context.
In "remove configurations" you specify the HTML elements and attributes that you want to remove: any other elements and attributes are permitted by the sanitizer (but may be blocked if you use a safe sanitizer method, or if the element is not allowed in the context). For example, the following sanitizer would remove the same elements that were allowed in the previous code:
    
    const sanitizer = Sanitizer({
      removeElements: ["p", "div", "b"],
      removeAttributes: ["cite", "onclick"],
    });
    
Remove configurations are useful when you want to use the default sanitizer settings, but perhaps restrict some additional entities.
Using both allow and remove configurations at the same time is discouraged, as it makes the configuration harder to understand and less efficient to parse. Note that a configuration with both allowed and removed entities can always be reduced to an allow configuration where any entities in the original remove list have been dropped.
If you pass a `SanitizerConfig` with both allow and remove configurations to the sanitizer methods they will throw a `TypeError`. It is possible to create a configuration with both allow and remove lists when using `Sanitizer`. The allow lists are parsed first, if they contain any items, and then the remove lists. The remove lists have little impact if there are any items in the allow list.
### Sanitization and Trusted Types
The Trusted Types API provides mechanisms to ensure that inputs are passed through a user-specified transformation function before being passed to an API that might execute that input. This transformation function is most commonly used to sanitize the input but it doesn't have to: the purpose of the API is primarily to make it easy for developers to audit sanitization code, not to define how or if sanitization is done.
The safe HTML sanitization methods don't need to work with trusted types. Because they always filter all XSS-unsafe entities before input HTML is injected, there is no need to sanitize the input string, or audit the methods.
However the unsafe HTML sanitization methods may inject untrusted HTML, depending on the sanitizer, and so will work with trusted types. The methods can take either a string or a `TrustedType` as input. If a sanitizer is also supplied, the transformation function will be run first, and then the sanitizer.
Note that the transformation function doesn't have to sanitize the input string in this case (although it can), because you can use the sanitizer API for that. What trusted types provide in this case is information about where potentially unsafe strings are injected, making it easier to locate them and check that the sanitizer is appropriately configured.
### Third party sanitization libraries
Prior to the Sanitizer API, developers typically filtered input strings using third-party libraries such as DOMPurify, perhaps called from transformation functions in trusted types.
It should not be necessary to still use these libraries when injecting untrusted HTML strings. The API is integrated with the browser, and is more aware of the parsing context and what code is allowed to execute than external parser libraries can be.
## Interfaces
`Sanitizer` Experimental
    
A reusable sanitizer configuration object that defines what elements and attributes should be allowed/removed when sanitizing untrusted strings of HTML. This is used in the methods that insert strings of HTML into the DOM or Document.
`SanitizerConfig`
    
A dictionary that defines a sanitizer configuration. This can be used in the same places as `Sanitizer` but is likely to be less efficient to use and reuse.
## Extensions to other interfaces
>
### XSS-safe methods
`Element.setHTML()`
    
Parse a string of HTML into a subtree of nodes, dropping any elements that are invalid in the context of the element. Then drop any elements and attributes that are not allowed by the sanitizer configuration, and any that are considered XSS-unsafe (even if allowed by the configuration). The subtree is then inserted into the DOM as a subtree of the element.
`ShadowRoot.setHTML()`
    
Parse a string of HTML into a subtree of nodes. Then drop any elements and attributes that are not allowed by the sanitizer configuration, and any that are considered XSS-unsafe (even if allowed by the configuration). The subtree is then inserted as a subtree of the `ShadowRoot`.
`Document.parseHTML()`
    
Parse a string of HTML into a subtree of nodes. Then drop any elements and attributes that are not allowed by the sanitizer configuration, and any that are considered XSS-unsafe (even if allowed by the configuration). The subtree is then set as the root of the `Document`.
### XSS-unsafe methods
`Element.setHTMLUnsafe()`
    
Parse a string of HTML into a subtree of nodes, dropping any elements that are invalid in the context of the element. Then drop any elements and attributes that are not allowed by the sanitizer: if no sanitizer is specified allow all elements. The subtree is then inserted into the DOM as a subtree of the element.
`ShadowRoot.setHTMLUnsafe()`
    
Parse a string of HTML into a subtree of nodes. Then drop any elements and attributes that are not allowed by the sanitizer: if no sanitizer is specified allow all elements. The subtree is then inserted into as a subtree of the `ShadowRoot`.
`Document.parseHTMLUnsafe()`
    
Parse a string of HTML into a subtree of nodes. Then drop any elements and attributes that are not allowed by the sanitizer: if no sanitizer is specified allow all elements. The subtree is then set as the root of the `Document`.
## Examples
The following examples show how to use the sanitizer API using the default sanitizer (at time of writing configuration operations are not yet supported).
### Using `Element.setHTML()` with the default sanitizer
In most cases calling `Element.setHTML()` with the default sanitizer can be used as a drop-in replacement for `Element.innerHTML`. The code below demonstrates how the method is used to sanitize the HTML input before it is injected into an element with id of `target`.
    
    const untrustedString = "abc <script>alert(1)<" + "/script> def"; // Untrusted HTML (perhaps from user input)
    const someTargetElement = document.getElementById("target");
    
    // someElement.innerHTML = untrustedString;
    someElement.setHTML(untrustedString);
    
    console.log(target.innerHTML); // abc def
    
The ``<script>`` element is not allowed by the default sanitizer, or by the `setHTML()` method, so the `alert()` is removed.
Note that using `Element.setHTMLUnsafe()` with the default sanitizer will sanitize the same HTML entities. The main difference is that if you use this method with Trusted Types it may still be audited:
    
    someElement.setHTMLUnsafe(untrustedString);
    
### Using an allow sanitizer configuration
This code shows how you might use `Element.setHTMLUnsafe()` with an allow sanitizer that allows only `<p>`, `<b>`, and `<div>` elements. All other elements in the input string would be removed.
    
    const sanitizer = new Sanitizer({ elements: ["p", "b", "div"] });
    someElement.setHTMLUnsafe(untrustedString, { sanitizer });
    
Note that in this case you should normally use `setHTML()`. You should only use `Element.setHTMLUnsafe()` if you need to allow XSS-unsafe elements or attributes.
# TransitionEvent
The `TransitionEvent` interface represents events providing information related to transitions.
Event  TransitionEvent 
## Constructor
`TransitionEvent()`
    
Creates a `TransitionEvent` event with the given parameters.
## Instance properties
Also inherits properties from its parent `Event`.
`TransitionEvent.propertyName` Read only
    
A string containing the name CSS property associated with the transition.
`TransitionEvent.elapsedTime` Read only
    
A `float` giving the amount of time the transition has been running, in seconds, when this event fired. This value is not affected by the `transition-delay` property.
`TransitionEvent.pseudoElement` Read only
    
A string, starting with `::`, containing the name of the pseudo-element the animation runs on. If the transition doesn't run on a pseudo-element but on the element, an empty string: `''`.
## Types of `TransitionEvent`
`transitioncancel`
    
An `Event` fired when a CSS transition has been cancelled.
`transitionend`
    
An `Event` fired when a CSS transition has finished playing.
`transitionrun`
    
An `Event` fired when a CSS transition is created (i.e., when it is added to a set of running transitions), though not necessarily started.
`transitionstart`
    
An `Event` fired when a CSS transition has started transitioning.
## Instance methods
Also inherits methods from its parent `Event`.
  * Using CSS transitions
  * CSS properties: `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`
  * CSS at-rules: `@starting-style`


# RsaPssParams
The `RsaPssParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.sign()` or `SubtleCrypto.verify()`, when using the RSA-PSS algorithm.
## Instance properties
`name`
    
A string. This should be set to `RSA-PSS`.
`saltLength`
    
A `long` integer representing the length of the random salt to use, in bytes.
RFC 3447 says that "Typical salt lengths" are either 0 or the length of the output of the digest algorithm that was selected when this key was generated. For example, if you use SHA-256 as the digest algorithm, this could be 32.
The maximum size of `saltLength` is given by:
    
    Math.ceil((keySizeInBits - 1) / 8) - digestSizeInBytes - 2;
    
So for a key length of 2048 bits and a digest output size of 32 bytes, the maximum size would be 222.
## Examples
See the examples for `SubtleCrypto.sign()` and `SubtleCrypto.verify()`.
Browsers that support the "RSA-PSS" algorithm for the `SubtleCrypto.sign()` and `SubtleCrypto.verify()` methods will support this type.
  * RFC 3447: RSASSA-PSS


# SVGComponentTransferFunctionElement
The `SVGComponentTransferFunctionElement` interface represents a base interface used by the component transfer function interfaces.
EventTarget  Node  Element  SVGElement  SVGComponentTransferFunctionElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGComponentTransferFunctionElement.type` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `type` attribute of the given element. It takes one of the `SVG_FECOMPONENTTRANSFER_TYPE_*` constants defined on this interface.
`SVGComponentTransferFunctionElement.tableValues` Read only
    
An `SVGAnimatedNumberList` corresponding to the `tableValues` attribute of the given element.
`SVGComponentTransferFunctionElement.slope` Read only
    
An `SVGAnimatedNumber` corresponding to the `slope` attribute of the given element.
`SVGComponentTransferFunctionElement.intercept` Read only
    
An `SVGAnimatedNumber` corresponding to the `intercept` attribute of the given element.
`SVGComponentTransferFunctionElement.amplitude` Read only
    
An `SVGAnimatedNumber` corresponding to the `amplitude` attribute of the given element.
`SVGComponentTransferFunctionElement.exponent` Read only
    
An `SVGAnimatedNumber` corresponding to the `exponent` attribute of the given element.
`SVGComponentTransferFunctionElement.offset` Read only
    
An `SVGAnimatedNumber` corresponding to the `offset` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
## Static properties
`SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY` (1)
    
Corresponds to the value `identity`.
`SVG_FECOMPONENTTRANSFER_TYPE_TABLE` (2)
    
Corresponds to the value `table`.
`SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE` (3)
    
Corresponds to the value `discrete`.
`SVG_FECOMPONENTTRANSFER_TYPE_LINEAR` (4)
    
Corresponds to the value `linear`.
`SVG_FECOMPONENTTRANSFER_TYPE_GAMMA` (5)
    
Corresponds to the value `gamma`.
  * `SVGFEFuncAElement`
  * `SVGFEFuncBElement`
  * `SVGFEFuncGElement`
  * `SVGFEFuncRElement`


# fetchLater() API
The `fetchLater()` provides an interface to request a deferred fetch that can be sent after a specified period of time, or when the page is closed or navigated away from.
## Concepts and usage
Developers often need to send (or beacon) data back to the server, particularly at the end of a user's visit to a page — for example, for analytics services. There are several ways to do this: from adding 1 pixel `<img>` elements to the page, to `XMLHttpRequest`, to the dedicated Beacon API, and the Fetch API itself.
The issue is that all of these methods suffer from reliability problems for end-of-visit beaconing. While the Beacon API and the `keepalive` property of the Fetch API will send data, even if the document is destroyed (to the best efforts that can be made in this scenario), this only solves part of the problem.
The other — more difficult — part to solve concerns deciding when to send the data, since there is not an ideal time in a page's lifecycle to make the JavaScript call to send out the beacon:
  * The `unload` and `beforeunload` events are unreliable, and outright ignored by several major browsers.
  * The `pagehide` and `visibilitychange` events are more reliable, but still have issues on mobile platforms.


This means developers looking to reliably send out data via a beacon need to do so more frequently than is ideal. For example, they may send a beacon on each change, even if the final value for the page has not yet been reached. This has costs in network usage, server processing, and merging or discarding outdated beacons on the server.
Alternatively, developers can choose to accept some level of missing data — either by:
  * Beaconing after a designated cut-off time and not collecting later data.
  * Beaconing at the end of the page lifecycle but accepting that sometimes this will not be reliable.


The `fetchLater()` API extends the Fetch API to allow setting fetch requests up in advance. These deferred fetches can be updated before they have been sent, allowing the payload to reflect the latest data to be beaconed.
The browser then sends the beacon when the tab is closed or navigated away from, or after a set time if specified. This avoids sending multiple beacons but still ensures a reliable beacon within reasonable expectations (i.e., excluding when the browser process shuts down unexpectedly during a crash).
Deferred fetches can also be aborted using an `AbortController` if they are no longer required, avoiding further unnecessary costs.
### Quotas
Deferred fetches are batched and sent once the tab is closed; at this point, there is no way for the user to abort them. To avoid situations where documents abuse this bandwidth to send unlimited amounts of data over the network, the overall quota for a top-level document is capped at 640KiB.
Callers of `fetchLater()` should be defensive and catch `QuotaExceededError` errors in almost all cases, especially if they embed third-party JavaScript.
Since this cap makes deferred fetch bandwidth a scarce resource, which needs to be shared between multiple reporting origins (for example, several RUM libraries) and subframes from multiple origins, the platform provides a reasonable default division of this quota. In addition, it provides `deferred-fetch` and `deferred-fetch-minimal` Permissions Policy directives to allow dividing it differently when desired.
See fetchLater() quotas for more details and examples.
## Interfaces
`Window.fetchLater()`
    
Used to queue a resource for sending at a later point.
`DeferredRequestInit`
    
Represents the set of options that can be used to configure a deferred fetch request.
`FetchLaterResult`
    
Represents the result of requesting a deferred fetch.
## HTTP headers
`deferred-fetch`
    
Controls top-level quota for the `fetchLater()` API.
`deferred-fetch-minimal`
    
Controls shared cross-origin subframe quota for the `fetchLater()` API.
  * `fetchLater()` quotas
  * Fetch API


# LinearAccelerationSensor
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `LinearAccelerationSensor` interface of the Sensor APIs provides on each reading the acceleration applied to the device along all three axes, but without the contribution of gravity.
To use this sensor, the user must grant permission to the `'accelerometer'` device sensor through the Permissions API. In addition, this feature may be blocked by a Permissions Policy set on your server.
EventTarget  Sensor  Accelerometer  LinearAccelerationSensor 
## Constructor
`LinearAccelerationSensor()`
    
Creates a new `LinearAccelerationSensor` object.
## Instance properties
Inherits properties from its ancestors, `Accelerometer`, `Sensor`, and `EventTarget`.
## Instance methods
`LinearAccelerationSensor` doesn't have own methods. However, it inherits methods from its parent interfaces, `Sensor` and `EventTarget`.
## Events
`LinearAccelerationSensor` doesn't have own events. However, it inherits events from its parent interface, `Sensor`.
## Example
Linear acceleration is typically read in the `reading` event callback. In the example below this occurs sixty times a second.
    
    let laSensor = new LinearAccelerationSensor({ frequency: 60 });
    
    laSensor.addEventListener("reading", (e) => {
      console.log(`Linear acceleration along the X-axis ${laSensor.x}`);
      console.log(`Linear acceleration along the Y-axis ${laSensor.y}`);
      console.log(`Linear acceleration along the Z-axis ${laSensor.z}`);
    });
    laSensor.start();
    
# VideoTrack
The `VideoTrack` interface represents a single video track from a `<video>` element.
The most common use for accessing a `VideoTrack` object is to toggle its `selected` property in order to make it the active video track for its `<video>` element.
## Instance properties
`selected`
    
A Boolean value which controls whether or not the video track is active. Only a single video track can be active at any given time, so setting this property to `true` for one track while another track is active will make that other track inactive.
`id` Read only
    
A string which uniquely identifies the track within the media. This ID can be used to locate a specific track within a video track list by calling `VideoTrackList.getTrackById()`. The ID can also be used as the fragment part of the URL if the media supports seeking by media fragment per the Media Fragments URI specification.
`kind` Read only
    
A string specifying the category into which the track falls. For example, the main video track would have a `kind` of `"main"`.
`label` Read only
    
A string providing a human-readable label for the track. For example, a track whose `kind` is `"sign"` might have a `label` of `"A sign-language interpretation"`. This string is empty if no label is provided.
`language` Read only
    
A string specifying the video track's primary language, or an empty string if unknown. The language is specified as a BCP 47 (RFC 5646) language code, such as `"en-US"` or `"pt-BR"`.
`sourceBuffer` Read only
    
The `SourceBuffer` that created the track. Returns null if the track was not created by a `SourceBuffer` or the `SourceBuffer` has been removed from the `MediaSource.sourceBuffers` attribute of its parent media source.
## Usage notes
To get a `VideoTrack` for a given media element, use the element's `videoTracks` property, which returns a `VideoTrackList` object from which you can get the individual tracks contained in the media:
    
    const el = document.querySelector("video");
    const tracks = el.videoTracks;
    
You can then access the media's individual tracks using either array syntax or functions such as `forEach()`.
This first example gets the first video track on the media:
    
    const firstTrack = tracks[0];
    
The next example scans through all of the media's video tracks, activating the first video track that is in the user's preferred language (taken from a variable `userLanguage`).
    
    for (const track of tracks) {
      if (track.language === userLanguage) {
        track.selected = true;
        break;
      }
    }
    
The `language` is in standard (RFC 5646) format. For US English, this would be `"en-US"`, for example.
# WebTransportBidirectionalStream
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `WebTransportBidirectionalStream` interface of the WebTransport API represents a bidirectional stream created by a server or a client that can be used for reliable transport. Provides access to a `WebTransportReceiveStream` for reading incoming data, and a `WebTransportSendStream` for writing outgoing data.
## Instance properties
`readable` Read only
    
Returns a `WebTransportReceiveStream` instance that can be used to read incoming data.
`writable` Read only
    
Returns a `WebTransportSendStream` instance that can be used to write outgoing data.
## Examples
>
### Bidirectional transmission initiated by the user agent
To open a bidirectional stream from a user agent, you use the `WebTransport.createBidirectionalStream()` method to get a reference to a `WebTransportBidirectionalStream`. The `readable` and `writable` properties return references to `WebTransportReceiveStream` and `WebTransportSendStream` instances. These inherit from `ReadableStream` and `WritableStream` respectively, and can be used to read from and write to the server.
    
    async function setUpBidirectional() {
      const stream = await transport.createBidirectionalStream();
      // stream is a WebTransportBidirectionalStream
      // stream.readable is a WebTransportReceiveStream
      const readable = stream.readable;
      // stream.writable is a WebTransportSendStream
      const writable = stream.writable;
    
      // …
    }
    
Reading from the `WebTransportReceiveStream` can be done in the same way as you would read a `ReadableStream`:
    
    async function readData(readable) {
      const reader = readable.getReader();
      while (true) {
        const { value, done } = await reader.read();
        if (done) {
          break;
        }
        // value is a Uint8Array.
        console.log(value);
      }
    }
    
And writing to the `WebTransportSendStream` can be done like this:
    
    async function writeData(writable) {
      const writer = writable.getWriter();
      const data1 = new Uint8Array([65, 66, 67]);
      const data2 = new Uint8Array([68, 69, 70]);
      writer.write(data1);
      writer.write(data2);
    }
    
### Bidirectional transmission initiated by the server
If the server opens a bidirectional stream to transmit data to and receive it from the client, this can be accessed via the `WebTransport.incomingBidirectionalStreams` property, which returns a `ReadableStream` of `WebTransportBidirectionalStream` objects. Each one can be used to read and write `Uint8Array` instances as shown above. However, you need an initial function to read the bidirectional stream in the first place:
    
    async function receiveBidirectional() {
      const bds = transport.incomingBidirectionalStreams;
      const reader = bds.getReader();
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          break;
        }
        // value is an instance of WebTransportBidirectionalStream
        await readData(value.readable);
        await writeData(value.writable);
      }
    }
    
  * Using WebTransport
  * WebSockets API
  * Streams API
  * WebTransport over HTTP/3


# AudioBuffer
The `AudioBuffer` interface represents a short audio asset residing in memory, created from an audio file using the `AudioContext.decodeAudioData()` method, or from raw data using `AudioContext.createBuffer()`. Once put into an AudioBuffer, the audio can then be played by being passed into an `AudioBufferSourceNode`.
Objects of these types are designed to hold small audio snippets, typically less than 45 s. For longer sounds, objects implementing the `MediaElementAudioSourceNode` are more suitable. The buffer contains the audio signal waveform encoded as a series of amplitudes in the following format: non-interleaved IEEE754 32-bit linear PCM with a nominal range between `-1` and `+1`, that is, a 32-bit floating point buffer, with each sample between -1.0 and 1.0. If the `AudioBuffer` has multiple channels, they are stored in separate buffers.
## Constructor
`AudioBuffer()`
    
Creates and returns a new `AudioBuffer` object instance.
## Instance properties
`AudioBuffer.sampleRate` Read only
    
Returns a float representing the sample rate, in samples per second, of the PCM data stored in the buffer.
`AudioBuffer.length` Read only
    
Returns an integer representing the length, in sample-frames, of the PCM data stored in the buffer.
`AudioBuffer.duration` Read only
    
Returns a double representing the duration, in seconds, of the PCM data stored in the buffer.
`AudioBuffer.numberOfChannels` Read only
    
Returns an integer representing the number of discrete audio channels described by the PCM data stored in the buffer.
## Instance methods
`AudioBuffer.getChannelData()`
    
Returns a `Float32Array` containing the PCM data associated with the channel, defined by the `channel` parameter (with `0` representing the first channel).
`AudioBuffer.copyFromChannel()`
    
Copies the samples from the specified channel of the `AudioBuffer` to the `destination` array.
`AudioBuffer.copyToChannel()`
    
Copies the samples to the specified channel of the `AudioBuffer`, from the `source` array.
## Example
The following simple example shows how to create an `AudioBuffer` and fill it with random white noise. You can find the full source code at our webaudio-examples repository; a running live version is also available.
    
    const audioCtx = new AudioContext();
    
    // Create an empty three-second stereo buffer at the sample rate of the AudioContext
    const myArrayBuffer = audioCtx.createBuffer(
      2,
      audioCtx.sampleRate * 3,
      audioCtx.sampleRate,
    );
    
    // Fill the buffer with white noise;
    // just random values between -1.0 and 1.0
    for (let channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
      // This gives us the actual array that contains the data
      const nowBuffering = myArrayBuffer.getChannelData(channel);
      for (let i = 0; i < myArrayBuffer.length; i++) {
        // Math.random() is in [0; 1.0]
        // audio needs to be in [-1.0; 1.0]
        nowBuffering[i] = Math.random() * 2 - 1;
      }
    }
    
    // Get an AudioBufferSourceNode.
    // This is the AudioNode to use when we want to play an AudioBuffer
    const source = audioCtx.createBufferSource();
    
    // set the buffer in the AudioBufferSourceNode
    source.buffer = myArrayBuffer;
    
    // connect the AudioBufferSourceNode to the
    // destination so we can hear the sound
    source.connect(audioCtx.destination);
    
    // start the source playing
    source.start();
    
  * Using the Web Audio API


# EditContext API
The EditContext API can be used to build rich text editors on the web that support advanced text input experiences, such as Input Method Editor (IME) composition, emoji picker, or any other platform-specific editing-related UI surfaces.
With the EditContext API, you get the flexibility to render your own editable text region using any technology you want.
## Concept
Multiple actors are involved when entering text in an editable region of an application:
User
    
The user provides the text by means of an input method: a keyboard, mouse, voice, or other input method.
Input method software
    
The input method software converts the user's input into text. For example, this could be an Input Method Editor (IME) that converts keystrokes from a standard keyboard into Japanese, Chinese, or Korean characters.
OS text input service
    
The text input service of the operating system acts as a link between the input method software and the application.
Application text edit context
    
The application text edit context provides a state of the text being edited. The state contains information such as the text itself, the current selection, the location of the text in the app's UI.
Application editable region
    
The application editable region is the UI element of the application that displays the text.
While the three first actors are provided by the operating system, the application is responsible for providing the editable region and the text edit context.
On the web, editable regions are often `<textarea>` elements, `<input>` elements, or elements with the `contenteditable` attribute set to `true`. For these elements, the browser automatically provides the text edit context, and web authors are not required to write any code to support text input.
### Creating custom editable regions
Web authors can also create custom editable regions using the EditContext API. For example, a web author could create a rich text editor using a `<canvas>` element to render the text. In this case, the web author needs to write code to support text input.
### Author's responsibilities
If you decide to implement your own editable region, whether it draws text into a `<canvas>` or renders it into a series of DOM elements, you are responsible for providing the things that the browser would normally provide for you if you were using a `<textarea>` instead. This includes:
  * Rendering the text.
  * Rendering the selection (if you build your editable region with DOM elements instead of a `<canvas>`, the browser does render the selection for you).
  * Letting the OS text input service know when the selection changes.
  * Letting the OS text input service know where the text is located in the UI, so the input method software can display the IME composition window in the correct location.
  * Applying certain text formats when the user is composing text within the IME composition window.


In return, the EditContext API makes the DOM element you choose editable and part of the document's focus order. In addition, the EditContext API also provides information about the state of the text being edited, which allows you to render it in a custom way. The information provided to you includes:
  * The current text content.
  * The current selection.
  * Whether IME composition is in progress, and whether text formats need to be applied.


### Accessibility
If you use the EditContext API with a `<canvas>` element, make sure to also make the text accessible to assistive technology. Screen readers can't read the text in a `<canvas>` element. For example, you could maintain a separate view of the text in an offscreen DOM element that's presented to screen readers.
### Basic usage
To use the EditContext API, you need to create an instance of the `EditContext` interface, and then attach it to the DOM element you want to make editable by using the `editContext` property. The DOM element can be any element, including a `<div>` or a `<canvas>` element.
    
    <canvas id="editor-canvas"></canvas>
    
    
    const canvas = document.getElementById("editor-canvas");
    const editContext = new EditContext();
    canvas.editContext = editContext;
    
An `EditContext` instance can only be attached to one DOM element at a time.
Attaching an `EditContext` instance to a DOM element makes the element focusable, as part of the document's focus order. The user can enter text into the element using the input method of their choice, and you can use event fired by the `EditContext` instance to render the text and selection.
### Model and view architecture
When using the EditContext API, it helps to build your editing experience as a model and view architecture.
The `EditContext` instance represents the model of your editable region. Its internal state gets updated when text input is received, and when the selection changes.
You can then render the text and selection in the view, using the information provided by the `EditContext` instance, however your view doesn't need to match the model exactly. You're free to render the text in any way you want.
## Interfaces
`EditContext` Experimental
    
The `EditContext` interface is a JavaScript reflection of the text edit context that's normally provided transparently by the browser when using standard editable regions such as `textarea`. `EditContext` provides the state of the text being edited, with information such as the text itself, the current selection, or the location of the text in the app's UI.
`TextFormat` Experimental
    
The `TextFormat` interface is used to represent certain formats that should be applied to text ranges when the user is composing text within the IME composition window.
`TextUpdateEvent` Experimental
    
The `TextUpdateEvent` interface is a DOM event that represents a text or selection update in an editable text region that's attached to an `EditContext` instance.
`TextFormatUpdateEvent` Experimental
    
The `TextFormatUpdateEvent` interface is a DOM event that represents a list of text formats that an Input Method Editor (IME) window wants to apply to the text being composed in an editable region that's attached to an `EditContext` instance.
`CharacterBoundsUpdateEvent` Experimental
    
The `CharacterBoundsUpdateEvent` interface is a DOM event that represents a request from the operating system to know the bounds of certain characters within an editable region that's attached to an `EditContext` instance.
## Extensions to other interfaces
`HTMLElement.editContext` Experimental
    
The `editContext` property of the `HTMLElement` interface gets and sets an element's associated `EditContext` object.
  * Using the EditContext API


# CSSRuleList
A `CSSRuleList` represents an ordered collection of read-only `CSSRule` objects.
While the `CSSRuleList` object is read-only, and cannot be directly modified, it is considered a `live` object, as the content can change over time.
To edit the underlying rules returned by `CSSRule` objects, use `CSSStyleSheet.insertRule()` and `CSSStyleSheet.deleteRule()`, which are methods of `CSSStyleSheet`.
This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs represent list structures using types based on JavaScript arrays, thus making many array methods available, and at the same time imposing additional semantics on their usage (such as making their items read-only).
These historical reasons do not mean that you as a developer should avoid `CSSRuleList`. You don't create `CSSRuleList` objects yourself, but you get them from APIs such as `CSSStyleSheet.cssRules` and `CSSKeyframesRule.cssRules`, and these APIs are not deprecated. However, be careful of the semantic differences from a real array.
## Instance properties
`CSSRuleList.length` Read only
    
Returns an integer representing the number of `CSSRule` objects in the collection.
## Instance methods
`CSSRuleList.item()`
    
Gets a single `CSSRule`.
## Examples
In the following example there is a stylesheet with three rules. Using `CSSStyleSheet.cssRules` returns a `CSSRuleList`, which is printed to the console.
The number of rules in the list is printed to the console using `CSSRuleList.length`. The first `CSSRule` can be returned by using `0` as the parameter for `CSSRuleList.item`, in the example this will return the rules set for the `body` selector.
### CSS
    
    body {
      font-family:
        system-ui,
        -apple-system,
        sans-serif;
      margin: 2em;
    }
    
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, 200px);
    }
    
    .container > * {
      background-color: #3740ff;
      color: white;
    }
    
### JavaScript
    
    let myRules = document.styleSheets[0].cssRules;
    console.log(myRules);
    console.log(myRules.length);
    console.log(myRules[0]);
    
  * `CSSRule`


# SVGAnimatedString
The `SVGAnimatedString` interface represents string attributes which can be animated from each SVG declaration. You need to create SVG attribute before doing anything else, everything should be declared inside this.
## Instance properties
`SVGAnimatedString.animVal` Read only
    
This is a string representing the animation value. If the given attribute or property is being animated it contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, it contains the same value as baseVal.
`SVGAnimatedString.baseVal`
    
This is a string representing the base value. The base value of the given attribute before applying any animations. Setter throws DOMException.
## Instance methods
The `SVGAnimatedString` interface do not provide any specific methods.
# RTCRemoteOutboundRtpStreamStats
The `RTCRemoteOutboundRtpStreamStats` dictionary of the WebRTC API is used to report statistics from a remote endpoint about its outbound RTP stream. This will correspond to an inbound stream that is currently being received by the local `RTCPeerConnection` object.
The statistics can be obtained by iterating the `RTCStatsReport` returned by `RTCPeerConnection.getStats()` until you find a report with the `type` of `remote-outbound-rtp`.
## Instance properties
>
### Remote outbound specific statistics
`localId` Optional
    
A string which is used to find the local `RTCInboundRtpStreamStats` object that shares the same synchronization source (SSRC).
`remoteTimestamp` Optional
    
A `DOMHighResTimeStamp` specifying the timestamp (on the remote device) at which the statistics in the `RTCRemoteOutboundRtpStreamStats` object were sent by the remote endpoint. This is different from the `timestamp`; it represents the time at which the object's statistics were received or generated by the local endpoint.
`reportsSent` Optional Experimental
    
A positive integer indicating the total number of RTCP Sender Report (SR) blocks sent for this synchronization source (SSRC).
`roundTripTimeMeasurements` Optional Experimental
    
A positive number that represents the total number of valid round trip time measurements received for this synchronization source (SSRC).
`totalRoundTripTime` Optional Experimental
    
A number indicating the cumulative sum of all round trip time measurements since the beginning of the session, in seconds. The average round trip time can be computed by dividing `totalRoundTripTime` by `roundTripTimeMeasurements`.
### Sent RTP stream statistics
`bytesSent` Optional
    
A positive integer indicating the total number of bytes sent for this SSRC, including retransmissions. 
`packetsSent` Optional
    
A positive integer indicating the total number of RTP packets sent for this SSRC, including retransmissions. 
### Common RTP stream statistics
`codecId` Optional
    
A string that uniquely identifies the object that was inspected to produce the `RTCCodecStats` report associated with this RTP stream.
`kind`
    
A string indicating whether the `MediaStreamTrack` associated with the stream is an audio or a video track.
`ssrc`
    
A positive integer that identifies the synchronization source (SSRC) of the RTP packets in this stream.
`transportId` Optional
    
A string that uniquely identifies the object that was inspected to produce the `RTCTransportStats` report associated with this RTP stream.
### Common instance properties
The following properties are common to all WebRTC statistics objects.
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"remote-outbound-rtp"`, indicating the type of statistics that the object contains.
## Usage notes
The `RTCRemoteOutboundRtpStreamStats` object's `remoteTimestamp` property provides statistics based on the received data's NTP timestamp taken from an RTCP Sender Report (SR) block. Be aware that the remote clock may not be synchronized with the local clock (either in current time or speed at which time elapses).
# VirtualKeyboard API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The VirtualKeyboard API provides developers control over the layout of their applications when the on-screen virtual keyboard appears and disappears on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.
Web browsers usually deal with virtual keyboards on their own, by adjusting the viewport height and scrolling to input fields when focused.
The figure below illustrates the difference in viewport height and scroll position on a web page when the device has its on-screen virtual keyboard hidden, and when it is shown.
More complex applications or specific devices such as multi-screen mobile phones may require more control of the layout when the virtual keyboard appears.
The figure below shows what happens on a dual-screen device when the virtual keyboard appears on just one of the two screens. The viewport becomes smaller on both screens to accommodate for the virtual keyboard, leaving wasted space on the screen where the virtual keyboard is not displayed.
The VirtualKeyboard API can be used to opt out of the way the browser automatically handles the virtual keyboard, and take full control of it instead. With the VirtualKeyboard API, the keyboard still appears and disappears as necessary when form controls are focused, but the viewport does not change, and you can use JavaScript and CSS to adapt your layout.
## Concept
The VirtualKeyboard API consists of three parts:
  * The `VirtualKeyboard` interface, accessed through `navigator.virtualKeyboard`, is used to opt out of the automatic virtual keyboard behavior, show or hide the virtual keyboard programmatically, as well as get the current position and size of the virtual keyboard.
  * The `keyboard-inset-*` CSS environment variables provide information about the virtual keyboard's position and size.
  * The `virtualkeyboardpolicy` attribute specifies whether the virtual keyboard should appear on `contenteditable` elements.


### Opt out of the automatic virtual keyboard behavior
To opt out of the automatic virtual keyboard behavior of the browser, use `navigator.virtualKeyboard.overlaysContent = true`. The browser will no longer automatically resize the viewport to make space for the virtual keyboard, which will overlay your content instead.
### Detect the virtual keyboard geometry using JavaScript
Once you've opted out of the default browser behavior, you can get the current geometry of the virtual keyboard using `navigator.virtualKeyboard.boundingRect`, and adapt the layout as appropriate using CSS and JavaScript. In addition, you can listen to geometry changes, such as when the keyboard is shown or hidden, by using the `geometrychange` event.
This is useful for positioning important UI elements in the area that's not covered by the virtual keyboard.
The code snippet below uses the `geometrychange` event to detect when the virtual keyboard geometry changes; it then accesses the `boundingRect` property to query the size and position of the virtual keyboard:
    
    if ("virtualKeyboard" in navigator) {
      navigator.virtualKeyboard.overlaysContent = true;
    
      navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
        const { x, y, width, height } = event.target.boundingRect;
      });
    }
    
### Detect the virtual keyboard geometry using CSS environment variables
The VirtualKeyboard API also exposes the following CSS environment variables: `keyboard-inset-top`, `keyboard-inset-right`, `keyboard-inset-bottom`, `keyboard-inset-left`, `keyboard-inset-width`, and `keyboard-inset-height`.
The `keyboard-inset-*` CSS environment variables are useful to adapt your layout to the virtual keyboard appearance using CSS. They define a rectangle by its top, right, bottom, and left insets from the edge of the viewport. The `width` and `height` variables are also available if needed.
The code snippet below uses the `keyboard-inset-height` CSS variable to reserve space for the virtual keyboard to appear below the list of messages and input field in a chat-like application. When the virtual keyboard is hidden, the `env()` function returns `0px` and the `keyboard` grid area is hidden. The messages and input elements can occupy the full height of the viewport. When the virtual keyboard appears, the `keyboard` grid area gets the height of the virtual keyboard.
    
    <ul id="messages"></ul>
    <input type="text" />
    
    
    body {
      display: grid;
      margin: 0;
      height: 100vh;
      grid-template:
        "messages" 1fr
        "input" auto
        "keyboard" env(keyboard-inset-height, 0px);
    }
    
    
    if ("virtualKeyboard" in navigator) {
      navigator.virtualKeyboard.overlaysContent = true;
    }
    
### Control the virtual keyboard on `contenteditable` elements
By default, elements using the `contenteditable` attribute also trigger the virtual keyboard when tapped or clicked. In certain situations, it may be desirable to prevent this behavior and instead show the virtual keyboard after a different event.
Set the `virtualkeyboardpolicy` attribute to `manual` to prevent the default handling of the virtual keyboard in the browser, and instead handle it yourself by using the `VirtualKeyboard` interface's `show()` and `hide()` methods.
The code snippet below shows how to use the `virtualkeyboardpolicy` attribute and the `navigator.virtualKeyboard.show()` method to show the virtual keyboard on double-click instead:
    
    <div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>
    
    
    if ("virtualKeyboard" in navigator) {
      navigator.virtualKeyboard.overlaysContent = true;
    
      const editor = document.getElementById("editor");
      editor.addEventListener("dblclick", () => {
        navigator.virtualKeyboard.show();
      });
    }
    
## Interfaces
`VirtualKeyboard` Experimental
    
Provides functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
## Extensions to other interfaces
`Navigator.virtualKeyboard` Read only Experimental
    
Returns a reference to the `VirtualKeyboard` API, to take control of the on-screen virtual keyboard.
`HTMLElement.virtualkeyboardpolicy` Experimental
    
A string indicating whether to use the browser's default policy for showing the virtual keyboard when the element is focused, or to handle showing the virtual keyboard manually.
  * Full control with the VirtualKeyboard API


# EcdhKeyDeriveParams
The `EcdhKeyDeriveParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.deriveKey()` and `SubtleCrypto.deriveBits()`, when using the ECDH or X25519 algorithms.
ECDH enables two people who each have a key pair consisting of a public and a private key to derive a shared secret. They exchange public keys and use the combination of their private key and the other entity's public key to derive a secret key that they — and no one else — share.
The parameters for ECDH `deriveKey()` therefore include the other entity's public key, which is combined with this entity's private key to derive the shared secret.
## Instance properties
`name`
    
A string. This should be set to `ECDH` or `X25519`, depending on the algorithm used.
`public`
    
A `CryptoKey` object representing the public key of the other entity.
## Examples
See the examples for `SubtleCrypto.deriveKey()` and `SubtleCrypto.deriveBits()`.
Browsers that support the "ECDH" or "X25519" algorithm for the `SubtleCrypto.deriveKey()` method will support this type.
  * `SubtleCrypto.deriveKey()`.
  * `SubtleCrypto.deriveBits()`


# HTMLHtmlElement
The `HTMLHtmlElement` interface serves as the root node for a given HTML document. This object inherits the properties and methods described in the `HTMLElement` interface.
You can retrieve the `HTMLHtmlElement` object for a given document by reading the value of the `document.documentElement` property.
EventTarget  Node  Element  HTMLElement  HTMLHtmlElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLHtmlElement.version` Deprecated
    
A string representing the version of the HTML Document Type Definition (DTD) that governs this document. This property should not be used any more as it is non-conforming. Omit it.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * HTML element implementing this interface: `<html>`.


# Federated Credential Management (FedCM) API
The Federated Credential Management API (or FedCM API) provides a standard mechanism for identity providers (IdPs) to make identity federation services available on the web in a privacy-preserving way, without the need for third-party cookies and redirects. This includes a JavaScript API that enables the use of federated authentication for activities such as signing in or signing up on a website.
## FedCM concepts
Identity federation is the delegation of user authentication from a website requiring user sign-up or sign-in, such as an e-commerce or social networking site (also known as a relying party or RP), to a trusted third-party identity provider (IdP) such as Google, Facebook/Meta, GitHub, etc.
RPs can integrate with IdPs, allowing users to sign-in using the accounts they have registered with the IdP. Identity federation via a small set of dedicated IdPs has improved web authentication in terms of security, consumer confidence, and user experience, as compared to each site managing its own sign-in needs with separate usernames and passwords.
The problem is that traditional identity federation relies on `<iframe>`s, redirects, and third-party cookies, which are also used for third-party tracking. Browsers are limiting the usage of these features in an effort to preserve user privacy, but a side effect is that this makes valid, non-tracking uses more difficult to implement, which includes identity federation.
This affects federated sign-in in general, as well as more specific identity federation use cases:
  * OIDC front-channel logout: This flow requires the IDP to embed several RP `<iframe>`s, which rely on RP cookies.
  * Social Widgets: In order to provide social widgets, the IdP third-party cookie must be provided from the RP top-level origin.
  * Personalized buttons: The display of personalized sign in information on a `<button>` in the RP origin is implemented as an IdP `<iframe>` that requires third party cookies.
  * Session Refresh without top-level navigation or popups.


FedCM aims to work around this problem, providing a dedicated mechanism for federated identity flows on the web, and enabling supporting browsers to provide special UI elements on RPs, allowing users to choose an IdP account to use for sign-in.
There are two parts to using the FedCM API, which are covered in the linked guides below:
  1. IdP integration with FedCM — what an identity provider needs to provide so that an RP can integrate with it.
  2. RP federated sign-in — the FedCM functionality an RP needs to use to sign a user in using their IdP account. A FedCM sign-in request is initiated using the `navigator.credentials.get()` method.


Note: Google Sign In is an example of an IdP that already supports FedCM. Migrate to FedCM provides instructions for RPs wishing to migrate existing apps using Google Sign In to federated sign-in.
## Permissions Policy integration and `<iframe>` support
The `identity-credentials-get` Permissions-Policy can be used to control permission to use FedCM. More specifically, it permits usage of the following methods:
  * `CredentialsContainer.get()`
  * `IdentityCredential.disconnect()`
  * `IdentityProvider.getUserInfo()`


Developers can explicitly grant permission for an `<iframe>` to use FedCM via the `allow` attribute:
    
    <iframe src="3rd-party.example" allow="identity-credentials-get"></iframe>
    
The availability of FedCM within `<iframe>`s enables a couple of use cases:
  * Larger sites won't want a third-party sign-in script to gain control over the top-level frame; instead they will want to add that script and invoke FedCM from within an `<iframe>`.
  * Some `<iframes>` may themselves require federated authentication.


## Interfaces
`IdentityCredential`
    
Represents a user identity credential arising from successful federated authentication. A successful `navigator.credentials.get()` call that includes an `identity` option fulfills with an `IdentityCredential` instance.
`IdentityCredentialError`
    
Represents an authentication error indicating that the user agent did not receive an identity assertion after the user has asked to authenticate using a federated credential.
`IdentityProvider`
    
Represents an IdP and provides access to related information and functionality.
`NavigatorLogin`
    
Defines login functionality for IdPs, including the `Navigator.login.setStatus()` method for updating IdP login status.
## Extensions to other interfaces
`CredentialsContainer.get()`, the `identity` option.
    
`identity` is an object containing details of federated IdPs that a relying party (RP) website can use to sign users in. It causes a `get()` call to initiate a request for a user to sign in to an RP with an IdP.
`Navigator.login`
    
Provides access to the browser's `NavigatorLogin` object.
## HTTP headers
`Set-Login`
    
Provides an HTTP mechanism for updating login status via HTTP.
## Examples
For example code, see:
  * Implement an identity solution with FedCM on the Identity Provider side on privacysandbox.google.com (2025).
  * Implement an identity solution with FedCM on the Relying Party side on privacysandbox.google.com (2025).


  * Federated Credential Management API


# Web Serial API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Dedicated Web Workers.
The Web Serial API provides a way for websites to read from and write to serial devices. These devices may be connected via a serial port, or be USB or Bluetooth devices that emulate a serial port.
## Concepts and Usage
The Web Serial API is one of a set of APIs that allow websites to communicate with peripherals connected to a user's computer. It provides the ability to connect to devices that are required by the operating system to communicate via the serial API, rather than USB which can be accessed via the WebUSB API, or input devices that can be accessed via WebHID API.
Examples of serial devices include 3D printers, and microcontrollers such as the BBC micro:bit board.
## Interfaces
`Serial` Experimental
    
Provides attributes and methods for finding and connecting to serial ports from a web page.
`SerialPort` Experimental
    
Provides access to a serial port on the host device.
## Extensions to other interfaces
`Navigator.serial` Read only Experimental
    
Returns a `Serial` object, which represents the entry point into the Web Serial API to enable the control of serial ports.
`WorkerNavigator.serial` Read only Experimental
    
Returns a `Serial` object, which represents the entry point into the Web Serial API to enable the control of serial ports.
## HTTP headers
`Permissions-Policy` `serial` directive
    
Controls whether the current document is allowed to use the Web Serial API to communicate with serial devices, either directly connected via a serial port, or via USB or Bluetooth devices emulating a serial port.
## Examples
The following examples demonstrate some of the functionality provided by the Web Serial API.
### Checking for available ports
The following example shows how to check for available ports and allows the user to grant it permission to access additional ports.
The `connect` and `disconnect` events let sites react when a device is connected or disconnected from the system. The `getPorts()` method is then called to see connected ports that the site already has access to.
If the site doesn't have access to any connected ports it has to wait until it has user activation to proceed. In this example we use a `click` event handler on a button for this task. A filter is passed to `requestPort()` with a USB vendor ID in order to limit the set of devices shown to the user to only USB devices built by a particular manufacturer.
    
    navigator.serial.addEventListener("connect", (e) => {
      // Connect to `e.target` or add it to a list of available ports.
    });
    
    navigator.serial.addEventListener("disconnect", (e) => {
      // Remove `e.target` from the list of available ports.
    });
    
    navigator.serial.getPorts().then((ports) => {
      // Initialize the list of available ports with `ports` on page load.
    });
    
    button.addEventListener("click", () => {
      const usbVendorId = 0xabcd;
      navigator.serial
        .requestPort({ filters: [{ usbVendorId }] })
        .then((port) => {
          // Connect to `port` or add it to the list of available ports.
        })
        .catch((e) => {
          // The user didn't select a port.
        });
    });
    
### Reading data from a port
The following example shows how to read data from a port. The outer loop handles non-fatal errors, creating a new reader until a fatal error is encountered and `SerialPort.readable` becomes `null`.
    
    while (port.readable) {
      const reader = port.readable.getReader();
      try {
        while (true) {
          const { value, done } = await reader.read();
          if (done) {
            // |reader| has been canceled.
            break;
          }
          // Do something with |value|...
        }
      } catch (error) {
        // Handle |error|...
      } finally {
        reader.releaseLock();
      }
    }
    
  * Read from and write to a serial port
  * Getting started with the Web Serial API


# RTCRemoteInboundRtpStreamStats
The `RTCRemoteInboundRtpStreamStats` dictionary of the WebRTC API is used to report statistics from the remote endpoint about a particular incoming RTP stream. These will correspond to an outgoing RTP stream at the local end of the `RTCPeerConnection`.
The statistics can be obtained by iterating the `RTCStatsReport` returned by `RTCPeerConnection.getStats()` or `RTCRtpReceiver.getStats()` until you find a report with the `type` of `remote-inbound-rtp`.
## Instance properties
>
### Remote inbound specific statistics
`fractionLost` Optional
    
A number indicating the fraction of packets lost for this SSRC since the last sender or receiver report.
`localId` Optional
    
A string that is used to find the local `RTCOutboundRtpStreamStats` object that shares the same synchronization source (SSRC).
`roundTripTime` Optional
    
A number that indicates the estimated round trip time (RTT) for this SSRC, in seconds. This property will not exist until valid RTT data has been received.
`roundTripTimeMeasurements` Optional
    
A positive integer indicating the total number of valid round trip time measurements received for this synchronization source (SSRC).
`totalRoundTripTime` Optional
    
A number indicating the cumulative sum of all round trip time measurements since the beginning of the session, in seconds. The average round trip time can be computed by dividing `totalRoundTripTime` by `roundTripTimeMeasurements`.
### Received RTP stream statistics
`jitter` Optional
    
A number indicating the packet jitter for this synchronization source, measured in seconds.
`packetsLost` Optional
    
An integer indicating the total number of RTP packets lost for this SSRC, as measured at the remote endpoint. This value can be negative if duplicate packets were received.
`packetsReceived` Optional Experimental
    
A positive integer indicating the total number of RTP packets received for this SSRC, including retransmissions.
### Common RTP stream statistics
`codecId` Optional
    
A string that uniquely identifies the object that was inspected to produce the `RTCCodecStats` object associated with this RTP stream.
`kind`
    
A string indicating whether the `MediaStreamTrack` associated with the stream is an audio or a video track.
`ssrc`
    
A positive integer that identifies the SSRC of the RTP packets in this stream.
`transportId` Optional
    
A string that uniquely identifies the object which was inspected to produce the `RTCTransportStats` object associated with this RTP stream.
### Common instance properties
The following properties are common to all WebRTC statistics objects.
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"inbound-rtp"`, indicating the type of statistics that the object contains.
## Examples
Given a variable `peerConnection` that is an instance of an `RTCPeerConnection`, the code below uses `await` to wait for the statistics report, and then iterates it using `RTCStatsReport.forEach()`. It then filters the dictionaries for just those reports that have the type of `remote-inbound-rtp` and logs the result.
    
    const stats = await myPeerConnection.getStats();
    
    stats.forEach((report) => {
      if (report.type === "remote-inbound-rtp") {
        console.log("Remote Inbound RTP Stream Stats:");
        console.log(`id: ${report.id}`);
        console.log(`timestamp: ${report.timestamp}`);
        console.log(`transportId: ${report.transportId}`);
        console.log(`ssrc: ${report.ssrc}`);
        console.log(`kind: ${report.kind}`);
        console.log(`codecId: ${report.codecId}`);
        console.log(`packetsReceived: ${report.packetsReceived}`);
        console.log(`packetsLost: ${report.packetsLost}`);
        console.log(`jitter: ${report.jitter}`);
        console.log(`totalRoundTripTime: ${report.totalRoundTripTime}`);
        console.log(
          `roundTripTimeMeasurements: ${report.roundTripTimeMeasurements}`,
        );
        console.log(`roundTripTime: ${report.roundTripTime}`);
        console.log(`localId: ${report.localId}`);
        console.log(`fractionLost: ${report.fractionLost}`);
      }
    });
    
  * `RTCStatsReport`


# Cache
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `Cache` interface provides a persistent storage mechanism for `Request` / `Response` object pairs that are cached in long lived memory. How long a `Cache` object lives is browser dependent, but a single origin's scripts can typically rely on the presence of a previously populated `Cache` object. Note that the `Cache` interface is exposed to windowed scopes as well as workers. You don't have to use it in conjunction with service workers, even though it is defined in the service worker spec.
An origin can have multiple, named `Cache` objects. You are responsible for implementing how your script (e.g., in a `ServiceWorker`) handles `Cache` updates. Items in a `Cache` do not get updated unless explicitly requested; they don't expire unless deleted. Use `CacheStorage.open()` to open a specific named `Cache` object and then call any of the `Cache` methods to maintain the `Cache`.
You are also responsible for periodically purging cache entries. Each browser has a hard limit on the amount of cache storage that a given origin can use. `Cache` quota usage estimates are available via the `StorageManager.estimate()` method. The browser does its best to manage disk space, but it may delete the `Cache` storage for an origin. The browser will generally delete all of the data for an origin or none of the data for an origin. Make sure to version caches by name and use the caches only from the version of the script that they can safely operate on. See Deleting old caches for more information.
Note: The key matching algorithm depends on the VARY header in the value. So matching a new key requires looking at both key and value for entries in the `Cache` object.
Note: The caching API doesn't honor HTTP caching headers.
## Instance methods
`Cache.match()`
    
Returns a `Promise` that resolves to the response associated with the first matching request in the `Cache` object.
`Cache.matchAll()`
    
Returns a `Promise` that resolves to an array of all matching responses in the `Cache` object.
`Cache.add()`
    
Takes a URL, retrieves it and adds the resulting response object to the given cache. This is functionally equivalent to calling `fetch()`, then using `put()` to add the results to the cache.
`Cache.addAll()`
    
Takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache.
`Cache.put()`
    
Takes both a request and its response and adds it to the given cache.
`Cache.delete()`
    
Finds the `Cache` entry whose key is the request, returning a `Promise` that resolves to `true` if a matching `Cache` entry is found and deleted. If no `Cache` entry is found, the promise resolves to `false`.
`Cache.keys()`
    
Returns a `Promise` that resolves to an array of `Cache` keys.
## Examples
This code snippet is from the service worker selective caching sample. (see selective caching live) The code uses `CacheStorage.open()` to open any `Cache` objects with a `Content-Type` header that starts with `font/`.
The code then uses `Cache.match()` to see if there's already a matching font in the cache, and if so, returns it. If there isn't a matching font, the code fetches the font from the network and uses `Cache.put()` to cache the fetched resource.
The code handles exceptions thrown from the `fetch()` operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code.
The code snippet also shows a best practice for versioning caches used by the service worker. Though there's only one cache in this example, the same approach can be used for multiple caches. It maps a shorthand identifier for a cache to a specific, versioned cache name. The code also deletes all caches that aren't named in `CURRENT_CACHES`.
In the code example, `caches` is a property of the `ServiceWorkerGlobalScope`. It holds the `CacheStorage` object, by which it can access the `CacheStorage` interface.
Note: In Chrome, visit `chrome://inspect/#service-workers` and click on the "inspect" link below the registered service worker to view logging statements for the various actions the `service-worker.js` script is performing.
    
    const CACHE_VERSION = 1;
    const CURRENT_CACHES = {
      font: `font-cache-v${CACHE_VERSION}`,
    };
    
    self.addEventListener("activate", (event) => {
      // Delete all caches that aren't named in CURRENT_CACHES.
      // While there is only one cache in this example, the same logic
      // will handle the case where there are multiple versioned caches.
      const expectedCacheNamesSet = new Set(Object.values(CURRENT_CACHES));
      event.waitUntil(
        caches.keys().then((cacheNames) =>
          Promise.all(
            cacheNames.map((cacheName) => {
              if (!expectedCacheNamesSet.has(cacheName)) {
                // If this cache name isn't present in the set of
                // "expected" cache names, then delete it.
                console.log("Deleting out of date cache:", cacheName);
                return caches.delete(cacheName);
              }
              return undefined;
            }),
          ),
        ),
      );
    });
    
    self.addEventListener("fetch", (event) => {
      console.log("Handling fetch event for", event.request.url);
    
      event.respondWith(
        caches
          .open(CURRENT_CACHES.font)
          .then((cache) => cache.match(event.request))
          .then((response) => {
            if (response) {
              // If there is an entry in the cache for event.request,
              // then response will be defined and we can just return it.
              // Note that in this example, only font resources are cached.
              console.log(" Found response in cache:", response);
    
              return response;
            }
    
            // Otherwise, if there is no entry in the cache for event.request,
            // response will be undefined, and we need to fetch() the resource.
            console.log(
              " No response for %s found in cache. About to fetch " +
                "from network…",
              event.request.url,
            );
    
            // We call .clone() on the request since we might use it
            // in a call to cache.put() later on.
            // Both fetch() and cache.put() "consume" the request,
            // so we need to make a copy.
            // (see https://developer.mozilla.org/en-US/docs/Web/API/Request/clone)
            return fetch(event.request.clone()).then((response) => {
              console.log(
                "  Response for %s from network is: %O",
                event.request.url,
                response,
              );
    
              if (
                response.status < 400 &&
                response.headers.has("content-type") &&
                response.headers.get("content-type").match(/^font\//i)
              ) {
                // This avoids caching responses that we know are errors
                // (i.e. HTTP status code of 4xx or 5xx).
                // We also only want to cache responses that correspond
                // to fonts, i.e. have a Content-Type response header that
                // starts with "font/".
                // Note that for opaque filtered responses
                // https://fetch.spec.whatwg.org/#concept-filtered-response-opaque
                // we can't access to the response headers, so this check will
                // always fail and the font won't be cached.
                // All of the Google Web Fonts are served from a domain that
                // supports CORS, so that isn't an issue here.
                // It is something to keep in mind if you're attempting
                // to cache other resources from a cross-origin
                // domain that doesn't support CORS, though!
                console.log("  Caching the response to", event.request.url);
                // We call .clone() on the response to save a copy of it
                // to the cache. By doing so, we get to keep the original
                // response object which we will return back to the controlled
                // page.
                // https://developer.mozilla.org/en-US/docs/Web/API/Request/clone
                cache.put(event.request, response.clone());
              } else {
                console.log("  Not caching the response to", event.request.url);
              }
    
              // Return the original response object, which will be used to
              // fulfill the resource request.
              return response;
            });
          })
          .catch((error) => {
            // This catch() will handle exceptions that arise from the match()
            // or fetch() operations.
            // Note that a HTTP error response (e.g. 404) will NOT trigger
            // an exception.
            // It will return a normal response object that has the appropriate
            // error code set.
            console.error("  Error in fetch handler:", error);
    
            throw error;
          }),
      );
    });
    
### Cookies and Cache objects
The Fetch API requires `Set-Cookie` headers to be stripped before returning a `Response` object from `fetch()`. So a `Response` stored in a `Cache` won't contain `Set-Cookie` headers, and therefore won't cause any cookies to be stored.
  * Using Service Workers
  * Service workers basic code example
  * Using web workers


# GPUComputePassEncoder
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUComputePassEncoder` interface of the WebGPU API encodes commands related to controlling the compute shader stage, as issued by a `GPUComputePipeline`. It forms part of the overall encoding activity of a `GPUCommandEncoder`.
A compute pipeline contains a single compute stage in which a compute shader takes general data, processes it in parallel across a specified number of workgroups, then returns the result in one or more buffers.
A `GPUComputePassEncoder` object instance is created via the `GPUCommandEncoder.beginComputePass()` property.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Instance methods
`dispatchWorkgroups()`
    
Dispatches a specific grid of workgroups to perform the work being done by the current `GPUComputePipeline`.
`dispatchWorkgroupsIndirect()`
    
Dispatches a grid of workgroups, defined by the parameters of a `GPUBuffer`, to perform the work being done by the current `GPUComputePipeline`.
`end()`
    
Completes recording of the current compute pass command sequence.
`insertDebugMarker()`
    
Marks a specific point in a series of encoded commands with a label.
`popDebugGroup()`
    
Ends a debug group, which is begun with a `pushDebugGroup()` call.
`pushDebugGroup()`
    
Begins a debug group, which is marked with a specified label, and will contain all subsequent encoded commands up until a `popDebugGroup()` method is invoked.
`setBindGroup()`
    
Sets the `GPUBindGroup` to use for subsequent compute commands, for a given index.
`setPipeline()`
    
Sets the `GPUComputePipeline` to use for this compute pass.
## Examples
In our basic compute demo, several commands are recorded via a `GPUCommandEncoder`. Most of these commands originate from the `GPUComputePassEncoder` created via `GPUCommandEncoder.beginComputePass()`.
    
    // …
    
    // Create GPUCommandEncoder to encode commands to issue to the GPU
    const commandEncoder = device.createCommandEncoder();
    
    // Create GPUComputePassEncoder to initiate compute pass
    const passEncoder = commandEncoder.beginComputePass();
    
    // Issue commands
    passEncoder.setPipeline(computePipeline);
    passEncoder.setBindGroup(0, bindGroup);
    passEncoder.dispatchWorkgroups(Math.ceil(BUFFER_SIZE / 64));
    
    // End the compute pass
    passEncoder.end();
    
    // Copy output buffer to staging buffer
    commandEncoder.copyBufferToBuffer(
      output,
      0, // Source offset
      stagingBuffer,
      0, // Destination offset
      BUFFER_SIZE,
    );
    
    // End frame by passing array of command buffers to command queue for execution
    device.queue.submit([commandEncoder.finish()]);
    
    // …
    
  * The WebGPU API


# DevicePosture
The `DevicePosture` interface of the Device Posture API represents the device's posture, that is, whether the viewport is in a flat or folded state.
EventTarget  DevicePosture 
## Instance properties
Inherits properties from its parent, `EventTarget`.
`type` Read only Experimental
    
Returns the device's current posture.
## Events
`change` Experimental
    
Fires when the device's posture changes.
## Examples
    
    const postureOutput = document.getElementById("currentPosture");
    
    function reportPostureOutput() {
      // type property returns "continuous" or "folded"
      postureOutput.textContent = `Device posture: ${navigator.devicePosture.type}`;
    }
    
    navigator.devicePosture.addEventListener("change", reportPostureOutput);
    
  * CSS `device-posture` `@media` feature
  * Device Posture API
  * Origin trial for Foldable APIs on developer.chrome.com (2024)


# Web Periodic Background Synchronization API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The Web Periodic Background Synchronization API provides a way to register tasks to be run in a service worker at periodic intervals with network connectivity. These tasks are referred to as periodic background sync requests.
## Concepts and Usage
The Periodic Background Sync API allows web applications to alert their service worker to make any updates, at a periodic time interval. Uses may include fetching latest content whilst a device is connected to Wi-Fi, or allowing background updates to an application.
The minimum time interval is set when the API is invoked; however the user agent might also take into account other factors which affect when the service worker receives the event. For instance previous website engagement, or connection to a known network.
The `PeriodicSyncManager` interface is available through `ServiceWorkerRegistration.periodicSync`. A unique tag identifier is set to 'name' the sync event, which can then be listened for within the `ServiceWorker` script. Once the event is received you can then run any functionality available, such as updating caches or fetching new resources.
As this API relies on service workers, functionality provided by this API is only available in a secure context.
## Interfaces
`PeriodicSyncManager` Experimental
    
Registers tasks to be run in a service worker at periodic intervals with network connectivity. These tasks are referred to as periodic background sync requests.
`PeriodicSyncEvent` Experimental
    
Represents a synchronization event, sent to the global scope of a ServiceWorker. It provides a way to run tasks in the service worker with network connectivity.
### Extensions to other interfaces
The following additions to the Service Worker API are specified in the Periodic Background Sync specification to provide an entry point for using Periodic Background Sync.
`ServiceWorkerRegistration.periodicSync` Read only Experimental
    
Returns a reference to the `PeriodicSyncManager` interface for registering tasks to run at specific intervals.
`periodicsync` event  Experimental
    
Occurs at periodic intervals, which were specified when registering a `PeriodicSyncManager`.
## Examples
The following examples show how to use the interface.
### Requesting a Periodic Background Sync
The following asynchronous function registers a periodic background sync at a minimum interval of one day from a browsing context:
    
    async function registerPeriodicNewsCheck() {
      const registration = await navigator.serviceWorker.ready;
      try {
        await registration.periodicSync.register("get-latest-news", {
          minInterval: 24 * 60 * 60 * 1000,
        });
      } catch {
        console.log("Periodic Sync could not be registered!");
      }
    }
    
### Verifying a Background Periodic Sync by Tag
This code checks to see if a Periodic Background Sync task with a given tag is registered.
    
    navigator.serviceWorker.ready.then((registration) => {
      registration.periodicSync.getTags().then((tags) => {
        if (tags.includes("get-latest-news")) skipDownloadingLatestNewsOnPageLoad();
      });
    });
    
### Removing a Periodic Background Sync Task
The following code removes a Periodic Background Sync task to stop articles syncing in the background.
    
    navigator.serviceWorker.ready.then((registration) => {
      registration.periodicSync.unregister("get-latest-news");
    });
    
### Listening for a Periodic Background Sync within a Service Worker
The following example shows how to respond to a periodic sync event in the service worker.
    
    self.addEventListener("periodicsync", (event) => {
      if (event.tag === "get-latest-news") {
        event.waitUntil(fetchAndCacheLatestNews());
      }
    });
    
>
### api.PeriodicSyncManager
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_Periodic_Background_Synchronization_API` 80 80 No 67 No 80 No 57 No 13.0 No No  
`getTags` 80 80 No 67 No 80 No 57 No 13.0 No No  
`register` 80 80 No 67 No 80 No 57 No 13.0 No No  
`unregister` 80 80 No 67 No 80 No 57 No 13.0 No No  
### api.ServiceWorkerGlobalScope.periodicsync_event
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_Periodic_Background_Synchronization_API` 80 80 No 67 No 80 No 57 No 13.0 No No  
  * An article on using Periodic Background Sync


# GPUTexture
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUTexture` interface of the WebGPU API represents a container used to store 1D, 2D, or 3D arrays of data, such as images, to use in GPU rendering operations.
A `GPUTexture` object instance is created using the `GPUDevice.createTexture()` method.
## Instance properties
`depthOrArrayLayers` Read only
    
A number representing the depth or layer count of the `GPUTexture` (pixels, or number of layers).
`dimension` Read only
    
An enumerated value representing the dimension of the set of texels for each `GPUTexture` subresource.
`format` Read only
    
An enumerated value representing the format of the `GPUTexture`. See the Texture formats section of the specification for all the possible values.
`height` Read only
    
A number representing the height of the `GPUTexture` in pixels.
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
`mipLevelCount` Read only
    
A number representing the number of mip levels of the `GPUTexture`.
`sampleCount` Read only
    
A number representing the sample count of the `GPUTexture`.
`usage` Read only
    
The bitwise flags representing the allowed usages of the `GPUTexture`.
`width` Read only
    
A number representing the width of the `GPUTexture` in pixels.
## Instance methods
`createView()`
    
Creates a `GPUTextureView` representing a specific view of the `GPUTexture`.
`destroy()`
    
Destroys the `GPUTexture`.
## Examples
In the WebGPU samples Textured Cube sample, a texture to use on the faces of a cube is created by:
  * Loading the image into an `HTMLImageElement` and creating an image bitmap using `createImageBitmap()`.
  * Creating a new `GPUTexture` using `createTexture()`.
  * Copying the image bitmap into the texture using `GPUQueue.copyExternalImageToTexture()`.


    
    // …
    let cubeTexture;
    {
      const img = document.createElement("img");
    
      img.src = new URL(
        "../../../assets/img/Di-3d.png",
        import.meta.url,
      ).toString();
    
      await img.decode();
    
      const imageBitmap = await createImageBitmap(img);
    
      cubeTexture = device.createTexture({
        size: [imageBitmap.width, imageBitmap.height, 1],
        format: "rgba8unorm",
        usage:
          GPUTextureUsage.TEXTURE_BINDING |
          GPUTextureUsage.COPY_DST |
          GPUTextureUsage.RENDER_ATTACHMENT,
      });
    
      device.queue.copyExternalImageToTexture(
        { source: imageBitmap },
        { texture: cubeTexture },
        [imageBitmap.width, imageBitmap.height],
      );
    }
    // …
    
  * The WebGPU API


# PushSubscription
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `PushSubscription` interface of the Push API provides a subscription's URL endpoint along with the public key and secrets that should be used for encrypting push messages to this subscription. This information must be passed to the application server, using any desired application-specific method.
The interface also provides information about when the subscription will expire, and a method to unsubscribe from the subscription.
## Instance properties
`PushSubscription.endpoint` Read only
    
A string containing the endpoint associated with the push subscription.
`PushSubscription.expirationTime` Read only
    
A `DOMHighResTimeStamp` of the subscription expiration time associated with the push subscription, if there is one, or null otherwise.
`PushSubscription.options` Read only
    
An object containing the options used to create the subscription.
`PushSubscription.subscriptionId` Deprecated Read only Non-standard
    
A string containing the subscription ID associated with the push subscription.
## Instance methods
`PushSubscription.getKey()`
    
Returns an `ArrayBuffer` which contains the client's public key, which can then be sent to a server and used in encrypting push message data.
`PushSubscription.toJSON()`
    
Standard serializer — returns a JSON representation of the subscription properties.
`PushSubscription.unsubscribe()`
    
Starts the asynchronous process of unsubscribing from the push service, returning a `Promise` that resolves to a boolean value when the current subscription is successfully unregistered.
## Description
Each browser uses a particular push service. A service worker can use `PushManager.subscribe()` to subscribe to the supported service, and use the returned `PushSubscription` to discover the endpoint where push messages should be sent.
The `PushSubscription` is also used to get the public key and secret that the application server must use to encrypt the messages that it sends to the push service. Note that the private keys used to decrypt push messages are not shared by the browser, and are used to decrypt messages before they are passed to the service worker. This ensures that push messages remain private as they pass through the push server infrastructure.
The service worker doesn't need to know anything about the endpoints or encryption, other than to pass the relevant information onto the application server. Any mechanism may be used to share the information with the application server.
## Example
>
### Sending coding information to the server
The `p256dh` public key and `auth` secret used for encrypting the message are provided to the service worker via its push subscription, using the `PushSubscription.getKey()` method, along with the target endpoint for sending push messages in `PushSubscription.endpoint`. The coding that should be used for encryption is provided by the `PushManager.supportedContentEncodings` static property.
This example shows how you might put the needed information from `PushSubscription` and `supportedContentEncodings` into a JSON object, serialize it using `JSON.stringify()`, and post the result to the application server.
    
    // Get a PushSubscription object
    const pushSubscription =
      await serviceWorkerRegistration.pushManager.subscribe();
    
    // Create an object containing the information needed by the app server
    const subscriptionObject = {
      endpoint: pushSubscription.endpoint,
      keys: {
        p256dh: pushSubscription.getKey("p256dh"),
        auth: pushSubscription.getKey("auth"),
      },
      encoding: PushManager.supportedContentEncodings,
      /* other app-specific data, such as user identity */
    };
    
    // Stringify the object an post to the app server
    fetch("https://example.com/push/", {
      method: "post",
      body: JSON.stringify(subscriptionObject),
    });
    
### Unsubscribing from a push manager
    
    navigator.serviceWorker.ready
      .then((reg) => reg.pushManager.getSubscription())
      .then((subscription) => subscription.unsubscribe())
      .then((successful) => {
        // You've successfully unsubscribed
      })
      .catch((e) => {
        // Unsubscribing failed
      });
    
  * Push API
  * Service Worker API


# AudioNode
The `AudioNode` interface is a generic interface for representing an audio processing module.
Examples include:
  * an audio source (e.g., an HTML `<audio>` or `<video>` element, an `OscillatorNode`, etc.),
  * the audio destination,
  * intermediate processing module (e.g., a filter like `BiquadFilterNode` or `ConvolverNode`), or
  * volume control (like `GainNode`)

EventTarget  AudioNode 
Note: An `AudioNode` can be target of events, therefore it implements the `EventTarget` interface.
## Instance properties
`AudioNode.context` Read only
    
Returns the associated `BaseAudioContext`, that is the object representing the processing graph the node is participating in.
`AudioNode.numberOfInputs` Read only
    
Returns the number of inputs feeding the node. Source nodes are defined as nodes having a `numberOfInputs` property with a value of `0`.
`AudioNode.numberOfOutputs` Read only
    
Returns the number of outputs coming out of the node. Destination nodes — like `AudioDestinationNode` — have a value of `0` for this attribute.
`AudioNode.channelCount`
    
Represents an integer used to determine how many channels are used when up-mixing and down-mixing connections to any inputs to the node. Its usage and precise definition depend on the value of `AudioNode.channelCountMode`.
`AudioNode.channelCountMode`
    
Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.
`AudioNode.channelInterpretation`
    
Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio up-mixing and down-mixing will happen. The possible values are `"speakers"` or `"discrete"`.
## Instance methods
Also implements methods from the interface `EventTarget`.
`AudioNode.connect()`
    
Allows us to connect the output of this node to be input into another node, either as audio data or as the value of an `AudioParam`.
`AudioNode.disconnect()`
    
Allows us to disconnect the current node from another one it is already connected to.
## Description
>
### The audio routing graph
Each `AudioNode` has inputs and outputs, and multiple audio nodes are connected to build a processing graph. This graph is contained in an `AudioContext`, and each audio node can only belong to one audio context.
A source node has zero inputs but one or multiple outputs, and can be used to generate sound. On the other hand, a destination node has no outputs; instead, all its inputs are directly played back on the speakers (or whatever audio output device the audio context uses). In addition, there are processing nodes which have inputs and outputs. The exact processing done varies from one `AudioNode` to another but, in general, a node reads its inputs, does some audio-related processing, and generates new values for its outputs, or lets the audio pass through (for example in the `AnalyserNode`, where the result of the processing is accessed separately).
The more nodes in a graph, the higher the latency will be. For example, if your graph has a latency of 500ms, when the source node plays a sound, it will take half a second until that sound can be heard on your speakers (or even longer because of latency in the underlying audio device). Therefore, if you need to have interactive audio, keep the graph as small as possible, and put user-controlled audio nodes at the end of a graph. For example, a volume control (`GainNode`) should be the last node so that volume changes take immediate effect.
Each input and output has a given amount of channels. For example, mono audio has one channel, while stereo audio has two channels. The Web Audio API will up-mix or down-mix the number of channels as required; check the Web Audio spec for details.
For a list of all audio nodes, see the Web Audio API homepage.
### Creating an `AudioNode`
There are two ways to create an `AudioNode`: via the constructor and via the factory method.
    
    // constructor
    const analyserNode = new AnalyserNode(audioCtx, {
      fftSize: 2048,
      maxDecibels: -25,
      minDecibels: -60,
      smoothingTimeConstant: 0.5,
    });
    
    
    // factory method
    const analyserNode = audioCtx.createAnalyser();
    analyserNode.fftSize = 2048;
    analyserNode.maxDecibels = -25;
    analyserNode.minDecibels = -60;
    analyserNode.smoothingTimeConstant = 0.5;
    
You are free to use either constructors or factory methods, or mix both, however there are advantages to using the constructors:
  * All parameters can be set during construction time and don't need to be set individually.
  * You can sub-class an audio node. While the actual processing is done internally by the browser and cannot be altered, you could write a wrapper around an audio node to provide custom properties and methods.
  * Slightly better performance: In both Chrome and Firefox, the factory methods call the constructors internally.


Brief history: The first version of the Web Audio spec only defined the factory methods. After a design review in October 2013, it was decided to add constructors because they have numerous benefits over factory methods. The constructors were added to the spec from August to October 2016. Factory methods continue to be included in the spec and are not deprecated.
## Example
This simple snippet of code shows the creation of some audio nodes, and how the `AudioNode` properties and methods can be used. You can find examples of such usage on any of the examples linked to on the Web Audio API landing page (for example Violent Theremin).
    
    const audioCtx = new AudioContext();
    
    const oscillator = new OscillatorNode(audioCtx);
    const gainNode = new GainNode(audioCtx);
    
    oscillator.connect(gainNode).connect(audioCtx.destination);
    
    oscillator.context;
    oscillator.numberOfInputs;
    oscillator.numberOfOutputs;
    oscillator.channelCount;
    
  * Using the Web Audio API


# Clients
Note: This feature is only available in Service Workers.
The `Clients` interface provides access to `Client` objects. Access it via ``self`.clients` within a service worker.
## Instance methods
`Clients.get()`
    
Returns a `Promise` for a `Client` matching a given `id`.
`Clients.matchAll()`
    
Returns a `Promise` for an array of `Client` objects. An options argument allows you to control the types of clients returned.
`Clients.openWindow()`
    
Opens a new browser window for a given URL and returns a `Promise` for the new `WindowClient`.
`Clients.claim()`
    
Allows an active service worker to set itself as the `controller` for all clients within its `scope`.
## Examples
The following example shows an existing chat window or creates a new one when the user clicks a notification.
    
    addEventListener("notificationclick", (event) => {
      event.waitUntil(
        (async () => {
          const allClients = await clients.matchAll({
            includeUncontrolled: true,
          });
    
          let chatClient;
    
          // Let's see if we already have a chat window open:
          for (const client of allClients) {
            const url = new URL(client.url);
    
            if (url.pathname === "/chat/") {
              // Excellent, let's use it!
              client.focus();
              chatClient = client;
              break;
            }
          }
    
          // If we didn't find an existing chat window,
          // open a new one:
          chatClient ??= await clients.openWindow("/chat/");
    
          // Message the client:
          chatClient.postMessage("New chat messages!");
        })(),
      );
    });
    
  * Using Service Workers


# Touch events
To provide quality support for touch-based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads.
The touch events interfaces are relatively low-level APIs that can be used to support application-specific multi-touch interactions such as a two-finger gesture. A multi-touch interaction starts when a finger (or stylus) first touches the contact surface. Other fingers may subsequently touch the surface and optionally move across the touch surface. The interaction ends when the fingers are removed from the surface. During this interaction, an application receives touch events during the start, move, and end phases.
Touch events are similar to mouse events except they support simultaneous touches and at different locations on the touch surface. The `TouchEvent` interface encapsulates all of the touchpoints that are currently active. The `Touch` interface, which represents a single touchpoint, includes information such as the position of the touch point relative to the browser viewport.
## Definitions
Surface
    
The touch-sensitive surface. This may be a screen or trackpad.
Touch point
    
A point of contact with the surface. This may be a finger (or elbow, ear, nose, whatever, but typically a finger) or stylus.
## Interfaces
`TouchEvent`
    
Represents an event that occurs when the state of touches on the surface changes.
`Touch`
    
Represents a single point of contact between the user and the touch surface.
`TouchList`
    
Represents a group of touches; this is used when the user has, for example, multiple fingers on the surface at the same time.
## Example
This example tracks multiple touchpoints at a time, allowing the user to draw in a `<canvas>` with more than one finger at a time. It will only work on a browser that supports touch events.
Note: The text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus or other contact method.
### Create a canvas
    
    <canvas id="canvas" width="600" height="600">
      Your browser does not support canvas element.
    </canvas>
    <br />
    Log:
    <pre id="log"></pre>
    
    
    #canvas {
      border: 1px solid black;
    }
    
    #log {
      height: 200px;
      width: 600px;
      overflow: scroll;
      border: 1px solid #cccccc;
    }
    
### Setting up the event handlers
The code sets up all the event listeners for our `<canvas>` element so we can handle the touch events as they occur.
    
    const el = document.getElementById("canvas");
    el.addEventListener("touchstart", handleStart);
    el.addEventListener("touchend", handleEnd);
    el.addEventListener("touchcancel", handleCancel);
    el.addEventListener("touchmove", handleMove);
    
#### Tracking new touches
We'll keep track of the touches in-progress.
    
    const ongoingTouches = [];
    
When a `touchstart` event occurs, indicating that a new touch on the surface has occurred, the `handleStart()` function below is called.
    
    function handleStart(evt) {
      evt.preventDefault();
      log("touchstart.");
      const el = document.getElementById("canvas");
      const ctx = el.getContext("2d");
      const touches = evt.changedTouches;
    
      for (let i = 0; i < touches.length; i++) {
        const touch = touches[i];
        log(`touchstart: ${i}.`);
        ongoingTouches.push(copyTouch(touch));
        const color = colorForTouch(touch);
        log(`color of touch with id ${touch.identifier} = ${color}`);
        ctx.beginPath();
        ctx.arc(touch.pageX, touch.pageY, 4, 0, 2 * Math.PI, false); // a circle at the start
        ctx.fillStyle = color;
        ctx.fill();
      }
    }
    
This calls `event.preventDefault()` to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered). Then we get the context and pull the list of changed touch points out of the event's `TouchEvent.changedTouches` property.
After that, we iterate over all the `Touch` objects in the list, pushing them onto an array of active touchpoints and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4-pixel radius circle will show up neatly.
#### Drawing as the touches move
Each time one or more fingers move, a `touchmove` event is delivered, resulting in our `handleMove()` function being called. Its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch.
    
    function handleMove(evt) {
      evt.preventDefault();
      const el = document.getElementById("canvas");
      const ctx = el.getContext("2d");
      const touches = evt.changedTouches;
    
      for (const touch of touches) {
        const color = colorForTouch(touch);
        const idx = ongoingTouchIndexById(touch.identifier);
    
        if (idx >= 0) {
          log(`continuing touch ${idx}`);
          ctx.beginPath();
          log(
            `ctx.moveTo( ${ongoingTouches[idx].pageX}, ${ongoingTouches[idx].pageY} );`,
          );
          ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
          log(`ctx.lineTo( ${touch.pageX}, ${touch.pageY} );`);
          ctx.lineTo(touch.pageX, touch.pageY);
          ctx.lineWidth = 4;
          ctx.strokeStyle = color;
          ctx.stroke();
    
          ongoingTouches.splice(idx, 1, copyTouch(touch)); // swap in the new touch record
        } else {
          log("can't figure out which touch to continue");
        }
      }
    }
    
This iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each touch to determine the starting point for each touch's new line segment to be drawn. This is done by looking at each touch's `Touch.identifier` property. This property is a unique integer for each touch and remains consistent for each event during the duration of each finger's contact with the surface.
This lets us get the coordinates of the previous position of each touch and use the appropriate context methods to draw a line segment joining the two positions together.
After drawing the line, we call `Array.splice()` to replace the previous information about the touchpoint with the current information in the `ongoingTouches` array.
#### Handling the end of a touch
When the user lifts a finger off the surface, a `touchend` event is sent. We handle this by calling the `handleEnd()` function below. Its job is to draw the last line segment for each touch that ended and remove the touchpoint from the ongoing touch list.
    
    function handleEnd(evt) {
      evt.preventDefault();
      log("touchend");
      const el = document.getElementById("canvas");
      const ctx = el.getContext("2d");
      const touches = evt.changedTouches;
    
      for (const touch of touches) {
        const color = colorForTouch(touch);
        let idx = ongoingTouchIndexById(touch.identifier);
    
        if (idx >= 0) {
          ctx.lineWidth = 4;
          ctx.fillStyle = color;
          ctx.beginPath();
          ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
          ctx.lineTo(touch.pageX, touch.pageY);
          ctx.fillRect(touch.pageX - 4, touch.pageY - 4, 8, 8); // and a square at the end
          ongoingTouches.splice(idx, 1); // remove it; we're done
        } else {
          log("can't figure out which touch to end");
        }
      }
    }
    
This is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call `Array.splice()`, we remove the old entry from the ongoing touch list, without adding in the updated information. The result is that we stop tracking that touchpoint.
#### Handling canceled touches
If the user's finger wanders into browser UI, or the touch otherwise needs to be canceled, the `touchcancel` event is sent, and we call the `handleCancel()` function below.
    
    function handleCancel(evt) {
      evt.preventDefault();
      log("touchcancel.");
      const touches = evt.changedTouches;
    
      for (const touch of touches) {
        let idx = ongoingTouchIndexById(touches[i].identifier);
        ongoingTouches.splice(idx, 1); // remove it; we're done
      }
    }
    
Since the idea is to immediately abort the touch, we remove it from the ongoing touch list without drawing a final line segment.
### Convenience functions
This example uses two convenience functions that should be looked at briefly to help make the rest of the code more clear.
#### Selecting a color for each touch
To make each touch's drawing look different, the `colorForTouch()` function is used to pick a color based on the touch's unique identifier. This identifier is an opaque number, but we can at least rely on it differing between the currently-active touches.
    
    function colorForTouch(touch) {
      let r = touch.identifier % 16;
      let g = Math.floor(touch.identifier / 3) % 16;
      let b = Math.floor(touch.identifier / 7) % 16;
      r = r.toString(16); // make it a hex digit
      g = g.toString(16); // make it a hex digit
      b = b.toString(16); // make it a hex digit
      const color = `#${r}${g}${b}`;
      return color;
    }
    
The result from this function is a string that can be used when calling `<canvas>` functions to set drawing colors. For example, for a `Touch.identifier` value of 10, the resulting string is "#aa3311".
#### Copying a touch object
Some browsers (mobile Safari, for one) re-use touch objects between events, so it's best to copy the properties you care about, rather than referencing the entire object.
    
    function copyTouch({ identifier, pageX, pageY }) {
      return { identifier, pageX, pageY };
    }
    
#### Finding an ongoing touch
The `ongoingTouchIndexById()` function below scans through the `ongoingTouches` array to find the touch matching the given identifier then returns that touch's index into the array.
    
    function ongoingTouchIndexById(idToFind) {
      for (let i = 0; i < ongoingTouches.length; i++) {
        const id = ongoingTouches[i].identifier;
    
        if (id === idToFind) {
          return i;
        }
      }
      return -1; // not found
    }
    
#### Showing what's going on
    
    function log(msg) {
      const container = document.getElementById("log");
      container.textContent = `${msg} \n${container.textContent}`;
    }
    
### Result
You can test this example on mobile devices by touching the box below.
Note: More generally, the example will work on platforms that provide touch events. You can test this on desktop platforms that can simulate such events:
  * On Firefox enable "touch simulation" in Responsive Design Mode (you may need to reload the page).
  * On Chrome use Device mode and set the Device type to one that sends touch events.


## Additional tips
This section provides additional tips on how to handle touch events in your web application.
### Handling clicks
Since calling `preventDefault()` on a `touchstart` or the first `touchmove` event of a series prevents the corresponding mouse events from firing, it's common to call `preventDefault()` on `touchmove` rather than `touchstart`. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to re-firing touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)
    
    function onTouch(evt) {
      evt.preventDefault();
      if (
        evt.touches.length > 1 ||
        (evt.type === "touchend" && evt.touches.length > 0)
      )
        return;
    
      const newEvt = document.createEvent("MouseEvents");
      let type = null;
      let touch = null;
    
      switch (evt.type) {
        case "touchstart":
          type = "mousedown";
          touch = evt.changedTouches[0];
          break;
        case "touchmove":
          type = "mousemove";
          touch = evt.changedTouches[0];
          break;
        case "touchend":
          type = "mouseup";
          touch = evt.changedTouches[0];
          break;
      }
    
      newEvt.initMouseEvent(
        type,
        true,
        true,
        evt.originalTarget.ownerDocument.defaultView,
        0,
        touch.screenX,
        touch.screenY,
        touch.clientX,
        touch.clientY,
        evt.ctrlKey,
        evt.altKey,
        evt.shiftKey,
        evt.metaKey,
        0,
        null,
      );
      evt.originalTarget.dispatchEvent(newEvt);
    }
    
### Calling preventDefault() only on a second touch
One technique for preventing things like `pinchZoom` on a page is to call `preventDefault()` on the second touch in a series. This behavior is not well defined in the touch events spec and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.
Touch events are typically available on devices with a touch screen, but many browsers make the touch events API unavailable on all desktop devices, even those with touch screens.
The reason for this is that some websites use the availability of parts of the touch events API as an indicator that the browser is running on a mobile device. If the touch events API is available, these websites will assume a mobile device and serve mobile-optimized content. This may then provide a poor experience for users of desktop devices that have touch screens.
To support both touch and mouse across all types of devices, use pointer events instead.
### api.Touch
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Touch` 48 79 52This interface is only exposed if a touch input device is detected. 35 No 48 6 35 ≤3 5.0 48 ≤3  
`Touch_events` 22 ≤18 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 ≤3 1.5 4.4 ≤3  
`altitudeAngle` No No No No No No No No 10 No No 10  
`azimuthAngle` No No No No No No No No 10 No No 10  
`clientX` 22 ≤18 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 10 1.5 4.4 10  
`clientY` 22 ≤18 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 10 1.5 4.4 10  
`force` 3822–47 79 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 2515–34 No 3825–47 6 2514–34 10 3.01.5–5.0 384.4–47 10  
`identifier` 22 ≤18 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 10 1.5 4.4 10  
`pageX` 22 ≤18 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 10 1.5 4.4 10  
`pageY` 22 ≤18 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 10 1.5 4.4 10  
`radiusX` 3822–47 79 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 2515–34 No 3825–47 6 2514–34 10 3.01.5–5.0 384.4–47 10  
`radiusY` 3822–47 79 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 2515–34 No 3825–47 6 2514–34 10 3.01.5–5.0 384.4–47 10  
`rotationAngle` 4322–47 79 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 3015–34 No 4325–47 6 3014–34 10 4.01.5–5.0 434.4–47 10  
`screenX` 22 ≤18 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 10 1.5 4.4 10  
`screenY` 22 ≤18 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 10 1.5 4.4 10  
`target` 22 ≤18 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 10 1.5 4.4 10  
`touchType` No No No No No No No No 10 No No 10  
### api.TouchEvent
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`TouchEvent` 48Chrome only supports the following `touchEventInit` properties: `touches`, `targetTouches`, `changedTouches`. 79Edge only supports the following `touchEventInit` properties: `touches`, `targetTouches`, `changedTouches`. No 35Opera only supports the following `touchEventInit` properties: `touches`, `targetTouches`, `changedTouches`. No 48Chrome Android only supports the following `touchEventInit` properties: `touches`, `targetTouches`, `changedTouches`. 46 35Opera Android only supports the following `touchEventInit` properties: `touches`, `targetTouches`, `changedTouches`. 3.2 5.0Samsung Internet only supports the following `touchEventInit` properties: `touches`, `targetTouches`, `changedTouches`. 48WebView Android only supports the following `touchEventInit` properties: `touches`, `targetTouches`, `changedTouches`. 3.2  
`Touch_events` 22 79 5218–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 3.2 1.5 4.4 3.2  
`altKey` 22 79 5218–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 3.2 1.5 4.4 3.2  
`changedTouches` 22 79 5218–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 3.2 1.5 4.4 3.2  
`ctrlKey` 22 79 5218–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 3.2 1.5 4.4 3.2  
`metaKey` 22 79 5218–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 3.2 1.5 4.4 3.2  
`shiftKey` 22 79 5218–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 3.2 1.5 4.4 3.2  
`targetTouches` 22 79 5218–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 3.2 1.5 4.4 3.2  
`touches` 22 79 5218–24Removed in bug 888304 due to web compatibility issues. 15 No 25 6 14 3.2 1.5 4.4 3.2  
### api.TouchList
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Touch_events` 18 ≤18 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 15 No 18 6 14 2 1.0 4.4 2  
`item` 18 ≤18 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 15 No 18 6 14 2 1.0 4.4 2  
`length` 18 ≤18 52This interface is only exposed if a touch input device is detected.18–24Removed in bug 888304 due to web compatibility issues. 15 No 18 6 14 2 1.0 4.4 2  
# Summarizer API
The Summarizer API summarizes a given body of text via a browser's internal AI model (which may differ between browsers).
## Concepts and usage
Writing a summary of a larger body of text is a common writing task, and one that AI is well-suited to. Typical use cases include:
  * Providing a summary of a full article so the reader can judge whether to read the whole thing.
  * Summarizing a meeting transcript so those joining the meeting late can get up to speed with what they've missed.
  * Summarizing a set of product reviews to quickly communicate overall sentiment.


The Summarizer API provides an asynchronous (`Promise`-based) mechanism for a website to feed a body of text into the browser's own internal AI model and request that it returns a summary of the text based on specified options.
This is done using the functionality made available by the `Summarizer` interface, in a two-step process:
  1. Create a `Summarizer` object instance using the `Summarizer.create()` static method, specifying options for what kind of summary you want written. Options include length, type (for example, "tldr" or key points), format (plain text or markdown), and input and output languages. 
Note: If you want to check whether the browser AI model is able to support your preferences, you can do so with the `Summarizer.availability()` static method.
  2. Run the `Summarizer.summarize()` instance method to request the summary.


After a `Summarizer` instance has been created, you can remove it again using the `Summarizer.destroy()` instance method. You can also cancel a pending `create()` or `summarize()` operation using an `AbortController`.
See Using the Summarizer API for a walkthrough of how the API works.
## Interfaces
`Summarizer` Experimental
    
Contains all the functionality for the Summarizer API, including checking AI model availability, creating a new `Summarizer` instance, using it to generate a new summary, and more.
## HTTP headers
`Permissions-Policy`; the `summarizer` directive
    
Controls access to the Summarizer API. Where a policy specifically disallows the use of the Summarizer API, any attempts to call the API's methods will fail with a `NotAllowedError` `DOMException`.
## Security considerations
The specification requires that a user has recently interacted with the page when creating `Summarizer` objects (transient user activation is required).
In addition, the specification controls access to the API via `summarizer` `Permissions-Policy` directives.
## Examples
For a full example, see Using the Summarizer API.
  * Summarize with built-in AI on developer.chrome.com (2025)
  * Web AI demos on chrome.dev


# Contact Picker API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Contact Picker API allows users to select entries from their contact list and share limited details of the selected entries with a website or application.
Note: This API is not available in Web Workers (not exposed via `WorkerNavigator`).
## Contact Picker API Concepts and Usage
Access to contacts has long been a feature available within native applications. The Contacts Picker API brings that functionality to web applications.
Use cases include selecting contacts to message via an email or chat application, selecting a contacts phone number for use with voice over IP (VOIP), or for discovering contacts who have already joined a social platform. User agents can also offer a consistent experience with other applications on a users device.
When calling the `select` method of the `ContactsManager` interface, the user is presented with a contact picker, whereby they can then select contact information to share with the web application. User interaction is required before permission to display the contact picker is granted and access to contacts is not persistent; the user must grant access every time a request is made by the application.
This API is only available from a secure top-level browsing context and very carefully considers the sensitivity and privacy of contact data. The onus is on the user for choosing data to share and only allows specific data for selected contacts, with no access to any data for other contacts.
## Interfaces
`ContactAddress`
    
Represents a physical address.
`ContactsManager`
    
Provides a way for users to select and share limited details of contacts with a web application.
`Navigator.contacts`
    
Returns a `ContactsManager` object instance, from which all other functionality can be accessed.
## Examples
>
### Feature Detection
The following code checks whether the Contact Picker API is supported.
    
    const supported = "contacts" in navigator;
    
### Checking for Supported Properties
The following asynchronous function uses the `getProperties()` method to check for supported properties.
    
    async function checkProperties() {
      const supportedProperties = await navigator.contacts.getProperties();
      if (supportedProperties.includes("name")) {
        // run code for name support
      }
      if (supportedProperties.includes("email")) {
        // run code for email support
      }
      if (supportedProperties.includes("tel")) {
        // run code for telephone number support
      }
      if (supportedProperties.includes("address")) {
        // run code for address support
      }
      if (supportedProperties.includes("icon")) {
        // run code for avatar support
      }
    }
    
### Selecting Contacts
The following example sets an array of properties to be retrieved for each contact, as well as setting an options object to allow for multiple contacts to be selected.
An asynchronous function is then defined which uses the `select()` method to present the user with a contact picker interface and handle the chosen results.
    
    const props = ["name", "email", "tel", "address", "icon"];
    const opts = { multiple: true };
    
    async function getContacts() {
      try {
        const contacts = await navigator.contacts.select(props, opts);
        handleResults(contacts);
      } catch (ex) {
        // Handle any errors here.
      }
    }
    
`handleResults()` is a developer defined function.
  * A Contact Picker for the Web
  * Contact Picker API live demo


# TextDecoder
Note: This feature is available in Web Workers.
The `TextDecoder` interface represents a decoder for a specific text encoding, such as `UTF-8`, `ISO-8859-2`, or `GBK`. A decoder takes an array of bytes as input and returns a JavaScript string.
## Constructor
`TextDecoder()`
    
Creates and returns a new `TextDecoder`.
## Instance properties
The `TextDecoder` interface doesn't inherit any properties.
`TextDecoder.encoding` Read only
    
A string containing the name of the character encoding system that this `TextDecoder` will use.
`TextDecoder.fatal` Read only
    
A boolean indicating whether the error mode is fatal.
`TextDecoder.ignoreBOM` Read only
    
A boolean indicating whether the byte order mark is ignored.
## Instance methods
The `TextDecoder` interface doesn't inherit any methods.
`TextDecoder.decode()`
    
Decodes the given bytes into a JavaScript string and returns it.
## Examples
>
### Decoding UTF-8 text
This example shows how to decode the UTF-8 encoding of the character "𠮷".
    
    <button id="decode">Decode</button>
    <button id="reset">Reset</button>
    <div id="output"></div>
    
    
    const utf8decoder = new TextDecoder(); // default 'utf-8'
    const encodedText = new Uint8Array([240, 160, 174, 183]);
    
    const output = document.querySelector("#output");
    const decodeButton = document.querySelector("#decode");
    decodeButton.addEventListener("click", () => {
      output.textContent = utf8decoder.decode(encodedText);
    });
    
    const resetButton = document.querySelector("#reset");
    resetButton.addEventListener("click", () => {
      window.location.reload();
    });
    
### Decoding non-UTF8 text
In this example, we decode the Russian text "Привет, мир!", which means "Hello, world." In our `TextDecoder()` constructor, we specify the Windows-1251 character encoding.
    
    <button id="decode">Decode</button>
    <button id="reset">Reset</button>
    <div id="decoded"></div>
    
    
    const win1251decoder = new TextDecoder("windows-1251");
    const encodedText = new Uint8Array([
      207, 240, 232, 226, 229, 242, 44, 32, 236, 232, 240, 33,
    ]);
    
    const decoded = document.querySelector("#decoded");
    const decodeButton = document.querySelector("#decode");
    decodeButton.addEventListener("click", () => {
      decoded.textContent = win1251decoder.decode(encodedText);
    });
    
    const resetButton = document.querySelector("#reset");
    resetButton.addEventListener("click", () => {
      window.location.reload();
    });
    
  * The `TextEncoder` interface describing the inverse operation.


# GPURenderBundle
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPURenderBundle` interface of the WebGPU API represents a container for pre-recorded bundles of commands.
The command bundles are encoded using a `GPURenderBundleEncoder`; once the desired commands have been encoded, they are recorded into a `GPURenderBundle` object instance using the `GPURenderBundleEncoder.finish()` method.
These command bundles can then be reused across multiple render passes by passing the `GPURenderBundle` objects into `GPURenderPassEncoder.executeBundles()` calls. Reusing pre-recoded commands can significantly improve app performance in situations where JavaScript draw call overhead is a bottleneck. Render bundles are most effective in situations where a batch of objects will be drawn the same way across multiple views or frames, with the only differences being the buffer content being used (such as updated matrix uniforms).
A good example is VR rendering. Recording the rendering as a render bundle and then tweaking the view matrix and replaying it for each eye is a more efficient way to issue draw calls for both renderings of the scene.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Examples
In the WebGPU Samples Animometer example, a lot of like operations are done on many different objects simultaneously. A render bundle is encoded using the following function:
    
    function recordRenderPass(
      passEncoder: GPURenderBundleEncoder | GPURenderPassEncoder
    ) {
      if (settings.dynamicOffsets) {
        passEncoder.setPipeline(dynamicPipeline);
      } else {
        passEncoder.setPipeline(pipeline);
      }
      passEncoder.setVertexBuffer(0, vertexBuffer);
      passEncoder.setBindGroup(0, timeBindGroup);
      const dynamicOffsets = [0];
      for (let i = 0; i < numTriangles; ++i) {
        if (settings.dynamicOffsets) {
          dynamicOffsets[0] = i * alignedUniformBytes;
          passEncoder.setBindGroup(1, dynamicBindGroup, dynamicOffsets);
        } else {
          passEncoder.setBindGroup(1, bindGroups[i]);
        }
        passEncoder.draw(3, 1, 0, 0);
      }
    }
    
Later on, a `GPURenderBundleEncoder` is created, the function is invoked, and the render bundle is recorded using `GPURenderBundleEncoder.finish()`:
    
    const renderBundleEncoder = device.createRenderBundleEncoder({
      colorFormats: [presentationFormat],
    });
    recordRenderPass(renderBundleEncoder);
    const renderBundle = renderBundleEncoder.finish();
    
`GPURenderPassEncoder.executeBundles()` is then used to reuse the work across multiple render passes to improve performance. Study the example code listing for the full context.
    
    // …
    
    return function doDraw(timestamp) {
      if (startTime === undefined) {
        startTime = timestamp;
      }
      uniformTime[0] = (timestamp - startTime) / 1000;
      device.queue.writeBuffer(uniformBuffer, timeOffset, uniformTime.buffer);
    
      renderPassDescriptor.colorAttachments[0].view = context
        .getCurrentTexture()
        .createView();
    
      const commandEncoder = device.createCommandEncoder();
      const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    
      if (settings.renderBundles) {
        passEncoder.executeBundles([renderBundle]);
      } else {
        recordRenderPass(passEncoder);
      }
    
      passEncoder.end();
      device.queue.submit([commandEncoder.finish()]);
    };
    
    // …
    
  * The WebGPU API


# SVGPointList
The `SVGPointList` interface represents a list of `DOMPoint` objects.
An `SVGPointList` can be designated as read-only, which means that attempts to modify the object will result in an exception being thrown.
## Instance properties
`SVGPointList.length` Read only
    
Returns the number of points in the list.
`SVGPointList.numberOfItems` Read only
    
Returns the number of points in the list.
## Instance methods
`SVGPointList.clear()`
    
Removes all items in the list.
`SVGPointList.initialize()`
    
First removes all items in the list, then adds a single value to the list.
`SVGPointList.getItem()`
    
Gets an item from the list at a specified position.
`SVGPointList.insertItemBefore()`
    
Inserts an element into the list at a specified position.
`SVGPointList.replaceItem()`
    
Replaces an item in the list with a new item.
`SVGPointList.removeItem()`
    
Removes an item from the list.
`SVGPointList.appendItem()`
    
Adds an item to the end of the list.
## Examples
The following example shows an SVG which contains a `<polyline>` with five coordinate pairs. The `points` property returns an `SVGPointList`.
    
    <svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
      <polyline
        id="example"
        stroke="black"
        fill="none"
        points="50,0 21,90 98,35 2,35 79,90" />
    </svg>
    
    
    const example = document.getElementById("example");
    console.log(example.points); // An SVGPointList
    
# SVGFEMergeNodeElement
The `SVGFEMergeNodeElement` interface corresponds to the `<feMergeNode>` element.
EventTarget  Node  Element  SVGElement  SVGFEMergeNodeElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEMergeNodeElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
  * `<feMergeNode>`


# DataTransferItem
The `DataTransferItem` object represents one drag data item. During a drag operation, each `DragEvent` has a `dataTransfer` property which contains a `list` of drag data items. Each item in the list is a `DataTransferItem` object.
`DataTransferItem` was primarily designed for the HTML Drag and Drop API, and is still specified in the HTML drag-and-drop section, but it is now also used by other APIs, such as `ClipboardEvent.clipboardData` and `InputEvent.dataTransfer`. Documentation of `DataTransferItem` will primarily discuss its usage in drag-and-drop operations, and you should refer to the other APIs' documentation for usage of `DataTransferItem` in those contexts.
This interface has no constructor.
## Instance properties
`DataTransferItem.kind` Read only
    
The kind of drag data item, `string` or `file`.
`DataTransferItem.type` Read only
    
The drag data item's type, typically a MIME type.
## Instance methods
`DataTransferItem.getAsFile()`
    
Returns the `File` object associated with the drag data item (or null if the drag item is not a file).
`DataTransferItem.getAsFileSystemHandle()` Experimental
    
Returns a `Promise` that fulfills with a `FileSystemFileHandle` if the dragged item is a file, or fulfills with a `FileSystemDirectoryHandle` if the dragged item is a directory.
`DataTransferItem.getAsString()`
    
Invokes the specified callback with the drag data item string as its argument.
`DataTransferItem.webkitGetAsEntry()`
    
Returns an object based on `FileSystemEntry` representing the selected file's entry in its file system. This will generally be either a `FileSystemFileEntry` or `FileSystemDirectoryEntry` object.
## Example
All of this interface's methods and properties have their own reference page, and each reference page has an example of its usage.
# AudioSinkInfo
The `AudioSinkInfo` interface of the Web Audio API represents information describing an `AudioContext`'s sink ID, retrieved via `AudioContext.sinkId`.
## Instance properties
`type` Read only Experimental
    
Returns the type of the audio output device.
## Examples
If a new `AudioContext` is created with a `sinkId` value of `{ type: 'none' }`, calling `AudioContext.sinkId` later in the code will return a `AudioSinkInfo` object containing `type: 'none'`. This is currently the only value available.
    
    audioCtx = new window.AudioContext({
      sinkId: { type: "none" },
    });
    
    // …
    
    audioCtx.sinkId;
    
  * SetSinkId test example (check out the source code)
  * `AudioContext.setSinkId()`
  * `AudioContext.sinkId`
  * `sinkchange`


# SVGAnimatedEnumeration
The `SVGAnimatedEnumeration` interface describes attribute values which are constants from a particular enumeration and which can be animated.
## Instance properties
`baseVal`
    
An integer that is the base value of the given attribute before applying any animations.
`animVal`
    
If the given attribute or property is being animated, it contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, it contains the same value as `baseVal`.
## Instance methods
The `SVGAnimatedEnumeration` interface do not provide any specific methods.
## Examples
Considering this snippet with a `<clipPath>` element: Its `clipPathUnits` is associated with a `SVGAnimatedEnumeration` object.
    
    <svg viewBox="0 0 100 100" width="200" height="200">
      <clipPath id="clip1" clipPathUnits="userSpaceOnUse">
        <circle cx="50" cy="50" r="35" />
      </clipPath>
    
      <!-- Some reference rect to materialized to clip path -->
      <rect id="r1" x="0" y="0" width="45" height="45" />
    </svg>
    
This snippet gets the element, and logs the `baseVal` and `animVal` of the `SVGClipPathElement.clipPathUnits` property. As no animation is happening, they have the same value.
    
    const clipPathElt = document.getElementById("clip1");
    console.log(clipPathElt.clipPathUnits.baseVal); // Logs 1 that correspond to userSpaceOnUse
    console.log(clipPathElt.clipPathUnits.animVal); // Logs 1 that correspond to userSpaceOnUse
    
# OES_texture_float_linear extension
The `OES_texture_float_linear` extension is part of the WebGL API and allows linear filtering with floating-point pixel types for textures.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is available to both, WebGL1 and WebGL2 contexts.
## Linear filtering
The `OES_texture_float` extension alone does not allow linear filtering with floating-point textures. This extension enables this ability.
With the help of this extension, you can now set the magnification or minification filter in the `WebGLRenderingContext.texParameter()` method to one of `gl.LINEAR`, `gl.LINEAR_MIPMAP_NEAREST`, `gl.NEAREST_MIPMAP_LINEAR`, or `gl.LINEAR_MIPMAP_LINEAR`, and use floating-point textures.
## Examples
    
    gl.getExtension("OES_texture_float");
    gl.getExtension("OES_texture_float_linear");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.FLOAT, image);
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.texImage2D()`
  * `WebGLRenderingContext.texSubImage2D()`
  * `OES_texture_float`
  * `OES_texture_half_float`
  * `OES_texture_half_float_linear`


# PerformanceServerTiming
Note: This feature is available in Web Workers.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PerformanceServerTiming` interface surfaces server metrics that are sent with the response in the `Server-Timing` HTTP header.
This interface is restricted to the same origin, but you can use the `Timing-Allow-Origin` header to specify the domains that are allowed to access the server metrics. Note that this interface is only available in secure contexts (HTTPS) in some browsers.
## Instance properties
`PerformanceServerTiming.description` Read only
    
A string value of the server-specified metric description, or an empty string.
`PerformanceServerTiming.duration` Read only
    
A double that contains the server-specified metric duration, or value `0.0`.
`PerformanceServerTiming.name` Read only
    
A string value of the server-specified metric name.
## Instance methods
`PerformanceServerTiming.toJSON()`
    
Returns a JSON representation of the `PerformanceServerTiming` object.
## Example
Given a server that sends the `Server-Timing` header, for example a Node.js server like this:
    
    const http = require("http");
    
    function requestHandler(request, response) {
      const headers = {
        "Server-Timing": `
          cache;desc="Cache Read";dur=23.2,
          db;dur=53,
          app;dur=47.2
        `.replace(/\n/g, ""),
      };
      response.writeHead(200, headers);
      response.write("");
      return setTimeout(() => {
        response.end();
      }, 1000);
    }
    
    http.createServer(requestHandler).listen(3000).on("error", console.error);
    
The `PerformanceServerTiming` entries are now observable from JavaScript via the `PerformanceResourceTiming.serverTiming` property and live on `navigation` and `resource` entries.
Example using a `PerformanceObserver`, which notifies of new `navigation` and `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
    
    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        entry.serverTiming.forEach((serverEntry) => {
          console.log(
            `${serverEntry.name} (${serverEntry.description}) duration: ${serverEntry.duration}`,
          );
          // Logs "cache (Cache Read) duration: 23.2"
          // Logs "db () duration: 53"
          // Logs "app () duration: 47.2"
        });
      });
    });
    
    ["navigation", "resource"].forEach((type) =>
      observer.observe({ type, buffered: true }),
    );
    
Example using `Performance.getEntriesByType()`, which only shows `navigation` and `resource` performance entries present in the browser's performance timeline at the time you call this method:
    
    for (const entryType of ["navigation", "resource"]) {
      for (const { name: url, serverTiming } of performance.getEntriesByType(
        entryType,
      )) {
        if (serverTiming) {
          for (const { name, description, duration } of serverTiming) {
            console.log(`${name} (${description}) duration: ${duration}`);
            // Logs "cache (Cache Read) duration: 23.2"
            // Logs "db () duration: 53"
            // Logs "app () duration: 47.2"
          }
        }
      }
    }
    
  * `Server-Timing`
  * `PerformanceResourceTiming.serverTiming`


# InputDeviceCapabilities
The `InputDeviceCapabilities` interface of the Input Device Capabilities API provides information about the physical device or a group of related devices responsible for generating input events. Events caused by the same physical input device get the same instance of this object, but the converse isn't true. For example, two mice with the same capabilities in a system may appear as a single `InputDeviceCapabilities` instance.
In some instances, `InputDeviceCapabilities` represents the capabilities of logical devices rather than physical devices. This allows, for example, touchscreen keyboards and physical keyboards to be represented the same way when they produce the same input.
## Constructors
`InputDeviceCapabilities()` Experimental
    
Creates an `InputDeviceCapabilities` object.
## Instance properties
`InputDeviceCapabilities.firesTouchEvents` Read only Experimental
    
A `Boolean` that indicates whether the device dispatches touch events.
## Instance methods
None.
# URL
Note: This feature is available in Web Workers.
The `URL` interface is used to parse, construct, normalize, and encode URLs. It works by providing properties which allow you to easily read and modify the components of a URL.
You normally create a new `URL` object by specifying the URL as a string when calling its constructor, or by providing a relative URL and a base URL. You can then easily read the parsed components of the URL or make changes to the URL.
## Constructor
`URL()`
    
Creates and returns a `URL` object from a URL string and optional base URL string. Throws if the passed arguments don't define a valid URL.
## Instance properties
`hash`
    
A string containing a `'#'` followed by the fragment identifier of the URL.
`host`
    
A string containing the domain (that is the hostname) followed by (if a port was specified) a `':'` and the port of the URL.
`hostname`
    
A string containing the domain of the URL.
`href`
    
A stringifier that returns a string containing the whole URL.
`origin` Read only
    
Returns a string containing the origin of the URL, that is its scheme, its domain and its port.
`password`
    
A string containing the password specified before the domain name.
`pathname`
    
A string containing an initial `'/'` followed by the path of the URL, not including the query string or fragment.
`port`
    
A string containing the port number of the URL.
`protocol`
    
A string containing the protocol scheme of the URL, including the final `':'`.
`search`
    
A string indicating the URL's parameter string; if any parameters are provided, this string includes all of them, beginning with the leading `?` character.
`searchParams` Read only
    
A `URLSearchParams` object which can be used to access the individual query parameters found in `search`.
`username`
    
A string containing the username specified before the domain name.
## Static methods
`canParse()`
    
Returns a boolean indicating whether or not a URL defined from a URL string and optional base URL string is parsable and valid.
`createObjectURL()`
    
Returns a string containing a unique blob URL, that is a URL with `blob:` as its scheme, followed by an opaque string uniquely identifying the object in the browser.
`parse()`
    
Creates and returns a `URL` object from a URL string and optional base URL string, or returns `null` if the passed parameters define an invalid `URL`.
`revokeObjectURL()`
    
Revokes an object URL previously created using `URL.createObjectURL()`.
## Instance methods
`toString()`
    
Returns a string containing the whole URL. It is a synonym for `URL.href`, though it can't be used to modify the value.
`toJSON()`
    
Returns a string containing the whole URL. It returns the same string as the `href` property.
## Usage notes
The constructor takes a `url` parameter, and an optional `base` parameter to use as a base if the `url` parameter is a relative URL:
    
    const url = new URL("../cats", "http://www.example.com/dogs");
    console.log(url.hostname); // "www.example.com"
    console.log(url.pathname); // "/cats"
    
The constructor will raise an exception if the URL cannot be parsed to a valid URL. You can either call the above code in a `try...catch` block or use the `canParse()` static method to first check the URL is valid:
    
    if (URL.canParse("../cats", "http://www.example.com/dogs")) {
      const url = new URL("../cats", "http://www.example.com/dogs");
      console.log(url.hostname); // "www.example.com"
      console.log(url.pathname); // "/cats"
    } else {
      console.log("Invalid URL");
    }
    
URL properties can be set to construct the URL:
    
    url.hash = "tabby";
    console.log(url.href); // "http://www.example.com/cats#tabby"
    
URLs are encoded according to the rules found in RFC 3986. For instance:
    
    url.pathname = "démonstration.html";
    console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
    
The `URLSearchParams` interface can be used to build and manipulate the URL query string.
To get the search params from the current window's URL, you can do this:
    
    // https://some.site/?id=123
    const parsedUrl = new URL(window.location.href);
    console.log(parsedUrl.searchParams.get("id")); // "123"
    
The `toString()` method of `URL` just returns the value of the `href` property, so the constructor can be used to normalize and encode a URL directly.
    
    const response = await fetch(
      new URL("http://www.example.com/démonstration.html"),
    );
    
  * Polyfill of `URL` in `core-js`
  * URL API
  * What is a URL?
  * `URLSearchParams`.


# BackgroundFetchEvent
Note: This feature is only available in Service Workers.
The `BackgroundFetchEvent` interface of the Background Fetch API is the event type for background fetch events dispatched on the service worker global scope.
It is the event type passed to `backgroundfetchclick` event and `backgroundfetchabort` event.
Event  ExtendableEvent  BackgroundFetchEvent 
## Constructor
`BackgroundFetchEvent()` Experimental
    
Creates a new `BackgroundFetchEvent` object. This constructor is not typically used, as the browser creates these objects itself and provides them to background fetch event callbacks.
## Instance properties
Also inherits properties from its parent, `ExtendableEvent`.
`BackgroundFetchEvent.registration` Read only Experimental
    
Returns the `BackgroundFetchRegistration` that the event was initialized to.
## Instance methods
Also inherits methods from its parent, `ExtendableEvent`.
None.
## Examples
In this example, if the user clicks on the user interface displaying the download progress, a new window will open. The current `BackgroundFetchRegistration` is returned by calling `event.registration`.
    
    addEventListener("backgroundfetchclick", (event) => {
      const bgFetch = event.registration;
    
      if (bgFetch.result === "success") {
        clients.openWindow("/latest-podcasts");
      } else {
        clients.openWindow("/download-progress");
      }
    });
    
# SharedStorageWorkletGlobalScope
The `SharedStorageWorkletGlobalScope` interface of the Shared Storage API represents the global scope of a `SharedStorageWorklet` module.
WorkletGlobalScope  SharedStorageWorkletGlobalScope 
## Instance properties
`sharedStorage` Experimental
    
Contains an instance of the `WorkletSharedStorage` object, representing the shared storage for a particular origin as exposed in a worklet context.
## Instance methods
`register()` Experimental
    
Registers an operation defined inside the current worklet module.
## Examples
    
    // ab-testing-worklet.js
    class SelectURLOperation {
      async run(urls, data) {
        // Read the user's experiment group from shared storage
        const experimentGroup = await this.sharedStorage.get("ab-testing-group");
    
        // Return the group number
        return experimentGroup;
      }
    }
    
    register("ab-testing", SelectURLOperation);
    
See the Shared Storage API landing page for a walkthrough of this example and links to other examples.
  * Shared Storage API


# EXT_color_buffer_half_float extension
The `EXT_color_buffer_half_float` extension is part of the WebGL API and adds the ability to render to 16-bit floating-point color buffers.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is available to both, WebGL1 and WebGL2 contexts. On WebGL 2, it's an alternative to using the `EXT_color_buffer_float` extension on platforms that support 16-bit floating point render targets but not 32-bit floating point render targets.
The `OES_texture_half_float` extension implicitly enables this extension.
## Constants
`ext.RGBA16F_EXT`
    
RGBA 16-bit floating-point color-renderable format.
`ext.RGB16F_EXT`
    
RGB 16-bit floating-point format. In WebGL 1.0, this may be color-renderable (implementation-dependent). In WebGL 2.0, this format is not color-renderable.
`ext.FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT`
    
Passed to `WebGLRenderingContext.getFramebufferAttachmentParameter()` to get the framebuffer type.
`ext.UNSIGNED_NORMALIZED_EXT`
    
The framebuffer contains unsigned fixed-point components.
## Extended methods
This extension extends `WebGLRenderingContext.renderbufferStorage()`:
  * In WebGL 1.0 contexts, the `internalFormat` parameter now accepts `ext.RGBA16F_EXT` and `ext.RGB16F_EXT`. However, `ext.RGB16F_EXT` support is optional and applications must check framebuffer completeness to determine if it's supported.
  * In WebGL 2.0 contexts, the `internalFormat` parameter now accepts `ext.RGBA16F_EXT`. The `RGB16F` format is not color-renderable in WebGL 2.0.


It extends `WebGLRenderingContext.getFramebufferAttachmentParameter()`:
  * In WebGL 1.0 contexts, the `pname` parameter now accepts `ext.FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT`. An `INVALID_OPERATION` error is generated if `attachment` is `DEPTH_STENCIL_ATTACHMENT` and `pname` is `FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT`. When `pname` is `ext.FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT`, `getFramebufferAttachmentParameter()` returns either `gl.FLOAT` or `gl.UNSIGNED_NORMALIZED_EXT` for floating-point or unsigned fixed-point components respectively.


## Examples
    
    const ext = gl.getExtension("EXT_color_buffer_half_float");
    
    gl.renderbufferStorage(gl.RENDERBUFFER, ext.RGBA16F_EXT, 256, 256);
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.renderbufferStorage()`
  * `OES_texture_half_float`


# GPUError
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUError` interface of the WebGPU API is the base interface for errors surfaced by `GPUDevice.popErrorScope` and the `uncapturederror` event.
## Instance properties
`message` Read only
    
A string providing a human-readable message that explains why the error occurred.
## Examples
For usage examples of error objects based on `GPUError`, see:
  * `GPUDevice.popErrorScope`
  * The `GPUDevice uncapturederror` event
  * `GPUInternalError`, `GPUOutOfMemoryError`, and `GPUValidationError`


  * The WebGPU API
  * WebGPU Error Handling best practices


# VideoEncoder
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Dedicated Web Workers.
The `VideoEncoder` interface of the WebCodecs API encodes `VideoFrame` objects into `EncodedVideoChunk`s.
EventTarget  VideoEncoder 
## Constructor
`VideoEncoder()`
    
Creates a new `VideoEncoder` object.
## Instance properties
Inherits properties from its parent, `EventTarget`.
`VideoEncoder.encodeQueueSize` Read only
    
An integer representing the number of encode queue requests.
`VideoEncoder.state` Read only
    
Represents the state of the underlying codec and whether it is configured for encoding.
### Events
`dequeue`
    
Fires to signal a decrease in `VideoEncoder.encodeQueueSize`.
## Static methods
`VideoEncoder.isConfigSupported()`
    
Returns a promise indicating whether the provided `VideoEncoderConfig` is supported.
## Instance methods
Inherits methods from its parent, `EventTarget`.
`VideoEncoder.configure()`
    
Asynchronously prepares the encoder to accept video frames for encoding with the specified parameters.
`VideoEncoder.encode()`
    
Asynchronously encodes a `VideoFrame`.
`VideoEncoder.flush()`
    
Returns a promise that resolves once all pending encodes have been completed.
`VideoEncoder.reset()`
    
Cancels all pending encodes and callbacks.
`VideoEncoder.close()`
    
Ends all pending work and releases system resources.
Video processing with WebCodecs
# HTMLTableElement
The `HTMLTableElement` interface provides special properties and methods (beyond the regular `HTMLElement` object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.
EventTarget  Node  Element  HTMLElement  HTMLTableElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLTableElement.caption`
    
A `HTMLTableCaptionElement` representing the first `<caption>` that is a child of the element, or `null` if none is found. When set, if the object doesn't represent a `<caption>`, a `DOMException` with the `HierarchyRequestError` name is thrown. If a correct object is given, it is inserted in the tree as the first child of this element and the first `<caption>` that is a child of this element is removed from the tree, if any.
`HTMLTableElement.tHead`
    
A `HTMLTableSectionElement` representing the first `<thead>` that is a child of the element, or `null` if none is found. When set, if the object doesn't represent a `<thead>`, a `DOMException` with the `HierarchyRequestError` name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a `<caption>`, nor a `<colgroup>`, or as the last child if there is no such element, and the first `<thead>` that is a child of this element is removed from the tree, if any.
`HTMLTableElement.tFoot`
    
A `HTMLTableSectionElement` representing the first `<tfoot>` that is a child of the element, or `null` if none is found. When set, if the object doesn't represent a `<tfoot>`, a `DOMException` with the `HierarchyRequestError` name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a `<caption>`, a `<colgroup>`, nor a `<thead>`, or as the last child if there is no such element, and the first `<tfoot>` that is a child of this element is removed from the tree, if any.
`HTMLTableElement.rows` Read only
    
Returns a live `HTMLCollection` containing all the rows of the element, that is all `<tr>` that are a child of the element, or a child of one of its `<thead>`, `<tbody>` and `<tfoot>` children. The rows members of a `<thead>` appear first, in tree order, and those members of a `<tbody>` last, also in tree order. The `HTMLCollection` is live and is automatically updated when the `HTMLTableElement` changes.
`HTMLTableElement.tBodies` Read only
    
Returns a live `HTMLCollection` containing all the `<tbody>` of the element. The `HTMLCollection` is live and is automatically updated when the `HTMLTableElement` changes.
### Obsolete Properties
Warning: The following properties are obsolete. You should avoid using them.
`HTMLTableElement.align` Deprecated
    
A string containing an enumerated value reflecting the `align` attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are `"left"`, `"right"`, and `"center"`.
`HTMLTableElement.bgColor` Deprecated
    
A string containing the background color of the cells. It reflects the obsolete `bgColor` attribute.
`HTMLTableElement.border` Deprecated
    
A string containing the width in pixels of the border of the table. It reflects the obsolete `border` attribute.
`HTMLTableElement.cellPadding` Deprecated
    
A string containing the width in pixels of the horizontal and vertical space between cell content and cell borders. It reflects the obsolete `cellpadding` attribute.
`HTMLTableElement.cellSpacing` Deprecated
    
A string containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsolete `cellspacing` attribute.
`HTMLTableElement.frame` Deprecated
    
A string containing the type of the external borders of the table. It reflects the obsolete `frame` attribute and can take one of the following values: `"void"`, `"above"`, `"below"`, `"hsides"`, `"vsides"`, `"lhs"`, `"rhs"`, `"box"`, or `"border"`.
`HTMLTableElement.rules` Deprecated
    
A string containing the type of the internal borders of the table. It reflects the obsolete `rules` attribute and can take one of the following values: `"none"`, `"groups"`, `"rows"`, `"cols"`, or `"all"`.
`HTMLTableElement.summary` Deprecated
    
A string containing a description of the purpose or the structure of the table. It reflects the obsolete `summary` attribute.
`HTMLTableElement.width` Deprecated
    
A string containing the length in pixels or in percentage of the desired width of the entire table. It reflects the obsolete `width` attribute.
## Instance methods
Inherits methods from its parent, `HTMLElement`.
`HTMLTableElement.createTHead()`
    
Returns an `HTMLTableSectionElement` representing the first `<thead>` that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a `<caption>`, nor a `<colgroup>`, or as the last child if there is no such element.
`HTMLTableElement.deleteTHead()`
    
Removes the first `<thead>` that is a child of the element.
`HTMLTableElement.createTFoot()`
    
Returns an `HTMLTableSectionElement` representing the first `<tfoot>` that is a child of the element. If none is found, a new one is created and inserted in the tree as the last child.
`HTMLTableElement.deleteTFoot()`
    
Removes the first `<tfoot>` that is a child of the element.
`HTMLTableElement.createTBody()`
    
Returns a `HTMLTableSectionElement` representing a new `<tbody>` that is a child of the element. It is inserted in the tree after the last element that is a `<tbody>`, or as the last child if there is no such element.
`HTMLTableElement.createCaption()`
    
Returns an `HTMLElement` representing the first `<caption>` that is a child of the element. If none is found, a new one is created and inserted in the tree as the first child of the `<table>` element.
`HTMLTableElement.deleteCaption()`
    
Removes the first `<caption>` that is a child of the element.
`HTMLTableElement.insertRow()`
    
Returns an `HTMLTableRowElement` representing a new row of the table. It inserts it in the rows collection immediately before the `<tr>` element at the given `index` position. If necessary a `<tbody>` is created. If the `index` is `-1`, the new row is appended to the collection. If the `index` is smaller than `-1` or greater than the number of rows in the collection, a `DOMException` with the value `IndexSizeError` is raised.
`HTMLTableElement.deleteRow()`
    
Removes the row corresponding to the `index` given in parameter. If the `index` value is `-1` the last row is removed; if it is smaller than `-1` or greater than the amount of rows in the collection, a `DOMException` with the value `IndexSizeError` is raised.
  * The HTML element implementing this interface: `<table>`.


# FileSystemDirectoryReader
The `FileSystemDirectoryReader` interface of the File and Directory Entries API lets you access the `FileSystemFileEntry`-based objects (generally `FileSystemFileEntry` or `FileSystemDirectoryEntry`) representing each entry in a directory.
## Instance methods
`readEntries()`
    
Returns an array containing some number of the directory's entries. Each item in the array is an object based on `FileSystemEntry`—typically either `FileSystemFileEntry` or `FileSystemDirectoryEntry`.
  * File and Directory Entries API
  * `FileSystemDirectoryEntry`
  * `FileSystem`


# HTMLDetailsElement
The `HTMLDetailsElement` interface provides special properties (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating `<details>` elements.
EventTarget  Node  Element  HTMLElement  HTMLDetailsElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLDetailsElement.name`
    
A string reflecting the `name` HTML attribute, which allows you to create a group of mutually-exclusive `<details>` elements. Opening one of the named `<details>` elements of this group causes other elements of the group to close.
`HTMLDetailsElement.open`
    
A boolean value reflecting the `open` HTML attribute, indicating whether or not the element's contents (not counting the `<summary>`) is to be shown to the user.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
## Events
Inherits events from its parent interface, `HTMLElement`.
## Examples
>
### Log chapters as they are opened and closed
This example uses the `HTMLElement` `toggle` event to add and remove chapters from a log aside as they are opened and closed.
#### HTML
    
    <section id="summaries">
      <p>Chapter summaries:</p>
      <details id="ch1">
        <summary>Chapter I</summary>
        Philosophy reproves Boethius for the foolishness of his complaints against
        Fortune. Her very nature is caprice.
      </details>
      <details id="ch2">
        <summary>Chapter II</summary>
        Philosophy in Fortune's name replies to Boethius' reproaches, and proves
        that the gifts of Fortune are hers to give and to take away.
      </details>
      <details id="ch3">
        <summary>Chapter III</summary>
        Boethius falls back upon his present sense of misery. Philosophy reminds him
        of the brilliancy of his former fortunes.
      </details>
    </section>
    <aside id="log">
      <p>Open chapters:</p>
      <div data-id="ch1" hidden>I</div>
      <div data-id="ch2" hidden>II</div>
      <div data-id="ch3" hidden>III</div>
    </aside>
    
#### CSS
    
    body {
      display: flex;
    }
    
    #log {
      flex-shrink: 0;
      padding-left: 3em;
    }
    
    #summaries {
      flex-grow: 1;
    }
    
#### JavaScript
    
    function logItem(e) {
      console.log(e);
      const item = document.querySelector(`[data-id=${e.target.id}]`);
      item.toggleAttribute("hidden");
    }
    
    const chapters = document.querySelectorAll("details");
    chapters.forEach((chapter) => {
      chapter.addEventListener("toggle", logItem);
    });
    
#### Result
>
### api.HTMLDetailsElement
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`HTMLDetailsElement` 10 79 49 15 6 18 49 14 6 1.0 4.4 6  
`name` 120 120 130 106 17.2 120 130 80 17.2 25.0 120 17.2  
`open` 10 79 49 15 6 18 49 14 6 1.0 4.4 6  
### api.HTMLElement.toggle_event.details_elements
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`HTMLDetailsElement` 36 79 49 23 10.1 36 49 24 10.3 3.0 37 10.3  
  * The HTML element implementing this interface: `<details>`


# TaskPriorityChangeEvent
Note: This feature is available in Web Workers.
The `TaskPriorityChangeEvent` is the interface for the `prioritychange` event.
Event  TaskPriorityChangeEvent 
## Constructor
`TaskPriorityChangeEvent()`
    
Creates a new `TaskPriorityChangeEvent` object, setting an event name and previous priority.
## Instance properties
This interface also inherits the properties of its parent, `Event`.
`TaskPriorityChangeEvent.previousPriority` Read only
    
Returns the priority of the corresponding `TaskSignal` before this `prioritychange` event.
## Instance methods
This interface has no methods of its own, but inherits the methods of its parent, `Event`.
## Examples
An object of this type is returned in the handler for a `prioritychange` event. The code below shows a handler in which the `newPriority` and `previousPriority` are logged.
    
    // Listen for 'prioritychange' events on the controller's signal.
    controller.signal.addEventListener("prioritychange", (event) => {
      const previousPriority = event.previousPriority;
      const newPriority = event.target.priority;
      console.log(`Priority changed from ${previousPriority} to ${newPriority}.`);
    });
    
A more complete live example can be found in `prioritychange` event > Examples.
  * `prioritychange` event


# Web Locks API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The Web Locks API allows scripts running in one tab or worker to asynchronously acquire a lock, hold it while work is performed, then release it. While held, no other script executing in the same origin can acquire the same lock, which allows a web app running in multiple tabs or workers to coordinate work and the use of resources.
## Concepts and Usage
A lock is an abstract concept representing some potentially shared resource, identified by a name chosen by the web app. For example, if a web app running in multiple tabs wants to ensure that only one tab is syncing data between the network and Indexed DB, each tab could try to acquire a "my_net_db_sync" lock, but only one tab will succeed (the leader election pattern.)
The API is used as follows:
  1. The lock is requested.
  2. Work is done while holding the lock in an asynchronous task.
  3. The lock is automatically released when the task completes.


    
    navigator.locks.request("my_resource", async (lock) => {
      // The lock has been acquired.
      await do_something();
      await do_something_else();
      // Now the lock will be released.
    });
    
While a lock is held, requests for the same lock from this execution context, or from other tabs/workers, will be queued. The first queued request will be granted only when the lock is released.
The API provides optional functionality that may be used as needed, including:
  * returning values from the asynchronous task
  * shared and exclusive lock modes
  * conditional acquisition
  * diagnostics to query the state of locks in an origin
  * an escape hatch to protect against deadlocks


Locks are scoped to origins; the locks acquired by a tab from `https://example.com` have no effect on the locks acquired by a tab from `https://example.org:8080` as they are separate origins.
The main entry point is `navigator.locks.request()` which requests a lock. It takes a lock name, an optional set of options, and a callback. The callback is invoked when the lock is granted. The lock is automatically released when the callback returns, so usually the callback is an async function, which causes the lock to be released only when the async function has completely finished.
The `request()` method itself returns a promise which resolves once the lock has been released; within an async function, a script can `await` the call to make the asynchronous code flow linearly. For example:
    
    await do_something_without_lock();
    
    // Request the lock.
    await navigator.locks.request("my_resource", async (lock) => {
      // The lock has been acquired.
      await do_something_with_lock();
      await do_something_else_with_lock();
      // Now the lock will be released.
    });
    // The lock has been released.
    
    await do_something_else_without_lock();
    
### Options
Several options can be passed when requesting a lock:
  * `mode`: The default mode is "exclusive", but "shared" can be specified. There can be only one "exclusive" holder of a lock, but multiple "shared" requests can be granted at the same time. This can be used to implement the readers-writer pattern.
  * `ifAvailable`: If specified, the lock request will fail if the lock cannot be granted immediately without waiting. The callback is invoked with `null`.
  * `steal`: If specified, then any held locks with the same name will be released, and the request will be granted, preempting any queued requests for it.
  * `signal`: An `AbortSignal` can be passed in, allowing a lock request to be aborted. This can be used to implement a timeout on requests.


### Monitoring
The `navigator.locks.query()` method can be used by scripts to introspect the state of the lock manager for the origin. This can be useful when debugging, for example, identifying why a lock could not be acquired. The results are a snapshot of the lock manager state, which identifies held and requested locks and some additional data (e.g., mode) about each, at the time the snapshot was taken.
### Advanced use
For more complicated cases, such as holding the lock for an arbitrary amount of time, the callback can return a promise explicitly resolved by the script:
    
    // Capture promise control functions:
    const { promise, resolve, reject } = Promise.withResolvers();
    
    // Request the lock:
    navigator.locks.request(
      "my_resource",
      // Lock is acquired.
      (lock) => promise, // Now lock will be held until either resolve() or reject() is called.
    );
    
### Deadlocks
A deadlock occurs when a process can no longer make progress because each part is waiting on a request that cannot be satisfied. This can occur with this API in complex use-cases, for example, if multiple locks are requested out-of-order. If tab 1 holds lock A and tab 2 holds lock B, then tab 1 attempts to also acquire lock B and tab 2 attempts to also acquire lock A, neither request can be granted. Web applications can avoid this through several strategies, such as ensuring lock requests are not nested, or are always well ordered, or have timeouts. Note that such deadlocks only affect the locks themselves and code depending on them; the browser, other tabs, and other script in the page is not affected.
## Interfaces
`Lock`
    
Provides the name and mode of a previously requested lock, which is received in the callback to `LockManager.request()`.
`LockManager`
    
Provides methods for requesting a new `Lock` object and querying for an existing `Lock` object. To get an instance of `LockManager`, call `navigator.locks`.
### Extensions to other interfaces
`Navigator.locks` Read only
    
Returns a `LockManager` object that provides methods for requesting a new `Lock` object and querying for an existing `Lock` object.
`WorkerNavigator.locks` Read only
    
Returns a `LockManager` object which provides methods for requesting a new `Lock` object and querying for an existing `Lock` object.
>
### api.LockManager
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_Locks_API` 69 79 96 56 15.4 69 96 48 15.4 10.0 69 15.4  
`query` 69 79 96 56 15.4 69 96 48 15.4 10.0 69 15.4  
`request` 69 79 96 56 15.4 69 96 48 15.4 10.0 69 15.4  
### api.Lock
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_Locks_API` 69 79 96 56 15.4 69 96 48 15.4 10.0 69 15.4  
`mode` 69 79 96 56 15.4 69 96 48 15.4 10.0 69 15.4  
`name` 69 79 96 56 15.4 69 96 48 15.4 10.0 69 15.4  
# Gamepad API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Gamepad API is a way for developers to access and respond to signals from gamepads and other game controllers in a simple, consistent way. It contains three interfaces, two events and one specialist function, to respond to gamepads being connected and disconnected, and to access other information about the gamepads themselves, and what buttons and other controls are currently being pressed.
## Interfaces
`Gamepad`
    
Represents a gamepad/controller connected to the computer.
`GamepadButton`
    
Represents a button on one of the connected controllers.
`GamepadEvent`
    
The event object representing events fired that are related to gamepads.
### Experimental Gamepad extensions
`GamepadHapticActuator`
    
Represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.
`GamepadPose`
    
Represents the pose of a controller (e.g., position and orientation in 3D space) in the case of a WebVR controller. This is not used by the newer WebXR standard.
### Extensions to other interfaces
#### Navigator
`Navigator.getGamepads()`
    
An extension to the `Navigator` object that returns an array of `Gamepad` objects, one for each connected gamepad.
#### Window events
`gamepadconnected`
    
An event that will fire when a gamepad is connected.
`gamepaddisconnected`
    
An event that will fire when a gamepad is disconnected.
## Tutorials and guides
  * Using the Gamepad API
  * Implementing controls using the Gamepad API


  * The Gamepad API by Ted Mielczarek and Robert Nyman
  * Simple API demo page (source)


# MediaMetadata
The `MediaMetadata` interface of the Media Session API allows a web page to provide rich media metadata for display in a platform UI.
## Constructor
`MediaMetadata()`
    
Creates a new `MediaMetaData` object.
## Instance properties
`MediaMetadata.album`
    
Returns or sets the name of the album or collection containing the media to be played.
`MediaMetadata.artist`
    
Returns or sets the name of the artist, group, creator, etc. of the media to be played.
`MediaMetadata.artwork`
    
Returns or sets an array of images associated with playing media.
`MediaMetadata.chapterInfo` Read only Experimental
    
Returns an array of chapter information metadata associated with playing media, represented by `ChapterInformation` object instances.
`MediaMetadata.title`
    
Returns or sets the title of the media to be played.
## Examples
The following example checks for browser compatibility and sets the current metadata for the media session.
    
    if ("mediaSession" in navigator) {
      navigator.mediaSession.metadata = new MediaMetadata({
        title: "Unforgettable",
        artist: "Nat King Cole",
        album: "The Ultimate Collection (Remastered)",
        artwork: [
          {
            src: "https://dummyimage.com/96x96",
            sizes: "96x96",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/128x128",
            sizes: "128x128",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/192x192",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/256x256",
            sizes: "256x256",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/384x384",
            sizes: "384x384",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/512x512",
            sizes: "512x512",
            type: "image/png",
          },
        ],
      });
    }
    
# SVGCircleElement
The `SVGCircleElement` interface is an interface for the `<circle>` element.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGGeometryElement  SVGCircleElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGeometryElement`.
`SVGCircleElement.cx` Read only
    
This property defines the x-coordinate of the center of the `<circle>` element. It is denoted by the `cx` attribute of the element.
`SVGCircleElement.cy` Read only
    
This property defines the y-coordinate of the center of the `<circle>` element. It is denoted by the `cy` attribute of the element.
`SVGCircleElement.r` Read only
    
This property defines the radius of the `<circle>` element. It is denoted by the `r` of the element.
## Instance methods
Inherits methods from its parent interface, `SVGGeometryElement`.
## Examples
>
### Resizing a circle
In this example we draw a circle and randomly increase or decrease its radius when you click it.
#### HTML
    
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 250 250"
      width="250"
      height="250">
      <circle cx="100" cy="100" r="50" fill="gold" id="circle" />
    </svg>
    
#### JavaScript
    
    const circle = document.getElementById("circle");
    
    function clickCircle() {
      // Randomly determine if the circle radius will increase or decrease
      const change = Math.random() > 0.5 ? 10 : -10;
      // Clamp the circle radius to a minimum of 10 and a maximum of 250,
      // so it won't disappear or get bigger than the viewport
      const newValue = Math.min(Math.max(circle.r.baseVal.value + change, 10), 250);
      circle.setAttribute("r", newValue);
    }
    
    circle.addEventListener("click", clickCircle);
    
  * `<circle>` SVG element


# Performance
Note: This feature is available in Web Workers.
The `Performance` interface provides access to performance-related information for the current page.
Performance entries are specific to each execution context. You can access performance information for code running in a window via `Window.performance`, and for code running in a worker via `WorkerGlobalScope.performance`.
EventTarget  Performance 
## Instance properties
The `Performance` interface doesn't inherit any properties.
`Performance.eventCounts` Read only
    
An `EventCounts` map containing the number of events which have been dispatched per event type.
`Performance.navigation` Read only Deprecated
    
A legacy `PerformanceNavigation` object that provides useful context about the operations included in the times listed in `timing`, including whether the page was a load or a refresh, how many redirections occurred, and so forth.
`Performance.timing` Read only Deprecated
    
A legacy `PerformanceTiming` object containing latency-related performance information.
`Performance.memory` Read only Non-standard Deprecated
    
A non-standard extension added in Chrome, this property provides an object with basic memory usage information. You should not use this non-standard API.
`Performance.timeOrigin` Read only
    
Returns the high resolution timestamp of the start time of the performance measurement.
## Instance methods
The `Performance` interface doesn't inherit any methods.
`Performance.clearMarks()`
    
Removes the given mark from the browser's performance entry buffer.
`Performance.clearMeasures()`
    
Removes the given measure from the browser's performance entry buffer.
`Performance.clearResourceTimings()`
    
Removes all performance entries with a `entryType` of `"resource"` from the browser's performance data buffer.
`Performance.getEntries()`
    
Returns a list of `PerformanceEntry` objects based on the given filter.
`Performance.getEntriesByName()`
    
Returns a list of `PerformanceEntry` objects based on the given name and entry type.
`Performance.getEntriesByType()`
    
Returns a list of `PerformanceEntry` objects of the given entry type.
`Performance.mark()`
    
Creates a `timestamp` in the browser's performance entry buffer with the given name.
`Performance.measure()`
    
Creates a named `timestamp` in the browser's performance entry buffer between two specified marks (known as the start mark and end mark, respectively).
`Performance.measureUserAgentSpecificMemory()` Experimental
    
Estimates the memory usage of a web application including all its iframes and workers.
`Performance.now()`
    
Returns a `DOMHighResTimeStamp` representing the number of milliseconds elapsed since a reference instant.
`Performance.setResourceTimingBufferSize()`
    
Sets the browser's resource timing buffer size to the specified number of `"resource"` `type` `PerformanceEntry` objects.
`Performance.toJSON()`
    
Returns a JSON representation of the `Performance` object.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`resourcetimingbufferfull`
    
Fired when the browser's resource timing buffer is full.
# Headers
Note: This feature is available in Web Workers.
The `Headers` interface of the Fetch API allows you to perform various actions on HTTP request and response headers. These actions include retrieving, setting, adding to, and removing headers from the list of the request's headers.
You can retrieve a `Headers` object via the `Request.headers` and `Response.headers` properties, and create a new `Headers` object using the `Headers()` constructor. Compared to using plain objects, using `Headers` objects to send requests provides some additional input sanitization. For example, it normalizes header names to lowercase, strips leading and trailing whitespace from header values, and prevents certain headers from being set.
Note: You can find out more about the available headers by reading our HTTP headers reference.
## Description
A `Headers` object has an associated header list, which is initially empty and consists of zero or more name and value pairs. You can add to this using methods like `append()` (see Examples.) In all methods of this interface, header names are matched by case-insensitive byte sequence.
An object implementing `Headers` can directly be used in a `for...of` structure, instead of `entries()`: `for (const p of myHeaders)` is equivalent to `for (const p of myHeaders.entries())`.
### Modification restrictions
Some `Headers` objects have restrictions on whether the `set()`, `delete()`, and `append()` methods can mutate the header. The modification restrictions are set depending on how the `Headers` object is created.
  * For headers created with `Headers()` constructor, there are no modification restrictions.
  * For headers of `Request` objects: 
    * If the request's `mode` is `no-cors`, you can modify any CORS-safelisted request header name/value.
    * Otherwise, you can modify any non-forbidden request header name/value.
  * For headers of `Response` objects: 
    * If the response is created using `Response.error()` or `Response.redirect()`, or received from a `fetch()` call, the headers are immutable and cannot be modified.
    * Otherwise, if the response is created using `Response()` or `Response.json()`, you can modify any non-forbidden response header name/value.


All of the Headers methods will throw a `TypeError` if you try to pass in a reference to a name that isn't a valid HTTP Header name. The mutation operations will throw a `TypeError` if the header is immutable. In any other failure case they fail silently.
## Constructor
`Headers()`
    
Creates a new `Headers` object.
## Instance methods
`Headers.append()`
    
Appends a new value onto an existing header inside a `Headers` object, or adds the header if it does not already exist.
`Headers.delete()`
    
Deletes a header from a `Headers` object.
`Headers.entries()`
    
Returns an `iterator` allowing to go through all key/value pairs contained in this object.
`Headers.forEach()`
    
Executes a provided function once for each key/value pair in this `Headers` object.
`Headers.get()`
    
Returns a `String` sequence of all the values of a header within a `Headers` object with a given name.
`Headers.getSetCookie()`
    
Returns an array containing the values of all `Set-Cookie` headers associated with a response.
`Headers.has()`
    
Returns a boolean stating whether a `Headers` object contains a certain header.
`Headers.keys()`
    
Returns an `iterator` allowing you to go through all keys of the key/value pairs contained in this object.
`Headers.set()`
    
Sets a new value for an existing header inside a `Headers` object, or adds the header if it does not already exist.
`Headers.values()`
    
Returns an `iterator` allowing you to go through all values of the key/value pairs contained in this object.
Note: To be clear, the difference between `Headers.set()` and `Headers.append()` is that if the specified header does already exist and does accept multiple values, `Headers.set()` will overwrite the existing value with the new one, whereas `Headers.append()` will append the new value onto the end of the set of values. See their dedicated pages for example code.
Note: When Header values are iterated over, they are automatically sorted in lexicographical order, and values from duplicate header names are combined.
## Examples
In the following snippet, we create a new header using the `Headers()` constructor, add a new header to it using `append()`, then return that header value using `get()`:
    
    const myHeaders = new Headers();
    
    myHeaders.append("Content-Type", "text/xml");
    myHeaders.get("Content-Type"); // should return 'text/xml'
    
The same can be achieved by passing an array of arrays or an object literal to the constructor:
    
    let myHeaders = new Headers({
      "Content-Type": "text/xml",
    });
    
    // or, using an array of arrays:
    myHeaders = new Headers([["Content-Type", "text/xml"]]);
    
    myHeaders.get("Content-Type"); // should return 'text/xml'
    
  * ServiceWorker API
  * HTTP access control (CORS)
  * HTTP


# SVGTextPathElement
The `SVGTextPathElement` interface corresponds to the `<textPath>` element.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGTextContentElement  SVGTextPathElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGTextContentElement`.
`SVGTextPathElement.href` Read only
    
An `SVGAnimatedString` corresponding to the `href` or `xlink:href` attribute of the given element.
`SVGTextPathElement.startOffset` Read only
    
An `SVGAnimatedLength` corresponding to the X component of the `startOffset` attribute of the given element.
`SVGTextPathElement.method` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `method` attribute of the given element. It takes one of the `TEXTPATH_METHODTYPE_*` constants defined on this interface.
`SVGTextPathElement.spacing` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `spacing` attribute of the given element. It takes one of the `TEXTPATH_SPACINGTYPE_*` constants defined on this interface.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGTextContentElement`.
## Static properties
`TEXTPATH_METHODTYPE_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`TEXTPATH_METHODTYPE_ALIGN` (1)
    
Corresponds to the value `align`.
`TEXTPATH_METHODTYPE_STRETCH` (2)
    
Corresponds to the value `stretch`.
`TEXTPATH_SPACINGTYPE_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`TEXTPATH_SPACINGTYPE_AUTO` (1)
    
Corresponds to the value `auto`.
`TEXTPATH_SPACINGTYPE_EXACT` (2)
    
Corresponds to the value `exact`.
  * `<textPath>`


# SVGGradientElement
The `SVGGradient` interface is a base interface used by `SVGLinearGradientElement` and `SVGRadialGradientElement`.
EventTarget  Node  Element  SVGElement  SVGGradientElement 
## Instance properties
This interface also inherits properties from its parent, `SVGElement`.
`SVGGradientElement.href` Read only
    
An `SVGAnimatedString` corresponding to the `href` or `xlink:href` attribute of the given element.
`SVGGradientElement.gradientUnits` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `gradientUnits` attribute on the given element. This property takes one of the constants defined in `SVGUnitTypes`.
`SVGGradientElement.gradientTransform` Read only
    
An `SVGAnimatedTransformList` corresponding to the `gradientTransform` attribute on the given element.
`SVGGradientElement.spreadMethod` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `spreadMethod` attribute on the given element. One of the spread method types defined on this interface.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
## Static properties
`SVG_SPREADMETHOD_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_SPREADMETHOD_PAD` (1)
    
Corresponds to value `pad`.
`SVG_SPREADMETHOD_REFLECT` (2)
    
Corresponds to value `reflect`.
`SVG_SPREADMETHOD_REPEAT` (3)
    
Corresponds to value `repeat`.
# RTCRtpSender
The `RTCRtpSender` interface provides the ability to control and obtain details about how a particular `MediaStreamTrack` is encoded and sent to a remote peer.
With it, you can configure the encoding used for the corresponding track, get information about the device's media capabilities, and so forth. You can also obtain access to an `RTCDTMFSender` which can be used to send DTMF codes (to simulate the user pressing buttons on a telephone's dial pad) to the remote peer.
## Instance properties
`RTCRtpSender.dtmf` Read only
    
An `RTCDTMFSender` which can be used to send DTMF tones using `telephone-event` payloads on the RTP session represented by the `RTCRtpSender` object. If `null`, the track and/or the connection doesn't support DTMF. Only audio tracks can support DTMF.
`RTCRtpSender.track` Read only
    
The `MediaStreamTrack` which is being handled by the `RTCRtpSender`. If `track` is `null`, the `RTCRtpSender` doesn't transmit anything.
`RTCRtpSender.transport` Read only
    
The `RTCDtlsTransport` over which the sender is exchanging the RTP and RTCP packets used to manage transmission of media and control data. This value is `null` until the transport is established. When bundling is in use, more than transceiver may be sharing the same transport object.
`RTCRtpSender.transform`
    
An `RTCRtpScriptTransform` is used to insert a transform stream (`TransformStream`) running in a worker thread into the sender pipeline, allowing stream transforms to be applied to encoded video and audio frames after they are output by a codec, and before they are sent.
### Obsolete properties
`rtcpTransport` Deprecated
    
This property has been removed; the RTP and RTCP transports have been combined into a single transport. Use the `transport` property instead.
## Static methods
`RTCRtpSender.getCapabilities()`
    
Returns an object describing the system's capabilities for sending a specified kind of media data.
## Instance methods
`RTCRtpSender.getParameters()`
    
Returns an object describing the current configuration for the encoding and transmission of media on the `track`.
`RTCRtpSender.getStats()`
    
Returns a `Promise` which is fulfilled with a `RTCStatsReport` which provides statistics data for all outbound streams being sent using this `RTCRtpSender`.
`RTCRtpSender.setParameters()`
    
Applies changes to parameters which configure how the `track` is encoded and transmitted to the remote peer.
`RTCRtpSender.setStreams()`
    
Sets the stream(s) associated with the `track` being transmitted by this sender.
`RTCRtpSender.replaceTrack()`
    
Attempts to replace the track currently being sent by the `RTCRtpSender` with another track, without performing renegotiation. This method can be used, for example, to toggle between the front- and rear-facing cameras on a device.
  * WebRTC API
  * `RTCPeerConnection.addTrack()`
  * `RTCPeerConnection.getSenders()`
  * `RTCRtpReceiver`


# Fence
The `Fence` interface of the Fenced Frame API contains several functions relevant to `<fencedframe>` functionality.
`Fence` objects are accessed through the `Window.fence` property, but they are only available to documents embedded inside `<fencedframe>`s (loaded via `FencedFrameConfig`s) or `<iframe>`s (loaded via opaque URNs).
Note: See How do `<fencedframe>`s work? for some description around `FencedFrameConfig`s and opaque URNs.
## Instance methods
`getNestedConfigs()` Experimental
    
Returns the `FencedFrameConfig`s loaded into `<fencedframe>`s embedded inside the current `<fencedframe>`.
`reportEvent()` Experimental
    
Triggers the submission of report data via a beacon to one ore more specific URLs registered via the `registerAdBeacon()` method of the Protected Audience API, for the purpose of collecting ad auction results.
`setReportEventDataForAutomaticBeacons()` Experimental
    
Specifies event data that will be sent when a navigation occurs inside a `<fencedframe>`. This data will be sent via an automatic beacon to one or more specific URLs registered via the `registerAdBeacon()` method of the Protected Audience API, for the purpose of collecting reporting data for ad auction results.
## Examples
    
    window.fence.reportEvent({
      eventType: "click",
      eventData: JSON.stringify({ clickX: "123", clickY: "456" }),
      destination: ["buyer", "seller"],
    });
    
  * Fenced frames on privacysandbox.google.com
  * The Privacy Sandbox on privacysandbox.google.com


# HTMLFormControlsCollection
The `HTMLFormControlsCollection` interface represents a collection of HTML form control elements, returned by the `HTMLFormElement` interface's `elements` property.
The collection returned by `HTMLFormElement.elements` includes the form's associated listed form controls. See `HTMLFormElement.elements` for the list of listed form controls and an explanation of form association.
This interface replaces one method from `HTMLCollection`, on which it is based.
HTMLCollection  HTMLFormControlsCollection 
## Instance properties
This interface inherits the properties of its parent, `HTMLCollection`.
## Instance methods
This interface inherits the methods of its parent, `HTMLCollection`.
`HTMLFormControlsCollection.namedItem()`
    
Returns the `RadioNodeList` or the `Element` in the collection whose `name` or `id` matches the specified name, or `null` if no nodes match. Note that this version of `namedItem()` hides the one inherited from `HTMLCollection`. Like that method, using the JavaScript array bracket syntax with a `String`, as in `collection["value"]`, is equivalent to `collection.namedItem("value")`.
  * `HTMLCollection`, `RadioNodeList`, `HTMLOptionsCollection`


# GPURenderPassEncoder
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPURenderPassEncoder` interface of the WebGPU API encodes commands related to controlling the vertex and fragment shader stages, as issued by a `GPURenderPipeline`. It forms part of the overall encoding activity of a `GPUCommandEncoder`.
A render pipeline renders graphics to `GPUTexture` attachments, typically intended for display in a `<canvas>` element, but it could also render to textures used for other purposes that never appear onscreen. It has two main stages:
  * A vertex stage, in which a vertex shader takes positioning data fed into the GPU and uses it to position a series of vertices in 3D space by applying specified effects like rotation, translation, or perspective. The vertices are then assembled into primitives such as triangles (the basic building block of rendered graphics) and rasterized by the GPU to figure out what pixels each one should cover on the drawing canvas.
  * A fragment stage, in which a fragment shader computes the color for each pixel covered by the primitives produced by the vertex shader. These computations frequently use inputs such as images (in the form of textures) that provide surface details and the position and color of virtual lights.


A `GPURenderPassEncoder` object instance is created via the `GPUCommandEncoder.beginRenderPass()` property.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Instance methods
`beginOcclusionQuery()`
    
Begins an occlusion query at the specified index of the relevant `GPUQuerySet` (provided as the value of the `occlusionQuerySet` descriptor property when invoking `GPUCommandEncoder.beginRenderPass()` to run the render pass).
`draw()`
    
Draw primitives based on the vertex buffers provided by `setVertexBuffer()`.
`drawIndexed()`
    
Draw indexed primitives based on the vertex and index buffers provided by `setVertexBuffer()` and `setIndexBuffer()`
`drawIndirect()`
    
Draw primitives using parameters read from a `GPUBuffer`.
`drawIndexedIndirect()`
    
Draw indexed primitives using parameters read from a `GPUBuffer`.
`end()`
    
Completes recording of the current render pass command sequence.
`endOcclusionQuery()`
    
Ends an active occlusion query previously started with `beginOcclusionQuery()`.
`executeBundles()`
    
Executes commands previously recorded into the referenced `GPURenderBundle`s, as part of this render pass.
`insertDebugMarker()`
    
Marks a specific point in a series of encoded commands with a label.
`popDebugGroup()`
    
Ends a debug group, which is begun with a `pushDebugGroup()` call.
`pushDebugGroup()`
    
Begins a debug group, which is marked with a specified label, and will contain all subsequent encoded commands up until a `popDebugGroup()` method is invoked.
`setBindGroup()`
    
Sets the `GPUBindGroup` to use for subsequent render commands, for a given index.
`setBlendConstant()`
    
Sets the constant blend color and alpha values used with `"constant"` and `"one-minus-constant"` blend factors (as set in the descriptor of the `GPUDevice.createRenderPipeline()` method, in the `blend` property).
`setIndexBuffer()`
    
Sets the current `GPUBuffer` that will provide index data for subsequent drawing commands.
`setPipeline()`
    
Sets the `GPURenderPipeline` to use for this render pass.
`setScissorRect()`
    
Sets the scissor rectangle used during the rasterization stage. After transformation into viewport coordinates any fragments that fall outside the scissor rectangle will be discarded.
`setStencilReference()`
    
Sets the stencil reference value using during stencil tests with the `"replace"` stencil operation (as set in the descriptor of the `GPUDevice.createRenderPipeline()` method, in the properties defining the various stencil operations).
`setVertexBuffer()`
    
Sets or unsets the current `GPUBuffer` that will provide vertex data for subsequent drawing commands.
`setViewport()`
    
Sets the viewport used during the rasterization stage to linearly map from normalized device coordinates to viewport coordinates.
## Examples
In our basic render demo, several commands are recorded via a `GPUCommandEncoder`. Most of these commands originate from the `GPURenderPassEncoder` created via `GPUCommandEncoder.beginRenderPass()`.
    
    // …
    
    const renderPipeline = device.createRenderPipeline(pipelineDescriptor);
    
    // Create GPUCommandEncoder to issue commands to the GPU
    // Note: render pass descriptor, command encoder, etc. are destroyed after use, fresh one needed for each frame.
    const commandEncoder = device.createCommandEncoder();
    
    // Create GPURenderPassDescriptor to tell WebGPU which texture to draw into, then initiate render pass
    const renderPassDescriptor = {
      colorAttachments: [
        {
          clearValue: clearColor,
          loadOp: "clear",
          storeOp: "store",
          view: context.getCurrentTexture().createView(),
        },
      ],
    };
    
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    
    // Draw the triangle
    passEncoder.setPipeline(renderPipeline);
    passEncoder.setVertexBuffer(0, vertexBuffer);
    passEncoder.draw(3);
    
    // End the render pass
    passEncoder.end();
    
    // End frame by passing array of command buffers to command queue for execution
    device.queue.submit([commandEncoder.finish()]);
    
    // …
    
  * The WebGPU API


# XPathResult
The `XPathResult` interface represents the results generated by evaluating an XPath expression within the context of a given node.
Since XPath expressions can result in a variety of result types, this interface makes it possible to determine and handle the type and value of the result.
## Instance properties
`XPathResult.booleanValue` Read only
    
A `boolean` representing the value of the result if `resultType` is `BOOLEAN_TYPE`.
`XPathResult.invalidIteratorState` Read only
    
Signifies that the iterator has become invalid. It is `true` if `resultType` is `UNORDERED_NODE_ITERATOR_TYPE` or `ORDERED_NODE_ITERATOR_TYPE` and the document has been modified since this result was returned.
`XPathResult.numberValue` Read only
    
A `number` representing the value of the result if `resultType` is `NUMBER_TYPE`.
`XPathResult.resultType` Read only
    
A `number` code representing the type of the result, as defined by the type constants.
`XPathResult.singleNodeValue` Read only
    
A `Node` representing the value of the single node result, which may be `null`.
`XPathResult.snapshotLength` Read only
    
The number of nodes in the result snapshot.
`XPathResult.stringValue` Read only
    
A string representing the value of the result if `resultType` is `STRING_TYPE`.
## Instance methods
`XPathResult.iterateNext()`
    
If the result is a node set, this method iterates over it and returns the next node from it or `null` if there are no more nodes.
`XPathResult.snapshotItem()`
    
Returns an item of the snapshot collection or `null` in case the index is not within the range of nodes. Unlike the iterator result, the snapshot does not become invalid, but may not correspond to the current document if it is mutated.
## Constants
Result Type Defined Constant Value Description  
`ANY_TYPE` `0` A result set containing whatever type naturally results from evaluation of the expression. Note that if the result is a node-set then `UNORDERED_NODE_ITERATOR_TYPE` is always the resulting type.   
`NUMBER_TYPE` `1` A result containing a single number. This is useful for example, in an XPath expression using the `count()` function.   
`STRING_TYPE` `2` A result containing a single string.  
`BOOLEAN_TYPE` `3` A result containing a single boolean value. This is useful for example, in an XPath expression using the `not()` function.   
`UNORDERED_NODE_ITERATOR_TYPE` `4` A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.   
`ORDERED_NODE_ITERATOR_TYPE` `5` A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.   
`UNORDERED_NODE_SNAPSHOT_TYPE` `6` A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.   
`ORDERED_NODE_SNAPSHOT_TYPE` `7` A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.   
`ANY_UNORDERED_NODE_TYPE` `8` A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.   
`FIRST_ORDERED_NODE_TYPE` `9` A result node-set containing the first node in the document that matches the expression.   
  * `Document.evaluate()`
  * `XPathExpression`


# Presentation
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Presentation` can be defined as two possible user agents in the context: Controlling user agent and Receiving user agent.
In controlling browsing context, the `Presentation` interface provides a mechanism to override the browser default behavior of launching presentation to external screen. In receiving browsing context, `Presentation` interface provides the access to the available presentation connections.
## Instance properties
`Presentation.defaultRequest` Experimental
    
In a controlling user agent, the `defaultRequest` attribute MUST return the default presentation request if any, `null` otherwise. In a receiving browsing context, it MUST return `null`.
`Presentation.receiver` Experimental
    
In a receiving user agent, the `receiver` attribute MUST return the `PresentationReceiver` instance associated with the receiving browsing context and created by the receiving user agent when the receiving browsing context is created.
## Instance methods
None.
# Fenced Frame API
Warning: This feature is currently opposed by one browser vendor. See the Standards positions section below for details.
The Fenced Frame API provides functionality for controlling content embedded in `<fencedframe>` elements.
## Concepts and usage
One major source of privacy and security problems on the web is content embedded in `<iframe>` elements. Historically `<iframe>`s have been used to set third-party cookies, which can be used to share information and track users across sites. In addition, content embedded in an `<iframe>` can communicate with its embedding document (for example, using `Window.postMessage()`).
The embedding document can also use scripting to read various forms of information from the `<iframe>` — for example you can potentially get significant tracking/fingerprinting data from reading the embedded URL from the `src` property, especially if it contains URL parameters. The `<iframe>` can also access the embedding context's DOM, and vice versa.
Most modern browsers are working on mechanisms to partition storage so that cookie data can no longer be used for tracking (for example see Cookies Having Independent Partitioned State (CHIPS) or Firefox State Partitioning).
`<fencedframe>` elements aim to solve another piece of this puzzle — they are very similar to `<iframe>`s in form and function, except that:
  * Communication cannot be shared between the `<fencedframe>` content and its embedding site.
  * A `<fencedframe>` can access cross-site data, but only in a very specific set of controlled circumstances that preserve user privacy.
  * A `<fencedframe>` cannot be freely manipulated or have its data accessed via regular scripting (for example reading or setting the source URL). `<fencedframe>` content can only be embedded via specific APIs.
  * A `<fencedframe>` cannot access the embedding context's DOM, nor can the embedding context access the `<fencedframe>`'s DOM.


For more information about the communication model of fenced frames, read the communication with embedded frames guide.
### Use cases
`<fencedframe>`s are used by other APIs to embed different types of cross-site content or collect data, fulfilling different use cases in a privacy-preserving manner. Most of these previously relied on third-party cookies or other mechanisms that were bad for privacy.
  * The Shared Storage API provides access to unpartitioned cross-site data in a secure environment, calculating and/or displaying results in a `<fencedframe>`. For example: 
    * Advertisers can measure the reach of an ad, or serve subsequent ads based on which ones users have already seen on other sites.
    * Developers can do A/B testing, showing variants to a user based on a group they are assigned to, or based on how many users have seen each one already.
    * Businesses can customize the user's experience based on what they have seen on other sites. For example, if they have already purchased membership, you might not want to show them membership sign-up ads across your other properties.
  * The Protected Audience API allows developers to implement interest group-based advertising, namely remarketing and custom audience use cases. It can evaluate multiple bids for ad space and display the winning ad in a `<fencedframe>`.
  * The Private Aggregation API can gather data from `<fencedframe>`s (originating from shared storage or the Protected Audience API) and create aggregated reports.


## How do `<fencedframe>`s work?
As mentioned above, you don't control the content embedded in a `<fencedframe>` directly via regular script.
To set what content will be shown in a `<fencedframe>`, a utilizing API (such as Protected Audience or Shared Storage) generates a `FencedFrameConfig` object, which is then set via JavaScript as the value of the `<fencedframe>`'s `HTMLFencedFrameElement.config` property.
The following example gets a `FencedFrameConfig` from a Protected Audience API's ad auction, which is then used to display the winning ad in a `<fencedframe>`:
    
    const frameConfig = await navigator.runAdAuction({
      // … auction configuration
      resolveToConfig: true,
    });
    
    const frame = document.createElement("fencedframe");
    frame.config = frameConfig;
    
`resolveToConfig: true` must be passed in to the `runAdAuction()` call to obtain a `FencedFrameConfig` object. If `resolveToConfig` is set to `false`, the resulting `Promise` will resolve to an opaque URN (for example `urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a`) that can only be used in an `<iframe>`.
Either way, the browser stores a URL containing the target location of the content to embed — mapped to the opaque URN, or the `FencedFrameConfig`'s internal `url` property. The URL value cannot be read by JavaScript running in the embedding context.
Note: Support is provided for opaque URNs in `<iframe>`s to ease migration of existing implementations over to privacy sandbox APIs. This support is intended to be temporary and will be removed in the future as adoption grows.
Note: `FencedFrameConfig` has a `setSharedStorageContext()` method that is used to pass in data from the embedding document to the `<fencedframe>`'s shared storage. It could for example be accessed in a `Worklet` via the `<fencedframe>` and used to generate a report. See the Shared Storage API for more details.
### Accessing fenced frame functionality on the `Fence` object
Inside documents embedded in `<fencedframe>`s, JavaScript has access to a `Window.fence` property that returns a `Fence` instance for that document. This object contains several functions specifically relevant to fenced frame API functionality. For example, `Fence.reportEvent()` provides a way to trigger the submission of report data via a beacon to one or more specified URLs, in order to report ad views and clicks.
### Permissions policy
Only specific features designed to be used in `<fencedframe>`s can be enabled via permissions policies set on them; other policy-controlled features are not available in this context. See Permissions policies available to fenced frames for more details.
### HTTP headers
A `Sec-Fetch-Dest` header with a value of `fencedframe` will be set for any requests made from inside a `<fencedframe>`, including child `<iframe>`s embedded within a `<fencedframe>`.
    
    Sec-Fetch-Dest: fencedframe
    
The server must set a `Supports-Loading-Mode` response header with a value of `fenced-frame` for any document intended to be loaded into a `<fencedframe>`, or `<iframe>` embedded within a `<fencedframe>`.
    
    Supports-Loading-Mode: fenced-frame
    
Other effects of fenced frames on HTTP headers are as follows:
  * User-agent client hints are not available inside fenced frames because they rely on permissions policy delegation, which could be used to leak data.
  * Strict `Cross-Origin-Opener-Policy` settings are enforced on new browsing contexts opened from inside fenced frames, otherwise they could be used to leak information to other origins. Any new window opened from inside a fenced frame will have `rel="noopener"` and `Cross-Origin-Opener-Policy: same-origin` set to ensure that `Window.opener` returns `null` and place it in its own browsing context group.
  * `Content-Security-Policy: fenced-frame-src` has been added for specifying valid sources for nested browsing contexts loaded into `<fencedframe>` elements.
  * `Content-Security-Policy: sandbox` custom settings cannot be inherited by fenced frames, to mitigate privacy issues. For a fenced frame to load, you need to specify no `sandbox` CSP (which implies the below values), or specify the following sandbox values: 
    * `allow-same-origin`
    * `allow-forms`
    * `allow-scripts`
    * `allow-popups`
    * `allow-popups-to-escape-sandbox`
    * `allow-top-navigation-by-user-activation`


###  `beforeunload` and `unload` events
`beforeunload` and `unload` events do not fire on fenced frames, because they can leak information in the form of a page deletion timestamp. Implementations aim to eliminate as many potential leakages as possible.
## Interfaces
`FencedFrameConfig`
    
Represents the navigation of a `<fencedframe>`, i.e., what content will be displayed in it. A `FencedFrameConfig` is returned from a source such as the Protected Audience API and set as the value of `HTMLFencedFrameElement.config`.
`Fence`
    
Contains several functions relevant to fenced frame functionality. Available only to documents embedded inside a `<fencedframe>`.
`HTMLFencedFrameElement`
    
Represents a `<fencedframe>` element in JavaScript and provides properties to configure it.
### Extensions to other interfaces
`Navigator.deprecatedReplaceInURN()`
    
Substitutes specified strings inside the mapped URL corresponding to a given opaque URN or `FencedFrameConfig`'s internal `url` property.
`Window.fence`
    
Returns a `Fence` object instance for the current document context. Available only to documents embedded inside a `<fencedframe>`.
## Enrollment and local testing
Certain API features that create `FencedFrameConfig`s such as `Navigator.runAdAuction()` (Protected Audience API) and `WindowSharedStorage.selectURL()` (Shared Storage API), as well as other features such as `Fence.reportEvent()`, require you to enroll your site in a privacy sandbox enrollment process. If you don't do this, the API calls will fail with a console warning.
Note: In Chrome, you can still test your fenced frame code locally without enrollment. To allow local testing, enable the following Chrome developer flag:
`chrome://flags/#privacy-sandbox-enrollment-overrides`
## Examples
The following demos all make use of `<fencedframe>`s:
  * Shared Storage API demos (which also includes some Private Aggregation API examples)
  * Protected Audience API demo


### Standards positions
One browser vendor opposes this specification. Known standards positions are as follows:
  * Mozilla (Firefox): Negative


  * Fenced frames on privacysandbox.google.com
  * The Privacy Sandbox on privacysandbox.google.com


# CSSImportRule
The `CSSImportRule` interface represents an `@import` at-rule.
CSSRule  CSSImportRule 
## Instance properties
Inherits properties from its ancestor `CSSRule`.
`CSSImportRule.href` Read only
    
Returns the URL specified by the `@import` rule.
`CSSImportRule.layerName` Read only
    
Returns the name of the cascade layer declared in the `@import` rule, the empty string if the layer is anonymous, the or `null` if the rule doesn't declare any.
`CSSImportRule.media`
    
Returns the value of the `media` attribute of the associated stylesheet.
`CSSImportRule.styleSheet` Read only
    
Returns the associated stylesheet.
`CSSImportRule.supportsText` Read only
    
Returns the supports condition specified by the `@import` rule.
## Instance methods
Inherits methods from its ancestor `CSSRule`.
## Examples
The document includes a single stylesheet which contains a single `@import` rule. Therefore the first item in the list of CSS rules will be a `CSSImportRule`.
    
    @import "style.css" screen;
    
    
    const myRules = document.styleSheets[0].cssRules;
    console.log(myRules[0]); // A CSSImportRule instance object
    
# AuthenticatorResponse
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `AuthenticatorResponse` interface of the Web Authentication API is the base interface for interfaces that provide a cryptographic root of trust for a key pair. The child interfaces include information from the browser such as the challenge origin and either may be returned from `PublicKeyCredential.response`.
## Interfaces based on AuthenticatorResponse
Below is a list of interfaces based on the AuthenticatorResponse interface.
  * `AuthenticatorAssertionResponse`
  * `AuthenticatorAttestationResponse`


## Instance properties
`AuthenticatorResponse.clientDataJSON`
    
A JSON string in an `ArrayBuffer`, representing the client data that was passed to `CredentialsContainer.create()` or `CredentialsContainer.get()`.
## Instance methods
None.
## Examples
>
### Getting an AuthenticatorAssertionResponse
    
    const options = {
      challenge: new Uint8Array([
        /* bytes sent from the server */
      ]),
    };
    
    navigator.credentials
      .get({ publicKey: options })
      .then((credentialInfoAssertion) => {
        const assertionResponse = credentialInfoAssertion.response;
        // send assertion response back to the server
        // to proceed with the control of the credential
      })
      .catch((err) => console.error(err));
    
### Getting an AuthenticatorAttestationResponse
    
    const publicKey = {
      challenge: new Uint8Array([
        21, 31, 105 /* 29 more random bytes generated by the server */,
      ]),
      rp: {
        name: "Example CORP",
        id: "login.example.com",
      },
      user: {
        id: new Uint8Array(16),
        name: "msanchez@example.com",
        displayName: "Maria Sanchez",
      },
      pubKeyCredParams: [
        {
          type: "public-key",
          alg: -7,
        },
      ],
    };
    
    navigator.credentials
      .create({ publicKey })
      .then((newCredentialInfo) => {
        const attestationResponse = newCredentialInfo.response;
      })
      .catch((err) => console.error(err));
    
  * `AuthenticatorAttestationResponse`
  * `AuthenticatorAssertionResponse`
  * `PublicKeyCredential.response`


# PasswordCredentialInit
The `PasswordCredentialInit` dictionary represents the object passed to `CredentialsContainer.create()` as the value of the `password` option, when creating a password credential.
## Initialization from a form
Instead of passing this dictionary directly, a website can pass an `HTMLFormElement`, and the implementation of `create()` will populate the credential's data from the values of the form's submittable elements, based on the value of the element's `autocomplete` attribute.
`autocomplete` value Credential property targeted  
`"username"` `id`  
`"name"` or `"nickname"` `name`  
`"new-password"` or `"current-password"` `password`  
`"photo"` `iconURL`  
If the form contains both `"new-password"` and `"current-password"` elements, the value for `"new-password"` will be used.
The `origin` property is set to the origin of the document the `HTMLFormElement` is contained within.
## Instance properties
`iconURL` Optional
    
A string representing the URL of an icon or avatar to be associated with the credential.
`id`
    
A string representing a unique ID for the credential.
`name` Optional
    
A string representing the credential username.
`origin`
    
A string representing the credential's origin. `PasswordCredential` objects are origin-bound, which means that they will only be usable on the specified origin they were intended to be used on.
`password`
    
A string representing the credential password.
## Examples
>
### Creating a password credential from an object literal
This example constructs an object literal to initialize a password credential.
    
    const credInit = {
      id: "1234",
      name: "Serpentina",
      origin: "https://example.org",
      password: "the last visible dog",
    };
    
    const makeCredential = document.querySelector("#make-credential");
    
    makeCredential.addEventListener("click", async () => {
      const cred = await navigator.credentials.create({
        password: credInit,
      });
      console.log(cred.name);
      // Serpentina
      console.log(cred.password);
      // the last visible dog
    });
    
### Creating a password credential from a form
This example uses a form to initialize a password credential.
#### HTML
The HTML declares a `<form>` containing three submittable elements, representing the user ID, user's display name, and password.
    
    <form>
      <div>
        <label for="userid">Enter your user ID: </label>
        <input type="text" name="userid" id="userid" autocomplete="username" />
      </div>
      <div>
        <label for="username">Enter your username: </label>
        <input type="text" name="username" id="username" autocomplete="name" />
      </div>
      <div>
        <label for="password">Enter your password: </label>
        <input
          type="password"
          name="password"
          id="password"
          autocomplete="new-password" />
      </div>
    </form>
    
    <button id="make-credential">Make credential</button>
    
    <pre id="log"></pre>
    
#### JavaScript
The JavaScript passes the form into `create()`, and logs some of the values of the resulting credential.
The promise returned by `create()` will reject if the form does not contain values for the mandatory credential properties.
    
    const makeCredential = document.querySelector("#make-credential");
    const formCreds = document.querySelector("form");
    
    makeCredential.addEventListener("click", async () => {
      try {
        const credential = await navigator.credentials.create({
          password: formCreds,
        });
        log(
          `New credential:\nname: ${credential.name}, password: ${credential.password}`,
        );
      } catch (e) {
        if (e.name === "TypeError") {
          log("Error creating credential\nMake sure you filled in all the fields");
        }
      }
    });
    
    const logElement = document.querySelector("#log");
    function log(text) {
      logElement.innerText = text;
    }
    
#### Result
# ByteLengthQueuingStrategy
Note: This feature is available in Web Workers.
The `ByteLengthQueuingStrategy` interface of the Streams API provides a built-in byte length queuing strategy that can be used when constructing streams.
## Constructor
`ByteLengthQueuingStrategy()`
    
Creates a new `ByteLengthQueuingStrategy` object instance.
## Instance properties
`ByteLengthQueuingStrategy.highWaterMark` Read only
    
The total number of bytes that can be contained in the internal queue before backpressure is applied.
## Instance methods
`ByteLengthQueuingStrategy.size()`
    
Returns the given chunk's `byteLength` property.
## Examples
    
    const queueingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1024 });
    
    const readableStream = new ReadableStream(
      {
        start(controller) {
          // …
        },
        pull(controller) {
          // …
        },
        cancel(err) {
          console.log("stream error:", err);
        },
      },
      queueingStrategy,
    );
    
    const size = queueingStrategy.size(chunk);
    
  * Streams API
  * Internal queues and queuing strategies
  * `ByteLengthQueuingStrategy()` constructor


# Geolocation API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.
WebExtensions that wish to use the `Geolocation` object must add the `"geolocation"` permission to their manifest. The user's operating system will prompt the user to allow location access the first time it is requested.
## Concepts and usage
You will often want to retrieve a user's location information in your web app, for example to plot their location on a map, or display personalized information relevant to their location.
The Geolocation API is accessed via a call to `navigator.geolocation`; this will cause the user's browser to ask them for permission to access their location data. If they accept, then the browser will use the best available functionality on the device to access this information (for example, GPS).
The developer can now access this location information in a couple of different ways:
  * `Geolocation.getCurrentPosition()`: Retrieves the device's current location.
  * `Geolocation.watchPosition()`: Registers a handler function that will be called automatically each time the position of the device changes, returning the updated location.


In both cases, the method call takes up to three arguments:
  * A mandatory success callback: If the location retrieval is successful, the callback executes with a `GeolocationPosition` object as its only parameter, providing access to the location data.
  * An optional error callback: If the location retrieval is unsuccessful, the callback executes with a `GeolocationPositionError` object as its only parameter, providing access information on what went wrong.
  * An optional object which provides options for retrieval of the position data.


For further information on Geolocation usage, read Using the Geolocation API.
## Interfaces
`Geolocation`
    
The main class of this API — contains methods to retrieve the user's current position, watch for changes in their position, and clear a previously-set watch.
`GeolocationPosition`
    
Represents the position of a user. A `GeolocationPosition` instance is returned by a successful call to one of the methods contained inside `Geolocation`, inside a success callback, and contains a timestamp plus a `GeolocationCoordinates` object instance.
`GeolocationCoordinates`
    
Represents the coordinates of a user's position; a `GeolocationCoordinates` instance contains latitude, longitude, and other important related information.
`GeolocationPositionError`
    
A `GeolocationPositionError` is returned by an unsuccessful call to one of the methods contained inside `Geolocation`, inside an error callback, and contains an error code and message.
### Extensions to other interfaces
`Navigator.geolocation`
    
The entry point into the API. Returns a `Geolocation` object instance, from which all other functionality can be accessed.
## Security considerations
The Geolocation API allows users to programmatically access location information in secure contexts.
Access may further be controlled by the Permissions Policy directive `geolocation`. The default allowlist for `geolocation` is `self`, which allows access to location information in same-origin nested frames only. Third party usage is enabled by setting a `Permissions-Policy` response header to grant permission to a particular third party origin:
    
    Permissions-Policy: geolocation=(self b.example.com)
    
The `allow="geolocation"` attribute must then be added to the iframe element with sources from that origin:
    
    <iframe src="https://b.example.com" allow="geolocation"></iframe>
    
Geolocation data may reveal information that the device owner does not want to share. Therefore, users must grant explicit permission via a prompt when either `Geolocation.getCurrentPosition()` or `Geolocation.watchPosition()` is called (unless the permission state is already `granted` or `denied`). The lifetime of a granted permission depends on the user agent, and may be time based, session based, or even permanent. The Permissions API `geolocation` permission can be used to test whether access to use location information is `granted`, `denied` or `prompt` (requires user acknowledgement of a prompt).
## Examples
See Using the Geolocation API for example code.
### Availability
As Wi-Fi-based locating is often provided by Google, the vanilla Geolocation API may be unavailable in China. You may use local third-party providers such as Baidu, Autonavi, or Tencent. These services use the user's IP address and/or a local app to provide enhanced positioning.
  * Using the Geolocation API
  * Who moved my geolocation? (Hacks blog)


# ConvolverNode
The `ConvolverNode` interface is an `AudioNode` that performs a Linear Convolution on a given `AudioBuffer`, often used to achieve a reverb effect. A `ConvolverNode` always has exactly one input and one output.
Note: For more information on the theory behind Linear Convolution, see the Convolution article on Wikipedia.
EventTarget  AudioNode  ConvolverNode 
Number of inputs `1`  
Number of outputs `1`  
Channel count mode `"clamped-max"`  
Channel count `1`, `2`, or `4`  
Channel interpretation `"speakers"`  
## Constructor
`ConvolverNode()`
    
Creates a new `ConvolverNode` object instance.
## Instance properties
Inherits properties from its parent, `AudioNode`.
`ConvolverNode.buffer`
    
A mono, stereo, or 4-channel `AudioBuffer` containing the (possibly multichannel) impulse response used by the `ConvolverNode` to create the reverb effect.
`ConvolverNode.normalize`
    
A boolean that controls whether the impulse response from the buffer will be scaled by an equal-power normalization when the `buffer` attribute is set, or not.
## Instance methods
No specific method; inherits methods from its parent, `AudioNode`.
## Examples
The following example shows basic usage of an AudioContext to create a convolver node. You will need to find an impulse response to complete the example below. See our HolySpaceCow example for a complete, applied example.
    
    let audioCtx = new window.AudioContext();
    
    async function createReverb() {
      let convolver = audioCtx.createConvolver();
    
      // load impulse response from file
      let response = await fetch("path/to/impulse-response.wav");
      let arraybuffer = await response.arrayBuffer();
      convolver.buffer = await audioCtx.decodeAudioData(arraybuffer);
    
      return convolver;
    }
    
    // …
    
    let reverb = await createReverb();
    
    // someOtherAudioNode -> reverb -> destination
    someOtherAudioNode.connect(reverb);
    reverb.connect(audioCtx.destination);
    
  * Using the Web Audio API


# HTMLIFrameElement
The `HTMLIFrameElement` interface provides special properties and methods (beyond those of the `HTMLElement` interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.
EventTarget  Node  Element  HTMLElement  HTMLIFrameElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLIFrameElement.align` Deprecated
    
A string that specifies the alignment of the frame with respect to the surrounding context.
`HTMLIFrameElement.allow`
    
A string that indicates the Permissions Policy specified for this `<iframe>`.
`HTMLIFrameElement.allowFullscreen`
    
A boolean value indicating whether the inline frame is willing to be placed into full screen mode. See Using fullscreen mode for details.
`HTMLIFrameElement.allowPaymentRequest` Deprecated Non-standard
    
A boolean value indicating whether the Payment Request API may be invoked inside a cross-origin iframe.
`HTMLIFrameElement.browsingTopics` Experimental Non-standard
    
A boolean property specifying that the selected topics for the current user should be sent with the request for the associated `<iframe>`'s source. This reflects the `browsingtopics` content attribute value.
`HTMLIFrameElement.contentDocument` Read only
    
Returns a `Document`, the active document in the inline frame's nested browsing context.
`HTMLIFrameElement.contentWindow` Read only
    
Returns a WindowProxy, the window proxy for the nested browsing context.
`HTMLIFrameElement.credentialless` Experimental
    
A boolean value indicating whether the `<iframe>` is credentialless, meaning that its content is loaded in a new, ephemeral context. This context does not have access to the parent context's shared storage and credentials. In return, the `Cross-Origin-Embedder-Policy` (COEP) embedding rules can be lifted, so documents with COEP set can embed third-party documents that do not. See IFrame credentialless for a deeper explanation.
`HTMLIFrameElement.csp` Experimental
    
Specifies the Content Security Policy that an embedded document must agree to enforce upon itself.
`HTMLIFrameElement.featurePolicy` Read only Experimental
    
Returns the `FeaturePolicy` interface which provides a simple API for introspecting the Permissions Policies applied to a specific document.
`HTMLIFrameElement.frameBorder` Deprecated
    
A string that indicates whether to create borders between frames.
`HTMLIFrameElement.height`
    
A string that reflects the `height` HTML attribute, indicating the height of the frame.
`HTMLIFrameElement.loading`
    
A string providing a hint to the browser that the iframe should be loaded immediately (`eager`) or on an as-needed basis (`lazy`). This reflects the `loading` HTML attribute.
`HTMLIFrameElement.longDesc` Deprecated
    
A string that contains the URI of a long description of the frame.
`HTMLIFrameElement.marginHeight` Deprecated
    
A string being the height of the frame margin.
`HTMLIFrameElement.marginWidth` Deprecated
    
A string being the width of the frame margin.
`HTMLIFrameElement.name`
    
A string that reflects the `name` HTML attribute, containing a name by which to refer to the frame.
`HTMLIFrameElement.referrerPolicy`
    
A string that reflects the `referrerPolicy` HTML attribute indicating which referrer to use when fetching the linked resource.
`HTMLIFrameElement.sandbox` Read only
    
Returns a `DOMTokenList` that reflects the `sandbox` HTML attribute, indicating extra restrictions on the behavior of the nested content.
`HTMLIFrameElement.scrolling` Deprecated
    
A string that indicates whether the browser should provide scrollbars for the frame.
`HTMLIFrameElement.src`
    
A string that reflects the `src` HTML attribute, containing the address of the content to be embedded. Note that programmatically removing an `<iframe>`'s src attribute (e.g., via `Element.removeAttribute()`) causes `about:blank` to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.
`HTMLIFrameElement.srcdoc`
    
A string that represents the content to display in the frame.
`HTMLIFrameElement.width`
    
A string that reflects the `width` HTML attribute, indicating the width of the frame.
## Instance methods
Also inherits methods from its parent interface, `HTMLElement`.
`HTMLIFrameElement.getSVGDocument()`
    
Returns the embedded SVG as a `Document`.
  * The HTML element implementing this interface: `<iframe>`


# GPUCommandBuffer
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUCommandBuffer` interface of the WebGPU API represents a pre-recorded list of GPU commands that can be submitted to a `GPUQueue` for execution.
A `GPUCommandBuffer` is created via the `GPUCommandEncoder.finish()` method; the GPU commands recorded within are submitted for execution by passing the `GPUCommandBuffer` into the parameter of a `GPUQueue.submit()` call.
Note: Once a `GPUCommandBuffer` object has been submitted, it cannot be used again.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Examples
    
    // …
    
    const commandBuffer = commandEncoder.finish();
    device.queue.submit([commandBuffer]);
    
Note: Study the WebGPU samples to find complete examples.
  * The WebGPU API


# Clipboard
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Clipboard` interface of the Clipboard API provides read and write access to the contents of the system clipboard. This allows a web application to implement cut, copy, and paste features.
EventTarget  Clipboard 
The system clipboard is exposed through the global `Navigator.clipboard` property.
All of the Clipboard API methods operate asynchronously; they return a `Promise` which is resolved once the clipboard access has been completed. The promise is rejected if clipboard access is denied.
All the methods require a secure context. Additional requirements for using the API are discussed in the Security consideration section of the API overview topic.
## Instance methods
`Clipboard` is based on the `EventTarget` interface, and includes its methods.
`read()`
    
Requests arbitrary data (such as images) from the clipboard, returning a `Promise` that resolves with an array of `ClipboardItem` objects containing the clipboard's contents.
`readText()`
    
Requests text from the system clipboard, returning a `Promise` that is fulfilled with a string containing the clipboard's text once it's available.
`write()`
    
Writes arbitrary data to the system clipboard, returning a `Promise` that resolves when the operation completes.
`writeText()`
    
Writes text to the system clipboard, returning a `Promise` that is resolved once the text is fully copied into the clipboard.
  * `Document.execCommand()`


# CompositionEvent
The DOM `CompositionEvent` represents events that occur due to the user indirectly entering text.
Event  UIEvent  CompositionEvent 
## Constructor
`CompositionEvent()`
    
Creates a new `CompositionEvent` object instance.
## Instance properties
This interface also inherits properties of its parent, `UIEvent`, and its ancestor — `Event`.
`CompositionEvent.data` Read only
    
Returns the characters generated by the input method that raised the event; its varies depending on the type of event that generated the `CompositionEvent` object.
`CompositionEvent.locale` Read only Deprecated Non-standard
    
Returns the locale of the current input method (for example, the keyboard layout locale if the composition is associated with an Input method editor).
## Instance methods
This interface also inherits methods of its parent, `UIEvent`, and its ancestor — `Event`.
`CompositionEvent.initCompositionEvent()` Deprecated
    
Initializes the attributes of a `CompositionEvent` object.
  * compositionstart
  * compositionend
  * compositionupdate
  * UIEvent
  * Event


# SVGFEImageElement
The `SVGFEImageElement` interface corresponds to the `<feImage>` element.
EventTarget  Node  Element  SVGElement  SVGFEImageElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEImageElement.crossOrigin` Read only
    
An `SVGAnimatedString` reflects the `crossorigin` attribute of the given element, limited to only known values.
`SVGFEImageElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEImageElement.href` Read only
    
An `SVGAnimatedString` that reflects the `href` or `xlink:href` Deprecated attribute of the given element.
`SVGFEImageElement.preserveAspectRatio` Read only
    
An `SVGAnimatedPreserveAspectRatio` corresponding to the `preserveAspectRatio` attribute of the given element.
`SVGFEImageElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEImageElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEImageElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEImageElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
  * `<feImage>`


# CookieChangeEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `CookieChangeEvent` interface of the Cookie Store API is the event type of the `change` event fired at a `CookieStore` when any cookies are created or deleted.
Note: A cookie that is replaced due to the insertion of another cookie with the same name, domain, and path, is ignored and does not trigger a change event.
Event  CookieChangeEvent 
## Constructor
`CookieChangeEvent()`
    
Creates a new `CookieChangeEvent`.
## Instance properties
This interface also inherits properties from `Event`.
`CookieChangeEvent.changed` Read only
    
An array listing all newly-created cookies. Note that this will exclude cookies which were created with an expiry date in the past, as these cookies are immediately deleted.
`CookieChangeEvent.deleted` Read only
    
An array listing all cookies which were removed, either because they expired or because they were explicitly deleted. Note that this will include cookies which were created with an expiry date in the past.
## Instance methods
This interface also inherits methods from `Event`.
## Examples
In this example when the cookie is set, the event listener logs the event to the console. This is a `CookieChangeEvent` object with the `changed` property containing an object representing the cookie that has just been set.
    
    cookieStore.addEventListener("change", (event) => {
      console.log(event);
    });
    
    const one_day = 24 * 60 * 60 * 1000;
    cookieStore.set({
      name: "cookie1",
      value: "cookie1-value",
      expires: Date.now() + one_day,
      domain: "example.com",
    });
    
# Screen Capture API
The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream. This stream can then be recorded or shared with others over the network.
## Screen Capture API concepts and usage
The Screen Capture API is relatively simple to use. Its main method is `MediaDevices.getDisplayMedia()`, whose job is to ask the user to select a screen or portion of a screen to capture in the form of a `MediaStream`.
To start capturing video from the screen, you call `getDisplayMedia()` on `navigator.mediaDevices`:
    
    captureStream =
      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    
The `Promise` returned by `getDisplayMedia()` resolves to a `MediaStream` which streams the captured display surface.
See the article Using the Screen Capture API for a more in-depth look at how to use the API to capture screen contents as a stream.
### Screen capture extensions
The Screen Capture API has additional features that extend its capabilities:
#### Limiting the screen area captured in the stream
  * The Element Capture API restricts the captured region to a specified rendered DOM element and its descendants.
  * The Region Capture API crops the captured region to the area of the screen in which a specified DOM element is rendered.


See Using the Element Capture and Region Capture APIs to learn more.
#### Controlling the captured screen area
The Captured Surface Control API allows the capturing application to provide limited control over the captured display surface, for example zooming and scrolling its contents.
See Using the Captured Surface Control API to learn more.
## Interfaces
`BrowserCaptureMediaStreamTrack`
    
Represents a single video track; extends the `MediaStreamTrack` class with methods to limit the part of a self-capture stream (for example, a user's screen or window) that is captured.
`CaptureController`
    
Provides methods that can be used to further manipulate a captured display surface (captured via `MediaDevices.getDisplayMedia()`). A `CaptureController` object is associated with a captured display surface by passing it into a `getDisplayMedia()` call as the value of the options object's `controller` property.
`CropTarget`
    
Provides a static method, `fromElement()`, which returns a `CropTarget` instance that can be used to crop a captured video track to the area in which a specified element is rendered.
`RestrictionTarget`
    
Provides a static method, `fromElement()`, which returns a `RestrictionTarget` instance that can be used to restrict a captured video track to a specified DOM element.
## Additions to the MediaDevices interface
`MediaDevices.getDisplayMedia()`
    
The `getDisplayMedia()` method is added to the `MediaDevices` interface. Similar to `getUserMedia()`, this method creates a promise that resolves with a `MediaStream` containing the display area selected by the user, in a format that matches the specified options.
## Additions to existing dictionaries
The Screen Capture API adds properties to the following dictionaries defined by other specifications.
### MediaTrackConstraints
`MediaTrackConstraints.displaySurface`
    
A `ConstrainDOMString` indicating what type of display surface is to be captured. The value is one of `browser`, `monitor`, or `window`.
`MediaTrackConstraints.logicalSurface`
    
Indicates whether or not the video in the stream represents a logical display surface (that is, one which may not be entirely visible onscreen, or may be completely offscreen). A value of `true` indicates a logical display surface is to be captured.
`MediaTrackConstraints.suppressLocalAudioPlayback`
    
Controls whether the audio playing in a tab will continue to be played out of a user's local speakers when the tab is captured, or whether it will be suppressed. A value of `true` indicates that it will be suppressed.
### MediaTrackSettings
`MediaTrackSettings.cursor`
    
A string which indicates whether or not the display surface currently being captured includes the mouse cursor, and if so, whether it's only visible while the mouse is in motion or if it's always visible. The value is one of `always`, `motion`, or `never`.
`MediaTrackSettings.displaySurface`
    
A string indicating what type of display surface is currently being captured. The value is one of `browser`, `monitor`, or `window`.
`MediaTrackSettings.logicalSurface`
    
A boolean value, which is `true` if the video being captured doesn't directly correspond to a single onscreen display area.
`MediaTrackSettings.suppressLocalAudioPlayback`
    
A boolean value, which is `true` if the audio being captured is not played out of the user's local speakers.
`MediaTrackSettings.screenPixelRatio`
    
A number representing the ratio of the physical size of a pixel on the captured display surface (displayed at its physical resolution) to the logical size of a CSS pixel on the capturing screen (displayed at its logical resolution). It cannot be used as a constraint or capability.
### MediaTrackSupportedConstraints
`MediaTrackSupportedConstraints.displaySurface`
    
A boolean, which is `true` if the current environment supports the `MediaTrackConstraints.displaySurface` constraint.
`MediaTrackSupportedConstraints.logicalSurface`
    
A boolean, which is `true` if the current environment supports the constraint `MediaTrackConstraints.logicalSurface`.
`MediaTrackSupportedConstraints.suppressLocalAudioPlayback`
    
A boolean, which is `true` if the current environment supports the constraint `MediaTrackConstraints.suppressLocalAudioPlayback`.
## Security considerations
Websites that support Permissions Policy (either using the HTTP `Permissions-Policy` header or the `<iframe>` attribute `allow`) can specify a desire to use the Screen Capture API using the directive `display-capture`:
    
    <iframe allow="display-capture" src="/some-other-document.html">…</iframe>
    
A site can also specify a desire to use the Captured Surface Control API via the `captured-surface-control` directive. Specifically, the `forwardWheel()`, `increaseZoomLevel()`, `decreaseZoomLevel()`, and `resetZoomLevel()` methods are controlled by this directive.
The default allowlist for both directives is `self`, which permits any content within the same origin use Screen Capture.
These methods are considered powerful features, which means that even if permission is allowed via a `Permissions-Policy`, the user will still be prompted for permission to use them. The Permissions API can be used to query the aggregate permission (from both the website and the user) for using the listed features.
In addition, the specification requires that a user has recently interacted with the page to use these features — this means that transient activation is required. See the individual method pages for more details.
>
### api.MediaDevices.getDisplayMedia
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Screen_Capture_API` 72 7917–79Available as a member of `Navigator` instead of `MediaDevices`. 6633–66Since Firefox 33 you can capture screen data using `getUserMedia()`, with a `video` constraint called `mediaSource`. Before 52 it relied on a client-configurable list of allowed sites. 60 13 NoFrom Chrome Android 72 to 88, this method was exposed, but always failed with `NotAllowedError`. See bug 40418135. NoFrom Firefox Android 66 to 79, this method was exposed, but always failed with `NotAllowedError`. NoFrom Opera Android 51 to 88, this method was exposed, but always failed with `NotAllowedError`. See bug 40418135. No NoFrom Samsung Internet 11.0 to 88, this method was exposed, but always failed with `NotAllowedError`. See bug 40418135. NoFrom WebView Android 72 to 88, this method was exposed, but always failed with `NotAllowedError`. See bug 40418135. No  
`audio_capture_support` 74On Windows and ChromeOS, the entire system audio can be captured when sharing an entire screen. On Linux and macOS, only the audio of a tab can be captured. 79On Windows and ChromeOS, the entire system audio can be captured when sharing an entire screen. On Linux and macOS, only the audio of a tab can be captured. No 62On Windows and ChromeOS, the entire system audio can be captured when sharing an entire screen. On Linux and macOS, only the audio of a tab can be captured. No No No No No No No No  
`controller_option` 109 109 No 95 No No No No No No No No  
`monitorTypeSurfaces_option` 119Default value = `include` 119Default value = `include` No 105Default value = `include` No No No No No No No No  
`preferCurrentTab_option` 94Default value = `false` 94Default value = `false` No 80Default value = `false` No No No No No No No No  
`selfBrowserSurface_option` 112Default value = `exclude`107–111Default value = `include` 112Default value = `exclude`107–111Default value = `include` No 98Default value = `exclude`93–97Default value = `include` No No No No No No No No  
`surfaceSwitching_option` 107Default value = `exclude` 107Default value = `exclude` No 93Default value = `exclude` No No No No No No No No  
`systemAudio_option` 105Default value = `include` 105Default value = `include` No 91Default value = `include` No No No No No No No No  
### api.CropTarget
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Screen_Capture_API` 104 104 No 90 No No No No No No No No  
`fromElement_static` 104 104 No 90 No No No No No No No No  
### api.RestrictionTarget
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Screen_Capture_API` 132 132 No 117 No No No No No No No No  
`fromElement_static` 132 132 No 117 No No No No No No No No  
  * Using the Screen Capture API
  * Using the Element Capture and Region Capture APIs
  * Using the Captured Surface Control API
  * `MediaDevices.getDisplayMedia()`


# FileReader
Note: This feature is available in Web Workers.
The `FileReader` interface lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using `File` or `Blob` objects to specify the file or data to read.
File objects may be obtained from a `FileList` object returned as a result of a user selecting files using the `<input type="file">` element, or from a drag and drop operation's `DataTransfer` object. `FileReader` can only access the contents of files that the user has explicitly selected; it cannot be used to read a file by pathname from the user's file system. To read files on the client's file system by pathname, use the File System Access API. To read server-side files, use `fetch()`, with CORS permission if reading cross-origin.
EventTarget  FileReader 
## Constructor
`FileReader()`
    
Returns a new `FileReader` object.
See Using files from web applications for details and examples.
## Instance properties
`FileReader.error` Read only
    
A `DOMException` representing the error that occurred while reading the file.
`FileReader.readyState` Read only
    
A number indicating the state of the `FileReader`. This is one of the following:
Name Value Description  
`EMPTY` `0` No data has been loaded yet.  
`LOADING` `1` Data is currently being loaded.  
`DONE` `2` The entire read request has been completed.  
`FileReader.result` Read only
    
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.
## Instance methods
`FileReader.abort()`
    
Aborts the read operation. Upon return, the `readyState` will be `DONE`.
`FileReader.readAsArrayBuffer()`
    
Starts reading the contents of the specified `Blob`, once finished, the `result` attribute contains an `ArrayBuffer` representing the file's data.
`FileReader.readAsBinaryString()` Deprecated
    
Starts reading the contents of the specified `Blob`, once finished, the `result` attribute contains the raw binary data from the file as a string.
`FileReader.readAsDataURL()`
    
Starts reading the contents of the specified `Blob`, once finished, the `result` attribute contains a `data:` URL representing the file's data.
`FileReader.readAsText()`
    
Starts reading the contents of the specified `Blob`, once finished, the `result` attribute contains the contents of the file as a text string. An optional encoding name can be specified.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface. Remove the event listeners with `removeEventListener()`, once `FileReader` is no longer used, to avoid memory leaks.
`abort`
    
Fired when a read has been aborted, for example because the program called `FileReader.abort()`.
`error`
    
Fired when the read failed due to an error.
`load`
    
Fired when a read has completed successfully.
`loadend`
    
Fired when a read has completed, successfully or not.
`loadstart`
    
Fired when a read has started.
`progress`
    
Fired periodically as data is read.
## Examples
>
### Using FileReader
This example reads and displays the contents of a text file directly in the browser.
#### HTML
    
    <h1>File Reader</h1>
    <input type="file" id="file-input" />
    <div id="message"></div>
    <pre id="file-content"></pre>
    
#### JavaScript
    
    const fileInput = document.getElementById("file-input");
    const fileContentDisplay = document.getElementById("file-content");
    const messageDisplay = document.getElementById("message");
    
    fileInput.addEventListener("change", handleFileSelection);
    
    function handleFileSelection(event) {
      const file = event.target.files[0];
      fileContentDisplay.textContent = ""; // Clear previous file content
      messageDisplay.textContent = ""; // Clear previous messages
    
      // Validate file existence and type
      if (!file) {
        showMessage("No file selected. Please choose a file.", "error");
        return;
      }
    
      if (!file.type.startsWith("text")) {
        showMessage("Unsupported file type. Please select a text file.", "error");
        return;
      }
    
      // Read the file
      const reader = new FileReader();
      reader.onload = () => {
        fileContentDisplay.textContent = reader.result;
      };
      reader.onerror = () => {
        showMessage("Error reading the file. Please try again.", "error");
      };
      reader.readAsText(file);
    }
    
    // Displays a message to the user
    function showMessage(message, type) {
      messageDisplay.textContent = message;
      messageDisplay.style.color = type === "error" ? "red" : "green";
    }
    
### Result
  * Using files from web applications
  * `File`
  * `Blob`
  * `FileReaderSync`


# SVGFEPointLightElement
The `SVGFEPointLightElement` interface corresponds to the `<fePointLight>` element.
EventTarget  Node  Element  SVGElement  SVGFEPointLightElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEPointLightElement.x` Read only
    
An `SVGAnimatedNumber` corresponding to the `x` attribute of the given element.
`SVGFEPointLightElement.y` Read only
    
An `SVGAnimatedNumber` corresponding to the `y` attribute of the given element.
`SVGFEPointLightElement.z` Read only
    
An `SVGAnimatedNumber` corresponding to the `z` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
  * `<fePointLight>`


# SVGAnimateElement
The `SVGAnimateElement` interface corresponds to the `<animate>` element.
EventTarget  Node  Element  SVGElement  SVGAnimationElement  SVGAnimateElement 
## Instance properties
This interface has no properties but inherits properties from its parent, `SVGAnimationElement`.
## Instance methods
This interface has no methods but inherits methods from its parent, `SVGAnimationElement`.
# ScreenDetails
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `ScreenDetails` interface of the Window Management API represents the details of all the screens available to the user's device.
This information is accessed via the `Window.getScreenDetails()` method.
Note: `ScreenDetails` is a live object, meaning that it updates as the available screens change. You can therefore keep querying the same object to get updated values, rather than repeatedly calling `getScreenDetails()`.
EventTarget  ScreenDetails 
## Instance properties
Inherits properties from its parent, `EventTarget`.
`currentScreen` Read only Experimental
    
A single `ScreenDetailed` object representing detailed information about the screen that the current browser window is displayed in.
`screens` Read only Experimental
    
An array of `ScreenDetailed` objects, each one representing detailed information about one specific screen available to the user's device.
Note: `screens` only includes "extended" displays, not those that mirror another display.
## Events
`currentscreenchange` Experimental
    
Fired when the window's current screen changes in some way — for example available width or height, or orientation.
`screenschange` Experimental
    
Fired when screens are connected to or disconnected from the system.
## Examples
Note: See Multi-window learning environment for a full example (see the source code also).
### Basic screen information access
When `Window.getScreenDetails()` is invoked, the user will be asked for permission to manage windows on all their displays (the status of this permission can be checked using `Permissions.query()` to query `window-management`). If the user grants permission, a `ScreenDetails` object is returned. This object contains details of all the screens available to the user's system.
The below example opens a full-size window on each available display.
    
    const screenDetails = await window.getScreenDetails();
    
    // Open a window on each screen of the device
    for (const screen of screenDetails.screens) {
      openWindow(
        screen.availLeft,
        screen.availTop,
        screen.availWidth,
        screen.availHeight,
        url,
      );
    }
    
### Responding to changes in available screens
You could use the `screenschange` event to detect when the available screens have changed (perhaps when a screen is plugged in or unplugged), report the change, and update window arrangements to suit the new configuration:
    
    const screenDetails = await window.getScreenDetails();
    
    // Return the number of screens
    let noOfScreens = screenDetails.screens.length;
    
    screenDetails.addEventListener("screenschange", () => {
      // If the new number of screens is different to the old number of screens,
      // report the difference
      if (screenDetails.screens.length !== noOfScreens) {
        console.log(
          `The screen count changed from ${noOfScreens} to ${screenDetails.screens.length}`,
        );
    
        // Update noOfScreens value
        noOfScreens = screenDetails.screens.length;
      }
    
      // Open, close, or rearrange windows as needed,
      // to fit the new screen configuration
      updateWindows();
    });
    
  * Window Management API


# Navigator
The `Navigator` interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.
A `Navigator` object can be retrieved using the read-only `window.navigator` property.
## Instance properties
Doesn't inherit any properties.
### Standard properties
`Navigator.bluetooth` Read only Experimental Secure context
    
Returns a `Bluetooth` object for the current document, providing access to Web Bluetooth API functionality.
`Navigator.clipboard` Read only Secure context
    
Returns a `Clipboard` object that provides read and write access to the system clipboard.
`Navigator.connection` Read only
    
Returns a `NetworkInformation` object containing information about the network connection of a device.
`Navigator.contacts` Read only Experimental Secure context
    
Returns a `ContactsManager` interface which allows users to select entries from their contact list and share limited details of the selected entries with a website or application.
`Navigator.cookieEnabled` Read only
    
Returns false if setting a cookie will be ignored and true otherwise.
`Navigator.credentials` Read only Secure context
    
Returns the `CredentialsContainer` interface which exposes methods to request credentials and notify the user agent when interesting events occur such as successful sign in or sign out.
`Navigator.deviceMemory` Read only Secure context
    
Returns the amount of device memory in gigabytes. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024.
`Navigator.devicePosture` Read only Experimental
    
Returns the browser's `DevicePosture` object, which allows developers to query the device's current posture (that is, whether the viewport is in a flat or folded state) and run code in response to posture changes.
`Navigator.geolocation` Read only
    
Returns a `Geolocation` object allowing accessing the location of the device.
`Navigator.gpu` Read only Secure context
    
Returns the `GPU` object for the current browsing context. The entry point for the WebGPU API.
`Navigator.hardwareConcurrency` Read only
    
Returns the number of logical processor cores available.
`Navigator.hid` Read only Experimental Secure context
    
Returns an `HID` object providing methods for connecting to HID devices, listing attached HID devices, and event handlers for connected HID devices.
`Navigator.ink` Read only Experimental
    
Returns an `Ink` object for the current document, providing access to Ink API functionality.
`Navigator.keyboard` Read only Experimental Secure context
    
Returns a `Keyboard` object which provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
`Navigator.language` Read only
    
Returns a string representing the preferred language of the user, usually the language of the browser UI. The `null` value is returned when this is unknown.
`Navigator.languages` Read only
    
Returns an array of strings representing the languages known to the user, by order of preference.
`Navigator.locks` Read only Secure context
    
Returns a `LockManager` object that provides methods for requesting a new `Lock` object and querying for an existing `Lock` object.
`Navigator.login` Read only Secure context
    
Provides access to the browser's `NavigatorLogin` object, which a federated identity provider (IdP) can use to set a user's login status when they sign into or out of the IdP. See Federated Credential Management (FedCM) API for more details.
`Navigator.maxTouchPoints` Read only
    
Returns the maximum number of simultaneous touch contact points are supported by the current device.
`Navigator.mediaCapabilities` Read only
    
Returns a `MediaCapabilities` object that can expose information about the decoding and encoding capabilities for a given format and output capabilities.
`Navigator.mediaDevices` Read only Secure context
    
Returns a reference to a `MediaDevices` object which can then be used to get information about available media devices (`MediaDevices.enumerateDevices()`), find out what constrainable properties are supported for media on the user's computer and user agent (`MediaDevices.getSupportedConstraints()`), and to request access to media using `MediaDevices.getUserMedia()`.
`Navigator.mediaSession` Read only
    
Returns `MediaSession` object which can be used to provide metadata that can be used by the browser to present information about the currently-playing media to the user, such as in a global media controls UI.
`Navigator.onLine` Read only
    
Returns a boolean value indicating whether the browser is working online.
`Navigator.pdfViewerEnabled` Read only
    
Returns `true` if the browser can display PDF files inline when navigating to them, and `false` otherwise.
`Navigator.permissions` Read only
    
Returns a `Permissions` object that can be used to query and update permission status of APIs covered by the Permissions API.
`Navigator.presentation` Read only Secure context
    
Returns a reference to the `Presentation` API.
`Navigator.scheduling` Read only Experimental
    
Returns a `Scheduling` object for the current document.
`Navigator.serial` Read only Experimental Secure context
    
Returns a `Serial` object, which represents the entry point into the Web Serial API to enable the control of serial ports.
`Navigator.serviceWorker` Read only Secure context
    
Returns a `ServiceWorkerContainer` object, which provides access to registration, removal, upgrade, and communication with the `ServiceWorker` objects for the associated document.
`Navigator.storage` Read only Secure context
    
Returns the singleton `StorageManager` object used for managing persistence permissions and estimating available storage on a site-by-site/app-by-app basis.
`Navigator.usb` Read only Secure context
    
Returns a `USB` object for the current document, providing access to WebUSB API functionality.
`Navigator.userActivation` Read only
    
Returns a `UserActivation` object containing information about the current window's user activation state.
`Navigator.userAgent` Read only
    
Returns the user agent string for the current browser.
`Navigator.userAgentData` Read only Experimental Secure context
    
Returns a `NavigatorUAData` object, which gives access to information about the browser and operating system of the user.
`Navigator.virtualKeyboard` Read only Experimental Secure context
    
Returns a reference to the `VirtualKeyboard` API, to take control of the on-screen virtual keyboard.
`Navigator.wakeLock` Read only Secure context
    
Returns a `WakeLock` interface you can use to request screen wake locks and prevent screen from dimming, turning off, or showing a screen saver.
`Navigator.webdriver` Read only
    
Indicates whether the user agent is controlled by automation.
`Navigator.windowControlsOverlay` Read only Secure context
    
Returns the `WindowControlsOverlay` interface which exposes information about the geometry of the title bar in desktop Progressive Web Apps, and an event to know whenever it changes.
`Navigator.xr` Read only Experimental Secure context
    
Returns `XRSystem` object, which represents the entry point into the WebXR API.
### Non-standard properties
`Navigator.buildID` Read only Non-standard
    
Returns the build identifier of the browser. In modern browsers this property now returns a fixed timestamp as a privacy measure, e.g., `20181001000000` in Firefox 64 onwards.
`Navigator.globalPrivacyControl` Read only Experimental
    
Returns a boolean indicating a user's consent to their information being shared or sold.
`Navigator.standalone` Non-standard
    
Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.
### Deprecated properties
`Navigator.activeVRDisplays` Read only Deprecated Non-standard
    
Returns an array containing every `VRDisplay` object that is currently presenting (`VRDisplay.isPresenting` is `true`).
`Navigator.appCodeName` Read only
    
Always returns `'Mozilla'`, in any browser.
`Navigator.appName` Read only
    
Always returns `'Netscape'`, in any browser.
`Navigator.appVersion` Read only
    
Returns the version of the browser as a string. Do not rely on this property to return the correct value.
`Navigator.doNotTrack` Read only Deprecated Non-standard
    
Reports the value of the user's do-not-track preference. When this value is "1", your website or application should not track the user.
`Navigator.mimeTypes` Read only
    
Returns an `MimeTypeArray` listing the MIME types supported by the browser.
`Navigator.oscpu` Read only
    
Returns a string that represents the current operating system.
`Navigator.platform` Read only
    
Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.
`Navigator.plugins` Read only
    
Returns a `PluginArray` listing the plugins installed in the browser.
`Navigator.product` Read only
    
Always returns `'Gecko'`, in any browser.
`Navigator.productSub` Read only
    
Returns either the string `'20030107'`, or `'"20100101'`.
`Navigator.vendor` Read only
    
Returns either the empty string, `'Apple Computer Inc.'`, or `'Google Inc.'`.
`Navigator.vendorSub` Read only
    
Always returns the empty string.
## Instance methods
Doesn't inherit any method.
`Navigator.canShare()` Secure context
    
Returns `true` if a call to `Navigator.share()` would succeed.
`Navigator.clearAppBadge()` Secure context
    
Clears a badge on the current app's icon and returns a `Promise` that resolves with `undefined`.
`Navigator.deprecatedReplaceInURN()` Experimental
    
Substitutes specified strings inside the mapped URL corresponding to a given opaque URN or `FencedFrameConfig`'s internal `url` property. This method has been made available as a temporary measure (hence "deprecated") to enable that substitution for fenced frame URLs, helping ad tech providers to migrate existing implementations across to privacy sandbox APIs.
`Navigator.getAutoplayPolicy()` Experimental
    
Returns a value indicating whether the specified media element, audio context, or media feature "type" is allowed to autoplay.
`Navigator.getBattery()` Secure context
    
Returns a promise that resolves with a `BatteryManager` object that returns information about the battery charging status.
`Navigator.getGamepads()`
    
returns an array of `Gamepad` objects, one for each gamepad connected to the device.
`Navigator.getInstalledRelatedApps()` Experimental Secure context
    
Returns a promise that resolves with an array of objects representing any related native or Progressive Web Applications that the user has installed.
`Navigator.registerProtocolHandler()` Secure context
    
Allows websites to register themselves as a possible handler for a given protocol.
`Navigator.requestMediaKeySystemAccess()` Secure context
    
Returns a `Promise` for a MediaKeySystemAccess object.
`Navigator.requestMIDIAccess()` Secure context
    
Returns a `Promise` representing a request for access to MIDI devices on the user's system.
`Navigator.sendBeacon()`
    
Used to asynchronously transfer a small amount of data using HTTP from the User Agent to a web server.
`Navigator.setAppBadge()` Secure context
    
Sets a badge on the icon associated with this app and returns a `Promise` that resolves with `undefined`.
`Navigator.share()` Secure context
    
Invokes the native sharing mechanism of the current platform.
`Navigator.vibrate()`
    
Causes vibration on devices with support for it. Does nothing if vibration support isn't available.
`Navigator.unregisterProtocolHandler()` Secure context
    
Unregister a website that is a handler for a given protocol.
### Deprecated methods
`Navigator.getUserMedia()` Deprecated Secure context
    
After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.
`Navigator.getVRDisplays()` Deprecated Non-standard
    
Returns a promise that resolves to an array of `VRDisplay` objects representing any available VR devices connected to the computer.
`Navigator.javaEnabled()`
    
Always returns false.
`Navigator.taintEnabled()`
    
Returns `false`. JavaScript taint/untaint functions removed in JavaScript 1.2.
# Document
The `Document` interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.
The DOM tree includes elements such as `<body>` and `<table>`, among many others. It provides functionality globally to the document, like how to obtain the page's URL and create new elements in the document.
EventTarget  Node  Document 
The `Document` interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g., HTML, XML, SVG, …), a larger API is available: HTML documents, served with the `"text/html"` content type, also implement the `HTMLDocument` interface, whereas XML and SVG documents implement the `XMLDocument` interface.
## Constructor
`Document()`
    
Creates a new `Document` object.
## Instance properties
This interface also inherits from the `Node` and `EventTarget` interfaces.
`Document.activeElement` Read only
    
Returns the `Element` that currently has focus.
`Document.adoptedStyleSheets`
    
Add an array of constructed stylesheets to be used by the document. These stylesheets may also be shared with shadow DOM subtrees of the same document.
`Document.body`
    
Returns the `<body>` or `<frameset>` node of the current document.
`Document.characterSet` Read only
    
Returns the character set being used by the document.
`Document.childElementCount` Read only
    
Returns the number of child elements of the current document.
`Document.children` Read only
    
Returns the child elements of the current document.
`Document.compatMode` Read only
    
Indicates whether the document is rendered in quirks or strict mode.
`Document.contentType` Read only
    
Returns the Content-Type from the MIME Header of the current document.
`Document.currentScript` Read only
    
Returns the `<script>` element whose script is currently being processed and isn't a JavaScript module.
`Document.doctype` Read only
    
Returns the Document Type Definition (DTD) of the current document.
`Document.documentElement` Read only
    
Returns the `Element` that is a direct child of the document. For HTML documents, this is normally the `HTMLHtmlElement` object representing the document's `<html>` element.
`Document.documentURI` Read only
    
Returns the document location as a string.
`Document.embeds` Read only
    
Returns an `HTMLCollection` of the embedded `<embed>` elements in the document.
`Document.featurePolicy` Experimental Read only
    
Returns the `FeaturePolicy` interface with the feature policies applied to the document.
`Document.firstElementChild` Read only
    
Returns the first child element of the current document.
`Document.fonts`
    
Returns the `FontFaceSet` interface of the current document.
`Document.forms` Read only
    
Returns an `HTMLCollection` of the `<form>` elements in the document.
`Document.fragmentDirective` Read only
    
Returns the `FragmentDirective` for the current document.
`Document.fullscreenElement` Read only
    
The element that's currently in full screen mode for this document.
`Document.head` Read only
    
Returns the `<head>` element of the current document.
`Document.hidden` Read only
    
Returns a Boolean value indicating if the page is considered hidden or not.
`Document.images` Read only
    
Returns an `HTMLCollection` of the images in the document.
`Document.implementation` Read only
    
Returns the DOM implementation associated with the current document.
`Document.lastElementChild` Read only
    
Returns the last child element of the current document.
`Document.links` Read only
    
Returns an `HTMLCollection` of the hyperlinks in the document.
`Document.pictureInPictureElement` Read only
    
Returns the `Element` currently being presented in picture-in-picture mode in this document.
`Document.pictureInPictureEnabled` Read only
    
Returns true if the picture-in-picture feature is enabled.
`Document.plugins` Read only
    
Returns an `HTMLCollection` of the available plugins.
`Document.pointerLockElement` Read only
    
Returns the element set as the target for mouse events while the pointer is locked. `null` if lock is pending, pointer is unlocked, or if the target is in another document.
`Document.prerendering` Read only Experimental Non-standard
    
Returns a boolean that indicates whether the document is currently in the process of prerendering, as initiated via the Speculation Rules API.
`Document.scripts` Read only
    
Returns an `HTMLCollection` of the `<script>` elements in the document.
`Document.scrollingElement` Read only
    
Returns a reference to the `Element` that scrolls the document.
`Document.styleSheets` Read only
    
Returns a `StyleSheetList` of `CSSStyleSheet` objects for stylesheets explicitly linked into, or embedded in a document.
`Document.timeline` Read only
    
Returns timeline as a special instance of `DocumentTimeline` that is automatically created on page load.
`Document.visibilityState` Read only
    
Returns a `string` denoting the visibility state of the document. Possible values are `visible`, `hidden`, and `unloaded`.
### Extensions for HTMLDocument
The `Document` interface for HTML documents inherits from the `HTMLDocument` interface or is extended for such documents.
`Document.cookie`
    
Returns a semicolon-separated list of the cookies for that document or sets a single cookie.
`Document.defaultView` Read only
    
Returns a reference to the window object.
`Document.designMode`
    
Gets/sets the ability to edit the whole document.
`Document.dir`
    
Gets/sets directionality (rtl/ltr) of the document.
`Document.fullscreenEnabled` Read only
    
Indicates whether fullscreen mode is available.
`Document.lastModified` Read only
    
Returns the date on which the document was last modified.
`Document.location` Read only
    
Returns the URI of the current document.
`Document.readyState` Read only
    
Returns loading status of the document.
`Document.referrer` Read only
    
Returns the URI of the page that linked to this page.
`Document.title`
    
Sets or gets the title of the current document.
`Document.URL` Read only
    
Returns the document location as a string.
Named properties
    
Some elements in the document are also exposed as properties:
  * For each `<embed>`, `<form>`, `<iframe>`, `<img>`, and `<object>` element, its `name` (if non-empty) is exposed. For example, if the document contains `<form name="my_form">`, then `document["my_form"]` (and its equivalent `document.my_form`) returns a reference to that element.
  * For each `<object>` element, its `id` (if non-empty) is exposed.
  * For each `<img>` element with non-empty `name`, its `id` (if non-empty) is exposed.


If a property corresponds to a single element, that element is directly returned. If that single element is an iframe, then its `contentWindow` is returned instead. If the property corresponds to multiple elements, then an `HTMLCollection` is returned containing all of them.
### Deprecated properties
`Document.alinkColor` Deprecated
    
Returns or sets the color of active links in the document body.
`Document.all` Deprecated
    
Provides access to all elements in the document — it returns an `HTMLAllCollection` rooted at the document node. This is a legacy, non-standard property and should not be used.
`Document.anchors` Deprecated Read only
    
Returns a list of all of the anchors in the document.
`Document.applets` Deprecated Read only
    
Returns an empty `HTMLCollection`. Legacy property that used to return the list of applets within a document.
`Document.bgColor` Deprecated
    
Gets/sets the background color of the current document.
`Document.charset` Deprecated Read only
    
Alias of `Document.characterSet`. Use this property instead.
`Document.domain` Deprecated
    
Gets/sets the domain of the current document.
`Document.fgColor` Deprecated
    
Gets/sets the foreground color, or text color, of the current document.
`Document.fullscreen` Deprecated
    
Returns `true` when the document is in fullscreen mode.
`Document.inputEncoding` Deprecated Read only
    
Alias of `Document.characterSet`. Use this property instead.
`Document.lastStyleSheetSet` Deprecated Read only Non-standard
    
Returns the name of the style sheet set that was last enabled. Has the value `null` until the style sheet is changed by setting the value of `selectedStyleSheetSet`.
`Document.linkColor` Deprecated
    
Gets/sets the color of hyperlinks in the document.
`Document.preferredStyleSheetSet` Deprecated Read only Non-standard
    
Returns the preferred style sheet set as specified by the page author.
`Document.rootElement` Deprecated
    
Like `Document.documentElement`, but only for `<svg>` root elements. Use this property instead.
`Document.selectedStyleSheetSet` Deprecated Non-standard
    
Returns which style sheet set is currently in use.
`Document.styleSheetSets` Deprecated Read only Non-standard
    
Returns a list of the style sheet sets available on the document.
`Document.vlinkColor` Deprecated
    
Gets/sets the color of visited hyperlinks.
`Document.xmlEncoding` Deprecated
    
Returns the encoding as determined by the XML declaration.
`Document.xmlStandalone` Deprecated
    
Returns `true` if the XML declaration specifies the document to be standalone (e.g., An external part of the DTD affects the document's content), else `false`.
`Document.xmlVersion` Deprecated
    
Returns the version number as specified in the XML declaration or `"1.0"` if the declaration is absent.
## Instance methods
This interface also inherits from the `Node` and `EventTarget` interfaces.
`Document.adoptNode()`
    
Adopt node from an external document.
`Document.append()`
    
Inserts a set of `Node` objects or strings after the last child of the document.
`Document.browsingTopics()` Experimental Non-standard
    
Returns a promise that fulfills with an array of objects representing the top topics for the user, one from each of the last three epochs. By default, the method also causes the browser to record the current page visit as observed by the caller, so the page's hostname can later be used in topics calculation. See the Topics API for more details.
`Document.captureEvents()` Deprecated
    
See `Window.captureEvents`.
`Document.caretPositionFromPoint()`
    
Returns a `CaretPosition` object containing the DOM node containing the caret, and caret's character offset within that node.
`Document.caretRangeFromPoint()` Non-standard
    
Gets a `Range` object for the document fragment under the specified coordinates.
`Document.createAttribute()`
    
Creates a new `Attr` object and returns it.
`Document.createAttributeNS()`
    
Creates a new attribute node in a given namespace and returns it.
`Document.createCDATASection()`
    
Creates a new CDATA node and returns it.
`Document.createComment()`
    
Creates a new comment node and returns it.
`Document.createDocumentFragment()`
    
Creates a new document fragment.
`Document.createElement()`
    
Creates a new element with the given tag name.
`Document.createElementNS()`
    
Creates a new element with the given tag name and namespace URI.
`Document.createEvent()` Deprecated
    
Creates an event object.
`Document.createNodeIterator()`
    
Creates a `NodeIterator` object.
`Document.createProcessingInstruction()`
    
Creates a new `ProcessingInstruction` object.
`Document.createRange()`
    
Creates a `Range` object.
`Document.createTextNode()`
    
Creates a text node.
`Document.createTouch()` Deprecated Non-standard
    
Creates a `Touch` object.
`Document.createTouchList()` Deprecated Non-standard
    
Creates a `TouchList` object.
`Document.createTreeWalker()`
    
Creates a `TreeWalker` object.
`Document.elementFromPoint()`
    
Returns the topmost element at the specified coordinates.
`Document.elementsFromPoint()`
    
Returns an array of all elements at the specified coordinates.
`Document.enableStyleSheetsForSet()` Deprecated Non-standard
    
Enables the style sheets for the specified style sheet set.
`Document.exitFullscreen()`
    
Stops document's fullscreen element from being displayed fullscreen.
`Document.exitPictureInPicture()`
    
Remove the video from the floating picture-in-picture window back to its original container.
`Document.exitPointerLock()`
    
Release the pointer lock.
`Document.getAnimations()`
    
Returns an array of all `Animation` objects currently in effect, whose target elements are descendants of the `document`.
`Document.getBoxQuads()` Experimental
    
Returns a list of `DOMQuad` objects representing the CSS fragments of the node.
`Document.getElementById()`
    
Returns an object reference to the identified element.
`Document.getElementsByClassName()`
    
Returns a list of elements with the given class name.
`Document.getElementsByTagName()`
    
Returns a list of elements with the given tag name.
`Document.getElementsByTagNameNS()`
    
Returns a list of elements with the given tag name and namespace.
`Document.getSelection()`
    
Returns a `Selection` object representing the range of text selected by the user, or the current position of the caret.
`Document.hasStorageAccess()`
    
Returns a `Promise` that resolves with a boolean value indicating whether the document has access to unpartitioned cookies.
`Document.hasUnpartitionedCookieAccess()`
    
New name for `Document.hasStorageAccess()`.
`Document.importNode()`
    
Returns a clone of a node from an external document.
`Document.moveBefore()` Experimental
    
Moves a given `Node` inside the `Document` DOM node as a direct child, before a given reference node, without removing and then inserting the node.
`Document.mozSetImageElement()` Non-standard
    
Allows you to change the element being used as the background image for a specified element ID.
`Document.prepend()`
    
Inserts a set of `Node` objects or strings before the first child of the document.
`Document.querySelector()`
    
Returns the first Element node within the document, in document order, that matches the specified selectors.
`Document.querySelectorAll()`
    
Returns a list of all the Element nodes within the document that match the specified selectors.
`Document.releaseCapture()` Non-standard
    
Releases the current mouse capture if it's on an element in this document.
`Document.releaseEvents()` Deprecated
    
See `Window.releaseEvents()`.
`Document.replaceChildren()`
    
Replaces the existing children of a document with a specified new set of children.
`Document.requestStorageAccess()`
    
Allows a document loaded in a third-party context (i.e., embedded in an `<iframe>`) to request access to unpartitioned cookies, in cases where user agents by default block access to unpartitioned cookies by sites loaded in a third-party context to improve privacy.
`Document.requestStorageAccessFor()` Experimental
    
Allows top-level sites to request third-party cookie access on behalf of embedded content originating from another site in the same related website set.
`Document.startViewTransition()`
    
Starts a new view transition and returns a `ViewTransition` object to represent it.
The `Document` interface is extended with the `XPathEvaluator` interface:
`Document.createExpression()`
    
Compiles an `XPathExpression` which can then be used for (repeated) evaluations.
`Document.createNSResolver()` Deprecated
    
Returns the input node as-is.
`Document.evaluate()`
    
Evaluates an XPath expression.
### Extension for HTML documents
The `Document` interface for HTML documents inherit from the `HTMLDocument` interface or is extended for such documents:
`Document.clear()` Deprecated
    
This method does nothing.
`Document.close()`
    
Closes a document stream for writing.
`Document.execCommand()` Deprecated
    
On an editable document, executes a formatting command.
`Document.getElementsByName()`
    
Returns a list of elements with the given name.
`Document.hasFocus()`
    
Returns `true` if the focus is currently located anywhere inside the specified document.
`Document.open()`
    
Opens a document stream for writing.
`Document.queryCommandEnabled()` Deprecated Non-standard
    
Returns true if the formatting command can be executed on the current range.
`Document.queryCommandIndeterm()` Deprecated
    
Returns true if the formatting command is in an indeterminate state on the current range.
`Document.queryCommandState()` Deprecated Non-standard
    
Returns true if the formatting command has been executed on the current range.
`Document.queryCommandSupported()` Deprecated Non-standard
    
Returns true if the formatting command is supported on the current range.
`Document.queryCommandValue()` Deprecated
    
Returns the current value of the current range for a formatting command.
`Document.write()` Deprecated
    
Writes text in a document.
`Document.writeln()` Deprecated
    
Writes a line of text in a document.
## Static methods
This interface also inherits from the `Node` and `EventTarget` interfaces.
`Document.parseHTML()`
    
Creates a new `Document` object from a string of HTML in an XSS-safe manner with sanitization.
`Document.parseHTMLUnsafe()`
    
Creates a new `Document` object from a string of HTML without performing sanitization. The string may contain declarative shadow roots.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface. In addition to the events listed below, many events can bubble from nodes contained in the document tree.
`afterscriptexecute` Non-standard Deprecated
    
Fired when a static `<script>` element finishes executing its script
`beforescriptexecute` Non-standard Deprecated
    
Fired when a static `<script>` is about to start executing.
`prerenderingchange` Experimental
    
Fired on a prerendered document when it is activated (i.e., the user views the page).
`securitypolicyviolation`
    
Fired when a content security policy is violated.
`visibilitychange`
    
Fired when the content of a tab has become visible or has been hidden.
### Fullscreen events
`fullscreenchange`
    
Fired when the `Document` transitions into or out of fullscreen mode.
`fullscreenerror`
    
Fired if an error occurs while attempting to switch into or out of fullscreen mode.
### Load & unload events
`DOMContentLoaded`
    
Fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
`readystatechange`
    
Fired when the `readyState` attribute of a document has changed.
### Pointer lock events
`pointerlockchange`
    
Fired when the pointer is locked/unlocked.
`pointerlockerror`
    
Fired when locking the pointer failed.
### Scroll events
`scroll`
    
Fired when the document view or an element has been scrolled.
`scrollend`
    
Fired when the document view or an element has completed scrolling.
`scrollsnapchange` Experimental
    
Fired on the scroll container at the end of a scrolling operation when a new scroll snap target has been selected.
`scrollsnapchanging` Experimental
    
Fired on the scroll container when the browser determines a new scroll snap target is pending, i.e., it will be selected when the current scroll gesture ends.
### Selection events
`selectionchange`
    
Fired when the current text selection on a document is changed.
### Bubbled events
Not all events that bubble can reach the `Document` object. Only the following do and can be listened for on the `Document` object:
  * `abort`
  * `auxclick`
  * `beforeinput`
  * `beforematch`
  * `beforetoggle`
  * `blur`
  * `cancel`
  * `canplay`
  * `canplaythrough`
  * `change`
  * `click`
  * `close`
  * `contextlost`
  * `contextmenu`
  * `contextrestored`
  * `copy`
  * `cuechange`
  * `cut`
  * `dblclick`
  * `drag`
  * `dragend`
  * `dragenter`
  * `dragleave`
  * `dragover`
  * `dragstart`
  * `drop`
  * `durationchange`
  * `emptied`
  * `ended`
  * `error`
  * `focus`
  * `formdata`
  * `input`
  * `invalid`
  * `keydown`
  * `keypress`
  * `keyup`
  * `load`
  * `loadeddata`
  * `loadedmetadata`
  * `loadstart`
  * `mousedown`
  * `mouseenter`
  * `mouseleave`
  * `mousemove`
  * `mouseout`
  * `mouseover`
  * `mouseup`
  * `paste`
  * `pause`
  * `play`
  * `playing`
  * `progress`
  * `ratechange`
  * `reset`
  * `resize`
  * `scroll`
  * `scrollend`
  * `securitypolicyviolation`
  * `seeked`
  * `seeking`
  * `select`
  * `slotchange`
  * `stalled`
  * `submit`
  * `suspend`
  * `timeupdate`
  * `toggle`
  * `volumechange`
  * `waiting`
  * `wheel`


# SVGPathElement
The `SVGPathElement` interface corresponds to the `<path>` element.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGGeometryElement  SVGPathElement 
Note: In SVG 2 the `getPathSegAtLength()` and `createSVGPathSeg*` methods were removed and the `pathLength` property and the `getTotalLength()` and `getPointAtLength()` methods were moved to `SVGGeometryElement`.
## Instance properties
This interface inherits properties from its parent, `SVGGeometryElement`.
`SVGPathElement.pathLength` Read only
    
This property reflects the `pathLength` attribute.
## Instance methods
This interface also inherits methods from its parent, `SVGGeometryElement`.
`SVGPathElement.getPathData()` Experimental
    
Returns the sequence of path segments that corresponds to the path data, optionally normalizing the values and segment types.
`SVGPathElement.getPointAtLength()`
    
Returns the point at a given distance along the path.
`SVGPathElement.getTotalLength()`
    
Returns the user agent's computed value for the total length of the path in user units.
`SVGPathElement.setPathData()` Experimental
    
Sets the sequence of path segments as the new path data.
`SVGPathElement.getPathSegmentAtLength()` Experimental
    
Returns the segment at a given distance along the path.
### Deprecated methods
`SVGPathElement.getPathSegAtLength()` Deprecated
    
Returns an unsigned long representing the index within the `pathSegList` utilizing the user agent's distance-along-a-path algorithm.
`SVGPathElement.createSVGPathSegClosePath()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegClosePath` object.
`SVGPathElement.createSVGPathSegMovetoAbs()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegMovetoAbs` object.
`SVGPathElement.createSVGPathSegMovetoRel()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegMovetoRel` object.
`SVGPathElement.createSVGPathSegLinetoAbs()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegLinetoAbs` object.
`SVGPathElement.createSVGPathSegLinetoRel()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegLinetoRel` object.
`SVGPathElement.createSVGPathSegCurvetoCubicAbs()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegCurvetoCubicAbs` object.
`SVGPathElement.createSVGPathSegCurvetoCubicRel()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegCurvetoCubicRel` object.
`SVGPathElement.createSVGPathSegCurvetoQuadraticAbs()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegCurvetoQuadraticAbs` object.
`SVGPathElement.createSVGPathSegCurvetoQuadraticRel()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegCurvetoQuadraticRel` object.
`SVGPathElement.createSVGPathSegArcAbs()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegArcAbs` object.
`SVGPathElement.createSVGPathSegArcRel()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegArcRel` object.
`SVGPathElement.createSVGPathSegLinetoHorizontalAbs()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegLinetoHorizontalAbs` object.
`SVGPathElement.createSVGPathSegLinetoHorizontalRel()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegLinetoHorizontalRel` object.
`SVGPathElement.createSVGPathSegLinetoVerticalAbs()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegLinetoVerticalAbs` object.
`SVGPathElement.createSVGPathSegLinetoVerticalRel()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegLinetoVerticalRel` object.
`SVGPathElement.createSVGPathSegCurvetoCubicSmoothAbs()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegCurvetoCubicSmoothAbs` object.
`SVGPathElement.createSVGPathSegCurvetoCubicSmoothRel()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegCurvetoCubicSmoothRel` object.
`SVGPathElement.createSVGPathSegCurvetoQuadraticSmoothAbs()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegCurvetoQuadraticSmoothAbs` object.
`SVGPathElement.createSVGPathSegCurvetoQuadraticSmoothRel()` Deprecated
    
Returns a stand-alone, parentless `SVGPathSegCurvetoQuadraticSmoothRel` object.
  * `<path>` SVG Element


# USBAlternateInterface
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USBAlternateInterface` interface of the WebUSB API provides information about a particular configuration of an interface provided by the USB device. An interface includes one or more alternate settings which can configure a set of endpoints based on the operating mode of the device.
## Constructor
`USBAlternateInterface()` Experimental
    
Creates a new `USBAlternateInterface` object which will be populated with information about the alternate interface of the provided `USBInterface` with the given alternate setting number.
## Instance properties
`USBAlternateInterface.alternateSetting` Read only Experimental
    
Returns the alternate setting number of this interface. This is equal to the `bAlternateSetting` field of the interface descriptor defining this interface.
`USBAlternateInterface.interfaceClass` Read only Experimental
    
Returns the class of this interface. This is equal to the `bInterfaceClass` field of the interface descriptor defining this interface. Standardized values for this field are defined by the USB Implementers Forum. A value of `0xFF` indicates a vendor-defined interface.
`USBAlternateInterface.interfaceSubclass` Read only Experimental
    
Returns the subclass of this interface. This is equal to the `bInterfaceSubClass` field of the interface descriptor defining this interface. The meaning of this value depends on the `interfaceClass` field.
`USBAlternateInterface.interfaceProtocol` Read only Experimental
    
Returns the protocol supported by this interface. This is equal to the `bInterfaceProtocol` field of the interface descriptor defining this interface. The meaning of this value depends on the `interfaceClass` and `interfaceSubclass` fields.
`USBAlternateInterface.interfaceName` Read only Experimental
    
Returns the name of the interface, if one is provided by the device. This is the value of the string descriptor with the index specified by the `iInterface` field of the interface descriptor defining this interface.
`USBAlternateInterface.endpoints` Read only Experimental
    
Returns an array containing instances of the `USBEndpoint` interface describing each of the endpoints that are part of this interface.
# RTCCertificate
The `RTCCertificate` interface of the WebRTC API provides an object representing a certificate that an `RTCPeerConnection` uses to authenticate.
`RTCCertificate` is a serializable object, so it can be cloned with `structuredClone()` or copied between Workers using `postMessage()`.
## Instance properties
`RTCCertificate.expires` Read only
    
Returns the expiration date of the certificate.
## Instance methods
`RTCCertificate.getFingerprints()`
    
Returns an array of certificate fingerprints, calculated using the different algorithms supported by the browser.
  * `RTCPeerConnection.RTCPeerConnection()` argument `configuration.certificates`
  * `RTCPeerConnection.generateCertificate()`


# CanvasGradient
Note: This feature is available in Web Workers.
The `CanvasGradient` interface represents an opaque object describing a gradient. It is returned by the methods `CanvasRenderingContext2D.createLinearGradient()`, `CanvasRenderingContext2D.createConicGradient()` or `CanvasRenderingContext2D.createRadialGradient()`.
It can be used as a `fillStyle` or `strokeStyle`.
## Instance properties
As an opaque object, there is no exposed property.
## Instance methods
`CanvasGradient.addColorStop()`
    
Adds a new stop, defined by an `offset` and a `color`, to the gradient.
  * Creator methods in `CanvasRenderingContext2D`.
  * The `<canvas>` element and its associated interface, `HTMLCanvasElement`.


# SVGTransform
The `SVGTransform` interface reflects one of the component transformations within an `SVGTransformList`; thus, an `SVGTransform` object corresponds to a single component (e.g., `scale(…)` or `matrix(…)`) within a `transform` attribute.
An `SVGTransform` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
## Instance properties
`type`
    
The type of the value as specified by one of the `SVG_TRANSFORM_*` constants defined on this interface.
`angle`
    
The angle as a floating point value. A convenience attribute for `SVG_TRANSFORM_ROTATE`, `SVG_TRANSFORM_SKEWX` and `SVG_TRANSFORM_SKEWY`. For `SVG_TRANSFORM_MATRIX`, `SVG_TRANSFORM_TRANSLATE` and `SVG_TRANSFORM_SCALE`, `angle` will be zero.
`matrix`
    
The matrix as a `DOMMatrix` that represents this transformation. The matrix object is live, meaning that any changes made to the `SVGTransform` object are immediately reflected in the matrix object and vice versa. In case the matrix object is changed directly (i.e., without using the methods on the `SVGTransform` interface itself) then the type of the `SVGTransform` changes to `SVG_TRANSFORM_MATRIX`.
## Instance methods
`setMatrix()`
    
Sets the transform type to `SVG_TRANSFORM_MATRIX`, with parameter matrix defining the new transformation. Note that the values from the parameter `matrix` are copied.
`setTranslate()`
    
Sets the transform type to `SVG_TRANSFORM_TRANSLATE`, with parameters `tx` and `ty` defining the translation amounts.
`setScale()`
    
Sets the transform type to `SVG_TRANSFORM_SCALE`, with parameters `sx` and `sy` defining the scale amounts.
`setRotate()`
    
Sets the transform type to `SVG_TRANSFORM_ROTATE`, with parameter `angle` defining the rotation angle and parameters `cx` and `cy` defining the optional center of rotation.
`setSkewX()`
    
Sets the transform type to `SVG_TRANSFORM_SKEWX`, with parameter `angle` defining the amount of skew.
`setSkewY()`
    
Sets the transform type to `SVG_TRANSFORM_SKEWY`, with parameter `angle` defining the amount of skew.
## Static properties
`SVG_TRANSFORM_UNKNOWN` (0)
    
The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_TRANSFORM_MATRIX` (1)
    
A `matrix(…)` transformation.
`SVG_TRANSFORM_TRANSLATE` (2)
    
A `translate(…)` transformation.
`SVG_TRANSFORM_SCALE` (3)
    
A `scale(…)` transformation.
`SVG_TRANSFORM_ROTATE` (4)
    
A `rotate(…)` transformation.
`SVG_TRANSFORM_SKEWX` (5)
    
A `skewx(…)` transformation.
`SVG_TRANSFORM_SKEWY` (6)
    
A `skewy(…)` transformation.
# SVGAnimatedTransformList
The `SVGAnimatedTransformList` interface represents attributes which take a list of numbers and which can be animated.
## Instance properties
`baseVal` Read only
    
The base value of the given attribute before applying any animations.
`animVal` Read only
    
The current animated value of the given attribute as read only `SVGTransformList`. If the given attribute is not currently being animated, then the `SVGTransformList` will have the same contents as `baseVal`. The object referenced by `animVal` will always be distinct from the one referenced by `baseVal`, even when the attribute is not animated.
## Instance methods
The `SVGAnimatedTransformList` interface doesn't provide any specific methods.
# HTMLTableCaptionElement
The `HTMLTableCaptionElement` interface provides special properties (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating table `<caption>` elements.
EventTarget  Node  Element  HTMLElement  HTMLTableCaptionElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLTableCaptionElement.align` Deprecated
    
A string which represents an enumerated attribute indicating alignment of the caption with respect to the table.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<caption>`.


# Resize Observer API
The Resize Observer API provides a performant mechanism by which code can monitor an element for changes to its size, with notifications being delivered to the observer each time the size changes.
## Concepts and usage
There are a whole raft of use cases for responsive design techniques (and others besides) that respond to changes in an element's size, but previously their implementations have often been hacky and/or brittle.
For example, media queries / `window.matchMedia` are great for updating layouts at specific points when the viewport changes sizes, but what if you want to change layout in response to a specific element's size changing, which isn't the outer container?
To achieve this, a limited solution would be to listen to changes to a suitable event that hints at the element you are interested in changing size (e.g., the window resize event), then figure out what the new dimensions or other features of the element after a resize using `Element.getBoundingClientRect` or `Window.getComputedStyle`, for example.
Such a solution tends to only work for limited use cases, be bad for performance (continually calling the above methods would result in a big performance hit), and often won't work when the browser window size is not changed.
The Resize Observer API provides a solution to exactly these kinds of problems, and more besides, allowing you to easily observe and respond to changes in the size of an element's content or border box in a performant way. It provides a JavaScript solution to the often-discussed lack of element queries in the web platform.
Usage is simple, and pretty much the same as other observers, such as Performance Observer or Intersection Observer — you create a new `ResizeObserver` object using the `ResizeObserver()` constructor, then use `ResizeObserver.observe()` to make it look for changes to a specific element's size. A callback function set up inside the constructor then runs every time the size changes, providing access to the new dimensions and allowing you to do anything you like in response to those changes.
## Interfaces
`ResizeObserver`
    
Provides the ability to register new observers and to start and stop observing elements.
`ResizeObserverEntry`
    
Describes a single element which has been resized, identifying the element and its new size.
## Examples
You find a couple of simple examples on our GitHub repo:
  * resize-observer-border-radius.html (see source): A simple example with a green box, sized as a percentage of the viewport size. When the viewport size is changed, the box's rounded corners change in proportion to the size of the box. We could just implement this using `border-radius` with a percentage, but that quickly leads to ugly-looking elliptical corners, whereas the above solution gives you nice round corners that scale with the box size.
  * resize-observer-text.html (see source): Here we use the resize observer to change the `font-size` of a header and paragraph as a slider's value is changed causing the containing `<div>` to change width. This shows that you can respond to changes in an element's size, even if they have nothing to do with the viewport.


The code will usually follow this kind of pattern (taken from resize-observer-border-radius.html):
    
    const resizeObserver = new ResizeObserver((entries) => {
      const calcBorderRadius = (size1, size2) =>
        `${Math.min(100, size1 / 10 + size2 / 10)}px`;
    
      for (const entry of entries) {
        if (entry.borderBoxSize) {
          entry.target.style.borderRadius = calcBorderRadius(
            entry.borderBoxSize[0].inlineSize,
            entry.borderBoxSize[0].blockSize,
          );
        } else {
          entry.target.style.borderRadius = calcBorderRadius(
            entry.contentRect.width,
            entry.contentRect.height,
          );
        }
      }
    });
    
    resizeObserver.observe(document.querySelector("div"));
    
  * ResizeObserver: It's Like document.onresize for Elements


# GPURenderBundleEncoder
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPURenderBundleEncoder` interface of the WebGPU API is used to pre-record bundles of commands.
The command bundles are encoded by calling the methods of `GPURenderBundleEncoder`; once the desired commands have been encoded, they are recorded into a `GPURenderBundle` object instance using the `GPURenderBundleEncoder.finish()` method. These render bundles can then be reused across multiple render passes by passing the `GPURenderBundle` objects into `GPURenderPassEncoder.executeBundles()` calls.
In effect, this is like a partial render pass — `GPURenderBundleEncoder`s have all the same functionality available as `GPURenderPassEncoder`s, except that they can't begin and end occlusion queries, and can't set the scissor rect, viewport, blend constant, and stencil reference. The `GPURenderBundle` will inherit all these values from the `GPURenderPassEncoder` that executes it.
Note: Currently set vertex buffers, index buffers, bind groups, and pipeline are all cleared prior to executing a render bundle, and once the render bundle has finished executing.
Reusing pre-recoded commands can significantly improve app performance in situations where JavaScript draw call overhead is a bottleneck. Render bundles are most effective in situations where a batch of objects will be drawn the same way across multiple views or frames, with the only differences being the buffer content being used (such as updated matrix uniforms). A good example is VR rendering. Recording the rendering as a render bundle and then tweaking the view matrix and replaying it for each eye is a more efficient way to issue draw calls for both renderings of the scene.
A `GPURenderBundleEncoder` object instance is created via the `GPUDevice.createRenderBundleEncoder()` property.
Note: The methods of `GPURenderBundleEncoder` are functionally identical to their equivalents available on `GPURenderPassEncoder`, except for `GPURenderBundleEncoder.finish()`, which is similar in purpose to `GPUCommandEncoder.finish()`.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Instance methods
`draw()`
    
Draw primitives based on the vertex buffers provided by `setVertexBuffer()`.
`drawIndexed()`
    
Draw indexed primitives based on the vertex and index buffers provided by `setVertexBuffer()` and `setIndexBuffer()`
`drawIndirect()`
    
Draw primitives using parameters read from a `GPUBuffer`.
`drawIndexedIndirect()`
    
Draw indexed primitives using parameters read from a `GPUBuffer`.
`finish()`
    
Completes recording of the current render pass command sequence.
`insertDebugMarker()`
    
Marks a specific point in a series of encoded commands with a label.
`popDebugGroup()`
    
Ends a debug group, which is begun with a `pushDebugGroup()` call.
`pushDebugGroup()`
    
Begins a debug group, which is marked with a specified label, and will contain all subsequent encoded commands up until a `popDebugGroup()` method is invoked.
`setBindGroup()`
    
Sets the `GPUBindGroup` to use for subsequent render bundle commands, for a given index.
`setIndexBuffer()`
    
Sets the current `GPUBuffer` that will provide index data for subsequent drawing commands.
`setPipeline()`
    
Sets the `GPURenderPipeline` to use for this render bundle.
`setVertexBuffer()`
    
Sets or unsets the current `GPUBuffer` that will provide vertex data for subsequent drawing commands.
## Examples
In the WebGPU Samples Animometer example, a lot of like operations are done on many different objects simultaneously. A bundle of commands is encoded using the following function:
    
    function recordRenderPass(
      passEncoder: GPURenderBundleEncoder | GPURenderPassEncoder
    ) {
      if (settings.dynamicOffsets) {
        passEncoder.setPipeline(dynamicPipeline);
      } else {
        passEncoder.setPipeline(pipeline);
      }
      passEncoder.setVertexBuffer(0, vertexBuffer);
      passEncoder.setBindGroup(0, timeBindGroup);
      const dynamicOffsets = [0];
      for (let i = 0; i < numTriangles; ++i) {
        if (settings.dynamicOffsets) {
          dynamicOffsets[0] = i * alignedUniformBytes;
          passEncoder.setBindGroup(1, dynamicBindGroup, dynamicOffsets);
        } else {
          passEncoder.setBindGroup(1, bindGroups[i]);
        }
        passEncoder.draw(3, 1, 0, 0);
      }
    }
    
Later on, a `GPURenderBundleEncoder` is created, the function is invoked, and the command bundle is recorded into a `GPURenderBundle` using `GPURenderBundleEncoder.finish()`:
    
    const renderBundleEncoder = device.createRenderBundleEncoder({
      colorFormats: [presentationFormat],
    });
    recordRenderPass(renderBundleEncoder);
    const renderBundle = renderBundleEncoder.finish();
    
`GPURenderPassEncoder.executeBundles()` is then used to reuse the work across multiple render passes to improve performance. Study the example code listing for the full context.
    
    // …
    
    return function doDraw(timestamp) {
      if (startTime === undefined) {
        startTime = timestamp;
      }
      uniformTime[0] = (timestamp - startTime) / 1000;
      device.queue.writeBuffer(uniformBuffer, timeOffset, uniformTime.buffer);
    
      renderPassDescriptor.colorAttachments[0].view = context
        .getCurrentTexture()
        .createView();
    
      const commandEncoder = device.createCommandEncoder();
      const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    
      if (settings.renderBundles) {
        passEncoder.executeBundles([renderBundle]);
      } else {
        recordRenderPass(passEncoder);
      }
    
      passEncoder.end();
      device.queue.submit([commandEncoder.finish()]);
    };
    
    // …
    
  * The WebGPU API


# AnalyserNode
The `AnalyserNode` interface represents a node able to provide real-time frequency and time-domain analysis information. It is an `AudioNode` that passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations.
An `AnalyserNode` has exactly one input and one output. The node works even if the output is not connected.
EventTarget  AudioNode  AnalyserNode 
Number of inputs `1`  
Number of outputs `1` (but may be left unconnected)  
Channel count mode `"max"`  
Channel count `2`  
Channel interpretation `"speakers"`  
## Constructor
`AnalyserNode()`
    
Creates a new instance of an `AnalyserNode` object.
## Instance properties
Inherits properties from its parent, `AudioNode`.
`AnalyserNode.fftSize`
    
An unsigned long value representing the size of the FFT (Fast Fourier Transform) to be used to determine the frequency domain.
`AnalyserNode.frequencyBinCount` Read only
    
An unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.
`AnalyserNode.minDecibels`
    
A double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using `getByteFrequencyData()`.
`AnalyserNode.maxDecibels`
    
A double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using `getByteFrequencyData()`.
`AnalyserNode.smoothingTimeConstant`
    
A double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.
## Instance methods
Inherits methods from its parent, `AudioNode`.
`AnalyserNode.getFloatFrequencyData()`
    
Copies the current frequency data into a `Float32Array` array passed into it.
`AnalyserNode.getByteFrequencyData()`
    
Copies the current frequency data into a `Uint8Array` (unsigned byte array) passed into it.
`AnalyserNode.getFloatTimeDomainData()`
    
Copies the current waveform, or time-domain, data into a `Float32Array` array passed into it.
`AnalyserNode.getByteTimeDomainData()`
    
Copies the current waveform, or time-domain, data into a `Uint8Array` (unsigned byte array) passed into it.
## Examples
Note: See the guide Visualizations with Web Audio API for more information on creating audio visualizations.
### Basic usage
The following example shows basic usage of an `AudioContext` to create an `AnalyserNode`, then `requestAnimationFrame` and `<canvas>` to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 108-193 for relevant code).
    
    const audioCtx = new AudioContext();
    
    // …
    
    const analyser = audioCtx.createAnalyser();
    analyser.fftSize = 2048;
    
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    analyser.getByteTimeDomainData(dataArray);
    
    // Connect the source to be analyzed
    source.connect(analyser);
    
    // Get a canvas defined with ID "oscilloscope"
    const canvas = document.getElementById("oscilloscope");
    const canvasCtx = canvas.getContext("2d");
    
    // draw an oscilloscope of the current audio source
    
    function draw() {
      requestAnimationFrame(draw);
    
      analyser.getByteTimeDomainData(dataArray);
    
      canvasCtx.fillStyle = "rgb(200 200 200)";
      canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
    
      canvasCtx.lineWidth = 2;
      canvasCtx.strokeStyle = "rgb(0 0 0)";
    
      canvasCtx.beginPath();
    
      const sliceWidth = (canvas.width * 1.0) / bufferLength;
      let x = 0;
    
      for (let i = 0; i < bufferLength; i++) {
        const v = dataArray[i] / 128.0;
        const y = (v * canvas.height) / 2;
    
        if (i === 0) {
          canvasCtx.moveTo(x, y);
        } else {
          canvasCtx.lineTo(x, y);
        }
    
        x += sliceWidth;
      }
    
      canvasCtx.lineTo(canvas.width, canvas.height / 2);
      canvasCtx.stroke();
    }
    
    draw();
    
  * Using the Web Audio API


# NetworkInformation
Note: This feature is available in Web Workers.
The `NetworkInformation` interface of the Network Information API provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes. The `NetworkInformation` interface cannot be instantiated. It is instead accessed through the `connection` property of the `Navigator` interface or the `WorkerNavigator` interface.
EventTarget  NetworkInformation 
## Instance properties
This interface also inherits properties of its parent, `EventTarget`.
`NetworkInformation.downlink` Read only
    
Returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds.
`NetworkInformation.downlinkMax` Read only Experimental
    
Returns the maximum downlink speed, in megabits per second (Mbps), for the underlying connection technology.
`NetworkInformation.effectiveType` Read only
    
Returns the effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'. This value is determined using a combination of recently observed round-trip time and downlink values.
`NetworkInformation.rtt` Read only
    
Returns the estimated effective round-trip time of the current connection, rounded to the nearest multiple of 25 milliseconds.
`NetworkInformation.saveData` Read only
    
Returns `true` if the user has set a reduced data usage option on the user agent.
`NetworkInformation.type` Read only Experimental
    
Returns the type of connection a device is using to communicate with the network. It will be one of the following values:
  * `bluetooth`
  * `cellular`
  * `ethernet`
  * `none`
  * `wifi`
  * `wimax`
  * `other`
  * `unknown`


## Instance methods
This interface also inherits methods of its parent, `EventTarget`.
## Events
`change`
    
The event that's fired when connection information changes.
  * Online and offline events


# ClipboardItem
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `ClipboardItem` interface of the Clipboard API represents a single item format, used when reading or writing clipboard data using `Clipboard.read()` and `Clipboard.write()` respectively.
The `ClipboardItem` interface enables developers to use a single type to represent a range of different data formats.
Note: The `read()` and `write()` methods can be used to work with text strings and arbitrary data items represented by `Blob` instances. However, if you are solely working with text, it is more convenient to use the `Clipboard.readText()` and `Clipboard.writeText()` methods.
## Constructor
`ClipboardItem()`
    
Creates a new `ClipboardItem` object, with the MIME type as the key and the data as the value.
## Instance properties
`types` Read only
    
Returns an `Array` of MIME types available within the `ClipboardItem`.
`presentationStyle` Read only
    
Returns one of the following: `"unspecified"`, `"inline"` or `"attachment"`.
## Static methods
`ClipboardItem.supports()`
    
Checks whether a given MIME type is supported by the clipboard. This enables a website to detect whether a MIME type is supported before attempting to write data.
## Instance methods
`getType()`
    
Returns a `Promise` that resolves with a `Blob` of the requested MIME type, or an error if the MIME type is not found.
## Examples
>
### Writing text to the clipboard
In this example we first define two constants containing references to a `<p>` element containing some text and a `<button>` element.
Next, we define a function called `copyToClipboard()`. This starts off by storing a `"text/plain"` MIME type in a constant, then creating an object called `clipboardItemData` that contains one property with a key equal to the MIME type and a value of the text we want to copy to the clipboard (the content of the `<p>` element, in this case). Because we are working with text, we can pass it in directly rather than having to create a `Blob`.
We construct a new `ClipboardItem` object using the `ClipboardItem()` constructor, and pass it into the `Clipboard.write()` method to copy the text to the clipboard.
Finally, we add an event listener to the `<button>` so that it runs the function when pressed.
    
    const textSource = document.querySelector("p");
    const copyBtn = document.querySelector("button");
    
    async function copyToClipboard() {
      const type = "text/plain";
      const clipboardItemData = {
        [type]: textSource.textContent,
      };
      const clipboardItem = new ClipboardItem(clipboardItemData);
      await navigator.clipboard.write([clipboardItem]);
    }
    
    copyBtn.addEventListener("click", copyToClipboard);
    
### Writing an image to the clipboard
Here we use `supports()` to check whether the `image/svg+xml` MIME data type is supported. If it is, we fetch an SVG image with the Fetch API, and then read it into a `Blob`, which we can use to create a `ClipboardItem` that is written to the clipboard.
    
    async function writeClipImg() {
      try {
        if (ClipboardItem.supports("image/svg+xml")) {
          const imgURL = "/my-image.svg";
          const data = await fetch(imgURL);
          const blob = await data.blob();
          await navigator.clipboard.write([
            new ClipboardItem({
              [blob.type]: blob,
            }),
          ]);
          console.log("Fetched image copied.");
        } else {
          console.log("SVG images are not supported by the clipboard.");
        }
      } catch (err) {
        console.error(err.name, err.message);
      }
    }
    
### Reading from the clipboard
Here we're returning all items on the clipboard via the `clipboard.read()` method. Then utilizing the `ClipboardItem.types` property to set the `getType()` argument and return the corresponding blob object.
    
    async function getClipboardContents() {
      try {
        const clipboardItems = await navigator.clipboard.read();
    
        for (const clipboardItem of clipboardItems) {
          for (const type of clipboardItem.types) {
            const blob = await clipboardItem.getType(type);
            // we can now use blob here
          }
        }
      } catch (err) {
        console.error(err.name, err.message);
      }
    }
    
  * Clipboard API
  * Image support for Async Clipboard article


# SVGPreserveAspectRatio
The `SVGPreserveAspectRatio` interface corresponds to the `preserveAspectRatio` attribute.
An `SVGPreserveAspectRatio` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
## Instance properties
`align`
    
The type of the alignment value as specified by one of the `SVG_PRESERVEASPECTRATIO_*` constants defined on this interface.
`meetOrSlice`
    
The type of the meet-or-slice value as specified by one of the `SVG_MEETORSLICE_*` constants defined on this interface.
## Instance methods
The `SVGPreserveAspectRatio` interface do not provide any specific methods.
## Static properties
`SVG_PRESERVEASPECTRATIO_UNKNOWN` (0)
    
The enumeration was set to a value that is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_PRESERVEASPECTRATIO_NONE` (1)
    
Corresponds to value `none` for attribute `preserveAspectRatio`.
`SVG_PRESERVEASPECTRATIO_XMINYMIN` (2)
    
Corresponds to value `xMinYMin` for attribute `preserveAspectRatio`.
`SVG_PRESERVEASPECTRATIO_XMIDYMIN` (3)
    
Corresponds to value `xMidYMin` for attribute `preserveAspectRatio`.
`SVG_PRESERVEASPECTRATIO_XMAXYMIN` (4)
    
Corresponds to value `xMaxYMin` for attribute `preserveAspectRatio`.
`SVG_PRESERVEASPECTRATIO_XMINYMID` (5)
    
Corresponds to value `xMinYMid` for attribute `preserveAspectRatio`.
`SVG_PRESERVEASPECTRATIO_XMIDYMID` (6)
    
Corresponds to value `xMidYMid` for attribute `preserveAspectRatio`.
`SVG_PRESERVEASPECTRATIO_XMAXYMID` (7)
    
Corresponds to value `xMaxYMid` for attribute `preserveAspectRatio`.
`SVG_PRESERVEASPECTRATIO_XMINYMAX` (8)
    
Corresponds to value `xMinYMax` for attribute `preserveAspectRatio`.
`SVG_PRESERVEASPECTRATIO_XMIDYMAX` (9)
    
Corresponds to value `xMidYMax` for attribute `preserveAspectRatio`.
`SVG_PRESERVEASPECTRATIO_XMAXYMAX` (10)
    
Corresponds to value `xMaxYMax` for attribute `preserveAspectRatio`.
`SVG_MEETORSLICE_UNKNOWN` (0)
    
The enumeration was set to a value that is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_MEETORSLICE_MEET` (1)
    
Corresponds to value `meet` for attribute `preserveAspectRatio`.
`SVG_MEETORSLICE_SLICE` (2)
    
Corresponds to value `slice` for attribute `preserveAspectRatio`.
# Compute Pressure API
Note: This feature is available in Web Workers, except for Service Workers.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Compute Pressure API is a JavaScript API that enables you to observe the pressure of system resources such as the CPU.
## Use cases
In real-time applications, such as video conferencing web apps, the Compute Pressure API lets you detect which pressure the system is currently facing. The system will handle any stress as well as it can, but a collaboration between system and app is useful to handle the pressure best. This API notifies you of high-level pressure state changes, so you can adjust your workloads and still offer a pleasant user experience. The signal is proactively delivered when the system pressure trend is either rising or easing to allow timely adaptation.
You can use these pressure change signals, for example, to reduce or increase the video quality or the number of video feeds shown simultaneously to avoid dropping video frames, audio cuts, or delaying other critical parts of the application. The quality of service of your web app can vary, also due to pressure from external factors and apps at unexpected times, but ideally that does not lead to a total system failure, input delay, or unresponsiveness. Instead, the set of enabled features and their quality level is balanced against the resource pressure of the end-user device. It is similar to network pressure in which case a streaming app adapts to the available bandwidth.
More use cases are:
  * Web games, for which you could balance the quality and amount of 3D assets, change the framerate, resolution, depth of field etc., to ensure low latency and stable frame rate.
  * User interfaces, for which you could render placeholders instead of real data while the system is under pressure, and render the real content once the pressure has eased.


## Concepts and usage
Fast and delightful web applications should balance workloads when the system's computing resources are used at (near) full capacity. The Compute Pressure API's goal is to prevent, rather than mitigate, bad user experience in the web app itself and also for the user's device to not become too hot, too loud, or to drain the battery at an unacceptable rate. Therefore, it is advised to prefer this API over feedback mechanisms or singular performance adjustments (for example, by lowering the frequency of `window.requestAnimationFrame`) where bad user experience might be mitigated, but not proactively avoided. For measuring and segmenting the performance of user sessions after the fact, the `PerformanceLongTaskTiming` API is better suited to analyze tasks that occupy the UI thread for 50 milliseconds or more (see also Performance API for additional performance measurement APIs).
### Pressure source types
In your web app or website, different tasks are fighting for the processing time of different processing units (CPU, GPU, and other specialized processing units). The current version of the Compute Pressure API specification defines two main source types that can be queried to gather pressure information:
  * `"thermals"` represents the global thermal state of the entire system.
  * `"cpu"` represents the average pressure of the central processing unit (CPU) across all its cores. This state can be affected by other apps and sites than the observing site.


The list of supported sources varies per browser, operating system, and hardware, and is evolving. Use the static `PressureObserver.knownSources` hint to see which source types are available to your browser. Note that availability can also vary by your operating system and your hardware. Call `observe()` and check for a `NotSupportedError` to see if pressure observation is possible.
The Compute Pressure API is available in the following contexts:
  * `Window` (main thread)
  * `Worker`
  * `SharedWorker`
  * `<iframe>` (if a suitable Permissions-Policy is provided)


### Pressure states
The Compute Pressure API exposes high-level pressure states which abstract away complexities of system bottlenecks that cannot be adequately explained with low-level metrics such as processor clock speed and utilization. In fact, metrics for CPU utilization are often misleading. Therefore, the Compute Pressure API uses human-readable pressure states with the following semantics (see also the specification):
  * ⚪ `"nominal"`: The conditions of the target device are at an acceptable level with no noticeable adverse effects on the user.
  * 🟢 `"fair"`: Target device pressure, temperature and/or energy usage are slightly elevated, potentially resulting in reduced battery-life, as well as fans (or systems with fans) becoming active and audible. Apart from that the target device is running flawlessly and can take on additional work.
  * 🟡 `"serious"`: Target device pressure, temperature and/or energy usage is consistently highly elevated. The system may be throttling as a countermeasure to reduce thermals.
  * 🔴 `"critical"`: The temperature of the target device or system is significantly elevated and it requires cooling down to avoid any potential issues.


The contributing factors (that is, the underlying system metrics) for the pressure states above are not defined by the specification and can vary depending on the underlying hardware and platform behavior. However, the specification requires that the change in contributing factors must be substantial to avoid flip-flopping between states. This means you can expect the API to not report different states overly often as they aren't responding to just one fluctuating system metric.
### Security and privacy considerations
The Compute Pressure API is policy-controlled by the `"compute-pressure"` directive. Its default allowlist is `'self'` which allows usage in same-origin nested frames but prevents third-party content from using the feature.
## Reference
>
### Interfaces
The following interfaces are present in the Compute Pressure API and the API surface is similar to other observers, such as `IntersectionObserver`, `MutationObserver`, or `PerformanceObserver`.
`PressureObserver` Experimental
    
Notifies when the system's pressure changes for a specified number of sources (e.g., the CPU) at a predefined sample interval.
`PressureRecord`
    
Describes the pressure trend at a specific moment of transition.
### Permissions-Policy directive
`Permissions-Policy`; the `compute-pressure` directive
    
Controls access to the Compute Pressure API.
## Examples
>
### Log current pressure
This example creates a `PressureObserver` and takes action whenever there is a pressure change. The sample interval is set to 1000ms, meaning that there will be updates at most every second.
    
    function callback(records) {
      const lastRecord = records[records.length - 1];
      console.log(`Current pressure ${lastRecord.state}`);
      if (lastRecord.state === "critical") {
        // disable video feeds
      } else if (lastRecord.state === "serious") {
        // disable video filter effects
      } else {
        // enable all video feeds and filter effects
      }
    }
    
    try {
      const observer = new PressureObserver(callback);
      await observer.observe("cpu", {
        sampleInterval: 1000, // 1000ms
      });
    } catch (error) {
      // report error setting up the observer
    }
    
  * Compute Pressure demo, which uses Mandelbrot sets and workers to create artificial pressure for test purposes.


# TimeEvent
The `TimeEvent` interface, a part of SVG SMIL animation, provides specific contextual information associated with Time events.
Event  TimeEvent 
## Instance properties
`TimeEvent.detail` Read only
    
A `long` that specifies some detail information about the Event, depending on the type of the event. For this event type, indicates the repeat number for the animation.
`TimeEvent.view` Read only
    
A WindowProxy that identifies the Window from which the event was generated.
## Instance methods
`TimeEvent.initTimeEvent()`
    
Used to initialize the value of a TimeEvent created through the DocumentEvent interface. This method may only be called before the TimeEvent has been dispatched via the dispatchEvent method, though it may be called multiple times during that phase if necessary.
# WebTransportSendStream
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `WebTransportSendStream` interface of the WebTransport API is a specialized `WritableStream` that is used to send outbound data in both unidirectional or bidirectional `WebTransport` streams.
The send stream is a writable stream of `Uint8Array`, that can be written to in order to send data to a server. It additionally provides streaming features such as setting the send order, and getting stream statistics.
Objects of this type are not constructed directly. When creating a unidirectional stream the `WebTransport.createUnidirectionalStream()` returns an object of this type for sending data. When creating a bidirectional stream using `WebTransport.createBidirectionalStream()`, the method returns a `WebTransportBidirectionalStream`, and the send stream object can be obtained from its `writable` property. When a bidirectional stream is initiated by the remote end, an object of this type can similarly be obtained using `WebTransport.incomingBidirectionalStreams`.
`WebTransportSendStream` is a transferable object.
WritableStream  WebTransportSendStream 
## Instance properties
Also inherits properties from its parent interface, `WritableStream`.
`WebTransportSendStream.getStats()` Experimental
    
Returns a `Promise` that resolves with statistics related to this stream.
## Instance methods
Also inherits methods from its parent interface, `WritableStream`.
`WebTransportSendStream.sendOrder` Experimental
    
Indicates the send priority of this stream relative to other streams for which the value has been set.
## Examples
See `WebTransport.incomingUnidirectionalStreams` for an example of how to get a `ReadableStream` of `WebTransportSendStream` objects.
  * Using WebTransport
  * Streams API
  * WebTransport over HTTP/3


# Screen Wake Lock API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Screen Wake Lock API provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.
## Concepts and usage
Most devices by default turn off their screen after a specified amount of time to prolong the life of the hardware. Modern devices do this to save on battery power. Whilst this is a useful feature, some applications need the screen to stay awake to be their most useful.
The Screen Wake Lock API prevents the screen from turning off, dimming or locking. It allows for a simple platform-based solution for visible (active) documents to acquire the platform screen wake lock.
There are plenty of use cases for keeping a screen on, including reading an ebook, map navigation, following a recipe, presenting to an audience, scanning a QR/barcode or applications that use voice or gesture control, rather than tactile input (the default way to keep a screen awake).
You acquire a `WakeLockSentinel` object by calling the `navigator.wakeLock.request()` `Promise`-based method that resolves if the platform allows it. A request may be rejected for a number of reasons, including system settings (such as power save mode or low battery level) or if the document is not active or visible. It is good practice to store a reference to the sentinel object to allow the application to later control release.
The sentinel is attached to the underlying system wake lock. It can be released by the system, again if the battery power is too low or the document is not active or visible. It can also be released manually via the `WakeLockSentinel.release()` method. After being released a `WakeLockSentinel` can no longer be used. If a screen wake lock is required again/still, the application will need to request a new one.
The Screen Wake Lock API should be used to keep the screen on to benefit usability. It's a good idea to show some feedback on the interface to show if wake lock is active and a way for the user to disable it if they wish.
## Interfaces
`WakeLock`
    
Prevents device screens from dimming or locking when an application needs to keep running.
`WakeLockSentinel`
    
Provides a handle to the underlying platform wake lock and if referenced can be manually released and reacquired. Get an instance of the object by calling `WakeLock.request`.
### Extensions to other interfaces
`Navigator.wakeLock` Read only
    
Returns a `WakeLock` object instance, from which all other functionality can be accessed.
`Permissions-Policy: screen-wake-lock`
    
Access to the API is gated by the `Permissions-Policy` directive `screen-wake-lock`. See Security considerations below.
## Examples
>
### Feature detection
This code checks for wake lock support and updates the UI accordingly.
    
    if ("wakeLock" in navigator) {
      isSupported = true;
      statusElem.textContent = "Screen Wake Lock API supported!";
    } else {
      wakeButton.disabled = true;
      statusElem.textContent = "Wake lock is not supported by this browser.";
    }
    
### Requesting a wake lock
The following example demonstrates how to request a `WakeLockSentinel` object. The `WakeLock.request` method is `Promise`-based and so we can create an asynchronous function, which in turn updates the UI to reflect the wake lock is active.
    
    // Create a reference for the Wake Lock.
    let wakeLock = null;
    
    // create an async function to request a wake lock
    try {
      wakeLock = await navigator.wakeLock.request("screen");
      statusElem.textContent = "Wake Lock is active!";
    } catch (err) {
      // The Wake Lock request has failed - usually system related, such as battery.
      statusElem.textContent = `${err.name}, ${err.message}`;
    }
    
### Releasing wake lock
The following example shows how to release the previously acquired wake lock.
    
    wakeLock.release().then(() => {
      wakeLock = null;
    });
    
### Listening for wake lock release
This example updates the UI if the wake lock has been released for any reason (such as navigating away from the active window/tab).
    
    wakeLock.addEventListener("release", () => {
      // the wake lock has been released
      statusElem.textContent = "Wake Lock has been released";
    });
    
### Reacquiring a wake lock
The following code reacquires the wake lock should the visibility of the document change and the wake lock is released.
    
    document.addEventListener("visibilitychange", async () => {
      if (wakeLock !== null && document.visibilityState === "visible") {
        wakeLock = await navigator.wakeLock.request("screen");
      }
    });
    
### Putting it all together
You can find the complete code on GitHub here. The demo uses a button to acquire a wake lock and also release it, which in turn updates the UI. The UI also updates if the wake lock is released automatically for any reason. There's a checkbox which when checked, will automatically reacquire the wake lock if the document's visibility state changes and becomes visible again.
## Performance considerations
  * Release the screen wake lock when user ends activity that required always-on screen. For example, a ticketing app which uses QR codes to transmit ticket information, might acquire screen wake lock when the QR code is displayed (so that code is successfully scanned) but release afterwards. A presentation app might hold the lock only while a presentation is active, but not when presentation is being edited.
  * If your app is performing long-running downloads, consider using background fetch.
  * If your app is synchronizing data from a remote server, consider using background sync.
  * Only active documents can acquire screen wake locks and previously acquired locks are automatically released when document becomes inactive. Therefore make sure to re-acquire screen wake lock if necessary when document becomes active (listen for visibilitychange event).


## Security considerations
Access to the Screen Wake Lock API is controlled by the Permissions Policy directive `screen-wake-lock`.
When using the Permissions Policy, the default allowlist for `screen-wake-lock` is `self`. This allows lock wake usage in same-origin nested frames but prevents third-party content from using locks. Third party usage can be enabled by the server first setting the `Permissions-Policy` header to grant permission a particular third party origin.
    
    Permissions-Policy: screen-wake-lock=(self b.example.com)
    
Then the `allow="screen-wake-lock"` attribute must be added the frame container element for sources from that origin:
    
    <iframe src="https://b.example.com" allow="screen-wake-lock"></iframe>
    
Browsers may also block the screen lock in a particular document for an implementation specific reason, such as a user or platform setting. They are expected to provide some unobtrusive mechanism to inform the user when wake lock is active, and to provide users the ability to remove the application's screen lock.
The Permissions API `screen-wake-lock` permission can be used to test whether access to use the screen lock is `granted`, `denied` or `prompt` (requires user acknowledgement of a prompt).
>
### api.WakeLock
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Screen_Wake_Lock_API` 84 84 126 70 16.4 84 126 60 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545. 14.0 84 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545.  
`request` 84 84 126 70 16.4 84 126 60 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545. 14.0 84 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545.  
### api.WakeLockSentinel
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Screen_Wake_Lock_API` 84 84 126 70 16.4 84 126 60 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545. 14.0 84 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545.  
`release` 84 84 126 70 16.4 84 126 60 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545. 14.0 84 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545.  
`release_event` 84 84 126 70 16.4 84 126 60 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545. 14.0 84 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545.  
`released` 87 87 126 73 16.4 87 126 62 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545. 14.0 87 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545.  
`type` 84 84 126 70 16.4 84 126 60 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545. 14.0 84 18.416.4–18.4Does not work in standalone Home Screen Web Apps. See bug 254545.  
  * Stay awake with the Screen Wake Lock API on developer.chrome.com


# Launch Handler API
The Launch Handler API allows developers to control how a progressive web app (PWA) is launched — for example if it uses an existing window or creates a new one, and how the app's target launch URL is handled.
## Concepts and usage
You can specify launch behavior for your app by adding the `launch_handler` field to your web app manifest file. This has one sub-field, `client_mode`, which contains a string value specifying how the app should be launched and navigated to. For example:
    
    {
      "launch_handler": {
        "client_mode": "focus-existing"
      }
    }
    
If not specified, the default `client_mode` value is `auto`. Available values are:
`focus-existing`
    
The most recently interacted with browsing context in a web app window is chosen to handle the launch. This will populate the target launch URL in the `targetURL` property of the `LaunchParams` object passed into the `window.launchQueue.setConsumer()`'s callback function. As you'll see below, this allows you to set custom launch handing functionality for your app.
`navigate-existing`
    
The most recently interacted with browsing context in a web app window is navigated to the target launch URL. The target URL is still made available via `window.launchQueue.setConsumer()` to allow additional custom launch navigation handling to be implemented.
`navigate-new`
    
A new browsing context is created in a web app window to load the target launch URL. The target URL is still made available via `window.launchQueue.setConsumer()` to allow additional custom launch navigation handling to be implemented.
`auto`
    
The user agent decides what works best for the platform. For example, `navigate-existing` might make more sense on mobile, where single app instances are commonplace, whereas `navigate-new` might make more sense in a desktop context. This is the default value used if provided values are invalid.
When `focus-existing` is used, you can include code inside the `window.launchQueue.setConsumer()`'s callback function to provide custom handling of the `targetURL`
    
    window.launchQueue.setConsumer((launchParams) => {
      // Do something with launchParams.targetURL
    });
    
Note: `LaunchParams` also has a `LaunchParams.files` property, which returns a read-only array of `FileSystemHandle` objects representing any files passed along with the launch navigation via the `POST` method. This allows custom file handling to be implemented.
## Interfaces
`LaunchParams`
    
Used when implementing custom launch navigation handling in a PWA. When `window.launchQueue.setConsumer()` is invoked to set up the launch navigation handling functionality, the callback function inside `setConsumer()` is passed a `LaunchParams` object instance.
`LaunchQueue`
    
When a progressive web app (PWA) is launched with a `launch_handler` `client_mode` value of `focus-existing`, `navigate-new`, or `navigate-existing`, `LaunchQueue` provides access to functionality that allows custom launch navigation handling to be implemented in the PWA. This functionality is controlled by the properties of the `LaunchParams` object passed into the `setConsumer()` callback function.
## Extensions to other interfaces
`window.launchQueue`
    
Provides access to the `LaunchQueue` class, which allows custom launch navigation handling to be implemented in a progressive web app (PWA), with the handling context signified by the `launch_handler` manifest field `client_mode` value.
## Examples
    
    if ("launchQueue" in window) {
      window.launchQueue.setConsumer((launchParams) => {
        if (launchParams.targetURL) {
          const params = new URL(launchParams.targetURL).searchParams;
    
          // Assuming a music player app that gets a track passed to it to be played
          const track = params.get("track");
          if (track) {
            audio.src = track;
            title.textContent = new URL(track).pathname.slice(1);
            audio.play();
          }
        }
      });
    }
    
This code is included in the PWA, and executed when the app loads, upon launch. The `window.launchQueue.setConsumer()`'s callback function extracts the search param out of the `LaunchParams.targetURL` and, if it finds a `track` param, uses it to populate an `<audio>` element's `src` and play the audio track that this points to.
See the Musicr 2.0 demo app for full working code.
  * Launch Handler API: Control how your app is launched


# CSSFontFeatureValuesRule
The `CSSFontFeatureValuesRule` interface represents an `@font-feature-values` at-rule, letting developers assign for each font face a common name to specify features indices to be used in `font-variant-alternates`.
CSSRule  CSSFontFeatureValuesRule 
## Instance properties
Inherits properties from its ancestor `CSSRule`.
`CSSFontFeatureValuesRule.fontFamily`
    
A string that identifies the font family this rule applies to.
## Instance methods
Inherits methods from its ancestor `CSSRule`.
## Examples
>
### Read font family
In this example, we declare two `@font-feature-values` one for the Font One font family, and the other for Font Two. We then use the CSSOM to read these font families, displaying them into the log.
#### HTML
    
    <pre id="log"></pre>
    
#### CSS
    
    /* At-rule for "nice-style" in Font One */
    @font-feature-values Font One {
      @styleset {
        nice-style: 12;
      }
    }
    
    /* At-rule for "nice-style" in Font Two */
    @font-feature-values Font Two {
      @styleset {
        nice-style: 4;
      }
    }
    
    /* Apply the at-rules with a single declaration */
    .nice-look {
      font-variant-alternates: styleset(nice-style);
    }
    
#### JavaScript
    
    const log = document.getElementById("log");
    const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
    
    const fontOne = rules[0]; // A CSSFontFeatureValuesRule
    log.textContent = `The 1st '@font-feature-values' family: "${fontOne.fontFamily}".\n`;
    
    const fontTwo = rules[1]; // Another CSSFontFeatureValuesRule
    log.textContent += `The 2nd '@font-feature-values' family: "${fontTwo.fontFamily}".`;
    
  * `@font-feature-values`


# WorkerGlobalScope
Note: This feature is only available in Web Workers.
The `WorkerGlobalScope` interface of the Web Workers API is an interface representing the scope of any worker. Workers have no browsing context; this scope contains the information usually conveyed by `Window` objects — in this case event handlers, the console or the associated `WorkerNavigator` object. Each `WorkerGlobalScope` has its own event loop.
This interface is usually specialized by each worker type: `DedicatedWorkerGlobalScope` for dedicated workers, `SharedWorkerGlobalScope` for shared workers, and `ServiceWorkerGlobalScope` for ServiceWorker. The `self` property returns the specialized scope for each context.
EventTarget  WorkerGlobalScope 
## Instance properties
This interface inherits properties from the `EventTarget` interface.
`WorkerGlobalScope.caches` Read only Secure context
    
Returns the `CacheStorage` object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
`WorkerGlobalScope.crossOriginIsolated` Read only
    
Returns a boolean value that indicates whether the website is in a cross-origin isolation state.
`WorkerGlobalScope.crypto` Read only
    
Returns the `Crypto` object associated to the global object.
`WorkerGlobalScope.fonts` Read only
    
Returns the `FontFaceSet` associated with the worker.
`WorkerGlobalScope.indexedDB` Read only
    
Provides a mechanism for workers to asynchronously access capabilities of indexed databases; returns an `IDBFactory` object.
`WorkerGlobalScope.isSecureContext` Read only
    
Returns a boolean indicating whether the current context is secure (`true`) or not (`false`).
`WorkerGlobalScope.location` Read only
    
Returns the `WorkerLocation` associated with the worker. It is a specific location object, mostly a subset of the `Location` for browsing scopes, but adapted to workers.
`WorkerGlobalScope.navigator` Read only
    
Returns the `WorkerNavigator` associated with the worker. It is a specific navigator object, mostly a subset of the `Navigator` for browsing scopes, but adapted to workers.
`WorkerGlobalScope.origin` Read only
    
Returns the global object's origin, serialized as a string.
`WorkerGlobalScope.performance` Read only
    
Returns the `Performance` associated with the worker. Only a subset of the properties and methods of the `Performance` interface are available to workers.
`WorkerGlobalScope.scheduler` Read only
    
Returns the `Scheduler` object associated with the current context. This is the entry point for using the Prioritized Task Scheduling API.
`WorkerGlobalScope.trustedTypes` Read only
    
Returns the `TrustedTypePolicyFactory` object associated with the global object, providing the entry point for using the Trusted Types API.
`WorkerGlobalScope.self` Read only
    
Returns a reference to the `WorkerGlobalScope` itself. Most of the time it is a specific scope like `DedicatedWorkerGlobalScope`, `SharedWorkerGlobalScope` or `ServiceWorkerGlobalScope`.
## Instance methods
This interface inherits methods from the `EventTarget` interface.
`WorkerGlobalScope.atob()`
    
Decodes a string of data which has been encoded using base-64 encoding.
`WorkerGlobalScope.btoa()`
    
Creates a base-64 encoded ASCII string from a string of binary data.
`WorkerGlobalScope.clearInterval()`
    
Cancels the repeated execution set using `WorkerGlobalScope.setInterval()`.
`WorkerGlobalScope.clearTimeout()`
    
Cancels the delayed execution set using `WorkerGlobalScope.setTimeout()`.
`WorkerGlobalScope.createImageBitmap()`
    
Accepts a variety of different image sources, and returns a `Promise` which resolves to an `ImageBitmap`. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
`WorkerGlobalScope.dump()` Deprecated Non-standard
    
Allows you to write a message to stdout — i.e., in your terminal. This is the same as Firefox's `window.dump`, but for workers.
`WorkerGlobalScope.fetch()`
    
Starts the process of fetching a resource from the network.
`WorkerGlobalScope.importScripts()`
    
Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example: `importScripts('foo.js', 'bar.js');`.
`WorkerGlobalScope.queueMicrotask()`
    
Queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.
`WorkerGlobalScope.setInterval()`
    
Schedules a function to execute every time a given number of milliseconds elapses.
`WorkerGlobalScope.setTimeout()`
    
Schedules a function to execute in a given amount of time.
`WorkerGlobalScope.structuredClone()`
    
Creates a deep clone of a given value using the structured clone algorithm.
`WorkerGlobalScope.reportError()`
    
Reports an error in a script, emulating an unhandled exception.
## Events
`error`
    
Fired when an error occurred.
`languagechange`
    
Fired at the global/worker scope object when the user's preferred languages change.
`offline`
    
Fired when the browser has lost access to the network and the value of `navigator.onLine` switched to `false`.
`online`
    
Fired when the browser has gained access to the network and the value of `navigator.onLine` switched to `true`.
`rejectionhandled`
    
Fired on handled `Promise` rejection events.
`securitypolicyviolation`
    
Fired when a Content Security Policy is violated.
`unhandledrejection`
    
Fired on unhandled `Promise` rejection events.
## Example
You won't access `WorkerGlobalScope` directly in your code; however, its properties and methods are inherited by more specific global scopes such as `DedicatedWorkerGlobalScope` and `SharedWorkerGlobalScope`. For example, you could import another script into the worker and print out the contents of the worker scope's `navigator` object using the following two lines:
    
    importScripts("foo.js");
    console.log(navigator);
    
Note: Since the global scope of the worker script is effectively the global scope of the worker you are running (`DedicatedWorkerGlobalScope` or whatever) and all worker global scopes inherit methods, properties, etc. from `WorkerGlobalScope`, you can run lines such as those above without specifying a parent object.
  * Other global object interface: `Window`, `DedicatedWorkerGlobalScope`, `SharedWorkerGlobalScope`, `ServiceWorkerGlobalScope`
  * Other Worker-related interfaces: `Worker`, `WorkerLocation` and `WorkerNavigator`
  * Using web workers


# HTMLCollection
The `HTMLCollection` interface represents a generic collection (array-like object similar to `arguments`) of elements (in document order) and offers methods and properties for selecting from the list.
An `HTMLCollection` in the HTML DOM is live; it is automatically updated when the underlying document is changed. For this reason it is a good idea to make a copy (e.g., using `Array.from`) to iterate over if adding, moving, or removing nodes.
This interface is called `HTMLCollection` for historical reasons, because before the modern DOM, collections implementing this interface could only have HTML elements as their items.
This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs represent list structures using types based on JavaScript arrays, thus making many array methods available, and at the same time imposing additional semantics on their usage (such as making their items read-only).
These historical reasons do not mean that you as a developer should avoid `HTMLCollection`. You don't create `HTMLCollection` objects yourself, but you get them from APIs such as `Document.getElementsByClassName()`, and these APIs are not deprecated. However, be careful of the semantic differences from a real array.
## Instance properties
`HTMLCollection.length` Read only
    
Returns the number of items in the collection.
## Instance methods
`HTMLCollection.item()`
    
Returns the specific element at the given zero-based `index` into the list. Returns `null` if the `index` is out of range.
An alternative to accessing `collection[i]` (which instead returns `undefined` when `i` is out-of-bounds). This is mostly useful for non-JavaScript DOM implementations.
`HTMLCollection.namedItem()`
    
Returns the specific node whose ID or, as a fallback, name matches the string specified by `name`. Matching by name is only done as a last resort, only in HTML, and only if the referenced element supports the `name` attribute. Returns `null` if no node exists by the given name.
An alternative to accessing `collection[name]` (which instead returns `undefined` when `name` does not exist). This is mostly useful for non-JavaScript DOM implementations.
## Usage in JavaScript
`HTMLCollection` also exposes its members as properties by name and index. HTML IDs may contain `:` and `.` as valid characters, which would necessitate using bracket notation for property access. Currently, an `HTMLCollection` object does not recognize purely numeric IDs, which would cause conflict with the array-style access, though HTML does permit these.
For example, assuming there is one `<form>` element in the document and its `id` is `myForm`:
    
    let elem1, elem2;
    
    // document.forms is an HTMLCollection
    
    elem1 = document.forms[0];
    elem2 = document.forms.item(0);
    
    alert(elem1 === elem2); // shows: "true"
    
    elem1 = document.forms.myForm;
    elem2 = document.forms.namedItem("myForm");
    
    alert(elem1 === elem2); // shows: "true"
    
    elem1 = document.forms["named.item.with.periods"];
    
  * `NodeList`
  * `HTMLFormControlsCollection`, `HTMLOptionsCollection`


# MediaCapabilities
Note: This feature is available in Web Workers.
The `MediaCapabilities` interface of the Media Capabilities API provides information about the decoding abilities of the device, system and browser. The API can be used to query the browser about the decoding abilities of the device based on codecs, profile, resolution, and bitrates. The information can be used to serve optimal media streams to the user and determine if playback should be smooth and power efficient.
The information is accessed through the `mediaCapabilities` property of the `Navigator` and `WorkerNavigator` interface.
## Instance methods
`MediaCapabilities.encodingInfo()`
    
When passed a valid media configuration, it returns a promise with information as to whether the media type is supported, and whether encoding such media would be smooth and power efficient.
`MediaCapabilities.decodingInfo()`
    
When passed a valid media configuration, it returns a promise with information as to whether the media type is supported, and whether decoding such media would be smooth and power efficient.
  * HTMLMediaElement's method canPlayType()
  * MediaSource's method isTypeSupported()
  * `Navigator` interface


# MediaStreamAudioDestinationNode
The `MediaStreamAudioDestinationNode` interface represents an audio destination consisting of a WebRTC `MediaStream` with a single `AudioMediaStreamTrack`, which can be used in a similar way to a `MediaStream` obtained from `navigator.mediaDevices.getUserMedia()`.
It is an `AudioNode` that acts as an audio destination, created using the `AudioContext.createMediaStreamDestination()` method.
EventTarget  AudioNode  MediaStreamAudioDestinationNode 
Number of inputs `1`  
Number of outputs `0`  
Channel count `2`  
Channel count mode `"explicit"`  
Channel count interpretation `"speakers"`  
## Constructor
`MediaStreamAudioDestinationNode()`
    
Creates a new `MediaStreamAudioDestinationNode` object instance.
## Instance properties
Inherits properties from its parent, `AudioNode`.
`MediaStreamAudioDestinationNode.stream`
    
A `MediaStream` containing a single `MediaStreamTrack` whose `kind` is `audio` and with the same number of channels as the node. You can use this property to get a stream out of the audio graph and feed it into another construct, such as a Media Recorder.
## Instance methods
Inherits methods from its parent, `AudioNode`.
## Example
See `AudioContext.createMediaStreamDestination()` for example code that creates a `MediaStreamAudioDestinationNode` and uses it as a source for audio to be recorded.
  * Using the Web Audio API


# ImageTrackList
Note: This feature is available in Dedicated Web Workers.
The `ImageTrackList` interface of the WebCodecs API represents a list of image tracks.
## Instance properties
`ImageTrackList.ready` Read only
    
Returns a `promise` that resolves once the `ImageTrackList` has been populated with `tracks`.
`ImageTrackList.length` Read only
    
Returns an integer indicating the length of the `ImageTrackList`.
`ImageTrackList.selectedIndex` Read only
    
Returns an integer indicating the index of the `selectedTrack`.
`ImageTrackList.selectedTrack` Read only
    
Returns the selected `ImageTrack`.
# SVGFEFuncBElement
The `SVGFEFuncBElement` interface corresponds to the `<feFuncB>` element.
EventTarget  Node  Element  SVGElement  SVGComponentTransferFunctionElement  SVGFEFuncBElement 
## Instance properties
This interface not provide any specific properties, but inherits properties from its parent interface, `SVGComponentTransferFunctionElement`.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGComponentTransferFunctionElement`.
  * `<feFuncB>`


# SVGPolygonElement
The `SVGPolygonElement` interface provides access to the properties of `<polygon>` elements, as well as methods to manipulate them.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGGeometryElement  SVGPolygonElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGeometryElement`.
`SVGPolygonElement.animatedPoints` Read only
    
An `SVGPointList` representing the animated value of the element's `points` attribute. If the `points` attribute is not being animated, it contains the same value as the `points` property.
`SVGPolygonElement.points`
    
An `SVGPointList` representing the base (i.e., static) value of the element's `points` attribute. Modifications via the `SVGPointList` object are reflected in the `points` attribute, and vice versa.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent, `SVGGeometryElement`.
  * `<polygon>`


# FederatedCredential
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `FederatedCredential` interface of the Credential Management API provides information about credentials from a federated identity provider. A federated identity provider is an entity that a website trusts to correctly authenticate a user, and that provides an API for that purpose. OpenID Connect is an example of a federated identity provider framework.
Note: The Federated Credential Management API (FedCM) provides a more complete solution for handling identity federation in the browser, and uses the `IdentityCredential` type.
In browsers that support it, an instance of this interface may be passed in the `credential` member of the `init` object for global `fetch()`.
Credential  FederatedCredential 
## Constructor
`FederatedCredential()` Experimental
    
Creates a new `FederatedCredential` object.
## Instance properties
Inherits properties from its ancestor, `Credential`.
`FederatedCredential.provider` Read only Experimental
    
Returns a string containing a credential's federated identity provider.
`FederatedCredential.protocol` Read only Experimental
    
Returns a string containing a credential's federated identity protocol.
## Instance methods
None.
## Examples
    
    const cred = new FederatedCredential({
      id,
      name,
      provider: "https://account.google.com",
      iconURL,
    });
    
    // Store it
    navigator.credentials.store(cred).then(() => {
      // Do something else.
    });
    
# HTMLOptionsCollection
The `HTMLOptionsCollection` interface represents a collection of `<option>` HTML elements (in document order) and offers methods and properties for selecting from the list as well as optionally altering its items. This object is returned only by the `options` property of select.
HTMLCollection  HTMLOptionsCollection 
## Instance properties
`HTMLOptionsCollection.length`
    
Returns or sets the number of options in the collection.
`HTMLOptionsCollection.selectedIndex`
    
The index number of the first selected `<option>` element. The value `-1` indicates no element is selected.
## Instance methods
This interface inherits the methods of its parent, `HTMLCollection`.
`HTMLOptionsCollection.add()`
    
Appends an `HTMLOptionElement` or `HTMLOptGroupElement` element to the collection of `option` elements or adds it before a specified option.
`HTMLOptionsCollection.remove()`
    
Removes the element at the specified index from the options collection.
  * `HTMLOptionElement`
  * `HTMLCollection`
  * `HTMLOptGroupElement`
  * `HTMLSelectElement`
  * Indexed collections guide


# SVGTitleElement
The `SVGTitleElement` interface corresponds to the `<title>` element.
EventTarget  Node  Element  SVGElement  SVGTitleElement 
## Instance properties
This interface doesn't implement any specific properties, but inherits properties from its parent interface, `SVGElement`.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.
# GPUCompilationMessage
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUCompilationMessage` interface of the WebGPU API represents a single informational, warning, or error message generated by the GPU shader module compiler.
An array of `GPUCompilationMessage` objects is available in the `messages` property of the `GPUCompilationInfo` object accessed via `GPUShaderModule.getCompilationInfo()`.
## Instance properties
`length` Read only
    
A number representing the length of the substring that the message corresponds to.
`lineNum` Read only
    
A number representing the line number in the shader code that the message corresponds to.
`linePos` Read only
    
A number representing the position in the code line that the message corresponds to. This could be an exact point, or the start of the relevant substring.
`message` Read only
    
A string representing human-readable message text.
`offset` Read only
    
A number representing the offset from the start of the shader code to the exact point, or the start of the relevant substring, that the message corresponds to.
`type` Read only
    
An enumerated value representing the type of the message — `"error"`, `"info"`, or `"warning"`.
## Examples
See the main `GPUCompilationInfo` page for an example.
  * The WebGPU API


# AesGcmParams
The `AesGcmParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.encrypt()`, `SubtleCrypto.decrypt()`, `SubtleCrypto.wrapKey()`, or `SubtleCrypto.unwrapKey()`, when using the AES-GCM algorithm.
For details of how to supply appropriate values for this parameter, see the specification for AES-GCM: NIST SP800-38D, in particular section 5.2.1.1 on Input Data.
## Instance properties
`name`
    
A string. This should be set to `AES-GCM`.
`iv`
    
An `ArrayBuffer`, a `TypedArray`, or a `DataView` with the initialization vector. This must be unique for every encryption operation carried out with a given key. Put another way: never reuse an IV with the same key. The AES-GCM specification recommends that the IV should be 96 bits long, and typically contains bits from a random number generator. Section 8.2 of the specification outlines methods for constructing IVs. Note that the IV does not have to be secret, just unique: so it is OK, for example, to transmit it in the clear alongside the encrypted message.
`additionalData` Optional
    
An `ArrayBuffer`, a `TypedArray`, or a `DataView`. This contains additional data that will not be encrypted but will be authenticated along with the encrypted data. If `additionalData` is given here then the same data must be given in the corresponding call to `decrypt()`: if the data given to the `decrypt()` call does not match the original data, the decryption will throw an exception. This gives you a way to authenticate associated data without having to encrypt it.
The bit length of `additionalData` must be smaller than `2^64 - 1`.
The `additionalData` property is optional and may be omitted without compromising the security of the encryption operation.
`tagLength` Optional
    
A `Number`. This determines the size in bits of the authentication tag generated in the encryption operation and used for authentication in the corresponding decryption.
The Web Crypto API specification requires this to have one of the following values: 32, 64, 96, 104, 112, 120, or 128. On the other hand, the AES-GCM specification recommends that it should be 96, 104, 112, 120, or 128, although 32 or 64 bits may be acceptable in some applications. For additional guidance, see Appendix C of the NIST Publication on "Recommendation for Block Cipher Modes of Operation".
`tagLength` is optional and defaults to 128 if it is not specified.
## Examples
See the examples for `SubtleCrypto.encrypt()` and `SubtleCrypto.decrypt()`.
Browsers that support the "AES-GCM" algorithm for the `SubtleCrypto.encrypt()`, `SubtleCrypto.decrypt()`, `SubtleCrypto.wrapKey()`, or `SubtleCrypto.unwrapKey()` methods will support this type.
  * `SubtleCrypto.encrypt()`.
  * `SubtleCrypto.decrypt()`.
  * `SubtleCrypto.wrapKey()`.
  * `SubtleCrypto.unwrapKey()`.


# NodeIterator
The `NodeIterator` interface represents an iterator to traverse nodes of a DOM subtree in document order.
A `NodeIterator` can be created using the `Document.createNodeIterator()` method, as follows:
    
    const nodeIterator = document.createNodeIterator(root, whatToShow, filter);
    
## Instance properties
This interface doesn't inherit any property.
`NodeIterator.root` Read only
    
Returns a `Node` representing the root node, as specified when the `NodeIterator` was created.
`NodeIterator.whatToShow` Read only
    
Returns an `unsigned long` bitmask that describes the types of `Node` to be matched. Non-matching nodes are skipped, but relevant child nodes may be included.
The possible bitmask values are constants from the `NodeFilter` interface:
Constant Numerical value Description  
`NodeFilter.SHOW_ALL` `4294967295` (that is the max value of `unsigned long`) Shows all nodes.  
`NodeFilter.SHOW_ATTRIBUTE` Deprecated `2` Shows attribute `Attr` nodes. This is meaningful only when creating a `NodeIterator` with an `Attr` node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.  
`NodeFilter.SHOW_CDATA_SECTION` Deprecated `8` Shows `CDATASection` nodes.  
`NodeFilter.SHOW_COMMENT` `128` Shows `Comment` nodes.  
`NodeFilter.SHOW_DOCUMENT` `256` Shows `Document` nodes.  
`NodeFilter.SHOW_DOCUMENT_FRAGMENT` `1024` Shows `DocumentFragment` nodes.  
`NodeFilter.SHOW_DOCUMENT_TYPE` `512` Shows `DocumentType` nodes.  
`NodeFilter.SHOW_ELEMENT` `1` Shows `Element` nodes.  
`NodeFilter.SHOW_ENTITY` Deprecated `32` Legacy, no longer used.  
`NodeFilter.SHOW_ENTITY_REFERENCE` Deprecated `16` Legacy, no longer used.  
`NodeFilter.SHOW_NOTATION` Deprecated `2048` Legacy, no longer used.  
`NodeFilter.SHOW_PROCESSING_INSTRUCTION` `64` Shows `ProcessingInstruction` nodes.  
`NodeFilter.SHOW_TEXT` `4` Shows `Text` nodes.  
`NodeIterator.filter` Read only
    
Returns a `NodeFilter` used to select the relevant nodes.
`NodeIterator.referenceNode` Read only
    
Returns the `Node` to which the iterator is anchored.
`NodeIterator.pointerBeforeReferenceNode` Read only
    
Returns a boolean indicating whether or not the `NodeIterator` is anchored before the `NodeIterator.referenceNode`. If `false`, it indicates that the iterator is anchored after the reference node.
## Instance methods
This interface doesn't inherit any method.
`NodeIterator.detach()` Deprecated
    
This is a legacy method, and no longer has any effect. Previously it served to mark a `NodeIterator` as disposed, so it could be reclaimed by garbage collection.
`NodeIterator.previousNode()`
    
Returns the previous `Node` in the document, or `null` if there are none.
`NodeIterator.nextNode()`
    
Returns the next `Node` in the document, or `null` if there are none.
  * The creator method: `Document.createNodeIterator()`.
  * Related interface: `TreeWalker`


# SVGEllipseElement
The `SVGEllipseElement` interface provides access to the properties of `<ellipse>` elements.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGGeometryElement  SVGEllipseElement 
## Instance properties
Inherits methods from its parent interface, `SVGGeometryElement`.
`SVGEllipseElement.cx` Read only
    
This property returns an `SVGAnimatedLength` reflecting the `cx` attribute of the given `<ellipse>` element.
`SVGEllipseElement.cy` Read only
    
This property returns an `SVGAnimatedLength` reflecting the `cy` attribute of the given `<ellipse>` element.
`SVGEllipseElement.rx` Read only
    
This property returns an `SVGAnimatedLength` reflecting the `rx` attribute of the given `<ellipse>` element.
`SVGEllipseElement.ry` Read only
    
This property returns an `SVGAnimatedLength` reflecting the `ry` attribute of the given `<ellipse>` element.
## Instance methods
Inherits methods from its parent interface, `SVGGeometryElement`.
## Example
>
### SVG
    
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <ellipse cx="100" cy="100" rx="100" ry="60" id="ellipse" />
    </svg>
    
### JavaScript
    
    const ellipse = document.getElementById("ellipse");
    
    function outputSize() {
      // Outputs "horizontal radius: 100 vertical radius: 60"
      console.log(
        `horizontal radius: ${ellipse.rx.baseVal.valueAsString}`,
        `vertical radius: ${ellipse.ry.baseVal.valueAsString}`,
      );
    }
    
    ellipse.addEventListener("click", outputSize);
    
### Result
  * `<ellipse>` SVG Element


# Scheduling
The `Scheduling` object provides methods and properties to control scheduling tasks within the current document.
Warning: The `Scheduling` interface has been superseded by the `Scheduler` interface, the features of which are better designed for addressing scheduling tasks. See Don't use `isInputPending()` for more details.
## Instance methods
`isInputPending()` Experimental
    
Returns a boolean that indicates whether there are pending input events in the event queue, meaning that the user is attempting to interact with the page.
## Example
See the `Scheduling.isInputPending()` page for a full example.
  * `Scheduler` interface
  * Prioritized Task Scheduling API
  * Faster input events with Facebook's first browser API contribution on engineering.fb.com (2019)
  * Better JS scheduling with isInputPending() on developer.chrome.com (2020)
  * Optimizing long tasks on web.dev (2022)


# Audio Output Devices API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Audio Output Devices API allows web applications to prompt users about what output device should be used for audio playback.
## Concepts and usage
Operating systems commonly allow users to specify that audio should be played from speakers, a Bluetooth headset, or some other audio output device. This API allows applications to provide this same functionality from within a web page.
Even if allowed by a permission policy, access to a particular audio output device still requires explicit user permission, as the user may be in a location where playing audio through some output devices is not appropriate.
The API provides the `MediaDevices.selectAudioOutput()` method that allows users to select their desired audio output from those that are allowed by the `speaker-selection` directive of the `Permissions-Policy` HTTP header for the document. The selected device then has user permission, allowing it to be enumerated with `MediaDevices.enumerateDevices()` and set as the audio output device using `HTMLMediaElement.setSinkId()`.
Audio devices may arbitrarily connect and disconnect. Applications that wish to react to this kind of change can listen to the `devicechange` event and use `enumerateDevices()` to determine if `sinkId` is present in the returned devices. This might trigger, for example, pausing or unpausing playback.
## Interfaces
>
### Extensions to other interfaces
The Audio Output Devices API extends the following APIs, adding the listed features:
#### MediaDevices
`MediaDevices.selectAudioOutput()`
    
This method prompts the user to select a specific audio output device, for example a speaker or headset. Selecting a device grants user permission to use that device and returns information about the device, including its ID.
#### HTMLMediaElement
`HTMLMediaElement.setSinkId()`
    
This method sets the ID of the audio device to use for output, which will be used if permitted.
`HTMLMediaElement.sinkId`
    
This property returns the unique ID of the audio device being used for output, or an empty string if the default user agent device is being used.
## Security requirements
Access to the API is subject to the following constraints:
  * All methods and properties may only be called in a secure context.
  * `MediaDevices.selectAudioOutput()` grants user permission for a selected device to be used as the audio output sink:
    * Access may be gated by the `speaker-selection` HTTP Permission Policy.
    * Transient user activation is required. The user has to interact with the page or a UI element for the method to be called.
  * `HTMLMediaElement.setSinkId()` sets a permitted ID as the audio output:
    * Access may be gated by the `speaker-selection` HTTP Permission Policy.
    * User permission is required to set a non-default device ID. 
      * This can come from selection in the prompt launched by `MediaDevices.selectAudioOutput()`
      * User permission to set the output device is also implicitly granted if the user has already granted permission to use a media input device in the same group with `MediaDevices.getUserMedia()`.


## Examples
Here's an example of using `selectAudioOutput()`, within a function that is triggered by a button click, and then setting the selected device as the audio output.
The code first checks if `selectAudioOutput()` is supported, and if it is, uses it to select an output and return a device ID. We then play some audio using the default output, and then call `setSinkId()` in order to switch to the selected output device.
    
    document.querySelector("#myButton").addEventListener("click", async () => {
      if (!navigator.mediaDevices.selectAudioOutput) {
        console.log("selectAudioOutput() not supported or not in secure context.");
        return;
      }
    
      // Display prompt to select device
      const audioDevice = await navigator.mediaDevices.selectAudioOutput();
    
      // Create an audio element and start playing audio on the default device
      const audio = document.createElement("audio");
      audio.src = "https://example.com/audio.mp3";
      audio.play();
    
      // Change the sink to the selected audio output device.
      audio.setSinkId(audioDevice.deviceId);
    });
    
Note that if you log the output details, they might look something like this:
    
    console.log(
      `${audioDevice.kind}: ${audioDevice.label} id = ${audioDevice.deviceId}`,
    );
    // audiooutput: Realtek Digital Output (Realtek(R) Audio) id = 0wE6fURSZ20H0N2NbxqgowQJLWbwo+5ablCVVJwRM3k=
    
>
### api.MediaDevices.selectAudioOutput
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Audio_Output_Devices_API` No No 116 No No No No No No No No No  
### api.HTMLMediaElement.setSinkId
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Audio_Output_Devices_API` 49 17 116 36 18.4 NoNot available due to a limitation in Android, see bug 41276355. NoNot available due to a limitation in Android, see bug 1473346. NoNot available due to a limitation in Android, see bug 41276355. 18.4 NoNot available due to a limitation in Android, see bug 41276355. NoNot available due to a limitation in Android, see bug 41276355. 18.4  
### api.HTMLMediaElement.sinkId
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Audio_Output_Devices_API` 49 17 116 36 18.4 NoNot available due to a limitation in Android, see bug 41276355. NoNot available due to a limitation in Android, see bug 1473346. NoNot available due to a limitation in Android, see bug 41276355. 18.4 NoNot available due to a limitation in Android, see bug 41276355. NoNot available due to a limitation in Android, see bug 41276355. 18.4  
### http.headers.Permissions-Policy.speaker-selection
# NavigateEvent
The `NavigateEvent` interface of the Navigation API is the event object for the `navigate` event, which fires when any type of navigation is initiated (this includes usage of History API features like `History.go()`). `NavigateEvent` provides access to information about that navigation, and allows developers to intercept and control the navigation handling.
Event  NavigateEvent 
## Constructor
`NavigateEvent()` Experimental
    
Creates a new `NavigateEvent` object instance.
## Instance properties
Inherits properties from its parent, `Event`.
`canIntercept` Read only Experimental
    
Returns `true` if the navigation can be intercepted, or `false` otherwise (e.g., you can't intercept a cross-origin navigation).
`destination` Read only Experimental
    
Returns a `NavigationDestination` object representing the destination being navigated to.
`downloadRequest` Read only Experimental
    
Returns the filename of the file requested for download, in the case of a download navigation (e.g., an `<a>` or `<area>` element with a `download` attribute), or `null` otherwise.
`formData` Read only Experimental
    
Returns the `FormData` object representing the submitted data in the case of a `POST` form submission, or `null` otherwise.
`hashChange` Read only Experimental
    
Returns `true` if the navigation is a fragment navigation (i.e., to a fragment identifier in the same document), or `false` otherwise.
`hasUAVisualTransition` Read only Experimental
    
Returns `true` if the user agent performed a visual transition for this navigation before dispatching this event, or `false` otherwise.
`info` Read only Experimental
    
Returns the `info` data value passed by the initiating navigation operation (e.g., `Navigation.back()`, or `Navigation.navigate()`), or `undefined` if no `info` data was passed.
`navigationType` Read only Experimental
    
Returns the type of the navigation — `push`, `reload`, `replace`, or `traverse`.
`signal` Read only Experimental
    
Returns an `AbortSignal`, which will become aborted if the navigation is cancelled (e.g., by the user pressing the browser's "Stop" button, or another navigation starting and thus cancelling the ongoing one).
`sourceElement` Read only Experimental
    
When the navigation was initiated by an element (for example clicking a link), returns an `Element` object representing the initiating element.
`userInitiated` Read only Experimental
    
Returns `true` if the navigation was initiated by the user (e.g., by clicking a link, submitting a form, or pressing the browser's "Back"/"Forward" buttons), or `false` otherwise.
## Instance methods
Inherits methods from its parent, `Event`.
`intercept()` Experimental
    
Intercepts this navigation, turning it into a same-document navigation to the `destination` URL. It can accept a handler function that defines what the navigation handling behavior should be, plus `focusReset` and `scroll` options to control behavior as desired.
`scroll()` Experimental
    
Can be called to manually trigger the browser-driven scrolling behavior that occurs in response to the navigation, if you want it to happen before the navigation handling has completed.
## Examples
>
### Handling a navigation using `intercept()`
    
    navigation.addEventListener("navigate", (event) => {
      // Exit early if this navigation shouldn't be intercepted,
      // e.g. if the navigation is cross-origin, or a download request
      if (shouldNotIntercept(event)) return;
    
      const url = new URL(event.destination.url);
    
      if (url.pathname.startsWith("/articles/")) {
        event.intercept({
          async handler() {
            // The URL has already changed, so show a placeholder while
            // fetching the new content, such as a spinner or loading page
            renderArticlePagePlaceholder();
    
            // Fetch the new content and display when ready
            const articleContent = await getArticleContent(url.pathname);
            renderArticlePage(articleContent);
          },
        });
      }
    });
    
Note: Before the Navigation API was available, to do something similar you'd have to listen for all click events on links, run `e.preventDefault()`, perform the appropriate `History.pushState()` call, then set up the page view based on the new URL. And this wouldn't handle all navigations — only user-initiated link clicks.
### Handling scrolling using `scroll()`
In this example of intercepting a navigation, the `handler()` function starts by fetching and rendering some article content, but then fetches and renders some secondary content afterwards. It makes sense to scroll the page to the main article content as soon as it is available so the user can interact with it, rather than waiting until the secondary content is also rendered. To achieve this, we have added a `scroll()` call between the two.
    
    navigation.addEventListener("navigate", (event) => {
      if (shouldNotIntercept(navigateEvent)) return;
      const url = new URL(event.destination.url);
    
      if (url.pathname.startsWith("/articles/")) {
        event.intercept({
          async handler() {
            const articleContent = await getArticleContent(url.pathname);
            renderArticlePage(articleContent);
    
            event.scroll();
    
            const secondaryContent = await getSecondaryContent(url.pathname);
            addSecondaryContent(secondaryContent);
          },
        });
      }
    });
    
  * Modern client-side routing: the Navigation API
  * Navigation API explainer
  * Navigation API live demo (view demo source)


# HTMLSelectElement
The `HTMLSelectElement` interface represents a `<select>` HTML Element. These elements also share all of the properties and methods of other HTML elements via the `HTMLElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLSelectElement 
## Instance properties
This interface inherits the properties of `HTMLElement`, and of `Element` and `Node`.
`HTMLSelectElement.autocomplete`
    
A string value reflecting the `autocomplete`, which indicates whether the value of the control can be automatically completed by the browser.
`HTMLSelectElement.disabled`
    
A boolean value reflecting the `disabled` HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.
`HTMLSelectElement.form` Read only
    
An `HTMLFormElement` referencing the form that this element is associated with. If the element is not associated with of a `<form>` element, then it returns `null`.
`HTMLSelectElement.labels` Read only
    
A `NodeList` of `<label>` elements associated with the element.
`HTMLSelectElement.length`
    
An `unsigned long` The number of `<option>` elements in this `select` element.
`HTMLSelectElement.multiple`
    
A boolean value reflecting the `multiple` HTML attribute, which indicates whether multiple items can be selected.
`HTMLSelectElement.name`
    
A string reflecting the `name` HTML attribute, containing the name of this control used by servers and DOM search functions.
`HTMLSelectElement.options` Read only
    
An `HTMLOptionsCollection` representing the set of `<option>` (`HTMLOptionElement`) elements contained by this element.
`HTMLSelectElement.required`
    
A boolean value reflecting the `required` HTML attribute, which indicates whether the user is required to select a value before submitting the form.
`HTMLSelectElement.selectedIndex`
    
A `long` reflecting the index of the first selected `<option>` element. The value `-1` indicates no element is selected.
`HTMLSelectElement.selectedOptions` Read only
    
An `HTMLCollection` representing the set of `<option>` elements that are selected.
`HTMLSelectElement.size`
    
A `long` reflecting the `size` HTML attribute, which contains the number of visible items in the control. The default is 1, unless `multiple` is `true`, in which case it is 4.
`HTMLSelectElement.type` Read only
    
A string representing the form control's type. When `multiple` is `true`, it returns `"select-multiple"`; otherwise, it returns `"select-one"`.
`HTMLSelectElement.validationMessage` Read only
    
A string representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (`willValidate` is false), or it satisfies its constraints.
`HTMLSelectElement.validity` Read only
    
A `ValidityState` reflecting the validity state that this control is in.
`HTMLSelectElement.value`
    
A string reflecting the value of the form control. Returns the `value` property of the first selected option element if there is one, otherwise the empty string.
`HTMLSelectElement.willValidate` Read only
    
A boolean value that indicates whether the button is a candidate for constraint validation. It is `false` if any conditions bar it from constraint validation.
## Instance methods
This interface inherits the methods of `HTMLElement`, and of `Element` and `Node`.
`HTMLSelectElement.add()`
    
Adds an element to the collection of `option` elements for this `select` element.
`HTMLSelectElement.checkValidity()`
    
Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable `invalid` event at the element (and returns `false`).
`HTMLSelectElement.item()`
    
Gets an item from the options collection for this `<select>` element. You can also access an item by specifying the index in square brackets or parentheses, without calling this method explicitly.
`HTMLSelectElement.namedItem()`
    
Gets the item in the options collection with the specified name. The name string can match either the `id` or the `name` attribute of an option node. You can also access an item by specifying the name in square brackets or parentheses, without calling this method explicitly.
`HTMLSelectElement.remove()`
    
Removes the element at the specified index from the options collection for this `select` element.
`HTMLSelectElement.reportValidity()`
    
This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable `invalid` event at the element, and returns `false`; if there are no problems, it returns `true`.
`HTMLSelectElement.setCustomValidity()`
    
Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.
`showPicker()`
    
Shows the option picker.
## Events
This interface inherits the events of `HTMLElement`, and of `Element` and `Node`.
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface:
`change` event
    
Fires when the user selects an option.
`input` event
    
Fires when the `value` of an `<input>`, `<select>`, or `<textarea>` element has been changed.
## Example
>
### Get information about the selected option
    
    /* assuming we have the following HTML
    <select id='s'>
        <option>First</option>
        <option selected>Second</option>
        <option>Third</option>
    </select>
    */
    
    const select = document.getElementById("s");
    
    // return the index of the selected option
    console.log(select.selectedIndex); // 1
    
    // return the value of the selected option
    console.log(select.options[select.selectedIndex].value); // Second
    
A better way to track changes to the user's selection is to watch for the `change` event to occur on the `<select>`. This will tell you when the value changes, and you can then update anything you need to. See the example provided in the documentation for the `change` event for details.
  * The `<select>` HTML element, which implements this interface.


# SVGClipPathElement
The `SVGClipPathElement` interface provides access to the properties of `<clipPath>` elements, as well as methods to manipulate them.
EventTarget  Node  Element  SVGElement  SVGClipPathElement 
## Instance properties
This interface also inherits properties from its parent, `SVGElement`.
`SVGClipPathElement.clipPathUnits` Read only
    
Returns an `SVGAnimatedEnumeration` corresponding to the `clipPathUnits` attribute of the associated `<clipPath>` element. Takes one of the constants defined in `SVGUnitTypes`.
`SVGClipPathElement.transform` Read only
    
Returns an `SVGAnimatedTransformList` corresponding to the `transform` attribute of the associated `<clipPath>` element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent, `SVGElement`.
  * `<clipPath>`
  * Introduction to CSS clipping


# HTMLPictureElement
The `HTMLPictureElement` interface represents a `<picture>` HTML element. It doesn't implement specific properties or methods.
EventTarget  Node  Element  HTMLElement  HTMLPictureElement 
## Instance properties
No specific property, but inherits properties from its parent, `HTMLElement`.
## Instance methods
No specific method, but inherits methods from its parent, `HTMLElement`.
  * The `<picture>` HTML element that implements it.
  * The `HTMLImageElement` and `HTMLSourceElement` interfaces, often used in conjunction with a `<picture>` element.


# CaptureController
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `CaptureController` interface provides methods that can be used to further manipulate a captured display surface (captured via `MediaDevices.getDisplayMedia()`)
A `CaptureController` object is associated with a captured display surface by passing it into a `getDisplayMedia()` call as the value of the options object's `controller` property.
## Constructor
`CaptureController()` Experimental
    
Creates a new `CaptureController` object instance.
## Instance properties
`zoomLevel` Experimental
    
The captured display surface's current zoom level.
## Instance methods
`decreaseZoomLevel()` Experimental
    
Decreases the captured display surface's zoom level by one increment.
`forwardWheel()` Experimental
    
Starts forwarding `wheel` events fired on the referenced element to the viewport of an associated captured display surface.
`getSupportedZoomLevels()` Experimental
    
Returns the different zoom levels supported by the captured display surface.
`increaseZoomLevel()` Experimental
    
Increases the captured display surface's zoom level by one increment.
`resetZoomLevel()` Experimental
    
Resets the captured display surface's zoom to its initial level, which is `100`.
`setFocusBehavior()` Experimental
    
Controls whether the captured tab or window will be focused or whether the focus will remain with the tab containing the capturing app.
## Events
`zoomlevelchange` Experimental
    
Fires when the captured display surface's zoom level changes.
## Examples
    
    // Create a new CaptureController instance
    const controller = new CaptureController();
    
    // Prompt the user to share a tab, window, or screen.
    const stream = await navigator.mediaDevices.getDisplayMedia({ controller });
    
    // Query the displaySurface value of the captured video track
    const [track] = stream.getVideoTracks();
    const displaySurface = track.getSettings().displaySurface;
    
    if (displaySurface === "browser") {
      // Focus the captured tab.
      controller.setFocusBehavior("focus-captured-surface");
    } else if (displaySurface === "window") {
      // Do not move focus to the captured window.
      // Keep the capturing page focused.
      controller.setFocusBehavior("no-focus-change");
    }
    
  * Screen Capture API
  * `MediaDevices.getDisplayMedia()`
  * Using the Element Capture and Region Capture APIs
  * Using the Captured Surface Control API
  * Better screen sharing with Conditional Focus


# Fetch API
Note: This feature is available in Web Workers.
The Fetch API provides an interface for fetching resources (including across the network). It is a more powerful and flexible replacement for `XMLHttpRequest`.
## Concepts and usage
The Fetch API uses `Request` and `Response` objects (and other things involved with network requests), as well as related concepts such as CORS and the HTTP Origin header semantics.
For making a request and fetching a resource, use the `fetch()` method. It is a global method in both `Window` and `Worker` contexts. This makes it available in pretty much any context you might want to fetch resources in.
The `fetch()` method takes one mandatory argument, the path to the resource you want to fetch. It returns a `Promise` that resolves to the `Response` to that request — as soon as the server responds with headers — even if the server response is an HTTP error status. You can also optionally pass in an `init` options object as the second argument (see `Request`).
Once a `Response` is retrieved, there are a number of methods available to define what the body content is and how it should be handled.
You can create a request and response directly using the `Request()` and `Response()` constructors, but it's uncommon to do this directly. Instead, these are more likely to be created as results of other API actions (for example, `FetchEvent.respondWith()` from service workers).
Find out more about using the Fetch API features in Using Fetch.
## Interfaces
`Window.fetch()` and `WorkerGlobalScope.fetch()`
    
The `fetch()` method used to fetch a resource.
`Headers`
    
Represents response/request headers, allowing you to query them and take different actions depending on the results.
`Request`
    
Represents a resource request.
`Response`
    
Represents the response to a request.
  * Using Fetch
  * Service Worker API
  * HTTP access control (CORS)
  * HTTP


# LayoutShift
The `LayoutShift` interface of the Performance API provides insights into the layout stability of web pages based on movements of the elements on the page.
## Description
A layout shift happens when any element that is visible in the viewport changes its position between two frames. These elements are described as being unstable, indicating a lack of visual stability.
The Layout Instability API provides a way to measure and report on these layout shifts. All tools for debugging layout shifts, including those in the browser's developer tools, use this API. The API can also be used to observe and debug layout shifts by logging the information to the console, to send the data to a server endpoint, or to web page analytics.
Performance tools can use this API to calculate a CLS score.
PerformanceEntry  LayoutShift 
## Instance properties
This interface extends the following `PerformanceEntry` properties by qualifying them as follows:
`PerformanceEntry.duration` Read only Experimental
    
Always returns `0` (the concept of duration does not apply to layout shifts).
`PerformanceEntry.entryType` Read only Experimental
    
Always returns `"layout-shift"`.
`PerformanceEntry.name` Read only Experimental
    
Always returns `"layout-shift"`.
`PerformanceEntry.startTime` Read only Experimental
    
Returns a `DOMHighResTimeStamp` representing the time when the layout shift started.
This interface also supports the following properties:
`LayoutShift.value` Experimental
    
Returns the layout shift score calculated as the impact fraction (fraction of the viewport that was shifted) multiplied by the distance fraction (distance moved as a fraction of viewport).
`LayoutShift.hadRecentInput` Experimental
    
Returns `true` if `lastInputTime` is less than 500 milliseconds in the past.
`LayoutShift.lastInputTime` Experimental
    
Returns the time of the most recent excluding input (user input that would exclude this entry as a contributor to the CLS score) or `0` if no excluding input has occurred.
`LayoutShift.sources` Experimental
    
Returns an array of `LayoutShiftAttribution` objects with information on the elements that were shifted.
## Instance methods
`LayoutShift.toJSON()` Experimental
    
Converts the properties to JSON.
## Examples
>
### Logging layout shift values
The following example shows how to capture layout shifts and log them to the console.
    
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        // Count layout shifts without recent user input only
        if (!entry.hadRecentInput) {
          console.log("LayoutShift value:", entry.value);
          if (entry.sources) {
            for (const { node, currentRect, previousRect } of entry.sources)
              console.log("LayoutShift source:", node, {
                currentRect,
                previousRect,
              });
          }
        }
      }
    });
    
    observer.observe({ type: "layout-shift", buffered: true });
    
  * `LayoutShiftAttribution`
  * CLS


# SVGFEDropShadowElement
The `SVGFEDropShadowElement` interface corresponds to the `<feDropShadow>` element.
EventTarget  Node  Element  SVGElement  SVGFEDropShadowElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEDropShadowElement.dx` Read only
    
An `SVGAnimatedNumber` corresponding to the `dx` attribute of the given element.
`SVGFEDropShadowElement.dy` Read only
    
An `SVGAnimatedNumber` corresponding to the `dy` attribute of the given element.
`SVGFEDropShadowElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEDropShadowElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFEDropShadowElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEDropShadowElement.stdDeviationX` Read only
    
An `SVGAnimatedNumber` corresponding to the (possibly automatically computed) X component of the `stdDeviation` attribute of the given element.
`SVGFEDropShadowElement.stdDeviationY` Read only
    
An `SVGAnimatedNumber` corresponding to the (possibly automatically computed) Y component of the `stdDeviation` attribute of the given element.
`SVGFEDropShadowElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEDropShadowElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEDropShadowElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface also inherits methods of its parent, `SVGElement`.
`SVGFEDropShadowElement.setStdDeviation()`
    
Sets the values for the `stdDeviation` attribute.
  * `<feDropShadow>`


# PermissionStatus
Note: This feature is available in Web Workers.
The `PermissionStatus` interface of the Permissions API provides the state of an object and an event handler for monitoring changes to said state.
EventTarget  PermissionStatus 
## Instance properties
`PermissionStatus.name` Read only
    
Returns the name of a requested permission, identical to the `name` passed to `Permissions.query`.
`PermissionStatus.state` Read only
    
Returns the state of a requested permission; one of `'granted'`, `'denied'`, or `'prompt'`.
### Events
`change`
    
Invoked upon changes to `PermissionStatus.state`.
## Example
    
    navigator.permissions
      .query({ name: "geolocation" })
      .then((permissionStatus) => {
        console.log(`geolocation permission status is ${permissionStatus.state}`);
        permissionStatus.onchange = () => {
          console.log(
            `geolocation permission status has changed to ${permissionStatus.state}`,
          );
        };
      });
    
# HTMLCanvasElement
The `HTMLCanvasElement` interface provides properties and methods for manipulating the layout and presentation of `<canvas>` elements. The `HTMLCanvasElement` interface also inherits the properties and methods of the `HTMLElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLCanvasElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLCanvasElement.height`
    
The `height` HTML attribute of the `<canvas>` element is a non-negative `integer` reflecting the number of logical pixels (or RGBA values) going down one column of the canvas. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of `150` is used. If no [separate] CSS height is assigned to the `<canvas>`, then this value will also be used as the height of the canvas in the length-unit CSS Pixel.
`HTMLCanvasElement.width`
    
The `width` HTML attribute of the `<canvas>` element is a non-negative `integer` reflecting the number of logical pixels (or RGBA values) going across one row of the canvas. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of `300` is used. If no [separate] CSS width is assigned to the `<canvas>`, then this value will also be used as the width of the canvas in the length-unit CSS Pixel.
`HTMLCanvasElement.mozOpaque` Non-standard Deprecated
    
A boolean value reflecting the `moz-opaque` HTML attribute of the `<canvas>` element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized. This is only supported in Mozilla-based browsers; use the standardized `canvas.getContext('2d', { alpha: false })` instead.
`HTMLCanvasElement.mozPrintCallback` Non-standard
    
A `function` that is Initially null. Web content can set this to a JavaScript function that will be called when the canvas is to be redrawn while the page is being printed. When called, the callback is passed a "printState" object that implements the MozCanvasPrintState interface. The callback can get the context to draw to from the printState object and must then call done() on it when finished. The purpose of `mozPrintCallback` is to obtain a higher resolution rendering of the canvas at the resolution of the printer being used. See this blog post.
## Instance methods
Inherits methods from its parent, `HTMLElement`.
`HTMLCanvasElement.captureStream()`
    
Returns a `CanvasCaptureMediaStreamTrack` that is a real-time video capture of the surface of the canvas.
`HTMLCanvasElement.getContext()`
    
Returns a drawing context on the canvas, or `null` if the context identifier is not supported, or the canvas has already been set to a different context mode.
`HTMLCanvasElement.toDataURL()`
    
Returns a data-URL containing a representation of the image in the format specified by the `type` parameter (defaults to `png`). The returned image is in a resolution of 96dpi.
`HTMLCanvasElement.toBlob()`
    
Creates a `Blob` object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
`HTMLCanvasElement.transferControlToOffscreen()`
    
Transfers control to an `OffscreenCanvas` object, either on the main thread or on a worker.
## Events
Inherits events from its parent, `HTMLElement`.
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`contextlost`
    
Fired if the browser detects that the `CanvasRenderingContext2D` context has been lost.
`contextrestored`
    
Fired if the browser successfully restores a `CanvasRenderingContext2D` context
`webglcontextcreationerror`
    
Fired if the user agent is unable to create a `WebGLRenderingContext` or `WebGL2RenderingContext` context.
`webglcontextlost`
    
Fired if the user agent detects that the drawing buffer associated with a `WebGLRenderingContext` or `WebGL2RenderingContext` object has been lost.
`webglcontextrestored`
    
Fired if the user agent restores the drawing buffer for a `WebGLRenderingContext` or `WebGL2RenderingContext` object.
  * HTML element implementing this interface: `<canvas>`


# FormData
Note: This feature is available in Web Workers.
The `FormData` interface provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the `fetch()`, `XMLHttpRequest.send()` or `navigator.sendBeacon()` methods. It uses the same format a form would use if the encoding type were set to `"multipart/form-data"`.
You can also pass it directly to the `URLSearchParams` constructor if you want to generate query parameters in the way a `<form>` would do if it were using simple `GET` submission.
An object implementing `FormData` can directly be used in a `for...of` structure, instead of `entries()`: `for (const p of myFormData)` is equivalent to `for (const p of myFormData.entries())`.
## Constructor
`FormData()`
    
Creates a new `FormData` object.
## Instance methods
`FormData.append()`
    
Appends a new value onto an existing key inside a `FormData` object, or adds the key if it does not already exist.
`FormData.delete()`
    
Deletes a key/value pair from a `FormData` object.
`FormData.entries()`
    
Returns an iterator that iterates through all key/value pairs contained in the `FormData`.
`FormData.get()`
    
Returns the first value associated with a given key from within a `FormData` object.
`FormData.getAll()`
    
Returns an array of all the values associated with a given key from within a `FormData`.
`FormData.has()`
    
Returns whether a `FormData` object contains a certain key.
`FormData.keys()`
    
Returns an iterator iterates through all keys of the key/value pairs contained in the `FormData`.
`FormData.set()`
    
Sets a new value for an existing key inside a `FormData` object, or adds the key/value if it does not already exist.
`FormData.values()`
    
Returns an iterator that iterates through all values contained in the `FormData`.
  * Using FormData objects
  * `<Form>`


# HTMLTableRowElement
The `HTMLTableRowElement` interface provides special properties and methods (beyond the `HTMLElement` interface it also has available to it by inheritance) for manipulating the layout and presentation of rows in an HTML table.
EventTarget  Node  Element  HTMLElement  HTMLTableRowElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLTableRowElement.cells` Read only
    
Returns a live `HTMLCollection` containing the cells in the row. The `HTMLCollection` is live and is automatically updated when cells are added or removed.
`HTMLTableRowElement.rowIndex` Read only
    
Returns a number that gives the logical position of the row within the entire table. If the row is not part of a table, returns `-1`.
`HTMLTableRowElement.sectionRowIndex` Read only
    
Returns a number that gives the logical position of the row within the table section it belongs to. If the row is not part of a section, returns `-1`.
## Instance methods
Inherits methods from its parent, `HTMLElement`.
`HTMLTableRowElement.deleteCell()`
    
Removes the cell corresponding to `index`. If `index` is `-1`, the last cell of the row is removed. If `index` is less than `-1` or greater than the amount of cells in the collection, a `DOMException` with the value `IndexSizeError` is raised.
`HTMLTableRowElement.insertCell()`
    
Returns an `HTMLTableCellElement` representing a new cell of the row. The cell is inserted in the collection of cells immediately before the given `index` position in the row. If `index` is `-1`, the new cell is appended to the collection. If `index` is less than `-1` or greater than the number of cells in the collection, a `DOMException` with the value `IndexSizeError` is raised.
## Deprecated properties
Warning: These properties have been deprecated and should no longer be used. They are documented primarily to help understand older code bases.
`HTMLTableRowElement.align` Deprecated
    
A string containing an enumerated value reflecting the `align` attribute. It indicates the alignment of the element's contents to the surrounding context. The possible values are `"left"`, `"right"`, and `"center"`.
`HTMLTableRowElement.bgColor` Deprecated
    
A string containing the background color of the cells. It reflects the obsolete `bgColor` attribute.
`HTMLTableRowElement.ch` Deprecated
    
A string containing one single character. This character is the one to align all the cell of a column on. It reflects the `char` and defaults to the decimal points associated with the language, e.g., `'.'` for English, or `','` for French. This property was optional and was not very well supported.
`HTMLTableRowElement.chOff` Deprecated
    
A string containing an integer indicating how many characters must be left at the right (for left-to-right scripts; or at the left for right-to-left scripts) of the character defined by `HTMLTableRowElement.ch`. This property was optional and was not very well supported.
`HTMLTableRowElement.vAlign` Deprecated
    
A string representing an enumerated value indicating how the content of the cell must be vertically aligned. It reflects the `valign` attribute and can have one of the following values: `"top"`, `"middle"`, `"bottom"`, or `"baseline"`.
  * The HTML element implementing this interface: `<tr>`.


# CSSPageRule
`CSSPageRule` represents a single CSS `@page` rule.
CSSRule  CSSGroupingRule  CSSPageRule 
## Instance properties
Inherits properties from its ancestors `CSSGroupingRule` and `CSSRule`.
`CSSPageRule.selectorText`
    
Represents the text of the page selector associated with the at-rule.
`CSSPageRule.style` Read only
    
Returns the declaration block associated with the at-rule.
## Instance methods
Inherits methods from its ancestors `CSSGroupingRule` and `CSSRule`.
## Examples
>
### Filtering for page rules
This example shows how you can find `CSSPageRule` objects for `@page` rules loaded by the document.
#### CSS
Below we define styles for the page using a `@page` rule.
    
    @page {
      margin: 1cm;
    }
    
#### JavaScript
The code iterates through all the sheets in the document, and through all the `cssRules` in each sheet, logging the sheet index, the number of rules, and the type of each rule object. We then detect `CSSPageRule` objects using their type (doing nothing with the information).
    
    for (
      let sheetCount = 0;
      sheetCount < document.styleSheets.length;
      sheetCount++
    ) {
      const sheet = document.styleSheets[sheetCount].cssRules;
      log(`styleSheet: ${sheetCount}`);
    
      const myRules = document.styleSheets[sheetCount].cssRules;
      log(`rules: ${myRules.length}`);
      for (const rule of myRules) {
        log(`rule: ${rule}`);
        if (rule instanceof CSSPageRule) {
          // Do something with CSSPageRule
        }
      }
    }
    
#### Results
The results are shown below. As you can see there are a two sheets, corresponding to this main document and the example code frame, and each have a number of rules, only one of which is our `CSSPageRule`.
# Web Speech API
The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: `SpeechSynthesis` (Text-to-Speech), and `SpeechRecognition` (Asynchronous Speech Recognition.)
## Web Speech Concepts and Usage
The Web Speech API makes web apps able to handle voice data. There are two components to this API:
  * Speech recognition is accessed via the `SpeechRecognition` interface, which provides the ability to recognize voice context from an audio input (normally via the device's default speech recognition service) and respond appropriately. Generally you'll use the interface's constructor to create a new `SpeechRecognition` object, which has a number of event handlers available for detecting when speech is input through the device's microphone. The `SpeechGrammar` interface represents a container for a particular set of grammar that your app should recognize. Grammar is defined using JSpeech Grammar Format (JSGF.)
  * Speech synthesis is accessed via the `SpeechSynthesis` interface, a text-to-speech component that allows programs to read out their text content (normally via the device's default speech synthesizer.) Different voice types are represented by `SpeechSynthesisVoice` objects, and different parts of text that you want to be spoken are represented by `SpeechSynthesisUtterance` objects. You can get these spoken by passing them to the `SpeechSynthesis.speak()` method.


For more details on using these features, see Using the Web Speech API.
## Web Speech API Interfaces
>
### Speech recognition
`SpeechRecognition`
    
The controller interface for the recognition service; this also handles the `SpeechRecognitionEvent` sent from the recognition service.
`SpeechRecognitionAlternative`
    
Represents a single word that has been recognized by the speech recognition service.
`SpeechRecognitionErrorEvent`
    
Represents error messages from the recognition service.
`SpeechRecognitionEvent`
    
The event object for the `result` and `nomatch` events, and contains all the data associated with an interim or final speech recognition result.
`SpeechGrammar`
    
The words or patterns of words that we want the recognition service to recognize.
`SpeechGrammarList`
    
Represents a list of `SpeechGrammar` objects.
`SpeechRecognitionResult`
    
Represents a single recognition match, which may contain multiple `SpeechRecognitionAlternative` objects.
`SpeechRecognitionResultList`
    
Represents a list of `SpeechRecognitionResult` objects, or a single one if results are being captured in `continuous` mode.
### Speech synthesis
`SpeechSynthesis`
    
The controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.
`SpeechSynthesisErrorEvent`
    
Contains information about any errors that occur while processing `SpeechSynthesisUtterance` objects in the speech service.
`SpeechSynthesisEvent`
    
Contains information about the current state of `SpeechSynthesisUtterance` objects that have been processed in the speech service.
`SpeechSynthesisUtterance`
    
Represents a speech request. It contains the content the speech service should read and information about how to read it (e.g., language, pitch and volume.)
`SpeechSynthesisVoice`
    
Represents a voice that the system supports. Every `SpeechSynthesisVoice` has its own relative speech service including information about language, name and URI.
`Window.speechSynthesis`
    
Specified out as part of a `[NoInterfaceObject]` interface called `SpeechSynthesisGetter`, and Implemented by the `Window` object, the `speechSynthesis` property provides access to the `SpeechSynthesis` controller, and therefore the entry point to speech synthesis functionality.
## Errors
For information on errors reported by the Speech API (for example, `"language-not-supported"` and `"language-unavailable"`), see the following documentation:
  * `error` property of the `SpeechRecognitionErrorEvent` object
  * `error` property of the `SpeechSynthesisErrorEvent` object


## Examples
The Web Speech API examples on GitHub contains demos to illustrate speech recognition and synthesis.
>
### api.SpeechRecognition
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`SpeechRecognition` 13933 13979 No No 14.1 13933 No No 14.5 2.0 37 14.5  
`Web_Speech_API` 13933You'll need to serve your code through a web server for recognition to work. 13979You'll need to serve your code through a web server for recognition to work. No 12320You'll need to serve your code through a web server for recognition to work. 14.1 13933You'll need to serve your code through a web server for recognition to work. No 9120You'll need to serve your code through a web server for recognition to work. 14.5 2.0You'll need to serve your code through a web server for recognition to work. 1394.4.3You'll need to serve your code through a web server for recognition to work. 14.5  
`abort` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`audioend_event` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`audiostart_event` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`available_static` 139 139 No 123 No 139 No 91 No No 139 No  
`continuous` 33 79 No 20 14.1 NoThe property can be set, but has no effect. No NoThe property can be set, but has no effect. 14.5 NoThe property can be set, but has no effect. NoThe property can be set, but has no effect. 14.5  
`end_event` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`error_event` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`grammars` 33 79 No 20 No 33 No 20 No 2.0 4.4.3 No  
`install_static` 139 139 No 123 No 139 No 91 No No 139 No  
`interimResults` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`lang` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`maxAlternatives` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`nomatch_event` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`processLocally` 139 139 No 123 No 139 No 91 No No 139 No  
`result_event` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`soundend_event` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`soundstart_event` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`speechend_event` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`speechstart_event` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`start` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`start_event` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
`stop` 33 79 No 20 14.1 33 No 20 14.5 2.0 4.4.3 14.5  
### api.SpeechSynthesis
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_Speech_API` 33 14 49 21 7 33 62 No 7 3.0 No 7  
`cancel` 33 14 49 21 7 33 62 No 7 3.0 No 7  
`getVoices` 33 14 49 21 7 33 62 No 7 3.0 No 7  
`pause` 33 14 49 21 7 33In Android, `pause()` ends the current utterance. `pause()` behaves the same as `cancel()`. 62In Android, `pause()` ends the current utterance. `pause()` behaves the same as `cancel()`. No 7 3.0In Android, `pause()` ends the current utterance. `pause()` behaves the same as `cancel()`. No 7  
`paused` 33 14 49 21 7 33 62 No 7 3.0 No 7  
`pending` 33 14 49 21 7 33 62 No 7 3.0 No 7  
`resume` 33 14 49 21 7 33 62 No 7 3.0 No 7  
`speak` 33 14 49 21 7 33 62 No 7 3.0 No 7  
`speaking` 33 14 49 21 7 33 62 No 7 3.0 No 7  
`voiceschanged_event` 33 14 49 21 16 33 62 No 16 3.0 No 16  
  * Using the Web Speech API


# RTCCodecStats
The `RTCCodecStats` dictionary of the WebRTC API provides statistics about a codec used by RTP streams that are being sent or received by the associated `RTCPeerConnection` object.
These statistics can be obtained by iterating the `RTCStatsReport` object returned by `RTCPeerConnection.getStats()` until you find an entry with the `type` of `codec`.
The codec statistics can be correlated with the inbound or outbound stream statistics (both local and remote) by matching their `codecId` property to the codec's `id`. For example, if `RTCInboundRtpStreamStats.codecId` matches an `RTCCodecStats.id` in the same report, then we know that the codec is being used on this peer connection's inbound stream. If no stream `codecId` references a codec statistic, then that codec statistic object is deleted — if the codec is used again, the statistics object will be recreated with the same `id`.
Codec objects may be referenced by multiple RTP streams in media sections using the same transport. In fact, user agents are expected to consolidate information into a single "codec" entry per payload type per transport (unless sdpFmtpLine is different when sending or receiving, in which case, different codecs will be needed for encoding and decoding). Note that other transports will use their own distinct `RTCCodecStats` objects.
## Instance properties
`channels` Optional
    
A positive number indicating the number of channels supported by the codec.
`clockRate` Optional
    
A positive number containing the media sampling rate.
`mimeType`
    
A string containing the media MIME type/subtype, such as video/VP8.
`payloadType`
    
A positive integer value in the range of 0 to 127 indicating the payload type used in RTP encoding or decoding.
`sdpFmtpLine` Optional
    
A string containing the format-specific parameters of the `"a=fmtp"` line in the codec's SDP (if present).
`transportId`
    
A string containing the unique identifier of the transport on which this codec is being used. This can be used to match to the corresponding `RTCTransportStats` object.
### Common instance properties
The following properties are common to all WebRTC statistics objects (see `RTCStatsReport` for more information):
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"codec"`, indicating the type of statistics the object contains.
## Examples
Given a variable `myPeerConnection`, which is an instance of `RTCPeerConnection`, the code below uses `await` to wait for the statistics report, and then iterates it using `RTCStatsReport.forEach()`. It then filters the dictionaries for just those reports that have the type of `codec` and logs the result.
    
    const stats = await myPeerConnection.getStats();
    
    stats.forEach((report) => {
      if (report.type === "codec") {
        // Log the codec information
        console.log(report);
      }
    });
    
  * `RTCStatsReport`
  * `codecs` option in parameter passed to `RTCRtpTransceiver.setCodecPreferences()` and `RTCRtpSender.setParameters()()`.
  * `codecs` property in object returned by `RTCRtpSender.getParameters()` and `RTCRtpReceiver.getParameters()`.


# BroadcastChannel
Note: This feature is available in Web Workers.
The `BroadcastChannel` interface represents a named channel that any browsing context of a given origin can subscribe to. It allows communication between different documents (in different windows, tabs, frames or iframes) of the same origin. Messages are broadcasted via a `message` event fired at all `BroadcastChannel` objects listening to the channel, except the object that sent the message.
EventTarget  BroadcastChannel 
## Constructor
`BroadcastChannel()`
    
Creates an object linking to the named channel.
## Instance properties
This interface also inherits properties from its parent, `EventTarget`.
`BroadcastChannel.name` Read only
    
Returns a string, the name of the channel.
## Instance methods
This interface also inherits methods from its parent, `EventTarget`.
`BroadcastChannel.postMessage()`
    
Sends the message, of any type of object, to each `BroadcastChannel` object listening to the same channel.
`BroadcastChannel.close()`
    
Closes the channel object, indicating it won't get any new messages, and allowing it to be, eventually, garbage collected.
## Events
This interface also inherits events from its parent, `EventTarget`.
`message`
    
Fired when a message arrives on the channel. Also available via the `onmessage` property.
`messageerror`
    
Fired when a message arrives that can't be deserialized. Also available via the `onmessageerror` property.
  * Another, more heavyweight, way of communicating between browser contexts: `ServiceWorker`.
  * Broadcast Channel API overview


# ErrorEvent
Note: This feature is available in Web Workers.
The `ErrorEvent` interface represents events providing information related to errors in scripts or in files.
Event  ErrorEvent 
## Constructor
`ErrorEvent()`
    
Creates an `ErrorEvent` event with the given parameters.
## Instance properties
Also inherits properties from its parent `Event`.
`ErrorEvent.message` Read only
    
A string containing a human-readable error message describing the problem.
`ErrorEvent.filename` Read only
    
A string containing the name of the script file in which the error occurred.
`ErrorEvent.lineno` Read only
    
An integer containing the line number of the script file on which the error occurred.
`ErrorEvent.colno` Read only
    
An integer containing the column number of the script file on which the error occurred.
`ErrorEvent.error` Read only
    
A JavaScript value, such as an `Error` or `DOMException`, representing the error associated with this event.
## Instance methods
Inherits methods from its parent `Event`.
  * Using web workers, most likely objects to raise such an event.
  * `Window`: `error` event
  * `Navigation`: `navigateerror` event


# RTCPeerConnectionIceEvent
The `RTCPeerConnectionIceEvent` interface represents events that occur in relation to ICE candidates with the target, usually an `RTCPeerConnection`.
Only one event is of this type: `icecandidate`.
Event  RTCPeerConnectionIceEvent 
## Instance properties
A `RTCPeerConnectionIceEvent` being an `Event`, this event also implements these properties.
`RTCPeerConnectionIceEvent.candidate` Read only
    
Contains the `RTCIceCandidate` containing the candidate associated with the event, or `null` if this event indicates that there are no further candidates to come.
## Constructors
`RTCPeerConnectionIceEvent()`
    
Returns a new `RTCPeerConnectionIceEvent`. It takes two parameters, the first being a string representing the type of the event; the second a dictionary containing the `RTCIceCandidate` it refers to.
## Instance methods
A `RTCPeerConnectionIceEvent` being an `Event`, this event also implements these properties. There is no specific `RTCDataChannelEvent` method.
## Examples
    
    pc.onicecandidate = (ev) => {
      console.log(
        `The ICE candidate ('${ev.candidate.candidate}') added to connection.`,
      );
    };
    
  * WebRTC
  * Its usual target: `RTCPeerConnection`.


# Media Session API
The Media Session API provides a way to customize media notifications. It does this by providing metadata for display by the user agent for the media your web app is playing.
It also provides action handlers that the browser can use to access platform media keys such as hardware keys found on keyboards, headsets, remote controls, and software keys found in notification areas and on lock screens of mobile devices. So you can seamlessly control web-provided media via your device, even when not looking at the web page.
The aim is to allow users to know what's playing and to control it, without needing to open the specific page that launched it. To be able to support the Media Session API, a browser first needs a mechanism by which to access and be controlled by the OS-level media controls (such as Firefox's MediaControl).
## Media Session concepts and usage
The `MediaMetadata` interface lets a website provide rich metadata to the platform UI for media that is playing. This metadata includes the title, artist (creator) name, album (collection), artwork, and chapter information. The platform can show this metadata in media centers, notifications, device lock screens, and so on. For example, different devices might present the Media Session API data like so:
Original image source: Customize media notifications and playback controls with the Media Session API on web.dev (2024)
The `MediaSession` interface lets users control the playback of media through user-agent-defined interface elements. Interaction with these elements triggers action handlers on the web page playing the media. Since multiple pages may be simultaneously using this API, the user agent is responsible for calling the correct page's action handlers. The user agent provides default behaviors when no page-defined behavior is available.
## Accessing the Media Session API
The primary interface for the Media Session API is the `MediaSession` interface. Rather than creating your own `MediaSession` instance, you access the API using the `navigator.mediaSession` property. For example, to set the current state of the media session to `playing`:
    
    navigator.mediaSession.playbackState = "playing";
    
## Interfaces
`ChapterInformation`
    
Represents the metadata for an individual chapter of a media resource (i.e., a video or audio file).
`MediaMetadata`
    
Allows a web page to provide rich media metadata for display in a platform UI.
`MediaSession`
    
Allows a web page to provide custom behaviors for standard media playback interactions.
## Examples
>
### Setting up action handlers for a music player
The following example shows feature detection for the Media Session API. It then instantiates a metadata object for the session, and adds action handlers for the user control actions:
    
    if ("mediaSession" in navigator) {
      navigator.mediaSession.metadata = new MediaMetadata({
        title: "Unforgettable",
        artist: "Nat King Cole",
        album: "The Ultimate Collection (Remastered)",
        artwork: [
          {
            src: "https://dummyimage.com/96x96",
            sizes: "96x96",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/128x128",
            sizes: "128x128",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/192x192",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/256x256",
            sizes: "256x256",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/384x384",
            sizes: "384x384",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/512x512",
            sizes: "512x512",
            type: "image/png",
          },
        ],
      });
    
      navigator.mediaSession.setActionHandler("play", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("pause", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("stop", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("seekbackward", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("seekforward", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("seekto", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("previoustrack", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("nexttrack", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("skipad", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("togglecamera", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("togglemicrophone", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("hangup", () => {
        /* Code excerpted. */
      });
    }
    
Some user agents disable autoplay for media elements on mobile devices and require a user gesture to start media. The following example adds a `pointerup` event to an on-page play button, which is then used to kick off the media session code:
    
    playButton.addEventListener("pointerup", (event) => {
      const audio = document.querySelector("audio");
    
      // User interacted with the page. Let's play audio!
      audio
        .play()
        .then(() => {
          /* Set up media session controls, as shown above. */
        })
        .catch((error) => {
          console.error(error);
        });
    });
    
### Using action handlers to control a slide presentation
The `"previousslide"` and `"nextslide"` action handlers can be used to handle moving forward and backward through a slide presentation, for example when the user puts their presentation into a Picture-in-Picture window, and presses the browser-supplied controls for navigating through slides.
    
    try {
      navigator.mediaSession.setActionHandler("previousslide", () => {
        log('> User clicked "Previous Slide" icon.');
        if (slideNumber > 1) slideNumber--;
        updateSlide();
      });
    } catch (error) {
      log('Warning! The "previousslide" media session action is not supported.');
    }
    
    try {
      navigator.mediaSession.setActionHandler("nextslide", () => {
        log('> User clicked "Next Slide" icon.');
        slideNumber++;
        updateSlide();
      });
    } catch (error) {
      log('Warning! The "nextslide" media session action is not supported.');
    }
    
See Presenting Slides / Media Session Sample for a working example.
  * Customize media notifications and playback controls with the Media Session API on web.dev (2024)


# GamepadButton
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `GamepadButton` interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device.
A `GamepadButton` object is returned by querying any value of the array returned by the `buttons` property of the `Gamepad` interface.
## Instance properties
`GamepadButton.pressed` Read only
    
A boolean value indicating whether the button is currently pressed (`true`) or unpressed (`false`).
`GamepadButton.touched` Read only
    
A boolean value indicating whether the button is currently touched (`true`) or not touched (`false`).
`GamepadButton.value` Read only
    
A double value used to represent the current state of analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0 —1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.
## Example
The button values in the following example are stored as an array of `GamepadButton` objects. This simple example checks to see if the `GamepadButton.value` of a button is greater than `0`, or if the `GamepadButton.pressed` property indicates the button has been pressed.
    
    function gameLoop() {
      const gp = navigator.getGamepads()[0];
    
      if (gp.buttons[0].value > 0 || gp.buttons[0].pressed) {
        b--;
      } else if (gp.buttons[1].value > 0 || gp.buttons[1].pressed) {
        a++;
      } else if (gp.buttons[2].value > 0 || gp.buttons[2].pressed) {
        b++;
      } else if (gp.buttons[3].value > 0 || gp.buttons[3].pressed) {
        a--;
      }
    
      ball.style.left = `${a * 2}px`; // ball is a UI widget
      ball.style.top = `${b * 2}px`;
    
      requestAnimationFrame(gameLoop);
    }
    
Using the Gamepad API
# CSSStyleRule
The `CSSStyleRule` interface represents a single CSS style rule.
CSSRule  CSSGroupingRule  CSSStyleRule 
## Instance properties
Inherits properties from its ancestors `CSSGroupingRule` and `CSSRule`.
`CSSStyleRule.selectorText`
    
Returns the textual representation of the selector for this rule, e.g., `"h1, h2"`.
`CSSStyleRule.style` Read only
    
Returns the `CSSStyleDeclaration` object for the rule.
`CSSStyleRule.styleMap` Read only
    
Returns a `StylePropertyMap` object which provides access to the rule's property-value pairs.
## Instance methods
Inherits methods from its ancestors `CSSGroupingRule` and `CSSRule`.
## Examples
The CSS includes one style rule. This will be the first `CSSRule` returned by `document.styleSheets[0].cssRules`. `myRules[0]` therefore returns a `CSSStyleRule` object representing the rule defined for `h1`.
    
    h1 {
      color: pink;
    }
    
    
    let myRules = document.styleSheets[0].cssRules;
    console.log(myRules[0]); // a CSSStyleRule representing the h1.
    
# InputEvent
The `InputEvent` interface represents an event notifying the user of editable content changes.
Event  UIEvent  InputEvent 
## Constructor
`InputEvent()`
    
Creates an `InputEvent` object.
## Instance properties
This interface inherits properties from its parents, `UIEvent` and `Event`.
`InputEvent.data` Read only
    
Returns a string with the inserted characters. This may be an empty string if the change doesn't insert text (for example, when deleting characters).
`InputEvent.dataTransfer` Read only
    
Returns a `DataTransfer` object containing information about richtext or plaintext data being added to or removed from editable content.
`InputEvent.inputType` Read only
    
Returns the type of change for editable content such as, for example, inserting, deleting, or formatting text.
`InputEvent.isComposing` Read only
    
Returns a `Boolean` value indicating if the event is fired after `compositionstart` and before `compositionend`.
## Instance methods
This interface inherits methods from its parents, `UIEvent` and `Event`.
`InputEvent.getTargetRanges()`
    
Returns an array of `StaticRange` objects that will be affected by a change to the DOM if the input event is not canceled.
  * `beforeinput` event
  * `input` event


# HTMLBRElement
The `HTMLBRElement` interface represents an HTML line break element (`<br>`). It inherits from `HTMLElement`.
EventTarget  Node  Element  HTMLElement  HTMLBRElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLBRElement.clear` Deprecated
    
A string indicating the flow of text around floating objects.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * HTML element implementing this interface: `<br>`


# WebGLProgram
Note: This feature is available in Web Workers.
The `WebGLProgram` is part of the WebGL API and is a combination of two compiled `WebGLShader`s consisting of a vertex shader and a fragment shader (both written in GLSL).
WebGLObject  WebGLProgram 
To create a `WebGLProgram`, call the GL context's `createProgram()` function. After attaching the shader programs using `attachShader()`, you link them into a usable program. This is shown in the code below.
    
    const program = gl.createProgram();
    
    // Attach pre-existing shaders
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    
    gl.linkProgram(program);
    
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      const info = gl.getProgramInfoLog(program);
      throw new Error(`Could not compile WebGL program. \n\n${info}`);
    }
    
See `WebGLShader` for information on creating the `vertexShader` and `fragmentShader` in the above example.
## Examples
>
### Using the program
The steps to actually do some work with the program involve telling the GPU to use the program, bind the appropriate data and configuration options, and finally draw something to the screen.
    
    // Use the program
    gl.useProgram(program);
    
    // Bind existing attribute data
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.enableVertexAttribArray(attributeLocation);
    gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
    
    // Draw a single triangle
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    
### Deleting the program
If there is an error linking the program or you wish to delete an existing program, then it is as simple as running `WebGLRenderingContext.deleteProgram()`. This frees the memory of the linked program.
    
    gl.deleteProgram(program);
    
  * `WebGLShader`
  * `WebGLRenderingContext.attachShader()`
  * `WebGLRenderingContext.compileShader()`
  * `WebGLRenderingContext.createProgram()`
  * `WebGLRenderingContext.createShader()`
  * `WebGLRenderingContext.deleteProgram()`
  * `WebGLRenderingContext.deleteShader()`
  * `WebGLRenderingContext.detachShader()`
  * `WebGLRenderingContext.getAttachedShaders()`
  * `WebGLRenderingContext.getProgramParameter()`
  * `WebGLRenderingContext.getProgramInfoLog()`
  * `WebGLRenderingContext.getShaderParameter()`
  * `WebGLRenderingContext.getShaderPrecisionFormat()`
  * `WebGLRenderingContext.getShaderInfoLog()`
  * `WebGLRenderingContext.getShaderSource()`
  * `WebGLRenderingContext.isProgram()`
  * `WebGLRenderingContext.isShader()`
  * `WebGLRenderingContext.linkProgram()`
  * `WebGLRenderingContext.shaderSource()`
  * `WebGLRenderingContext.useProgram()`
  * `WebGLRenderingContext.validateProgram()`


# HTMLImageElement
The `HTMLImageElement` interface represents an HTML `<img>` element, providing the properties and methods used to manipulate image elements.
EventTarget  Node  Element  HTMLElement  HTMLImageElement 
## Constructor
`Image()`
    
The `Image()` constructor creates and returns a new `HTMLImageElement` object representing an HTML `<img>` element which is not attached to any DOM tree. It accepts optional width and height parameters. When called without parameters, `new Image()` is equivalent to calling `document.createElement('img')`.
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLImageElement.alt`
    
A string that reflects the `alt` HTML attribute, thus indicating the alternate fallback content to be displayed if the image has not been loaded.
`HTMLImageElement.attributionSrc` Secure context Experimental
    
Gets and sets the `attributionsrc` attribute on an `<img>` element programmatically, reflecting the value of that attribute. `attributionsrc` specifies that you want the browser to send an `Attribution-Reporting-Eligible` header along with the image request. On the server-side this is used to trigger sending an `Attribution-Reporting-Register-Source` or `Attribution-Reporting-Register-Trigger` header in the response, to register an image-based attribution source or attribution trigger, respectively.
`HTMLImageElement.complete` Read only
    
Returns a boolean value that is `true` if the browser has finished fetching the image, whether successful or not. That means this value is also `true` if the image has no `src` value indicating an image to load.
`HTMLImageElement.crossOrigin`
    
A string specifying the CORS setting for this image element. See CORS settings attributes for further details. This may be `null` if CORS is not used.
`HTMLImageElement.currentSrc` Read only
    
Returns a string representing the URL from which the currently displayed image was loaded. This may change as the image is adjusted due to changing conditions, as directed by any media queries which are in place.
`HTMLImageElement.decoding`
    
An optional string representing a hint given to the browser on how it should decode the image. If this value is provided, it must be one of the possible permitted values: `sync` to decode the image synchronously, `async` to decode it asynchronously, or `auto` to indicate no preference (which is the default). Read the `decoding` page for details on the implications of this property's values.
`HTMLImageElement.fetchPriority`
    
An optional string representing a hint given to the browser on how it should prioritize fetching of the image relative to other images. If this value is provided, it must be one of the possible permitted values: `high` to fetch at a high priority, `low` to fetch at a low priority, or `auto` to indicate no preference (which is the default).
`HTMLImageElement.height`
    
An integer value that reflects the `height` HTML attribute, indicating the rendered height of the image in CSS pixels.
`HTMLImageElement.isMap`
    
A boolean value that reflects the `ismap` HTML attribute, indicating that the image is part of a server-side image map. This is different from a client-side image map, specified using an `<img>` element and a corresponding `<map>` which contains `<area>` elements indicating the clickable areas in the image. The image must be contained within an `<a>` element; see the `ismap` page for details.
`HTMLImageElement.loading`
    
A string providing a hint to the browser used to optimize loading the document by determining whether to load the image immediately (`eager`) or on an as-needed basis (`lazy`).
`HTMLImageElement.naturalHeight` Read only
    
Returns an integer value representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows `0`. This is the height the image would be if it were rendered at its natural full size.
`HTMLImageElement.naturalWidth` Read only
    
An integer value representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show `0`. This is the width the image would be if it were rendered at its natural full size.
`HTMLImageElement.referrerPolicy`
    
A string that reflects the `referrerpolicy` HTML attribute, which tells the user agent how to decide which referrer to use in order to fetch the image. Read this article for details on the possible values of this string.
`HTMLImageElement.sizes`
    
A string reflecting the `sizes` HTML attribute. This string specifies a list of comma-separated conditional sizes for the image; that is, for a given viewport size, a particular image size is to be used. Read the documentation on the `sizes` page for details on the format of this string.
`HTMLImageElement.src`
    
A string that reflects the `src` HTML attribute, which contains the full URL of the image including base URI. You can load a different image into the element by changing the URL in the `src` attribute.
`HTMLImageElement.srcset`
    
A string reflecting the `srcset` HTML attribute. This specifies a list of candidate images, separated by commas (`',', U+002C COMMA`). Each candidate image is a URL followed by a space, followed by a specially-formatted string indicating the size of the image. The size may be specified either the width or a size multiple. Read the `srcset` page for specifics on the format of the size substring.
`HTMLImageElement.useMap`
    
A string reflecting the `usemap` HTML attribute, containing the page-local URL of the `<map>` element describing the image map to use. The page-local URL is a pound (hash) symbol (`#`) followed by the ID of the `<map>` element, such as `#my-map-element`. The `<map>` in turn contains `<area>` elements indicating the clickable areas in the image.
`HTMLImageElement.width`
    
An integer value that reflects the `width` HTML attribute, indicating the rendered width of the image in CSS pixels.
`HTMLImageElement.x` Read only
    
An integer indicating the horizontal offset of the left border edge of the image's CSS layout box relative to the origin of the `<html>` element's containing block.
`HTMLImageElement.y` Read only
    
The integer vertical offset of the top border edge of the image's CSS layout box relative to the origin of the `<html>` element's containing block.
## Obsolete properties
`HTMLImageElement.align` Deprecated
    
A string indicating the alignment of the image with respect to the surrounding context. The possible values are `"left"`, `"right"`, `"justify"`, and `"center"`. This is obsolete; you should instead use CSS (such as `text-align`, which works with images despite its name) to specify the alignment.
`HTMLImageElement.border` Deprecated
    
A string which defines the width of the border surrounding the image. This is deprecated; use the CSS `border` property instead.
`HTMLImageElement.hspace` Deprecated
    
An integer value which specifies the amount of space (in pixels) to leave empty on the left and right sides of the image.
`HTMLImageElement.longDesc` Deprecated
    
A string specifying the URL at which a long description of the image's contents may be found. This is used to turn the image into a hyperlink automatically. Modern HTML should instead place an `<img>` inside an `<a>` element defining the hyperlink.
`HTMLImageElement.name` Deprecated
    
A string representing the name of the element.
`HTMLImageElement.vspace` Deprecated
    
An integer value specifying the amount of empty space, in pixels, to leave above and below the image.
## Instance methods
Inherits methods from its parent, `HTMLElement`.
`HTMLImageElement.decode()`
    
Returns a `Promise` that resolves when the image is decoded and it's safe to append the image to the DOM. This prevents rendering of the next frame from having to pause to decode the image, as would happen if an undecoded image were added to the DOM.
## Errors
If an error occurs while trying to load or render the image, and an `onerror` event handler has been configured to handle the `error` event, that event handler will get called. This can happen in a number of situations, including:
  * The `src` attribute is empty or `null`.
  * The specified `src` URL is the same as the URL of the page the user is currently on.
  * The specified image is corrupted in some way that prevents it from being loaded.
  * The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the `<img>` element's attributes.
  * The specified image is in a format not supported by the user agent.


## Example
    
    const img1 = new Image(); // Image constructor
    img1.src = "image1.png";
    img1.alt = "alt";
    document.body.appendChild(img1);
    
    const img2 = document.createElement("img"); // Use DOM HTMLImageElement
    img2.src = "image2.jpg";
    img2.alt = "alt text";
    document.body.appendChild(img2);
    
    // using first image in the document
    alert(document.images[0].src);
    
  * The HTML element implementing this interface: `<img>`


# PaymentResponse
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PaymentResponse` interface of the Payment Request API is returned after a user selects a payment method and approves a payment request.
EventTarget  PaymentResponse 
## Instance properties
`PaymentResponse.details` Read only
    
Returns a JSON-serializable object that provides a payment method specific message used by the merchant to process the transaction and determine successful fund transfer. The contents of the object depend on the payment method being used. Developers need to consult whomever controls the URL for the expected shape of the details object.
`PaymentResponse.methodName` Read only
    
Returns the payment method identifier for the payment method that the user selected, for example, Visa, Mastercard, PayPal, etc.
`PaymentResponse.payerEmail` Read only
    
Returns the email address supplied by the user. This option is only present when the `requestPayerEmail` option is set to `true` in the `options` parameter of the `PaymentRequest()` constructor.
`PaymentResponse.payerName` Read only
    
Returns the name supplied by the user. This option is only present when the `requestPayerName` option is set to true in the `options` parameter of the `PaymentRequest()` constructor.
`PaymentResponse.payerPhone` Read only
    
Returns the phone number supplied by the user. This option is only present when the `requestPayerPhone` option is set to `true` in the `options` parameter of the `PaymentRequest()` constructor.
`PaymentResponse.requestId` Read only
    
Returns the identifier of the `PaymentRequest` that produced the current response. This is the same value supplied in the `PaymentRequest()` constructor by `details.id`.
`PaymentResponse.shippingAddress` Read only
    
Returns the shipping Address supplied by the user. This option is only present when the `requestShipping` option is set to `true` in the `options` parameter of the `PaymentRequest()` constructor.
`PaymentResponse.shippingOption` Read only
    
Returns the ID attribute of the shipping option selected by the user. This option is only present when the `requestShipping` option is set to `true` in the `options` parameter of the `PaymentRequest()` constructor.
## Instance methods
`PaymentResponse.retry()`
    
If something is wrong with the payment response's data (and there is a recoverable error), this method allows a merchant to request that the user retry the payment. The method takes an object as argument, which is used to signal to the user exactly what is wrong with the payment response so they can try to correct any issues.
`PaymentResponse.complete()`
    
Notifies the user agent that the user interaction is over. This causes any remaining user interface to be closed. This method should only be called after the Promise returned by the `PaymentRequest.show()` method.
`PaymentResponse.toJSON()`
    
Returns a JSON object representing this `PaymentResponse` object.
## Events
Listen to this event using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`payerdetailchange`
    
Fired during a retry when the user makes changes to their personal information while filling out a payment request form. Allows the developer to revalidate any requested user data (e.g., the phone number or the email address) if it changes.
# NDEFMessage
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `NDEFMessage` interface of the Web NFC API represents the content of an NDEF message that has been read from or could be written to an NFC tag. An instance is acquired by calling the `NDEFMessage()` constructor or from the `NDEFReadingEvent.message` property, which is passed to the `reading` event.
## Constructor
`NDEFMessage()` Experimental
    
Creates a new `NDEFMessage` object, initialized with the given NDEF records.
## Attributes
`NDEFMessage.records` Read only Experimental
    
Returns the list of NDEF records contained in the message.
# SVGTextContentElement
The `SVGTextContentElement` interface is implemented by elements that support rendering child text content. It is inherited by various text-related interfaces, such as `SVGTextElement`, `SVGTSpanElement`, and `SVGTextPathElement`.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGTextContentElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGraphicsElement`.
`SVGTextContentElement.textLength` Read only
    
An `SVGAnimatedLength` reflecting the `textLength` attribute of the given element.
`SVGTextContentElement.lengthAdjust` Read only
    
An `SVGAnimatedEnumeration` reflecting the `lengthAdjust` attribute of the given element. The numeric type values represent one of the `LENGTHADJUST_*` constant values.
## Instance methods
This interface also inherits methods from its parent, `SVGGraphicsElement`.
`SVGTextContentElement.getNumberOfChars()`
    
Returns a long representing the total number of addressable characters available for rendering within the current element, regardless of whether they will be rendered.
`SVGTextContentElement.getComputedTextLength()`
    
Returns a float representing the computed length for the text within the element.
`SVGTextContentElement.getSubStringLength()`
    
Returns a float representing the computed length of the formatted text advance distance for a substring of text within the element. Note that this method only accounts for the widths of the glyphs in the substring and any extra spacing inserted by the CSS 'letter-spacing' and 'word-spacing' properties. Visual spacing adjustments made by the 'x' attribute is ignored.
`SVGTextContentElement.getStartPositionOfChar()`
    
Returns a `DOMPoint` representing the position of a typographic character after text layout has been performed.
`SVGTextContentElement.getEndPositionOfChar()`
    
Returns a `DOMPoint` representing the trailing position of a typographic character after text layout has been performed.
`SVGTextContentElement.getExtentOfChar()`
    
Returns a `DOMRect` representing the computed tight bounding box of the glyph cell that corresponds to a given typographic character.
`SVGTextContentElement.getRotationOfChar()`
    
Returns a float representing the rotation of typographic character.
`SVGTextContentElement.getCharNumAtPosition()`
    
Returns a long representing the character which caused a text glyph to be rendered at a given position in the coordinate system. Because the relationship between characters and glyphs is not one-to-one, only the first character of the relevant typographic character is returned.
`SVGTextContentElement.selectSubString()` Deprecated
    
Selects text within the element.
## Static properties
`LENGTHADJUST_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`LENGTHADJUST_SPACING` (1)
    
Corresponds to the value `spacing`.
`LENGTHADJUST_SPACINGANDGLYPHS` (2)
    
Corresponds to the value `spacingAndGlyphs`.
# USBIsochronousOutTransferResult
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USBIsochronousOutTransferResult` interface of the WebUSB API provides the result from a call to the `isochronousTransferOut()` method of the `USBDevice` interface. It represents the result from requesting a transfer of data from the USB host to the USB device.
## Constructor
`USBIsochronousOutTransferResult()` Experimental
    
Creates a new `USBIsochronousOutTransferResult` object with the provided `packet` field.
## Instance properties
`USBIsochronousOutTransferResult.packets` Read only Experimental
    
Returns an array of `USBIsochronousOutTransferPacket` objects containing the result of each request to send a packet to the device.
# MessageEvent
Note: This feature is available in Web Workers.
The `MessageEvent` interface represents a message received by a target object.
This is used to represent messages in:
  * Server-sent events (see the `message` event of `EventSource`).
  * Web sockets (see the `message` event of `WebSocket`).
  * Cross-document messaging (see `Window.postMessage()` and the `message` event of `Window`).
  * Channel messaging (see `MessagePort.postMessage()` and the `message` event of `MessagePort`).
  * Cross-worker/document messaging (see the above two entries, but also `Worker.postMessage()`, the `message` event of `Worker`, the `message` event of `ServiceWorkerGlobalScope`, etc.)
  * Broadcast channels (see `BroadcastChannel.postMessage()` and the `message` event of `BroadcastChannel`).
  * WebRTC data channels (see the `message` event of `RTCDataChannel`).


The action triggered by this event is defined in a function set as the event handler for the relevant `message` event.
Event  MessageEvent 
## Constructor
`MessageEvent()`
    
Creates a new `MessageEvent`.
## Instance properties
This interface also inherits properties from its parent, `Event`.
`MessageEvent.data` Read only
    
The data sent by the message emitter.
`MessageEvent.origin` Read only
    
A string representing the origin of the message emitter.
`MessageEvent.lastEventId` Read only
    
A string representing a unique ID for the event.
`MessageEvent.source` Read only
    
A `MessageEventSource` (which can be a WindowProxy, `MessagePort`, or `ServiceWorker` object) representing the message emitter.
`MessageEvent.ports` Read only
    
An array of `MessagePort` objects containing all `MessagePort` objects sent with the message, in order.
## Instance methods
This interface also inherits methods from its parent, `Event`.
`initMessageEvent()` Deprecated
    
Initializes a message event. Do not use this anymore — use the `MessageEvent()` constructor instead.
## Examples
In our Basic shared worker example (run shared worker), we have two HTML pages, each of which uses some JavaScript to perform a calculation. The different scripts are using the same worker file to perform the calculation — they can both access it, even if their pages are running inside different windows.
The following code snippet shows creation of a `SharedWorker` object using the `SharedWorker()` constructor. Both scripts contain this:
    
    const myWorker = new SharedWorker("worker.js");
    
Both scripts then access the worker through a `MessagePort` object created using the `SharedWorker.port` property. If the onmessage event is attached using addEventListener, the port is manually started using its `start()` method:
    
    myWorker.port.start();
    
When the port is started, both scripts post messages to the worker and handle messages sent from it using `port.postMessage()` and `port.onmessage`, respectively:
    
    [first, second].forEach((input) => {
      input.onchange = () => {
        myWorker.port.postMessage([first.value, second.value]);
        console.log("Message posted to worker");
      };
    });
    
    myWorker.port.onmessage = (e) => {
      result1.textContent = e.data;
      console.log("Message received from worker");
    };
    
Inside the worker we use the `onconnect` handler to connect to the same port discussed above. The ports associated with that worker are accessible in the `connect` event's `ports` property — we then use `MessagePort` `start()` method to start the port, and the `onmessage` handler to deal with messages sent from the main threads.
    
    onconnect = (e) => {
      const port = e.ports[0];
    
      port.addEventListener("message", (e) => {
        const workerResult = `Result: ${e.data[0] * e.data[1]}`;
        port.postMessage(workerResult);
      });
    
      port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
    };
    
  * `ExtendableMessageEvent` — similar to this interface but used in interfaces that needs to give more flexibility to authors.


# SVGAnimatedRect
The `SVGAnimatedRect` interface represents an `SVGRect` attribute that can be animated.
## Instance properties
`baseVal`
    
The base value of the given attribute before applying any animations.
`animVal` Read only
    
The current animated value of the given attribute as a read-only `SVGRect`. If the given attribute is not currently being animated, then the `SVGRect` will have the same contents as `baseVal`. The object referenced by `animVal` will always be distinct from the one referenced by `baseVal`, even when the attribute is not animated.
## Instance methods
The `SVGAnimatedRect` interface does not provide any specific methods.
# XMLSerializer
The `XMLSerializer` interface provides the `serializeToString()` method to construct an XML string representing a DOM tree.
Note: The resulting XML string is not guaranteed to be well-formed XML.
## Constructor
`XMLSerializer()`
    
Creates a new `XMLSerializer` object.
## Instance methods
`serializeToString()`
    
Returns the serialized subtree of a string.
## Examples
>
### Serializing XML into a string
This example just serializes an entire document into a string containing XML.
    
    const s = new XMLSerializer();
    const str = s.serializeToString(document);
    saveXML(str);
    
This involves creating a new `XMLSerializer` object, then passing the `Document` to be serialized into `serializeToString()`, which returns the XML equivalent of the document. `saveXML()` represents a function that would then save the serialized string.
### Inserting nodes into a DOM based on XML
This example uses the `Element.insertAdjacentHTML()` method to insert a new DOM `Node` into the body of the `Document`, based on XML created by serializing an `Element` object.
Note: In the real world, you should usually instead call `importNode()` method to import the new node into the DOM, then call one of the following methods to add the node to the DOM tree:
  * The `Element.append()`/`Element.prepend()` and `Document.append()`/`Document.prepend()` methods.
  * The `Element.replaceWith` method (to replace an existing node with the new one)
  * The `Element.insertAdjacentElement()` method.


Because `insertAdjacentHTML()` accepts a string and not a `Node` as its second parameter, `XMLSerializer` is used to first convert the node into a string.
    
    const inp = document.createElement("input");
    const XMLS = new XMLSerializer();
    const inp_xmls = XMLS.serializeToString(inp); // First convert DOM node into a string
    
    // Insert the newly created node into the document's body
    document.body.insertAdjacentHTML("afterbegin", inp_xmls);
    
The code creates a new `<input>` element by calling `Document.createElement()`, then serializes it into XML using `serializeToString()`.
Once that's done, `insertAdjacentHTML()` is used to insert the `<input>` element into the DOM.
  * Parsing and serializing XML
  * `DOMParser`


# SVGDefsElement
The `SVGDefsElement` interface corresponds to the `<defs>` element.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGDefsElement 
## Instance properties
This interface doesn't implement any specific properties, but inherits properties from its parent, `SVGGraphicsElement`.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent, `SVGGraphicsElement`.
# CSSMediaRule
The `CSSMediaRule` interface represents a single CSS `@media` rule.
CSSRule  CSSGroupingRule  CSSConditionRule  CSSMediaRule 
## Instance properties
Inherits properties from its ancestors `CSSConditionRule`, `CSSGroupingRule`, and `CSSRule`.
`CSSMediaRule.media` Read only
    
Returns a `MediaList` representing the intended destination medium for style information.
## Instance methods
No specific methods; inherits methods from its ancestors `CSSConditionRule`, `CSSGroupingRule`, and `CSSRule`.
## Examples
The CSS below includes a media query with one style rule. As this rule lives in the last stylesheet added to the document, it will be the first CSSRule returned by the last stylesheet in the document (`document.styleSheets[document.styleSheets.length-1].cssRules`). `myRules[0]` returns a `CSSMediaRule` object, from which we can get the `mediaText`.
    
    <p id="log"></p>
    
    
    @media (width >= 500px) {
      body {
        color: blue;
      }
    }
    
    
    const log = document.getElementById("log");
    const myRules = document.styleSheets[document.styleSheets.length - 1].cssRules;
    const mediaList = myRules[0]; // a CSSMediaRule representing the media query.
    log.textContent += ` ${mediaList.media.mediaText}`;
    
# CSSKeyframesRule
The `CSSKeyframesRule` interface describes an object representing a complete set of keyframes for a CSS animation. It corresponds to the contents of a whole `@keyframes` at-rule.
CSSRule  CSSKeyframesRule 
## Instance properties
Inherits properties from its ancestor `CSSRule`.
`CSSKeyframesRule.name`
    
Represents the name of the keyframes, used by the `animation-name` property.
`CSSKeyframesRule.cssRules` Read only
    
Returns a `CSSRuleList` of the keyframes in the list.
`CSSKeyframesRule.length` Read only
    
Returns the number of keyframes in the list.
## Instance methods
Inherits methods from its ancestor `CSSRule`.
`CSSKeyframesRule.appendRule()`
    
Inserts a new keyframe rule into the current CSSKeyframesRule. The parameter is a string containing a keyframe in the same format as an entry of a `@keyframes` at-rule. If it contains more than one keyframe rule, a `DOMException` with a `SYNTAX_ERR` is thrown.
`CSSKeyframesRule.deleteRule()`
    
Deletes a keyframe rule from the current CSSKeyframesRule. The parameter is the index of the keyframe to be deleted, expressed as a string resolving as a number between `0%` and `100%`.
`CSSKeyframesRule.findRule()`
    
Returns a keyframe rule corresponding to the given key. The key is a string containing an index of the keyframe to be returned, resolving to a percentage between `0%` and `100%`. If no such keyframe exists, `findRule` returns `null`.
## Example
>
### Using CSSKeyframesRule
The CSS includes a keyframes at-rule. This will be the first `CSSRule` returned by `document.styleSheets[0].cssRules`. `myRules[0]` returns a `CSSKeyframesRule` object.
    
    @keyframes slide-in {
      from {
        transform: translateX(0%);
      }
    
      to {
        transform: translateX(100%);
      }
    }
    
    
    const myRules = document.styleSheets[0].cssRules;
    const keyframes = myRules[0]; // a CSSKeyframesRule
    
### Accessing indexes
`CSSKeyframesRule` can be indexed like an array, and functions similar to its `cssRules` property.
    
    const keyframes = document.styleSheets[0].cssRules[0];
    
    for (let i = 0; i < keyframes.length; i++) {
      console.log(keyframes[i].keyText);
    }
    
    // Output:
    // 0%
    // 100%
    
  * `@keyframes`
  * `CSSKeyFrameRule`


# CustomElementRegistry
The `CustomElementRegistry` interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the `window.customElements` property.
## Instance methods
`CustomElementRegistry.define()`
    
Defines a new custom element.
`CustomElementRegistry.get()`
    
Returns the constructor for the named custom element, or `undefined` if the custom element is not defined.
`CustomElementRegistry.getName()`
    
Returns the name for the already-defined custom element, or `null` if the custom element is not defined.
`CustomElementRegistry.upgrade()`
    
Upgrades a custom element directly, even before it is connected to its shadow root.
`CustomElementRegistry.whenDefined()`
    
Returns an empty `Promise` that resolves when a custom element becomes defined with the given name. If such a custom element is already defined, the returned promise is immediately fulfilled.
## Examples
See the Examples section in our guide to using custom elements.
# EXT_texture_compression_bptc extension
The `EXT_texture_compression_bptc` extension is part of the WebGL API and exposes 4 BPTC compressed texture formats. These compression formats are called BC7 and BC6H in Microsoft's DirectX API.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: Support depends on the system's graphics driver. There is no support on Windows.
This extension is available to both, WebGL1 and WebGL2 contexts.
## Constants
The compressed texture formats are exposed by 4 constants and can be used in two functions: `compressedTexImage2D()` and `compressedTexSubImage2D()`.
`ext.COMPRESSED_RGBA_BPTC_UNORM_EXT`
    
Compresses 8-bit fixed-point data. Each 4x4 block of texels consists of 128 bits of RGBA or image data. See also BC7 format.
`ext.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT`
    
Compresses 8-bit fixed-point data. Each 4x4 block of texels consists of 128 bits of SRGB_ALPHA or image data. See also BC7 format.
`ext.COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT`
    
Compresses high dynamic range signed floating point values. Each 4x4 block of texels consists of 128 bits of RGB data. It only contains RGB data, so the returned alpha value is 1.0. See also BC6H format.
`ext.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT`
    
Compresses high dynamic range unsigned floating point values. Each 4x4 block of texels consists of 128 bits of RGB data. It only contains RGB data, so the returned alpha value is 1.0. See also BC6H format.
## Examples
    
    const ext = gl.getExtension("EXT_texture_compression_bptc");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.compressedTexImage2D(
      gl.TEXTURE_2D,
      0,
      ext.COMPRESSED_RGBA_BPTC_UNORM_EXT,
      128,
      128,
      0,
      textureData,
    );
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.compressedTexImage2D()`
  * `WebGLRenderingContext.compressedTexSubImage2D()`
  * `WebGLRenderingContext.getParameter()`


# CSSPropertyRule
The `CSSPropertyRule` interface of the CSS Properties and Values API represents a single CSS `@property` rule.
CSSRule  CSSPropertyRule 
## Instance properties
Inherits properties from its ancestor `CSSRule`.
`CSSPropertyRule.inherits` Read only
    
Returns the inherit flag of the custom property.
`CSSPropertyRule.initialValue` Read only
    
Returns the initial value of the custom property.
`CSSPropertyRule.name` Read only
    
Returns the name of the custom property.
`CSSPropertyRule.syntax` Read only
    
Returns the literal syntax of the custom property.
## Instance methods
No specific methods; inherits methods from its ancestor `CSSRule`.
## Examples
This stylesheet contains a single `@property` rule. The first `CSSRule` returned will be a `CSSPropertyRule` with the properties and values as defined by the rule in CSS.
    
    @property --property-name {
      syntax: "<color>";
      inherits: false;
      initial-value: #c0ffee;
    }
    
    
    const myRules = document.styleSheets[0].cssRules;
    console.log(myRules[0]); // A CSSPropertyRule
    
# Worker
Note: This feature is available in Web Workers, except for Service Workers.
The `Worker` interface of the Web Workers API represents a background task that can be created via script, which can send messages back to its creator.
Creating a worker is done by calling the `Worker("path/to/worker/script")` constructor.
Workers may themselves spawn new workers, as long as those workers are hosted at the same origin as the parent page.
Note that not all interfaces and functions are available to web workers. See Functions and classes available to Web Workers for details.
EventTarget  Worker 
## Constructors
`Worker()`
    
Creates a dedicated web worker that executes the script at the specified URL. This also works for Blob URLs.
## Instance properties
Inherits properties from its parent, `EventTarget`.
## Instance methods
Inherits methods from its parent, `EventTarget`.
`Worker.postMessage()`
    
Sends a message — consisting of any JavaScript object — to the worker's inner scope.
`Worker.terminate()`
    
Immediately terminates the worker. This does not let worker finish its operations; it is halted at once. `ServiceWorker` instances do not support this method.
## Events
`error`
    
Fires when an error occurs in the worker.
`message`
    
Fires when the worker's parent receives a message from that worker.
`messageerror`
    
Fires when a `Worker` object receives a message that can't be deserialized.
## Example
The following code snippet creates a `Worker` object using the `Worker()` constructor, then uses the worker object:
    
    const myWorker = new Worker("/worker.js");
    const first = document.querySelector("input#number1");
    const second = document.querySelector("input#number2");
    
    first.onchange = () => {
      myWorker.postMessage([first.value, second.value]);
      console.log("Message posted to worker");
    };
    
For a full example, see our Basic dedicated worker example (run dedicated worker).
Support varies for different types of workers. See each worker type's page for specifics.
### Cross-origin worker error behavior
In early versions of the spec, loading a cross-origin worker script threw a `SecurityError`. Nowadays, an `error` event is thrown instead.
  * Using Web Workers
  * Functions and classes available to Web Workers
  * Other kind of workers: `SharedWorker` and Service Worker.
  * `OffscreenCanvas` interface


# TextTrack
The `TextTrack` interface of the WebVTT API represents a text track associated with a media element.
An object of this type owns the list of `VTTCue` objects that will be displayed over the video at various points.
`TextTrack` objects can be added to a `HTMLVideoElement` or `HTMLAudioElement` element using the `HTMLMediaElement.addTextTrack()` method, which has the same effect as adding text tracks declaratively using `<track>` elements inside a `<video>` or `<audio>` element. The `TextTrack` objects are stored in a `TextTrackList`, which can be retrieved using the `HTMLMediaElement.textTracks` property.
EventTarget  TextTrack 
## Instance properties
This interface also inherits properties from `EventTarget`.
`TextTrack.activeCues` Read only
    
A `TextTrackCueList` object listing the currently active set of text track cues. Track cues are active if the current playback position of the media is between the cues' start and end times. Thus, for displayed cues such as captions or subtitles, the active cues are currently being displayed.
`TextTrack.cues` Read only
    
A `TextTrackCueList` which contains all of the track's cues.
`TextTrack.id` Read only
    
A string which identifies the track, if it has one. If it doesn't have an ID, then this value is an empty string (`""`). If the `TextTrack` is associated with a `<track>` element, then the track's ID matches the element's ID.
`TextTrack.inBandMetadataTrackDispatchType` Read only
    
Returns a string which indicates the track's in-band metadata track dispatch type.
`TextTrack.kind` Read only
    
Returns a string indicating what kind of text track the `TextTrack` describes. It must be one of the permitted values.
`TextTrack.label` Read only
    
A human-readable string which contains the text track's label, if one is present; otherwise, this is an empty string (`""`), in which case a custom label may need to be generated by your code using other attributes of the track, if the track's label needs to be exposed to the user.
`TextTrack.language` Read only
    
A string which specifies the text language in which the text track's contents is written. The value must adhere to the format specified in RFC 5646: Tags for Identifying Languages (also known as BCP 47), just like the HTML `lang` attribute. For example, this can be `"en-US"` for United States English or `"pt-BR"` for Brazilian Portuguese.
`TextTrack.mode`
    
A string specifying the track's current mode, which must be one of the permitted values. Changing this property's value changes the track's current mode to match. The default is `disabled`, unless the `<track>` element's `default` boolean attribute is set to `true` — in which case the default mode is `showing`.
`sourceBuffer` Read only
    
The `SourceBuffer` that created the track. Returns null if the track was not created by a `SourceBuffer` or the `SourceBuffer` has been removed from the `MediaSource.sourceBuffers` attribute of its parent media source.
## Instance methods
This interface also inherits methods from `EventTarget`.
Note: The `TextTrackCue` interface is an abstract class used as the parent for other cue interfaces such as `VTTCue`. Therefore, when adding or removing a cue you will be passing in one of the cue types that inherit from `TextTrackCue`.
`TextTrack.addCue()`
    
Adds a cue (specified as a `TextTrackCue` object) to the track's list of cues.
`TextTrack.removeCue()`
    
Removes a cue (specified as a `TextTrackCue` object) from the track's list of cues.
## Events
`cuechange`
    
Fired when cues are entered and exited. A given text cue appears when the cue is entered and disappears when the cue is exited. Also available via the `oncuechange` property.
## Example
The following example adds a new `TextTrack` to a video, then sets it to display using `TextTrack.mode`.
    
    let video = document.querySelector("video");
    let track = video.addTextTrack("captions", "Captions", "en");
    track.mode = "showing";
    
  * WebVTT
  * `TextTrackCueList`
  * `VTTCue`
  * `<track>`
  * `HTMLTrackElement`


# HTMLLinkElement
The `HTMLLinkElement` interface represents reference information for external resources and the relationship of those resources to a document and vice versa (corresponds to `<link>` element; not to be confused with `<a>`, which is represented by `HTMLAnchorElement`). This object inherits all of the properties and methods of the `HTMLElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLLinkElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLLinkElement.as`
    
A string representing the type of content being loaded by the HTML link when `rel="preload"` or `rel="modulepreload"`.
`HTMLLinkElement.blocking`
    
A string indicating that certain operations should be blocked on the fetching of an external resource. It reflects the `blocking` attribute of the `<link>` element.
`HTMLLinkElement.crossOrigin`
    
A string that corresponds to the CORS setting for this link element. See CORS settings attributes for details.
`HTMLLinkElement.disabled`
    
A boolean value which represents whether the link is disabled; currently only used with style sheet links.
`HTMLLinkElement.fetchPriority`
    
An optional string representing a hint given to the browser on how it should prioritize fetching of a preload relative to other resources of the same type. If this value is provided, it must be one of the possible permitted values: `high` to fetch at a higher priority, `low` to fetch at a lower priority, or `auto` to indicate no preference (which is the default).
`HTMLLinkElement.href`
    
A string representing the URI for the target resource.
`HTMLLinkElement.hreflang`
    
A string representing the language code for the linked resource.
`HTMLLinkElement.imageSizes`
    
A string reflecting the `imagesizes` HTML attribute; a list of comma-separated image conditions and sizes.
`HTMLLinkElement.imageSrcset`
    
A string reflecting the `imagesrcset` HTML attribute; a comma-separated list of image candidate strings.
`HTMLLinkElement.integrity`
    
A string that contains inline metadata that a browser can use to verify that a fetched resource has been delivered without unexpected manipulation. It reflects the `integrity` attribute of the `<link>` element.
`HTMLLinkElement.media`
    
A string representing a list of one or more media formats to which the resource applies. It reflects the `media` attribute of the `<link>` element.
`HTMLLinkElement.referrerPolicy`
    
A string that reflects the `referrerpolicy` HTML attribute indicating which referrer to use.
`HTMLLinkElement.rel`
    
A string representing the forward relationship of the linked resource from the document to the resource.
`HTMLLinkElement.relList` Read only
    
A `DOMTokenList` that reflects the `rel` HTML attribute, as a list of tokens.
`HTMLLinkElement.sizes` Read only
    
A `DOMTokenList` that reflects the `sizes` HTML attribute, as a list of tokens.
`HTMLLinkElement.sheet` Read only
    
Returns the `StyleSheet` object associated with the given element, or `null` if there is none.
`HTMLLinkElement.type`
    
A string representing the MIME type of the linked resource.
### Obsolete properties
`HTMLLinkElement.charset` Deprecated
    
A string representing the character encoding for the target resource.
`HTMLLinkElement.rev` Deprecated
    
A string representing the reverse relationship of the linked resource from the resource to the document.
Note: Currently the W3C HTML 5.2 spec states that `rev` is no longer obsolete, whereas the WHATWG living standard still has it labeled obsolete. Until this discrepancy is resolved, you should still assume it is obsolete.
`HTMLLinkElement.target` Deprecated
    
A string representing the name of the target frame to which the resource applies.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<link>`.


# MediaKeySession
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MediaKeySession` interface of the Encrypted Media Extensions API represents a context for message exchange with a content decryption module (CDM).
EventTarget  MediaKeySession 
## Instance properties
`MediaKeySession.closed` Read only
    
Returns a `Promise` signaling when a `MediaKeySession` closes. This promise can only be fulfilled and is never rejected. Closing a session means that licenses and keys associated with it are no longer valid for decrypting media data.
`MediaKeySession.expiration` Read only
    
The time after which the keys in the current session can no longer be used to decrypt media data, or `NaN` if no such time exists. This value is determined by the CDM and measured in milliseconds since January 1, 1970, UTC. This value may change during a session lifetime, such as when an action triggers the start of a window.
`MediaKeySession.keyStatuses` Read only
    
Contains a reference to a read-only `MediaKeyStatusMap` of the current session's keys and their statuses.
`MediaKeySession.sessionId` Read only
    
Contains a unique string generated by the CDM for the current media object and its associated keys or licenses.
### Events
`keystatuseschange`
    
Fires when there has been a change in the keys in a session or their statuses.
`message`
    
Fires when the content decryption module has generated a message for the session.
## Instance methods
`MediaKeySession.close()`
    
Returns a `Promise` after notifying the current media session is no longer needed and that the CDM should release any resources associated with this object and close it.
`MediaKeySession.generateRequest()`
    
Returns a `Promise` after generating a license request based on initialization data.
`MediaKeySession.load()`
    
Returns a `Promise` that resolves to a boolean value after loading data for a specified session object.
`MediaKeySession.remove()`
    
Returns a `Promise` after removing any session data associated with the current object.
`MediaKeySession.update()`
    
Returns a `Promise` after loading messages and licenses to the CDM.
## Examples
    
    // TBD
    
# RTCPeerConnectionIceErrorEvent
The `RTCPeerConnectionIceErrorEvent` interface—based upon the `Event` interface—provides details pertaining to an ICE error announced by sending an `icecandidateerror` event to the `RTCPeerConnection` object.
Event  RTCPeerConnectionIceErrorEvent 
## Constructor
`RTCPeerConnectionIceErrorEvent()`
    
Creates and returns a new `RTCPeerConnectionIceErrorEvent` object, with its `type` and other properties initialized as specified in the parameters. You will not normally create an object of this type yourself.
## Instance properties
The `RTCPeerConnectionIceErrorEvent` interface includes the properties found on the `Event` interface, as well as the following properties:
`address` Read only
    
A string providing the local IP address used to communicate with the STUN or TURN server being used to negotiate the connection, or `null` if the local IP address has not yet been exposed as part of a local ICE candidate.
`errorCode` Read only
    
An unsigned integer value stating the numeric STUN error code returned by the STUN or TURN server. If no host candidate can reach the server, this property is set to the number 701, which is outside the range of valid STUN error codes. The 701 error is fired only once per server URL, and only while the `iceGatheringState` is `gathering`.
`errorText` Read only
    
A string containing the STUN reason text returned by the STUN or TURN server. If communication with the STUN or TURN server couldn't be established at all, this string will be a browser-specific string explaining the error.
`port` Read only
    
An unsigned integer value giving the port number over which communication with the STUN or TURN server is taking place, using the IP address given in `address`. `null` if the connection hasn't been established (that is, if `address` is `null`).
`url` Read only
    
A string indicating the URL of the STUN or TURN server with which the error occurred.
## Instance methods
`RTCPeerConnectionIceErrorEvent` has no methods other than any provided by the parent interface, `Event`.
## Examples
TBD
# CanvasPattern
Note: This feature is available in Web Workers.
The `CanvasPattern` interface represents an opaque object describing a pattern, based on an image, a canvas, or a video, created by the `CanvasRenderingContext2D.createPattern()` method.
It can be used as a `fillStyle` or `strokeStyle`.
## Instance properties
As an opaque object, this has no exposed property.
## Instance methods
There are no inherited method.
`CanvasPattern.setTransform()`
    
Applies a `DOMMatrix` representing a linear transform to the pattern.
  * `CanvasRenderingContext2D.createPattern()`
  * The `<canvas>` element and its associated interface, `HTMLCanvasElement`


# NodeList
`NodeList` objects are collections of nodes, usually returned by properties such as `Node.childNodes` and methods such as `document.querySelectorAll()`.
This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs represent list structures using types based on JavaScript arrays, thus making many array methods available, and at the same time imposing additional semantics on their usage (such as making their items read-only).
These historical reasons do not mean that you as a developer should avoid `NodeList`. You don't create `NodeList` objects yourself, but you get them from APIs such as `Document.querySelectorAll()`, and these APIs are not deprecated. However, be careful of the semantic differences from a real array.
Although `NodeList` is not an `Array`, it is possible to iterate over it with `forEach()`. It can also be converted to a real `Array` using `Array.from()`.
## Live vs. Static NodeLists
Although they are both considered `NodeList` objects, there are 2 varieties of NodeList: live and static.
In most cases, the `NodeList` is live, which means that changes in the DOM automatically update the collection.
For example, `Node.childNodes` is live:
    
    const parent = document.getElementById("parent");
    let childNodes = parent.childNodes;
    console.log(childNodes.length); // let's assume "2"
    parent.appendChild(document.createElement("div"));
    console.log(childNodes.length); // outputs "3"
    
In other cases, the `NodeList` is static, where any changes in the DOM do not affect the content of the collection. The ubiquitous `document.querySelectorAll()` method is the only API that returns a static `NodeList`.
It's good to keep this distinction in mind when you choose how to iterate over the items in the `NodeList`, and whether you should cache the list's `length`.
## Instance properties
`NodeList.length` Read only
    
The number of nodes in the `NodeList`.
## Instance methods
`NodeList.item()`
    
Returns an item in the list by its index, or `null` if the index is out-of-bounds.
An alternative to accessing `nodeList[i]` (which instead returns `undefined` when `i` is out-of-bounds). This is mostly useful for non-JavaScript DOM implementations.
`NodeList.entries()`
    
Returns an `iterator`, allowing code to go through all key/value pairs contained in the collection. (In this case, the keys are integers starting from `0` and the values are nodes.)
`NodeList.forEach()`
    
Executes a provided function once per `NodeList` element, passing the element as an argument to the function.
`NodeList.keys()`
    
Returns an `iterator`, allowing code to go through all the keys of the key/value pairs contained in the collection. (In this case, the keys are integers starting from `0`.)
`NodeList.values()`
    
Returns an `iterator` allowing code to go through all values (nodes) of the key/value pairs contained in the collection.
## Example
It's possible to loop over the items in a `NodeList` using a for loop:
    
    for (let i = 0; i < myNodeList.length; i++) {
      let item = myNodeList[i];
    }
    
Don't use `for...in` to enumerate the items in `NodeList`s, since they will also enumerate its `length` and `item` properties and cause errors if your script assumes it only has to deal with `element` objects. Also, `for...in` is not guaranteed to visit the properties in any particular order.
`for...of` loops over `NodeList` objects correctly:
    
    const list = document.querySelectorAll("input[type=checkbox]");
    for (const checkbox of list) {
      checkbox.checked = true;
    }
    
Browsers also support the iterator method (`forEach()`) as well as `entries()`, `values()`, and `keys()`.
# SVGTextPositioningElement
The `SVGTextPositioningElement` interface is implemented by elements that support attributes that position individual text glyphs. It is inherited by `SVGTextElement` and `SVGTSpanElement`.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGTextContentElement  SVGTextPositioningElement 
## Instance properties
This interface also inherits properties from its parent, `SVGTextContentElement`.
`SVGTextPositioningElement.x` Read only
    
Returns an `SVGAnimatedLengthList` reflecting the `x` attribute of the given element.
`SVGTextPositioningElement.y` Read only
    
Returns an `SVGAnimatedLengthList` reflecting the `y` attribute of the given element.
`SVGTextPositioningElement.dx` Read only
    
Returns an `SVGAnimatedLengthList` reflecting the `dx` attribute of the given element.
`SVGTextPositioningElement.dy` Read only
    
Returns an `SVGAnimatedLengthList` reflecting the `dy` attribute of the given element.
`SVGTextPositioningElement.rotate` Read only
    
Returns an `SVGAnimatedNumberList` reflecting the `rotate` attribute of the given element.
## Instance methods
This interface doesn't provide any specific methods, but inherits methods from its parent, `SVGTextContentElement`.
# WebTransportError
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `WebTransportError` interface of the WebTransport API represents an error related to the API, which can arise from server errors, network connection problems, or client-initiated abort operations (for example, arising from a `WritableStream.abort()` call).
DOMException  WebTransportError 
## Constructor
`WebTransportError()`
    
Creates a new `WebTransportError` object instance.
## Instance properties
Inherits properties from its parent, `DOMException`.
`source` Read only
    
Returns an enumerated value indicating the source of the error—can be either `stream` or `session`.
`streamErrorCode` Read only
    
Returns a number in the range 0-255 indicating the application protocol error code for this error, or `null` if one is not available.
## Examples
    
    const url = "not-a-url";
    
    async function initTransport(url) {
      try {
        // Initialize transport connection
        const transport = new WebTransport(url);
    
        // The connection can be used once ready fulfills
        await transport.ready;
    
        // …
      } catch (error) {
        const msg = `Transport initialization failed.
                     Reason: ${error.message}.
                     Source: ${error.source}.
                     Error code: ${error.streamErrorCode}.`;
        console.log(msg);
      }
    }
    
  * Using WebTransport
  * WebSockets API
  * Streams API
  * WebTransport over HTTP/3


# CharacterData
The `CharacterData` abstract interface represents a `Node` object that contains characters. This is an abstract interface, meaning there aren't any objects of type `CharacterData`: it is implemented by other interfaces like `Text`, `Comment`, `CDATASection`, or `ProcessingInstruction`, which aren't abstract.
EventTarget  Node  CharacterData 
## Instance properties
This interface also inherits properties from its parents, `Node` and `EventTarget`.
`CharacterData.data`
    
A string representing the textual data contained in this object.
`CharacterData.length` Read only
    
Returns a number representing the size of the string contained in the object.
`CharacterData.nextElementSibling` Read only
    
Returns the first `Element` that follows this node, and is a sibling.
`CharacterData.previousElementSibling` Read only
    
Returns the first `Element` that precedes this node, and is a sibling.
## Instance methods
This interface also inherits methods from its parents, `Node` and `EventTarget`.
`CharacterData.after()`
    
Inserts a set of `Node` objects or strings in the children list of the `CharacterData`'s parent, just after the `CharacterData` object.
`CharacterData.appendData()`
    
Appends the given string to the `CharacterData.data` string; when this method returns, `data` contains the concatenated string.
`CharacterData.before()`
    
Inserts a set of `Node` objects or strings in the children list of the `CharacterData`'s parent, just before the `CharacterData` object.
`CharacterData.deleteData()`
    
Removes the specified amount of characters, starting at the specified offset, from the `CharacterData.data` string; when this method returns, `data` contains the shortened string.
`CharacterData.insertData()`
    
Inserts the specified characters, at the specified offset, in the `CharacterData.data` string; when this method returns, `data` contains the modified string.
`CharacterData.remove()`
    
Removes the object from its parent children list.
`CharacterData.replaceData()`
    
Replaces the specified amount of characters, starting at the specified offset, with the specified string; when this method returns, `data` contains the modified string.
`CharacterData.replaceWith()`
    
Replaces the characters in the children list of its parent with a set of `Node` objects or strings.
`CharacterData.substringData()`
    
Returns a string containing the part of `CharacterData.data` of the specified length and starting at the specified offset.
  * The DOM overview page.
  * The concrete interfaces implemented it: `Text`, `CDATASection`, `ProcessingInstruction`, and `Comment`.


# Animation
The `Animation` interface of the Web Animations API represents a single animation player and provides playback controls and a timeline for an animation node or source.
EventTarget  Animation 
## Constructor
`Animation()`
    
Creates a new `Animation` object instance.
## Instance properties
`Animation.currentTime`
    
The current time value of the animation in milliseconds, whether running or paused. If the animation lacks a `timeline`, is inactive or hasn't been played yet, its value is `null`.
`Animation.effect`
    
Gets and sets the `AnimationEffect` associated with this animation. This will usually be a `KeyframeEffect` object.
`Animation.finished` Read only
    
Returns the current finished Promise for this animation.
`Animation.id`
    
Gets and sets the `String` used to identify the animation.
`Animation.overallProgress` Read only
    
Returns a number between `0` and `1` indicating the animation's overall progress towards its finished state.
`Animation.pending` Read only
    
Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
`Animation.playState` Read only
    
Returns an enumerated value describing the playback state of an animation.
`Animation.playbackRate`
    
Gets or sets the playback rate of the animation.
`Animation.ready` Read only
    
Returns the current ready Promise for this animation.
`Animation.replaceState` Read only
    
Indicates whether the animation is active, has been automatically removed after being replaced by another animation, or has been explicitly persisted by a call to `Animation.persist()`.
`Animation.startTime`
    
Gets or sets the scheduled time when an animation's playback should begin.
`Animation.timeline`
    
Gets or sets the `timeline` associated with this animation.
## Instance methods
`Animation.cancel()`
    
Clears all `keyframeEffects` caused by this animation and aborts its playback.
`Animation.commitStyles()`
    
Commits the current styling state of an animation to the element being animated, even after that animation has been removed. It will cause the current styling state to be written to the element being animated, in the form of properties inside a `style` attribute.
`Animation.finish()`
    
Seeks either end of an animation, depending on whether the animation is playing or reversing.
`Animation.pause()`
    
Suspends playing of an animation.
`Animation.persist()`
    
Explicitly persists an animation, preventing it from being automatically removed when another animation replaces it.
`Animation.play()`
    
Starts or resumes playing of an animation, or begins the animation again if it previously finished.
`Animation.reverse()`
    
Reverses playback direction, stopping at the start of the animation. If the animation is finished or unplayed, it will play from end to beginning.
`Animation.updatePlaybackRate()`
    
Sets the speed of an animation after first synchronizing its playback position.
## Events
`cancel`
    
Fires when the `Animation.cancel()` method is called or when the animation enters the `"idle"` play state from another state.
`finish`
    
Fires when the animation finishes playing.
`remove`
    
Fires when the animation is automatically removed by the browser.
## Accessibility concerns
Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine, and Scotopic sensitivity.
Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query (or equivalent user agent client hint `Sec-CH-Prefers-Reduced-Motion`) to create a complimentary experience for users who have expressed a preference for no animated experiences.
  * Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
  * An Introduction to the Reduced Motion Media Query | CSS-Tricks
  * Responsive Design for Motion | WebKit
  * MDN Understanding WCAG, Guideline 2.2 explanations
  * Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0


  * Web Animations API


# WindowSharedStorage
The `WindowSharedStorage` interface of the Shared Storage API represents the shared storage for a particular origin within a standard browsing context.
`WindowSharedStorage` is accessed via `Window.sharedStorage`.
## Instance properties
`worklet` Experimental
    
Contains the `SharedStorageWorklet` instance representing the shared storage worklet for the current origin. `SharedStorageWorklet` includes the `addModule()` method, which is used to add a module to the shared storage worklet.
## Instance methods
`WindowSharedStorage` inherits properties from its parent interface, `SharedStorage`.
`run()` Experimental
    
Executes a Run output gate operation that has been registered in a module added to the `SharedStorageWorklet` of the current origin.
`selectURL()` Experimental
    
Executes a URL Selection output gate operation that has been registered in a module added to the `SharedStorageWorklet` of the current origin.
## Examples
    
    // Randomly assigns a user to a group 0 or 1
    function getExperimentGroup() {
      return Math.round(Math.random());
    }
    
    async function injectContent() {
      // Add the module to the shared storage worklet
      await window.sharedStorage.worklet.addModule("ab-testing-worklet.js");
    
      // Assign user to a random group (0 or 1) and store it in shared storage
      window.sharedStorage.set("ab-testing-group", getExperimentGroup(), {
        ignoreIfPresent: true,
      });
    
      // Run the URL selection operation
      const fencedFrameConfig = await window.sharedStorage.selectURL(
        "ab-testing",
        [
          { url: `https://your-server.example/content/default-content.html` },
          { url: `https://your-server.example/content/experiment-content-a.html` },
        ],
        {
          resolveToConfig: true,
        },
      );
    
      // Render the chosen URL into a fenced frame
      document.getElementById("content-slot").config = fencedFrameConfig;
    }
    
    injectContent();
    
See the Shared Storage API landing page for a walkthrough of this example and links to other examples.
This feature does not appear to be defined in any specification.>
  * Shared Storage API


# BluetoothCharacteristicProperties
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `BluetoothCharacteristicProperties` interface of the Web Bluetooth API provides the operations that are valid on the given `BluetoothRemoteGATTCharacteristic`.
This interface is returned by calling `BluetoothRemoteGATTCharacteristic.properties`.
## Instance properties
`authenticatedSignedWrites` Read only Experimental
    
Returns a `boolean` that is `true` if signed writing to the characteristic value is permitted.
`broadcast` Read only Experimental
    
Returns a `boolean` that is `true` if the broadcast of the characteristic value is permitted using the Server Characteristic Configuration Descriptor.
`indicate` Read only Experimental
    
Returns a `boolean` that is `true` if indications of the characteristic value with acknowledgement is permitted.
`notify` Read only Experimental
    
Returns a `boolean` that is `true` if notifications of the characteristic value without acknowledgement is permitted.
`read` Read only Experimental
    
Returns a `boolean` that is `true` if the reading of the characteristic value is permitted.
`reliableWrite` Read only Experimental
    
Returns a `boolean` that is `true` if reliable writes to the characteristic is permitted.
`writableAuxiliaries` Read only Experimental
    
Returns a `boolean` that is `true` if reliable writes to the characteristic descriptor is permitted.
`write` Read only Experimental
    
Returns a `boolean` that is `true` if the writing to the characteristic with response is permitted.
`writeWithoutResponse` Read only Experimental
    
Returns a `boolean` that is `true` if the writing to the characteristic without response is permitted.
## Examples
The following example shows how tell if a GATT characteristic supports value change notifications.
    
    let device = await navigator.bluetooth.requestDevice({
      filters: [{ services: ["heart_rate"] }],
    });
    let gatt = await device.gatt.connect();
    let service = await gatt.getPrimaryService("heart_rate");
    let characteristic = await service.getCharacteristic("heart_rate_measurement");
    if (characteristic.properties.notify) {
      characteristic.addEventListener(
        "characteristicvaluechanged",
        async (event) => {
          console.log(`Received heart rate measurement: ${event.target.value}`);
        },
      );
      await characteristic.startNotifications();
    }
    
# IDBDatabase
Note: This feature is available in Web Workers.
The `IDBDatabase` interface of the IndexedDB API provides a connection to a database; you can use an `IDBDatabase` object to open a transaction on your database then create, manipulate, and delete objects (data) in that database. The interface provides the only way to get and manage versions of the database.
Note: Everything you do in IndexedDB always happens in the context of a transaction, representing interactions with data in the database. All objects in IndexedDB — including object stores, indexes, and cursors — are tied to a particular transaction. Thus, you cannot execute commands, access data, or open anything outside of a transaction.
EventTarget  IDBDatabase 
## Instance properties
`IDBDatabase.name` Read only
    
A string that contains the name of the connected database.
`IDBDatabase.version` Read only
    
A 64-bit integer that contains the version of the connected database. When a database is first created, this attribute is an empty string.
`IDBDatabase.objectStoreNames` Read only
    
A `DOMStringList` that contains a list of the names of the object stores currently in the connected database.
## Instance methods
Inherits from: EventTarget
`IDBDatabase.close()`
    
Returns immediately and closes the connection to a database in a separate thread.
`IDBDatabase.createObjectStore()`
    
Creates and returns a new object store or index.
`IDBDatabase.deleteObjectStore()`
    
Destroys the object store with the given name in the connected database, along with any indexes that reference it.
`IDBDatabase.transaction()`
    
Immediately returns a transaction object (`IDBTransaction`) containing the `IDBTransaction.objectStore` method, which you can use to access your object store. Runs in a separate thread.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`close`
    
An event fired when the database connection is unexpectedly closed.
`versionchange`
    
An event fired when a database structure change was requested.
The following events are available to `IDBDatabase` via event bubbling from `IDBTransaction`:
`IDBTransaction` `abort`
    
An event fired when a transaction is aborted.
`IDBTransaction` `error`
    
An event fired when a request returns an error and the event bubbles up to the connection object.
## Example
In the following code snippet, we open a database asynchronously (`IDBFactory`), handle success and error cases, and create a new object store in the case that an upgrade is needed (`IDBDatabase`). For a complete working example, see our To-do Notifications app (view example live).
    
    // Let us open our database
    const DBOpenRequest = window.indexedDB.open("toDoList", 4);
    
    // these two event handlers act on the IDBDatabase object,
    // when the database is opened successfully, or not
    DBOpenRequest.onerror = (event) => {
      note.appendChild(document.createElement("li")).textContent =
        "Error loading database.";
    };
    
    DBOpenRequest.onsuccess = (event) => {
      node.appendChild(document.createElement("li")).textContent =
        "Database initialized.";
    
      // store the result of opening the database in the db
      // variable. This is used a lot later on
      db = DBOpenRequest.result;
    
      // Run the displayData() function to populate the task
      // list with all the to-do list data already in the IDB
      displayData();
    };
    
    // This event handles the event whereby a new version of
    // the database needs to be created Either one has not
    // been created before, or a new version number has been
    // submitted via the window.indexedDB.open line above
    
    DBOpenRequest.onupgradeneeded = (event) => {
      const db = event.target.result;
    
      db.onerror = (event) => {
        note.appendChild(document.createElement("li")).textContent =
          "Error loading database.";
      };
    
      // Create an objectStore for this database using
      // IDBDatabase.createObjectStore
    
      const objectStore = db.createObjectStore("toDoList", {
        keyPath: "taskTitle",
      });
    
      // define what data items the objectStore will contain
    
      objectStore.createIndex("hours", "hours", { unique: false });
      objectStore.createIndex("minutes", "minutes", { unique: false });
      objectStore.createIndex("day", "day", { unique: false });
      objectStore.createIndex("month", "month", { unique: false });
      objectStore.createIndex("year", "year", { unique: false });
    
      objectStore.createIndex("notified", "notified", { unique: false });
    
      note.appendChild(document.createElement("li")).textContent =
        "Object store created.";
    };
    
This next line opens up a transaction on the Database, then opens an object store that we can then manipulate the data inside of.
    
    const objectStore = db
      .transaction("toDoList", "readwrite")
      .objectStore("toDoList");
    
  * Using IndexedDB
  * Using transactions: `IDBTransaction`
  * Setting a range of keys: `IDBKeyRange`
  * Retrieving and making changes to your data: `IDBObjectStore`
  * Using cursors: `IDBCursor`
  * Reference example: To-do Notifications (View the example live).


# Force Touch events
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Force Touch Events are a proprietary, Apple-specific feature which makes possible (where supported by the input hardware) new interactions based on how hard the user clicks or presses down on the touchscreen or trackpad.
## Events
`webkitmouseforcewillbegin` Non-standard
    
This event is fired before the `mousedown` event. Its main use is that it can be default-prevented.
`webkitmouseforcedown` Non-standard
    
This event is fired after the `mousedown` event as soon as sufficient pressure has been applied for it to qualify as a "force click".
`webkitmouseforceup` Non-standard
    
This event is fired after the `webkitmouseforcedown` event as soon as the pressure has been reduced sufficiently to end the "force click".
`webkitmouseforcechanged` Non-standard
    
This event is fired each time the amount of pressure changes. This event first fires after the `mousedown` event and stops firing before the `mouseup` event.
## Event properties
The following property is known to be available on the `webkitmouseforcewillbegin`, `mousedown`, `webkitmouseforcechanged`, `webkitmouseforcedown`, `webkitmouseforceup`, `mousemove`, and `mouseup` event objects:
`MouseEvent.webkitForce` Non-standard Read only
    
The amount of pressure currently being applied to the trackpad/touchscreen.
## Constants
These constants are useful for determining the relative intensity of the pressure indicated by `MouseEvent.webkitForce`:
`MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN` Non-standard Read only
    
Minimum force necessary for a normal click.
`MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN` Non-standard Read only
    
Minimum force necessary for a force click.
Not part of any specification. Apple has a description at the Mac Developer Library.
# IdentityCredentialError
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `IdentityCredentialError` interface of the FedCM API describes an authentication error indicating that the user agent did not receive an identity assertion after the user has requested to use a federated account. This can happen if the client is unauthorized or if the server is temporarily unavailable, for example.
Browsers can use this error type to show the error message in the user interface.
DOMException  IdentityCredentialError 
## Constructor
`IdentityCredentialError()` Experimental
    
Creates a new `IdentityCredentialError` object instance.
## Instance properties
In addition to the properties below, `IdentityCredentialError` inherits properties from its parent, `DOMException`.
`error` Experimental Read only
    
A string. This can be either one of the values listed in the OAuth 2.0 specified error list or an arbitrary string.
`url` Experimental Read only
    
A URL pointing to human-readable information about the error to display to users, such as how to fix the error or contact customer service.
## Examples
    
    try {
      const cred = await navigator.credentials.get({
        identity: {
          providers: [
            {
              configURL: "https://idp.example/manifest.json",
              clientId: "1234",
            },
          ],
        },
      });
    } catch (e) {
      const error = e.error;
      const url = e.url;
    }
    
  * `CredentialsContainer.get()`
  * ID assertion error responses


# Idle Detection API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Dedicated Web Workers.
The Idle Detection API provides a means to detect the user's idle status, active, idle, and locked, specifically, and to be notified of changes to idle status without polling from a script.
## Concepts and Usage
Native applications and browser extensions use idle detection base user experiences on when a user is interacting with a device. For example, chat applications can show other users of an application whether someone is available. Other applications might choose to show notifications only when a user is interacting with the app. A web application could use this API for similar use cases. Additionally, a progressive web app could use idle detection to trigger a service worker update when the app isn't being used.
## Interfaces
`IdleDetector` Experimental
    
Provides methods and events for detecting user activity on a device or screen.
## Examples
The following example shows creating a detector and logging changes to the user's idle state. A button is used to get the necessary user activation before requesting permission.
    
    const controller = new AbortController();
    const signal = controller.signal;
    
    startButton.addEventListener("click", async () => {
      if ((await IdleDetector.requestPermission()) !== "granted") {
        console.error("Idle detection permission denied.");
        return;
      }
    
      try {
        const idleDetector = new IdleDetector();
        idleDetector.addEventListener("change", () => {
          const userState = idleDetector.userState;
          const screenState = idleDetector.screenState;
          console.log(`Idle change: ${userState}, ${screenState}.`);
        });
    
        await idleDetector.start({
          threshold: 60_000,
          signal,
        });
        console.log("IdleDetector is active.");
      } catch (err) {
        // Deal with initialization errors like permission denied,
        // running outside of top-level frame, etc.
        console.error(err.name, err.message);
      }
    });
    
    stopButton.addEventListener("click", () => {
      controller.abort();
      console.log("IdleDetector is stopped.");
    });
    
# DocumentPictureInPictureEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `DocumentPictureInPictureEvent` interface of the Document Picture-in-Picture API is the event object for the `enter` event, which fires when the Picture-in-Picture window is opened.
Event  DocumentPictureInPictureEvent 
## Constructor
`DocumentPictureInPictureEvent()` Experimental
    
Creates a new `DocumentPictureInPictureEvent` object instance.
## Instance properties
Inherits properties from its parent, `Event`.
`window` Read only Experimental
    
Returns a `Window` instance representing the browsing context inside the `DocumentPictureInPicture` window the event was fired on.
## Instance methods
Inherits methods from its parent, `Event`.
## Examples
    
    documentPictureInPicture.addEventListener("enter", (event) => {
      const pipWindow = event.window;
      console.log("Video player has entered the pip window");
    
      const pipMuteButton = pipWindow.document.createElement("button");
      pipMuteButton.textContent = "Mute";
      pipMuteButton.addEventListener("click", () => {
        const pipVideo = pipWindow.document.querySelector("#video");
        if (!pipVideo.muted) {
          pipVideo.muted = true;
          pipMuteButton.textContent = "Unmute";
        } else {
          pipVideo.muted = false;
          pipMuteButton.textContent = "Mute";
        }
      });
    
      pipWindow.document.body.append(pipMuteButton);
    });
    
  * Document Picture-in-Picture API
  * Using the Document Picture-in-Picture API


# SharedStorageOperation
The `SharedStorageOperation` interface of the Shared Storage API represents the base class for all output gate operation types.
The output gate types are detailed below:
Name Description Defined by Invoked by  
URL Selection Used to select a URL to display to the user based on shared storage data. `SharedStorageSelectURLOperation` `selectURL()`  
Run A generic way to process some shared storage data. Used, for example, by the Private Aggregation API to process shared storage data and generate aggregated reports.  `SharedStorageRunOperation` `run()`  
## Examples
>
### Defining individual operations
Many shared storage worklet module scripts only define and register a single operation; you can see examples on the `SharedStorageSelectURLOperation` and `SharedStorageRunOperation` pages.
### Defining multiple operations
In more advanced cases, it is possible to define and register multiple operations in the same shared storage worklet module script with different names. In the following worklet module script, we define a URL Selection operation called `SelectURLOperation` that selects a URL for A/B testing, and a Run operation called `ExperimentGroupReportingOperation`, which runs a histogram report based on the user's A/B testing group:
    
    // ab-testing-worklet.js
    
    class SelectURLOperation {
      async run(urls, data) {
        // Read the user's group from shared storage
        const experimentGroup = await sharedStorage.get("ab-testing-group");
    
        // Log to console for the demo
        console.log(`urls = ${JSON.stringify(urls)}`);
        console.log(`data = ${JSON.stringify(data)}`);
        console.log(`ab-testing-group in shared storage is ${experimentGroup}`);
    
        // Return the index of the group
        return data.indexOf(experimentGroup);
      }
    }
    
    function getBucketForTestingGroup(testingGroup) {
      switch (testingGroup) {
        case "control":
          return 0;
        case "experiment-a":
          return 1;
        case "experiment-b":
          return 2;
      }
    }
    
    class ExperimentGroupReportingOperation {
      async run() {
        const experimentGroup = await sharedStorage.get("ab-testing-group");
    
        const bucket = BigInt(getBucketForTestingGroup(experimentGroup));
        privateAggregation.contributeToHistogram({ bucket, value: 1 });
      }
    }
    
    // Register the operations
    register("ab-testing", SelectURLOperation);
    register("experiment-group-reporting", ExperimentGroupReportingOperation);
    
In the main browsing context, these operations are invoked by `selectURL()` and `run()`, respectively. The operations to invoke via these methods are selected using the names they were registered with, and they are also required to conform to the structures defined by the `SharedStorageSelectURLOperation` and `SharedStorageRunOperation` classes and their `run()` methods.
    
    // For demo purposes. The hostname is used to determine the usage of
    // development localhost URL vs production URL
    const contentProducerUrl = window.location.host;
    
    // Map the experiment groups to the URLs
    const EXPERIMENT_MAP = [
      {
        group: "control",
        url: `https://${contentProducerUrl}/ads/default-ad.html`,
      },
      {
        group: "experiment-a",
        url: `https://${contentProducerUrl}/ads/experiment-ad-a.html`,
      },
      {
        group: "experiment-b",
        url: `https://${contentProducerUrl}/ads/experiment-ad-b.html`,
      },
    ];
    
    // Choose a random group for the initial experiment
    function getRandomExperiment() {
      const randomIndex = Math.floor(Math.random() * EXPERIMENT_MAP.length);
      return EXPERIMENT_MAP[randomIndex].group;
    }
    
    async function injectAd() {
      // Load the worklet module
      await window.sharedStorage.worklet.addModule("ab-testing-worklet.js");
    
      // Set the initial value in the storage to a random experiment group
      window.sharedStorage.set("ab-testing-group", getRandomExperiment(), {
        ignoreIfPresent: true,
      });
    
      const urls = EXPERIMENT_MAP.map(({ url }) => ({ url }));
      const groups = EXPERIMENT_MAP.map(({ group }) => group);
    
      // Resolve the selectURL call to a fenced frame config only when it exists on the page
      const resolveToConfig = typeof window.FencedFrameConfig !== "undefined";
    
      // Run the URL selection operation to select an ad based on the experiment group in shared storage
      const selectedUrl = await window.sharedStorage.selectURL("ab-testing", urls, {
        data: groups,
        resolveToConfig,
        keepAlive: true,
      });
    
      const adSlot = document.getElementById("ad-slot");
    
      if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
        adSlot.config = selectedUrl;
      } else {
        adSlot.src = selectedUrl;
      }
    
      // Run the reporting operation
      await window.sharedStorage.run("experiment-group-reporting");
    }
    
    injectAd();
    
This feature does not appear to be defined in any specification.>
  * Shared Storage API


# VisualViewport
The `VisualViewport` interface of the Visual Viewport API represents the visual viewport for a given window. For a page containing iframes, each iframe, as well as the containing page, will have a unique window object. Each window on a page will have a unique `VisualViewport` representing the properties associated with that window.
You can get a window's visual viewport using `Window.visualViewport`.
Note: Only the top-level window has a visual viewport that's distinct from the layout viewport. Therefore, it's generally only the `VisualViewport` object of the top-level window that's useful. For an `<iframe>`, visual viewport metrics like `VisualViewport.width` always correspond to layout viewport metrics like `document.documentElement.clientWidth`.
EventTarget  VisualViewport 
## Instance properties
Also inherits properties from its parent interface, `EventTarget`.
`VisualViewport.offsetLeft` Read only
    
Returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in CSS pixels.
`VisualViewport.offsetTop` Read only
    
Returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in CSS pixels.
`VisualViewport.pageLeft` Read only
    
Returns the x coordinate of the visual viewport relative to the initial containing block origin of the top edge in CSS pixels.
`VisualViewport.pageTop` Read only
    
Returns the y coordinate of the visual viewport relative to the initial containing block origin of the top edge in CSS pixels.
`VisualViewport.width` Read only
    
Returns the width of the visual viewport in CSS pixels.
`VisualViewport.height` Read only
    
Returns the height of the visual viewport in CSS pixels.
`VisualViewport.scale` Read only
    
Returns the pinch-zoom scaling factor applied to the visual viewport.
## Instance methods
Also inherits methods from its parent interface, `EventTarget`.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the relevant `oneventname` property of this interface.
`resize`
    
Fired when the visual viewport is resized. Also available via the `onresize` property.
`scroll`
    
Fired when the visual viewport is scrolled. Also available via the `onscroll` property.
`scrollend`
    
Fired when a scrolling operation on the visual viewport ends. Also available via the `onscrollend` property.
## Examples
>
### Hiding an overlaid box on zoom
This example, taken from the Visual Viewport README, shows how to write a bit of code that will hide an overlaid box (which might contain an advert, say) when the user zooms in. This is a nice way to improve the user experience when zooming in on pages. A live sample is also available.
    
    const bottomBar = document.getElementById("bottom-bar");
    const viewport = window.visualViewport;
    
    function resizeHandler() {
      bottomBar.style.display = viewport.scale > 1.3 ? "none" : "block";
    }
    
    window.visualViewport.addEventListener("resize", resizeHandler);
    
### Simulating position: device-fixed
This example, also taken from the Visual Viewport README, shows how to use this API to simulate `position: device-fixed`, which fixes elements to the visual viewport. A live sample is also available.
    
    const bottomBar = document.getElementById("bottom-bar");
    const viewport = window.visualViewport;
    function viewportHandler() {
      const layoutViewport = document.getElementById("layoutViewport");
    
      // Since the bar is position: fixed we need to offset it by the visual
      // viewport's offset from the layout viewport origin.
      const offsetLeft = viewport.offsetLeft;
      const offsetTop =
        viewport.height -
        layoutViewport.getBoundingClientRect().height +
        viewport.offsetTop;
    
      // You could also do this by setting style.left and style.top if you
      // use width: 100% instead.
      bottomBar.style.transform = `translate(${offsetLeft}px, ${offsetTop}px) scale(${
        1 / viewport.scale
      })`;
    }
    window.visualViewport.addEventListener("scroll", viewportHandler);
    window.visualViewport.addEventListener("resize", viewportHandler);
    
Note: This technique should be used with care; emulating `position: device-fixed` in this way can result in the fixed element flickering during scrolling.
  * Web Viewports Explainer — useful explanation of web viewports concepts, including the difference between visual viewport and layout viewport.


# WebGL: 2D and 3D graphics for the web
Note: This feature is available in Web Workers.
WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML `<canvas>` elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.
Support for WebGL is present in all modern browsers (see the compatibility tables below); however, the user's device must also have hardware that supports these features.
The WebGL 2 API introduces support for much of the OpenGL ES 3.0 feature set; it's provided through the `WebGL2RenderingContext` interface.
The `<canvas>` element is also used by the Canvas API to do 2D graphics on web pages.
## Reference
>
### Standard interfaces
  * `WebGLRenderingContext`
  * `WebGL2RenderingContext`
  * `WebGLActiveInfo`
  * `WebGLBuffer`
  * `WebGLContextEvent`
  * `WebGLFramebuffer`
  * `WebGLProgram`
  * `WebGLQuery`
  * `WebGLRenderbuffer`
  * `WebGLSampler`
  * `WebGLShader`
  * `WebGLShaderPrecisionFormat`
  * `WebGLSync`
  * `WebGLTexture`
  * `WebGLTransformFeedback`
  * `WebGLUniformLocation`
  * `WebGLVertexArrayObject`


### Extensions
  * `ANGLE_instanced_arrays`
  * `EXT_blend_minmax`
  * `EXT_color_buffer_float`
  * `EXT_color_buffer_half_float`
  * `EXT_disjoint_timer_query`
  * `EXT_float_blend` Experimental
  * `EXT_frag_depth`
  * `EXT_shader_texture_lod`
  * `EXT_sRGB`
  * `EXT_texture_compression_bptc`
  * `EXT_texture_compression_rgtc`
  * `EXT_texture_filter_anisotropic`
  * `EXT_texture_norm16`
  * `KHR_parallel_shader_compile`
  * `OES_draw_buffers_indexed`
  * `OES_element_index_uint`
  * `OES_fbo_render_mipmap`
  * `OES_standard_derivatives`
  * `OES_texture_float`
  * `OES_texture_float_linear`
  * `OES_texture_half_float`
  * `OES_texture_half_float_linear`
  * `OES_vertex_array_object`
  * `OVR_multiview2`
  * `WEBGL_color_buffer_float`
  * `WEBGL_compressed_texture_astc`
  * `WEBGL_compressed_texture_etc`
  * `WEBGL_compressed_texture_etc1`
  * `WEBGL_compressed_texture_pvrtc`
  * `WEBGL_compressed_texture_s3tc`
  * `WEBGL_compressed_texture_s3tc_srgb`
  * `WEBGL_debug_renderer_info`
  * `WEBGL_debug_shaders`
  * `WEBGL_depth_texture`
  * `WEBGL_draw_buffers`
  * `WEBGL_lose_context`
  * `WEBGL_multi_draw`


### Events
  * `webglcontextlost`
  * `webglcontextrestored`
  * `webglcontextcreationerror`


### Constants and types
  * WebGL constants
  * WebGL types


### WebGL 2
WebGL 2 is a major update to WebGL which is provided through the `WebGL2RenderingContext` interface. It is based on OpenGL ES 3.0 and new features include:
  * 3D textures,
  * Sampler objects,
  * Uniform Buffer objects,
  * Sync objects,
  * Query objects,
  * Transform Feedback objects,
  * Promoted extensions that are now core to WebGL 2: Vertex Array objects, instancing, multiple render targets, fragment depth.


See also the blog post "WebGL 2 lands in Firefox" and webglsamples.org/WebGL2Samples for a few demos.
## Guides and tutorials
Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.
### Guides
Data in WebGL
    
A guide to variables, buffers, and other types of data used when writing WebGL code.
WebGL best practices
    
Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.
Using extensions
    
A guide to using WebGL extensions.
### Tutorials
WebGL tutorial
    
A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.
### Examples
A basic 2D WebGL animation example
    
This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.
WebGL by example
    
A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.
### Advanced tutorials
Compressed texture formats
    
How to enable and use compressed texture formats for better memory performance.
WebGL model view projection
    
A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.
Matrix math for the web
    
A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS transforms.
## Resources
  * Khronos WebGL site The main website for WebGL at the Khronos Group.
  * WebGL Fundamentals A basic tutorial with fundamentals of WebGL.
  * Raw WebGL: An introduction to WebGL A talk by Nick Desaulniers that introduces the basics of WebGL.
  * WebGL Academy An HTML/JavaScript editor with tutorials to learn basics of webgl programming.
  * WebGL Stats A site with statistics about WebGL capabilities in browsers on different platforms.


### Libraries
  * three.js is an open-source, fully featured 3D WebGL library.
  * Babylon.js is a powerful, simple, and open game and 3D rendering engine packed into a friendly JavaScript framework.
  * Pixi.js is a fast, open-source 2D WebGL renderer.
  * Phaser is a fast, free and fun open source framework for Canvas and WebGL powered browser games.
  * PlayCanvas is an open-source game engine.
  * glMatrix is a JavaScript matrix and vector library for high-performance WebGL apps.
  * twgl is a library for making webgl less verbose.
  * RedGL is an open-source 3D WebGL library.
  * vtk.js is a JavaScript library for scientific visualization in your browser.
  * webgl-lint will help find errors in your WebGL code and provide useful info

>
### api.WebGLRenderingContext
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`WebGL_API` 9 12To access the WebGL context, use `experimental-webgl` rather than the standard `webgl` identifier. 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`activeTexture` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`attachShader` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`bindAttribLocation` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`bindBuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`bindFramebuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`bindRenderbuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`bindTexture` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`blendColor` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`blendEquation` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`blendEquationSeparate` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`blendFunc` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`blendFuncSeparate` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`bufferData` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`bufferSubData` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`canvas` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`checkFramebufferStatus` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`clear` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`clearColor` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`clearDepth` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`clearStencil` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`colorMask` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`compileShader` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`compressedTexImage2D` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`compressedTexSubImage2D` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`copyTexImage2D` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`copyTexSubImage2D` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`createBuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`createFramebuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`createProgram` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`createRenderbuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`createShader` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`createTexture` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`cullFace` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`deleteBuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`deleteFramebuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`deleteProgram` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`deleteRenderbuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`deleteShader` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`deleteTexture` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`depthFunc` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`depthMask` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`depthRange` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`detachShader` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`disable` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`disableVertexAttribArray` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`drawArrays` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`drawElements` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`drawingBufferColorSpace` 104 104 132127–130Accidental early exposure with no functionality. 90 16.4 104 132127–130Accidental early exposure with no functionality. 71 16.4 20.0 104 16.4  
`drawingBufferFormat` 122 122 No 108 No 122 No 81 No 26.0 122 No  
`drawingBufferHeight` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`drawingBufferStorage` 122 122 No 108 No 122 No 81 No 26.0 122 No  
`drawingBufferWidth` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`enable` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`enableVertexAttribArray` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`finish` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`flush` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`framebufferRenderbuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`framebufferTexture2D` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`frontFace` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`generateMipmap` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getActiveAttrib` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getActiveUniform` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getAttachedShaders` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getAttribLocation` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getBufferParameter` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getContextAttributes` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getError` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getExtension` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getFramebufferAttachmentParameter` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getParameter` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getProgramInfoLog` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getProgramParameter` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getRenderbufferParameter` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getShaderInfoLog` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getShaderParameter` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getShaderPrecisionFormat` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getShaderSource` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getSupportedExtensions` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getTexParameter` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getUniform` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getUniformLocation` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getVertexAttrib` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`getVertexAttribOffset` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`hint` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`isBuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`isContextLost` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`isEnabled` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`isFramebuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`isProgram` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`isRenderbuffer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`isShader` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`isTexture` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`lineWidth` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`linkProgram` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`makeXRCompatible` 79 79 No 66 No 79 No 57 No 11.2 No No  
`pixelStorei` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`polygonOffset` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`readPixels` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`renderbufferStorage` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`sampleCoverage` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`scissor` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`shaderSource` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`stencilFunc` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`stencilFuncSeparate` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`stencilMask` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`stencilMaskSeparate` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`stencilOp` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`stencilOpSeparate` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`texImage2D` 9 12 4 12 5.1 25 4Textures from video elements are not supported. See bug 1884282. 12 8 1.5 4.4.3 8  
`texParameterf` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`texParameteri` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`texSubImage2D` 9 12 4 12 5.1 25 4Textures from video elements are not supported. See bug 1884282. 12 8 1.5 4.4.3 8  
`uniform1f` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform1fv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform1i` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform1iv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform2f` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform2fv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform2i` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform2iv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform3f` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform3fv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform3i` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform3iv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform4f` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform4fv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform4i` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniform4iv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniformMatrix2fv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniformMatrix3fv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`uniformMatrix4fv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`unpackColorSpace` 104 104 132 90 No 104 132 71 No 20.0 104 No  
`useProgram` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`validateProgram` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`vertexAttrib1f` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`vertexAttrib1fv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`vertexAttrib2f` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`vertexAttrib2fv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`vertexAttrib3f` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`vertexAttrib3fv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`vertexAttrib4f` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`vertexAttrib4fv` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`vertexAttribPointer` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`viewport` 9 12 4 12 5.1 25 4 12 8 1.5 4.4.3 8  
`worker_support` No No 105 No No No 105 No No No No No  
### api.WebGL2RenderingContext
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`WebGL_API` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`activeTexture` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`attachShader` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`beginQuery` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`beginTransformFeedback` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`bindAttribLocation` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`bindBuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`bindBufferBase` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`bindBufferRange` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`bindFramebuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`bindRenderbuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`bindSampler` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`bindTexture` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`bindTransformFeedback` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`bindVertexArray` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`blendColor` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`blendEquation` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`blendEquationSeparate` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`blendFunc` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`blendFuncSeparate` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`blitFramebuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`bufferData` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`bufferSubData` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`canvas` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`checkFramebufferStatus` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`clear` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`clearBufferfi` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`clearBufferfv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`clearBufferiv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`clearBufferuiv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`clearColor` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`clearDepth` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`clearStencil` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`clientWaitSync` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`colorMask` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`compileShader` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`compressedTexImage2D` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`compressedTexImage3D` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`compressedTexSubImage2D` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`compressedTexSubImage3D` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`copyBufferSubData` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`copyTexImage2D` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`copyTexSubImage2D` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`copyTexSubImage3D` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`createBuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`createFramebuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`createProgram` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`createQuery` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`createRenderbuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`createSampler` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`createShader` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`createTexture` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`createTransformFeedback` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`createVertexArray` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`cullFace` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`deleteBuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`deleteFramebuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`deleteProgram` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`deleteQuery` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`deleteRenderbuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`deleteSampler` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`deleteShader` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`deleteSync` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`deleteTexture` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`deleteTransformFeedback` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`deleteVertexArray` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`depthFunc` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`depthMask` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`depthRange` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`detachShader` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`disable` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`disableVertexAttribArray` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`drawArrays` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`drawArraysInstanced` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`drawBuffers` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`drawElements` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`drawElementsInstanced` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`drawRangeElements` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`drawingBufferColorSpace` 104 104 132127–130Accidental early exposure with no functionality. 90 16.4 104 132127–130Accidental early exposure with no functionality. 71 16.4 20.0 104 16.4  
`drawingBufferFormat` 122 122 No 108 No 122 No 81 No 26.0 122 No  
`drawingBufferHeight` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`drawingBufferStorage` 122 122 No 108 No 122 No 81 No 26.0 122 No  
`drawingBufferWidth` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`enable` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`enableVertexAttribArray` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`endQuery` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`endTransformFeedback` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`fenceSync` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`finish` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`flush` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`framebufferRenderbuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`framebufferTexture2D` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`framebufferTextureLayer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`frontFace` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`generateMipmap` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getActiveAttrib` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getActiveUniform` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getActiveUniformBlockName` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getActiveUniformBlockParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getActiveUniforms` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getAttachedShaders` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getAttribLocation` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getBufferParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getBufferSubData` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getContextAttributes` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getError` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getExtension` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getFragDataLocation` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getFramebufferAttachmentParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getIndexedParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getInternalformatParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getProgramInfoLog` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getProgramParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getQuery` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getQueryParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getRenderbufferParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getSamplerParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getShaderInfoLog` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getShaderParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getShaderPrecisionFormat` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getShaderSource` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getSupportedExtensions` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getSyncParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getTexParameter` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getTransformFeedbackVarying` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getUniform` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getUniformBlockIndex` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getUniformIndices` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getUniformLocation` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getVertexAttrib` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`getVertexAttribOffset` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`hint` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`invalidateFramebuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`invalidateSubFramebuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isBuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isContextLost` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isEnabled` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isFramebuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isProgram` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isQuery` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isRenderbuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isSampler` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isShader` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isSync` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isTexture` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isTransformFeedback` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`isVertexArray` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`lineWidth` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`linkProgram` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`makeXRCompatible` 79 79 No 66 No 79 No 57 No 11.2 No No  
`pauseTransformFeedback` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`pixelStorei` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`polygonOffset` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`readBuffer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`readPixels` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`renderbufferStorage` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`renderbufferStorageMultisample` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`resumeTransformFeedback` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`sampleCoverage` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`samplerParameterf` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`samplerParameteri` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`scissor` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`shaderSource` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`stencilFunc` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`stencilFuncSeparate` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`stencilMask` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`stencilMaskSeparate` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`stencilOp` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`stencilOpSeparate` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`texImage2D` 56 79 51 43 15 58 51Textures from video elements are not supported. See bug 1884282. 43 15 7.0 58 15  
`texImage3D` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`texParameterf` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`texParameteri` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`texStorage2D` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`texStorage3D` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`texSubImage2D` 56 79 51 43 15 58 51Textures from video elements are not supported. See bug 1884282. 43 15 7.0 58 15  
`texSubImage3D` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`transformFeedbackVaryings` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform1f` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform1fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform1i` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform1iv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform1ui` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform1uiv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform2f` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform2fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform2i` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform2iv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform2ui` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform2uiv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform3f` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform3fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform3i` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform3iv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform3ui` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform3uiv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform4f` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform4fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform4i` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform4iv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform4ui` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniform4uiv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniformBlockBinding` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniformMatrix2fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniformMatrix2x3fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniformMatrix2x4fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniformMatrix3fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniformMatrix3x2fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniformMatrix3x4fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniformMatrix4fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniformMatrix4x2fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`uniformMatrix4x3fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`unpackColorSpace` 104 104 132 90 No 104 132 71 No 20.0 104 No  
`useProgram` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`validateProgram` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttrib1f` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttrib1fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttrib2f` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttrib2fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttrib3f` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttrib3fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttrib4f` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttrib4fv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttribDivisor` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttribI4i` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttribI4iv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttribI4ui` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttribI4uiv` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttribIPointer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`vertexAttribPointer` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`viewport` 56 79 51 43 15 58 51 43 15 7.0 58 15  
`waitSync` 56 79 51 43 15 58 51 43 15 7.0 58 15  
### Compatibility notes
In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the `webgl` context name, but older ones need `experimental-webgl` as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name `webgl2`.
### Gecko notes
#### WebGL debugging and testing
Firefox provides two preferences available which let you control the capabilities of WebGL for testing purposes:
`webgl.min_capability_mode`
    
A Boolean property that, when `true`, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is `false` by default.
`webgl.disable_extensions`
    
A Boolean property that, when `true`, disables all WebGL extensions. This is `false` by default.
  * Canvas API
  * Compatibility info about WebGL extensions


# NamedNodeMap
The `NamedNodeMap` interface represents a collection of `Attr` objects. Objects inside a `NamedNodeMap` are not in any particular order, unlike `NodeList`, although they may be accessed by an index as in an array.
A `NamedNodeMap` object is live and will thus be auto-updated if changes are made to its contents internally or elsewhere.
Note: Although called `NamedNodeMap`, this interface doesn't deal with `Node` objects but with `Attr` objects, which are a specialized class of `Node` objects.
## Instance properties
This interface doesn't inherit any property.
`NamedNodeMap.length` Read only
    
Returns the amount of objects in the map.
## Instance methods
This interface doesn't inherit any method.
`NamedNodeMap.getNamedItem()`
    
Returns an `Attr`, corresponding to the given name.
`NamedNodeMap.setNamedItem()`
    
Replaces, or adds, the `Attr` identified in the map by the given name.
`NamedNodeMap.removeNamedItem()`
    
Removes the `Attr` identified by the given map.
`NamedNodeMap.item()`
    
Returns the `Attr` at the given index, or `null` if the index is higher or equal to the number of nodes.
`NamedNodeMap.getNamedItemNS()`
    
Returns an `Attr` identified by a namespace and related local name.
`NamedNodeMap.setNamedItemNS()`
    
Replaces, or adds, the `Attr` identified in the map by the given namespace and related local name.
`NamedNodeMap.removeNamedItemNS()`
    
Removes the `Attr` identified by the given namespace and related local name.
  * `Element.attributes`


# AudioContext
The `AudioContext` interface represents an audio-processing graph built from audio modules linked together, each represented by an `AudioNode`.
An audio context controls both the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an `AudioContext` before you do anything else, as everything happens inside a context. It's recommended to create one AudioContext and reuse it instead of initializing a new one each time, and it's OK to use a single `AudioContext` for several different audio sources and pipeline concurrently.
EventTarget  BaseAudioContext  AudioContext 
## Constructor
`AudioContext()`
    
Creates and returns a new `AudioContext` object.
## Instance properties
Also inherits properties from its parent interface, `BaseAudioContext`.
`AudioContext.baseLatency` Read only
    
Returns the number of seconds of processing latency incurred by the `AudioContext` passing the audio from the `AudioDestinationNode` to the audio subsystem.
`AudioContext.outputLatency` Read only
    
Returns an estimation of the output latency of the current audio context.
`AudioContext.sinkId` Read only Experimental Secure context
    
Returns the sink ID of the current output audio device.
## Instance methods
Also inherits methods from its parent interface, `BaseAudioContext`.
`AudioContext.close()`
    
Closes the audio context, releasing any system audio resources that it uses.
`AudioContext.createMediaElementSource()`
    
Creates a `MediaElementAudioSourceNode` associated with an `HTMLMediaElement`. This can be used to play and manipulate audio from `<video>` or `<audio>` elements.
`AudioContext.createMediaStreamSource()`
    
Creates a `MediaStreamAudioSourceNode` associated with a `MediaStream` representing an audio stream which may come from the local computer microphone or other sources.
`AudioContext.createMediaStreamDestination()`
    
Creates a `MediaStreamAudioDestinationNode` associated with a `MediaStream` representing an audio stream which may be stored in a local file or sent to another computer.
`AudioContext.createMediaStreamTrackSource()`
    
Creates a `MediaStreamTrackAudioSourceNode` associated with a `MediaStream` representing an media stream track.
`AudioContext.getOutputTimestamp()`
    
Returns a new `AudioTimestamp` object containing two audio timestamp values relating to the current audio context.
`AudioContext.resume()`
    
Resumes the progression of time in an audio context that has previously been suspended/paused.
`AudioContext.setSinkId()` Experimental Secure context
    
Sets the output audio device for the `AudioContext`.
`AudioContext.suspend()`
    
Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.
## Events
`sinkchange` Experimental
    
Fired when the output audio device (and therefore, the `AudioContext.sinkId`) has changed.
## Examples
Basic audio context declaration:
    
    const audioCtx = new AudioContext();
    
    const oscillatorNode = audioCtx.createOscillator();
    const gainNode = audioCtx.createGain();
    const finish = audioCtx.destination;
    // etc.
    
  * Using the Web Audio API
  * `OfflineAudioContext`


# PresentationConnectionAvailableEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PresentationConnectionAvailableEvent` interface of the Presentation API is fired on a `PresentationRequest` when a connection associated with the object is created.
A controlling user agent fires a trusted event named `connectionavailable` on a `PresentationRequest` when a connection associated with the object is created. It is fired at the `PresentationRequest` instance, using the `PresentationConnectionAvailableEvent` interface, with the `connection` attribute set to the `PresentationConnection` object that was created. The event is fired for each connection that is created for the controller, either by the controller calling `start()` or `reconnect()`, or by the controlling user agent creating a connection on the controller's behalf via `defaultRequest`.
Event  PresentationConnectionAvailableEvent 
## Constructor
`PresentationConnectionAvailableEvent()` Experimental
    
Creates a new PresentationConnectionAvailableEvent.
## Instance properties
`PresentationConnectionAvailableEvent.connection` Read only Experimental
    
Returns a references to the `PresentationConnection` object that fired the event.
# WGSLLanguageFeatures
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `WGSLLanguageFeatures` interface of the WebGPU API is a setlike object that reports the WGSL language extensions supported by the WebGPU implementation.
The `WGSLLanguageFeatures` object is accessed via the `GPU.wgslLanguageFeatures` property.
Note: Not all WGSL language extensions are available to WebGPU in all browsers that support the API. We recommend you thoroughly test any extensions you choose to use.
## Available features
The following WGSL language extensions are defined at WGSL language extensions in the WGSL specification. Bear in mind that the exact set of features available will vary across implementations and physical devices, and may change over time.
`packed_4x8_integer_dot_product`
    
Allows DP4a (Dot Product of 4 Elements and Accumulate) GPU instructions to be used via your WGSL code. These efficiently perform 8-bit integer dot products to accelerate computation, saving memory and network bandwidth and improving performance compared with the equivalent `f32` versions. They are commonly used in machine learning models in inferencing, within AI frameworks.
Specifically, when `packed_4x8_integer_dot_product` is available, WGSL code can use:
  * 32-bit integer scalars packing 4-component vectors of 8-bit integers to be used as inputs to dot product instructions (via the `dot4U8Packed()` and `dot4I8Packed()` built-in functions).
  * Packing and unpacking instructions with packed 4-component vectors of 8-bit integers (via built-in functions such as `pack4xI8()` and `pack4xI8Clamp()`).


`pointer_composite_access`
    
Enables WGSL shader code to access components of complex data types using the same dot (`.`) syntax whether you're working directly with the data or with a pointer to it.
When `pointer_composite_access` is available:
  * If `foo` is a pointer: `foo.bar` is available as a more convenient way to write `(*foo).bar`. The asterisk (`*`) would normally be needed to turn the pointer into a "reference" that can be dereferenced, but now both pointers and references are almost interchangeable.
  * If `foo` is not a pointer: The dot (`.`) operator works exactly as you're used to for directly accessing members.
  * if `pa` is a pointer that stores the starting address of an array, then `pa[i]` gives you direct access to the memory location where the `i`th element of that array is stored.


See Syntax sugar for dereferencing composites in WGSL for further details and an example.
`readonly_and_readwrite_storage_textures`
    
When available, allows the `"read-only"` and `"read-write"` `storageTexture.access` values to be set when specifying storage texture bind group entry types in a bind group layout. These enable WGSL code to read storage textures, and read/write storage textures, respectively.
`unrestricted_pointer_parameters`
    
Loosens restrictions on pointers being passed to WGSL functions. When available, the following are allowed:
  * Parameter pointers to storage, uniform, and workgroup address spaces being passed to user-declared functions.
  * Pointers to structure members and array elements being passed to user-declared functions.
See Pointers As Function Parameters for more details.


## Instance properties
The following property is available to all read-only setlike objects:
`size`
    
Returns the number of values in the set.
## Instance methods
The following methods are available to all read-only setlike objects:
`has()`
    
Returns a boolean asserting whether or not an element with the given value is present in the set.
`values()`
    
Returns a new iterator object that yields values for each element in the set in insertion order.
`keys()`
    
An alias for `values()`.
`entries()`
    
Returns a new iterator object that contains `[value, value]` for each element in the set in insertion order.
`forEach()`
    
Calls the provided callback function once for each value present in the set in insertion order.
## Examples
>
### Check whether an extension is available
    
    if (
      navigator.gpu.wgslLanguageFeatures.has(
        "readonly_and_readwrite_storage_textures",
      )
    ) {
      console.log("Read-only and read-write storage textures are available");
    }
    
### Return set size and iterate through values
    
    const wgslFeatures = navigator.gpu.wgslLanguageFeatures;
    
    // Return the size of the set
    console.log(wgslFeatures.size);
    
    // Iterate through all the set values using values()
    const valueIterator = wgslFeatures.values();
    for (const value of valueIterator) {
      console.log(value);
    }
    
    // …
    
  * WebGPU API


# CustomEvent
Note: This feature is available in Web Workers.
The `CustomEvent` interface can be used to attach custom data to an event generated by an application.
As an alternative to `CustomEvent`, you can subclass the `Event` interface to add custom data and behavior.
Note: If used to attempt to communicate between a web extension content script and a web page script, a non-string `detail` property throws with "Permission denied to access property" in Firefox. To avoid this issue clone the object. See Share objects with page scripts for more information.
Event  CustomEvent 
## Constructor
`CustomEvent()`
    
Creates a new `CustomEvent`.
## Instance properties
This interface inherits properties from its parent, `Event`.
`CustomEvent.detail` Read only
    
Returns any data passed when initializing the event.
## Instance methods
This interface inherits methods from its parent, `Event`.
`CustomEvent.initCustomEvent()` Deprecated
    
Initializes a `CustomEvent` object. If the event has already been dispatched, this method does nothing.
  * `Window.postMessage()`
  * Creating and dispatching events


# GPUComputePipeline
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUComputePipeline` interface of the WebGPU API represents a pipeline that controls the compute shader stage and can be used in a `GPUComputePassEncoder`.
A `GPUComputePipeline` object instance can be created using the `GPUDevice.createComputePipeline()` or `GPUDevice.createComputePipelineAsync()` methods.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Instance methods
`getBindGroupLayout()`
    
Returns the pipeline's `GPUBindGroupLayout` object with the given index (i.e., included in the originating `GPUDevice.createComputePipeline()` or `GPUDevice.createComputePipelineAsync()` call's pipeline layout).
## Examples
Note: The WebGPU samples feature many more examples.
### Basic example
Our basic compute demo shows a process of:
  * Creating a bind group layout with `GPUDevice.createBindGroupLayout()`.
  * Feeding the `bindGroupLayout` into `GPUDevice.createPipelineLayout()` to create a `GPUPipelineLayout`.
  * Using that value immediately in a `createComputePipeline()` call to create a `GPUComputePipeline`.


    
    // …
    
    const bindGroupLayout = device.createBindGroupLayout({
      entries: [
        {
          binding: 0,
          visibility: GPUShaderStage.COMPUTE,
          buffer: {
            type: "storage",
          },
        },
      ],
    });
    
    const computePipeline = device.createComputePipeline({
      layout: device.createPipelineLayout({
        bindGroupLayouts: [bindGroupLayout],
      }),
      compute: {
        module: shaderModule,
        entryPoint: "main",
      },
    });
    
    // …
    
  * The WebGPU API


# Keyboard
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Keyboard` interface of the Keyboard API provides functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
A list of valid code values is found in the UI Events KeyboardEvent code Values spec.
EventTarget  Keyboard 
## Instance properties
Also inherits properties from its parent interface, `EventTarget`.
## Instance methods
Also inherits methods from its parent interface, `EventTarget`.
`Keyboard.getLayoutMap()` Experimental
    
Returns a `Promise` that resolves with an instance of `KeyboardLayoutMap` which is a map-like object with functions for retrieving the strings associated with specific physical keys.
`Keyboard.lock()` Experimental
    
Returns a `Promise` that resolves after enabling the capture of key presses for any or all of the keys on the physical keyboard.
`Keyboard.unlock()` Experimental
    
Unlocks all keys captured by the `lock()` method and returns synchronously.
## Example
>
### Keyboard mapping
The following example demonstrates how to get the location- or layout-specific string associated with the key that corresponds to the 'W' key on an English QWERTY keyboard.
    
    if (navigator.keyboard) {
      const keyboard = navigator.keyboard;
      keyboard.getLayoutMap().then((keyboardLayoutMap) => {
        const upKey = keyboardLayoutMap.get("KeyW");
        window.alert(`Press ${upKey} to move up.`);
      });
    } else {
      // Do something else.
    }
    
### Keyboard locking
The following example captures the `W`, `A`, `S`, and `D` keys, call `lock()` with a list that contains the key code attribute value for each of these keys:
    
    navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
    
This captures these keys regardless of which modifiers are used with the key press. Assuming a standard United States QWERTY layout, registering `KeyW` ensures that `W`, `Shift+W`, `Control+W`, `Control+Shift+W`, and all other key modifier combinations with `W` are sent to the app. The same applies to for `KeyA`, `KeyS`, and `KeyD`.
# IDBFactory
Note: This feature is available in Web Workers.
The `IDBFactory` interface of the IndexedDB API lets applications asynchronously access the indexed databases. The object that implements the interface is `window.indexedDB`. You open — that is, create and access — and delete a database with this object, and not directly with `IDBFactory`.
## Instance methods
`IDBFactory.open()`
    
Requests opening a connection to a database.
`IDBFactory.deleteDatabase()`
    
Requests the deletion of a database.
`IDBFactory.cmp()`
    
Compares two keys and returns a result indicating which one is greater in value.
`IDBFactory.databases()`
    
Returns a promise that fulfills with an array of all available databases, including their names and versions.
## Example
In the following code snippet, we make a request to open a database, and include handlers for the success and error cases. For a full working example, see our To-do Notifications app (view example live).
    
    // Let us open version 4 of our database
    const DBOpenRequest = window.indexedDB.open("toDoList", 4);
    
    // these two event handlers act on the database being opened successfully, or not
    DBOpenRequest.onerror = (event) => {
      console.error("Error loading database.");
    };
    
    DBOpenRequest.onsuccess = (event) => {
      console.info("Database initialized.");
    
      // store the result of opening the database in the db variable. This is used a lot later on, for opening transactions and suchlike.
      db = DBOpenRequest.result;
    };
    
  * Using IndexedDB
  * Starting transactions: `IDBDatabase`
  * Using transactions: `IDBTransaction`
  * Setting a range of keys: `IDBKeyRange`
  * Retrieving and making changes to your data: `IDBObjectStore`
  * Using cursors: `IDBCursor`
  * Reference example: To-do Notifications (View the example live).


# SubtleCrypto
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `SubtleCrypto` interface of the Web Crypto API provides a number of low-level cryptographic functions.
The interface name includes the term "subtle" to indicate that many of its algorithms have subtle usage requirements, and hence that it must be used carefully in order to provide suitable security guarantees.
An instance of `SubtleCrypto` is available as the `subtle` property of the `Crypto` interface, which in turn is available in windows through the `Window.crypto` property and in workers through the `WorkerGlobalScope.crypto` property.
Warning: This API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle.
Even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts.
Errors in security system design and implementation can make the security of the system completely ineffective.
Please learn and experiment, but don't guarantee or imply the security of your work before an individual knowledgeable in this subject matter thoroughly reviews it. The Crypto 101 Course can be a great place to start learning about the design and implementation of secure systems.
## Instance properties
This interface doesn't inherit any properties, as it has no parent interface.
## Instance methods
This interface doesn't inherit any methods, as it has no parent interface.
`SubtleCrypto.encrypt()`
    
Returns a `Promise` that fulfills with the encrypted data corresponding to the clear text, algorithm, and key given as parameters.
`SubtleCrypto.decrypt()`
    
Returns a `Promise` that fulfills with the clear data corresponding to the encrypted text, algorithm, and key given as parameters.
`SubtleCrypto.sign()`
    
Returns a `Promise` that fulfills with the signature corresponding to the text, algorithm, and key given as parameters.
`SubtleCrypto.verify()`
    
Returns a `Promise` that fulfills with a boolean value indicating if the signature given as a parameter matches the text, algorithm, and key that are also given as parameters.
`SubtleCrypto.digest()`
    
Returns a `Promise` that fulfills with a digest generated from the algorithm and text given as parameters.
`SubtleCrypto.generateKey()`
    
Returns a `Promise` that fulfills with a newly-generated `CryptoKey`, for symmetrical algorithms, or a `CryptoKeyPair`, containing two newly generated keys, for asymmetrical algorithms. These will match the algorithm, usages, and extractability given as parameters.
`SubtleCrypto.deriveKey()`
    
Returns a `Promise` that fulfills with a newly generated `CryptoKey` derived from the master key and specific algorithm given as parameters.
`SubtleCrypto.deriveBits()`
    
Returns a `Promise` that fulfills with a newly generated buffer of pseudo-random bits derived from the master key and specific algorithm given as parameters.
`SubtleCrypto.importKey()`
    
Returns a `Promise` that fulfills with a `CryptoKey` corresponding to the format, the algorithm, raw key data, usages, and extractability given as parameters.
`SubtleCrypto.exportKey()`
    
Returns a `Promise` that fulfills with the raw key data containing the key in the requested format.
`SubtleCrypto.wrapKey()`
    
Returns a `Promise` that fulfills with a wrapped symmetric key for usage (transfer and storage) in insecure environments. The wrapped key matches the format specified in the given parameters, and wrapping is done by the given wrapping key, using the specified algorithm.
`SubtleCrypto.unwrapKey()`
    
Returns a `Promise` that fulfills with a `CryptoKey` corresponding to the wrapped key given in the parameter.
## Using SubtleCrypto
We can split the functions implemented by this API into two groups: cryptography functions and key management functions.
### Cryptography functions
These are the functions you can use to implement security features such as privacy and authentication in a system. The `SubtleCrypto` API provides the following cryptography functions:
  * `sign()` and `verify()`: create and verify digital signatures.
  * `encrypt()` and `decrypt()`: encrypt and decrypt data.
  * `digest()`: create a fixed-length, collision-resistant digest of some data.


### Key management functions
Except for `digest()`, all the cryptography functions in the API use cryptographic keys. In the `SubtleCrypto` API a cryptographic key is represented using a `CryptoKey` object. To perform operations like signing and encrypting, you pass a `CryptoKey` object into the `sign()` or `encrypt()` function.
#### Generating and deriving keys
The `generateKey()` and `deriveKey()` functions both create a new `CryptoKey` object.
The difference is that `generateKey()` will generate a new distinct key value each time you call it, while `deriveKey()` derives a key from some initial keying material. If you provide the same keying material to two separate calls to `deriveKey()`, you will get two `CryptoKey` objects that have the same underlying value. This is useful if, for example, you want to derive an encryption key from a password and later derive the same key from the same password to decrypt the data.
#### Importing and exporting keys
To make keys available outside your app, you need to export the key, and that's what `exportKey()` is for. You can choose one of a number of export formats.
The inverse of `exportKey()` is `importKey()`. You can import keys from other systems, and support for standard formats like PKCS #8 and JSON Web Key helps you do this. The `exportKey()` function exports the key in an unencrypted format.
If the key is sensitive you should use `wrapKey()`, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key".
The inverse of `wrapKey()` is `unwrapKey()`, which decrypts then imports the key.
#### Storing keys
`CryptoKey` is a serializable object, which allows keys to be stored and retrieved using standard web storage APIs.
The specification expects that most developers will use the IndexedDB API, storing `CryptoKey` objects against some key string identifier that is meaningful to the application, along with any other metadata it finds useful. This allows the storage and retrieval of the `CryptoKey` without having to expose its underlying key material to the application or the JavaScript environment.
### Supported algorithms
The cryptographic functions provided by the Web Crypto API can be performed by one or more different cryptographic algorithms: the `algorithm` argument to the function indicates which algorithm to use. Some algorithms need extra parameters: in these cases the `algorithm` argument is a dictionary object that includes the extra parameters.
The table below summarizes which algorithms are suitable for which cryptographic operations:
sign  
verify encrypt  
decrypt digest deriveBits  
deriveKey wrapKey  
unwrapKey generateKey  
exportKey importKey  
RSASSA-PKCS1-v1_5 ✓ ✓ ✓  
RSA-PSS ✓ ✓ ✓  
ECDSA ✓ ✓ ✓  
Ed25519 ✓ ✓ ✓  
HMAC ✓ ✓ ✓  
RSA-OAEP ✓ ✓ ✓ ✓  
AES-CTR ✓ ✓ ✓ ✓  
AES-CBC ✓ ✓ ✓ ✓  
AES-GCM ✓ ✓ ✓ ✓  
AES-KW ✓ ✓ ✓  
SHA-1 ✓  
SHA-256 ✓  
SHA-384 ✓  
SHA-512 ✓  
ECDH ✓ ✓ ✓  
X25519 ✓ ✓ ✓  
HKDF ✓ ✓  
PBKDF2 ✓ ✓  
  * Web Crypto API
  * Non-cryptographic uses of SubtleCrypto
  * Web security
  * Privacy, permissions, and information security
  * `Crypto` and `Crypto.subtle`.
  * Crypto 101: an introductory course on cryptography.


# ServiceWorkerContainer
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `ServiceWorkerContainer` interface of the Service Worker API provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.
Most importantly, it exposes the `ServiceWorkerContainer.register()` method used to register service workers, and the `ServiceWorkerContainer.controller` property used to determine whether or not the current page is actively controlled.
`ServiceWorkerContainer` objects are exposed in the Window scope through `Navigator.serviceWorker` and in workers using `WorkerNavigator.serviceWorker` (if supported — check browser compatibility).
EventTarget  ServiceWorkerContainer 
## Instance properties
`ServiceWorkerContainer.controller` Read only
    
A `ServiceWorker` object that represents the active service worker controlling the current page or `null` if the page has no active or activating service worker.
`ServiceWorkerContainer.ready` Read only
    
Returns a `Promise` that resolves with the `ServiceWorkerRegistration` associated with the current page, but only when there is an active service worker. This provides a mechanism to defer code execution until a service worker is active.
## Instance methods
`ServiceWorkerContainer.getRegistration()`
    
Gets a `ServiceWorkerRegistration` object whose scope matches the provided document URL. The method returns a `Promise` that resolves to a `ServiceWorkerRegistration` or `undefined`.
`ServiceWorkerContainer.getRegistrations()`
    
Returns all `ServiceWorkerRegistration` objects associated with a `ServiceWorkerContainer` in an array. The method returns a `Promise` that resolves to an array of `ServiceWorkerRegistration`.
`ServiceWorkerContainer.register()`
    
Creates or updates a `ServiceWorkerRegistration` for the given `scriptURL`.
`ServiceWorkerContainer.startMessages()`
    
Explicitly starts the flow of messages being dispatched from a service worker to pages under its control (e.g., sent via `Client.postMessage()`). This can be used to react to sent messages earlier, even before that page's content has finished loading.
## Events
`controllerchange`
    
Fired when the document's associated `ServiceWorkerRegistration` acquires a new `active` worker.
`message`
    
Fired when incoming messages are received by the `ServiceWorkerContainer` object (e.g., via a `MessagePort.postMessage()` call).
`messageerror`
    
Fired when incoming messages can not deserialized by the `ServiceWorkerContainer` object (e.g., via a `MessagePort.postMessage()` call).
## Examples
The example below first checks to see if the browser supports service workers. If supported, the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.
    
    if ("serviceWorker" in navigator) {
      // Register a service worker hosted at the root of the
      // site using the default scope.
      navigator.serviceWorker
        .register("/sw.js")
        .then((registration) => {
          console.log("Service worker registration succeeded:", registration);
    
          // At this point, you can optionally do something
          // with registration. See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
        })
        .catch((error) => {
          console.error(`Service worker registration failed: ${error}`);
        });
    
      // Independent of the registration, let's also display
      // information about whether the current page is controlled
      // by an existing service worker, and when that
      // controller changes.
    
      // First, do a one-off check if there's currently a
      // service worker in control.
      if (navigator.serviceWorker.controller) {
        console.log(
          "This page is currently controlled by:",
          navigator.serviceWorker.controller,
        );
      }
    
      // Then, register a handler to detect when a new or
      // updated service worker takes control.
      navigator.serviceWorker.oncontrollerchange = () => {
        console.log(
          "This page is now controlled by",
          navigator.serviceWorker.controller,
        );
      };
    } else {
      console.log("Service workers are not supported.");
    }
    
  * Using Service Workers
  * Service workers basic code example
  * Using web workers


# RTCPeerConnection
The `RTCPeerConnection` interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed.
EventTarget  RTCPeerConnection 
## Constructor
`RTCPeerConnection()`
    
Returns a new `RTCPeerConnection`, representing a connection between the local device and a remote peer.
## Instance properties
Also inherits properties from `EventTarget`.
`canTrickleIceCandidates` Read only
    
Returns a boolean value which indicates whether or not the remote peer can accept trickled ICE candidates.
`connectionState` Read only
    
Indicates the current state of the peer connection by returning one of the strings: `new`, `connecting`, `connected`, `disconnected`, `failed`, or `closed`.
`currentLocalDescription` Read only
    
Returns an `RTCSessionDescription` object describing the local end of the connection as it was most recently successfully negotiated since the last time this `RTCPeerConnection` finished negotiating and connecting to a remote peer. Also included is a list of any ICE candidates that may already have been generated by the ICE agent since the offer or answer represented by the description was first instantiated.
`currentRemoteDescription` Read only
    
Returns an `RTCSessionDescription` object describing the remote end of the connection as it was most recently successfully negotiated since the last time this `RTCPeerConnection` finished negotiating and connecting to a remote peer. Also included is a list of any ICE candidates that may already have been generated by the ICE agent since the offer or answer represented by the description was first instantiated.
`iceConnectionState` Read only
    
Returns a string which state of the ICE agent associated with this RTCPeerConnection. It can be one of the following values: `new`, `checking`, `connected`, `completed`, `failed`, `disconnected`, or `closed`.
`iceGatheringState` Read only
    
Returns a string that describes connection's ICE gathering state. This lets you detect, for example, when collection of ICE candidates has finished. Possible values are: `new`, `gathering`, or `complete`.
`localDescription` Read only
    
Returns an `RTCSessionDescription` describing the session for the local end of the connection. If it has not yet been set, returns `null`.
`peerIdentity` Read only
    
Returns a `Promise` that resolves to an `RTCIdentityAssertion` which contains a string identifying the remote peer. Once this promise resolves successfully, the resulting identity is the target peer identity and will not change for the duration of the connection.
`pendingLocalDescription` Read only
    
Returns an `RTCSessionDescription` object describing a pending configuration change for the local end of the connection. This does not describe the connection as it currently stands, but as it may exist in the near future.
`pendingRemoteDescription` Read only
    
Returns an `RTCSessionDescription` object describing a pending configuration change for the remote end of the connection. This does not describe the connection as it currently stands, but as it may exist in the near future.
`remoteDescription` Read only
    
Returns an `RTCSessionDescription` object describing the session, including configuration and media information, for the remote end of the connection. If this hasn't been set yet, this returns `null`.
`sctp` Read only
    
Returns an `RTCSctpTransport` object describing the SCTP transport layer over which SCTP data is being sent and received. If SCTP hasn't been negotiated, this value is `null`.
`signalingState` Read only
    
Returns a string describing the state of the signaling process on the local end of the connection while connecting or reconnecting to another peer. It is one of the following values: `stable`, `have-local-offer`, `have-remote-offer`, `have-local-pranswer`, `have-remote-pranswer`, or `closed`.
## Static methods
`RTCPeerConnection.generateCertificate()`
    
Creates an X.509 certificate and its corresponding private key, returning a `Promise` that resolves with the new `RTCCertificate` once it is generated.
## Instance methods
Also inherits methods from `EventTarget`.
`addIceCandidate()`
    
Adds a new remote candidate to the `RTCPeerConnection`'s remote description, which describes the state of the remote end of the connection.
`addTrack()`
    
Adds a new `MediaStreamTrack` to the set of tracks which will be transmitted to the other peer.
`addTransceiver()`
    
Creates a new `RTCRtpTransceiver` and adds it to the set of transceivers associated with the connection. Each transceiver represents a bidirectional stream, with both an `RTCRtpSender` and an `RTCRtpReceiver` associated with it.
`close()`
    
Closes the current peer connection.
`createAnswer()`
    
Initiates the creation of an SDP answer to an offer received from a remote peer during the offer/answer negotiation of a WebRTC connection. The answer contains information about any media already attached to the session, codecs and options supported by the browser, and any ICE candidates already gathered.
`createDataChannel()`
    
Initiates the creation a new channel linked with the remote peer, over which any kind of data may be transmitted. This can be useful for back-channel content, such as images, file transfer, text chat, game update packets, and so forth.
`createOffer()`
    
Initiates the creation of an SDP offer for the purpose of starting a new WebRTC connection to a remote peer. The SDP offer includes information about any `MediaStreamTrack` objects already attached to the WebRTC session, codec, and options supported by the browser, as well as any candidates already gathered by the ICE agent, for the purpose of being sent over the signaling channel to a potential peer to request a connection or to update the configuration of an existing connection.
`getConfiguration()`
    
Returns an object which indicates the current configuration of the connection.
`getIdentityAssertion()`
    
Initiates the gathering of an identity assertion and returns a `Promise` which resolves to an identity assertion encoded as a string. This has an effect only if `signalingState` is not `closed`.
`getReceivers()`
    
Returns an array of `RTCRtpReceiver` objects, each of which represents one RTP receiver.
`getSenders()`
    
Returns an array of `RTCRtpSender` objects, each of which represents the RTP sender responsible for transmitting one track's data.
`getStats()`
    
Returns a `Promise` which resolves with data providing statistics about either the overall connection or about the specified `MediaStreamTrack`.
`getTransceivers()`
    
Returns a list of all the `RTCRtpTransceiver` objects being used to send and receive data on the connection.
`removeTrack()`
    
Tells the local end of the connection to stop sending media from the specified track, without actually removing the corresponding `RTCRtpSender` from the list of senders as reported by `getSenders()`. If the track is already stopped, or is not in the connection's senders list, this method has no effect.
`restartIce()`
    
Allows to easily request that ICE candidate gathering be redone on both ends of the connection. This simplifies the process by allowing the same method to be used by either the caller or the receiver to trigger an ICE restart.
`setConfiguration()`
    
Sets the current configuration of the connection based on the values included in the specified object. This lets you change the ICE servers used by the connection and which transport policies to use.
`setIdentityProvider()`
    
Sets the Identity Provider (IdP) to the triplet given in parameter: its name, the protocol used to communicate with it and an username. The protocol and the username are optional.
`setLocalDescription()`
    
Changes the local description associated with the connection. This description specifies the properties of the local end of the connection, including the media format. It returns a `Promise` which is fulfilled once the description has been changed, asynchronously.
`setRemoteDescription()`
    
Sets the specified session description as the remote peer's current offer or answer. The description specifies the properties of the remote end of the connection, including the media format. It returns a `Promise` which is fulfilled once the description has been changed, asynchronously.
### Obsolete methods
`addStream()` Deprecated Non-standard
    
Adds a `MediaStream` as a local source of audio or video. Instead of using this obsolete method, you should instead use `addTrack()` once for each track you wish to send to the remote peer.
`createDTMFSender()` Deprecated Non-standard
    
Creates a new `RTCDTMFSender`, associated to a specific `MediaStreamTrack`, that will be able to send DTMF phone signaling over the connection.
`removeStream()` Deprecated Non-standard
    
Removes a `MediaStream` as a local source of audio or video. Because this method is obsolete, you should instead use `removeTrack()`.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`connectionstatechange`
    
Sent when the overall connectivity status of the `RTCPeerConnection` changes.
`datachannel`
    
Sent when the remote peer adds an `RTCDataChannel` to the connection.
`icecandidate`
    
Sent to request that the specified candidate be transmitted to the remote peer.
`icecandidateerror`
    
Sent to the connection if an error occurred during ICE candidate gathering. The event describes the error.
`iceconnectionstatechange`
    
Sent when the state of the ICE connection changes, such as when it disconnects.
`icegatheringstatechange`
    
Sent when the ICE layer's gathering state, reflected by `iceGatheringState`, changes. This indicates whether ICE negotiation has not yet begun (`new`), has begun gathering candidates (`gathering`), or has completed (`complete`).
`negotiationneeded`
    
Sent when negotiation or renegotiation of the ICE connection needs to be performed; this can happen both when first opening a connection as well as when it is necessary to adapt to changing network conditions. The receiver should respond by creating an offer and sending it to the other peer.
`signalingstatechange`
    
Sent when the connection's ICE signaling state changes.
`track`
    
Sent after a new track has been added to one of the `RTCRtpReceiver` instances which comprise the connection.
### Obsolete events
`addstream` Deprecated Non-standard
    
Sent when a new `MediaStream` has been added to the connection. Instead of listening for this obsolete event, you should listen for `track` events; one is sent for each `MediaStreamTrack` added to the connection.
`removestream` Deprecated Non-standard
    
Sent when a `MediaStream` is removed from the connection. Instead of listening for this obsolete event, you should listen for `removetrack` events on each stream.
  * https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js
  * Get started with WebRTC
  * TutorRoom: Node.js HTML video capture, peer-to-peer video and file sharing application (source on GitHub)


# Picture-in-Picture API
The Picture-in-Picture API allow websites to create a floating, always-on-top video window. This allows users to continue consuming media while they interact with other sites or applications on their device.
Note: The Document Picture-in-Picture API extends the Picture-in-Picture API to allow the always-on-top window to be populated with any arbitrary HTML content, not just a video.
## Interfaces
`PictureInPictureWindow`
    
Represents the floating video window; contains `width` and `height` properties, and an `onresize` event handler property.
`PictureInPictureEvent`
    
Represents picture-in-picture-related events, including `enterpictureinpicture`, `leavepictureinpicture` and `resize`.
## Instance methods
The Picture-in-Picture API adds methods to the `HTMLVideoElement` and `Document` interfaces to allow toggling of the floating video window.
### Instance methods on the HTMLVideoElement interface
`HTMLVideoElement.requestPictureInPicture()`
    
Requests that the user agent enters the video into picture-in-picture mode
### Instance methods on the Document interface
`Document.exitPictureInPicture()`
    
Requests that the user agent returns the element in picture-in-picture mode back into its original box.
## Instance properties
The Picture-in-Picture API augments the `HTMLVideoElement`, `Document`, and `ShadowRoot` interfaces with properties that can be used to determine if the floating video window mode is supported and available, if picture-in-picture mode is currently active, and which video is floating.
### Instance properties on the HTMLVideoElement interface
`HTMLVideoElement.disablePictureInPicture`
    
The `disablePictureInPicture` property will provide a hint to the user agent to not suggest the picture-in-picture to users or to request it automatically.
### Instance properties on the Document interface
`Document.pictureInPictureEnabled`
    
The `pictureInPictureEnabled` property tells you whether or not it is possible to engage picture-in-picture mode. This is `false` if picture-in-picture mode is not available for any reason (e.g., the `"picture-in-picture"` feature has been disallowed, or picture-in-picture mode is not supported).
### Instance properties on the Document or ShadowRoot interfaces
`Document.pictureInPictureElement` / `ShadowRoot.pictureInPictureElement`
    
The `pictureInPictureElement` property tells you which `Element` is currently being displayed in the floating window (or in the shadow DOM). If this is `null`, the document (or shadow DOM) has no node currently in picture-in-picture mode.
## Events
The Picture-in-Picture API defines three events, which can be used to detect when picture-in-picture mode is toggled and when the floating video window is resized.
`enterpictureinpicture`
    
Sent to a `HTMLVideoElement` when it enters picture-in-picture mode.
`leavepictureinpicture`
    
Sent to a `HTMLVideoElement` when it leaves picture-in-picture mode.
`resize`
    
Sent to a `PictureInPictureWindow` when it changes size.
## Adding Controls
If media action handlers have been set via the Media Session API, then appropriate controls for those actions will be added by the browser to the picture-in-picture overlay. For example, if a `"nexttrack"` action has been set, then a skip button might be displayed in the picture-in-picture view. There is no support for adding custom HTML buttons or controls.
## Controlling styling
The `:picture-in-picture` CSS pseudo-class matches the video element currently in picture-in-picture mode, allowing you to configure your stylesheets to automatically adjust the size, style, or layout of content when a video switches back and forth between picture-in-picture and traditional presentation modes.
## Controlling access
The availability of picture-in-picture mode can be controlled using Permissions Policy. The picture-in-picture mode feature is identified by the string `"picture-in-picture"`, with a default allowlist value of `*`, meaning that picture-in-picture mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document.
## Examples
>
### Toggling picture-in-picture mode
In this example, we have a `<video>` element in a web page, a `<button>` to toggle picture-in-picture, and an element to log information relevant for the example. The `<button>` element is `disabled` initially until we've determined browser support.
    
    <video
      src="/shared-assets/videos/friday.mp4"
      id="video"
      muted
      controls
      loop
      width="300"></video>
    
    <button id="pip-button" disabled>Toggle PiP</button>
    <pre id="log"></pre>
    
We first check if the browser supports PiP with `document.pictureInPictureEnabled`, and if it's not supported, we log that information to the `<pre>` element. If it is available in the browser, we can enable the toggle to enter and exit PiP.
For the controls, an event listener on the `<button>` element calls a `togglePictureInPicture()` function that we've defined. In `togglePictureInPicture()`, an `if` statement checks the value of the `document`'s `pictureInPictureElement` attribute.
  * If the value is `null`, no video is in a floating window, so we can request the video to enter picture-in-picture mode. We do that by calling `HTMLVideoElement.requestPictureInPicture()` on the `<video>` element.
  * If the value is not `null`, an element is currently in picture-in-picture mode. We can then call `document.exitPictureInPicture()` to bring the video back into its initial box, exiting picture-in-picture mode.


    
    const video = document.getElementById("video");
    const pipButton = document.getElementById("pip-button");
    const log = document.getElementById("log");
    
    if (document.pictureInPictureEnabled) {
      pipButton.removeAttribute("disabled");
    } else {
      log.innerText = "PiP not supported. Check browser compatibility for details.";
    }
    
    function togglePictureInPicture() {
      if (document.pictureInPictureElement) {
        document.exitPictureInPicture();
      } else {
        video.requestPictureInPicture();
      }
    }
    
    pipButton.addEventListener("click", togglePictureInPicture);
    
    
    :picture-in-picture {
      outline: 5px dashed green;
    }
    
Clicking the "Toggle PiP" button lets the user toggle between playing the video in the page and in a floating window:
  * `HTMLVideoElement.requestPictureInPicture()`
  * `HTMLVideoElement.disablePictureInPicture`
  * `Document.pictureInPictureEnabled`
  * `Document.exitPictureInPicture()`
  * `Document.pictureInPictureElement`
  * `:picture-in-picture`
  * The Document Picture-in-Picture API


# HTMLMetaElement
The `HTMLMetaElement` interface contains descriptive metadata about a document provided in HTML as `<meta>` elements. This interface inherits all of the properties and methods described in the `HTMLElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLMetaElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`<meta#charset>`
    
The character encoding for a HTML document.
`HTMLMetaElement.content`
    
The 'value' part of the name-value pairs of the document metadata.
`HTMLMetaElement.httpEquiv`
    
The name of the pragma directive, the HTTP response header, for a document.
`HTMLMetaElement.media`
    
The media context for a `theme-color` metadata property.
`HTMLMetaElement.name`
    
The 'name' part of the name-value pairs defining the named metadata of a document.
`HTMLMetaElement.scheme` Deprecated
    
Defines the scheme of the value in the `HTMLMetaElement.content` attribute. This is deprecated and should not be used on new web pages.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
## Examples
The following two examples show a general approach to using the `HTMLMetaElement` interface. For specific examples, see the pages for the individual properties as described in the Instance properties section above.
### Setting the page description metadata
The following example creates a new `<meta>` element with a `name` attribute set to `description`. The `content` attribute sets a description of the document and is appended to the document `<head>`:
    
    const meta = document.createElement("meta");
    meta.name = "description";
    meta.content =
      "The <meta> element can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.";
    document.head.appendChild(meta);
    
### Setting the viewport metadata
The following example shows how to create a new `<meta>` element with a `name` attribute set to `viewport`. The `content` attribute sets the viewport size and is appended to the document `<head>`:
    
    const meta = document.createElement("meta");
    meta.name = "viewport";
    meta.content = "width=device-width, initial-scale=1";
    document.head.appendChild(meta);
    
For more information on setting the viewport, see Viewport basics.
  * The HTML element implementing this interface: `<meta>`


# RTCSctpTransport
The `RTCSctpTransport` interface provides information which describes a Stream Control Transmission Protocol (SCTP) transport. This provides information about limitations of the transport, but also provides a way to access the underlying Datagram Transport Layer Security (DTLS) transport over which SCTP packets for all of an `RTCPeerConnection`'s data channels are sent and received.
You don't create `RTCSctpTransport` objects yourself; instead, you get access to the `RTCSctpTransport` for a given `RTCPeerConnection` through its `sctp` property.
Possibly the most useful property on this interface is its `maxMessageSize` property, which you can use to determine the upper limit on the size of messages you can send over a data channel on the peer connection.
EventTarget  RTCSctpTransport 
## Instance properties
Also inherits properties from: `EventTarget`.
`RTCSctpTransport.maxChannels` Read only
    
An integer value indicating the maximum number of `RTCDataChannel` objects that can be opened simultaneously.
`RTCSctpTransport.maxMessageSize` Read only
    
An integer value indicating the maximum size, in bytes, of a message which can be sent using the `RTCDataChannel.send()` method.
`RTCSctpTransport.state` Read only
    
A string enumerated value indicating the state of the SCTP transport.
`RTCSctpTransport.transport` Read only
    
An `RTCDtlsTransport` object representing the DTLS transport used for the transmission and receipt of data packets.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`statechange`
    
Sent when the `RTCSctpTransport.state` changes.
## Instance methods
This interface has no methods, but inherits methods from: `EventTarget`.
## Example
TBD
  * WebRTC
  * `RTCPeerConnection`
  * `RTCPeerConnection.sctp`


# PageTransitionEvent
The `PageTransitionEvent` event object is available inside handler functions for the `pageshow` and `pagehide` events, fired when a document is being loaded or unloaded.
Event  PageTransitionEvent 
## Constructor
`PageTransitionEvent()`
    
Creates a new `PageTransitionEvent` object.
## Instance properties
This interface also inherits properties from its parent, `Event`.
`PageTransitionEvent.persisted` Read only
    
Indicates if the document is loading from a cache.
## Example
>
### HTML
    
    <!doctype html>
    <html lang="en-US">
      <body></body>
    </html>
    
### JavaScript
    
    window.addEventListener("pageshow", (event) => {
      if (event.persisted) {
        alert("The page was cached by the browser");
      } else {
        alert("The page was NOT cached by the browser");
      }
    });
    
  * `pageshow` event
  * `pagehide` event


# WebSocketStream
Note: This feature is available in Web Workers.
The `WebSocketStream` interface of the WebSockets API is a promise-based API for connecting to a WebSocket server. It uses streams to send and receive data on the connection, and can therefore take advantage of stream backpressure automatically, regulating the speed of reading or writing to avoid bottlenecks in the application.
## Constructor
`WebSocketStream()` Experimental
    
Creates a new `WebSocketStream` object instance.
## Instance properties
`url` Read only Experimental
    
Returns the URL of the WebSocket server that the `WebSocketStream` instance was created with.
`closed` Read only Experimental
    
Returns a `Promise` that fulfills with an object once the socket connection is closed. The object contains the closing code and reason as sent by the server.
`opened` Read only Experimental
    
Returns a `Promise` that fulfills with an object once the socket connection is successfully opened. Among other features, this object contains a `ReadableStream` and a `WritableStream` instance for receiving and sending data on the connection.
## Instance methods
`close()` Experimental
    
Closes the WebSocket connection.
## Examples
    
    const output = document.querySelector("#output");
    
    function writeToScreen(message) {
      const pElem = document.createElement("p");
      pElem.textContent = message;
      output.appendChild(pElem);
    }
    
    if (!("WebSocketStream" in self)) {
      writeToScreen("Your browser does not support WebSocketStream");
    } else {
      const wsURL = "ws://127.0.0.1/";
      const wss = new WebSocketStream(wsURL);
    
      console.log(wss.url);
    
      async function start() {
        const { readable, writable, extensions, protocol } = await wss.opened;
        writeToScreen("CONNECTED");
        closeBtn.disabled = false;
        const reader = readable.getReader();
        const writer = writable.getWriter();
    
        writer.write("ping");
        writeToScreen("SENT: ping");
    
        while (true) {
          const { value, done } = await reader.read();
          writeToScreen(`RECEIVED: ${value}`);
          if (done) {
            break;
          }
    
          setTimeout(() => {
            writer.write("ping");
            writeToScreen("SENT: ping");
          }, 5000);
        }
      }
    
      start();
    }
    
See Using WebSocketStream to write a client for a complete example with full explanation.
Not currently a part of any specification. See https://github.com/whatwg/websockets/pull/48 for standardization progress.
  * WebSocketStream: integrating streams with the WebSocket API, developer.chrome.com (2020)


# Gyroscope
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Gyroscope` interface of the Sensor APIs provides on each reading the angular velocity of the device along all three axes.
To use this sensor, the user must grant permission to the `'gyroscope'` device sensor through the Permissions API. In addition, this feature may be blocked by a Permissions Policy set on your server.
EventTarget  Sensor  Gyroscope 
## Constructor
`Gyroscope()`
    
Creates a new `Gyroscope` object.
## Instance properties
`Gyroscope.x` Read only
    
Returns a double, containing the angular velocity of the device along the device's x axis.
`Gyroscope.y` Read only
    
Returns a double, containing the angular velocity of the device along the device's y axis.
`Gyroscope.z` Read only
    
Returns a double, containing the angular velocity of the device along the device's z axis.
## Instance methods
`Gyroscope` doesn't have own methods. However, it inherits methods from its parent interfaces, `Sensor` and `EventTarget`.
## Events
`Gyroscope` doesn't have own events. However, it inherits events from its parent interface, `Sensor`.
## Example
The gyroscope is typically read in the `reading` event callback. In the example below this occurs sixty times a second.
    
    let gyroscope = new Gyroscope({ frequency: 60 });
    
    gyroscope.addEventListener("reading", (e) => {
      console.log(`Angular velocity along the X-axis ${gyroscope.x}`);
      console.log(`Angular velocity along the Y-axis ${gyroscope.y}`);
      console.log(`Angular velocity along the Z-axis ${gyroscope.z}`);
    });
    gyroscope.start();
    
# MediaStream Image Capture API
The MediaStream Image Capture API is an API for capturing images or videos from a photographic device. In addition to capturing data, it also allows you to retrieve information about device capabilities such as image size, red-eye reduction and whether or not there is a flash and what they are currently set to. Conversely, the API allows the capabilities to be configured within the constraints what the device allows.
## MediaStream image capture concepts and usage
The process of retrieving an image or video stream happens as described below. The example code is adapted from Chrome's Image Capture examples.
First, get a reference to a device by calling `MediaDevices.getUserMedia()`. The example below says give me whatever video device is available, though the `getUserMedia()` method allows more specific capabilities to be requested. This method returns a `Promise` that resolves with a `MediaStream` object.
    
    navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
      // Do something with the stream.
    });
    
Next, isolate the visual part of the media stream. Do this by calling `MediaStream.getVideoTracks()`. This returns an array of `MediaStreamTrack` objects. The code below assumes that the first item in the `MediaStreamTrack` array is the one to use. You can use the properties of the `MediaStreamTrack` objects to select the one you need.
    
    const track = mediaStream.getVideoTracks()[0];
    
At this point, you might want to configure the device capabilities before capturing an image. You can do this by calling `applyConstraints()` on the track object before doing anything else.
    
    let zoom = document.querySelector("#zoom");
    const capabilities = track.getCapabilities();
    // Check whether zoom is supported or not.
    if (!capabilities.zoom) {
      return;
    }
    track.applyConstraints({ advanced: [{ zoom: zoom.value }] });
    
Finally, pass the `MediaStreamTrack` object to the `ImageCapture()` constructor. Though a `MediaStream` holds several types of tracks and provides multiple methods for retrieving them, the ImageCapture constructor will throw a `DOMException` of type `NotSupportedError` if `MediaStreamTrack.kind` is not `"video"`.
    
    let imageCapture = new ImageCapture(track);
    
## Interfaces
`ImageCapture`
    
An interface for capturing images from a photographic device referenced through a valid `MediaStreamTrack`.
  * `MediaStream`
  * `MediaStreamTrack`


# PageSwapEvent
The `PageSwapEvent` event object is made available inside handler functions for the `pageswap` event.
The `pageswap` event is fired when you navigate across documents, when the previous document is about to unload. During a cross-document navigation, the `PageSwapEvent` event object allows you to manipulate the related view transition (providing access to the relevant `ViewTransition` object) from the document being navigated from, if a view transition was triggered by the navigation. It also provides access to information on the navigation type and current and destination documents.
## Constructor
`PageSwapEvent()`
    
Creates a new `PageSwapEvent` object instance.
## Instance properties
`activation` Read only
    
Contains a `NavigationActivation` object containing the navigation type and current and destination document history entries for a same-origin navigation. If the navigation has a cross-origin URL anywhere in the redirect chain, it returns `null`.
`viewTransition` Read only
    
Contains a `ViewTransition` object representing the active view transition for the cross-document navigation.
## Examples
    
    window.addEventListener("pageswap", async (e) => {
      // Only run this if an active view transition exists
      if (e.viewTransition) {
        const currentUrl = e.activation.from?.url
          ? new URL(e.activation.from.url)
          : null;
        const targetUrl = new URL(e.activation.entry.url);
    
        // Going from profile page to homepage
        // ~> The big img and title are the ones!
        if (isProfilePage(currentUrl) && isHomePage(targetUrl)) {
          // Set view-transition-name values on the elements to animate
          document.querySelector(`#detail main h1`).style.viewTransitionName =
            "name";
          document.querySelector(`#detail main img`).style.viewTransitionName =
            "avatar";
    
          // Remove view-transition-names after snapshots have been taken
          // Stops naming conflicts resulting from the page state persisting in BFCache
          await e.viewTransition.finished;
          document.querySelector(`#detail main h1`).style.viewTransitionName =
            "none";
          document.querySelector(`#detail main img`).style.viewTransitionName =
            "none";
        }
    
        // Going to profile page
        // ~> The clicked items are the ones!
        if (isProfilePage(targetUrl)) {
          const profile = extractProfileNameFromUrl(targetUrl);
    
          // Set view-transition-name values on the elements to animate
          document.querySelector(`#${profile} span`).style.viewTransitionName =
            "name";
          document.querySelector(`#${profile} img`).style.viewTransitionName =
            "avatar";
    
          // Remove view-transition-names after snapshots have been taken
          // Stops naming conflicts resulting from the page state persisting in BFCache
          await e.viewTransition.finished;
          document.querySelector(`#${profile} span`).style.viewTransitionName =
            "none";
          document.querySelector(`#${profile} img`).style.viewTransitionName =
            "none";
        }
      }
    });
    
Note: See List of Chrome DevRel team members for the live demo this code is taken from.
  * View Transition API


# ExtendableMessageEvent
Note: This feature is only available in Service Workers.
The `ExtendableMessageEvent` interface of the Service Worker API represents the event object of a `message` event fired on a service worker (when a message is received on the `ServiceWorkerGlobalScope` from another context) — extends the lifetime of such events.
This interface inherits from the `ExtendableEvent` interface.
Event  ExtendableEvent  ExtendableMessageEvent 
## Constructor
`ExtendableMessageEvent()`
    
Creates a new `ExtendableMessageEvent` object instance.
## Instance properties
Inherits properties from its parent, `ExtendableEvent`.
`ExtendableMessageEvent.data` Read only
    
Returns the event's data. It can be any data type. If dispatched in `messageerror` event, the property will be `null`.
`ExtendableMessageEvent.origin` Read only
    
Returns the origin of the `Client` that sent the message.
`ExtendableMessageEvent.lastEventId` Read only
    
Represents, in server-sent events, the last event ID of the event source.
`ExtendableMessageEvent.source` Read only
    
Returns a reference to the `Client` object that sent the message.
`ExtendableMessageEvent.ports` Read only
    
Returns the array containing the `MessagePort` objects representing the ports of the associated message channel.
## Instance methods
Inherits methods from its parent, `ExtendableEvent`.
## Examples
In the below example a page gets a handle to the `ServiceWorker` object via `ServiceWorkerRegistration.active`, and then calls its `postMessage()` function.
    
    // in the page being controlled
    if (navigator.serviceWorker) {
      navigator.serviceWorker.register("service-worker.js");
    
      navigator.serviceWorker.addEventListener("message", (event) => {
        // event is a MessageEvent object
        console.log(`The service worker sent me a message: ${event.data}`);
      });
    
      navigator.serviceWorker.ready.then((registration) => {
        registration.active.postMessage("Hi service worker");
      });
    }
    
The service worker can receive the message by listening to the `message` event:
    
    // in the service worker
    addEventListener("message", (event) => {
      // event is an ExtendableMessageEvent object
      console.log(`The client sent me a message: ${event.data}`);
    
      event.source.postMessage("Hi client");
    });
    
  * Using Service Workers
  * Service workers basic code example
  * Channel Messaging


# CSSRule
The `CSSRule` interface represents a single CSS rule. There are several types of rules which inherit properties from `CSSRule`.
  * `CSSGroupingRule`
  * `CSSStyleRule`
  * `CSSImportRule`
  * `CSSMediaRule`
  * `CSSFontFaceRule`
  * `CSSPageRule`
  * `CSSNamespaceRule`
  * `CSSKeyframesRule`
  * `CSSKeyframeRule`
  * `CSSCounterStyleRule`
  * `CSSSupportsRule`
  * `CSSFontFeatureValuesRule`
  * `CSSFontPaletteValuesRule`
  * `CSSLayerBlockRule`
  * `CSSLayerStatementRule`
  * `CSSPropertyRule`
  * `CSSNestedDeclarations`


## Instance properties
The `CSSRule` interface specifies the properties common to all rules, while properties unique to specific rule types are specified in the more specialized interfaces for those rules' respective types.
`CSSRule.cssText`
    
Represents the textual representation of the rule, e.g., `"h1,h2 { font-size: 16pt }"` or `"@import 'url'"`. To access or modify parts of the rule (e.g., the value of "font-size" in the example) use the properties on the specialized interface for the rule's type (see above).
`CSSRule.parentRule` Read only
    
Returns the containing rule, otherwise `null`. E.g. if this rule is a style rule inside an `@media` block, the parent rule would be that `CSSMediaRule`.
`CSSRule.parentStyleSheet` Read only
    
Returns the `CSSStyleSheet` object for the style sheet that contains this rule
`CSSRule.type` Read only Deprecated
    
Returns one of the Type constants to determine which type of rule is represented.
## Examples
References to a `CSSRule` may be obtained by looking at a `CSSStyleSheet`'s `cssRules` list.
    
    let myRules = document.styleSheets[0].cssRules; // Returns a CSSRuleList
    console.log(myRules);
    
  * Using dynamic styling information


# FocusEvent
The `FocusEvent` interface represents focus-related events, including `focus`, `blur`, `focusin`, and `focusout`.
Event  UIEvent  FocusEvent 
## Constructor
`FocusEvent()`
    
Creates a `FocusEvent` event with the given parameters.
## Instance properties
This interface also inherits properties from its parent `UIEvent`, and indirectly from `Event`.
`FocusEvent.relatedTarget`
    
An `EventTarget` representing a secondary target for this event. In some cases (such as when tabbing in or out a page), this property may be set to `null` for security reasons.
## Instance methods
This interface has no specific methods. It inherits methods from its parent `UIEvent`, and indirectly from `Event`.
## Order of events
When focus is shifted from element A to element B, focus events are dispatched in the following order:
  1. `blur`: sent after element A loses focus.
  2. `focusout`: sent after the `blur` event.
  3. `focus`: sent after element B receives focus.
  4. `focusin`: sent after the `focus` event.


  * The `Event` base interface


# UIEvent
The `UIEvent` interface represents simple user interface events. It is part of the UI Events API, which includes various event types and interfaces related to user interactions.
`UIEvent` derives from `Event`. Although the `UIEvent.initUIEvent()` method is kept for backward compatibility, you should create a `UIEvent` object using the `UIEvent()` constructor.
Several interfaces are direct or indirect descendants of this one: `MouseEvent`, `TouchEvent`, `FocusEvent`, `KeyboardEvent`, `WheelEvent`, `InputEvent`, and `CompositionEvent`.
Event  UIEvent 
## Constructors
`UIEvent()`
    
Creates a `UIEvent` object.
## Instance properties
This interface also inherits properties of its parent, `Event`.
`UIEvent.detail` Read only
    
Returns a `long` with details about the event, depending on the event type.
`UIEvent.sourceCapabilities` Experimental Read only
    
Returns an instance of the `InputDeviceCapabilities` interface, which provides information about the physical device responsible for generating a touch event.
`UIEvent.view` Read only
    
Returns a WindowProxy that contains the view that generated the event.
`UIEvent.which` Deprecated Read only
    
Returns the numeric `keyCode` of the key pressed, or the character code (`charCode`) for an alphanumeric key pressed.
## Instance methods
This interface also inherits methods of its parent, `Event`.
`UIEvent.initUIEvent()` Deprecated
    
Initializes a `UIEvent` object. If the event has already been dispatched, this method does nothing.
  * UI Events API
  * Introduction to events
  * `Event`


# WebGLShader
Note: This feature is available in Web Workers.
The WebGLShader is part of the WebGL API and can either be a vertex or a fragment shader. A `WebGLProgram` requires both types of shaders.
WebGLObject  WebGLShader 
## Description
To create a WebGLShader use `WebGLRenderingContext.createShader`, then hook up the GLSL source code using `WebGLRenderingContext.shaderSource()`, and finally invoke `WebGLRenderingContext.compileShader()` to finish and compile the shader. At this point the WebGLShader is still not in a usable form and must still be attached to a `WebGLProgram`.
    
    function createShader(gl, sourceCode, type) {
      // Compiles either a shader of type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
      const shader = gl.createShader(type);
      gl.shaderSource(shader, sourceCode);
      gl.compileShader(shader);
    
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        const info = gl.getShaderInfoLog(shader);
        throw new Error(`Could not compile WebGL program. \n\n${info}`);
      }
      return shader;
    }
    
See `WebGLProgram` for information on attaching the shaders.
## Examples
>
### Creating a vertex shader
Note that there are many other strategies for writing and accessing shader source code strings. These example are for illustration purposes only.
    
    const vertexShaderSource =
      "attribute vec4 position;\n" +
      "void main() {\n" +
      "  gl_Position = position;\n" +
      "}\n";
    
    // Use the createShader function from the example above
    const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
    
### Creating a fragment shader
    
    const fragmentShaderSource = `void main() {
      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
    `;
    
    // Use the createShader function from the example above
    const fragmentShader = createShader(
      gl,
      fragmentShaderSource,
      gl.FRAGMENT_SHADER,
    );
    
  * `WebGLProgram`
  * `WebGLRenderingContext.attachShader()`
  * `WebGLRenderingContext.bindAttribLocation()`
  * `WebGLRenderingContext.compileShader()`
  * `WebGLRenderingContext.createProgram()`
  * `WebGLRenderingContext.createShader()`
  * `WebGLRenderingContext.deleteProgram()`
  * `WebGLRenderingContext.deleteShader()`
  * `WebGLRenderingContext.detachShader()`
  * `WebGLRenderingContext.getAttachedShaders()`
  * `WebGLRenderingContext.getProgramParameter()`
  * `WebGLRenderingContext.getProgramInfoLog()`
  * `WebGLRenderingContext.getShaderParameter()`
  * `WebGLRenderingContext.getShaderPrecisionFormat()`
  * `WebGLRenderingContext.getShaderInfoLog()`
  * `WebGLRenderingContext.getShaderSource()`
  * `WebGLRenderingContext.isProgram()`
  * `WebGLRenderingContext.isShader()`
  * `WebGLRenderingContext.linkProgram()`
  * `WebGLRenderingContext.shaderSource()`
  * `WebGLRenderingContext.useProgram()`
  * `WebGLRenderingContext.validateProgram()`


# RTCIceCandidateStats
The `RTCIceCandidateStats` dictionary of the WebRTC API is used to report statistics related to an `RTCIceCandidate`.
The statistics can be obtained by iterating the `RTCStatsReport` returned by `RTCPeerConnection.getStats()` until you find a report with the `type` of `local-candidate`.
## Instance properties
`address` Optional
    
A string containing the address of the candidate. This value may be an IPv4 address, an IPv6 address, or a fully-qualified domain name. This property was previously named `ip` and only accepted IP addresses. Corresponds to `RTCIceCandidate.address`.
`candidateType`
    
A string matching one of the values in `RTCIceCandidate.type`, indicating what kind of candidate the object provides statistics for.
`deleted`
    
A boolean indicating whether or not the candidate has been deleted or released.
`foundation` Optional Experimental
    
A string that uniquely identifies the candidate across multiple transports. Corresponds to `RTCIceCandidate.foundation`.
`port` Optional
    
The network port number used by the candidate. Corresponds to `RTCIceCandidate.port`.
`priority` Optional
    
The candidate's priority. Corresponds to `RTCIceCandidate.priority`.
`protocol` Optional
    
A string specifying the protocol (`tcp` or `udp`) used to transmit data on the `port`. Corresponds to `RTCIceCandidate.protocol`.
`relayProtocol`
    
A string specifying the protocol being used by a local ICE candidate to communicate with the TURN server.
`transportId`
    
A string uniquely identifying the transport object that was inspected in order to obtain the `RTCTransportStats` associated with the candidate corresponding to these statistics.
`url` Optional
    
A string specifying the URL of the ICE server from which the described candidate was obtained. This property is only available for local candidates.
`usernameFragment` Optional Experimental
    
A string containing the ICE username fragment ("ice-ufrag"). Corresponds to `RTCIceCandidate.usernameFragment`.
### Common instance properties
The following properties are common to all WebRTC statistics objects.
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"local-candidate"`, indicating the type of statistics that the object contains.
## Examples
Given a variable `myPeerConnection`, which is an instance of `RTCPeerConnection`, the code below uses `await` to wait for the statistics report, and then iterates it using `RTCStatsReport.forEach()`. It then filters the dictionaries for just those reports that have the type of `local-candidate` and logs the result.
    
    const stats = await myPeerConnection.getStats();
    
    stats.forEach((report) => {
      if (report.type === "local-candidate") {
        // Log the ICE candidate information
        console.log(report);
      }
    });
    
# RTCRtpScriptTransformer
The `RTCRtpScriptTransformer` interface of the WebRTC API provides a worker-side Stream API interface that a WebRTC Encoded Transform can use to modify encoded media frames in the incoming and outgoing WebRTC pipelines.
Note: This feature is available in Dedicated Web Workers.
## Instance properties
`RTCRtpScriptTransformer.readable` Read only
    
A `ReadableStream` on which encoded frames from the WebRTC sender or receiver pipelines may be enqueued.
`RTCRtpScriptTransformer.writable` Read only
    
A `WritableStream` that encoded frames should be piped to.
`RTCRtpScriptTransformer.options` Read only
    
Options passed from the `RTCRtpScriptTransform` constructor, which are used to configure transform code based on whether incoming or outgoing frames are being processed.
## Instance methods
`RTCRtpScriptTransformer.generateKeyFrame()`
    
Requests a video encoder generate a key frame. May be called by a transformer in the sender pipeline when processing outgoing frames.
`RTCRtpScriptTransformer.sendKeyFrameRequest()`
    
Requests the sender send a key frame. May be called by a transformer in the receiver pipeline when processing incoming encoded video frames.
## Description
A `RTCRtpScriptTransformer` instance is created as part of construction of an associated `RTCRtpScriptTransform`, which specifies the worker in which the transformer is created and options that will be passed to it.
The transformer is made available to a worker through the `rtctransform` event `transformer` property. This event is fired on construction of the associated `RTCRtpScriptTransform` and when an encoded frame is enqueued on the `RTCRtpScriptTransformer.readable` from a codec (outgoing) or from the packetizer (incoming).
The transformer exposes a `readable` and `writable` stream into the worker, along with an `options` object provided to the `RTCRtpScriptTransform` on construction. When the associated `RTCRtpScriptTransform` is assigned to a `RTCRtpSender` or `RTCRtpReceiver`, encoded media frames from the WebRTC sender or receiver pipelines are enqueued on the `readable` stream.
A WebRTC Encoded Transform must read encoded frames from `transformer.readable`, modify them as needed, and write them to `transformer.writable` in the same order, and without any duplication. The `transformer.options` allow an appropriate transform function to be used, based on whether the encoded media frames are incoming or outgoing. The transform is usually implemented by piping frames from the `readable` through one or more `TransformStream` instances to the `writable`, transforming them as needed.
The interface also provides methods for a sender to generate get a video encoder to generate a new keyframe, or for a receiver to request a new key frame from the sender's encoder (video encoders commonly send a key frame containing the full information needed to construct an image, and subsequently send delta frames containing just the information that has changed since the previous frame).
These methods are required in cases where a recipient would be unable to decode incoming frames until they receive a new key frame. For example, a new recipient joining a conference call will not be able see video until they have received a new key frame, since delta frames can only be decoded if you have the last key frame and all subsequent delta frames. Similarly, if frames are encrypted for a recipient, they will only be able to decode frames once they have received their first encrypted key frame.
## Examples
This example shows the code for a WebRTC Encoded Transform running in a worker.
The code uses `addEventListener()` to register a handler function for the `rtctransform` event, which makes the `RTCRtpScriptTransformer` available as `event.transformer`.
The handler creates a `TransformStream` and pipes frames from the `event.transformer.readable` through it to `event.transformer.writable`. The transform stream `transform()` implementation is called for each encoded frame queued on the stream: it can read the data from the frame and in this case negates the bytes and then enqueues the modifiable frame on the stream.
    
    addEventListener("rtctransform", (event) => {
      const transform = new TransformStream({
        start() {}, // Called on startup.
        flush() {}, // Called when the stream is about to be closed.
        async transform(encodedFrame, controller) {
          // Reconstruct the original frame.
          const view = new DataView(encodedFrame.data);
    
          // Construct a new buffer
          const newData = new ArrayBuffer(encodedFrame.data.byteLength);
          const newView = new DataView(newData);
    
          // Negate all bits in the incoming frame
          for (let i = 0; i < encodedFrame.data.byteLength; ++i) {
            newView.setInt8(i, ~view.getInt8(i));
          }
    
          encodedFrame.data = newData;
          controller.enqueue(encodedFrame);
        },
      });
      event.transformer.readable
        .pipeThrough(transform)
        .pipeTo(event.transformer.writable);
    });
    
The only special things to note about the `TransformStream` above are that it queues encoded media frames (`RTCEncodedVideoFrame` or `RTCEncodedAudioFrame`) rather than arbitrary "chunks", and that `writableStrategy` and `readableStrategy` properties are not defined (because the queuing strategy is entirely managed by the user agent).
A transform can run in either the incoming or outgoing WebRTC pipelines. This doesn't matter in the code above, because the same algorithm might be used in the sender to negate the frames, and in the receiver to revert them. If the sender and receiver pipelines need to apply a different transform algorithm then information about the current pipeline must be passed from the main thread. This is done by setting an `options` argument in the corresponding `RTCRtpScriptTransform` constructor, which is then made available to the worker in `RTCRtpScriptTransformer.options`.
Below we use the `transformer.options` to choose either a sender transform or a receiver transform. Note that the properties of the object are arbitrary (provided the values can be serialized) and it is also possible to transfer a `MessageChannel` and use it to communicate with a transform at runtime in order to, for example, share encryption keys.
    
    // Code to instantiate transform and attach them to sender/receiver pipelines.
    onrtctransform = (event) => {
      let transform;
      if (event.transformer.options.name === "senderTransform")
        transform = createSenderTransform();
      // returns a TransformStream (not shown)
      else if (event.transformer.options.name === "receiverTransform")
        transform = createReceiverTransform();
      // returns a TransformStream (not shown)
      else return;
      event.transformer.readable
        .pipeThrough(transform)
        .pipeTo(event.transformer.writable);
    };
    
Note that the above code is part of more complete examples provided in Using WebRTC Encoded Transforms.
  * Using WebRTC Encoded Transforms
  * `TransformStream`


# CacheStorage
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `CacheStorage` interface represents the storage for `Cache` objects.
The interface:
  * Provides a master directory of all the named caches that can be accessed by a `ServiceWorker` or other type of worker or `window` scope (you're not limited to only using it with service workers).
  * Maintains a mapping of string names to corresponding `Cache` objects.


Use `CacheStorage.open()` to obtain a `Cache` instance.
Use `CacheStorage.match()` to check if a given `Request` is a key in any of the `Cache` objects that the `CacheStorage` object tracks.
You can access `CacheStorage` through the `Window.caches` property in windows or through the `WorkerGlobalScope.caches` property in workers.
Note: `CacheStorage` always rejects with a `SecurityError` on untrusted origins (i.e., those that aren't using HTTPS, although this definition will likely become more complex in the future.) When testing on Firefox, you can get around this by checking the Enable Service Workers over HTTP (when toolbox is open) option in the Firefox DevTools options/gear menu. Furthermore, because `CacheStorage` requires file-system access, it may be unavailable in private mode in Firefox.
Note: `CacheStorage.match()` is a convenience method. Equivalent functionality to match a cache entry can be implemented by returning an array of cache names from `CacheStorage.keys()`, opening each cache with `CacheStorage.open()`, and matching the one you want with `Cache.match()`.
## Instance methods
`CacheStorage.match()`
    
Checks if a given `Request` is a key in any of the `Cache` objects that the `CacheStorage` object tracks, and returns a `Promise` that resolves to that match.
`CacheStorage.has()`
    
Returns a `Promise` that resolves to `true` if a `Cache` object matching the `cacheName` exists.
`CacheStorage.open()`
    
Returns a `Promise` that resolves to the `Cache` object matching the `cacheName` (a new cache is created if it doesn't already exist.)
`CacheStorage.delete()`
    
Finds the `Cache` object matching the `cacheName`, and if found, deletes the `Cache` object and returns a `Promise` that resolves to `true`. If no `Cache` object is found, it resolves to `false`.
`CacheStorage.keys()`
    
Returns a `Promise` that will resolve with an array containing strings corresponding to all of the named `Cache` objects tracked by the `CacheStorage`. Use this method to iterate over a list of all the `Cache` objects.
## Examples
This code snippet is from the MDN simple service worker example (see simple service worker running live.) This service worker script waits for an `install` event to fire, then runs `waitUntil` to handle the install process for the app. This consists of calling `CacheStorage.open` to create a new cache, then using `Cache.addAll` to add a series of assets to it.
In the second code block, we wait for a `FetchEvent` to fire. We construct a custom response like so:
  1. Check whether a match for the request is found in the CacheStorage. If so, serve that.
  2. If not, fetch the request from the network, then also open the cache created in the first block and add a clone of the request to it using `Cache.put` (`cache.put(event.request, response.clone())`.)
  3. If this fails (e.g., because the network is down), return a fallback response.


Finally, return whatever the custom response ended up being equal to, using `FetchEvent.respondWith`.
    
    self.addEventListener("install", (event) => {
      event.waitUntil(
        caches
          .open("v1")
          .then((cache) =>
            cache.addAll([
              "/",
              "/index.html",
              "/style.css",
              "/app.js",
              "/image-list.js",
              "/star-wars-logo.jpg",
              "/gallery/bountyHunters.jpg",
              "/gallery/myLittleVader.jpg",
              "/gallery/snowTroopers.jpg",
            ]),
          ),
      );
    });
    
    self.addEventListener("fetch", (event) => {
      event.respondWith(
        caches.match(event.request).then((response) => {
          // caches.match() always resolves
          // but in case of success response will have value
          if (response !== undefined) {
            return response;
          }
          return fetch(event.request)
            .then((response) => {
              // response may be used only once
              // we need to save clone to put one copy in cache
              // and serve second one
              let responseClone = response.clone();
    
              caches
                .open("v1")
                .then((cache) => cache.put(event.request, responseClone));
              return response;
            })
            .catch(() => caches.match("/gallery/myLittleVader.jpg"));
        }),
      );
    });
    
This snippet shows how the API can be used outside of a service worker context, and uses the `await` operator for much more readable code.
    
    // Try to get data from the cache, but fall back to fetching it live.
    async function getData() {
      const cacheVersion = 1;
      const cacheName = `myapp-${cacheVersion}`;
      const url = "https://jsonplaceholder.typicode.com/todos/1";
      let cachedData = await getCachedData(cacheName, url);
    
      if (cachedData) {
        console.log("Retrieved cached data");
        return cachedData;
      }
    
      console.log("Fetching fresh data");
    
      const cacheStorage = await caches.open(cacheName);
      await cacheStorage.add(url);
      cachedData = await getCachedData(cacheName, url);
      await deleteOldCaches(cacheName);
    
      return cachedData;
    }
    
    // Get data from the cache.
    async function getCachedData(cacheName, url) {
      const cacheStorage = await caches.open(cacheName);
      const cachedResponse = await cacheStorage.match(url);
    
      if (!cachedResponse || !cachedResponse.ok) {
        return false;
      }
    
      return await cachedResponse.json();
    }
    
    // Delete any old caches to respect user's disk space.
    async function deleteOldCaches(currentCache) {
      const keys = await caches.keys();
    
      for (const key of keys) {
        const isOurCache = key.startsWith("myapp-");
        if (currentCache === key || !isOurCache) {
          continue;
        }
        caches.delete(key);
      }
    }
    
    try {
      const data = await getData();
      console.log({ data });
    } catch (error) {
      console.error({ error });
    }
    
  * Using Service Workers
  * `Cache`
  * `Window.caches` and `WorkerGlobalScope.caches`
  * Private Browsing / Incognito modes


# Event
Note: This feature is available in Web Workers.
The `Event` interface represents an event which takes place on an `EventTarget`.
An event can be triggered by the user action e.g., clicking the mouse button or tapping keyboard, or generated by APIs to represent the progress of an asynchronous task. It can also be triggered programmatically, such as by calling the `HTMLElement.click()` method of an element, or by defining the event, then sending it to a specified target using `EventTarget.dispatchEvent()`.
There are many types of events, some of which use other interfaces based on the main `Event` interface. `Event` itself contains the properties and methods which are common to all events.
Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. Event-handlers are usually connected (or "attached") to various HTML elements (such as `<button>`, `<div>`, `<span>`, etc.) using `EventTarget.addEventListener()`, and this generally replaces using the old HTML event handler attributes. Further, when properly added, such handlers can also be disconnected if needed using `removeEventListener()`.
Note: One element can have several such handlers, even for the exact same event—particularly if separate, independent code modules attach them, each for its own independent purposes. (For example, a webpage with an advertising-module and statistics-module both monitoring video-watching.)
When there are many nested elements, each with its own handler(s), event processing can become very complicated—especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the Event bubbling settings of each handler triggered.
## Interfaces based on Event
Below is a list of interfaces which are based on the main `Event` interface, with links to their respective documentation in the MDN API reference.
Note that all event interfaces have names which end in "Event".
  * `AnimationEvent`
  * `AudioProcessingEvent` Deprecated
  * `BeforeUnloadEvent`
  * `BlobEvent`
  * `ClipboardEvent`
  * `CloseEvent`
  * `CompositionEvent`
  * `CustomEvent`
  * `DeviceMotionEvent`
  * `DeviceOrientationEvent`
  * `DragEvent`
  * `ErrorEvent`
  * `FetchEvent`
  * `FocusEvent`
  * `FontFaceSetLoadEvent`
  * `FormDataEvent`
  * `GamepadEvent`
  * `HashChangeEvent`
  * `HIDInputReportEvent`
  * `IDBVersionChangeEvent`
  * `InputEvent`
  * `KeyboardEvent`
  * `MediaStreamEvent` Deprecated
  * `MessageEvent`
  * `MouseEvent`
  * `MutationEvent` Deprecated
  * `OfflineAudioCompletionEvent`
  * `PageTransitionEvent`
  * `PaymentRequestUpdateEvent`
  * `PointerEvent`
  * `PopStateEvent`
  * `ProgressEvent`
  * `RTCDataChannelEvent`
  * `RTCPeerConnectionIceEvent`
  * `StorageEvent`
  * `SubmitEvent`
  * `TimeEvent`
  * `TouchEvent`
  * `TrackEvent`
  * `TransitionEvent`
  * `UIEvent`
  * `WebGLContextEvent`
  * `WheelEvent`


## Constructor
`Event()`
    
Creates an `Event` object, returning it to the caller.
## Instance properties
`Event.bubbles` Read only
    
A boolean value indicating whether or not the event bubbles up through the DOM.
`Event.cancelable` Read only
    
A boolean value indicating whether the event is cancelable.
`Event.composed` Read only
    
A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
`Event.currentTarget` Read only
    
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
`Event.defaultPrevented` Read only
    
Indicates whether or not the call to `event.preventDefault()` canceled the event.
`Event.eventPhase` Read only
    
Indicates which phase of the event flow is being processed. It is one of the following numbers: `NONE`, `CAPTURING_PHASE`, `AT_TARGET`, `BUBBLING_PHASE`.
`Event.isTrusted` Read only
    
Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).
`Event.srcElement` Read only Deprecated
    
An alias for the `Event.target` property. Use `Event.target` instead.
`Event.target` Read only
    
A reference to the object to which the event was originally dispatched.
`Event.timeStamp` Read only
    
The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a `DOMHighResTimeStamp` instead.
`Event.type` Read only
    
The name identifying the type of the event.
### Legacy and non-standard properties
`Event.cancelBubble` Deprecated
    
A historical alias to `Event.stopPropagation()` that should be used instead. Setting its value to `true` before returning from an event handler prevents propagation of the event.
`Event.explicitOriginalTarget` Non-standard Read only
    
The explicit original target of the event.
`Event.originalTarget` Non-standard Read only
    
The original target of the event, before any retargetings.
`Event.returnValue` Deprecated
    
A historical property still supported in order to ensure existing sites continue to work. Use `Event.preventDefault()` and `Event.defaultPrevented` instead.
`Event.scoped` Read only Deprecated
    
A boolean value indicating whether the given event will bubble across through the shadow root into the standard DOM. Use `composed` instead.
## Instance methods
`Event.composedPath()`
    
Returns the event's path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its `ShadowRoot.mode` closed.
`Event.preventDefault()`
    
Cancels the event (if it is cancelable).
`Event.stopImmediatePropagation()`
    
For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
`Event.stopPropagation()`
    
Stops the propagation of events further along in the DOM.
### Deprecated methods
`Event.initEvent()` Deprecated
    
Initializes the value of an Event created. If the event has already been dispatched, this method does nothing. Use the constructor (`Event()` instead).
  * Event index
  * Learn: Introduction to events
  * Learn: Event bubbling
  * Creating and triggering custom events


# WEBGL_compressed_texture_etc extension
The `WEBGL_compressed_texture_etc` extension is part of the WebGL API and exposes 10 ETC/EAC compressed texture formats.
Compressed textures reduce the amount of memory needed to store a texture on the GPU, allowing for higher resolution textures or more of the same resolution textures.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is available to both, WebGL1 and WebGL2 contexts.
## Constants
The compressed texture formats are exposed by 10 constants and can be used in two functions: `compressedTexImage2D()` and `compressedTexSubImage2D()`.
`ext.COMPRESSED_R11_EAC`
    
One-channel (red) unsigned format compression.
`ext.COMPRESSED_SIGNED_R11_EAC`
    
One-channel (red) signed format compression.
`ext.COMPRESSED_RG11_EAC`
    
Two-channel (red and green) unsigned format compression.
`ext.COMPRESSED_SIGNED_RG11_EAC`
    
Two-channel (red and green) signed format compression.
`ext.COMPRESSED_RGB8_ETC2`
    
Compresses RGB8 data with no alpha channel.
`ext.COMPRESSED_RGBA8_ETC2_EAC`
    
Compresses RGBA8 data. The RGB part is encoded the same as `RGB_ETC2`, but the alpha part is encoded separately.
`ext.COMPRESSED_SRGB8_ETC2`
    
Compresses sRGB8 data with no alpha channel.
`ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC`
    
Compresses sRGBA8 data. The sRGB part is encoded the same as `SRGB_ETC2`, but the alpha part is encoded separately.
`ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2`
    
Similar to `RGB8_ETC`, but with ability to punch through the alpha channel, which means to make it completely opaque or transparent.
`ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2`
    
Similar to `SRGB8_ETC`, but with ability to punch through the alpha channel, which means to make it completely opaque or transparent.
## Examples
    
    const ext = gl.getExtension("WEBGL_compressed_texture_etc");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.compressedTexImage2D(
      gl.TEXTURE_2D,
      0,
      ext.COMPRESSED_RGBA8_ETC2_EAC,
      512,
      512,
      0,
      textureData,
    );
    
### Compatibility notes
  * This extension was named `WEBGL_compressed_texture_es3` from Firefox 46 to Firefox 51 and used to be available on the WebGL 2 context by default – this is not the case anymore. You have to enable it on both, WebGL 1 and WebGL 2 contexts, in order to use it.


  * Ericsson Texture Compression – Wikipedia
  * `WEBGL_compressed_texture_etc1` (ETC1)
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.compressedTexImage2D()`
  * `WebGLRenderingContext.compressedTexSubImage2D()`
  * `WebGLRenderingContext.getParameter()`


# ServiceWorkerRegistration
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `ServiceWorkerRegistration` interface of the Service Worker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin.
The lifetime of a service worker registration is beyond that of the `ServiceWorkerRegistration` objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active `ServiceWorkerRegistration` objects.
EventTarget  ServiceWorkerRegistration 
## Instance properties
Also inherits properties from its parent interface, `EventTarget`.
`ServiceWorkerRegistration.active` Read only
    
Returns a service worker whose state is `activating` or `activated`. This is initially set to `null`. An active worker will control a `Client` if the client's URL falls within the scope of the registration (the `scope` option set when `ServiceWorkerContainer.register` is first called.)
`ServiceWorkerRegistration.backgroundFetch` Read only Experimental
    
Returns a reference to a `BackgroundFetchManager` object, which manages background fetch operations.
`ServiceWorkerRegistration.cookies` Read only
    
Returns a reference to the `CookieStoreManager` interface, which allows subscribe and unsubscribe to cookie change events.
`ServiceWorkerRegistration.index` Read only Experimental
    
Returns a reference to the `ContentIndex` interface, for managing indexed content for offline viewing.
`ServiceWorkerRegistration.installing` Read only
    
Returns a service worker whose state is `installing`. This is initially set to `null`.
`ServiceWorkerRegistration.navigationPreload` Read only
    
Returns the instance of `NavigationPreloadManager` associated with the current service worker registration.
`ServiceWorkerRegistration.paymentManager` Read only Experimental
    
Returns a payment app's `PaymentManager` instance, which is used to manage various payment app functionality.
`ServiceWorkerRegistration.periodicSync` Read only Experimental
    
Returns a reference to the `PeriodicSyncManager` interface, which allows for registering of tasks to run at specific intervals.
`ServiceWorkerRegistration.pushManager` Read only
    
Returns a reference to the `PushManager` interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.
`ServiceWorkerRegistration.scope` Read only
    
Returns a string representing a URL that defines a service worker's registration scope; that is, the range of URLs the service worker can control.
`ServiceWorkerRegistration.sync` Read only
    
Returns a reference to the `SyncManager` interface, which manages background synchronization processes.
`ServiceWorkerRegistration.updateViaCache` Read only
    
Returns the value of the setting used to determine the circumstances in which the browser will consult the HTTP cache when it tries to update the service worker or any scripts that are imported via `importScripts()`. It can be one of the following: `imports`, `all`, or `none`.
`ServiceWorkerRegistration.waiting` Read only
    
Returns a service worker whose state is `installed`. This is initially set to `null`.
## Instance methods
Also inherits methods from its parent interface, `EventTarget`.
`ServiceWorkerRegistration.getNotifications()`
    
Returns a list of the notifications in the order that they were created from the current origin via the current service worker registration.
`ServiceWorkerRegistration.showNotification()`
    
Displays the notification with the requested title.
`ServiceWorkerRegistration.unregister()`
    
Unregisters the service worker registration and returns a `Promise`. The service worker will finish any ongoing operations before it is unregistered.
`ServiceWorkerRegistration.update()`
    
Checks the server for an updated version of the service worker without consulting caches.
## Events
`updatefound`
    
Fired any time the `ServiceWorkerRegistration.installing` property acquires a new service worker.
## Examples
In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds an `updatefound` listener in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, then the `updatefound` event will not be fired.
    
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker
        .register("/sw.js")
        .then((registration) => {
          registration.addEventListener("updatefound", () => {
            // If updatefound is fired, it means that there's
            // a new service worker being installed.
            const installingWorker = registration.installing;
            console.log(
              "A new service worker is being installed:",
              installingWorker,
            );
    
            // You can listen for changes to the installing service worker's
            // state via installingWorker.onstatechange
          });
        })
        .catch((error) => {
          console.error(`Service worker registration failed: ${error}`);
        });
    } else {
      console.error("Service workers are not supported.");
    }
    
  * Using Service Workers
  * Service workers basic code example
  * Using web workers


# AudioListener
The `AudioListener` interface represents the position and orientation of the unique person listening to the audio scene, and is used in audio spatialization. All `PannerNode`s spatialize in relation to the `AudioListener` stored in the `BaseAudioContext.listener` attribute.
It is important to note that there is only one listener per context and that it isn't an `AudioNode`.
## Instance properties
Note: The position, forward, and up value are set and retrieved using different syntaxes. Retrieval is done by accessing, for example, `AudioListener.positionX`, while setting the same property is done with `AudioListener.positionX.value`. This is why these values are not marked read only, which is how they appear in the specification's IDL.
`AudioListener.positionX`
    
Represents the horizontal position of the listener in a right-hand cartesian coordinate system. The default is 0.
`AudioListener.positionY`
    
Represents the vertical position of the listener in a right-hand cartesian coordinate system. The default is 0.
`AudioListener.positionZ`
    
Represents the longitudinal (back and forth) position of the listener in a right-hand cartesian coordinate system. The default is 0.
`AudioListener.forwardX`
    
Represents the horizontal position of the listener's forward direction in the same cartesian coordinate system as the position (`positionX`, `positionY`, and `positionZ`) values. The forward and up values are linearly independent of each other. The default is 0.
`AudioListener.forwardY`
    
Represents the vertical position of the listener's forward direction in the same cartesian coordinate system as the position (`positionX`, `positionY`, and `positionZ`) values. The forward and up values are linearly independent of each other. The default is 0.
`AudioListener.forwardZ`
    
Represents the longitudinal (back and forth) position of the listener's forward direction in the same cartesian coordinate system as the position (`positionX`, `positionY`, and `positionZ`) values. The forward and up values are linearly independent of each other. The default is -1.
`AudioListener.upX`
    
Represents the horizontal position of the top of the listener's head in the same cartesian coordinate system as the position (`positionX`, `positionY`, and `positionZ`) values. The forward and up values are linearly independent of each other. The default is 0.
`AudioListener.upY`
    
Represents the vertical position of the top of the listener's head in the same cartesian coordinate system as the position (`positionX`, `positionY`, and `positionZ`) values. The forward and up values are linearly independent of each other. The default is 1.
`AudioListener.upZ`
    
Represents the longitudinal (back and forth) position of the top of the listener's head in the same cartesian coordinate system as the position (`positionX`, `positionY`, and `positionZ`) values. The forward and up values are linearly independent of each other. The default is 0.
## Instance methods
`AudioListener.setOrientation()` Deprecated
    
Sets the orientation of the listener.
`AudioListener.setPosition()` Deprecated
    
Sets the position of the listener.
Note: Although these methods are deprecated they are currently the only way to set the orientation and position in Firefox (see Firefox bug 1283029).
## Deprecated features
The `setOrientation()` and `setPosition()` methods have been replaced by setting their property value equivalents. For example `setPosition(x, y, z)` can be achieved by setting `positionX.value`, `positionY.value`, and `positionZ.value` respectively.
## Example
See `BaseAudioContext.createPanner()` for example code.
  * Using the Web Audio API


# CountQueuingStrategy
Note: This feature is available in Web Workers.
The `CountQueuingStrategy` interface of the Streams API provides a built-in chunk counting queuing strategy that can be used when constructing streams.
## Constructor
`CountQueuingStrategy()`
    
Creates a new `CountQueuingStrategy` object instance.
## Instance properties
`CountQueuingStrategy.highWaterMark` Read only
    
The total number of chunks that can be contained in the internal queue before backpressure is applied.
## Instance methods
`CountQueuingStrategy.size()`
    
Always returns `1`.
## Examples
    
    const queueingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
    
    const writableStream = new WritableStream(
      {
        // Implement the sink
        write(chunk) {
          // …
        },
        close() {
          // …
        },
        abort(err) {
          console.log("Sink error:", err);
        },
      },
      queueingStrategy,
    );
    
    const size = queueingStrategy.size();
    
  * Streams API
  * `CountQueuingStrategy()` constructor
  * Internal queues and queuing strategies


# Page Visibility API
The Page Visibility API provides events you can watch for to know when a document becomes visible or hidden, as well as features to look at the current visibility state of the page.
This is especially useful for saving resources and improving performance by letting a page avoid performing unnecessary tasks when the document isn't visible.
## Concepts and usage
When the user minimizes the window, switches to another tab, or the document is entirely obscured by another window, the API sends a `visibilitychange` event to let listeners know the state of the page has changed. You can detect the event and perform some actions or behave differently. For example, if your web app is playing a video, it can pause the video when the user puts the tab into the background, and resume playback when the user returns to the tab. The user doesn't lose their place in the video, the video's soundtrack doesn't interfere with audio in the new foreground tab, and the user doesn't miss any of the video in the meantime.
Visibility states of an `<iframe>` are the same as the parent document. Hiding an `<iframe>` using CSS properties (such as `display: none;`) doesn't trigger visibility events or change the state of the document contained within the frame.
### Use cases
Let's consider a few use cases for the Page Visibility API.
  * A site has an image carousel that shouldn't advance to the next slide unless the user is viewing the page
  * An application showing a dashboard of information doesn't want to poll the server for updates when the page isn't visible
  * A site wants to switch off sounds when a device is in standby mode (user pushes power button to turn screen off)


Developers have historically used imperfect proxies to detect this. For example, watching for `blur` and `focus` events on the window helps you know when your page is not the active page, but it does not tell you that your page is actually hidden to the user. The Page Visibility API addresses this.
Note: While `onblur` and `onfocus` will tell you if the user switches windows, it doesn't necessarily mean it's hidden. Pages only become hidden when the user switches tabs or minimizes the browser window containing the tab.
### Policies in place to aid background page performance
Separately from the Page Visibility API, user agents typically have a number of policies in place to mitigate the performance impact of background or hidden tabs. These may include:
  * Most browsers stop sending `requestAnimationFrame()` callbacks to background tabs or hidden `<iframe>`s in order to improve performance and battery life.
  * Timers such as `setTimeout()` are throttled in background/inactive tabs to help improve performance. See Reasons for delays longer than specified for more details.
  * Browsers implement budget-based background timeout throttling. This operates in a similar way across modern browsers, with the details being as follows: 
    * In Firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. Chrome is very similar except that the budget is specified in seconds.
    * Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see Reasons for delays longer than specified). In Chrome, this value is 10 seconds.
    * Timer tasks are only permitted when the budget is non-negative.
    * Once a timer's code has finished running, the duration of time it took to execute is subtracted from its window's timeout budget.
    * The budget regenerates at a rate of 10 ms per second, in both Firefox and Chrome.


Some processes are exempt from this throttling behavior. In these cases, you can use the Page Visibility API to reduce the tabs' performance impact while they're hidden.
  * Tabs which are playing audio are considered foreground and aren't throttled.
  * Tabs running code that's using real-time network connections (WebSockets and WebRTC) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.
  * IndexedDB processes are also left unthrottled in order to avoid timeouts.


## Extensions to other interfaces
>
### Instance properties
The Page Visibility API adds the following properties to the `Document` interface:
`Document.hidden` Read only
    
Returns `true` if the page is in a state considered to be hidden to the user, and `false` otherwise.
`Document.visibilityState` Read only
    
A string indicating the document's current visibility state. Possible values are:
`visible`
    
The page content may be at least partially visible. In practice this means that the page is the foreground tab of a non-minimized window.
`hidden`
    
The page's content is not visible to the user, either due to the document's tab being in the background or part of a window that is minimized, or because the device's screen is off.
### Events
The Page Visibility API adds the following events to the `Document` interface:
`visibilitychange`
    
Fired when the content of a tab has become visible or has been hidden.
## Examples
>
### Pausing audio on page hide
This example pauses playing audio when the page is hidden and resumes playing when the page becomes visible again. The `<audio>` element controls allow the user to toggle between playing and paused audio. The boolean `playingOnHide` is used to prevent audio from playing if the page changes to a `visible` state, but the media wasn't playing on page hide.
#### HTML
    
    <audio
      controls
      src="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"></audio>
    
#### JavaScript
    
    const audio = document.querySelector("audio");
    
    let playingOnHide = false;
    
    document.addEventListener("visibilitychange", () => {
      if (document.hidden) {
        playingOnHide = !audio.paused;
        audio.pause();
      } else if (playingOnHide) {
        // Page became visible! Resume playing if audio was "playing on hide"
        audio.play();
      }
    });
    
#### Result
  * `Document.visibilityState`
  * `Document.hidden`
  * Timing element visibility with the Intersection Observer API


# SVGPatternElement
The `SVGPatternElement` interface corresponds to the `<pattern>` element.
EventTarget  Node  Element  SVGElement  SVGPatternElement 
## Instance properties
This interface also inherits properties from its parent, `SVGElement`.
`SVGPatternElement.href` Read only
    
An `SVGAnimatedString` corresponding to the `href` or `xlink:href` Deprecated attribute of the given `<pattern>` element.
`SVGPatternElement.patternUnits` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `patternUnits` attribute of the given `<pattern>` element. Takes one of the constants defined in `SVGUnitTypes`.
`SVGPatternElement.patternContentUnits` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `patternContentUnits` attribute of the given `<pattern>` element. Takes one of the constants defined in `SVGUnitTypes`.
`SVGPatternElement.patternTransform` Read only
    
An `SVGAnimatedTransformList` corresponding to the `patternTransform` attribute of the given `<pattern>` element.
`SVGPatternElement.viewBox` Read only
    
An `SVGAnimatedRect` corresponding to the `viewBox` attribute of the given `<pattern>` element.
`SVGPatternElement.preserveAspectRatio` Read only
    
An `SVGAnimatedPreserveAspectRatio` corresponding to the `preserveAspectRatio` attribute of the given `<pattern>` element.
`SVGPatternElement.x` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `x` attribute of the given `<pattern>` element.
`SVGPatternElement.y` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `y` attribute of the given `<pattern>` element.
`SVGPatternElement.width` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `width` attribute of the given `<pattern>` element.
`SVGPatternElement.height` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `height` attribute of the given `<pattern>` element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.
# ChannelMergerNode
The `ChannelMergerNode` interface, often used in conjunction with its opposite, `ChannelSplitterNode`, reunites different mono inputs into a single output. Each input is used to fill a channel of the output. This is useful for accessing each channels separately, e.g., for performing channel mixing where gain must be separately controlled on each channel.
If `ChannelMergerNode` has one single output, but as many inputs as there are channels to merge; the number of inputs is defined as a parameter of its constructor and the call to `AudioContext.createChannelMerger()`. In the case that no value is given, it will default to `6`.
Using a `ChannelMergerNode`, it is possible to create outputs with more channels than the rendering hardware is able to process. In that case, when the signal is sent to the `AudioContext.listener` object, supernumerary channels will be ignored.
EventTarget  AudioNode  ChannelMergerNode 
Number of inputs variable; default to `6`.  
Number of outputs `1`  
Channel count mode `"explicit"`  
Channel count `2` (not used in the default count mode)  
Channel interpretation `"speakers"`  
## Constructor
`ChannelMergerNode()`
    
Creates a new `ChannelMergerNode` object instance.
## Instance properties
No specific property; inherits properties from its parent, `AudioNode`.
## Instance methods
No specific method; inherits methods from its parent, `AudioNode`.
## Example
See `BaseAudioContext.createChannelMerger()` for example code.
  * Using the Web Audio API


# GestureEvent
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The `GestureEvent` is a proprietary interface specific to WebKit which gives information regarding multi-touch gestures. Events using this interface include `gesturestart`, `gesturechange`, and `gestureend`.
## Instance properties
This interface also inherits properties of its parents, `UIEvent` and `Event`.
`GestureEvent.rotation` Read only Non-standard
    
Change in rotation (in degrees) since the event's beginning. Positive values indicate clockwise rotation; negative values indicate counterclockwise rotation. Initial value: `0.0`.
`GestureEvent.scale` Read only Non-standard
    
Distance between two digits since the event's beginning. Expressed as a floating-point multiple of the initial distance between the digits at the beginning of the gesture. Values below 1.0 indicate an inward pinch (zoom out). Values above 1.0 indicate an outward unpinch (zoom in). Initial value: `1.0`.
## Instance methods
This interface also inherits methods of its parents, `UIEvent` and `Event`.
`GestureEvent.initGestureEvent()` Non-standard
    
Initializes the value of an `GestureEvent`. If the event has already been dispatched, this method does nothing.
## Gesture event types
  * `gesturestart`
  * `gesturechange`
  * `gestureend`


Not part of any specification. Apple has a description at the Safari Developer Library.
# DocumentPictureInPicture
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `DocumentPictureInPicture` interface of the Document Picture-in-Picture API is the entry point for creating and handling document picture-in-picture windows.
It is accessed via the `Window.documentPictureInPicture` property.
EventTarget  DocumentPictureInPicture 
## Instance properties
Inherits properties from its parent, `EventTarget`.
`window` Read only Experimental
    
Returns a `Window` instance representing the browsing context inside the Picture-in-Picture window.
## Instance methods
Inherits methods from its parent, `EventTarget`.
`requestWindow()` Experimental
    
Opens the Picture-in-Picture window for the current main browsing context. Returns a `Promise` that fulfills with a `Window` instance representing the browsing context inside the Picture-in-Picture window.
## Events
Inherits events from its parent, `EventTarget`.
`enter` Experimental
    
Fired when the Picture-in-Picture window is successfully opened.
## Examples
    
    const videoPlayer = document.getElementById("player");
    
    // …
    
    // Open a Picture-in-Picture window.
    const pipWindow = await window.documentPictureInPicture.requestWindow({
      width: videoPlayer.clientWidth,
      height: videoPlayer.clientHeight,
    });
    
    // …
    
See Document Picture-in-Picture API Example for a full working demo (see the full source code also).
  * Document Picture-in-Picture API
  * Using the Document Picture-in-Picture API


# RsaOaepParams
The `RsaOaepParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.encrypt()`, `SubtleCrypto.decrypt()`, `SubtleCrypto.wrapKey()`, or `SubtleCrypto.unwrapKey()`, when using the RSA_OAEP algorithm.
## Instance properties
`name`
    
A string. This should be set to `RSA-OAEP`.
`label` Optional
    
An `ArrayBuffer`, a `TypedArray`, or a `DataView` — an array of bytes that does not itself need to be encrypted but which should be bound to the ciphertext. A digest of the label is part of the input to the encryption operation.
Unless your application calls for a label, you can just omit this argument and it will not affect the security of the encryption operation.
## Examples
See the examples for `SubtleCrypto.encrypt()` and `SubtleCrypto.decrypt()`.
Browsers that support the "RSA-OAEP" algorithm for the `SubtleCrypto.encrypt()`, `SubtleCrypto.decrypt()`, `SubtleCrypto.wrapKey()`, or `SubtleCrypto.unwrapKey()` methods will support this type.
  * `SubtleCrypto.encrypt()`.
  * `SubtleCrypto.decrypt()`.
  * `SubtleCrypto.wrapKey()`.
  * `SubtleCrypto.unwrapKey()`.


# UserActivation
The `UserActivation` interface provides information about whether a user is currently interacting with the page, or has completed an interaction since page load.
This API is only available in the window context and not exposed to workers.
## Instance properties
`UserActivation.hasBeenActive` Read only
    
Indicates whether the current window has sticky user activation.
`UserActivation.isActive` Read only
    
Indicates whether the current window has transient user activation.
## Description
An object of this type is accessed via the `navigator.userActivation` property, and can be used to query information about a window's user activation state.
A user activation either implies that the user is currently interacting with the page, or has completed an interaction since page load. User activation can be triggered by a button click, pointer touch, or some other user interaction with the page.
There are two kinds of window user activation states:
  * Transient activation (user is currently interacting with the page) and
  * Sticky activation (user has interacted at least once since page load).


See Features gated by user activation for more information and a list of APIs that require either sticky or transient user activation.
## Examples
>
### Checking if a user gesture was recently performed
Use `navigator.userActivation` to access the `UserActivation` object, and then `UserActivation.isActive` to check whether the user is currently interacting with the page (Transient activation).
    
    if (navigator.userActivation.isActive) {
      // proceed to request playing media, for example
    }
    
### Checking if a user gesture was ever performed
Use `UserActivation.hasBeenActive` to check whether the user has ever interacted with the page (Sticky activation).
    
    if (navigator.userActivation.hasBeenActive) {
      // proceed with auto-playing an animation, for example
    }
    
  * `navigator.userActivation`
  * Features gated by user activation


# DOMRectReadOnly
Note: This feature is available in Web Workers.
The `DOMRectReadOnly` interface specifies the standard properties (also used by `DOMRect`) to define a rectangle whose properties are immutable.
## Constructor
`DOMRectReadOnly()`
    
Defined to create a new `DOMRectReadOnly` object.
## Instance properties
`DOMRectReadOnly.x` Read only
    
Returns the x coordinate of the `DOMRectReadOnly`'s origin.
`DOMRectReadOnly.y` Read only
    
Returns the y coordinate of the `DOMRectReadOnly`'s origin.
`DOMRectReadOnly.width` Read only
    
Returns the width of the `DOMRectReadOnly`.
`DOMRectReadOnly.height` Read only
    
Returns the height of the `DOMRectReadOnly`.
`DOMRectReadOnly.top` Read only
    
Returns the top coordinate value of the `DOMRectReadOnly` (usually the same as `y`).
`DOMRectReadOnly.right` Read only
    
Returns the right coordinate value of the `DOMRectReadOnly` (usually the same as `x + width`).
`DOMRectReadOnly.bottom` Read only
    
Returns the bottom coordinate value of the `DOMRectReadOnly` (usually the same as `y + height`).
`DOMRectReadOnly.left` Read only
    
Returns the left coordinate value of the `DOMRectReadOnly` (usually the same as `x`).
## Static methods
`DOMRectReadOnly.fromRect()`
    
Creates a new `DOMRectReadOnly` object with a given location and dimensions.
## Instance methods
`DOMRectReadOnly.toJSON()`
    
Returns a JSON representation of the `DOMRectReadOnly` object.
  * `DOMPoint`


# Visual Viewport API
Invalid slug for templ/sidebar: Visual Viewport 
The Visual Viewport API provides an explicit mechanism for querying and modifying the properties of the window's visual viewport. The visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page.
## Concepts and usage
The mobile web contains two viewports, the layout viewport and the visual viewport. The layout viewport covers all the elements on a page and the visual viewport is what is actually visible on the screen. When the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is unchanged. User-interface features like the on-screen keyboard (OSK) can shrink the visual viewport without affecting the layout viewport.
What happens when a web page element needs to be visible on screen regardless of the visible portion of a web page? For example, what if you need a set of image controls to remain on screen regardless of the pinch-zoom level of the device? Current browsers vary in how they handle this. The visual viewport lets web developers solve this by positioning elements relative to what's shown on-screen.
To access a window's visual viewport, you can obtain a `VisualViewport` object from the `window.visualViewport` property. The object includes a set of properties describing the viewport. It also adds three events, `resize`, `scroll`, and `scrollend`, which fire when the visual viewport is resized, scrolls, and finishes a scrolling action, respectively.
The first two events allow you to position elements relative to the visual viewport as it is scrolled or zoomed, which would normally be anchored to the layout viewport. The `scrollend` event allows you to update an element when a scrolling action is completed. For example, you can use these events to keep an element fixed to the visual viewport as it is pinch-zoomed and scrolled, and update it when scrolling ends.
## Interfaces
`VisualViewport`
    
Represents the visual viewport for a given window. A window's `VisualViewport` object provides information about the viewport's position and size, and receives the `resize`, `scroll` and `scrollend` events.
### Extensions to other interfaces
`Window.visualViewport` Read only
    
A read-only reference to the window's `VisualViewport` object. If this property doesn't exist, the API is unsupported.
## Examples
Our Visual Viewport API example provides a basic demonstration of how the different visual viewport features work, including the three event types. Load the page in supporting desktop and mobile browsers and try scrolling around the page and pinch-zooming. On `resize` and `scroll`, the information box is repositioned to keep the same position relative to the visual viewport, and the viewport and scroll information it shows is updated. Also, on `resize` and `scroll` we change the box color to indicate something is happening, changing it back on `scrollend`.
You'll find that on desktop browsers the `Window.scrollX` and `Window.scrollY` values are updated as the window is scrolled — the visual viewport position does not change. On mobile browsers however, the `VisualViewport.offsetLeft` and `VisualViewport.offsetTop` values are generally updated — it is usually the visual viewport that changes rather than the window position.
The example HTML can be seen below. The information box is represented by a `<div>` with an `id` of `output`.
    
    <p id="instructions">
      Try scrolling around and pinch-zooming to see how the reported values change.
    </p>
    <div id="output">
      <p id="visual-info"></p>
      <hr />
      <p id="window-info"></p>
    </div>
    
We won't explain the example's CSS for the sake of brevity — it is not important for understanding the demo. You can check it out at the example link above.
In the JavaScript, we start by getting references to the information box we'll be updating as the page is zoomed and scrolled, as well as the two paragraphs contained within it. The first one will contain reported `VisualViewport.offsetLeft` and `VisualViewport.offsetTop` values, while the second one will contain reported `Window.scrollX` and `Window.scrollY` values.
    
    const output = document.getElementById("output");
    const visualInfo = document.getElementById("visual-info");
    const windowInfo = document.getElementById("window-info");
    
Next, we define the two key functions we'll run when the events fire:
  * `scrollUpdater()` will fire on `resize` and `scroll`: this function updates the position of the information box relative to the visual viewport by querying the `VisualViewport.offsetTop` and `VisualViewport.offsetLeft` properties and using their values to update the values of the relevant inset properties. We also change the information box's background color to indicate that something is happening, and run the `updateText()` function to update the values shown in the box.
  * The `scrollEndUpdater()` function will fire on `scrollend`: this returns the information box to its original color and runs the `updateText()` function to make sure the latest values are shown on `scrollend`.


    
    const scrollUpdater = () => {
      output.style.top = `${visualViewport.offsetTop + 10}px`;
      output.style.left = `${visualViewport.offsetLeft + 10}px`;
      output.style.background = "yellow";
      updateText();
    };
    
    const scrollendUpdater = () => {
      output.style.background = "lime";
      updateText();
    };
    
The `updateText()` function looks like so — it sets the `HTMLElement.innerText` of the first paragraph to show the current `VisualViewport.offsetLeft` and `VisualViewport.offsetTop` values, and the `HTMLElement.innerText` of the second paragraph to show the current `Window.scrollX` and `Window.scrollY` values. After defining `updateText()`, we immediately invoke it so that the information box displays correctly on page load.
    
    function updateText() {
      visualInfo.innerText = `Visual viewport left: ${visualViewport.offsetLeft.toFixed(2)}
        top: ${visualViewport.offsetTop.toFixed(2)}`;
      windowInfo.innerText = `Window scrollX: ${window.scrollX.toFixed(2)}
        scrollY: ${window.scrollY.toFixed(2)}`;
    }
    
    updateText();
    
Note: We truncate all values to two decimal places using the `Number.toFixed()` method because some browsers display them as a subpixel value, potentially with a large number of decimal places.
Now we set event handler properties on both the visual viewport and the `Window` object to run the key functions at the appropriate times on both mobile and desktop:
  * We set the handlers on `window` so that the information box position and contents will update on conventional window scrolling operations, for example when you scroll the page on a desktop browser.
  * We set the handlers on `visualViewport` so that the information box position and contents will update on visual viewport scrolling/zooming operations, for example when you scroll and pinch-zoom the page on a mobile browser.


    
    visualViewport.onresize = scrollUpdater;
    visualViewport.onscroll = scrollUpdater;
    visualViewport.onscrollend = scrollendUpdater;
    window.onresize = scrollUpdater;
    window.onscroll = scrollUpdater;
    window.onscrollend = scrollendUpdater;
    
`scrollUpdater()` will fire on `resize` and `scroll`, while `scrollEndUpdater()` will fire on `scrollend`.
>
### api.VisualViewport
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Visual_Viewport_API` 61 79 91 48 13 61 68 45 13 8.0 61 13  
`height` 61 79 91 48 13 61 68 45 13 8.0 61 13  
`offsetLeft` 61 79 91 48 13 61 68 45 13 8.0 61 13  
`offsetTop` 61 79 91 48 13 61 68 45 13 8.0 61 13  
`pageLeft` 61 79 91 48 13 61 68 45 13 8.0 61 13  
`pageTop` 61 79 91 48 13 61 68 45 13 8.0 61 13  
`resize_event` 6261–62The `onresize` event handler property is not supported. 79 91 4948–49The `onresize` event handler property is not supported. 13 6261–62The `onresize` event handler property is not supported. 68 4645–46The `onresize` event handler property is not supported. 13 8.0 6261–62The `onresize` event handler property is not supported. 13  
`scale` 61 79 91 48 13 61 68 45 13 8.0 61 13  
`scroll_event` 6261–62The `onscroll` event handler property is not supported. 79 91 4948–49The `onscroll` event handler property is not supported. 13 6261–62The `onscroll` event handler property is not supported. 68 4645–46The `onscroll` event handler property is not supported. 13 8.0 6261–62The `onscroll` event handler property is not supported. 13  
`scrollend_event` 126114–126The `onscrollend` event handler property is not supported. See bug 325307785. 126114–126The `onscrollend` event handler property is not supported. See bug 325307785. No 112100–112The `onscrollend` event handler property is not supported. See bug 325307785. No 126114–126The `onscrollend` event handler property is not supported. See bug 325307785. No 8376–83The `onscrollend` event handler property is not supported. See bug 325307785. No 28.023.0–28.0The `onscrollend` event handler property is not supported. See bug 325307785. 126114–126The `onscrollend` event handler property is not supported. See bug 325307785. No  
`width` 61 79 91 48 13 61 68 45 13 8.0 61 13  
### api.Window.visualViewport
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Visual_Viewport_API` 61 79 91 48 13 61 68 45 13 8.0 61 13  
# WorkerNavigator
Note: This feature is only available in Web Workers.
The `WorkerNavigator` interface represents a subset of the `Navigator` interface allowed to be accessed from a `Worker`. Such an object is initialized for each worker and is available via the `self.navigator` property.
## Instance properties
The `WorkerNavigator` interface doesn't inherit any property.
`WorkerNavigator.appCodeName` Deprecated Read only
    
Always returns `'Mozilla'`, in any browser. This property is kept only for compatibility purposes.
`WorkerNavigator.appName` Deprecated Read only
    
Returns the official name of the browser. Do not rely on this property to return the correct value.
`WorkerNavigator.appVersion` Deprecated Read only
    
Returns the version of the browser as a string. Do not rely on this property to return the correct value.
`WorkerNavigator.connection` Read only
    
Provides a `NetworkInformation` object containing information about the network connection of a device.
`WorkerNavigator.deviceMemory` Read only Secure context
    
Returns the amount of device memory in gigabytes. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024.
`WorkerNavigator.globalPrivacyControl` Read only Experimental
    
Returns a boolean indicating a user's consent to their information being shared or sold.
`WorkerNavigator.gpu` Read only Secure context
    
Returns the `GPU` object for the current worker context. The entry point for the WebGPU API.
`WorkerNavigator.hardwareConcurrency` Read only
    
Returns the number of logical processor cores available.
`WorkerNavigator.hid` Read only Experimental Secure context
    
Returns an `HID` object providing methods for connecting to HID devices already granted permission by the user and listing attached HID devices, and event handlers for responding to HID devices connecting and disconnecting.
`WorkerNavigator.language` Read only
    
Returns a string representing the preferred language of the user, usually the language of the browser UI. The `null` value is returned when this is unknown.
`WorkerNavigator.languages` Read only
    
Returns an array of strings representing the languages known to the user, by order of preference.
`WorkerNavigator.locks` Read only Secure context
    
Returns a `LockManager` object which provides methods for requesting a new `Lock` object and querying for an existing `Lock` object.
`WorkerNavigator.mediaCapabilities` Read only
    
Returns a `MediaCapabilities` object that can expose information about the decoding and encoding capabilities for a given format and output capabilities.
`WorkerNavigator.onLine` Read only
    
Returns a boolean value indicating whether the browser is online.
`WorkerNavigator.permissions` Read only
    
Returns a `Permissions` object that can be used to query and update permission status of APIs covered by the Permissions API.
`WorkerNavigator.platform` Deprecated Read only
    
Returns a string representing the platform of the browser. Do not rely on this property to return the correct value.
`WorkerNavigator.product` Deprecated Read only
    
Always returns `'Gecko'`, on any browser. This property is kept only for compatibility purposes.
`WorkerNavigator.serial` Read only Experimental Secure context
    
Returns a `Serial` object, which represents the entry point into the Web Serial API, to enable the control of serial ports.
`WorkerNavigator.serviceWorker` Read only Secure context
    
Returns a `ServiceWorkerContainer` object, which provides access to registration, removal, upgrade, and communication with the `ServiceWorker` objects for the associated document.
`WorkerNavigator.storage` Read only Secure context
    
Returns a `StorageManager` interface for managing persistence permissions and estimating available storage.
`WorkerNavigator.usb` Read only Secure context
    
Returns a `USB` object for the current document, providing access to WebUSB API functionality.
`WorkerNavigator.userAgent` Read only
    
Returns the user agent string for the current browser.
`WorkerNavigator.userAgentData` Read only Experimental Secure context
    
Returns a `NavigatorUAData` object, which gives access to information about the browser and operating system of the user.
## Instance methods
The `WorkerNavigator` interface doesn't inherit any method.
`WorkerNavigator.clearAppBadge()` Secure context
    
Clears a badge on the current app's icon and returns a `Promise` that resolves with `undefined`.
`WorkerNavigator.setAppBadge()` Secure context
    
Sets a badge on the icon associated with this app and returns a `Promise` that resolves with `undefined`.
  * Other Worker-related interfaces: `Worker`, `WorkerLocation`, and `WorkerGlobalScope`
  * Using web workers


# CSSLayerStatementRule
The `CSSLayerStatementRule` represents a `@layer` statement rule. Unlike `CSSLayerBlockRule`, it doesn't contain other rules and merely defines one or several layers by providing their names.
This rule allows to explicitly declare the ordering layer that is in an apparent way at the beginning of a CSS file: the layer order is defined by the order of first occurrence of each layer name. Declaring them with a statement allows the reader to understand the layer order. It also allows inline and imported layers to be interleaved, which is not possible when using the `CSSLayerBlockRule` syntax.
CSSRule  CSSLayerStatementRule 
## Instance properties
Also inherits properties from its parent interface, `CSSRule`.
  * `CSSLayerStatementRule.nameList` Read only
    * An array of strings, that represent the name of each cascade layer by the rule


## Examples
>
### HTML
    
    <p></p>
    
### CSS
    
    @layer layerName, layerName2;
    
### JavaScript
    
    const item = document.getElementsByTagName("p")[0];
    const rules = document.styleSheets[1].cssRules;
    // Note that stylesheet #1 is the stylesheet associated with this embedded example,
    // while stylesheet #0 is the stylesheet associated with the whole MDN page
    
    const layer = rules[0]; // A CSSLayerStatementRule
    
    item.textContent = `The CSS @layer statement declares the following layers: ${layer.nameList.join(
      ", ",
    )}.`;
    
### Result
  * `@layer`
  * The `@layer` statement at-rule for named layers
  * `CSSLayerBlockRule`


# Bluetooth
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Bluetooth` interface of the Web Bluetooth API provides methods to query Bluetooth availability and request access to devices.
EventTarget  Bluetooth 
## Instance properties
Inherits properties from its parent `EventTarget`.
## Instance methods
`Bluetooth.getAvailability()` Experimental
    
Returns a `Promise` that resolves to a boolean value indicating whether the user agent can support Bluetooth. Some user agents let the user configure an option that specifies what value is returned by this method.
`Bluetooth.getDevices()` Experimental
    
Returns a `Promise` that resolves to an array of `BluetoothDevice`s this origin is allowed to access. Permission is obtained via previous calls to `Bluetooth.requestDevice()`.
`Bluetooth.requestDevice()` Experimental
    
Returns a `Promise` that resolves to a `BluetoothDevice` object matching the specified options.
# HmacImportParams
The `HmacImportParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.importKey()` or `SubtleCrypto.unwrapKey()`, when generating a key for the HMAC algorithm.
## Instance properties
`name`
    
A string. This should be set to `HMAC`.
`hash`
    
A string or an object containing a single property called `name` with a string value. It is an identifier for the digest algorithm to use. This should be one of the following:
  * `SHA-256`: selects the SHA-256 algorithm.
  * `SHA-384`: selects the SHA-384 algorithm.
  * `SHA-512`: selects the SHA-512 algorithm.


Warning: `SHA-1` is also supported here but the SHA-1 algorithm is considered vulnerable and should no longer be used.
`length` Optional
    
A `Number` representing the length in bits of the key. If this is omitted the length of the key is equal to the length of the digest generated by the digest function you have chosen. Unless you have a good reason to use a different length, omit this property and use the default.
## Examples
See the examples for `SubtleCrypto.importKey()`.
Browsers that support the "HMAC" algorithm for the `SubtleCrypto.importKey()`, `SubtleCrypto.unwrapKey()` methods will support this type.
  * `SubtleCrypto.importKey()`.
  * `SubtleCrypto.unwrapKey()`.


# BeforeInstallPromptEvent
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The `BeforeInstallPromptEvent` is the interface of the `beforeinstallprompt` event fired at the `Window` object before a user is prompted to "install" a website to a home screen on mobile.
This interface inherits from the `Event` interface.
Event  BeforeInstallPromptEvent 
## Constructor
`BeforeInstallPromptEvent()` Non-standard Experimental
    
Creates a new `BeforeInstallPromptEvent` object.
## Instance properties
Inherits properties from its parent, `Event`.
`BeforeInstallPromptEvent.platforms` Read only Non-standard Experimental
    
Returns an array of string items containing the platforms on which the event was dispatched. This is provided for user agents that want to present a choice of versions to the user such as, for example, "web" or "play" which would allow the user to choose between a web version or an Android version.
`BeforeInstallPromptEvent.userChoice` Read only Non-standard Experimental
    
Returns a `Promise` that resolves to an object describing the user's choice when they were prompted to install the app.
## Instance methods
`BeforeInstallPromptEvent.prompt()` Non-standard Experimental
    
Show a prompt asking the user if they want to install the app. This method returns a `Promise` that resolves to an object describing the user's choice when they were prompted to install the app.
## Examples
In the following example an app provides its own install button, which has an `id` of `"install"`. Initially the button is hidden.
    
    <button id="install" hidden>Install</button>
    
The `beforeinstallprompt` handler:
  * Cancels the event, which prevents the browser displaying its own install UI on some platforms
  * Assigns the `BeforeInstallPromptEvent` object to a variable, so it can be used later
  * Reveals the app's install button.


    
    let installPrompt = null;
    const installButton = document.querySelector("#install");
    
    window.addEventListener("beforeinstallprompt", (event) => {
      event.preventDefault();
      installPrompt = event;
      installButton.removeAttribute("hidden");
    });
    
When clicked, the app's install button:
  * Calls the `prompt()` method of the stored event object, to trigger the installation prompt.
  * Resets its state by clearing the `installPrompt` variable and hiding itself again.


    
    installButton.addEventListener("click", async () => {
      if (!installPrompt) {
        return;
      }
      const result = await installPrompt.prompt();
      console.log(`Install prompt was: ${result.outcome}`);
      installPrompt = null;
      installButton.setAttribute("hidden", "");
    });
    
  * Making PWAs installable
  * How to provide your own in-app install experience on web.dev (2021)


# ReportBody
Note: This feature is available in Web Workers.
The `ReportBody` interface of the Reporting API represents the body of a report. Individual report types inherit from this interface, adding specific attributes relevant to the particular report.
### Reports that inherit from `ReportBody`
  * `CSPViolationReportBody`
  * `DeprecationReportBody`
  * `InterventionReportBody`


An instance of `ReportBody` is returned as the value of `Report.body`. The interface has no constructor.
## Instance methods
`ReportBody.toJSON()` Deprecated
    
A serializer which returns a JSON representation of the `ReportBody` object.
## Examples
In this example we create a new `ReportingObserver` to observe intervention reports. The `InterventionReportBody` interface inherits from `ReportBody`.
    
    const options = {
      types: ["intervention"],
      buffered: true,
    };
    
    const observer = new ReportingObserver(([firstReport], observer) => {
      console.log(firstReport.type); // intervention
    }, options);
    
# History
The `History` interface of the History API allows manipulation of the browser session history, that is the pages visited in the tab or frame that the current page is loaded in.
There is only one instance of `history` (It is a singleton.) accessible via the global object `history`.
Note: This interface is only available on the main thread (`Window`). It cannot be accessed in `Worker` or `Worklet` contexts.
## Instance properties
The `History` interface doesn't inherit any property.
`length` Read only
    
Returns an `Integer` representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns `1`.
`scrollRestoration`
    
Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either `auto` or `manual`.
`state` Read only
    
Returns an `any` value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a `popstate` event.
## Instance methods
The `History` interface doesn't inherit any methods.
`back()`
    
This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's `Back` button. Equivalent to `history.go(-1)`.
Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.
`forward()`
    
This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's `Forward` button; this is equivalent to `history.go(1)`.
Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.
`go()`
    
Asynchronously loads a page from the session history, identified by its relative location to the current page, for example `-1` for the previous page or `1` for the next page. If you specify an out-of-bounds value (for instance, specifying `-1` when there are no previously-visited pages in the session history), this method silently has no effect. Calling `go()` without parameters or a value of `0` reloads the current page.
`pushState()`
    
Pushes the given data onto the session history stack with the specified title (and, if provided, URL). The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that all browsers but Safari currently ignore the title parameter. For more information, see Working with the History API.
`replaceState()`
    
Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that all browsers but Safari currently ignore the title parameter. For more information, see Working with the History API.
  * `history` global object


# CSSRotate
The `CSSRotate` interface of the CSS Typed Object Model API represents the rotate value of the individual `transform` property in CSS. It inherits properties and methods from its parent `CSSTransformValue`.
CSSTransformComponent  CSSRotate 
## Constructor
`CSSRotate()`
    
Creates a new `CSSRotate` object.
## Instance properties
`x`
    
Returns or sets the x-axis value.
`y`
    
Returns or sets the y-axis value.
`z`
    
Returns or sets the z-axis value.
`angle`
    
Returns or sets the angle value.
## Examples
To do.
# RemotePlayback
The `RemotePlayback` interface of the Remote Playback API allows the page to detect availability of remote playback devices, then connect to and control playing on these devices.
EventTarget  RemotePlayback 
## Instance properties
Also inherits properties from its parent interface, `EventTarget`.
`RemotePlayback.state` Read only
    
Represents the `RemotePlayback` connection's state. One of:
`"connecting"`
    
The user agent is attempting to initiate remote playback with the selected device.
`"connected"`
    
The transition from local to remote playback has happened, all commands will now take place on the remote device.
`"disconnected"`
    
The remote playback has not been initiated, has failed to initiate, or has been stopped.
## Instance methods
Also inherits methods from its parent interface, `EventTarget`.
`RemotePlayback.watchAvailability()`
    
Watches the list of available remote playback devices and returns a `Promise` that resolves with a `callbackId` of an available remote playback device.
`RemotePlayback.cancelWatchAvailability()`
    
Cancels the request to monitor the availability of remote playback devices.
`RemotePlayback.prompt()`
    
Prompts the user to select and give permission to connect to a remote playback device.
## Events
Also inherits events from its parent interface, `EventTarget`.
`connecting`
    
Fired when the user agent initiates remote playback.
`connect`
    
Fired when the user agent successfully connects to the remote device.
`disconnect`
    
Fired when the user agent disconnects from the remote device.
## Examples
The following example demonstrates a player with custom controls that support remote playback. Initially the button used to select a device is hidden:
    
    <video id="videoElement" src="https://example.org/media.ext">
      <button id="deviceBtn" class="hidden">Pick device</button>
    </video>
    
    
    .hidden {
      display: none;
    }
    
The `RemotePlayback.watchAvailability()` method is used to watch for available remote playback devices. If a device is available, use the callback to show the button.
    
    const deviceBtn = document.getElementById("deviceBtn");
    const videoElem = document.getElementById("videoElement");
    
    function availabilityCallback(available) {
      // Show or hide the device picker button depending on device availability.
      if (available) {
        deviceBtn.classList.remove("hidden");
      } else {
        deviceBtn.classList.add("hidden");
      }
    }
    
    videoElem.remote.watchAvailability(availabilityCallback).catch(() => {
      // If the device cannot continuously watch available,
      // show the button to allow the user to try to prompt for a connection.
      deviceBtn.classList.remove("hidden");
    });
    
# ExtendableEvent
Note: This feature is only available in Service Workers.
The `ExtendableEvent` interface extends the lifetime of the `install` and `activate` events dispatched on the global scope as part of the service worker lifecycle. This ensures that any functional events (like `FetchEvent`) are not dispatched until it upgrades database schemas and deletes the outdated cache entries.
If `waitUntil()` is called outside of the `ExtendableEvent` handler, the browser should throw an `InvalidStateError`; note also that multiple calls will stack up, and the resulting promises will be added to the list of extend lifetime promises.
This interface inherits from the `Event` interface.
Event  ExtendableEvent 
Note: This interface is only available when the global scope is a `ServiceWorkerGlobalScope`. It is not available when it is a `Window`, or the scope of another kind of worker.
## Constructor
`ExtendableEvent()`
    
Creates a new `ExtendableEvent` object.
## Instance properties
Doesn't implement any specific properties, but inherits properties from its parent, `Event`.
## Instance methods
Inherits methods from its parent, `Event`.
`ExtendableEvent.waitUntil()`
    
Extends the lifetime of the event. It is intended to be called in the `install` event handler for the `installing` worker and on the `activate` event handler for the `active` worker.
## Examples
This code snippet is from the service worker prefetch sample (see prefetch example live.) The code calls `ExtendableEvent.waitUntil()` in `oninstall`, delaying treating the `ServiceWorkerRegistration.installing` worker as installed until the passed promise resolves successfully. The promise resolves when all resources have been fetched and cached, or else when any exception occurs.
The code snippet also shows a best practice for versioning caches used by the service worker. Though there's only one cache in this example, the same approach can be used for multiple caches. It maps a shorthand identifier for a cache to a specific, versioned cache name.
Note: In Chrome, logging statements are visible via the "Inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.
    
    const CACHE_VERSION = 1;
    const CURRENT_CACHES = {
      prefetch: `prefetch-cache-v${CACHE_VERSION}`,
    };
    
    self.addEventListener("install", (event) => {
      const urlsToPrefetch = [
        "./static/pre_fetched.txt",
        "./static/pre_fetched.html",
        "https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",
      ];
    
      console.log(
        "Handling install event. Resources to pre-fetch:",
        urlsToPrefetch,
      );
    
      event.waitUntil(
        caches
          .open(CURRENT_CACHES["prefetch"])
          .then((cache) =>
            cache.addAll(
              urlsToPrefetch.map(
                (urlToPrefetch) => new Request(urlToPrefetch, { mode: "no-cors" }),
              ),
            ),
          )
          .then(() => {
            console.log("All resources have been fetched and cached.");
          })
          .catch((error) => {
            console.error("Pre-fetching failed:", error);
          }),
      );
    });
    
Note: When fetching resources, it's very important to use `{mode: 'no-cors'}` if there is any chance that the resources are served off of a server that doesn't support CORS. In this example, www.chromium.org doesn't support CORS.
  * Using Service Workers
  * Service workers basic code example
  * Using web workers


# PushManager
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `PushManager` interface of the Push API provides a way to receive notifications from third-party servers as well as request URLs for push notifications.
This interface is accessed via the `ServiceWorkerRegistration.pushManager` property.
## Static properties
`PushManager.supportedContentEncodings`
    
Returns an array of supported content codings that can be used to encrypt the payload of a push message.
## Instance methods
`PushManager.getSubscription()`
    
Retrieves an existing push subscription. It returns a `Promise` that resolves to a `PushSubscription` object containing details of an existing subscription. If no existing subscription exists, this resolves to a `null` value.
`PushManager.permissionState()`
    
Returns a `Promise` that resolves to the permission state of the current `PushManager`, which will be one of `'granted'`, `'denied'`, or `'prompt'`.
`PushManager.subscribe()`
    
Subscribes to a push service. It returns a `Promise` that resolves to a `PushSubscription` object containing details of a push subscription. A new push subscription is created if the current service worker does not have an existing subscription.
### Deprecated methods
`PushManager.hasPermission()` Deprecated Non-standard
    
Returns a `Promise` that resolves to the `PushPermissionStatus` of the requesting webapp, which will be one of `granted`, `denied`, or `default`. Replaced by `PushManager.permissionState()`.
`PushManager.register()` Deprecated Non-standard
    
Subscribes to a push subscription. Replaced by `PushManager.subscribe()`.
`PushManager.registrations()` Deprecated Non-standard
    
Retrieves existing push subscriptions. Replaced by `PushManager.getSubscription()`.
`PushManager.unregister()` Deprecated Non-standard
    
Unregisters and deletes a specified subscription endpoint. In the updated API, a subscription is unregistered by calling the `PushSubscription.unsubscribe()` method.
## Example
    
    this.onpush = (event) => {
      console.log(event.data);
      // From here we can write the data to IndexedDB, send it to any open
      // windows, display a notification, etc.
    };
    
    navigator.serviceWorker
      .register("serviceworker.js")
      .then((serviceWorkerRegistration) => {
        serviceWorkerRegistration.pushManager.subscribe().then(
          (pushSubscription) => {
            console.log(pushSubscription.endpoint);
            // The push subscription details needed by the application
            // server are now available, and can be sent to it using,
            // for example, the fetch() API.
          },
          (error) => {
            console.error(error);
          },
        );
      });
    
  * Push API
  * Service Worker API


# AudioDecoder
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Dedicated Web Workers.
The `AudioDecoder` interface of the WebCodecs API decodes chunks of audio.
EventTarget  AudioDecoder 
## Constructor
`AudioDecoder()`
    
Creates a new `AudioDecoder` object.
## Instance properties
Inherits properties from its parent, `EventTarget`.
`AudioDecoder.decodeQueueSize` Read only
    
An integer representing the number of decode queue requests.
`AudioDecoder.state` Read only
    
Represents the state of the underlying codec and whether it is configured for decoding.
### Events
`dequeue`
    
Fires to signal a decrease in `AudioDecoder.decodeQueueSize`.
## Static methods
`AudioDecoder.isConfigSupported()`
    
Returns a promise indicating whether the provided `AudioDecoderConfig` is supported.
## Instance methods
Inherits methods from its parent, `EventTarget`.
`AudioDecoder.configure()`
    
Enqueues a control message to configure the audio decoder for decoding chunks.
`AudioDecoder.decode()`
    
Enqueues a control message to decode a given chunk of audio.
`AudioDecoder.flush()`
    
Returns a promise that resolves once all pending messages in the queue have been completed.
`AudioDecoder.reset()`
    
Resets all states including configuration, control messages in the control message queue, and all pending callbacks.
`AudioDecoder.close()`
    
Ends all pending work and releases system resources.
# MediaStreamAudioSourceNode
The `MediaStreamAudioSourceNode` interface is a type of `AudioNode` which operates as an audio source whose media is received from a `MediaStream` obtained using the WebRTC or Media Capture and Streams APIs.
This media could be from a microphone (through `getUserMedia()`) or from a remote peer on a WebRTC call (using the `RTCPeerConnection`'s audio tracks).
A `MediaStreamAudioSourceNode` has no inputs and exactly one output, and is created using the `AudioContext.createMediaStreamSource()` method.
The `MediaStreamAudioSourceNode` takes the audio from the first `MediaStreamTrack` whose `kind` attribute's value is `audio`. See Track ordering for more information about the order of tracks.
The number of channels output by the node matches the number of tracks found in the selected audio track.
EventTarget  AudioNode  MediaStreamAudioSourceNode 
Number of inputs `0`  
Number of outputs `1`  
Channel count 2 (but note that `AudioNode.channelCount` is only used for up-mixing and down-mixing `AudioNode` inputs, and `MediaStreamAudioSourceNode` doesn't have any input)   
## Constructor
`MediaStreamAudioSourceNode()`
    
Creates a new `MediaStreamAudioSourceNode` object instance with the specified options.
## Instance properties
In addition to the following properties, `MediaStreamAudioSourceNode` inherits the properties of its parent, `AudioNode`.
`mediaStream` Read only
    
The `MediaStream` used when constructing this `MediaStreamAudioSourceNode`.
## Instance methods
Inherits methods from its parent, `AudioNode`.
## Usage notes
>
### Track ordering
For the purposes of the `MediaStreamTrackAudioSourceNode` interface, the order of the audio tracks on the stream is determined by taking the tracks whose `kind` is `audio`, then sorting the tracks by their `id` property's values, in Unicode code point order (essentially, in alphabetical or lexicographical order, for IDs which are simple alphanumeric strings).
The first track, then, is the track whose `id` comes first when the tracks' IDs are all sorted by Unicode code point.
However, it's important to note that the rule establishing this ordering was added long after this interface was first introduced into the Web Audio API. As such, you can't easily rely on the order matching between any two browsers or browser versions.
The `MediaStreamTrackAudioSourceNode` interface is similar to `MediaStreamAudioSourceNode`, but avoids this problem by letting you specify which track you want to use.
## Example
See `AudioContext.createMediaStreamSource()` for example code that uses this object.
  * Using the Web Audio API
  * WebRTC API
  * Media Capture and Streams API (Media Streams)
  * `MediaStreamTrackAudioSourceNode`


# DOMImplementation
The `DOMImplementation` interface represents an object providing methods which are not dependent on any particular document. Such an object is returned by the `Document.implementation` property.
## Property
This interface has no specific property and doesn't inherit any.
## Instance methods
No inherited method.
`DOMImplementation.createDocument()`
    
Creates and returns an `XMLDocument`.
`DOMImplementation.createDocumentType()`
    
Creates and returns a `DocumentType`.
`DOMImplementation.createHTMLDocument()`
    
Creates and returns an HTML `Document`.
`DOMImplementation.hasFeature()` Deprecated
    
Returns a boolean value indicating if a given feature is supported or not. This function is unreliable and kept for compatibility purpose alone: except for SVG-related queries, it always returns `true`. Old browsers are very inconsistent in their behavior.
  * The DOM interfaces index.


# SVGLinearGradientElement
The `SVGLinearGradientElement` interface corresponds to the `<linearGradient>` element.
EventTarget  Node  Element  SVGElement  SVGGradientElement  SVGLinearGradientElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGradientElement`.
`SVGLinearGradientElement.x1` Read only
    
An `SVGAnimatedLength` corresponding to the `x1` attribute of the given `<linearGradient>` element.
`SVGLinearGradientElement.y1` Read only
    
An `SVGAnimatedLength` corresponding to the `y1` attribute of the given `<linearGradient>` element.
`SVGLinearGradientElement.x2` Read only
    
An `SVGAnimatedLength` corresponding to the `x2` attribute of the given `<linearGradient>` element.
`SVGLinearGradientElement.y2` Read only
    
An `SVGAnimatedLength` corresponding to the `y2` attribute of the given `<linearGradient>` element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGGradientElement`.
# AuthenticatorAssertionResponse
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `AuthenticatorAssertionResponse` interface of the Web Authentication API contains a digital signature from the private key of a particular WebAuthn credential. The relying party's server can verify this signature to authenticate a user, for example when they sign in.
An `AuthenticatorAssertionResponse` object instance is available in the `response` property of a `PublicKeyCredential` object returned by a successful `navigator.credentials.get()` call.
This interface inherits from `AuthenticatorResponse`.
AuthenticatorResponse  AuthenticatorAssertionResponse 
Note: This interface is restricted to top-level contexts. Use from within an `<iframe>` element will not have any effect.
## Instance properties
Also inherits properties from its parent, `AuthenticatorResponse`.
`AuthenticatorAssertionResponse.authenticatorData` Read only
    
An `ArrayBuffer` containing information from the authenticator such as the Relying Party ID Hash (rpIdHash), a signature counter, test of user presence and user verification flags, and any extensions processed by the authenticator.
`AuthenticatorResponse.clientDataJSON` Read only
    
Contains the JSON-compatible serialization of the data passed from the browser to the authenticator in order to authenticate with this credential — i.e., when `CredentialsContainer.get()` is called with a `publicKey` option. This data contains some information from the options passed into the `get()` call, and some information controlled by the browser.
`AuthenticatorAssertionResponse.signature` Read only
    
An assertion signature over `AuthenticatorAssertionResponse.authenticatorData` and `AuthenticatorResponse.clientDataJSON`. The assertion signature is created with the private key of the key pair that was created during the originating `navigator.credentials.create()` call and verified using the public key of that same key pair.
`AuthenticatorAssertionResponse.userHandle` Read only
    
An `ArrayBuffer` containing an opaque user identifier, specified as `user.id` in the options passed to the originating `navigator.credentials.create()` call.
## Instance methods
None.
## Examples
See Retrieving a public key credential for a detailed example.
  * `AuthenticatorAttestationResponse`: the interface for the type of response given when creating a new credential
  * `AuthenticatorResponse`: the parent interface


# HTML Drag and Drop API
HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers.
The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. A translucent representation of the draggable elements follows the pointer during the drag operation.
You can customize which elements can become draggable, the type of feedback the draggable elements produce, and the droppable elements.
This overview of HTML Drag and Drop includes a description of the interfaces, basic steps to add drag-and-drop support to an application, and an interoperability summary of the interfaces.
## Concepts and usage
>
### Drag Events
HTML drag-and-drop uses the DOM event model and drag events inherited from mouse events. A typical drag operation begins when a user selects a draggable element, continues when the user drags the element to a droppable element, and then ends when the user releases the dragged element.
During drag operations, several event types are fired, and some events might fire many times, such as the `drag` and `dragover` events.
Each drag event type has an associated event handler:
Event Fires when...  
`drag` ...a dragged item (element or text selection) is dragged.  
`dragend` ...a drag operation ends (such as releasing a mouse button or hitting the Esc key; see Finishing a Drag.)  
`dragenter` ...a dragged item enters a valid drop target. (See Specifying Drop Targets.)  
`dragleave` ...a dragged item leaves a valid drop target.  
`dragover` ...a dragged item is being dragged over a valid drop target, every few hundred milliseconds.  
`dragstart` ...the user starts dragging an item. (See Starting a Drag Operation.)  
`drop` ...an item is dropped on a valid drop target. (See Performing a Drop.)  
Note: Neither `dragstart` nor `dragend` events are fired when dragging a file into the browser from the OS.
### The basics
This section is a summary of the basic steps to add drag-and-drop functionality to an application.
#### Identify what is draggable
Making an element draggable requires adding the `draggable` attribute and the `dragstart` event handler, as shown in the following code sample:
    
    <p id="p1" draggable="true">This element is draggable.</p>
    
    
    // Get the element by id
    const element = document.getElementById("p1");
    // Add the ondragstart event listener
    element.addEventListener("dragstart", (ev) => {
      // Add the target element's id to the data transfer object
      ev.dataTransfer.setData("text/plain", ev.target.id);
    });
    
For more information, see:
  * Draggable attribute reference
  * Drag operations guide


#### Define the drag's data
The application is free to include any number of data items in a drag operation. Each data item is a string of a particular `type` — typically a MIME type such as `text/html`.
Each `DragEvent` has a `dataTransfer` property that holds the event's data. This property (which is a `DataTransfer` object) also has methods to manage drag data. The `setData()` method is used to add an item to the drag data, as shown in the following example.
    
    function dragstartHandler(ev) {
      // Add different types of drag data
      ev.dataTransfer.setData("text/plain", ev.target.innerText);
      ev.dataTransfer.setData("text/html", ev.target.outerHTML);
      ev.dataTransfer.setData(
        "text/uri-list",
        ev.target.ownerDocument.location.href,
      );
    }
    
  * For a list of common data types used in drag-and-drop (such as text, HTML, links, and files), see Recommended Drag Types.
  * For more information about drag data, see Drag Data.


#### Define the drag image
By default, the browser supplies an image that appears beside the pointer during a drag operation. However, an application may define a custom image with the `setDragImage()` method, as shown in the following example.
    
    // Create an image and then use it for the drag image.
    // NOTE: change "example.gif" to a real image URL or the image
    // will not be created and the default drag image will be used.
    let img = new Image();
    img.src = "example.gif";
    function dragstartHandler(ev) {
      ev.dataTransfer.setDragImage(img, 10, 10);
    }
    
Learn more about drag feedback images in:
  * Setting the Drag Feedback Image


#### Define the drop effect
The `dropEffect` property is used to control the feedback the user is given during a drag-and-drop operation. It typically affects which cursor the browser displays while dragging. For example, when the user hovers over a drop target, the browser's cursor may indicate the type of operation that will occur.
Three effects may be defined:
  1. `copy` indicates that the dragged data will be copied from its present location to the drop location.
  2. `move` indicates that the dragged data will be moved from its present location to the drop location.
  3. `link` indicates that some form of relationship or connection will be created between the source and drop locations.


During the drag operation, drag effects may be modified to indicate that certain effects are allowed at certain locations.
The following example shows how to use this property.
    
    function dragstartHandler(ev) {
      ev.dataTransfer.dropEffect = "copy";
    }
    
For more details, see:
  * Drag Effects


#### Define a drop zone
By default, the browser prevents anything from happening when dropping something onto most HTML elements. To change that behavior so that an element becomes a drop zone or is droppable, the element must listen to both `dragover` and `drop` events.
The following example shows how to use those events.
    
    <p id="target">Drop Zone</p>
    
    
    const target = document.getElementById("target");
    
    target.addEventListener("dragover", (ev) => {
      ev.preventDefault();
      ev.dataTransfer.dropEffect = "move";
    });
    target.addEventListener("drop", (ev) => {
      ev.preventDefault();
      // Get the id of the target and add the moved element to the target's DOM
      const data = ev.dataTransfer.getData("text/plain");
      ev.target.appendChild(document.getElementById(data));
    });
    
Note that each handler calls `preventDefault()` to prevent additional event processing for this event (such as touch events or pointer events).
For more information, see:
  * Specifying Drop Targets


#### Handle the drop effect
The handler for the `drop` event is free to process the drag data in an application-specific way.
Typically, an application uses the `getData()` method to retrieve drag items and then process them accordingly. Additionally, application semantics may differ depending on the value of the `dropEffect` and/or the state of modifier keys.
The following example shows a drop handler getting the source element's `id` from the drag data, and then using the `id` to move the source element to the drop element:
    
    <p id="p1" draggable="true">This element is draggable.</p>
    <div id="target">Drop Zone</div>
    
    
    const source = document.getElementById("p1");
    const target = document.getElementById("target");
    
    source.addEventListener("dragstart", (ev) => {
      // Add the target element's id to the data transfer object
      ev.dataTransfer.setData("application/my-app", ev.target.id);
      ev.dataTransfer.effectAllowed = "move";
    });
    target.addEventListener("dragover", (ev) => {
      ev.preventDefault();
      ev.dataTransfer.dropEffect = "move";
    });
    target.addEventListener("drop", (ev) => {
      ev.preventDefault();
      // Get the id of the target and add the moved element to the target's DOM
      const data = ev.dataTransfer.getData("application/my-app");
      ev.target.appendChild(document.getElementById(data));
    });
    
For more information, see:
  * Performing a Drop


#### Drag end
At the end of a drag operation, the `dragend` event fires at the source element — the element that was the target of the drag start.
This event fires regardless of whether the drag completed or was canceled. The `dragend` event handler can check the value of the `dropEffect` property to determine if the drag operation succeeded or not.
For more information about handling the end of a drag operation, see:
  * Finishing a Drag


## Interfaces
The HTML Drag and Drop interfaces are `DragEvent`, `DataTransfer`, `DataTransferItem` and `DataTransferItemList`.
The `DragEvent` interface has a constructor and one `dataTransfer` property, which is a `DataTransfer` object.
`DataTransfer` objects include the drag event's state, such as the type of drag being done (like `copy` or `move`), the drag's data (one or more items), and the MIME type of each drag item. `DataTransfer` objects also have methods to add or remove items to the drag's data.
The `DragEvent` and `DataTransfer` interfaces should be the only ones needed to add HTML Drag and Drop capabilities to an application.
Each `DataTransfer` object contains an `items` property, which is a `list` of `DataTransferItem` objects. A `DataTransferItem` object represents a single drag item, each with a `kind` property (either `string` or `file`) and a `type` property for the data item's MIME type. The `DataTransferItem` object also has methods to get the drag item's data.
The `DataTransferItemList` object is a list of `DataTransferItem` objects. The list object has methods to add a drag item to the list, remove a drag item from the list, and clear the list of all drag items.
A key difference between the `DataTransfer` and `DataTransferItem` interfaces is that the former uses the synchronous `getData()` method to access a drag item's data, but the latter instead uses the asynchronous `getAsString()` method.
## Examples
  * Copying and moving elements with the `DataTransfer` interface
  * Copying and moving elements with the `DataTransferListItem` interface


Reference pages for each interface also have individual examples.
  * Drag Operations
  * Recommended Drag Types
  * HTML Living Standard: Drag and Drop
  * Drag and Drop interoperability data from CanIUse


# QuotaExceededError
The `QuotaExceededError` interface represents an error when a requested operation would exceed a system-imposed storage quota.
Note: In browser versions before this interface was implemented, it was a regular `DOMException`. The subclassing allows for extra information like `quota` and `requested` to be included.
DOMException  QuotaExceededError 
## Constructor
`QuotaExceededError()` Experimental
    
Creates a `QuotaExceededError` object.
## Instance properties
Also inherits properties from its ancestor `DOMException`.
`QuotaExceededError.quota` Read only Experimental
    
Returns the system-defined storage limit (in bytes) that was exceeded.
`requested` Read only Experimental
    
Returns the amount of storage (in bytes) that was requested during the operation.
  * `DOMException`
  * `StorageManager.estimate()`
  * Storage quotas and eviction criteria


# PresentationConnection
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PresentationConnection` interface of the Presentation API provides methods and properties for managing a single presentation. Each presentation connection is represented by a `PresentationConnection` object. Both the controlling user agent and receiving user agent MUST implement `PresentationConnection`.
EventTarget  PresentationConnection 
## Instance properties
`PresentationConnection.binaryType` Experimental
    
Returns either blob or arrayBuffer. When a `PresentationConnection` object is created, its `binaryType` IDL attribute MUST be set to the string `"arraybuffer"`.
`PresentationConnection.id` Read only Experimental
    
Provides the presentation connection identifier.
`PresentationConnection.state` Read only Experimental
    
Returns the presentation connection's current state.
`PresentationConnection.url` Read only Experimental
    
Returns the URL used to create or reconnect to the presentation.
## Instance methods
`PresentationConnection.close()` Experimental
    
Closes the current connection and sends a `PresentationConnectionCloseEvent` to `close` event.
`PresentationConnection.send()` Experimental
    
Sends either binary or text data between a controlling browsing context and a presenting browsing context.
`PresentationConnection.terminate()` Experimental
    
Terminates the current connection and fires `terminate` event.
## Events
`close` Experimental
    
Fired when there is a call to `PresentationConnection.close()`.
`connect` Experimental
    
Fired when a presentation connection is established.
`message` Experimental
    
Fired when there is a call to `PresentationConnection.send()`.
`terminate` Experimental
    
Fired when there is a call to `PresentationConnection.terminate()`.
# CookieStoreManager
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Service Workers.
The `CookieStoreManager` interface of the Cookie Store API allows service workers to subscribe to cookie change events. Call `subscribe()` on a particular service worker registration to receive change events.
A `CookieStoreManager` has an associated `ServiceWorkerRegistration`. Each service worker registration has a cookie change subscription list, which is a list of cookie change subscriptions each containing a name and URL. The methods in this interface allow the service worker to add and remove subscriptions from this list, and to get a list of all subscriptions.
To get a `CookieStoreManager`, call `ServiceWorkerRegistration.cookies`.
## Instance methods
`CookieStoreManager.getSubscriptions()`
    
Returns a `Promise` which resolves to a list of the cookie change subscriptions for this service worker registration.
`CookieStoreManager.subscribe()`
    
Subscribes to changes to cookies. It returns a `Promise` which resolves when the subscription is successful.
`CookieStoreManager.unsubscribe()`
    
Unsubscribes the registered service worker from changes to cookies. It returns a `Promise` which resolves when the operation is successful.
## Examples
In this example, the `ServiceWorkerRegistration` represented by `registration` is subscribing to change events on the cookie named `"cookie1"` with a scope of `"/path1"`.
    
    const subscriptions = [{ name: "cookie1", url: `/path1` }];
    await registration.cookies.subscribe(subscriptions);
    
If the `ServiceWorkerRegistration` has subscribed to any cookies, then `getSubscriptions()` will return a list of cookies represented by objects in the same format as used for the original subscription.
    
    const subscriptions = await self.registration.cookies.getSubscriptions();
    
# DecompressionStream
Note: This feature is available in Web Workers.
The `DecompressionStream` interface of the Compression Streams API is an API for decompressing a stream of data.
## Constructor
`DecompressionStream()`
    
Creates a new `DecompressionStream`
## Instance properties
`DecompressionStream.readable`
    
Returns the `ReadableStream` instance controlled by this object.
`DecompressionStream.writable`
    
Returns the `WritableStream` instance controlled by this object.
## Examples
In this example a blob is decompressed using gzip compression.
    
    const ds = new DecompressionStream("gzip");
    const decompressedStream = blob.stream().pipeThrough(ds);
    
# ReadableStreamBYOBReader
Note: This feature is available in Web Workers.
The `ReadableStreamBYOBReader` interface of the Streams API defines a reader for a `ReadableStream` that supports zero-copy reading from an underlying byte source. It is used for efficient copying from underlying sources where the data is delivered as an "anonymous" sequence of bytes, such as files.
An instance of this reader type should usually be obtained by calling `ReadableStream.getReader()` on the stream, specifying `mode: "byob"` in the options parameter. The readable stream must have an underlying byte source. In other words, it must have been constructed specifying an underlying source with `type: "bytes"`).
Using this kind of reader, a `read()` request when the readable stream's internal queues are empty will result in a zero copy transfer from the underlying source (bypassing the stream's internal queues). If the internal queues are not empty, a `read()` will satisfy the request from the buffered data.
Note that the methods and properties are similar to those for the default reader (`ReadableStreamDefaultReader`). The `read()` method differs in that it provides a view into which data should be written.
## Constructor
`ReadableStreamBYOBReader()`
    
Creates and returns a `ReadableStreamBYOBReader` object instance.
## Instance properties
`ReadableStreamBYOBReader.closed` Read only
    
Returns a `Promise` that fulfills when the stream closes, or rejects if the stream throws an error or the reader's lock is released. This property enables you to write code that responds to an end to the streaming process.
## Instance methods
`ReadableStreamBYOBReader.cancel()`
    
Returns a `Promise` that resolves when the stream is canceled. Calling this method signals a loss of interest in the stream by a consumer. The supplied `reason` argument will be given to the underlying source, which may or may not use it.
`ReadableStreamBYOBReader.read()`
    
Passes a view into which data must be written, and returns a `Promise` that resolves with the next chunk in the stream or rejects with an indication that the stream is closed or has errored.
`ReadableStreamBYOBReader.releaseLock()`
    
Releases the reader's lock on the stream.
## Examples
The example below is taken from the live examples in Using readable byte streams.
First create the reader using `ReadableStream.getReader()` on the stream, specifying `mode: "byob"` in the options parameter. As this is a "Bring Your Own Buffer" reader, we also need to create an `ArrayBuffer` to read into.
    
    const reader = stream.getReader({ mode: "byob" });
    let buffer = new ArrayBuffer(200);
    
A function that uses the reader is shown below. This calls the `read()` method recursively to read data into the buffer. The method takes a `Uint8Array` typed array which is a view over the part of the original array buffer that has not yet been written. The parameters of the view are calculated from the data that was received in previous calls, which define an offset into the original array buffer.
    
    readStream(reader);
    
    function readStream(reader) {
      let bytesReceived = 0;
      let offset = 0;
    
      // read() returns a promise that resolves when a value has been received
      reader
        .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
        .then(function processText({ done, value }) {
          // Result objects contain two properties:
          // done  - true if the stream has already given all its data.
          // value - some data. Always undefined when done is true.
    
          if (done) {
            logConsumer(`readStream() complete. Total bytes: ${bytesReceived}`);
            return;
          }
    
          buffer = value.buffer;
          offset += value.byteLength;
          bytesReceived += value.byteLength;
    
          logConsumer(
            `Read ${value.byteLength} (${bytesReceived}) bytes: ${value}`,
          );
          result += value;
    
          // Read some more, and call this function again
          return reader
            .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
            .then(processText);
        });
    }
    
When there is no more data in the stream, the `read()` method resolves with an object with the property `done` set to `true`, and the function returns.
The `ReadableStreamBYOBReader.closed` property returns a promise that can be used to monitor for the stream being closed or errored, or the reader lock being released.
    
    reader.closed
      .then(() => {
        // Resolved - code to handle stream closing
      })
      .catch(() => {
        // Rejected - code to handle error
      });
    
To cancel the stream call `ReadableStreamBYOBReader.cancel()`, optionally specifying a reason. This returns a promise that will resolve when the stream has been cancelled. When the stream is cancelled the controller will in turn call `cancel()` on the underlying source, passing in the optional reason.
The example code in Using readable byte streams calls the cancel method when a button is pressed, as shown:
    
    button.addEventListener("click", () => {
      reader.cancel("user choice").then(() => console.log("cancel complete"));
    });
    
The consumer can also call `releaseLock()` to release the reader's hold on the stream, but only when no read is pending:
    
    reader.releaseLock();
    
  * Streams API concepts
  * Using readable byte stream
  * `ReadableStream`
  * Web-streams-polyfill


# Navigation API
The Navigation API provides the ability to initiate, intercept, and manage browser navigation actions. It can also examine an application's history entries. This is a successor to previous web platform features such as the History API and `window.location`, which solves their shortcomings and is specifically aimed at the needs of single-page applications (SPAs).
## Concepts and usage
In SPAs, the page template tends to stay the same during usage, and the content is dynamically rewritten as the user visits different pages or features. As a result, only one distinct page is loaded in the browser, which breaks the expected user experience of navigating back and forth between different locations in the viewing history. This problem can be solved to a degree via the History API, but it is not designed for the needs of SPAs. The Navigation API aims to bridge that gap.
The API is accessed via the `Window.navigation` property, which returns a reference to a global `Navigation` object. Each `window` object has its own corresponding `navigation` instance.
### Handling navigations
The `navigation` interface has several associated events, the most notable being the `navigate` event. This is fired when any type of navigation is initiated, meaning that you can control all page navigations from one central place, ideal for routing functionality in SPA frameworks. (This is not the case with the History API, where it is sometimes hard to figure out responding to all navigations.) The `navigate` event handler is passed a `NavigateEvent` object, which contains detailed information including details around the navigation's destination, type, whether it contains `POST` form data or a download request, and more.
The `NavigationEvent` object also provides two methods:
  * `intercept()` takes as an argument a callback handler function returning a promise. It allows you to control what happens when the navigation is initiated. For example, in the case of an SPA, it can be used to load relevant new content into the UI based on the path of the URL navigated to.
  * `scroll()` allows you to manually initiate the browser's scroll behavior (e.g., to a fragment identifier in the URL), if it makes sense for your code, rather than waiting for the browser to handle it automatically.


Once a navigation is initiated, and your `intercept()` handler is called, a `NavigationTransition` object instance is created (accessible via `Navigation.transition`), which can be used to track the process of the ongoing navigation.
Note: In this context "transition" refers to the transition between one history entry and another. It isn't related to CSS transitions.
Note: You can also call `preventDefault()` to stop the navigation entirely for most navigation types; cancellation of traverse navigations is not yet implemented.
When the `intercept()` handler function's promise fulfills, the `Navigation` object's `navigatesuccess` event fires, allowing you to run cleanup code after a successful navigation has completed. If it rejects, meaning the navigation has failed, `navigateerror` fires instead, allowing you to gracefully handle the failure case. There is also a `finished` property on the `NavigationTransition` object, which fulfills or rejects at the same time as the aforementioned events are fired, providing another path for handling the success and failure cases.
Note: Before the Navigation API was available, to do something similar you'd have to listen for all click events on links, run `e.preventDefault()`, perform the appropriate `History.pushState()` call, then set up the page view based on the new URL. And this wouldn't handle all navigations — only user-initiated link clicks.
### Programmatically updating and traversing the navigation history
As the user navigates through your application, each new location navigated to results in the creation of a navigation history entry. Each history entry is represented by a distinct `NavigationHistoryEntry` object instance. These contain several properties such as the entry's key, URL, and state information. You can get the entry that the user is currently on right now using `Navigation.currentEntry`, and an array of all existing history entries using `Navigation.entries()`. Each `NavigationHistoryEntry` object has a `dispose` event, which fires when the entry is no longer part of the browser history. For example, if the user navigates back three times, then navigates forward to somewhere else, those three history entries will be disposed of.
Note: The Navigation API only exposes history entries created in the current browsing context that have the same origin as the current page (e.g., not navigations inside embedded `<iframe>`s, or cross-origin navigations), providing an accurate list of all previous history entries just for your app. This makes traversing the history a much less fragile proposition than with the older History API.
The `Navigation` object contains all the methods you'll need to update and traverse through the navigation history:
`navigate()` Experimental
    
Navigates to a new URL, creating a new navigation history entry.
`reload()` Experimental
    
Reloads the current navigation history entry.
`back()` Experimental
    
Navigates to the previous navigation history entry, if that is possible.
`forward()` Experimental
    
Navigates to the next navigation history entry, if that is possible.
`traverseTo()` Experimental
    
Navigates to a specific navigation history entry identified by its key value, which is obtained via the relevant entry's `NavigationHistoryEntry.key` property.
Each one of the above methods returns an object containing two promises — `{ committed, finished }`. This allows the invoking function to wait on taking further action until:
  * `committed` fulfills, meaning that the visible URL has changed and a new `NavigationHistoryEntry` has been created.
  * `finished` fulfills, meaning that all promises returned by your `intercept()` handler are fulfilled. This is equivalent to the `NavigationTransition.finished` promise fulfilling, when the `navigatesuccess` event fires, as mentioned earlier.
  * either one of the above promises rejects, meaning that the navigation has failed for some reason.


### State
The Navigation API allows you to store state on each history entry. This is developer-defined information — it can be whatever you like. For example, you might want to store a `visitCount` property that records the number of times a view has been visited, or an object containing multiple properties related to UI state, so that state can be restored when a user returns to that view.
To get a `NavigationHistoryEntry`'s state, you call its `getState()` method. It is initially `undefined`, but when state information is set on the entry, it will return the previously-set state information.
Setting state is a bit more nuanced. You can't retrieve the state value and then update it directly — the copy stored on the entry will not change. Instead, you update it while performing a `navigate()` or `reload()` — each one of these optionally takes an options object parameter, which includes a `state` property containing the new state to set on the history entry. When these navigations commit, the state change will be automatically applied.
In some cases however, a state change will be independent from a navigation or reload — for example when a page contains an expandable/collapsible `<details>` element. In this case, you might want to store the expanded/collapsed state in your history entry, so you can restore it when the user returns to the page or restarts their browser. Cases like this are handled using `Navigation.updateCurrentEntry()`. The `currententrychange` will fire when the current entry change is complete.
### Limitations
There are a few perceived limitations with the Navigation API:
  1. The current specification doesn't trigger a `navigate` event on a page's first load. This might be fine for sites that use Server Side Rendering (SSR)—your server could return the correct initial state, which is the fastest way to get content to your users. But sites that leverage client-side code to create their pages may need an additional function to initialize the page.
  2. The Navigation API operates only within a single frame—the top-level page, or a single specific `<iframe>`. This has some interesting implications that are further documented in the spec, but in practice, will reduce developer confusion. The previous History API has several confusing edge cases, like support for frames, which the Navigation API handles up-front.
  3. You can't currently use the Navigation API to programmatically modify or rearrange the history list. It might be useful to have a temporary state, for example navigating the user to a temporary modal that asks them for some information, then going back to the previous URL. In this case, you'd want to delete the temporary modal navigation entry so the user cannot mess up the application flow by hitting the forward button and opening it again.


## Interfaces
`NavigateEvent` Experimental
    
Event object for the `navigate` event, which fires when any type of navigation is initiated. It provides access to information about that navigation, and most notably the `intercept()`, which allows you to control what happens when the navigation is initiated.
`Navigation` Experimental
    
Allows control over all navigation actions for the current `window` in one central place, including initiating navigations programmatically, examining navigation history entries, and managing navigations as they happen.
`NavigationActivation` Experimental
    
Represents a recent cross-document navigation. It contains the navigation type and current and destination document history entries.
`NavigationCurrentEntryChangeEvent` Experimental
    
Event object for the `currententrychange` event, which fires when the `Navigation.currentEntry` has changed. It provides access to the navigation type, and the previous history entry that was navigated from.
`NavigationDestination` Experimental
    
Represents the destination being navigated to in the current navigation.
`NavigationHistoryEntry` Experimental
    
Represents a single navigation history entry.
`NavigationTransition` Experimental
    
Represents an ongoing navigation.
## Extensions to other interfaces
`Window.navigation` Read only Experimental
    
Returns the current `window`'s associated `Navigation` object. This is the entry point for the Navigation API.
## Examples
Note: Check out the Navigation API live demo (view demo source).
### Handling a navigation using `intercept()`
    
    navigation.addEventListener("navigate", (event) => {
      // Exit early if this navigation shouldn't be intercepted,
      // e.g. if the navigation is cross-origin, or a download request
      if (shouldNotIntercept(event)) {
        return;
      }
    
      const url = new URL(event.destination.url);
    
      if (url.pathname.startsWith("/articles/")) {
        event.intercept({
          async handler() {
            // The URL has already changed, so show a placeholder while
            // fetching the new content, such as a spinner or loading page
            renderArticlePagePlaceholder();
    
            // Fetch the new content and display when ready
            const articleContent = await getArticleContent(url.pathname);
            renderArticlePage(articleContent);
          },
        });
      }
    });
    
### Handling scrolling using `scroll()`
In this example of intercepting a navigation, the `handler()` function starts by fetching and rendering some article content, but then fetches and renders some secondary content afterwards. It makes sense to scroll the page to the main article content as soon as it is available so the user can interact with it, rather than waiting until the secondary content is also rendered. To achieve this, we have added a `scroll()` call between the two.
    
    navigation.addEventListener("navigate", (event) => {
      if (shouldNotIntercept(event)) {
        return;
      }
      const url = new URL(event.destination.url);
    
      if (url.pathname.startsWith("/articles/")) {
        event.intercept({
          async handler() {
            const articleContent = await getArticleContent(url.pathname);
            renderArticlePage(articleContent);
    
            event.scroll();
    
            const secondaryContent = await getSecondaryContent(url.pathname);
            addSecondaryContent(secondaryContent);
          },
        });
      }
    });
    
### Traversing to a specific history entry
    
    // On JS startup, get the key of the first loaded page
    // so the user can always go back there.
    const { key } = navigation.currentEntry;
    backToHomeButton.onclick = () => navigation.traverseTo(key);
    
    // Navigate away, but the button will always work.
    await navigation.navigate("/another_url").finished;
    
### Updating state
    
    navigation.navigate(url, { state: newState });
    
Or
    
    navigation.reload({ state: newState });
    
Or if the state is independent from a navigation or reload:
    
    navigation.updateCurrentEntry({ state: newState });
    
>
### api.Navigation
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Navigation_API` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`activation` 123 123 No 109 No 123 No 82 No 27.0 123 No  
`back` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`canGoBack` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`canGoForward` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`currentEntry` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`currententrychange_event` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`entries` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`forward` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`navigate` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`navigate_event` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`navigateerror_event` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`navigatesuccess_event` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`reload` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`transition` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`traverseTo` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`updateCurrentEntry` 102 102 No 88 No 102 No 70 No 19.0 102 No  
### api.NavigationDestination
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Navigation_API` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`getState` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`id` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`index` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`key` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`sameDocument` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`url` 102 102 No 88 No 102 No 70 No 19.0 102 No  
### api.NavigationHistoryEntry
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Navigation_API` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`dispose_event` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`getState` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`id` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`index` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`key` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`sameDocument` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`url` 102 102 No 88 No 102 No 70 No 19.0 102 No  
### api.NavigationTransition
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Navigation_API` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`finished` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`from` 102 102 No 88 No 102 No 70 No 19.0 102 No  
`navigationType` 102 102 No 88 No 102 No 70 No 19.0 102 No  
  * Modern client-side routing: the Navigation API
  * Navigation API explainer


# WEBGL_compressed_texture_etc1 extension
The `WEBGL_compressed_texture_etc1` extension is part of the WebGL API and exposes the ETC1 compressed texture format.
Compressed textures reduce the amount of memory needed to store a texture on the GPU, allowing for higher resolution textures or more of the same resolution textures.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is available to both, WebGL1 and WebGL2 contexts.
## Constants
The compressed texture format is exposed by a constant and can be used with the `compressedTexImage2D()` method (note that ETC1 is not supported with the `compressedTexSubImage2D()` method).
`ext.COMPRESSED_RGB_ETC1_WEBGL`
    
Compresses 24-bit RGB data with no alpha channel.
## Examples
    
    const ext = gl.getExtension("WEBGL_compressed_texture_etc1");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.compressedTexImage2D(
      gl.TEXTURE_2D,
      0,
      ext.COMPRESSED_RGB_ETC1_WEBGL,
      512,
      512,
      0,
      textureData,
    );
    
  * Ericsson Texture Compression – Wikipedia
  * `WEBGL_compressed_texture_etc` (ETC2 and EAC)
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.compressedTexImage2D()`
  * `WebGLRenderingContext.getParameter()`


# CryptoKey
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `CryptoKey` interface of the Web Crypto API represents a cryptographic key obtained from one of the `SubtleCrypto` methods `generateKey()`, `deriveKey()`, `importKey()`, or `unwrapKey()`.
For security reasons, the `CryptoKey` interface can only be used in a secure context.
## Instance properties
`CryptoKey.type` Read only
    
The type of key the object represents. It may take one of the following values: `"secret"`, `"private"` or `"public"`.
`CryptoKey.extractable` Read only
    
A boolean value indicating whether or not the key may be extracted using `SubtleCrypto.exportKey()` or `SubtleCrypto.wrapKey()`.
`CryptoKey.algorithm` Read only
    
An object describing the algorithm for which this key can be used and any associated extra parameters.
`CryptoKey.usages` Read only
    
An `Array` of strings, indicating what can be done with the key. Possible values for array elements are `"encrypt"`, `"decrypt"`, `"sign"`, `"verify"`, `"deriveKey"`, `"deriveBits"`, `"wrapKey"`, and `"unwrapKey"`.
## Examples
The examples for `SubtleCrypto` methods often use `CryptoKey` objects. For example:
  * `SubtleCrypto.generateKey()`
  * `SubtleCrypto.deriveKey()`
  * `SubtleCrypto.importKey()`
  * `SubtleCrypto.exportKey()`
  * `SubtleCrypto.wrapKey()`
  * `SubtleCrypto.unwrapKey()`
  * `SubtleCrypto.encrypt()`
  * `SubtleCrypto.decrypt()`
  * `SubtleCrypto.sign()`
  * `SubtleCrypto.verify()`


  * Web Crypto API
  * Web security
  * Privacy, permissions, and information security
  * `Crypto` and `Crypto.subtle`.


# File and Directory Entries API
The File and Directory Entries API provides a way to process directories and file lists provided by the user via a form input or a drag-and-drop operation. It is a more advanced version of the File API, which allows you to work with a single file. It was originally intended to support a full virtual file system, but now only supports read operations on user-provided data.
See Relationship to other file-related APIs for a comparison between this API, the File System API, and the File API.
## Getting access to a file system
There are two ways to get access to file systems defined in the current specification draft:
  * When handling a `drop` event for drag and drop, you can call `DataTransferItem.webkitGetAsEntry()` to get the `FileSystemEntry` for a dropped item. If the result isn't `null`, then it's a dropped file or directory, and you can use file system calls to work with it.
  * The `HTMLInputElement.webkitEntries` property lets you access the `FileSystemFileEntry` objects for the currently selected files, but only if they are dragged-and-dropped onto the file chooser (Firefox bug 1326031). If `HTMLInputElement.webkitdirectory` is `true`, the `<input>` element is instead a directory picker, and you get `FileSystemDirectoryEntry` objects for each selected directory.


## History
The original File System API was created to let browsers implement support for accessing a sandboxed virtual file system on the user's storage device. Work to standardize the specification was abandoned back in 2012, but by that point, Google Chrome included its own implementation of the API. Over time, a number of popular sites and Web applications came to use it, often without providing any means of falling back to standard APIs or even checking to be sure the API is available before using it. Mozilla instead opted to implement other APIs which can be used to solve many of the same problems, such as IndexedDB; see the blog post Why no FileSystem API in Firefox? for more insights.
As a result, a number of popular websites did not work properly on browsers other than Chrome. To resolve that, the features of Google's API for which consensus could be reached were standardized as the File and Directory Entries API, and this was then implemented in other browsers.
## Interfaces
The File and Directory Entries API includes the following interfaces:
`FileSystem`
    
Represents a file system.
`FileSystemEntry`
    
The basic interface representing a single entry in a file system. This is implemented by other interfaces which represent files or directories.
`FileSystemFileEntry`
    
Represents a single file in a file system.
`FileSystemDirectoryEntry`
    
Represents a single directory in a file system.
`FileSystemDirectoryReader`
    
Created by calling `FileSystemDirectoryEntry.createReader()`, this interface provides the functionality which lets you read the contents of a directory.
### Extensions to other interfaces
`DataTransferItem.webkitGetAsEntry()`
    
Returns an object based on `FileSystemEntry` representing the selected file's entry in its file system. This will generally be either a `FileSystemFileEntry` or `FileSystemDirectoryEntry` object.
`File.webkitRelativePath`
    
Returns the path the URL of the `File` is relative to.
`HTMLInputElement.webkitdirectory`
    
A boolean that represents the `webkitdirectory` attribute. If `true`, the file-system-picker interface only accepts directories instead of files.
`HTMLInputElement.webkitEntries`
    
Describes the currently selected files or directories.
  * File API
  * File System API


# Speculation Rules API
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The Speculation Rules API is designed to improve performance for future navigations. It targets document URLs rather than specific resource files, and so makes sense for multi-page applications (MPAs) rather than single-page applications (SPAs).
The Speculation Rules API provides an alternative to the widely-available `<link rel="prefetch">` feature and is designed to supersede the Chrome-only deprecated `<link rel="prerender">` feature. It provides many improvements over these technologies, along with a more expressive, configurable syntax for specifying which documents should be prefetched or prerendered.
Note: The Speculation Rules API doesn't handle subresource prefetches; for that you'll need to use `<link rel="prefetch">`.
## Concepts and usage
Speculation rules can be specified inside inline `<script type="speculationrules">` elements and external text files referenced by the `Speculation-Rules` response header. The rules are specified as a JSON structure.
A script example:
    
    <script type="speculationrules">
      {
        "prerender": [
          {
            "where": {
              "and": [
                { "href_matches": "/*" },
                { "not": { "href_matches": "/logout" } },
                { "not": { "href_matches": "/*\\?*(^|&)add-to-cart=*" } },
                { "not": { "selector_matches": ".no-prerender" } },
                { "not": { "selector_matches": "[rel~=nofollow]" } }
              ]
            }
          }
        ],
        "prefetch": [
          {
            "urls": ["next.html", "next2.html"],
            "requires": ["anonymous-client-ip-when-cross-origin"],
            "referrer_policy": "no-referrer"
          }
        ]
      }
    </script>
    
Speculation rules using a `<script>` element need to be explicitly allowed in the `Content-Security-Policy` `script-src` directive if the site includes it. This is done by adding one of the `'inline-speculation-rules'` source, a hash-source, or nonce-source.
An HTTP header example:
    
    Speculation-Rules: "/rules/prefetch.json"
    
The text resource containing the speculation rules JSON can have any valid name and extension, but it must be served with an `application/speculationrules+json` MIME type.
Note: Rules can be specified using both an inline script and the HTTP header simultaneously — all rules applied to a document are parsed and added to the document's speculation rules list.
You specify a different array to contain the rules for each speculative loading type (for example `"prerender"` or `"prefetch"`). Each rule is contained in an object that specifies for example a list of resources to be fetched, plus options such as an explicit `Referrer-Policy` setting for each rule. Note that prerendered URLs are also prefetched.
See `<script type="speculationrules">` for a full explanation of the available syntax.
### Using prefetching
Including `prefetch` rules inside a `<script type="speculationrules">` element or `Speculation-Rules` header will cause supporting browsers to download the response body of the referenced pages, but none of the subresources referenced by the page. When a prefetched page is navigated to, it will render much more quickly than if it were not prefetched.
The results are kept in a per-document in-memory cache. Any cached prefetches are discarded when you navigate away from the current page, except of course a prefetched document that you then navigate to.
This means that if you prefetch something the user doesn't navigate to, it is generally a waste of resources, although the result may populate the HTTP cache if headers allow. That said, the upfront cost of a prefetch is much smaller than the upfront cost of a prerender, so you are encouraged to adopt prefetching broadly, for example prefetching all of the significant pages on your site, provided they are safe to prefetch (see Unsafe speculative loading conditions for more details).
Same-site and cross-site prefetches will work, but cross-site prefetches are limited (see "same-site" and "cross-site" for an explanation of the difference between the two). For privacy reasons cross-site prefetches will currently only work if the user has no cookies set for the destination site — we don't want sites to be able to track user activity via prefetched pages (which they may never even actually visit) based on previously-set cookies.
Note: In the future an opt-in for cross-site prefetches will be provided via the `Supports-Loading-Mode` header, but this was not implemented at the time of writing (only cross-origin, same-site prerendering opt-in was available).
For browsers that support it, speculation rules prefetch should be preferred over older prefetch mechanisms, namely `<link rel="prefetch">` and `fetch()` with a `priority: "low"` option set on it. Because we know that speculation rules prefetch is for navigations, not general resource prefetching:
  * It can be used for cross-site navigations, whereas `<link rel="prefetch">` cannot.
  * It doesn't get blocked by `Cache-Control` headers, whereas `<link rel="prefetch">` often does.


In addition, speculation rules prefetch:
  * Automatically lowers the priority when needed (`fetch()` doesn't).
  * Is respectful of the user's configuration. For example, prefetching doesn't happen when the user's device is in Battery Saver or Data Saver mode.
  * Stores the prefetched resources in a per-document in-memory cache as opposed to the HTTP cache, which may result in slightly faster prefetching.


### Using prerendering
Including `prerender` rules inside a `<script type="speculationrules">` element or `Speculation-Rules` header will cause supporting browsers to fetch, render, and load the content into an invisible tab, stored in a per-document in-memory cache. This includes loading all subresources, running all JavaScript, and even loading subresources and performing data fetches started by JavaScript. Any cached prerenders and their subresources are discarded when you navigate away from the current page, except of course a prerendered document that you then navigate to.
Future navigations to a prerendered page will be near-instant. The browser activates the invisible tab instead of carrying out the usual navigation process, replacing the old foreground page with the prerendered page. If a page is activated before it has fully prerendered, it is activated in its current state and then continues to load, which means you will still see a significant performance improvement.
Prerendering uses memory and network bandwidth. If you prerender something the user doesn't navigate to, these are wasted (although the result may populate the HTTP cache if headers allow, allowing later use). The upfront cost of a prerender is much larger than the upfront cost of a prefetch, and other conditions could also make content unsafe to prerender (see Unsafe speculative loading conditions for more details). As a result, you are encouraged to adopt prerendering more sparingly, carefully considering cases where there is a high likelihood of the page being navigated to, and you think the user experience benefit is worth the extra cost.
Note: To put the amount of potential resource wastage in perspective, a prerender uses about the same amount of resources as rendering an `<iframe>`.
Note: Many APIs will be automatically deferred when prerendering/until activation. See Platform features deferred or restricted during prerender for more details.
Prerendering is restricted to same-origin documents by default. Cross-origin, same-site prerendering is possible — it requires the navigation target to opt-in using the `Supports-Loading-Mode` header with a value of `credentialed-prerender`. Cross-site prerendering is not possible at this time.
For browsers that support it, speculation rules prerender should be preferred over older prerender mechanisms, namely `<link rel="prerender">`:
  * `<link rel="prerender">` is Chrome-specific and was never standardized, and the Chrome engineering team are in the process of sunsetting it.
  * It loads subresources loaded via JavaScript, whereas `<link rel="prerender">` doesn't.
  * It doesn't get blocked by `Cache-Control` settings, whereas `<link rel="prerender">` often does.
  * Speculation rules prerender should be treated as a hint and a progressive enhancement. Unlike `<link rel="prerender">`, it is a speculative hint and the browser may choose not to act upon the hint based on user settings, current memory usage, or other heuristics.


### Speculation rules API feature detection
You can check if the Speculation Rules API is supported using the following code:
    
    if (
      HTMLScriptElement.supports &&
      HTMLScriptElement.supports("speculationrules")
    ) {
      console.log("Your browser supports the Speculation Rules API.");
    }
    
For example, you might want to insert speculation rules for prefetching in supporting browsers, but use an older technology such as `<link rel="prefetch">` in others:
    
    if (
      HTMLScriptElement.supports &&
      HTMLScriptElement.supports("speculationrules")
    ) {
      const specScript = document.createElement("script");
      specScript.type = "speculationrules";
      const specRules = {
        prefetch: [
          {
            source: "list",
            urls: ["/next.html"],
          },
        ],
      };
      specScript.textContent = JSON.stringify(specRules);
      document.body.append(specScript);
    } else {
      const linkElem = document.createElement("link");
      linkElem.rel = "prefetch";
      linkElem.href = "/next.html";
      document.head.append(linkElem);
    }
    
## Detecting prefetched and prerendered pages
This section looks at different ways to detect whether a requested page has been prefetched or prerendered.
### Server-side detection
Prefetched and prerendered page requests are sent with the `Sec-Purpose` request header:
For prefetch:
    
    Sec-Purpose: prefetch
    
For prerender:
    
    Sec-Purpose: prefetch;prerender
    
Servers can respond based on this header, for example, to log speculative load requests, return different content, or even prevent speculative loading from happening. If a non-success response code is returned (any HTTP status other than in the 200-299 range after redirects), then the page will not be prefetched/prerendered. In addition the 204 and 205 status codes also prevent prerendering (but do not prevent prefetch).
Using a non-success code (for example a 503) is the easiest way to prevent speculative loading server-side, although it is usually a better approach to allow the prefetch/prerender, and use JavaScript to delay any actions that should only happen when the page is actually viewed.
### JavaScript prefetch detection
When a page is prefetched, its `PerformanceResourceTiming.deliveryType` entry will return a value of `"navigational-prefetch"`. You could use the following to run a function when a performance entry of type `"navigational-prefetch"` is received:
    
    if (
      performance.getEntriesByType("navigation")[0].deliveryType ===
      "navigational-prefetch"
    ) {
      respondToPrefetch(); // Author-defined function
    }
    
This technique is useful when measuring performance, or when you want to defer actions that might cause problems if they occur during prefetching (see Unsafe prefetching).
### JavaScript prerender detection
To run an activity while the page is prerendering, you can check for the `Document.prerendering` property. You could for example run some analytics:
    
    if (document.prerendering) {
      analytics.sendInfo("got this far during prerendering!");
    }
    
When a prerendered document is activated, `PerformanceNavigationTiming.activationStart` is set to a `DOMHighResTimeStamp` representing the time between when the prerender was started and the document was activated. The following function can check for prerendering and prerendered pages:
    
    function pagePrerendered() {
      return (
        document.prerendering ||
        self.performance?.getEntriesByType?.("navigation")[0]?.activationStart > 0
      );
    }
    
When the prerendered page is activated by the user viewing the page, the `prerenderingchange` event will fire. This can be used to enable activities that previously would be started by default on page load but which you wish to delay until the page is viewed by the user. The following code sets up an event listener to run a function once prerendering has finished, on a prerendered page, or runs it immediately on a non-prerendered page:
    
    if (document.prerendering) {
      document.addEventListener("prerenderingchange", initAnalytics, {
        once: true,
      });
    } else {
      initAnalytics();
    }
    
## Unsafe speculative loading conditions
This section covers conditions to look out for, under which prefetching and/or prerendering are unsafe. This means that prefetching/prerendering pages that exhibit these conditions may require mitigations in your code, or need to be avoided altogether.
### Unsafe prefetching
As mentioned earlier, we recommend adopting prefetching broadly, as the risk-to-reward ratio is fairly low — the potential for resource wastage is minimal, and the performance improvements can be significant. However, you need to make sure prefetched pages do not cause problems with the flow of your application.
When a prefetch is done, the browser downloads the response body of the referenced page via a single GET request, which the user may navigate to at a future time. Problems can arise specifically when the URL of the request performs a server-initiated side effect that you don't want to happen until the URL is navigated to.
For example:
  * Sign-out URLs.
  * Language switching URLs.
  * "Add to cart" URLs.
  * Sign-in flow URLs where the server causes an SMS to be sent, for example as a one-time password (OTP).
  * URLs that increment a user's usage allowance numbers, such as consuming their monthly free article allowance or starting the timer on their monthly minutes.
  * URLs that initiate server-side ad conversion tracking.


Such issues can be mitigated on the server by watching for the `Sec-Purpose: prefetch` header as the requests come in, and then running specific code to defer problematic functionality. Later on, when the page is actually navigated to, you can initiate the deferred functionality via JavaScript if needed.
Note: You can find more details about the detection code in the Detecting prefetched and prerendered pages section.
It is also potentially risky to prefetch a document whose server-rendered contents will change due to actions the user can take on the current page. This could include, for example, flash sale pages or movie theater seat maps. Test such cases carefully, and mitigate such issues by updating content once the page is loaded. See Server-rendered varying state for more details about these cases.
Note: Browsers will cache prefetched pages for a short time (Chrome for example caches them for 5 minutes) before discarding them, so in any case, your users might see content that is up to 5 minutes out of date.
Stale prefetches can be cleared using the `prefetchCache` value of the `Clear-Site-Data` response header. This might be used, for example, when for state changing requests mean that the cached data is no longer valid, such as when logging out of a site.
Prefetching is safe if all side effects of fetching the page result from JavaScript execution, since the JavaScript will not run until activation.
One final tip is to audit the URLs listed as disallowed in your robots.txt file — normally these URLs point to pages that can only be accessed by authenticated users, and therefore should not be included in search engine results. Many of these will be fine, but it can be a good place to find URLs unsafe for prefetching (i.e., they exhibit the conditions described above).
### Unsafe prerendering
Prerendering is more risky to adopt than prefetching and should therefore be done sparingly, in cases where it is worth it. There are more unsafe conditions to watch out for with prerendering so, while the reward is higher, the risk is too.
When a prerender is done, the browser GETs the URL and renders and loads the content into an invisible tab. This includes running the content's JavaScript and loading all subresources, including those fetched by JavaScript. Content can be potentially unsafe to prerender if any of the following conditions are observed:
  * The URL is unsafe to prefetch. Read the previous section first if you haven't already, and understand that these conditions also equally apply to unsafe prerendering.
  * The page's JavaScript modifies client-side storage (for example Web Storage or IndexedDB) on load in a way that may cause confusing effects in other, non-prerendered pages that the user is currently looking at.
  * The page runs JavaScript or loads images that cause side effects such as sending analytics, recording ad impressions, or otherwise modifying the state of the application as if the user had already interacted with it. Again, this can affect the flow of the application, or cause incorrect performance or usage reporting. See Server-rendered varying state for more details about such use cases.


To mitigate such problems, you can use the following techniques:
  * Watch for the `Sec-Purpose: prefetch` header on the server as the requests come in, and then run specific code to defer problematic functionality.
  * Use the `prerenderingchange` event to detect when the prerendered page is actually activated and run code as a result. This is useful in two cases: 
    * Deferring code that may cause problems if it is run before the page is viewed. For example, you may want to wait until after activation to update client-side storage or modify server-side state using JavaScript. This can avoid situations when the UI and the application state become out of sync with one another, for example a shopping cart showing no items even though the user has added some.
    * If the above is not possible, then you could still rerun code after the page is activated to bring the app up-to-date again. For example, a highly dynamic flash sale page might rely on content updates coming in from a third-party library. If you can't delay the updates, you can always get fresh updates once the user views the page. Prerendered pages can be updated in real-time using the Broadcast Channel API, or another mechanism such as `fetch()` or a `WebSocket`. This guarantees that the user will see up-to-date content after prerendering activation.
  * Manage your third-party analytics scripts carefully — if possible, use scripts that are prerendering-aware (for example use the `Document.prerendering` property to defer running on prerendering pages) such as Google Analytics or NewRelic. 
    * Note that loading the contents of cross-origin `<iframe>`s is delayed while prerendering, until activation occurs. This is done to avoid breakage caused by loading cross-origin pages that are unaware of prerendering, and to avoid complexities around what credentials and storage to expose to these frames. It means that users may initially see blank frames in some cases, but it also means most third-party widgets such as ad tech are safe to use while prerendering.
    * For third-party scripts that are not prerendering-aware, avoid loading them until after activation using the `prerenderingchange` event, as mentioned earlier.


### Server-rendered varying state
There are two main types of server-rendered state to be concerned with: outdated state, and user-specific state. This can cause both unsafe prefetching and prerendering.
  * Outdated state: Consider the example of a server-rendered list of blog comments, which may become out of date between the blog post being prerendered, and it being viewed. This might be particularly problematic if the current page is an admin panel where the user is deleting spam comments. If the user then navigates to the blog post, they might be confused as to why they can see the spam comments they just deleted.
  * User-specific state: Consider the example of tracking sign-in state via a cookie. Problems can arise like the following: 
    * The user visits `https://site.example/a` in tab 1 and `https://site.example/b` in tab 2, while logged out.
    * `https://site.example/b` prerenders `https://site.example/c`. It will be prerendered in a logged-out state.
    * The user signs in to `https://site.example` in tab 1.
    * The user switches to tab 2 and clicks the link to `https://site.example/c`, which activates the prerendered page.
    * Tab 2 displays a signed-out view of `https://site.example/c`, which confuses the user since they thought they were logged in.


User-specific state problems can occur for other user settings, for example language settings, dark-mode preferences, or adding items to a cart. They can also occur when only a single tab is involved:
  * Let's say the user visits `https://site.example/product`.
  * `https://site.example.com/product` prerenders `https://site.example.com/cart`. It prerenders with 0 items in the cart.
  * The user clicks on the "Add to cart" buttons, which initiates a fetch request to add the item to the user's cart (with no page reload).
  * The user clicks on the link to `https://site.example.com/cart`, which activates the prerendered page.
  * The user sees an empty cart, even though they just added something to it.


The best mitigation for these cases, and indeed any time when content can get out of sync with the server, is for pages to refresh themselves as needed. For example, a server might use the Broadcast Channel API, or another mechanism such as `fetch()` or a `WebSocket`. Pages can then update themselves appropriately, including speculatively loaded pages that have not yet been activated.
Where refreshes are not possible, speculations can be cleared using the `Clear-Site-Data` response header with the `prefetchCache` or `prerenderCache` values (or both) as appropriate.
The header can be returned on any same-site HTTP request (such as an `/api/add-to-cart` API call).
## Session history behavior for prerendered documents
Activating a prerendering/prerendered document behaves like any conventional navigation, from the end-user perspective. The activated document is displayed in the tab and appended to session history, and any existing forward history entries are pruned. Any navigations taking place within the prerendering browsing context before activation do not affect the session history.
From the developer's perspective, a prerendering document can be thought of as having a trivial session history where only one entry — the current entry — exists. All navigations within the prerendering context are effectively replaced.
While API features that operate on session history (for example `History` and `Navigation`) can be called within prerendering documents, they only operate on the context's trivial session history. Consequently, prerendering documents do not take part in their referring page's joint session history. For example, they cannot navigate their referrer via `History.back()`.
This design ensures that users get the expected experience when using the back button — i.e., that they are taken back to the last thing they saw. Once a prerendering document is activated, only a single session history entry gets appended to the joint session history, ignoring any previous navigations that happened within the prerendering browsing context. Going back one step in the joint session history — for example, by pressing the back button — takes the user back to the referrer page.
## Platform features deferred or restricted during prerender
Because a prerendered page is opened in a hidden state, several APIs features that cause potentially intrusive behaviors are not activated in this state, and are instead deferred until the page is activated. Other web platform features that are problematic when prerendering are restricted altogether. This section provides details of what features are deferred or restricted.
Note: In the small number of cases where deferring and restricting are not possible, the prerender is canceled.
### Asynchronous API deferral
Deferring means that the API feature immediately returns a pending promise and then does nothing until page activation. After activation, the feature runs as normal and the promise is resolved or rejected as normal.
The following asynchronous features' results are deferred in prerendered documents until they are activated:
  * Audio Output Devices API: `MediaDevices.selectAudioOutput()`
  * Background Fetch API: `BackgroundFetchManager.fetch()`
  * Broadcast Channel API: `BroadcastChannel.postMessage()`
  * Credential Management API: `CredentialsContainer.create()`, `CredentialsContainer.get()`, `CredentialsContainer.store()`
  * Encrypted Media Extensions API: `Navigator.requestMediaKeySystemAccess()`
  * Gamepad API: `Navigator.getGamepads()`, `gamepadconnected` event, `gamepaddisconnected` event
  * Geolocation API: `Geolocation.getCurrentPosition()`, `Geolocation.watchPosition()`, `Geolocation.clearWatch()`
  * `HTMLMediaElement` API: The playback position will not advance while the containing document is prerendering
  * Idle Detection API: `IdleDetector.start()`
  * Media Capture and Streams API: `MediaDevices.getUserMedia()` (and the legacy `Navigator.getUserMedia()` version), `MediaDevices.enumerateDevices()`
  * Notifications API: `Notification()` constructor, `Notification.requestPermission()`
  * Push API: `PushManager.subscribe()`
  * Screen Orientation API: `ScreenOrientation.lock()`, `ScreenOrientation.unlock()`
  * Sensor APIs: `Sensor.start()`
  * Service Worker API: `ServiceWorker.postMessage()`, `ServiceWorkerContainer.register()`, `ServiceWorkerRegistration.update()`, `ServiceWorkerRegistration.unregister()`
  * Storage API: `StorageManager.persist()`
  * Web Audio API: `AudioContext`s are not allowed to start while the containing document is prerendering
  * Web Bluetooth API: `Bluetooth.getDevices()`, `Bluetooth.requestDevice()`
  * WebHID API: `HID.getDevices()`, `HID.requestDevice()`
  * Web Locks API: `LockManager.query()`, `LockManager.request()`
  * Web MIDI API: `Navigator.requestMIDIAccess()`
  * Web NFC API: `NDefReader.write()`, `NDefReader.scan()`
  * Web Serial API: `Serial.getPorts()`, `Serial.requestPort()`
  * Web Speech API: `SpeechRecognition.abort()`, `SpeechRecognition.start()`, `SpeechRecognition.stop()`, `SpeechSynthesis.cancel()`, `SpeechSynthesis.pause()`, `SpeechSynthesis.resume()`, `SpeechSynthesis.speak()`
  * WebUSB API: `USB.getDevices()`, `USB.requestDevice()`
  * WebXR Device API: `XRSystem.requestSession()`


### Implicitly restricted APIs
The following features will automatically fail or no-op in documents that are not activated.
APIs that require transient activation or sticky activation:
  * Confirmation dialogs generated by the `beforeunload` event
  * The firing of any events in the Clipboard API.
  * File System API: `Window.showDirectoryPicker()`, `Window.showOpenFilePicker()`, `Window.showSaveFilePicker()`
  * Fullscreen API: `Element.requestFullscreen()`
  * Idle Detection API: `IdleDetector.requestPermission()`
  * Keyboard API: `Keyboard.lock()` (which requires fullscreen)
  * Payment Request API: `PaymentRequest.show()`
  * Presentation API: `PresentationRequest.start()`
  * Pointer Lock API: `Element.requestPointerLock()`
  * Screen Capture API: `MediaDevices.getDisplayMedia()`
  * Web Share API: `Navigator.share()`
  * `Window.open()`


APIs that require the containing document to be focused:
  * Clipboard API: `Clipboard.read()`, `Clipboard.readText()`, `Clipboard.write()`, `Clipboard.writeText()`


APIs that require the containing document's `Document.visibilityState` to be `"visible"`:
  * Picture-in-Picture API: `HTMLVideoElement.requestPictureInPicture()` (requires the containing document's visibility state to be `"visible"`, or transient activation)
  * Screen Wake Lock API: `WakeLock.request()`


### Other restricted features
  * Download links, i.e., `<a>` and `<area>` elements with the `download` attribute, will have their downloads delayed until prerendering has finished.
  * No cross-site navigations: Any prerendering document that navigates to a different site will be immediately discarded before a request to that other site is sent.
  * Restricted URLs: Prerendering documents cannot host non-HTTP(S) top-level URLs. Including the following URL types will cause the prerender to be immediately discarded: 
    * `javascript:` URLs
    * `data:` URLs
    * `blob:` URLs
    * `about:` URLs, including `about:blank` and `about:srcdoc`
  * Session storage: `Window.sessionStorage` can be used, but the behavior is very specific, to avoid breaking sites that expect only one page to access the tab's session storage at a time. A prerendered page therefore starts out with a clone of the tab's session storage state from when it was created. Upon activation, the prerendered page's storage clone is discarded, and the tab's main storage state is used instead. Pages that use session storage can use the `prerenderingchange` event to detect when this storage swap occurs.
  * `Window.print()`: Any calls to this method are ignored.
  * "Simple dialog methods" are restricted as follows: 
    * `Window.alert()` immediately returns without showing a dialog.
    * `Window.confirm()` immediately returns `false` without showing a dialog.
    * `Window.prompt()` immediately returns an empty string (`""`) without showing a dialog.
  * Dedicated/shared worker scripts are loaded, but their execution is deferred until the prerendered document is activated.
  * Cross-origin `<iframe>` loads are delayed while prerendering until after the page is activated.


## Interfaces
The Speculation Rules API does not define any interfaces of its own.
### Extensions to other interfaces
`Document.prerendering` Experimental
    
A boolean property that returns `true` if the document is currently in the process of prerendering.
`prerenderingchange` event  Experimental
    
Fired on a prerendered document when it is activated (i.e., the user views the page).
`PerformanceNavigationTiming.activationStart` Experimental
    
A number representing the time between when a document starts prerendering and when it is activated.
`PerformanceResourceTiming.deliveryType` `"navigational-prefetch"` value  Experimental
    
Signals that the type of a performance entry is a prefetch.
## HTTP headers
`Content-Security-Policy` `'inline-speculation-rules'` value  Experimental
    
Used to opt-in to allowing usage of `<script type="speculationrules">` to define speculation rules on the document being fetched.
`Clear-Site-Data` `'prefetchCache'` and `'prerenderCache'` values  Experimental
    
Use to clear speculations. For example, when state changes that renders the speculations stale.
`Speculation-Rules` Experimental
    
Provides a list of URLs pointing to text resources containing speculation rule JSON definitions. When the response is an HTML document, these rules will be added to the document's speculation rule set.
`Supports-Loading-Mode` Experimental
    
Set by a navigation target to opt-in to using various higher-risk loading modes. For example, cross-origin, same-site prerendering requires a `Supports-Loading-Mode` value of `credentialed-prerender`.
## HTML features
`<script type="speculationrules">` Experimental
    
Used to define a set of prefetch and/or prerender speculation rules inside the current document, which are added to the document's speculation rule set.
## Examples
For code examples, see Prerender pages in Chrome for instant page navigations on developer.chrome.com (2025)
>
### api.Document.prerendering
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Speculation_Rules_API` 108 108 No 94 No 108 No 73 No 21.0 108 No  
### api.Document.prerenderingchange_event
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Speculation_Rules_API` 108 108 No 94 No 108 No 73 No 21.0 108 No  
### html.elements.script.type.speculationrules
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Speculation_Rules_API` 109105–109Initial support included same-origin prerendering only. 109105–109Initial support included same-origin prerendering only. No 9591–95Initial support included same-origin prerendering only. No 109103–109Initial support included same-origin prerendering only. No 7471–74Initial support included same-origin prerendering only. No 21.020.0–21.0Initial support included same-origin prerendering only. No No  
`eagerness` 121 121 No 107 No 121 No 81 No 25.0 No No  
`expects_no_vary_search` 127121–127Supported for `prefetch` only. 127121–127Supported for `prefetch` only. No 113107–113Supported for `prefetch` only. No 127121–127Supported for `prefetch` only. No 8481–84Supported for `prefetch` only. No 28.025.0–28.0Supported for `prefetch` only. No No  
`prefetch` 110 110 No 96 No 103 No 71 No 20.0 No No  
`prerender` 105 105 No 91 No 103 No 71 No 20.0 No No  
`referrer_policy` 111 111 No 97 No 111 No 75 No 22.0 No No  
`relative_to` 121 121 No 107 No 121 No 81 No 25.0 No No  
`requires` 110 110 No 96 No 103 No 71 No 20.0 No No  
`source_optional` 122 122 No 108 No 122 No 81 No 26.0 No No  
`tag` 136 136 No 121 No 136 No 90 No No No No  
`target_hint` 138Only `"_blank"` and `"_self"` are supported and only for prefetch. 138Only `"_blank"` and `"_self"` are supported and only for prefetch. No 122Only `"_blank"` and `"_self"` are supported and only for prefetch. No 138Only `"_blank"` and `"_self"` are supported and only for prefetch. No 91Only `"_blank"` and `"_self"` are supported and only for prefetch. No No No No  
`urls` 109 109 No 95 No 103 No 71 No 20.0 No No  
`where` 121 121 No 107 No 121 No 81 No 25.0 No No  
  * Speculative loading for a comparison of speculation rules and other similar performance improvement features.


# HTMLSelectedContentElement
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The `HTMLSelectedContentElement` interface represents a `<selectedcontent>` element in the DOM.
EventTarget  Node  Element  HTMLElement  HTMLSelectedContentElement 
## Instance properties
This interface has no properties, but inherits properties from: `HTMLElement`.
## Instance methods
This interface has no methods, but inherits methods from: `HTMLElement`.
Not currently part of a specification. See https://github.com/whatwg/html/pull/10633 for the relevant specification PR.
  * The HTML element implementing this interface: `<selectedcontent>`.


# NotRestoredReasons
The `NotRestoredReasons` interface of the Performance API provides report data containing reasons why the current document was blocked from using the back/forward cache (bfcache) on navigation.
These objects are accessed via the `PerformanceNavigationTiming.notRestoredReasons` property.
## Instance properties
`children` Read only Experimental
    
An array of `NotRestoredReasons` objects, one for each child `<iframe>` embedded in the current document, which may contain reasons why the top-level frame was blocked relating to the child frames. Each object has the same structure as the parent object — this way, any number of levels of embedded `<iframe>`s can be represented inside the object recursively. If the frame has no children, the array will be empty; if the document is in a cross-origin `<iframe>`, `children` will return `null`.
`id` Read only Experimental
    
A string representing the `id` attribute value of the `<iframe>` the document is contained in (for example `<iframe id="foo" src="...">`). If the document is not in an `<iframe>` or the `<iframe>` has no `id` set, `id` will return `null`.
`name` Read only Experimental
    
A string representing the `name` attribute value of the `<iframe>` the document is contained in (for example `<iframe name="bar" src="...">`). If the document is not in an `<iframe>` or the `<iframe>` has no `name` set, `name` will return `null`.
`reasons` Read only Experimental
    
An array of `NotRestoredReasonDetails` objects, each representing a reason why the navigated page was blocked from using the bfcache. If the document is in a cross-origin `<iframe>`, `reasons` will return `null`, but the parent document may show a `reason` of `"masked"` if any `<iframe>`s blocked bfcache usage for the top-level frame.
`src` Read only Experimental
    
A string representing the path to the source of the `<iframe>` the document is contained in (for example `<iframe src="exampleframe.html">`). If the document is not in an `<iframe>`, `src` will return `null`.
`url` Read only Experimental
    
A string representing the URL of the navigated page or `<iframe>`. If the document is in a cross-origin `<iframe>`, `url` will return `null`.
## Instance methods
`toJSON()` Experimental
    
A serializer; returns a JSON representation of the `NotRestoredReasons` object.
## Examples
See Monitoring bfcache blocking reasons for examples.
  * Monitoring bfcache blocking reasons
  * `PerformanceNavigationTiming.notRestoredReasons`


# StaticRange
The DOM `StaticRange` interface extends `AbstractRange` to provide a method to specify a range of content in the DOM whose contents don't update to reflect changes which occur within the DOM tree.
This interface offers the same set of properties and methods as `AbstractRange`.
`AbstractRange` and `StaticRange` are not available from web workers.
AbstractRange  StaticRange 
## Constructor
`StaticRange()`
    
Creates a new `StaticRange` object given options specifying the default values for its properties.
## Instance properties
The properties below are inherited from its parent interface, `AbstractRange`.
`StaticRange.collapsed` Read only
    
Returns a Boolean value that is `true` if the range's start and end positions are the same, resulting in a range of length 0.
`StaticRange.endContainer` Read only
    
Returns the DOM `Node` which contains the ending point of the range. The offset into the node at which the end position is located is indicated by `endOffset`.
`StaticRange.endOffset` Read only
    
Returns an integer value indicating the offset into the node given by `endContainer` at which the last character of the range is found.
`StaticRange.startContainer` Read only
    
Returns the DOM `Node` which contains the starting point of the range (which is in turn identified by `startOffset`.
`StaticRange.startOffset` Read only
    
Returns an integer value indicating the offset into the node specified by `startContainer` at which the first character of the range is located.
## Usage notes
A DOM range specifies a span of content in a document, potentially beginning inside one node (or element) and ending inside another one. Unlike a `Range`, a `StaticRange` represents a range which is fixed in time; it does not change to try to keep the same content within it as the document changes. If any changes are made to the DOM, the actual data contained within the range specified by a `StaticRange` may change. This lets the user agent avoid a lot of work that is unnecessary if the web app or site doesn't need a live-updating range.
  * Live updating range of content within the DOM: `Range`
  * `AbstractRange`, the abstract interface from which all ranges are derived


# URL API
Note: This feature is available in Web Workers.
The URL API is a component of the URL standard, which defines what constitutes a valid Uniform Resource Locator and the API that accesses and manipulates URLs. The URL standard also defines concepts such as domains, hosts, and IP addresses, and also attempts to describe in a standard way the legacy `application/x-www-form-urlencoded` MIME type used to submit web forms' contents as a set of key/value pairs.
## Concepts and usage
The majority of the URL standard is taken up by the definition of a URL and how it is structured and parsed. Also covered are definitions of various terms related to addressing of computers on a network, and the algorithms for parsing IP addresses and DOM addresses are specified. More interesting to most developers is the API itself.
### Accessing URL components
Creating an `URL` object for a given URL parses the URL and provides quick access to its constituent parts through its properties.
    
    let addr = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL_API");
    let host = addr.host;
    let path = addr.pathname;
    
The snippet above creates a `URL` object for the article you're reading right now, then fetches the `host` and `pathname` properties. In this case, those strings are `developer.mozilla.org` and `/en-US/docs/Web/API/URL_API`, respectively.
### Changing the URL
Most of the properties of `URL` are settable; you can write new values to them to alter the URL represented by the object. For example, to create a URL and set its username:
    
    let myUsername = "some-guy";
    let addr = new URL("https://example.com/login");
    addr.username = myUsername;
    
Setting the value of `username` not only sets that property's value, but it updates the overall URL. After executing the code snippet above, the value returned by `href` is `https://some-guy@example.com/login`. This is true for any of the writable properties.
### Queries
The `search` property on a `URL` contains the query string portion of the URL. For example, if the URL is `https://example.com/login?user=some-guy&page=news`, then the value of the `search` property is `?user=some-guy&page=news`. You can also look up the values of individual parameters with the `URLSearchParams` object's `get()` method:
    
    let addr = new URL("https://example.com/login?user=some-guy&page=news");
    try {
      loginUser(addr.searchParams.get("user"));
      gotoPage(addr.searchParams.get("page"));
    } catch (err) {
      showErrorMessage(err);
    }
    
For example, in the above snippet, the username and target page are taken from the query and passed to appropriate functions that are used by the site's code to log in and route the user to their desired destination within the site.
Other functions within `URLSearchParams` let you change the value of keys, add and delete keys and their values, and even sort the list of parameters.
## Interfaces
The URL API is a simple one, with only a couple of interfaces to its name:
`URL`
    
Can be used to parse, construct, normalize, and encode URLs.
`URLSearchParams`
    
Defines utility methods to work with the query string of a URL.
## Examples
>
### Parsing URL parameters using the URL API
You could process URL parameters by parsing a URL as a string, splitting it on certain characters or using regular expressions, but it's much easier to create a new `URL` object for this. The example below gets the document URL from `document.location.href`, sorts the parameters using `URLSearchParams.sort()`, then extracts the keys using `URLSearchParams.keys`.
For each key in the document URL, we add rows to a `<table>` element, one for each key found in the parameters, with the first column containing the key's name, and the second column containing the value:
    
    const table = document.querySelector(".param-table");
    
    const url = new URL(document.location.href);
    url.searchParams.sort();
    const keys = url.searchParams.keys();
    
    for (let key of keys) {
      let val = url.searchParams.get(key);
      let row = document.createElement("tr");
      let cell = document.createElement("td");
      cell.innerText = key;
      row.appendChild(cell);
      cell = document.createElement("td");
      cell.innerText = val;
      row.appendChild(cell);
      table.appendChild(row);
    }
    
You can try a live version of this example and view the full source code on GitHub.
>
### api.URL
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`URL` 19 12Before Edge 79, query arguments in the base URL argument are removed when calling the `URL` constructor. 26Before version 122, `host`, `hostname`, and `port` were not parsed for unknown protocols/schemes. 15 14.16–14.1Before Safari 14.1, calling the `URL` constructor with a base URL whose value is `undefined` caused Safari to throw a `TypeError`, see bug 216841. 25 26Before version 122, `host`, `hostname`, and `port` were not parsed for unknown protocols/schemes. 14 14.56–14.5Before Safari on iOS 14.1, calling the `URL` constructor with a base URL whose value is `undefined` caused Safari on iOS to throw a `TypeError`, see bug 216841. 1.5 4.4 14.56–14.5Before WebView on iOS 14.1, calling the `URL` constructor with a base URL whose value is `undefined` caused WebView on iOS to throw a `TypeError`, see bug 216841.  
`URL_API` 3219 12 19Before version 57, Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683). 1915 76 3225 19Before version 57, Firefox for Android had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683). 1914 76 2.01.5 4.44 76  
`canParse_static` 120 120 115 106 17 120 115 80 17 25.0 120 17  
`createObjectURL_static` 19 12 19`createObjectURL()` is no longer available within the context of a `ServiceWorker`. 15 6 25 19`createObjectURL()` is no longer available within the context of a `ServiceWorker`. 14 6 1.5 4.4 6  
`hash` 32 13 22 19 7 32 22 19 7 2.0 4.4.3 7  
`host` 32 13 22 19 7 32 22 19 7 2.0 4.4.3 7  
`hostname` 32 13 22 19 10 32 22 19 10 2.0 4.4.3 10  
`href` 32 13 22 19 10 32 22 19 10 2.0 4.4.3 10  
`origin` 32 12 26Before Firefox 49, Results for `URL` using the `blob` scheme incorrectly returned `null`. 19 10 32 26Before Firefox for Android 49, Results for `URL` using the `blob` scheme incorrectly returned `null`. 19 10 6.0 4.4.3 10  
`parse_static` 126 126 126 112 18 126 126 83 18 28.0 126 18  
`password` 32 12 26 19 10 32 26 19 10 6.0 4.4.3 10  
`pathname` 32 13 22Before Firefox 53, `pathname` and `search` returned wrong values for custom protocols. Given `protocol:host/x?a=true&b=false`, `pathname` would return "/x?a=true&b=false" and `search` would return "", rather than "/x" and "?a=true&b=false" respectively. See bug 1310483. 19 10 32 22Before Firefox for Android 53, `pathname` and `search` returned wrong values for custom protocols. Given `protocol:host/x?a=true&b=false`, `pathname` would return "/x?a=true&b=false" and `search` would return "", rather than "/x" and "?a=true&b=false" respectively. See bug 1310483. 19 10 2.0 4.4.3 10  
`port` 32 13 22 19 10 32 22 19 10 2.0 4.4.3 10  
`protocol` 32 13 22 19 10 32 22 19 10 2.0 4.4.3 10  
`revokeObjectURL_static` 19 12 19`revokeObjectURL()` is no longer available within the context of a `ServiceWorker`. 15 6 25 19`revokeObjectURL()` is no longer available within the context of a `ServiceWorker`. 14 6 1.5 4.4 6  
`search` 32 13 22Before Firefox 53, `pathname` and `search` returned wrong values for custom protocols. Given `protocol:host/x?a=true&b=false`, `pathname` would return "/x?a=true&b=false" and `search` would return "", rather than "/x" and "?a=true&b=false" respectively. See bug 1310483. 19 10 32 22Before Firefox for Android 53, `pathname` and `search` returned wrong values for custom protocols. Given `protocol:host/x?a=true&b=false`, `pathname` would return "/x?a=true&b=false" and `search` would return "", rather than "/x" and "?a=true&b=false" respectively. See bug 1310483. 19 10 2.0 4.4.3 10  
`searchParams` 51 17 29 38 10.1 51 29 41 10.3 5.0 51 10.3  
`toJSON` 71 17 54 58 11 71 54 50 11 10.0 71 11  
`toString` 19 17 54 15 7 25 54 14 7 6.0 4.4 7  
`username` 32 12 26 19 10 32 26 19 10 6.0 4.4.3 10  
### api.URLSearchParams
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`@@iterator` 49 17 44 36 10.1 49 44 36 10.3 5.0 49 10.3  
`URLSearchParams` 49 17 29 36 10.1 49 29 36 10.3 5.0 49 10.3  
`URL_API` 49 17 29Before version 57 single quotes in URLs were escaped (see bug 1386683). 36 10.1 49 29Before version 57 single quotes in URLs were escaped (see bug 1386683). 36 10.3 5.0 49 10.3  
`append` 49 17 29 36 10.1 49 29 36 10.3 5.0 49 10.3  
`delete` 49 17 29 36 1410.1–14Removing a non-existent query parameter doesn't remove `?` from the URL. See bug 193022. 49 29 36 1410.3–14Removing a non-existent query parameter doesn't remove `?` from the URL. See bug 193022. 5.0 49 1410.3–14Removing a non-existent query parameter doesn't remove `?` from the URL. See bug 193022.  
`entries` 49 17 44 36 10.1 49 44 36 10.3 5.0 49 10.3  
`forEach` 49 17 44 36 10.1 49 44 36 10.3 5.0 49 10.3  
`get` 49 17 29 36 10.1 49 29 36 10.3 5.0 49 10.3  
`getAll` 49 17 29 36 10.1 49 29 36 10.3 5.0 49 10.3  
`has` 49 17 29 36 10.1 49 29 36 10.3 5.0 49 10.3  
`keys` 49 17 44 36 10.1 49 44 36 10.3 5.0 49 10.3  
`set` 49 17 29 36 10.1 49 29 36 10.3 5.0 49 10.3  
`size` 113 113 112 99 17 113 112 76 17 23.0 113 17  
`sort` 61 17 54 48 11 61 54 45 11 8.0 61 11  
`toString` 49 17 29 36 10.1 49 29 36 10.3 5.0 49 10.3  
`values` 49 17 44 36 10.1 49 44 36 10.3 5.0 49 10.3  
  * Fetch API
  * CSS `<url>` type
  * `encodeURI()`
  * `encodeURIComponent()`


# MediaStreamTrack
The `MediaStreamTrack` interface of the Media Capture and Streams API represents a single media track within a stream; typically, these are audio or video tracks, but other track types may exist as well.
Some user agents subclass this interface to provide more precise information or functionality, such as `CanvasCaptureMediaStreamTrack`.
EventTarget  MediaStreamTrack 
## Instance properties
In addition to the properties listed below, `MediaStreamTrack` has constrainable properties which can be set using `applyConstraints()` and accessed using `getConstraints()` and `getSettings()`. See Capabilities, constraints, and settings to learn how to correctly work with constrainable properties. Not doing so correctly will result in your code being unreliable.
`MediaStreamTrack.contentHint`
    
A string that may be used by the web application to provide a hint as to what type of content the track contains to guide how it should be treated by API consumers. Allowable values depend on the value of the `MediaStreamTrack.kind` property.
`MediaStreamTrack.enabled`
    
A Boolean whose value of `true` if the track is enabled, that is allowed to render the media source stream; or `false` if it is disabled, that is not rendering the media source stream but silence and blackness. If the track has been disconnected, this value can be changed but has no more effect.
Note: You can implement standard "mute" functionality by setting `enabled` to `false`. The `muted` property refers to a condition in which there's no media because of a technical issue.
`MediaStreamTrack.id` Read only
    
Returns a string containing a unique identifier (GUID) for the track; it is generated by the browser.
`MediaStreamTrack.kind` Read only
    
Returns a string set to `"audio"` if the track is an audio track and to `"video"`, if it is a video track. It doesn't change if the track is disassociated from its source.
`MediaStreamTrack.label` Read only
    
Returns a string containing a user agent-assigned label that identifies the track source, as in `"internal microphone"`. The string may be left empty and is empty as long as no source has been connected. When the track is disassociated from its source, the label is not changed.
`MediaStreamTrack.muted` Read only
    
Returns a Boolean value indicating whether the track is unable to provide media data due to a technical issue.
Note: You can implement standard "mute" functionality by setting `enabled` to `false`, and unmute the media by setting it back to `true` again.
`MediaStreamTrack.readyState` Read only
    
Returns an enumerated string giving the status of the track. This will be one of the following values:
  * `"live"` which indicates that an input is connected and does its best-effort in providing real-time data. In that case, the output of data can be switched on or off using the `enabled` attribute.
  * `"ended"` which indicates that the input is not giving any more data and will never provide new data.


## Instance methods
`MediaStreamTrack.applyConstraints()`
    
Lets the application specify the ideal and/or ranges of acceptable values for any number of the available constrainable properties of the `MediaStreamTrack`.
`MediaStreamTrack.clone()`
    
Returns a duplicate of the `MediaStreamTrack`.
`MediaStreamTrack.getCapabilities()`
    
Returns an object detailing the accepted values or value range for each constrainable property of the associated `MediaStreamTrack`.
`MediaStreamTrack.getConstraints()`
    
Returns a `MediaTrackConstraints` object containing the currently set constraints for the track; the returned value matches the constraints last set using `applyConstraints()`.
`MediaStreamTrack.getSettings()`
    
Returns a `MediaTrackSettings` object containing the current values of each of the `MediaStreamTrack`'s constrainable properties.
`MediaStreamTrack.stop()`
    
Stops playing the source associated to the track, both the source and the track are disassociated. The track state is set to `ended`.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface:
`ended`
    
Sent when playback of the track ends (when the value `readyState` changes to `ended`), except when the track is ended by calling `MediaStreamTrack.stop`.
`mute`
    
Sent to the `MediaStreamTrack` when the value of the `muted` property is changed to `true`, indicating that the track is unable to provide data temporarily (such as when the network is experiencing a service malfunction).
`unmute`
    
Sent to the track when data becomes available again, ending the `muted` state.
  * Media Capture and Streams API
  * `MediaStream`


# Vibration API
Most modern mobile devices include vibration hardware, which lets software code provide physical feedback to the user by causing the device to shake. The Vibration API offers Web apps the ability to access this hardware, if it exists, and does nothing if the device doesn't support it.
## Concepts and usage
Vibration is described as a pattern of on-off pulses, which may be of varying lengths. The pattern may consist of either a single integer, describing the number of milliseconds to vibrate, or an array of integers describing a pattern of vibrations and pauses. Vibration is controlled with a single method: `Navigator.vibrate()`.
### A single vibration
You may pulse the vibration hardware one time by specifying either a single value or an array consisting of only one value:
    
    navigator.vibrate(200);
    navigator.vibrate([200]);
    
Both of these examples vibrate the device for 200 ms.
### Vibration patterns
An array of values describes alternating periods in which the device is vibrating and not vibrating. Each value in the array is converted to an integer, then interpreted alternately as the number of milliseconds the device should vibrate and the number of milliseconds it should not be vibrating. For example:
    
    navigator.vibrate([200, 100, 200]);
    
This vibrates the device for 200 ms, then pauses for 100 ms before vibrating the device again for another 200 ms.
You may specify as many vibration/pause pairs as you like, and you may provide either an even or odd number of entries; it's worth noting that you don't have to provide a pause as your last entry since the vibration automatically stops at the end of each vibration period.
### Canceling existing vibrations
Calling `Navigator.vibrate()` with a value of `0`, an empty array, or an array containing all zeros will cancel any currently ongoing vibration pattern.
### Continued vibrations
Some basic `setInterval` and `clearInterval` action will allow you to create persistent vibration:
    
    let vibrateInterval;
    
    // Starts vibration at passed in level
    function startVibrate(duration) {
      navigator.vibrate(duration);
    }
    
    // Stops vibration
    function stopVibrate() {
      // Clear interval and stop persistent vibrating
      if (vibrateInterval) clearInterval(vibrateInterval);
      navigator.vibrate(0);
    }
    
    // Start persistent vibration at given duration and interval
    // Assumes a number value is given
    function startPersistentVibrate(duration, interval) {
      vibrateInterval = setInterval(() => {
        startVibrate(duration);
      }, interval);
    }
    
Of course, the snippet above doesn't take into account the array method of vibration; persistent array-based vibration will require calculating the sum of the array items and creating an interval based on that number (with an additional delay, probably).
## Interfaces
>
### Extensions to other interfaces
`Navigator.vibrate()`
    
Causes vibration on devices with support for it. Does nothing if vibration support isn't available.
  * `Navigator.vibrate()`


# GamepadEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events `gamepadconnected` and `gamepaddisconnected` are fired in response to.
Event  GamepadEvent 
## Constructor
`GamepadEvent()`
    
Returns a new `GamepadEvent` object.
## Instance properties
`GamepadEvent.gamepad` Read only
    
Returns a `Gamepad` object, providing access to the associated gamepad data for the event fired.
## Examples
The gamepad property being called on a fired `gamepadconnected` event.
    
    window.addEventListener("gamepadconnected", (e) => {
      console.log(
        "Gamepad connected at index %d: %s. %d buttons, %d axes.",
        e.gamepad.index,
        e.gamepad.id,
        e.gamepad.buttons.length,
        e.gamepad.axes.length,
      );
    });
    
And on a `gamepaddisconnected` event.
    
    window.addEventListener("gamepaddisconnected", (e) => {
      console.log(
        "Gamepad disconnected from index %d: %s",
        e.gamepad.index,
        e.gamepad.id,
      );
    });
    
Using the Gamepad API
# CSSVariableReferenceValue
The `CSSVariableReferenceValue` interface of the CSS Typed Object Model API allows you to create a custom name for a built-in CSS value. This object functionality is sometimes called a "CSS variable" and serves the same purpose as the `var()` function. The custom name must begin with two dashes.
## Constructor
`CSSVariableReferenceValue()`
    
Creates a new `CSSVariableReferenceValue` object.
## Instance properties
`CSSVariableReferenceValue.variable`
    
Returns the custom name passed to the constructor.
`CSSVariableReferenceValue.fallback` Read only
    
Returns the built-in CSS value for the custom name.
## Instance methods
None.
# SpeechRecognitionResult
The `SpeechRecognitionResult` interface of the Web Speech API represents a single recognition match, which may contain multiple `SpeechRecognitionAlternative` objects.
## Instance properties
`SpeechRecognitionResult.isFinal` Read only
    
A boolean value that states whether this result is final (true) or not (false) — if so, then this is the final time this result will be returned; if not, then this result is an interim result, and may be updated later on.
`SpeechRecognitionResult.length` Read only
    
Returns the length of the "array" — the number of `SpeechRecognitionAlternative` objects contained in the result (also referred to as "n-best alternatives".)
## Instance methods
`SpeechRecognitionResult.item`
    
A standard getter that allows `SpeechRecognitionAlternative` objects within the result to be accessed via array syntax.
## Examples
This code is excerpted from our Speech color changer example.
    
    recognition.onresult = (event) => {
      // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
      // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
      // It has a getter so it can be accessed like an array
      // The first [0] returns the SpeechRecognitionResult at position 0.
      // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects
      // that contain individual results.
      // These also have getters so they can be accessed like arrays.
      // The second [0] returns the SpeechRecognitionAlternative at position 0.
      // We then return the transcript property of the SpeechRecognitionAlternative object
      const color = event.results[0][0].transcript;
      diagnostic.textContent = `Result received: ${color}.`;
      bg.style.backgroundColor = color;
    };
    
  * Web Speech API


# OfflineAudioCompletionEvent
The Web Audio API `OfflineAudioCompletionEvent` interface represents events that occur when the processing of an `OfflineAudioContext` is terminated. The `complete` event uses this interface.
Note: This interface is marked as deprecated; it is still supported for legacy reasons, but it will soon be superseded when the promise version of `OfflineAudioContext.startRendering` is supported in browsers, which will no longer need it.
Event  OfflineAudioCompletionEvent 
## Constructor
`OfflineAudioCompletionEvent()`
    
Creates a new `OfflineAudioCompletionEvent` object instance.
## Instance properties
Also inherits properties from its parent, `Event`.
`OfflineAudioCompletionEvent.renderedBuffer` Read only
    
An `AudioBuffer` containing the result of processing an `OfflineAudioContext`.
## Instance methods
Inherits methods from its parent, `Event`.
  * Using the Web Audio API


# Houdini APIs
Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser's rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.
## Advantages of Houdini
Houdini enables faster parse times than using JavaScript `HTMLElement.style` for style changes. Browsers parse the CSSOM — including layout, paint, and composite processes — before applying any style updates found in scripts. In addition, layout, paint, and composite processes are repeated for JavaScript style updates. Houdini code doesn't wait for that first rendering cycle to be complete. Rather, it is included in that first cycle — creating renderable, understandable styles. Houdini provides an object-based API for working with CSS values in JavaScript.
Houdini's CSS Typed Object Model API is a CSS Object Model with types and methods, exposing values as JavaScript objects making for more intuitive CSS manipulation than previous string based `HTMLElement.style` manipulations. Every element and style sheet rule has a style map which is accessible via its `StylePropertyMap`.
A feature of CSS Houdini is the `Worklet`. With worklets, you can create modular CSS, requiring a single line of JavaScript to import configurable components: no pre-processors, post-processors or JavaScript frameworks needed.
    
    CSS.paintWorklet.addModule("css-component.js");
    
This added module contains `PaintWorkletGlobalScope.registerPaint` functions, which register completely configurable worklets.
The CSS `paint()` function is an additional function supported by the `<image>` type. It takes parameters that include the name of the worklet, plus additional parameters needed by the worklet. The worklet also has access to the element's custom properties: they don't need to be passed as function arguments.
In the following example the `paint()` function is passed a worklet called `my-component`.
    
    li {
      background-image: paint(my-component, stroke, 10px);
      --highlights: blue;
      --theme: green;
    }
    
Note: With great power comes great responsibility! With Houdini you could invent your own masonry, grid, or regions implementation, but doing so is not necessarily the best idea. The CSS Working group does a lot of work to ensure every feature is performant, handles all edge cases, and considers security, privacy, and accessibility. As you extend CSS with Houdini, make sure to keep these considerations in mind, and start small before moving on to more ambitious projects.
## The Houdini APIs
Below you can find links to the main reference pages covering the APIs that fall under the Houdini umbrella, along with links to guides to help you if you need guidance in learning how to use them.
### CSS Properties and Values API
Defines an API for registering new CSS properties. Properties registered using this API are provided with a parse syntax that defines a type, inheritance behavior, and an initial value.
  * CSS Properties and Values API reference
  * CSS Properties and Values API guide
  * Smarter custom properties with Houdini's new API


### CSS Typed OM
Converting CSSOM value strings into meaningfully typed JavaScript representations and back can incur a significant performance overhead. The CSS Typed OM exposes CSS values as typed JavaScript objects to allow their performant manipulation.
  * CSS Typed OM reference
  * CSS Typed OM guide
  * Working with the new CSS Typed Object Model


### CSS Painting API
Developed to improve the extensibility of CSS, the Painting API allows developers to write JavaScript functions that can draw directly into an element's background, border, or content via the `paint()` CSS function.
  * CSS Painting API reference
  * CSS Painting API guide
  * CSS Paint API
  * The CSS Paint API
  * Simulating Drop Shadows with the CSS Paint API
  * CSS Paint API Being predictably random


### Worklets
An API for running scripts in various stages of the rendering pipeline independent of the main JavaScript execution environment. Worklets are conceptually similar to Web Workers, and are called by and extend the rendering engine.
  * Worklets reference


### CSS Layout API
Designed to improve the extensibility of CSS, this API enables developers to write their own layout algorithms, like masonry or line snapping.
This API has some partial support in Chrome Canary. It is not yet documented on MDN.
### CSS Parser API
An API exposing the CSS parser more directly, for parsing arbitrary CSS-like languages into a mildly typed representation.
This API is currently a proposal, and has no browser implementations or documentation on MDN.
  * Proposal


### Font Metrics API
An API exposing font metrics, giving access to typographic layout results.
This API is currently a proposal, and has no browser implementations or documentation on MDN.
  * Proposal


  * A Practical Overview of CSS Houdini
  * Smarter custom properties with Houdini's new API


# ReadableByteStreamController
Note: This feature is available in Web Workers.
The `ReadableByteStreamController` interface of the Streams API represents a controller for a readable byte stream. It allows control of the state and internal queue of a `ReadableStream` with an underlying byte source, and enables efficient zero-copy transfer of data from the underlying source to a consumer when the stream's internal queue is empty.
An instance of this controller type is created if an `underlyingSource` object with the property `type="bytes"` is passed as an argument to the `ReadableStream()` constructor. The `underlyingSource` object may also define `start()` and `pull()` callback functions. These are called with the controller as a parameter, in order to set up the underlying source, and request data when needed.
The underlying source uses the controller to supply data to the stream via its `byobRequest` property or `enqueue()` method. `byobRequest` is a `ReadableStreamBYOBRequest` object that represents a pending request from a consumer to make a zero-copy transfer of data direct to a consumer. `byobRequest` must be used to copy data if it exists (do not use `enqueue()` in this case)! If the underlying source needs to pass data to the stream and `byobRequest` is `null` then the source can call `enqueue()` to add the data to the stream's internal queues.
Note that the `byobRequest` is only created in "BYOB mode" when there is a request from a reader and the stream's internal queue is empty. "BYOB mode" is enabled when using a `ReadableStreamBYOBReader` (typically constructed by calling `ReadableStream.getReader()` with the argument `{ mode: 'byob' }`). It is also enabled when using a default reader and `autoAllocateChunkSize` is specified in the `ReadableStream()` constructor.
An underlying byte source can also use the controller to `close()` the stream when all the data has been sent and report errors from the underlying source using `error()`. The controller's `desiredSize` property is used to apply "backpressure", informing the underlying source of the size of the internal queue (small values indicate that the queue is filling up, hinting to the underlying source that it is be desirable to pause or throttle the inflow).
Note that even though the controller is primarily used by the underlying byte source, there is no reason it cannot be stored used by other parts of the system to signal the stream.
## Constructor
None. `ReadableByteStreamController` instances are automatically created if an `underlyingSource` with the property `type="bytes"` is passed to the `ReadableStream()` constructor.
## Instance properties
`ReadableByteStreamController.byobRequest` Read only
    
Returns the current BYOB pull request, or `null` if there no outstanding request.
`ReadableByteStreamController.desiredSize` Read only
    
Returns the desired size required to fill the stream's internal queue.
## Instance methods
`ReadableByteStreamController.close()`
    
Closes the associated stream.
`ReadableByteStreamController.enqueue()`
    
Enqueues a given chunk in the associated stream.
`ReadableByteStreamController.error()`
    
Causes any future interactions with the associated stream to error.
## Examples
The controller is used by an underlying source to transfer or enqueue data, to signal that the stream has no more data (has closed) or has errored. It is also used to signal the underlying source from "upstream" of the desired data rate, using `desiredSize`.
The example in Using readable byte streams, in particular Creating a readable socket push byte stream, show most of these cases.
  * Streams API concepts
  * Using readable byte streams
  * `ReadableStream`
  * Web-streams-polyfill


# WaveShaperNode
The `WaveShaperNode` interface represents a non-linear distorter.
It is an `AudioNode` that uses a curve to apply a wave shaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.
A `WaveShaperNode` always has exactly one input and one output.
EventTarget  AudioNode  WaveShaperNode 
Number of inputs `1`  
Number of outputs `1`  
Channel count mode `"max"`  
Channel count `2` (not used in the default count mode)  
Channel interpretation `"speakers"`  
## Constructor
`WaveShaperNode()`
    
Creates a new instance of an `WaveShaperNode` object.
## Instance properties
Inherits properties from its parent, `AudioNode`.
`WaveShaperNode.curve`
    
A `Float32Array` of numbers describing the distortion to apply.
`WaveShaperNode.oversample`
    
An enumerated value indicating if oversampling must be used. Oversampling is a technique for creating more samples (up-sampling) before applying the distortion effect to the audio signal.
## Instance methods
No specific method; inherits methods from its parent, `AudioNode`.
## Example
See `BaseAudioContext.createWaveShaper()` for example code.
  * Using the Web Audio API


# OES_texture_half_float extension
The `OES_texture_half_float` extension is part of the WebGL API and adds texture formats with 16- (aka half float) and 32-bit floating-point components.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default. The constant in WebGL2 is `gl.HALF_FLOAT`.
## Constants
`ext.HALF_FLOAT_OES`
    
Half floating-point type (16-bit).
## Extended methods
This extension extends `WebGLRenderingContext.texImage2D()` and `WebGLRenderingContext.texSubImage2D()`:
  * The `type` parameter now accepts `ext.HALF_FLOAT_OES`.


## Limitation: Linear filtering
Linear filtering on half floating-point textures is not allowed with this extension. If you set the magnification or minification filter in the `WebGLRenderingContext.texParameter()` method to one of `gl.LINEAR`, `gl.LINEAR_MIPMAP_NEAREST`, `gl.NEAREST_MIPMAP_LINEAR`, or `gl.LINEAR_MIPMAP_LINEAR`, and use half floating-point textures, the texture will be marked as incomplete.
To use linear filtering on half floating-point textures, enable the `OES_texture_half_float_linear` extension in addition to this extension.
## Half floating-point color buffers
This extension implicitly enables the `EXT_color_buffer_half_float` extension (if supported), which allows rendering to 16-bit floating point formats.
## Examples
    
    const ext = gl.getExtension("OES_texture_half_float");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, ext.HALF_FLOAT_OES, image);
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.texImage2D()`
  * `WebGLRenderingContext.texSubImage2D()`
  * `OES_texture_float`
  * `OES_texture_float_linear`
  * `OES_texture_half_float_linear`


# CloseEvent
Note: This feature is available in Web Workers.
A `CloseEvent` is sent to clients using WebSockets when the connection is closed. This is delivered to the listener indicated by the `WebSocket` object's `onclose` attribute.
Event  CloseEvent 
## Constructor
`CloseEvent()`
    
Creates a new `CloseEvent`.
## Instance properties
This interface also inherits properties from its parent, `Event`.
`CloseEvent.code` Read only
    
Returns an `unsigned short` containing the close code.
`CloseEvent.reason` Read only
    
Returns a string indicating the reason the server closed the connection. This is specific to the particular server and sub-protocol.
`CloseEvent.wasClean` Read only
    
Returns a boolean value that Indicates whether or not the connection was cleanly closed.
## Instance methods
This interface also inherits methods from its parent, `Event`.
  * `WebSocket`


# EncodedVideoChunk
Note: This feature is available in Dedicated Web Workers.
The `EncodedVideoChunk` interface of the WebCodecs API represents a chunk of encoded video data.
## Constructor
`EncodedVideoChunk()`
    
Creates a new `EncodedVideoChunk` object.
## Instance properties
`EncodedVideoChunk.type` Read only
    
Returns a string indicating whether this chunk of data is a key chunk.
`EncodedVideoChunk.timestamp` Read only
    
Returns an integer representing the timestamp of the video in microseconds.
`EncodedVideoChunk.duration` Read only
    
Returns an integer representing the duration of the video in microseconds.
`EncodedVideoChunk.byteLength` Read only
    
Returns an integer representing the length of the video in bytes.
## Instance methods
`EncodedVideoChunk.copyTo()`
    
Copies the encoded video data.
# ImageData
Note: This feature is available in Web Workers.
The `ImageData` interface represents the underlying pixel data of an area of a `<canvas>` element.
It is created using the `ImageData()` constructor or creator methods on the `CanvasRenderingContext2D` object associated with a canvas: `createImageData()` and `getImageData()`. It can also be used to set a part of the canvas by using `putImageData()`.
## Constructors
`ImageData()`
    
Creates an `ImageData` object from a given `Uint8ClampedArray` or `Float16Array` and the size of the image it contains. If no array is given, it creates an image of a transparent black rectangle. Note that this is the most common way to create such an object in workers as `createImageData()` is not available there.
## Instance properties
`ImageData.data` Read only
    
A `Uint8ClampedArray` or `Float16Array` representing a one-dimensional array containing the data in the RGBA order. The order goes by rows from the top-left pixel to the bottom-right.
`ImageData.colorSpace` Read only
    
A string indicating the color space of the image data.
`ImageData.height` Read only
    
An `unsigned long` representing the actual height, in pixels, of the `ImageData`.
`ImageData.width` Read only
    
An `unsigned long` representing the actual width, in pixels, of the `ImageData`.
`ImageData.pixelFormat` Read only Experimental
    
A string indicating the format to use for the `ImageData`.
  * `CanvasRenderingContext2D`
  * The `<canvas>` element and its associated interface, `HTMLCanvasElement`.


# FontData
The `FontData` interface of the Local Font Access API represents a single local font face.
## Instance properties
`FontData.family` Read only Experimental
    
Returns the family of the font face.
`FontData.fullName` Read only Experimental
    
Returns the full name of the font face.
`FontData.postscriptName` Read only Experimental
    
Returns the PostScript name of the font face.
`FontData.style` Read only Experimental
    
Returns the style of the font face.
## Instance methods
`FontData.blob()` Experimental
    
Returns a `Promise` that fulfills with a `Blob` containing the raw bytes of the underlying font file.
## Examples
For a live example, see our Local Font Access API demo.
### Font enumeration
The following snippet will query for all available fonts, and log metadata. This could be used, for example, to populate a font-picker control.
    
    async function logFontData() {
      try {
        const availableFonts = await window.queryLocalFonts();
        for (const fontData of availableFonts) {
          console.log(fontData.postscriptName);
          console.log(fontData.fullName);
          console.log(fontData.family);
          console.log(fontData.style);
        }
      } catch (err) {
        console.error(err.name, err.message);
      }
    }
    
### Accessing low-level data
The `blob()` method provides access to low-level SFNT data — this is a font file format that can contain other font formats, such as PostScript, TrueType, OpenType, or Web Open Font Format (WOFF).
    
    async function computeOutlineFormat() {
      try {
        const availableFonts = await window.queryLocalFonts({
          postscriptNames: ["ComicSansMS"],
        });
        for (const fontData of availableFonts) {
          // `blob()` returns a Blob containing valid and complete
          // SFNT-wrapped font data.
          const sfnt = await fontData.blob();
          // Slice out only the bytes we need: the first 4 bytes are the SFNT
          // version info.
          // Spec: https://learn.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
          const sfntVersion = await sfnt.slice(0, 4).text();
    
          let outlineFormat = "UNKNOWN";
          switch (sfntVersion) {
            case "\x00\x01\x00\x00":
            case "true":
            case "typ1":
              outlineFormat = "truetype";
              break;
            case "OTTO":
              outlineFormat = "cff";
              break;
          }
          console.log("Outline format:", outlineFormat);
        }
      } catch (err) {
        console.error(err.name, err.message);
      }
    }
    
  * Use advanced typography with local fonts
  * `@font-face`


# RTCIceCandidatePairStats
The `RTCIceCandidatePairStats` dictionary of the WebRTC API is used to report statistics that provide insight into the quality and performance of an `RTCPeerConnection` while connected and configured as described by the specified pair of ICE candidates.
The statistics can be obtained by iterating the `RTCStatsReport` returned by `RTCPeerConnection.getStats()` until you find an entry with the `type` of `"candidate-pair"`.
## Instance properties
`availableIncomingBitrate` Optional
    
A number representing the available inbound capacity of the network. This reports the total number of bits per second available for all of the candidate pair's incoming RTP streams. It does not take into account the size of the Internet Protocol (IP) overhead, nor any other transport layers such as TCP or UDP.
`availableOutgoingBitrate` Optional
    
A number representing the approximate available outbound capacity of the network. This reports the total number of bits per second available for all of the candidate pair's outgoing RTP streams. It does not take into account the size of the IP overhead, nor any other transport layers such as TCP or UDP.
`bytesDiscardedOnSend` Optional Experimental
    
An integer representing the total number of bytes discarded due to socket errors on this candidate pair.
`bytesReceived` Optional
    
An integer representing the total number of payload bytes received on this candidate pair.
`bytesSent` Optional
    
An integer representing the total number of payload bytes sent on this candidate pair (the total number of bytes sent excluding any headers, padding, or other protocol overhead).
`consentRequestsSent` Optional Experimental
    
An integer representing the total number of STUN consent requests sent on this candidate pair.
`currentRoundTripTime` Optional
    
A number representing the total time, in seconds, that elapsed between the most recently-sent STUN request and the response being received. This may be based upon requests that were involved in confirming permission to open the connection.
`lastPacketReceivedTimestamp` Optional
    
A `DOMHighResTimeStamp` value indicating the time at which the last packet was received by the local peer from the remote peer for this candidate pair. Timestamps are not recorded for STUN packets.
`lastPacketSentTimestamp` Optional
    
A `DOMHighResTimeStamp` value indicating the time at which the last packet was sent from the local peer to the remote peer for this candidate pair. Timestamps are not recorded for STUN packets.
`localCandidateId` Optional
    
A string representing the unique ID corresponding to the `RTCIceCandidate` from the data included in the `RTCIceCandidateStats` object providing statistics for the candidate pair's local candidate.
`nominated` Optional
    
A Boolean value which, if `true`, indicates that the candidate pair described by this object is one which has been proposed for use, and will be (or was) used if its priority is the highest among the nominated candidate pairs. See RFC 5245, section 7.1.3.2.4 for details.
`packetsDiscardedOnSend` Optional Experimental
    
An integer representing the total number of packets discarded due to socket errors on this candidate pair.
`packetsReceived` Optional Experimental
    
An integer representing the total number of packets received on this candidate pair.
`packetsSent` Optional Experimental
    
An integer representing the total number of packets sent on this candidate pair.
`remoteCandidateId` Optional
    
A string containing a unique ID corresponding to the remote candidate from which data was taken to construct the `RTCIceCandidateStats` object describing the remote end of the connection.
`requestsReceived` Optional
    
An integer representing the total number of connectivity check requests that have been received, including retransmissions. This value includes both connectivity checks and STUN consent checks.
`requestsSent` Optional
    
An integer representing the total number of connectivity check requests that have been sent, not including retransmissions.
`responsesReceived` Optional
    
An integer representing the total number of connectivity check responses that have been received.
`responsesSent` Optional
    
An integer representing the total number of connectivity check responses that have been sent. This includes both connectivity check requests and STUN consent requests.
`state` Optional
    
A string which indicates the state of the connection between the two candidates.
`totalRoundTripTime` Optional
    
A number indicating the total time, in seconds, that has elapsed between sending STUN requests and receiving responses to them, for all such requests made to date on this candidate pair. This includes both connectivity check and consent check requests. You can compute the average round trip time (RTT) by dividing this value by `responsesReceived`.
`transportId` Optional
    
A string that uniquely identifies the `RTCIceTransport` that was inspected to obtain the transport-related statistics (as found in `RTCTransportStats`) used in generating this object.
### Common instance properties
The following properties are common to all WebRTC statistics objects.
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"candidate-pair"`, indicating the type of statistics that the object contains.
### Deprecated properties
The following properties have been removed from the specification and should no longer be used. You should update any existing code to avoid using them as soon as is practical. Check the compatibility table for details on which browsers support them and in which versions.
`priority` Deprecated Optional Non-standard
    
An integer value indicating the candidate pair's priority.
`readable` Deprecated Optional Non-standard
    
A Boolean value indicating whether or not data can be sent over the connection described by the candidate pair.
`writable` Deprecated Optional Non-standard
    
A Boolean value indicating whether or not data can be received on the connection described by the candidate pair.
### Non-standard properties
`selected` Non-standard Optional
    
A Firefox-specific Boolean value which is `true` if the candidate pair described by this object is the one currently in use. The spec-compliant way to determine the selected candidate pair is to look for a stats object of type `transport`, which is an `RTCTransportStats` object. That object's `selectedCandidatePairId` property indicates whether or not the specified transport is the one being used.
## Usage notes
The currently-active ICE candidate pair—if any—can be obtained by calling the `RTCIceTransport` method `getSelectedCandidatePair()`, which returns an `RTCIceCandidatePair` object, or `null` if there isn't a pair selected. The active candidate pair describes the current configuration of the two ends of the `RTCPeerConnection`.
Any candidate pair that isn't the active pair of candidates for a transport gets deleted if the `RTCIceTransport` performs an ICE restart, at which point the `state` of the ICE transport returns to `new` and negotiation starts once again. For more information, see ICE restart.
## Example
This example computes the average time elapsed between connectivity checks.
    
    if (rtcStats && rtcStats.type === "candidate-pair") {
      let elapsed =
        (rtcStats.lastRequestTimestamp - rtcStats.firstRequestTimestamp) /
        rtcStats.requestsSent;
    
      console.log(`Average time between ICE connectivity checks: ${elapsed} ms.`);
    }
    
The code begins by looking at `rtcStats` to see if its `type` is `candidate-pair`. If it is, then we know that `rtcStats` is in fact an `RTCIceCandidatePairStats` object. We can then compute the average time elapsed between STUN connectivity checks and log that information.
# Media Capture and Streams API (Media Stream)
The Media Capture and Streams API, often called the Media Streams API or MediaStream API, is an API related to WebRTC which provides support for streaming audio and video data.
It provides the interfaces and methods for working with the streams and their constituent tracks, the constraints associated with data formats, the success and error callbacks when using the data asynchronously, and the events that are fired during the process.
## Concepts and usage
The API is based on the manipulation of a `MediaStream` object representing a flux of audio- or video-related data. See an example in Get the media stream.
A `MediaStream` consists of zero or more `MediaStreamTrack` objects, representing various audio or video tracks. Each `MediaStreamTrack` may have one or more channels. The channel represents the smallest unit of a media stream, such as an audio signal associated with a given speaker, like left or right in a stereo audio track.
`MediaStream` objects have a single input and a single output. A `MediaStream` object generated by `getUserMedia()` is called local, and has as its source input one of the user's cameras or microphones. A non-local `MediaStream` may be representing a media element, like `<video>` or `<audio>`, a stream originating over the network, and obtained via the WebRTC `RTCPeerConnection` API, or a stream created using the Web Audio API `MediaStreamAudioDestinationNode`.
The output of the `MediaStream` object is linked to a consumer. It can be a media element, like `<audio>` or `<video>`, the WebRTC `RTCPeerConnection` API or a Web Audio API `MediaStreamAudioSourceNode`.
## Interfaces
In these reference articles, you'll find the fundamental information you'll need to know about each of the interfaces that make up the Media Capture and Streams API.
  * `CanvasCaptureMediaStreamTrack`
  * `InputDeviceInfo`
  * `MediaDeviceInfo`
  * `MediaDevices`
  * `MediaStream`
  * `MediaStreamTrack`
  * `MediaStreamTrackEvent`
  * `MediaTrackConstraints`
  * `MediaTrackSettings`
  * `MediaTrackSupportedConstraints`
  * `OverconstrainedError`


## Events
  * `addtrack`
  * `ended`
  * `mute`
  * `removetrack`
  * `unmute`


## Guides and tutorials
The Capabilities, constraints, and settings article discusses the concepts of constraints and capabilities, as well as media settings, and includes a Constraint Exerciser that lets you experiment with the results of different constraint sets being applied to the audio and video tracks coming from the computer's A/V input devices (such as its webcam and microphone).
The Taking still photos with getUserMedia() article shows how to use `getUserMedia()` to access the camera on a computer or mobile phone with `getUserMedia()` support and take a photo with it.
>
### api.MediaStream
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`MediaStream` 5521 1279 44 4215 11 5525 42 4214 11 6.01.5 554.4 11  
`Media_Capture_and_Streams_API` 5521 1279 15 4215 11 5525 15 4214 11 6.01.5 554.4 11  
`active` 42 12 52 29 11 42 52 29 11 4.0 42 11  
`active_event` 42 12 No 29 No 42 No 29 No 4.0 42 No  
`addTrack` 26 12 44 15 11 26 44 14 11 1.5 37 11  
`addtrack_event` 26 12 50 15 11 26 50 14 11 1.5 4.4 11  
`clone` 35 12 48 22 11 35 48 22 11 3.0 37 11  
`getAudioTracks` 26 12 22Before Firefox 64, this method returned an array of `AudioStreamTrack` objects. However, `MediaStreamTrack` has now subsumed that interface's functionality. 15 11 26 22Before Firefox for Android 64, this method returned an array of `AudioStreamTrack` objects. However, `MediaStreamTrack` has now subsumed that interface's functionality. 14 11 1.5 37 11  
`getTrackById` 26 12 49 15 11 26 49 14 11 1.5 37 11  
`getTracks` 38 12 34 25 11 38 34 25 11 3.0 38 11  
`getVideoTracks` 26 12 22Before Firefox 64, this method returned an array of `VideoStreamTrack` objects. However, `MediaStreamTrack` has now subsumed that interface's functionality. 15 11 26 22Before Firefox for Android 64, this method returned an array of `VideoStreamTrack` objects. However, `MediaStreamTrack` has now subsumed that interface's functionality. 14 11 1.5 37 11  
`id` 26 12 41 15 11 26 41 14 11 1.5 4.4 11  
`inactive_event` 42 12 No 29 No 42 No 29 No 4.0 42 No  
`removeTrack` 26 12 44 15 11 26 44 14 11 1.5 37 11  
`removetrack_event` 26 12 7259–72Before Firefox 72, the event handler was exposed but had no effect. 15 11 26 7959–79Before Firefox for Android 79, the event handler was exposed but had no effect. 14 11 1.5 4.4 11  
### api.MediaStreamTrack
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Media_Capture_and_Streams_API` 26 12 22 15 11 26 22 14 11 1.5 4.4 11  
`applyConstraints` 59 12 43 46 11 59 43 43 11 7.0 59 11  
`capturehandlechange_event` 102 102 No 88 No No No No No No No No  
`clone` 35 12 48 22 11 35 48 22 11 3.0 37 11  
`contentHint` 70 79 No 57 12.1 70 No 49 12.2 10.0 70 12.2  
`enabled` 26 12 24 15 11 26 24 14 11 1.5 4.4 11  
`ended_event` 26 12 50 15 11 26 50 14 11 1.5 4.4 11  
`getCapabilities` 59 12 132 46 11 59 132 43 11 7.0 59 11  
`getCaptureHandle` 102 102 No 88 No No No No No No No No  
`getConstraints` 53 12 50 40 11 52 50 41 11 6.0 53 11  
`getSettings` 59 12 50 46 11 59 50 43 11 7.0 59 11  
`id` 26 12 22 15 11 26 22 14 11 1.5 4.4 11  
`kind` 26 12 22 15 11 26 22 14 11 1.5 4.4 11  
`label` 26 12 22 15 11 26 22 14 11 1.5 4.4 11  
`mute_event` 26 12 59 15 11 26 59 14 11 1.5 4.4 11  
`muted` 38 12 59Does not currently track the microphone's muted state from the operating system, see bug 1739163. 25 11 38 59Does not currently track the microphone's muted state from the operating system, see bug 1739163. 25 11 3.0 38 11  
`readyState` 26 12 50 15 11 26 50 14 11 1.5 4.4 11  
`stop` 32 12 34 19 11 32 34 19 11 2.0 4.4.3 11  
`unmute_event` 26 12 59 15 11 26 59 14 11 1.5 4.4 11  
### api.MediaDevices
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Media_Capture_and_Streams_API` 47 12 33 30 11 47 36 30 11 5.0 47 11  
`devicechange_event` 57 12 52 34 11 No 52 No 11 No No 11  
`enumerateDevices` 47 12 116`enumerateDevices()` enumerates both input and output devices. Previously only input devices were returned.39–116`enumerateDevices()` only returns input devices. 34 11 47 116`enumerateDevices()` enumerates both input and output devices. Previously only input devices were returned.39–116`enumerateDevices()` only returns input devices. 34 11 5.0 47 11  
`getDisplayMedia` 72 7917–79Available as a member of `Navigator` instead of `MediaDevices`. 6633–66Since Firefox 33 you can capture screen data using `getUserMedia()`, with a `video` constraint called `mediaSource`. Before 52 it relied on a client-configurable list of allowed sites. 60 13 NoFrom Chrome Android 72 to 88, this method was exposed, but always failed with `NotAllowedError`. See bug 40418135. NoFrom Firefox Android 66 to 79, this method was exposed, but always failed with `NotAllowedError`. NoFrom Opera Android 51 to 88, this method was exposed, but always failed with `NotAllowedError`. See bug 40418135. No NoFrom Samsung Internet 11.0 to 88, this method was exposed, but always failed with `NotAllowedError`. See bug 40418135. NoFrom WebView Android 72 to 88, this method was exposed, but always failed with `NotAllowedError`. See bug 40418135. No  
`getSupportedConstraints` 53 12 44 40 11 52 50 41 11 6.0 53 11  
`getUserMedia` 53If you need this capability before version 53, refer to `navigator.webkitGetUserMedia`, a prefixed form of the deprecated `navigator.getUserMedia` API. 12 36["If you need this capability before version 36, refer to `navigator.mozGetUserMedia`, a prefixed form of the deprecated `navigator.getUserMedia` API.", "Before Firefox 55, `getUserMedia()` incorrectly returns `NotSupportedError` when the list of constraints specified is empty, or has all constraints set to `false`. Starting in Firefox 55, this situation now correctly calls the failure handler with a `TypeError`.", "When using the Firefox-specific `video` constraint called `mediaSource` to request display capture, Firefox 66 and later consider values of `screen` and `window` to both cause a list of screens and windows to be shown.", "Starting in Firefox 66, `getUserMedia()` can no longer be used in sandboxed `<iframe>`s or `data` URLs entered in the address bar by the user."] 40If you need this capability before version 40, refer to `navigator.webkitGetUserMedia`, a prefixed form of the deprecated `navigator.getUserMedia` API. 11 53If you need this capability before version 53, refer to `navigator.webkitGetUserMedia`, a prefixed form of the deprecated `navigator.getUserMedia` API. 36["If you need this capability before version 36, refer to `navigator.mozGetUserMedia`, a prefixed form of the deprecated `navigator.getUserMedia` API.", "Before Firefox for Android 55, `getUserMedia()` incorrectly returns `NotSupportedError` when the list of constraints specified is empty, or has all constraints set to `false`. Starting in Firefox for Android 55, this situation now correctly calls the failure handler with a `TypeError`.", "When using the Firefox for Android-specific `video` constraint called `mediaSource` to request display capture, Firefox for Android 66 and later consider values of `screen` and `window` to both cause a list of screens and windows to be shown.", "Starting in Firefox for Android 66, `getUserMedia()` can no longer be used in sandboxed `<iframe>`s or `data` URLs entered in the address bar by the user."] 41If you need this capability before version 41, refer to `navigator.webkitGetUserMedia`, a prefixed form of the deprecated `navigator.getUserMedia` API. 11 6.0 53 11  
`selectAudioOutput` No No 116 No No No No No No No No No  
`setCaptureHandleConfig` 102 102 No 88 No No No No No No No No  
### api.MediaDeviceInfo
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Media_Capture_and_Streams_API` 47 12 39 34 11 47 39 34 11 5.0 47 11  
`deviceId` 47 12 39 34 11 47 39 34 11 5.0 47 11  
`groupId` 47 12 39Before Firefox 67, related devices are not actually grouped together by `groupId`. 34 11 47 39Before Firefox for Android 67, related devices are not actually grouped together by `groupId`. 34 11 5.0 47 11  
`kind` 47 12 39 34 11 47 39 34 11 5.0 47 11  
`label` 47 12 39 34 11 47 39 34 11 5.0 47 11  
`toJSON` 47 18 42 34 11 47 42 34 11 5.0 47 11  
### api.InputDeviceInfo
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Media_Capture_and_Streams_API` 47 79 No 34 11 47 No 34 11 5.0 47 11  
`getCapabilities` 67 79 No 54 17 67 No 48 17 9.0 67 17  
### api.CanvasCaptureMediaStreamTrack
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Media_Capture_and_Streams_API` 51 79 No 38 11 51 No 41 11 5.0 51 11  
`canvas` 51 79 No 38 11 51 No 41 11 5.0 51 11  
`requestFrame` 51 79 No 38 11 51 No 41 11 5.0 51 11  
  * WebRTC \- the introductory page to the API
  * Taking still photos with WebRTC: a demonstration and tutorial about using `getUserMedia()`.


# Translator
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Translator` interface of the Translator and Language Detector APIs contains all the associated translation functionality, including checking AI model availability, creating a new `Translator` instance, using it to create a translation, and more.
## Instance properties
`inputQuota` Read only Experimental
    
The input quota available to the browser for generating translations.
`sourceLanguage` Read only Experimental
    
The expected language of the input text to be translated.
`targetLanguage` Read only Experimental
    
The language that the input text will be translated into.
## Static methods
`availability()` Experimental
    
Returns an enumerated value that indicates the availability of the AI model for the given `Translator` configuration.
`create()` Experimental
    
Creates a new `Translator` instance from which to generate translations.
## Instance methods
`destroy()` Experimental
    
Destroys the `Translator` instance it is called on.
`measureInputUsage()` Experimental
    
Reports how much input quota would be used by a translation operation for a given text input.
`translate()` Experimental
    
Returns a string containing a translation of the input string.
`translateStreaming()` Experimental
    
Generates a translation of the input string as a `ReadableStream`.
## Examples
See Using the Translator and Language Detector APIs for a complete example.
### Creating a `Translator` instance
    
    const translator = await Translator.create({
      sourceLanguage: "en",
      targetLanguage: "ja",
    });
    
### Generating a translation
    
    const translation = await translator.translate(myTextString);
    console.log(translation);
    
### Generating a translation stream
    
    const stream = translator.translateStreaming(myTextString);
    let translation = "";
    
    for await (const chunk of stream) {
      translation += chunk;
    }
    
    console.log("Stream complete");
    console.log(translation);
    
  * Using the Translator and Language Detector APIs


# GravitySensor
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `GravitySensor` interface of the Sensor APIs provides on each reading the gravity applied to the device along all three axes.
To use this sensor, the user must grant permission to the `'accelerometer'` device sensor through the Permissions API. In addition, this feature may be blocked by a Permissions Policy set on your server.
EventTarget  Sensor  Accelerometer  GravitySensor 
## Constructor
`GravitySensor()`
    
Creates a new `GravitySensor` object.
## Instance properties
Inherits properties from its ancestors, `Accelerometer`, `Sensor`, and `EventTarget`.
## Instance methods
`GravitySensor` doesn't have own methods. However, it inherits methods from its parent interfaces, `Sensor` and `EventTarget`.
## Events
`GravitySensor` doesn't have own events. However, it inherits events from its parent interface, `Sensor`.
## Example
Gravity is typically read in the `reading` event callback. In the example below this occurs sixty times a second.
    
    let gravitySensor = new GravitySensor({ frequency: 60 });
    
    gravitySensor.addEventListener("reading", (e) => {
      console.log(`Gravity along the X-axis ${gravitySensor.x}`);
      console.log(`Gravity along the Y-axis ${gravitySensor.y}`);
      console.log(`Gravity along the Z-axis ${gravitySensor.z}`);
    });
    
    gravitySensor.start();
    
# WebGLShaderPrecisionFormat
Note: This feature is available in Web Workers.
The WebGLShaderPrecisionFormat interface is part of the WebGL API and represents the information returned by calling the `WebGLRenderingContext.getShaderPrecisionFormat()` method.
## Instance properties
`WebGLShaderPrecisionFormat.rangeMin` Read only
    
The base 2 log of the absolute value of the minimum value that can be represented.
`WebGLShaderPrecisionFormat.rangeMax` Read only
    
The base 2 log of the absolute value of the maximum value that can be represented.
`WebGLShaderPrecisionFormat.precision` Read only
    
The number of bits of precision that can be represented. For integer formats this value is always 0.
## Examples
A `WebGLShaderPrecisionFormat` object is returned by the `WebGLRenderingContext.getShaderPrecisionFormat()` method.
    
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext("webgl");
    gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.MEDIUM_FLOAT);
    // WebGLShaderPrecisionFormat { rangeMin: 127, rangeMax: 127, precision: 23 }
    
  * `WebGLRenderingContext.getShaderPrecisionFormat()`


# VideoTrackList
The `VideoTrackList` interface is used to represent a list of the video tracks contained within a `<video>` element, with each track represented by a separate `VideoTrack` object in the list.
Retrieve an instance of this object with `HTMLMediaElement.videoTracks`. The individual tracks can be accessed using array syntax or functions such as `forEach()` for example.
EventTarget  VideoTrackList 
## Instance properties
This interface also inherits properties from its parent interface, `EventTarget`.
`length` Read only
    
The number of tracks in the list.
`selectedIndex` Read only
    
The index of the currently selected track, if any, or `−1` otherwise.
## Instance methods
This interface also inherits methods from its parent interface, `EventTarget`.
`getTrackById()`
    
Returns the `VideoTrack` found within the `VideoTrackList` whose `id` matches the specified string. If no match is found, `null` is returned.
## Events
`addtrack`
    
Fired when a new video track has been added to the media element. Also available via the `onaddtrack` property.
`change`
    
Fired when a video track has been made active or inactive. Also available via the `onchange` property.
`removetrack`
    
Fired when a new video track has been removed from the media element. Also available via the `onremovetrack` property.
## Usage notes
In addition to being able to obtain direct access to the video tracks present on a media element, `VideoTrackList` lets you set event handlers on the `addtrack` and `removetrack` events, so that you can detect when tracks are added to or removed from the media element's stream.
## Examples
>
### Getting a media element's video track list
To get a media element's `VideoTrackList`, use its `videoTracks` property.
    
    const videoTracks = document.querySelector("video").videoTracks;
    
### Monitoring track count changes
In this example, we have an app that displays information about the number of channels available. To keep it up to date, handlers for the `addtrack` and `removetrack` events are set up.
    
    videoTracks.onaddtrack = updateTrackCount;
    videoTracks.onremovetrack = updateTrackCount;
    
    function updateTrackCount(event) {
      trackCount = videoTracks.length;
      drawTrackCountIndicator(trackCount);
    }
    
# ScreenOrientation
The `ScreenOrientation` interface of the Screen Orientation API provides information about the current orientation of the document.
A `ScreenOrientation` instance object can be retrieved using the `screen.orientation` property.
EventTarget  ScreenOrientation 
## Instance properties
`ScreenOrientation.type` Read only
    
Returns the document's current orientation type, one of `portrait-primary`, `portrait-secondary`, `landscape-primary`, or `landscape-secondary`.
`ScreenOrientation.angle` Read only
    
Returns the document's current orientation angle.
## Instance methods
`ScreenOrientation.lock()`
    
Locks the orientation of the containing document to its default orientation and returns a `Promise`.
`ScreenOrientation.unlock()`
    
Unlocks the orientation of the containing document from its default orientation.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`change`
    
Fired whenever the screen changes orientation.
## Example
In the following example, we listen for an orientation `change` event and log the new screen orientation type and angle.
    
    screen.orientation.addEventListener("change", (event) => {
      const type = event.target.type;
      const angle = event.target.angle;
      console.log(`ScreenOrientation change: ${type}, ${angle} degrees.`);
    });
    
# SVGAElement
The `SVGAElement` interface provides access to the properties of an `<a>` element, as well as methods to manipulate them.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGAElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGraphicsElement`.
`SVGAElement.download`
    
See `HTMLAnchorElement.download`.
`SVGAElement.hash`
    
A string representing the fragment identifier, including the leading hash mark (`#`), if any, in the referenced URL.
`SVGAElement.host`
    
A string representing the hostname and port (if it's not the default port) in the referenced URL.
`SVGAElement.hostname`
    
A string representing the hostname in the referenced URL.
`SVGAElement.href` Read only
    
An `SVGAnimatedString` that reflects the `href` or `xlink:href` Deprecated attribute.
`SVGAElement.hreflang`
    
A string that reflects the `hreflang` attribute, indicating the language of the linked resource.
`SVGAElement.origin` Read only
    
Returns a string containing the origin of the URL, that is its scheme, its domain and its port.
`SVGAElement.pathname`
    
A string containing an initial `/` followed by the path of the URL, not including the query string or fragment.
`SVGAElement.password`
    
A string containing the password specified before the domain name.
`SVGAElement.ping`
    
A string that reflects the `ping` attribute, containing a space-separated list of URLs to which, when the hyperlink is followed, `POST` requests with the body `PING` will be sent by the browser (in the background). Typically used for tracking.
`SVGAElement.port`
    
A string representing the port component, if any, of the referenced URL.
`SVGAElement.protocol`
    
A string representing the protocol component, including trailing colon (`:`), of the referenced URL.
`SVGAElement.referrerPolicy`
    
See `HTMLAnchorElement.referrerPolicy`.
`SVGAElement.rel`
    
A string reflecting the `rel` SVG attribute, specifying the relationship of the link's target.
`SVGAElement.relList`
    
A `DOMTokenList` reflecting the `rel` SVG attribute, as a list of tokens.
`SVGAElement.search`
    
A string representing the search element, including leading question mark (`?`), if any, of the referenced URL.
`SVGAElement.target` Read only
    
It corresponds to the `target` attribute of the given element.
`SVGAElement.text` Deprecated
    
A string that is a synonym for the `Node.textContent` property.
`SVGAElement.type`
    
A string that reflects the `type` attribute, indicating the MIME type of the linked resource.
`SVGAElement.username`
    
A string containing the username specified before the domain name.
## Instance methods
This interface has no methods but inherits methods from its parent, `SVGGraphicsElement`.
## Example
In the example below, the `target` attribute of the `<a>` element is set to `_blank` and when the link is clicked, it logs to notify whether the condition is met or not.
    
    const linkRef = document.querySelector("a");
    linkRef.target = "_self";
    
    linkRef.onclick = () => {
      if (linkRef.target === "_blank") {
        console.log("BLANK!");
        linkRef.target = "_self";
      } else {
        console.log("SORRY! not _blank");
      }
    };
    
  * SVG `<a>` element


# BaseAudioContext
The `BaseAudioContext` interface of the Web Audio API acts as a base definition for online and offline audio-processing graphs, as represented by `AudioContext` and `OfflineAudioContext` respectively. You wouldn't use `BaseAudioContext` directly — you'd use its features via one of these two inheriting interfaces.
A `BaseAudioContext` can be a target of events, therefore it implements the `EventTarget` interface.
EventTarget  BaseAudioContext 
## Instance properties
`BaseAudioContext.audioWorklet` Read only Secure context
    
Returns the `AudioWorklet` object, which can be used to create and manage `AudioNode`s in which JavaScript code implementing the `AudioWorkletProcessor` interface are run in the background to process audio data.
`BaseAudioContext.currentTime` Read only
    
Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at `0`.
`BaseAudioContext.destination` Read only
    
Returns an `AudioDestinationNode` representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.
`BaseAudioContext.listener` Read only
    
Returns the `AudioListener` object, used for 3D spatialization.
`BaseAudioContext.sampleRate` Read only
    
Returns a float representing the sample rate (in samples per second) used by all nodes in this context. The sample-rate of an `AudioContext` cannot be changed.
`BaseAudioContext.state` Read only
    
Returns the current state of the `AudioContext`.
## Instance methods
Also implements methods from the interface `EventTarget`.
`BaseAudioContext.createAnalyser()`
    
Creates an `AnalyserNode`, which can be used to expose audio time and frequency data and for example to create data visualizations.
`BaseAudioContext.createBiquadFilter()`
    
Creates a `BiquadFilterNode`, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc
`BaseAudioContext.createBuffer()`
    
Creates a new, empty `AudioBuffer` object, which can then be populated by data and played via an `AudioBufferSourceNode`.
`BaseAudioContext.createBufferSource()`
    
Creates an `AudioBufferSourceNode`, which can be used to play and manipulate audio data contained within an `AudioBuffer` object. `AudioBuffer`s are created using `AudioContext.createBuffer()` or returned by `AudioContext.decodeAudioData()` when it successfully decodes an audio track.
`BaseAudioContext.createConstantSource()`
    
Creates a `ConstantSourceNode` object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.
`BaseAudioContext.createChannelMerger()`
    
Creates a `ChannelMergerNode`, which is used to combine channels from multiple audio streams into a single audio stream.
`BaseAudioContext.createChannelSplitter()`
    
Creates a `ChannelSplitterNode`, which is used to access the individual channels of an audio stream and process them separately.
`BaseAudioContext.createConvolver()`
    
Creates a `ConvolverNode`, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.
`BaseAudioContext.createDelay()`
    
Creates a `DelayNode`, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.
`BaseAudioContext.createDynamicsCompressor()`
    
Creates a `DynamicsCompressorNode`, which can be used to apply acoustic compression to an audio signal.
`BaseAudioContext.createGain()`
    
Creates a `GainNode`, which can be used to control the overall volume of the audio graph.
`BaseAudioContext.createIIRFilter()`
    
Creates an `IIRFilterNode`, which represents a second order filter configurable as several different common filter types.
`BaseAudioContext.createOscillator()`
    
Creates an `OscillatorNode`, a source representing a periodic waveform. It basically generates a tone.
`BaseAudioContext.createPanner()`
    
Creates a `PannerNode`, which is used to spatialize an incoming audio stream in 3D space.
`BaseAudioContext.createPeriodicWave()`
    
Creates a `PeriodicWave`, used to define a periodic waveform that can be used to determine the output of an `OscillatorNode`.
`BaseAudioContext.createScriptProcessor()` Deprecated
    
Creates a `ScriptProcessorNode`, which can be used for direct audio processing via JavaScript.
`BaseAudioContext.createStereoPanner()`
    
Creates a `StereoPannerNode`, which can be used to apply stereo panning to an audio source.
`BaseAudioContext.createWaveShaper()`
    
Creates a `WaveShaperNode`, which is used to implement non-linear distortion effects.
`BaseAudioContext.decodeAudioData()`
    
Asynchronously decodes audio file data contained in an `ArrayBuffer`. In this case, the `ArrayBuffer` is usually loaded from an `XMLHttpRequest`'s `response` attribute after setting the `responseType` to `arraybuffer`. This method only works on complete files, not fragments of audio files.
## Events
`statechange`
    
Fired when the `AudioContext`'s state changes due to the calling of one of the state change methods (`AudioContext.suspend`, `AudioContext.resume`, or `AudioContext.close`).
## Examples
    
    const audioContext = new AudioContext();
    
    const oscillatorNode = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    const finish = audioContext.destination;
    
  * Using the Web Audio API
  * `AudioContext`
  * `OfflineAudioContext`


# PaintSize
The `PaintSize` interface of the CSS Painting API represents the size of the output bitmap that the author should draw.
## Instance properties
`PaintSize.height` Read only
    
Returns the height of the output bitmap that the author should draw.
`PaintSize.width` Read only
    
Returns the width of the output bitmap that the author should draw.
  * Using the CSS Painting API
  * CSS Painting API
  * Houdini APIs


# Metadata
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The `Metadata` interface contains information about a file system entry. This metadata includes the file's size and modification date and time.
Note: This interface isn't available through the global scope; instead, you obtain a `Metadata` object describing a `FileSystemEntry` using the method `FileSystemEntry.getMetadata()`.
## Instance properties
`modificationTime` Read only Experimental Non-standard
    
A `Date` object indicating the date and time the entry was modified.
`size` Read only Experimental Non-standard
    
A 64-bit unsigned integer indicating the size of the entry in bytes.
This feature has been removed from all specification and is not in the process of being standardized.
  * File and Directory Entries API
  * `FileSystemEntry`
  * `FileSystemFileEntry` and `FileSystemDirectoryEntry`


# Local Font Access API
The Local Font Access API provides a mechanism to access the user's locally installed font data — this includes higher-level details such as names, styles, and families, as well as the raw bytes of the underlying font files.
## Concepts and usage
Web fonts were revolutionary in enabling typography on the web by allowing web designers to provide custom fonts to use on a web document. Specified via the `@font-face` at-rule, a web font can be loaded from a URL provided in the `url()` function.
`@font-face` has several other useful features available. In particular, you can also specify the font's full or Postscript name inside the `local()` function to tell the browser to use a local copy if the user has the font installed on their computer. This is not without its problems — `local()` has become notorious as a fingerprinting vector.
In addition, high-end design tools have historically been difficult to deliver on the web, due to challenges in accurate font enumeration and accessing low-level font data (for example, to apply filters and transformations). Current apps often rely on workarounds such as asking users to upload their fonts to a server where they are processed to get raw byte data, or installing a separate local program to provide additional capabilities.
The Local Font Access API has been created to address these problems.
The `Window.queryLocalFonts()` method provides access to an array of locally-installed fonts, each represented by a `FontData` object instance. `FontData` has several properties providing access to names, styles, and families, and it also has a `blob()` method providing access to a `Blob` containing the raw bytes of the underlying font file.
In terms of privacy and security:
  * The Local Font Access API is designed to only provide access to the data required to solve the above problems. There is also no requirement for browsers to provide the full list of available local fonts, nor to provide the data in the same order as it appears on disk.
  * When `Window.queryLocalFonts()` is invoked, the user is asked for permission to access their local fonts. The status of this permission can be queried via the Permissions API (the `local-fonts` permission).
  * You can control access to this feature using a `local-fonts` Permissions Policy.


## Interfaces
`FontData`
    
Represents a single local font face.
## Extensions to other interfaces
`Window.queryLocalFonts()`
    
Returns a `Promise` that fulfills with an array of `FontData` objects representing the font faces available locally.
## Examples
For a working live demo, see our Local Font Access API demo.
### Feature detection
    
    if ("queryLocalFonts" in window) {
      // The Local Font Access API is supported
    }
    
### Font enumeration
The following snippet will query for all available fonts, and log metadata. This could be used, for example, to populate a font-picker control.
    
    async function logFontData() {
      try {
        const availableFonts = await window.queryLocalFonts();
        for (const fontData of availableFonts) {
          console.log(fontData.postscriptName);
          console.log(fontData.fullName);
          console.log(fontData.family);
          console.log(fontData.style);
        }
      } catch (err) {
        console.error(err.name, err.message);
      }
    }
    
### Accessing low-level data
The `blob()` method provides access to low-level SFNT data — this is a font file format that can contain other font formats, such as PostScript, TrueType, OpenType, or Web Open Font Format (WOFF).
    
    async function computeOutlineFormat() {
      try {
        const availableFonts = await window.queryLocalFonts({
          postscriptNames: ["ComicSansMS"],
        });
        for (const fontData of availableFonts) {
          // `blob()` returns a Blob containing valid and complete
          // SFNT-wrapped font data.
          const sfnt = await fontData.blob();
          // Slice out only the bytes we need: the first 4 bytes are the SFNT
          // version info.
          // Spec: https://learn.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
          const sfntVersion = await sfnt.slice(0, 4).text();
    
          let outlineFormat = "UNKNOWN";
          switch (sfntVersion) {
            case "\x00\x01\x00\x00":
            case "true":
            case "typ1":
              outlineFormat = "truetype";
              break;
            case "OTTO":
              outlineFormat = "cff";
              break;
          }
          console.log("Outline format:", outlineFormat);
        }
      } catch (err) {
        console.error(err.name, err.message);
      }
    }
    
  * Use advanced typography with local fonts
  * `@font-face`
  * The `local-fonts` Permissions Policy directive


# RTCRtpReceiver
The `RTCRtpReceiver` interface of the WebRTC API manages the reception and decoding of data for a `MediaStreamTrack` on an `RTCPeerConnection`.
## Instance properties
`RTCRtpReceiver.jitterBufferTarget`
    
A `DOMHighResTimeStamp` that indicates an application's preferred hold time for media in the jitter buffer, allowing it influence the tradeoff between playout delay and the risk of running out of audio or video frames due to network jitter.
`RTCRtpReceiver.track` Read only
    
Returns the `MediaStreamTrack` associated with the current `RTCRtpReceiver` instance.
`RTCRtpReceiver.transport` Read only
    
Returns the `RTCDtlsTransport` instance over which the media for the receiver's track is received.
`RTCRtpReceiver.transform`
    
An `RTCRtpScriptTransform` is used to insert a transform stream (`TransformStream`) running in a worker thread into the receiver pipeline, allowing stream transforms to be applied to incoming encoded video and audio frames.
### Obsolete properties
`rtcpTransport` Deprecated
    
This property has been removed; the RTP and RTCP transports have been combined into a single transport. Use the `transport` property instead.
## Static methods
`RTCRtpReceiver.getCapabilities()`
    
Returns the most optimistic view of the capabilities of the system for receiving media of the given kind.
## Instance methods
`RTCRtpReceiver.getContributingSources()`
    
Returns an array that contains an object for each unique CSRC (contributing source) identifier received by the current `RTCRtpReceiver` in the last ten seconds.
`RTCRtpReceiver.getParameters()`
    
Returns an object that contains information about how the RTC data is to be decoded.
`RTCRtpReceiver.getStats()`
    
Returns a `Promise` whose fulfillment handler receives a `RTCStatsReport` which contains statistics about the incoming streams and their dependencies.
`RTCRtpReceiver.getSynchronizationSources()`
    
Returns an array that contains an object for each unique SSRC (synchronization source) identifier received by the current `RTCRtpReceiver` in the last ten seconds.
  * WebRTC
  * `RTCStatsReport`
  * `RTCRtpSender`
  * `RTCPeerConnection.getStats()`


# RTCIceTransport
The `RTCIceTransport` interface provides access to information about the ICE transport layer over which the data is being sent and received. This is particularly useful if you need to access state information about the connection.
EventTarget  RTCIceTransport 
## Instance properties
The `RTCIceTransport` interface inherits properties from its parent, `EventTarget`. It also offers the following properties:
`component` Read only
    
The ICE component being used by the transport. The value is one of the strings from the `RTCIceTransport` enumerated type: `"RTP"` or `"RTSP"`.
`gatheringState` Read only
    
A string indicating which current gathering state of the ICE agent: `"new"`, `"gathering"`, or `"complete"`.
`role` Read only
    
Returns a string whose value is either `"controlling"` or `"controlled"`; this indicates whether the ICE agent is the one that makes the final decision as to the candidate pair to use or not.
`state` Read only
    
A string indicating what the current state of the ICE agent is. The value of `state` can be used to determine whether the ICE agent has made an initial connection using a viable candidate pair (`"connected"`), made its final selection of candidate pairs (`"completed"`), or in an error state (`"failed"`), among other states.
## Instance methods
Also includes methods from `EventTarget`, the parent interface.
`getLocalCandidates()`
    
Returns an array of `RTCIceCandidate` objects, each describing one of the ICE candidates that have been gathered so far for the local device. These are the same candidates which have already been sent to the remote peer by sending an `icecandidate` event to the `RTCPeerConnection` for transmission.
`getLocalParameters()`
    
Returns a `RTCIceParameters` object describing the ICE parameters established by a call to the `RTCPeerConnection.setLocalDescription()` method. Returns `null` if parameters have not yet been received.
`getRemoteCandidates()`
    
Returns an array of `RTCIceCandidate` objects, one for each of the remote device's ICE candidates that have been received by the local end of the `RTCPeerConnection` and delivered to ICE by calling `addIceCandidate()`.
`getRemoteParameters()`
    
Returns a `RTCIceParameters` object containing the ICE parameters for the remote device, as set by a call to `RTCPeerConnection.setRemoteDescription()`. If `setRemoteDescription()` hasn't been called yet, the return value is `null`.
`getSelectedCandidatePair()`
    
Returns a `RTCIceCandidatePair` object that identifies the two candidates—one for each end of the connection—that have been selected so far. It's possible that a better pair will be found and selected later; if you need to keep up with this, watch for the `selectedcandidatepairchange` event. If no candidate pair has been selected yet, the return value is `null`.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`gatheringstatechange`
    
Sent to the `RTCIceTransport` object to indicate that the value of the `gatheringState` property has changed, indicating a change in this transport's ICE candidate negotiation process. Also available through the `ongatheringstatechange` event handler property.
`selectedcandidatepairchange`
    
Sent to the `RTCIceTransport` when a new, better pair of candidates has been selected to describe the connectivity between the two peers. This occurs during negotiation or renegotiation, including after an ICE restart, which reuses the existing `RTCIceTransport` objects. The current candidate pair can be obtained using `getSelectedCandidatePair()`. Also available using the `onselectedcandidatepairchange` event handler property.
`statechange`
    
Sent to the `RTCIceTransport` instance when the value of the `state` property has changed, indicating that the ICE gathering process has changed state. Also available through the `onstatechange` event handler property.
## Examples
tbd
# CSSPositionTryDescriptors
The `CSSPositionTryDescriptors` interface defines properties that represent the list of CSS descriptors that can be set in the body of a `@position-try` at-rule.
Each descriptor in the body of the corresponding `@position-try` at-rule can be accessed using either its property name in bracket notation or the camel-case version of the property name "propertyName" in dot notation. For example, you can access the CSS property "property-name" as `style["property-name"]` or `style.propertyName`, where `style` is a `CSSPositionTryDescriptors` instance. A property with a single-word name like `height` can be accessed using either notation: `style["height"]` or `style.height`.
Note: The `CSSPositionTryRule` interface represents a `@position-try` at-rule, and the `CSSPositionTryRule.style` property is an instance of this object.
CSSStyleDeclaration  CSSPositionTryDescriptors 
## Instance properties
Inherits properties from its ancestor `CSSStyleDeclaration`.
The following property names, in snake-case (accessed using bracket notation) and camel-case (accessed using dot notation), each represent the value of a descriptor in the corresponding `@position-try` at-rule:
`align-self` or `alignSelf`
    
A string representing the value of an `align-self` descriptor.
`block-size` or `blockSize`
    
A string representing the value of a `block-size` descriptor.
`bottom`
    
A string representing the value of a `bottom` descriptor.
`height`
    
A string representing the value of a `height` descriptor.
`inline-size` or `inlineSize`
    
A string representing the value of an `inline-size` descriptor.
`inset`
    
A string representing the value of an `inset` descriptor.
`position-area` or `positionArea`
    
A string representing the value of a `position-area` descriptor.
`inset-block` or `insetBlock`
    
A string representing the value of an `inset-block` descriptor.
`inset-block-end` or `insetBlockEnd`
    
A string representing the value of an `inset-block-end` descriptor.
`inset-block-start` or `insetBlockStart`
    
A string representing the value of an `inset-block-start` descriptor.
`inset-inline` or `insetInline`
    
A string representing the value of an `inset-inline` descriptor.
`inset-inline-end` or `insetInlineEnd`
    
A string representing the value of an `inset-inline-end` descriptor.
`inset-inline-start` or `insetInlineStart`
    
A string representing the value of an `inset-inline-start` descriptor.
`justify-self` or `justifySelf`
    
A string representing the value of a `justify-self` descriptor.
`left`
    
A string representing the value of a `left` descriptor.
`margin`
    
A string representing the value of a `margin` descriptor.
`margin-block` or `marginBlock`
    
A string representing the value of a `margin-block` descriptor.
`margin-block-end` or `marginBlockEnd`
    
A string representing the value of a `margin-block-end` descriptor.
`margin-block-start` or `marginBlockStart`
    
A string representing the value of a `margin-block-start` descriptor.
`margin-bottom` or `marginBottom`
    
A string representing the value of a `margin-bottom` descriptor.
`margin-inline` or `marginInline`
    
A string representing the value of a `margin-inline` descriptor.
`margin-inline-end` or `marginInlineEnd`
    
A string representing the value of a `margin-inline-end` descriptor.
`margin-inline-start` or `marginInlineStart`
    
A string representing the value of a `margin-inline-start` descriptor.
`margin-left` or `marginLeft`
    
A string representing the value of a `margin-left` descriptor.
`margin-right` or `marginRight`
    
A string representing the value of a `margin-right` descriptor.
`margin-top` or `marginTop`
    
A string representing the value of a `margin-top` descriptor.
`max-block-size` or `maxBlockSize`
    
A string representing the value of a `max-block-size` descriptor.
`max-height` or `maxHeight`
    
A string representing the value of a `max-height` descriptor.
`max-inline-size` or `maxInlineSize`
    
A string representing the value of a `max-inline-size` descriptor.
`max-width` or `maxWidth`
    
A string representing the value of a `max-width` descriptor.
`min-block-size` or `minBlockSize`
    
A string representing the value of a `min-block-size` descriptor.
`min-height` or `minHeight`
    
A string representing the value of a `min-height` descriptor.
`min-inline-size` or `minInlineSize`
    
A string representing the value of a `min-inline-size` descriptor.
`min-width` or `minWidth`
    
A string representing the value of a `min-width` descriptor.
`place-self` or `placeSelf`
    
A string representing the value of a `place-self` descriptor.
`position-anchor` or `positionAnchor`
    
A string representing the value of a `position-anchor` descriptor.
`right`
    
A string representing the value of a `right` descriptor.
`top`
    
A string representing the value of a `top` descriptor.
`width`
    
A string representing the value of a `width` descriptor.
## Instance methods
No specific methods; inherits methods from its ancestor `CSSStyleDeclaration`.
## Examples
The CSS includes a `@position-try` at-rule with a name of `--custom-right` and three descriptors.
    
    @position-try --custom-right {
      position-area: right;
      width: 100px;
      margin-left: 10px;
    }
    
    
    const myRules = document.styleSheets[0].cssRules;
    const tryOption = myRules[0]; // a CSSPositionTryRule
    console.log(tryOption.style); // "[object CSSPositionTryDescriptors]"
    console.log(tryOption.style.margin); // "0 0 0 10px"
    console.log(tryOption.style["position-area"]); // "right"
    
  * `CSSPositionTryRule`
  * `@position-try`
  * `position-try-fallbacks`
  * CSS anchor positioning module
  * Using CSS anchor positioning
  * Handling overflow: try options and conditional hiding


# HTMLDListElement
The `HTMLDListElement` interface provides special properties (beyond those of the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating definition list (`<dl>`) elements.
EventTarget  Node  Element  HTMLElement  HTMLDListElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLDListElement.compact` Deprecated
    
A boolean value indicating that spacing between list items should be reduced.
## Instance methods
No specific methods; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<dl>`


# MutationRecord
The `MutationRecord` is a read-only interface that represents an individual DOM mutation observed by a `MutationObserver`. It is the object inside the array passed to the callback of a `MutationObserver`.
## Instance properties
`MutationRecord.addedNodes` Read only
    
The nodes added by a mutation. Will be an empty `NodeList` if no nodes were added.
`MutationRecord.attributeName` Read only
    
The name of the changed attribute as a string, or `null`.
`MutationRecord.attributeNamespace` Read only
    
The namespace of the changed attribute as a string, or `null`.
`MutationRecord.nextSibling` Read only
    
The next sibling of the added or removed nodes, or `null`.
`MutationRecord.oldValue` Read only
    
The value depends on the `MutationRecord.type`:
  * For `attributes`, it is the value of the changed attribute before the change.
  * For `characterData`, it is the data of the changed node before the change.
  * For `childList`, it is `null`.


`MutationRecord.previousSibling` Read only
    
The previous sibling of the added or removed nodes, or `null`.
`MutationRecord.removedNodes` Read only
    
The nodes removed by a mutation. Will be an empty `NodeList` if no nodes were removed.
`MutationRecord.target` Read only
    
The node the mutation affected, depending on the `MutationRecord.type`.
  * For `attributes`, it is the element whose attribute changed.
  * For `characterData`, it is the `CharacterData` node.
  * For `childList`, it is the node whose children changed.


`MutationRecord.type` Read only
    
A string representing the type of mutation: `attributes` if the mutation was an attribute mutation, `characterData` if it was a mutation to a `CharacterData` node, and `childList` if it was a mutation to the tree of nodes.
# AmbientLightSensor
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `AmbientLightSensor` interface of the Sensor APIs returns the current light level or illuminance of the ambient light around the hosting device.
To use this sensor, the user must grant permission to the `'ambient-light-sensor'` device sensor through the Permissions API.
This feature may be blocked by a Permissions Policy set on your server.
EventTarget  Sensor  AmbientLightSensor 
## Constructor
`AmbientLightSensor()` Experimental
    
Creates a new `AmbientLightSensor` object.
## Instance properties
`AmbientLightSensor.illuminance` Read only Experimental
    
Returns the current light level in lux of the ambient light level around the hosting device.
## Instance methods
`AmbientLightSensor` doesn't have own methods. However, it inherits methods from its parent interfaces, `Sensor` and `EventTarget`.
## Events
`AmbientLightSensor` doesn't have own events. However, it inherits events from its parent interface, `Sensor`.
## Example
    
    if ("AmbientLightSensor" in window) {
      const sensor = new AmbientLightSensor();
      sensor.addEventListener("reading", (event) => {
        console.log("Current light level:", sensor.illuminance);
      });
      sensor.addEventListener("error", (event) => {
        console.log(event.error.name, event.error.message);
      });
      sensor.start();
    }
    
# Translator and Language Detector APIs
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Translator and Language Detector APIs provide functionality to detect the language that text is written in, and to translate text into different languages, via a browser's own internal AI model (which may differ between browsers).
## Concepts and usage
Translating a body of text is a common task on today's web. Typical use cases include:
  * On-the-fly translation of an article that isn't available in your language.
  * Translating a user's support requests into a language the support agent understands.
  * Facilitating chats between users that don't speak each other's languages.


Detecting the language of a body of test is an important precursor for successful automated translation, but has other uses beyond direct translation. For example, it allows automatic UI configuration based on user text entry, ranging from updating UI and error strings, to automatically loading appropriate dictionaries for spell checking or curse word detection.
AI is well-suited to facilitating language detection and translation. The Translator and Language Detector APIs provide asynchronous (`Promise`-based) mechanisms for a website to detect languages and translate text via the browser's own internal AI model. This is useful and efficient because the browser handles the service, rather than the developer having to rely on the user downloading AI models, or host or pay for a cloud-based translation service.
  * Language detection is done via the `LanguageDetector` interface. A `LanguageDetector` object instance is created using the `LanguageDetector.create()` static method, then the `detect()` instance method is passed the text string to detect the language for.
  * Translation is done via the `Translator` interface. A `Translator` object instance is created using the `Translator.create()` static method, then the `translate()` instance method is passed the text string to translate.


You can also cancel pending operations using an `AbortController`.
The `Translator` and `LanguageDetector` instances consume a lot of resources, so once you're finished with them, you are encouraged to remove them using a `destroy()` instance method (for example, `Translator.destroy()`).
See Using the Translator and Language Detector APIs for a walkthrough of how to use the APIs.
## Interfaces
`LanguageDetector` Experimental
    
Contains all the language detection functionality, including checking AI model availability, creating a new `LanguageDetector` instance, using it to detect a language, and more.
`Translator` Experimental
    
Contains all the translation functionality, including checking AI model availability, creating a new `Translator` instance, using it to create a translation, and more.
## HTTP headers
`Permissions-Policy`; the `language-detector` directive
    
Controls access to the language detection functionality. Where a policy specifically disallows its use, any attempts to call the `LanguageDetector` methods will fail with a `NotAllowedError` `DOMException`.
`Permissions-Policy`; the `translator` directive
    
Controls access to the translation functionality. Where a policy specifically disallows its use, any attempts to call the `Translator` methods will fail with a `NotAllowedError` `DOMException`.
## Security considerations
Creation of `LanguageDetector` and `Translator` objects requires that the user has recently interacted with the page (transient user activation is required).
Access to the API is also controlled via `language-detector` and `translator` `Permissions-Policy` directives.
## Examples
For a full example, see Using the Translator and Language Detector APIs.
  * Language detection with built-in AI on developer.chrome.com (2025)
  * Translation with built-in AI on developer.chrome.com (2025)


# EcKeyImportParams
The `EcKeyImportParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.importKey()` or `SubtleCrypto.unwrapKey()`, when generating any elliptic-curve-based key pair: that is, when the algorithm is identified as either of ECDSA or ECDH.
## Instance properties
`name`
    
A string. This should be set to `ECDSA` or `ECDH`, depending on the algorithm you want to use.
`namedCurve`
    
A string representing the name of the elliptic curve to use. This may be any of the following names for NIST-approved curves:
  * `P-256`
  * `P-384`
  * `P-521`


## Examples
See the examples for `SubtleCrypto.importKey()`.
Browsers that support the "ECDH" or "ECDSA" algorithms for the `SubtleCrypto.importKey()` or `SubtleCrypto.wrapKey()` methods will support this type.
  * `SubtleCrypto.importKey()`.
  * `SubtleCrypto.unwrapKey()`.


# CSSNamespaceRule
The `CSSNamespaceRule` interface describes an object representing a single CSS `@namespace` at-rule.
CSSRule  CSSNamespaceRule 
## Instance properties
Inherits properties from its ancestor `CSSRule`.
`CSSNamespaceRule.namespaceURI`
    
Returns a string containing the text of the URI of the given namespace.
`CSSNamespaceRule.prefix`
    
Returns a string with the name of the prefix associated to this namespace. If there is no such prefix, returns an empty string.
## Instance methods
Inherits methods from its ancestor `CSSRule`.
## Examples
The stylesheet includes a namespace as the only rule. Therefore the first `CSSRule` returned will be a `CSSNamespaceRule`.
    
    @namespace url("http://www.w3.org/1999/xhtml");
    
    
    const myRules = document.styleSheets[0].cssRules;
    console.log(myRules[0]); // A CSSNamespaceRule
    
# OTPCredential
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `OTPCredential` interface of the WebOTP API is returned when a WebOTP `navigator.credentials.get()` call (i.e., invoked with an `otp` option) fulfills. It includes a `code` property that contains the retrieved one-time password (OTP).
Credential  OTPCredential 
## Instance properties
This interface also inherits properties from `Credential`.
`OTPCredential.code` Read only Experimental
    
The one-time password (OTP).
## Instance methods
None.
## Examples
The below code triggers the browser's permission flow when an SMS message arrives. If permission is granted, then the promise resolves with an `OTPCredential` object. The contained `code` value is then set as the value of an `<input>` form element, which is then submitted.
    
    navigator.credentials
      .get({
        otp: { transport: ["sms"] },
        signal: ac.signal,
      })
      .then((otp) => {
        input.value = otp.code;
        if (form) form.submit();
      })
      .catch((err) => {
        console.error(err);
      });
    
Note: For a full explanation of the code, see the WebOTP API landing page. You can also see this code as part of a full working demo.
# SVGMarkerElement
The `SVGMarkerElement` interface provides access to the properties of `<marker>` elements, as well as methods to manipulate them. The `<marker>` element defines the graphics used for drawing marks on a shape.
EventTarget  Node  Element  SVGElement  SVGMarkerElement 
The following properties and methods all return, or act on the attributes of the `<marker>` element represented by `SVGMarkerElement`.
## Instance properties
This interface also inherits properties from its parent, `SVGElement`.
`SVGMarkerElement.markerUnits` Read only
    
Returns an `SVGAnimatedEnumeration` object, with one of the following values:
0
    
`SVG_MARKERUNITS_UNKNOWN` which means that the `markerUnits` attribute has a value other than the two predefined keywords.
1
    
`SVG_MARKERUNITS_USERSPACEONUSE` which means that the `markerUnits` attribute has the keyword value `userSpaceOnUse`.
2
    
`SVG_MARKERUNITS_STROKEWIDTH` which means that the `markerUnits` attribute has the keyword value `strokeWidth`.
`SVGMarkerElement.markerWidth` Read only
    
Returns an `SVGAnimatedLength` object containing the width of the `<marker>` viewport.
`SVGMarkerElement.markerHeight` Read only
    
Returns an `SVGAnimatedLength` object containing the height of the `<marker>` viewport.
`SVGMarkerElement.orientType` Read only
    
Returns an `SVGAnimatedEnumeration` object, with one of the following values:
0
    
`SVG_MARKER_ORIENT_UNKNOWN` which means that the `orient` attribute has a value other than the two predefined keywords.
1
    
`SVG_MARKERUNITS_ORIENT_AUTO` which means that the `orient` attribute has the keyword value `auto`.
2
    
`SVG_MARKERUNITS_ORIENT_ANGLE` which means that the `orient` attribute has an `<angle>` or `<number>` value indicating the angle.
`SVGMarkerElement.orientAngle` Read only
    
Returns an `SVGAnimatedAngle` object containing the angle of the `orient` attribute.
`SVGMarkerElement.refX` Read only
    
Returns an `SVGAnimatedLength` object containing the value of the `refX` attribute of the `<marker>`.
`SVGMarkerElement.refY` Read only
    
Returns an `SVGAnimatedLength` object containing the value of the `refY` attribute of the `<marker>`.
`SVGMarkerElement.viewBox` Read only
    
Returns an `SVGAnimatedRect` object containing an `SVGRect` which contains the values set by the `viewBox` attribute on the `<marker>`.
`SVGMarkerElement.preserveAspectRatio` Read only
    
Returns an `SVGPreserveAspectRatio` object which contains the values set by the `preserveAspectRatio` attribute on the `<marker>` viewport.
## Instance methods
This interface also inherits methods from its parent, `SVGElement`.
`SVGMarkerElement.setOrientToAuto()`
    
Sets the value of the `orient` attribute to `auto`.
`SVGMarkerElement.setOrientToAngle()`
    
Sets the value of the `orient` attribute to a specific angle value.
## Examples
The following SVG will be referenced in the examples.
    
    <svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <marker
          id="arrow"
          viewBox="0 0 10 10"
          refX="5"
          refY="5"
          markerWidth="6"
          markerHeight="6"
          orient="90">
          <path d="M 0 0 L 10 5 L 0 10 z" />
        </marker>
      </defs>
    </svg>
    
### Finding the Width of the Marker
The `markerWidth` property returns an `SVGAnimatedLength` which contains an `SVGLength` with the value of the `markerWidth` attribute.
    
    let marker = document.getElementById("arrow");
    console.log(marker.markerWidth.baseVal.value); // 6
    
### Updating the Orientation Angle
In the following example the value of the `orient` attribute is updated using `setOrientToAngle()` using an `SVGAngle` created using `SVGElement.createSVGAngle()`.
    
    let svg = document.getElementById("svg");
    let marker = document.getElementById("arrow");
    console.log(marker.orientAngle.baseVal.value); // value in SVG above - 90
    let angle = svg.createSVGAngle();
    angle.value = "110";
    marker.setOrientToAngle(angle);
    console.log(marker.orientAngle.baseVal.value); // new value - 110
    
# PaymentRequestUpdateEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PaymentRequestUpdateEvent` interface is used for events sent to a `PaymentRequest` instance when changes are made to shipping-related information for a pending `PaymentRequest`. Those events are:
`shippingaddresschange`
    
Dispatched whenever the user changes their shipping address.
`shippingoptionchange`
    
Dispatched whenever the user changes a shipping option.
Event  PaymentRequestUpdateEvent 
## Constructor
`PaymentRequestUpdateEvent()`
    
Creates a new `PaymentRequestUpdateEvent` object.
## Instance properties
Provides only the properties inherited from its parent interface, `Event`.
## Instance methods
In addition to methods inherited from the parent interface, `Event`, `PaymentRequestUpdateEvent` offers the following methods:
`PaymentRequestUpdateEvent.updateWith()`
    
If the event handler determines that information included in the payment request needs to be changed, or that new information needs to be added, it calls `updateWith()` with the information that needs to be replaced or added.
  * Using the Payment Request API


# FontFace
Note: This feature is available in Web Workers.
The `FontFace` interface of the CSS Font Loading API represents a single usable font face.
This interface defines the source of a font face, either a URL to an external resource or a buffer, and font properties such as `style`, `weight`, and so on. For URL font sources it allows authors to trigger when the remote font is fetched and loaded, and to track loading status.
## Constructor
`FontFace()`
    
Constructs and returns a new `FontFace` object, built from an external resource described by a URL or from an `ArrayBuffer`.
## Instance properties
`FontFace.ascentOverride`
    
A string that retrieves or sets the ascent metric of the font. It is equivalent to the `ascent-override` descriptor.
`FontFace.descentOverride`
    
A string that retrieves or sets the descent metric of the font. It is equivalent to the `descent-override` descriptor.
`FontFace.display`
    
A string that determines how a font face is displayed based on whether and when it is downloaded and ready to use.
`FontFace.family`
    
A string that retrieves or sets the family of the font. It is equivalent to the `font-family` descriptor.
`FontFace.featureSettings`
    
A string that retrieves or sets infrequently used font features that are not available from a font's variant properties. It is equivalent to the CSS `font-feature-settings` property.
`FontFace.lineGapOverride`
    
A string that retrieves or sets the line-gap metric of the font. It is equivalent to the `line-gap-override` descriptor.
`FontFace.loaded` Read only
    
Returns a `Promise` that resolves with the current `FontFace` object when the font specified in the object's constructor is done loading or rejects with a `SyntaxError` `DOMException`.
`FontFace.status` Read only
    
Returns an enumerated value indicating the status of the font, one of `"unloaded"`, `"loading"`, `"loaded"`, or `"error"`.
`FontFace.stretch`
    
A string that retrieves or sets how the font stretches. It is equivalent to the `font-stretch` descriptor.
`FontFace.style`
    
A string that retrieves or sets the style of the font. It is equivalent to the `font-style` descriptor.
`FontFace.unicodeRange`
    
A string that retrieves or sets the range of unicode code points encompassing the font. It is equivalent to the `unicode-range` descriptor.
`FontFace.variant` Non-standard
    
A string that retrieves or sets the variant of the font.
`FontFace.variationSettings`
    
A string that retrieves or sets the variation settings of the font. It is equivalent to the `font-variation-settings` descriptor.
`FontFace.weight`
    
A string that contains the weight of the font. It is equivalent to the `font-weight` descriptor.
`FontFace.load()`
    
Loads a font based on current object's constructor-passed requirements, including a location or source buffer, and returns a `Promise` that resolves with the current FontFace object.
## Examples
The code below defines a font face using data at the URL "my-font.woff" with a few font descriptors. Just to show how it works, we then define the `stretch` descriptor using a property.
    
    // Define a FontFace
    const font = new FontFace("my-font", 'url("my-font.woff")', {
      style: "italic",
      weight: "400",
    });
    
    font.stretch = "condensed";
    
Next we load the font using `FontFace.load()` and use the returned promise to track completion or report an error.
    
    // Load the font
    font.load().then(
      () => {
        // Resolved - add font to document.fonts
      },
      (err) => {
        console.error(err);
      },
    );
    
To actually use the font we will need to add it to a `FontFaceSet`. We could do that before or after loading the font.
For additional examples see CSS Font Loading API > Examples.
  * @font-face


# HTMLTemplateElement
The `HTMLTemplateElement` interface enables access to the contents of an HTML `<template>` element.
Note: An HTML parser can create either an `HTMLTemplateElement` or a `ShadowRoot` when it parses a `<template>` element, depending on the `<template>` attributes. If an `HTMLTemplateElement` is created the "shadow" attributes are reflected from the template. However these are not useful, because an `HTMLTemplateElement` is not a shadow root and cannot subsequently be changed to a shadow root.
EventTarget  Node  Element  HTMLElement  HTMLTemplateElement 
## Instance properties
This interface inherits the properties of `HTMLElement`.
`content` Read only
    
A read-only `DocumentFragment` which contains the DOM subtree representing the `<template>` element's template contents.
`shadowRootMode`
    
A string that reflects the value of the `shadowrootmode` attribute of the associated `<template>` element.
`shadowRootDelegatesFocus`
    
A boolean that reflects the value of the `shadowrootdelegatesfocus` attribute of the associated `<template>` element.
`shadowRootClonable`
    
A boolean that reflects the value of the `shadowrootclonable` attribute of the associated `<template>` element.
`shadowRootSerializable`
    
A boolean that reflects the value of the `shadowrootserializable` attribute of the associated `<template>` element.
## Instance methods
This interface inherits the methods of `HTMLElement`.
# SVGFETurbulenceElement
The `SVGFETurbulenceElement` interface corresponds to the `<feTurbulence>` element.
EventTarget  Node  Element  SVGElement  SVGFETurbulenceElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFETurbulenceElement.baseFrequencyX` Read only
    
An `SVGAnimatedNumber` corresponding to the X component of the `baseFrequency` attribute of the given element.
`SVGFETurbulenceElement.baseFrequencyY` Read only
    
An `SVGAnimatedNumber` corresponding to the Y component of the `baseFrequency` attribute of the given element.
`SVGFETurbulenceElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFETurbulenceElement.numOctaves` Read only
    
An `SVGAnimatedInteger` corresponding to the `numOctaves` attribute of the given element.
`SVGFETurbulenceElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFETurbulenceElement.seed` Read only
    
An `SVGAnimatedNumber` corresponding to the `seed` attribute of the given element.
`SVGFETurbulenceElement.stitchTiles` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `stitchTiles` attribute of the given element. It takes one of the `SVG_STITCHTYPE_*` constants defined on this interface.
`SVGFETurbulenceElement.type` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `type` attribute of the given element. It takes one of the `SVG_TURBULENCE_TYPE_*` constants defined on this interface.
`SVGFETurbulenceElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFETurbulenceElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFETurbulenceElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
## Static properties
`SVG_TURBULENCE_TYPE_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_TURBULENCE_TYPE_FRACTALNOISE` (1)
    
Corresponds to the value `fractalNoise`.
`SVG_TURBULENCE_TYPE_TURBULENCE` (2)
    
Corresponds to the value `turbulence`.
`SVG_STITCHTYPE_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_STITCHTYPE_STITCH` (1)
    
Corresponds to the value `stitch`.
`SVG_STITCHTYPE_NOSTITCH` (2)
    
Corresponds to the value `noStitch`.
  * `<feTurbulence>`


# AudioParamDescriptor
The `AudioParamDescriptor` dictionary of the Web Audio API specifies properties for `AudioParam` objects.
It is used to create custom `AudioParam`s on an `AudioWorkletNode`. If the underlying `AudioWorkletProcessor` has a `parameterDescriptors` static getter, then the returned array of objects based on this dictionary is used internally by `AudioWorkletNode` constructor to populate its `parameters` property accordingly.
## Instance properties
`name`
    
The string which represents the name of the `AudioParam`. Under this name the `AudioParam` will be available in the `parameters` property of the node, and under this name the `AudioWorkletProcessor.process` method will acquire the calculated values of this `AudioParam`.
`automationRate` Optional
    
Either `"a-rate"`, or `"k-rate"` string which represents an automation rate of this `AudioParam`. Defaults to `"a-rate"`.
`minValue` Optional
    
A `float` which represents minimum value of the `AudioParam`. Defaults to `-3.4028235e38`.
`maxValue` Optional
    
A `float` which represents maximum value of the `AudioParam`. Defaults to `3.4028235e38`.
`defaultValue` Optional
    
A `float` which represents initial value of the `AudioParam`. Defaults to `0`.
## Examples
The code fragment below shows a descriptor of this type being returned by a static `parameterDescriptors` method defined in a custom `AudioWorkletProcessor` (this is part of the more complete example in AudioWorkletNode.parameters).
    
    // white-noise-processor.js
    class WhiteNoiseProcessor extends AudioWorkletProcessor {
      static get parameterDescriptors() {
        return [
          {
            name: "customGain",
            defaultValue: 1,
            minValue: 0,
            maxValue: 1,
            automationRate: "a-rate",
          },
        ];
      }
    
      // …
    }
    
  * Web Audio API
  * Using the Web Audio API


# BluetoothRemoteGATTDescriptor
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `BluetoothRemoteGATTDescriptor` interface of the Web Bluetooth API provides a GATT Descriptor, which provides further information about a characteristic's value.
## Instance properties
`BluetoothRemoteGATTDescriptor.characteristic` Read only Experimental
    
Returns the `BluetoothRemoteGATTCharacteristic` this descriptor belongs to.
`BluetoothRemoteGATTDescriptor.uuid` Read only Experimental
    
Returns the UUID of the characteristic descriptor, for example `"00002902-0000-1000-8000-00805f9b34fb"` for the Client Characteristic Configuration descriptor.
`BluetoothRemoteGATTDescriptor.value` Read only Experimental
    
Returns the currently cached descriptor value. This value gets updated when the value of the descriptor is read.
## Instance methods
`BluetoothRemoteGATTDescriptor.readValue()` Experimental
    
Returns a `Promise` that resolves to an `ArrayBuffer` holding a duplicate of the `value` property if it is available and supported. Otherwise it throws an error.
`BluetoothRemoteGATTDescriptor.writeValue()` Experimental
    
Sets the value property to the bytes contained in an `ArrayBuffer` and returns a `Promise`.
# ANGLE_instanced_arrays
The `ANGLE_instanced_arrays` extension is part of the WebGL API and allows to draw the same object, or groups of similar objects multiple times, if they share the same vertex data, primitive count and type.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default and the constants and methods are available without the `ANGLE_` suffix.
Despite the name "ANGLE", this extension works on any device if the hardware supports it and not just on Windows when using the ANGLE library. "ANGLE" just indicates that this extension has been written by the ANGLE library authors.
## Constants
This extension exposes one new constant, which can be used in the `gl.getVertexAttrib()` method:
`ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE`
    
Returns a `GLint` describing the frequency divisor used for instanced rendering when used in the `gl.getVertexAttrib()` as the `pname` parameter.
## Instance methods
This extension exposes three new methods.
`ext.drawArraysInstancedANGLE()`
    
Behaves identically to `gl.drawArrays()` except that multiple instances of the range of elements are executed, and the instance advances for each iteration.
`ext.drawElementsInstancedANGLE()`
    
Behaves identically to `gl.drawElements()` except that multiple instances of the set of elements are executed and the instance advances between each set.
`ext.vertexAttribDivisorANGLE()`
    
Modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with `ext.drawArraysInstancedANGLE()` and `ext.drawElementsInstancedANGLE()`.
## Examples
The following example shows how to draw a given geometry multiple times with a single draw call.
Warning: The following is educational, not production level code. It should generally be avoided to construct data / buffers within the rendering loop or right before use.
    
    // enable the extension
    const ext = gl.getExtension("ANGLE_instanced_arrays");
    
    // binding the geometry buffer as usual
    gl.bindBuffer(gl.ARRAY_BUFFER, geometryVertexBuffer);
    gl.enableVertexAttribArray(vertexPositionAttributeLocation);
    gl.vertexAttribPointer(
      vertexPositionAttributeLocation,
      3,
      gl.FLOAT,
      false,
      0,
      0,
    );
    
    // build position buffer
    const instancePositions = [];
    for (const instance of instances) {
      instancePositions.push(
        instance.position.x,
        instance.position.y,
        instance.position.z,
      );
    }
    const instancePositionBuffer = createWebGLBufferFromData(instancePositions);
    
    // binding the instance position buffer as you would with any attribute
    gl.bindBuffer(gl.ARRAY_BUFFER, instancePositionBuffer);
    gl.enableVertexAttribArray(instancePositionAttributeLocation);
    gl.vertexAttribPointer(
      instancePositionAttributeLocation,
      3,
      gl.FLOAT,
      false,
      0,
      0,
    );
    
    // mark the attribute as instanced and advance it every single(1) instance rather than every vertex
    ext.vertexAttribDivisorANGLE(instancePositionAttributeLocation, 1);
    
    // draw geometry for each instance
    ext.drawArraysInstancedANGLE(
      gl.TRIANGLES,
      0,
      numGeometryVertices,
      instances.length,
    );
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGL2RenderingContext.drawArraysInstanced()`
  * `WebGL2RenderingContext.drawElementsInstanced()`
  * `WebGL2RenderingContext.vertexAttribDivisor()`


# MediaTrackConstraints
The `MediaTrackConstraints` dictionary is used to describe a set of capabilities and the value or values each can take on. A constraints dictionary is passed into `applyConstraints()` to allow a script to establish a set of exact (required) values or ranges and/or preferred values or ranges of values for the track, and the most recently-requested set of custom constraints can be retrieved by calling `getConstraints()`.
## Constraints
The following types are used to specify a constraint for a property. They allow you to specify one or more `exact` values from which one must be the parameter's value, or a set of `ideal` values which should be used if possible. You can also specify a single value (or an array of values) which the user agent will do its best to match once all more stringent constraints have been applied.
To learn more about how constraints work, see Capabilities, constraints, and settings.
Note: `min` and `exact` values are not permitted in constraints used in `MediaDevices.getDisplayMedia()` calls — they produce a `TypeError` — but they are allowed in constraints used in `MediaStreamTrack.applyConstraints()` calls.
### ConstrainBoolean
The `ConstrainBoolean` constraint type is used to specify a constraint for a property whose value is a Boolean value. Its value may either be set to a Boolean (`true` or `false`) or an object containing the following properties:
`exact`
    
A Boolean which must be the value of the property. If the property can't be set to this value, matching will fail.
`ideal`
    
A Boolean specifying an ideal value for the property. If possible, this value will be used, but if it's not possible, the user agent will use the closest possible match.
### ConstrainDouble
The `ConstrainDouble` constraint type is used to specify a constraint for a property whose value is a double-precision floating-point number. Its value may either be set to a number or an object containing the following properties:
`max`
    
A decimal number specifying the largest permissible value of the property it describes. If the value cannot remain equal to or less than this value, matching will fail.
`min`
    
A decimal number specifying the smallest permissible value of the property it describes. If the value cannot remain equal to or greater than this value, matching will fail.
`exact`
    
A decimal number specifying a specific, required, value the property must have to be considered acceptable.
`ideal`
    
A decimal number specifying an ideal value for the property. If possible, this value will be used, but if it's not possible, the user agent will use the closest possible match.
### ConstrainDOMString
The `ConstrainDOMString` constraint type is used to specify a constraint for a property whose value is a string. Its value may either be set to a string, an array of strings, or an object containing the following properties:
`exact`
    
A string or an array of strings, one of which must be the value of the property. If the property can't be set to one of the listed values, matching will fail.
`ideal`
    
A string or an array of strings, specifying ideal values for the property. If possible, one of the listed values will be used, but if it's not possible, the user agent will use the closest possible match.
### ConstrainULong
The `ConstrainULong` constraint type is used to specify a constraint for a property whose value is an integer. Its value may either be set to a number or an object containing the following properties:
`max`
    
An integer specifying the largest permissible value of the property it describes. If the value cannot remain equal to or less than this value, matching will fail.
`min`
    
An integer specifying the smallest permissible value of the property it describes. If the value cannot remain equal to or greater than this value, matching will fail.
`exact`
    
An integer specifying a specific, required, value the property must have to be considered acceptable.
`ideal`
    
An integer specifying an ideal value for the property. If possible, this value will be used, but if it's not possible, the user agent will use the closest possible match.
## Instance properties
Some combination—but not necessarily all—of the following properties will exist on the object. This may be because a given browser doesn't support the property, or because it doesn't apply. For example, because RTP doesn't provide some of these values during negotiation of a WebRTC connection, a track associated with a `RTCPeerConnection` will not include certain values, such as `facingMode` or `groupId`.
### Instance properties of all media tracks
`deviceId`
    
A `ConstrainDOMString` object specifying a device ID or an array of device IDs which are acceptable and/or required.
`groupId`
    
A `ConstrainDOMString` object specifying a group ID or an array of group IDs which are acceptable and/or required.
### Instance properties of audio tracks
`autoGainControl`
    
A `ConstrainBoolean` object which specifies whether automatic gain control is preferred and/or required.
`channelCount`
    
A `ConstrainULong` specifying the channel count or range of channel counts which are acceptable and/or required.
`echoCancellation`
    
A `ConstrainBoolean` object specifying whether or not echo cancellation is preferred and/or required.
`latency`
    
A `ConstrainDouble` specifying the latency or range of latencies which are acceptable and/or required.
`noiseSuppression`
    
A `ConstrainBoolean` which specifies whether noise suppression is preferred and/or required.
`sampleRate`
    
A `ConstrainULong` specifying the sample rate or range of sample rates which are acceptable and/or required.
`sampleSize`
    
A `ConstrainULong` specifying the sample size or range of sample sizes which are acceptable and/or required.
`volume` Deprecated Non-standard
    
A `ConstrainDouble` specifying the volume or range of volumes which are acceptable and/or required.
### Instance properties of image tracks
whiteBalanceMode
    
A `String` specifying one of `"none"`, `"manual"`, `"single-shot"`, or `"continuous"`.
exposureMode
    
A `String` specifying one of `"none"`, `"manual"`, `"single-shot"`, or `"continuous"`.
focusMode
    
A `String` specifying one of `"none"`, `"manual"`, `"single-shot"`, or `"continuous"`.
pointsOfInterest
    
The pixel coordinates on the sensor of one or more points of interest. This is either an object in the form { x:value, y:value } or an array of such objects, where value is a double-precision integer.
exposureCompensation
    
A `ConstrainDouble` (a double-precision integer) specifying f-stop adjustment by up to ±3.
colorTemperature
    
A `ConstrainDouble` (a double-precision integer) specifying a desired color temperature in degrees kelvin.
iso
    
A `ConstrainDouble` (a double-precision integer) specifying a desired iso setting.
brightness
    
A `ConstrainDouble` (a double-precision integer) specifying a desired brightness setting.
contrast
    
A `ConstrainDouble` (a double-precision integer) specifying the degree of difference between light and dark.
saturation
    
A `ConstrainDouble` (a double-precision integer) specifying the degree of color intensity.
sharpness
    
A `ConstrainDouble` (a double-precision integer) specifying the intensity of edges.
focusDistance
    
A `ConstrainDouble` (a double-precision integer) specifying distance to a focused object.
zoom
    
A `ConstrainDouble` (a double-precision integer) specifying the desired focal length.
torch
    
A boolean value defining whether the fill light is continuously connected, meaning it stays on as long as the track is active.
### Instance properties of video tracks
`aspectRatio`
    
A `ConstrainDouble` specifying the video aspect ratio or range of aspect ratios which are acceptable and/or required.
`facingMode`
    
A `ConstrainDOMString` object specifying a facing or an array of facings which are acceptable and/or required.
`frameRate`
    
A `ConstrainDouble` specifying the frame rate or range of frame rates which are acceptable and/or required.
`height`
    
A `ConstrainULong` specifying the video height or range of heights which are acceptable and/or required.
`width`
    
A `ConstrainULong` specifying the video width or range of widths which are acceptable and/or required.
resizeMode
    
A `ConstrainDOMString` object specifying a mode or an array of modes the UA can use to derive the resolution of a video track. Allowed values are `none` and `crop-and-scale`. `none` means that the user agent uses the resolution provided by the camera, its driver or the OS. `crop-and-scale` means that the user agent can use cropping and downscaling on the camera output in order to satisfy other constraints that affect the resolution.
### Instance properties of shared screen tracks
These constraints apply to the `video` property of the object passed into `getDisplayMedia()` to obtain a stream for screen sharing.
`displaySurface`
    
A `ConstrainDOMString` which specifies the types of display surface that may be selected by the user. This may be a single one of the following strings, or a list of them to allow multiple source surfaces:
`browser`
    
The stream contains the contents of a single browser tab selected by the user.
`monitor`
    
The stream's video track contains the entire contents of one or more of the user's screens.
`window`
    
The stream contains a single window selected by the user for sharing.
`logicalSurface`
    
A `ConstrainBoolean` value which may contain a single Boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas. These may include backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their windows.
`suppressLocalAudioPlayback` Experimental
    
A `ConstrainBoolean` value describing the requested or mandatory constraints placed upon the value of the `suppressLocalAudioPlayback` constrainable property. This property controls whether the audio playing in a tab will continue to be played out of a user's local speakers when the tab is captured.
  * Media Capture and Streams API
  * Capabilities, constraints, and settings
  * Screen Capture API
  * Using the Screen Capture API
  * `MediaDevices.getUserMedia()`
  * `MediaStreamTrack.getConstraints()`
  * `MediaStreamTrack.applyConstraints()`
  * `MediaDevices.getSupportedConstraints()`
  * `MediaTrackSupportedConstraints`
  * `MediaStreamTrack.getSettings()`


# RTCVideoSourceStats
The `RTCVideoSourceStats` dictionary of the WebRTC API provides statistics information about a video track (`MediaStreamTrack`) that is attached to one or more senders (`RTCRtpSender`).
These statistics can be obtained by iterating the `RTCStatsReport` returned by `RTCRtpSender.getStats()` or `RTCPeerConnection.getStats()` until you find a report with the `type` of `media-source` and a `kind` of `video`.
Note: For video information about remotely sourced tracks (that are being received), see `RTCInboundRtpStreamStats`.
## Instance properties
`frames` Optional
    
A positive number that indicates the total number of frames originating from this video source.
`framesPerSecond` Optional
    
A positive number that represents the number of frames originating from this video source in the last second. This property is not defined on this stats object for the first second of its existence.
`height` Optional
    
A number that represents the height, in pixels, of the last frame originating from this source. This property is not defined on this stats object until after the first frame has been produced.
`width` Optional
    
A number that represents the width, in pixels, of the most recent frame originating from this source. This property is not defined on this stats object until after the first frame has been produced.
### Common media-source properties
The following properties are present in both `RTCVideoSourceStats` and `RTCAudioSourceStats`: 
`trackIdentifier`
    
A string that contains the `id` value of the `MediaStreamTrack` associated with the video source.
`kind`
    
A string indicating whether this object represents stats for a video source or a media source. For an `RTCVideoSourceStats` this will always be `video`.
### Common instance properties
The following properties are common to all statistics objects. 
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"media-source"`, indicating that the object is an instance of either `RTCAudioSourceStats` or `RTCVideoSourceStats`.
## Description
The interface provides statistics about a video media source attached to one or more senders. The information includes a identifier for the associated `MediaStreamTrack`, along with the height and width of the last frame sent from the source, the number of frames sent from the source, and the frame rate.
## Examples
This example shows how you might iterate the stats object returned from `RTCRtpSender.getStats()` to get the video-specific media-source stats.
    
    // where sender is an RTCRtpSender
    const stats = await sender.getStats();
    let videoSourceStats = null;
    
    stats.forEach((report) => {
      if (report.type === "media-source" && report.kind==="video") {
        videoSourceStats = report;
        break;
      }
    });
    
    // videoSourceStats will be null if the report did not include video source stats
    const frames = videoSourceStats?.frames;
    const fps = videoSourceStats?.framesPerSecond;
    const width = videoSourceStats?.width;
    const height = videoSourceStats?.height;
    
# DelayNode
The `DelayNode` interface represents a delay-line; an `AudioNode` audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.
A `DelayNode` always has exactly one input and one output, both with the same amount of channels.
When creating a graph that has a cycle, it is mandatory to have at least one `DelayNode` in the cycle, or the nodes taking part in the cycle will be muted.
EventTarget  AudioNode  DelayNode 
Number of inputs `1`  
Number of outputs `1`  
Channel count mode `"max"`  
Channel count `2` (not used in the default count mode)  
Channel interpretation `"speakers"`  
## Constructor
`DelayNode()`
    
Creates a new instance of an DelayNode object instance. As an alternative, you can use the `BaseAudioContext.createDelay()` factory method; see Creating an AudioNode.
## Instance properties
Inherits properties from its parent, `AudioNode`.
`DelayNode.delayTime` Read only
    
An a-rate `AudioParam` representing the amount of delay to apply, specified in seconds.
## Instance methods
No specific methods; inherits methods from its parent, `AudioNode`.
## Example
See `BaseAudioContext.createDelay()` for example code.
  * Using the Web Audio API


# HTMLBodyElement
The `HTMLBodyElement` interface provides special properties (beyond those inherited from the regular `HTMLElement` interface) for manipulating `<body>` elements.
EventTarget  Node  Element  HTMLElement  HTMLBodyElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLBodyElement.aLink` Deprecated
    
A string that represents the color of active hyperlinks.
`HTMLBodyElement.background` Deprecated
    
A string that represents the description of the location of the background image resource. Note that this is not an URI, though some older version of some browsers do expect it.
`HTMLBodyElement.bgColor` Deprecated
    
A string that represents the background color for the document.
`HTMLBodyElement.link` Deprecated
    
A string that represents the color of unvisited links.
`HTMLBodyElement.text` Deprecated
    
A string that represents the foreground color of text.
`HTMLBodyElement.vLink` Deprecated
    
A string that represents the color of visited links.
## Instance methods
No specific methods; inherits methods from its parent, `HTMLElement`.
## Event handlers
The `HTMLElement` events are inherited.
The following `Window` `onXYZ` event handler properties are also available as aliases targeting the `window` object. However, it is advised to listen to them on the `window` object directly rather than on `HTMLBodyElement`.
Note: Using `addEventListener()` on `HTMLBodyElement` will not work for the `onXYZ` event handlers listed below. Listen to the events on the `window` object instead.
`HTMLBodyElement.onafterprint`
    
Fired after the associated document has started printing or the print preview has been closed.
`HTMLBodyElement.onbeforeprint`
    
Fired when the associated document is about to be printed or previewed for printing.
`HTMLBodyElement.onbeforeunload`
    
Fired when the window, the document and its resources are about to be unloaded.
`HTMLBodyElement.onblur`
    
Fired when the window loses focus.
`HTMLBodyElement.onerror`
    
Fired when an error occurs and bubbles up to the window.
`HTMLBodyElement.onfocus`
    
Fired when the window gains focus.
`HTMLBodyElement.ongamepadconnected`
    
Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.
`HTMLBodyElement.ongamepaddisconnected`
    
Fired when the browser detects that a gamepad has been disconnected.
`HTMLBodyElement.onhashchange`
    
Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the `#` symbol).
`HTMLBodyElement.onlanguagechange`
    
Fired when the user's preferred language changes.
`HTMLBodyElement.onload`
    
Fired when the document has finished loading.
`HTMLBodyElement.onmessage`
    
Fired when the window receives a message, for example from a call to `Window.postMessage()` from another browsing context.
`HTMLBodyElement.onmessageerror`
    
Fired when the window receives a message that can't be deserialized.
`HTMLBodyElement.onoffline`
    
Fired when the browser has lost access to the network and the value of `Navigator.onLine` switches to `false`.
`HTMLBodyElement.ononline`
    
Fired when the browser has gained access to the network and the value of `Navigator.onLine` switches to `true`.
`HTMLBodyElement.onpagehide`
    
Fired when the browser hides the current page in the process of presenting a different page from the session's history.
`HTMLBodyElement.onpageshow`
    
Fired when the browser displays the window's document due to navigation.
`HTMLBodyElement.onpopstate`
    
Fired when the active history entry changes while the user navigates the session history.
`HTMLBodyElement.onrejectionhandled`
    
Fired whenever a JavaScript `Promise` is rejected and the rejection has been handled.
`HTMLBodyElement.onresize`
    
Fired when the document view has been resized.
`HTMLBodyElement.onscroll`
    
Fired when the document view or an element has been scrolled.
`HTMLBodyElement.onstorage`
    
Fired when a storage area (`localStorage`) has been modified in the context of another document.
`HTMLBodyElement.onunhandledrejection`
    
Fired whenever a `Promise` is rejected but the rejection was not handled.
`HTMLBodyElement.onunload`
    
Fired when the document is being unloaded.
Note that while `onblur`, `onerror`, `onfocus`, `onload`, `onresize`, and `onscroll` are available on any element, their meanings on the `<body>` element are not the same as on other elements. They listen for events on the `window` object instead.
  * HTML element implementing this interface: `<body>`


# SpeechSynthesisUtterance
The `SpeechSynthesisUtterance` interface of the Web Speech API represents a speech request. It contains the content the speech service should read and information about how to read it (e.g., language, pitch and volume.)
EventTarget  SpeechSynthesisUtterance 
## Constructor
`SpeechSynthesisUtterance()`
    
Returns a new `SpeechSynthesisUtterance` object instance.
## Instance properties
`SpeechSynthesisUtterance` also inherits properties from its parent interface, `EventTarget`.
`SpeechSynthesisUtterance.lang`
    
Gets and sets the language of the utterance.
`SpeechSynthesisUtterance.pitch`
    
Gets and sets the pitch at which the utterance will be spoken at.
`SpeechSynthesisUtterance.rate`
    
Gets and sets the speed at which the utterance will be spoken at.
`SpeechSynthesisUtterance.text`
    
Gets and sets the text that will be synthesized when the utterance is spoken.
`SpeechSynthesisUtterance.voice`
    
Gets and sets the voice that will be used to speak the utterance.
`SpeechSynthesisUtterance.volume`
    
Gets and sets the volume that the utterance will be spoken at.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`boundary`
    
Fired when the spoken utterance reaches a word or sentence boundary. Also available via the `onboundary` property.
`end`
    
Fired when the utterance has finished being spoken. Also available via the `onend` property.
`error`
    
Fired when an error occurs that prevents the utterance from being successfully spoken. Also available via the `onerror` property
`mark`
    
Fired when the spoken utterance reaches a named SSML "mark" tag. Also available via the `onmark` property.
`pause`
    
Fired when the utterance is paused part way through. Also available via the `onpause` property.
`resume`
    
Fired when a paused utterance is resumed. Also available via the `onresume` property.
`start`
    
Fired when the utterance has begun to be spoken. Also available via the `onstart` property.
## Examples
In our basic Speech synthesizer demo, we first grab a reference to the SpeechSynthesis controller using `window.speechSynthesis`. After defining some necessary variables, we retrieve a list of the voices available using `SpeechSynthesis.getVoices()` and populate a select menu with them so the user can choose what voice they want.
Inside the `inputForm.onsubmit` handler, we stop the form submitting with `preventDefault()`, use the `constructor` to create a new utterance instance containing the text from the text `<input>`, set the utterance's `voice` to the voice selected in the `<select>` element, and start the utterance speaking via the `SpeechSynthesis.speak()` method.
    
    const synth = window.speechSynthesis;
    
    const inputForm = document.querySelector("form");
    const inputTxt = document.querySelector("input");
    const voiceSelect = document.querySelector("select");
    
    let voices;
    
    function loadVoices() {
      voices = synth.getVoices();
      for (const [i, voice] of voices.entries()) {
        const option = document.createElement("option");
        option.textContent = `${voice.name} (${voice.lang})`;
        option.value = i;
        voiceSelect.appendChild(option);
      }
    }
    
    // in Google Chrome the voices are not ready on page load
    if ("onvoiceschanged" in synth) {
      synth.onvoiceschanged = loadVoices;
    } else {
      loadVoices();
    }
    
    inputForm.onsubmit = (event) => {
      event.preventDefault();
    
      const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
      utterThis.voice = voices[voiceSelect.value];
      synth.speak(utterThis);
      inputTxt.blur();
    };
    
  * Web Speech API


# PerformanceMark
Note: This feature is available in Web Workers.
`PerformanceMark` is an interface for `PerformanceEntry` objects with an `entryType` of `"mark"`.
Entries of this type are typically created by calling `performance.mark()` to add a named `DOMHighResTimeStamp` (the mark) to the browser's performance timeline. To create a performance mark that isn't added to the browser's performance timeline, use the constructor.
PerformanceEntry  PerformanceMark 
## Constructor
`PerformanceMark()`
    
Creates a new `PerformanceMark` object that isn't added to the browser's performance timeline.
## Instance properties
This interface extends the following `PerformanceEntry` properties by qualifying/constraining the properties as follows:
`PerformanceEntry.entryType` Read only
    
Returns `"mark"`.
`PerformanceEntry.name` Read only
    
Returns the name given to the mark when it was created via a call to `performance.mark()`.
`PerformanceEntry.startTime` Read only
    
Returns the `DOMHighResTimeStamp` when `performance.mark()` was called.
`PerformanceEntry.duration` Read only
    
Returns `0`. (A mark has no duration.)
This interface also supports the following properties:
`PerformanceMark.detail` Read only
    
Returns arbitrary metadata that has been included in the mark upon construction.
## Instance methods
This interface has no methods.
## Example
See the example in Using the User Timing API.
  * User Timing (Overview)
  * Using the User Timing API


# File
Note: This feature is available in Web Workers.
The `File` interface provides information about files and allows JavaScript in a web page to access their content.
`File` objects are generally retrieved from a `FileList` object returned as a result of a user selecting files using the `<input>` element, or from a drag and drop operation's `DataTransfer` object.
A `File` object is a specific kind of `Blob`, and can be used in any context that a Blob can. In particular, the following APIs accept both `Blob`s and `File` objects:
  * `FileReader`
  * `URL.createObjectURL()`
  * `Window.createImageBitmap()` and `WorkerGlobalScope.createImageBitmap()`
  * the `body` option to `fetch()`
  * `XMLHttpRequest.send()`


See Using files from web applications for more information and examples.
Blob  File 
## Constructor
`File()`
    
Returns a newly constructed `File`.
## Instance properties
The `File` interface also inherits properties from the `Blob` interface.
`File.lastModified` Read only
    
Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).
`File.lastModifiedDate` Deprecated Read only Non-standard
    
Returns the last modified `Date` of the file referenced by the `File` object.
`File.name` Read only
    
Returns the name of the file referenced by the `File` object.
`File.webkitRelativePath` Read only
    
Returns the path the URL of the `File` is relative to.
## Instance methods
The `File` interface also inherits methods from the `Blob` interface.
  * Using files from web applications
  * `FileReader`


# UI Events
## Concepts and Usage
The UI Events API defines a system for handling user interactions such as mouse and keyboard input. This includes:
  * events that are fired on specific user actions such key presses or mouse clicks. Most of these events fire on the `Element` interface, but the events relating to loading and unloading resources fire on the `Window` interface.
  * event interfaces, which are passed into handlers for these events. These interfaces inherit from `Event` and provide extra information specific to the type of user interaction: for example, the `KeyboardEvent` is passed into a `keydown` event handler and provides information about the key that was pressed.


## Interfaces
`CompositionEvent`
    
Passed into handlers for composition events. Composition events enable a user to enter characters that might not be available on the physical keyboard.
`FocusEvent`
    
Passed into handlers for focus events, which are associated with elements receiving or losing focus.
`InputEvent`
    
Passed into handlers for input events, which are associated with the user entering some input; for example, using an `<input>` element.
`KeyboardEvent`
    
Passed into handlers for keyboard up/down events.
`MouseEvent`
    
Passed into event handlers for mouse events, including mouse move, mousing over and out, and mouse button up or down. Note that `auxclick`, `click`, and `dblclick` events are passed `PointerEvent` objects.
`MouseScrollEvent` Deprecated
    
Deprecated, Firefox-only, non-standard interface for scroll events. Use `WheelEvent` instead.
`MutationEvent` Deprecated
    
Passed into mutation event handlers, which were designed to allow notifications of changes to the DOM. Now deprecated: use `MutationObserver` instead.
`UIEvent`
    
A base from which other UI events inherit, and also the event interface passed into some events such as `load` and `unload`.
`WheelEvent`
    
Passed into the handler for the `wheel` event, which fires when the user rotates a mouse wheel or similar user interface component such as a touchpad.
## Events
`abort`
    
Fired when loading a resource has been aborted (for example, because the user canceled it).
`auxclick`
    
Fired when the user clicks the non-primary pointer button.
`beforeinput`
    
Fired just before the DOM is about to be updated with some user input.
`blur`
    
Fired when an element has lost focus.
`click`
    
Fired when the user clicks the primary pointer button.
`compositionend`
    
Fired when a text composition system (such as a speech-to-text processor) has finished its session; for example, because the user has closed it.
`compositionstart`
    
Fired when the user has started a new session with a text composition system.
`compositionupdate`
    
Fired when a text composition system updates its text with a new character, reflected in an update to the `data` property of the `CompositionEvent`.
`contextmenu`
    
Fired just before a context menu is invoked.
`dblclick`
    
Fired when the user double-clicks the primary pointer button.
`error`
    
Fired when a resource fails to load or can't be processed (for example, if an image is invalid or a script has an error).
`focus`
    
Fired when an element has received focus.
`focusin`
    
Fired when an element is just about to receive focus.
`focusout`
    
Fired when an element is just about to lose focus.
`input`
    
Fired just after the DOM has been updated with some user input (for example, some text input).
`keydown`
    
Fired when the user has pressed a key.
`keypress` Deprecated
    
Fired when the user has pressed a key, only if the key produces a character value. Use `keydown` instead.
`keyup`
    
Fired when the user has released a key.
`load`
    
Fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
`mousedown`
    
Fired when the user presses a button on a mouse or other pointing device, while the pointer is over the element.
`mouseenter`
    
Fired when a mouse or other pointing device is moved inside the boundary of the element or one of its descendants.
`mouseleave`
    
Fired when a mouse or other pointing device is moved outside the boundary of the element and all of its descendants.
`mousemove`
    
Fired when a mouse or other pointing device is moved while over an element.
`mouseout`
    
Fired when a mouse or other pointing device is moved outside the boundary of the element.
`mouseover`
    
Fired when a mouse or other pointing device is moved over an element.
`mouseup`
    
Fired when the user releases a button on a mouse or other pointing device, while the pointer is over the element.
`unload`
    
Fired when the document or a child resource are being unloaded.
`wheel`
    
Fired when the user rotates a mouse wheel or similar user interface component such as a touchpad.
## Examples
>
### Mouse events
This example logs mouse events along with the X and Y coordinates at which the event was generated. Try moving the mouse into the yellow and red squares, and clicking or double-clicking.
#### HTML
    
    <div id="outer">
      <div id="inner"></div>
    </div>
    
    <div id="log">
      <pre id="contents"></pre>
      <button id="clear">Clear log</button>
    </div>
    
#### CSS
    
    body {
      display: flex;
      gap: 1rem;
    }
    
    #outer {
      height: 200px;
      width: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: yellow;
    }
    
    #inner {
      height: 100px;
      width: 100px;
      background-color: red;
    }
    
    #contents {
      height: 150px;
      width: 250px;
      border: 1px solid black;
      padding: 0.5rem;
      overflow: scroll;
    }
    
#### JavaScript
    
    const outer = document.querySelector("#outer");
    const inner = document.querySelector("#inner");
    const contents = document.querySelector("#contents");
    const clear = document.querySelector("#clear");
    let lines = 0;
    
    outer.addEventListener("click", (event) => {
      log(event);
    });
    
    outer.addEventListener("dblclick", (event) => {
      log(event);
    });
    
    outer.addEventListener("mouseover", (event) => {
      log(event);
    });
    
    outer.addEventListener("mouseout", (event) => {
      log(event);
    });
    
    outer.addEventListener("mouseenter", (event) => {
      log(event);
    });
    
    outer.addEventListener("mouseleave", (event) => {
      log(event);
    });
    
    function log(event) {
      const prefix = `${String(lines++).padStart(3, "0")}: `;
      const line = `${event.type}(${event.clientX}, ${event.clientY})`;
      contents.textContent = `${contents.textContent}${prefix}${line}\n`;
      contents.scrollTop = contents.scrollHeight;
    }
    
    clear.addEventListener("click", () => {
      contents.textContent = "";
      lines = 0;
    });
    
#### Result
### Keyboard and input events
This example logs `keydown`, `beforeinput` and, `input` events. Try typing into the text area. Note that keys like `Shift` produce `keydown` events but not `input` events.
#### HTML
    
    <textarea id="story" rows="5" cols="33"></textarea>
    
    <div id="log">
      <pre id="contents"></pre>
      <button id="clear">Clear log</button>
    </div>
    
#### CSS
    
    body {
      display: flex;
      gap: 1rem;
    }
    
    #story {
      padding: 0.5rem;
    }
    
    #contents {
      height: 150px;
      width: 250px;
      border: 1px solid black;
      padding: 0.5rem;
      overflow: scroll;
    }
    
#### JavaScript
    
    const story = document.querySelector("#story");
    const contents = document.querySelector("#contents");
    const clear = document.querySelector("#clear");
    let lines = 0;
    
    story.addEventListener("keydown", (event) => {
      log(`${event.type}(${event.key})`);
    });
    
    story.addEventListener("beforeinput", (event) => {
      log(`${event.type}(${event.data})`);
    });
    
    story.addEventListener("input", (event) => {
      log(`${event.type}(${event.data})`);
    });
    
    function log(line) {
      const prefix = `${String(lines++).padStart(3, "0")}: `;
      contents.textContent = `${contents.textContent}${prefix}${line}\n`;
      contents.scrollTop = contents.scrollHeight;
    }
    
    clear.addEventListener("click", () => {
      contents.textContent = "";
      lines = 0;
    });
    
#### Result
  * Pointer Events API
  * Touch Events


# Credential
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Credential` interface of the Credential Management API provides information about an entity (usually a user) normally as a prerequisite to a trust decision.
`Credential` objects may be of the following types:
  * `FederatedCredential`
  * `IdentityCredential`
  * `PasswordCredential`
  * `PublicKeyCredential`
  * `OTPCredential`


## Instance properties
`Credential.id` Read only
    
Returns a string containing the credential's identifier. This might be any one of a GUID, username, or email address.
`Credential.type` Read only
    
Returns a string containing the credential's type. Valid values are `password`, `federated`, `public-key`, `identity` and `otp`. (For `PasswordCredential`, `FederatedCredential`, `PublicKeyCredential`, `IdentityCredential` and `OTPCredential`)
## Static methods
`Credential.isConditionalMediationAvailable()` Experimental
    
Returns a `Promise` which always resolves to `false`. Subclasses may override this value.
## Examples
    
    const pwdCredential = new PasswordCredential({
      id: "example-username", // Username/ID
      name: "Carina Anand", // Display name
      password: "correct horse battery staple", // Password
    });
    
    console.assert(pwdCredential.type === "password");
    
# RTCInboundRtpStreamStats
The `RTCInboundRtpStreamStats` dictionary of the WebRTC API is used to report statistics related to the receiving end of an RTP stream on the local end of the `RTCPeerConnection`.
The statistics can be obtained by iterating the `RTCStatsReport` returned by `RTCPeerConnection.getStats()` or `RTCRtpReceiver.getStats()` until you find a report with the `type` of `inbound-rtp`.
## Instance properties
`audioLevel`
    
A number that indicates the audio level of the received track. Undefined for video streams.
`bytesReceived`
    
A positive integer that indicates the total number of bytes that have been received so far for this media source.
`concealedSamples`
    
A positive integer that indicates the number of samples that had to be concealed because they were in packets that were lost or arrived too late to be played out. Undefined for video streams.
`concealmentEvents`
    
A positive integer that indicates the number of concealment events, where a single event is counted for all consecutive concealed samples following a non-concealed sample. Undefined for video streams.
`estimatedPlayoutTimestamp` Experimental
    
A `DOMHighResTimeStamp` that indicates the estimated playout time of this receiver's track.
`fecPacketsDiscarded`
    
A positive integer value that indicates the number of RTP Forward Error Correction (FEC) packets which have been received for this source, for which the error correction payload was discarded.
`fecPacketsReceived`
    
A positive integer value that indicates the total number of Forward Error Correction (FEC) packets received for this source.
`frameHeight`
    
A positive integer that indicates the height of the last decoded frame, in pixels. Undefined for audio streams and before the first frame is decoded.
`framesAssembledFromMultiplePackets` Experimental
    
A positive integer that indicates the total number of correctly decoded frames for this RTP stream that consist of more than one RTP packet. Undefined for audio streams.
`framesDecoded`
    
A long integer value that indicates the total number of frames of video which have been correctly decoded so far for this media source. This is the number of frames that would have been rendered if none were dropped. Undefined for audio streams.
`framesPerSecond`
    
A positive integer that indicates the number of frames decoded in the last second. Undefined for audio streams.
`framesReceived`
    
A positive integer that indicates the total number of complete frames received on this RTP stream. Undefined for audio streams.
`frameWidth`
    
A positive integer that indicates the width of the last decoded frame, in pixels. Undefined for audio streams and before the first frame is decoded.
`freezeCount` Experimental
    
A positive integer that indicates the total number of video freezes experienced by this receiver. Undefined for audio streams.
`headerBytesReceived`
    
A positive integer that indicates the total number of RTP header and padding bytes received for this SSRC, including retransmissions.
`insertedSamplesForDeceleration`
    
A positive integer that indicates the number of samples inserted to slow playout from the jitter buffer. Undefined for video streams.
`jitterBufferDelay`
    
A number that indicates the accumulated time that all audio samples and complete video frames have spent in the jitter buffer, in seconds.
`jitterBufferEmittedCount`
    
A positive integer indicating the total number of audio samples and/or video frames that have come out of the jitter buffer.
`jitterBufferMinimumDelay`
    
A number that indicates the minimum delay that might be achieved given only the network characteristics such as jitter and packet loss.
`jitterBufferTargetDelay`
    
A number that indicates the accumulated target jitter buffer delay.
`keyFramesDecoded`
    
A positive integer that indicates the total number of key frames successfully decoded for this RTP media stream. Undefined for audio streams.
`lastPacketReceivedTimestamp`
    
A `DOMHighResTimeStamp` that indicates the time at which the last packet was received for this source. The `timestamp` property, on the other hand, indicates the time at which the statistics object was generated.
`mid`
    
A string that uniquely identifies the pairing of source and destination of the transceiver's stream. This is the value of the corresponding `RTCRtpTransceiver.mid` unless that is null, in which case the statistic property is not present.
`packetsDiscarded`
    
A positive integer that indicates the total number of RTP packets discarded by the jitter buffer due to late or early-arrival.
`pauseCount` Experimental
    
A positive integer that indicates the number of video pauses experienced by this receiver. Undefined for audio streams.
`playoutId` Experimental
    
A string that identifies the corresponding `RTCAudioPlayoutStats` for an audio stream. Undefined for video streams.
`remoteId`
    
A string that identifies the `RTCRemoteOutboundRtpStreamStats` object that provides statistics for the remote peer for this same SSRC. This ID is stable across multiple calls to `getStats()`.
`removedSamplesForAcceleration`
    
A positive integer that indicates the number of samples removed from to speed up playout from the jitter buffer. Undefined for video streams.
`silentConcealedSamples`
    
A positive integer that indicates the number of silent concealed samples. Undefined for video streams.
`totalAssemblyTime` Experimental
    
A number that indicates the total time spent assembling successfully decoded video frames that were transported in multiple RTP packets, in seconds. Undefined for audio streams.
`totalAudioEnergy`
    
A number that represents the total audio energy of the received track over the lifetime of the stats object. Undefined for video streams.
`totalDecodeTime`
    
A number that indicates the total time spent decoding frames in this stream, in seconds. Undefined for audio streams.
`totalFreezesDuration` Experimental
    
A positive number that indicates the total time that the stream has spent frozen, in seconds. Undefined for audio streams.
`totalInterFrameDelay`
    
A positive number that indicates the total time spent between consecutively rendered frames, recorded just after a frame has been rendered. Undefined for audio streams.
`totalPausesDuration` Experimental
    
A positive number that indicates the total time that the stream has spent with paused video, in seconds. Undefined for audio streams.
`totalProcessingDelay`
    
A positive number that indicates the total time spent processing audio or video samples, in seconds.
`totalSamplesDuration`
    
A positive number that indicates the total duration of all samples that have been received, in seconds. Undefined for video streams.
`totalSamplesReceived`
    
A positive integer that indicates the total number of samples received on this stream. Undefined for video streams.
`totalSquaredInterFrameDelay`
    
A positive number that indicates the sum of the square of inter-frame delays between consecutively rendered frames, recorded just after a frame has been rendered. Undefined for audio streams.
`trackIdentifier`
    
A string that provides the `id` value of the `MediaStreamTrack` associated with the inbound stream.
### Local-only measurements
These properties are computed locally, and are only available to the device receiving the media stream. Their primary purpose is to examine the error resiliency of the connection, as they provide information about lost packets, lost frames, and how heavily compressed the data is.
`nackCount`
    
A number that indicates the number of times the receiver notified the sender that one or more RTP packets has been lost by sending a Negative ACKnowledgement (NACK, also called "Generic NACK") packet to the sender. This value is only available to the receiver.
`qpSum`
    
A positive integer that provides the sum of the QP values for every frame decoded by this RTP receiver to date on the video track described by this statistics object. Valid only for video streams.
### Statistics measured at the receiver of an RTP stream
These statistics are measured at the receiving end of an RTP stream, regardless of whether it's local or remote.
`packetsReceived`
    
The total number of RTP packets received for this synchronizing source (SSRC), including retransmissions.
`packetsLost`
    
The total number of RTP packets lost for this synchronizing source (SSRC). Note that this can be negative, as more packets may be received than the receiver expects.
`jitter`
    
Packet jitter for this synchronizing source (SSRC), measured in seconds.
### Common RTP stream statistics
`codecId`
    
A string that uniquely identifies the object which was inspected to produce the `RTCCodecStats` object associated with this RTP stream.
`kind`
    
A string that indicates whether the `MediaStreamTrack` associated with the stream is an audio or a video track.
`ssrc`
    
The 32-bit integer that identifies the source of the RTP packets this object provides. This value is generated per the RFC 3550 specification.
`transportId`
    
A string that uniquely identifies the object which was inspected to produce the `RTCTransportStats` object associated with this RTP stream.
### Common instance properties
The following properties are common to all WebRTC statistics objects.
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object that indicates the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"inbound-rtp"`, which indicates the type of statistics that the object contains.
  * `RTCStatsReport`


# KHR_parallel_shader_compile extension
The `KHR_parallel_shader_compile` extension is part of the WebGL API and enables a non-blocking poll operation, so that compile/link status availability (`COMPLETION_STATUS_KHR`) can be queried without potentially incurring stalls. In other words you can check the status of your shaders compiling without blocking the runtime.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
## Constants
`ext.COMPLETION_STATUS_KHR`
    
A GLenum.
## Examples
Enable the extension:
    
    const ext = gl.getExtension("KHR_parallel_shader_compile");
    
In general, best practice with or without the extension is:
    
    // Assuming lists of `shaders` and `programs`:
    for (const x of shaders) gl.compileShader(x); // Never check compile status unless subsequent linking fails.
    for (const x of programs) gl.linkProgram(x);
    
With the extension, apps would be able to poll whether programs have linked without janking, but these are likely to take the same total wall time to link:
    
    // Generator yielding a progress ratio [0.0, 1.0].
    // Without the extension, this will jank and only check one program per generation.
    function* linkingProgress(programs) {
      const ext = gl.getExtension("KHR_parallel_shader_compile");
      let todo = programs.slice();
      while (todo.length) {
        if (ext) {
          todo = todo.filter(
            (x) => !gl.getProgramParameter(x, ext.COMPLETION_STATUS_KHR),
          );
        } else {
          const x = todo.pop();
          gl.getProgramParameter(x, gl.LINK_STATUS);
        }
        if (!todo.length) return;
        yield 1.0 - todo.length / programs.length;
      }
    }
    
  * `WebGLRenderingContext.getExtension()`


# DOMStringMap
The `DOMStringMap` interface is used for the `HTMLElement.dataset` attribute, to represent data for custom attributes added to elements.
  * `HTMLElement.dataset`
  * Global attributes - `data-*`


# LaunchParams
The `LaunchParams` interface of the Launch Handler API is used when implementing custom launch navigation handling in a PWA. When `window.launchQueue.setConsumer()` is invoked to set up the launch navigation handling functionality, the callback function inside `setConsumer()` is passed a `LaunchParams` object instance.
Such custom navigation handling is initiated via `Window.launchQueue` when a PWA has been launched with a `launch_handler` `client_mode` value of `focus-existing`, `navigate-new`, or `navigate-existing`.
## Instance properties
`LaunchParams.files` Read only Experimental
    
Returns a read-only array of `FileSystemHandle` objects representing any files passed along with the launch navigation via the `POST` method.
`LaunchParams.targetURL` Read only Experimental
    
Returns the target URL of the launch.
## Examples
    
    if ("launchQueue" in window) {
      window.launchQueue.setConsumer((launchParams) => {
        if (launchParams.targetURL) {
          const params = new URL(launchParams.targetURL).searchParams;
    
          // Assuming a music player app that gets a track passed to it to be played
          const track = params.get("track");
          if (track) {
            audio.src = track;
            title.textContent = new URL(track).pathname.slice(1);
            audio.play();
          }
        }
      });
    }
    
  * Launch Handler API: Control how your app is launched
  * `Window.launchQueue`
  * Musicr 2.0 demo app


# View Transition API
The View Transition API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).
## Concepts and usage
View transitions are a popular design choice for reducing users' cognitive load, helping them stay in context, and reducing perceived loading latency as they move between states or views of an application.
However, creating view transitions on the web has historically been difficult:
  * Transitions between states in single-page apps (SPAs) tend to involve writing significant CSS and JavaScript to: 
    * Handle the loading and positioning of the old and new content.
    * Animate the old and new states to create the transition.
    * Stop accidental user interactions with the old content from causing problems.
    * Remove the old content once the transition is complete. Accessibility issues like loss of reading position, focus confusion, and strange live region announcement behavior can also result from having the new and old content both present in the DOM at once.
  * Cross-document view transitions (i.e., across navigations between different pages in MPAs) have historically been impossible.


The View Transition API provides an easy way of handling the required view changes and transition animations for both the above use cases.
Creating a view transition that uses the browser's default transition animations is very quick to do, and there are features that allow you to both customize the transition animation and manipulate the view transition itself (for example specify circumstances under which the animation is skipped), for both SPA and MPA view transitions.
See Using the View Transition API for more information.
## Interfaces
`ViewTransition`
    
Represents a view transition, and provides functionality to react to the transition reaching different states (e.g., ready to run the animation, or animation finished) or skip the transition altogether.
## Extensions to other interfaces
`Document.startViewTransition()`
    
Starts a new same-document (SPA) view transition and returns a `ViewTransition` object to represent it.
`PageRevealEvent`
    
The event object for the `pagereveal` event. During a cross-document navigation, it allows you to manipulate the related view transition (providing access to the relevant `ViewTransition` object) from the document being navigated to, if a view transition was triggered by the navigation.
`PageSwapEvent`
    
The event object for the `pageswap` event. During a cross-document navigation, it allows you to manipulate the related view transition (providing access to the relevant `ViewTransition` object) from the document being navigated from, if a view transition was triggered by the navigation. It also provides access to information on the navigation type and current and destination document history entries.
The `Window` `pagereveal` event
    
Fired when a document is first rendered, either when loading a fresh document from the network or activating a document (either from back/forward cache (bfcache) or prerender).
The `Window` `pageswap` event
    
Fired when a document is about to be unloaded due to a navigation.
## HTML additions
`<link rel="expect">`
    
Identifies the most critical content in the associated document for the user's initial view of the page. Document rendering will be blocked until the critical content has been parsed, ensuring a consistent first paint — and therefore, view transition — across all supporting browsers.
## CSS additions
>
### At-rules
`@view-transition`
    
In the case of a cross-document navigation, `@view-transition` is used to opt in the current and destination documents to undergo a view transition.
### Properties
`view-transition-name`
    
Specifies the view transition snapshot that selected elements will participate in, which enables an element to be animated separately from the rest of the page during a view transition.
`view-transition-class`
    
Provides an additional method of styling selected elements that have a `view-transition-name`.
### Pseudo-classes
`:active-view-transition`
    
Matches elements when a view transition is in progress.
`:active-view-transition-type()`
    
Matches elements when a view transition of a specific type is in progress.
### Pseudo-elements
`::view-transition`
    
The root of the view transitions overlay, which contains all view transitions and sits over the top of all other page content.
`::view-transition-group()`
    
The root of a single view transition.
`::view-transition-image-pair()`
    
The container for a view transition's old and new views — before and after the transition.
`::view-transition-old()`
    
A static snapshot of the old view, before the transition.
`::view-transition-new()`
    
A live representation of the new view, after the transition.
## Examples
  * Basic View Transitions SPA demo: A basic image gallery demo with view transitions, featuring separate animations between old and new images, and old and new captions.
  * Basic View Transitions MPA demo: A sample two-page site that demonstrates usage of cross-document (MPA) view transitions, providing a custom "swipe up" transition when the two pages are navigated between.
  * View transitions `match-element` demo: An SPA featuring animated list items, demonstrating the use of the `match-element` value of the `view-transition-name` property to animate individual elements.
  * HTTP 203 playlist: A video player demo app that features several different SPA view transitions, many of which are explained in Smooth transitions with the View Transition API.
  * Chrome DevRel view transitions demos: A series of View Transition API demos.

>
### api.Document.startViewTransition
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`View_Transition_API` 111 111 preview140 97 18 111 No 75 18 22.0 111 18  
`callbackOptions_parameter` 125 125 No 111 18.2 125 No 83 18.2 27.0 125 18.2  
`updateCallback_parameter` 111 111 preview140 97 18 111 No 75 18 22.0 111 18  
### css.at-rules.view-transition
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`View_Transition_API` 126 126 No 112 18.2 126 No 83 18.2 28.0 126 18.2  
  * Smooth transitions with the View Transition API on developer.chrome.com (2024)
  * View Transition API: Creating Smooth Page Transitions on stackdiary.com (2023)
  * View Transitions API: Single Page Apps Without a Framework on DebugBear (2024)


# MIDIInput
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MIDIInput` interface of the Web MIDI API receives messages from a MIDI input port.
EventTarget  MIDIPort  MIDIInput 
## Instance properties
This interface doesn't implement any specific properties, but inherits properties from `MIDIPort`.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from `MIDIPort`.
### Events
`midimessage`
    
Fired when the current port receives a MIDI message.
## Examples
In the following example the name of each `MIDIInput` is printed to the console. Then, `midimessage` events are listened for on all input ports. When a message is received the `MIDIMessageEvent.data` property is printed to the console.
    
    inputs.forEach((input) => {
      console.log(input.name); /* inherited property from MIDIPort */
      input.onmidimessage = (message) => {
        console.log(message.data);
      };
    });
    
# SVGAnimatedNumber
The `SVGAnimatedNumber` interface represents attributes of type <number> which can be animated.
## Instance properties
`baseVal`
    
An `SVGAnimatedNumber` representing the base value as a floating point value of the given attribute before applying any animations.
`animVal` Read only
    
If the given attribute or property is being animated, an `SVGAnimatedNumber` containing the current animated value of the attribute or property. If the given attribute or property is not currently being animated, an `SVGAnimatedNumber` containing the same value as `baseVal`.
## Instance methods
The `SVGAnimatedNumber` interface do not provide any specific methods.
# IDBIndex
Note: This feature is available in Web Workers.
`IDBIndex` interface of the IndexedDB API provides asynchronous access to an index in a database. An index is a kind of object store for looking up records in another object store, called the referenced object store. You use this interface to retrieve data.
You can retrieve records in an object store through the primary key or by using an index. An index lets you look up records in an object store using properties of the values in the object stores records other than the primary key
The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refers to the object store are automatically updated.
You can grab a set of keys within a range. To learn more, see `IDBKeyRange`.
## Instance properties
`IDBIndex.isAutoLocale` Read only Non-standard Deprecated
    
Returns a boolean value indicating whether the index had a `locale` value of `auto` specified upon its creation (see the `options` parameter to `IDBObjectStore.createIndex()`.)
`IDBIndex.locale` Read only Non-standard Deprecated
    
Returns the locale of the index (for example `en-US`, or `pl`) if it had a `locale` value specified upon its creation (see the `options` parameter to `IDBObjectStore.createIndex()`.)
`IDBIndex.name`
    
The name of this index.
`IDBIndex.objectStore` Read only
    
The name of the object store referenced by this index.
`IDBIndex.keyPath` Read only
    
The key path of this index. If null, this index is not auto-populated.
`IDBIndex.multiEntry` Read only
    
Affects how the index behaves when the result of evaluating the index's key path yields an array. If `true`, there is one record in the index for each item in an array of keys. If `false`, then there is one record for each key that is an array.
`IDBIndex.unique` Read only
    
If `true`, this index does not allow duplicate values for a key.
## Instance methods
Inherits from: EventTarget
`IDBIndex.count()`
    
Returns an `IDBRequest` object, and in a separate thread, returns the number of records within a key range.
`IDBIndex.get()`
    
Returns an `IDBRequest` object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given key or the first corresponding value, if `key` is an `IDBKeyRange`.
`IDBIndex.getKey()`
    
Returns an `IDBRequest` object, and, in a separate thread, finds either the given key or the primary key, if `key` is an `IDBKeyRange`.
`IDBIndex.getAll()`
    
Returns an `IDBRequest` object, in a separate thread, finds all matching values in the referenced object store that correspond to the given key or are in range, if `key` is an `IDBKeyRange`.
`IDBIndex.getAllKeys()`
    
Returns an `IDBRequest` object, in a separate thread, finds all matching keys in the referenced object store that correspond to the given key or are in range, if `key` is an `IDBKeyRange`.
`IDBIndex.openCursor()`
    
Returns an `IDBRequest` object, and, in a separate thread, creates a cursor over the specified key range.
`IDBIndex.openKeyCursor()`
    
Returns an `IDBRequest` object, and, in a separate thread, creates a cursor over the specified key range, as arranged by this index.
## Example
In the following example we open a transaction and an object store, then get the index `lName` from a simple contacts database. We then open a basic cursor on the index using `IDBIndex.openCursor` — this works the same as opening a cursor directly on an `ObjectStore` using `IDBObjectStore.openCursor` except that the returned records are sorted based on the index, not the primary key.
Finally, we iterate through each record, and insert the data into an HTML table. For a complete working example, see our IndexedDB-examples demo repo (View the example live.)
    
    function displayDataByIndex() {
      tableEntry.textContent = "";
      const transaction = db.transaction(["contactsList"], "readonly");
      const objectStore = transaction.objectStore("contactsList");
    
      const myIndex = objectStore.index("lName");
      myIndex.openCursor().onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
          const tableRow = document.createElement("tr");
          for (const cell of [
            cursor.value.id,
            cursor.value.lName,
            cursor.value.fName,
            cursor.value.jTitle,
            cursor.value.company,
            cursor.value.eMail,
            cursor.value.phone,
            cursor.value.age,
          ]) {
            const tableCell = document.createElement("td");
            tableCell.textContent = cell;
            tableRow.appendChild(tableCell);
          }
          tableEntry.appendChild(tableRow);
    
          cursor.continue();
        } else {
          console.log("Entries all displayed.");
        }
      };
    }
    
  * Using IndexedDB
  * Starting transactions: `IDBDatabase`
  * Using transactions: `IDBTransaction`
  * Setting a range of keys: `IDBKeyRange`
  * Retrieving and making changes to your data: `IDBObjectStore`
  * Using cursors: `IDBCursor`
  * Reference example: To-do Notifications (View the example live).


# Barcode Detection API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The Barcode Detection API detects linear and two-dimensional barcodes in images.
## Concepts and usage
Support for barcode recognition within web apps unlocks a variety of use cases through supported barcode formats. QR codes can be used for online payments, web navigation or establishing social media connections, Aztec codes can be used to scan boarding passes and shopping apps can use EAN or UPC barcodes to compare prices of physical items.
Detection is achieved through the `detect()` method, which takes an image object; it can be one of these objects: a `HTMLImageElement`, a `SVGImageElement`, a `HTMLVideoElement`, a `HTMLCanvasElement`, an `ImageBitmap`, an `OffscreenCanvas`, a `VideoFrame`, a `Blob`, or an `ImageData`. Optional parameters can be passed to the `BarcodeDetector` constructor to provide hints on which barcode formats to detect.
### Supported barcode formats
The Barcode Detection API supports the following barcode formats:
Format Description Image  
aztec A square two-dimensional matrix following iso24778 and with a square bullseye pattern at their center, thus resembling an Aztec pyramid. Does not require a surrounding blank zone.   
code_128 A linear (one-dimensional), bidirectionally-decodable, self-checking barcode following iso15417 and able to encode all 128 characters of ASCII (hence the naming).   
code_39 A linear (one-dimensional), self-checking barcode following iso16388. It is a discrete and variable-length barcode type.   
code_93 A linear, continuous symbology with a variable length following bc5. It offers a larger information density than Code 128 and the visually similar Code 39. Code 93 is used primarily by Canada Post to encode supplementary delivery information.   
codabar A linear barcode representing characters 0-9, A-D and symbols - . $ / +   
data_matrix An orientation-independent two-dimensional barcode composed of black and white modules arranged in either a square or rectangular pattern following iso16022.   
ean_13 A linear barcode based on the UPC-A standard and defined in iso15420.   
ean_8 A linear barcode defined in iso15420 and derived from EAN-13.  
itf A continuous, self-checking, bidirectionally decodable barcode. It will always encode 14 digits.   
pdf417 A continuous two-dimensional barcode symbology format with multiple rows and columns. It's bi-directionally decodable and uses the iso15438 standard.   
qr_code A two-dimensional barcode that uses the iso18004 standard. The information encoded can be text, URL or other data.   
upc_a One of the most common linear barcode types and is widely applied to retail in the United States. Defined in iso15420, it represents digits by strips of bars and spaces, each digit being associated to a unique pattern of 2 bars and 2 spaces, both of variable width. UPC-A can encode 12 digits that are uniquely assigned to each trade item, and it's technically a subset of EAN-13 (UPC-A codes are represented in EAN-13 with the first character set to 0).   
upc_e A variation of UPC-A defined in iso15420, compressing out unnecessary zeros for a more compact barcode.   
unknown This value is used by the platform to signify that it does not know or specify which barcode format is being detected or supported.   
You can check for formats supported by the user agent via the `getSupportedFormats()` method.
## Interfaces
`BarcodeDetector` Experimental
    
The `BarcodeDetector` interface of the Barcode Detection API allows detection of linear and two dimensional barcodes in images.
## Examples
>
### Creating A Detector
This example tests for browser compatibility and creates a new barcode detector object, with specified supported formats.
    
    // check compatibility
    if (!("BarcodeDetector" in globalThis)) {
      console.log("Barcode Detector is not supported by this browser.");
    } else {
      console.log("Barcode Detector supported!");
    
      // create new detector
      const barcodeDetector = new BarcodeDetector({
        formats: ["code_39", "codabar", "ean_13"],
      });
    }
    
### Getting Supported Formats
The following example calls the `getSupportedFormats()` method and logs the results to the console.
    
    // check supported types
    BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
      supportedFormats.forEach((format) => console.log(format));
    });
    
### Detect Barcodes
This example uses the `detect()` method to detect the barcodes within the given image. These are iterated over and the barcode data is logged to the console.
    
    barcodeDetector
      .detect(imageEl)
      .then((barcodes) => {
        barcodes.forEach((barcode) => console.log(barcode.rawValue));
      })
      .catch((err) => {
        console.log(err);
      });
    
  * barcodefaq.com: A website with information about different barcodes and examples of the different types.
  * The Shape Detection API: a picture is worth a thousand words, faces, and barcodes


# Document Picture-in-Picture API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content — for example a video with custom controls or a set of streams showing the participants of a video conference call. It extends the earlier Picture-in-Picture API for `<video>`, which specifically enables an HTML `<video>` element to be put into an always-on-top window.
## Concepts and usage
It is often helpful to have a different window available to a web app in addition to the main window in which the app is running. You might want to browse other windows while keeping specific app content in view, or you might want to give that content its own space while keeping the main app window freed up to display other content. You could handle this by just opening a regular new browser window, but this has two major issues:
  1. You have to handle sharing of state information between the two windows.
  2. The additional app window doesn't always stay on top, and can therefore get hidden by other windows.


To solve these problems, web browsers have introduced APIs allowing apps to spawn an always-on-top window that is part of the same session. The first recognized use case was keeping video content playing in a separate window so that the user can continue to consume it while looking at other content. This is handled using the Picture-in-Picture API for `<video>`, which is directly used on a `<video>` element to place it into the separate window.
However, this API has been found to be somewhat limiting — you can only put a single `<video>` element into the always-on-top window, with minimal browser-generated controls. To provide more flexibility, the Document Picture-in-Picture API has been introduced. This allows any content to be placed in the always-on-top window for a wide range of use cases, including:
  * An always-on-top custom video player showing one or multiple videos with custom controls and styling.
  * A video conferencing system that allows the user to always see the other participant's streams, plus controls for presenting content, muting, ending calls, etc.
  * Always-visible productivity tools such as timers, notes, to-do lists, messenger tools, etc.
  * A separate window in which to keep additional content while the main app window is kept free of clutter. For example, you might have a action or roleplaying game running where you want to show the game controls, instructions, or lore in an additional window, keeping the main window free for displaying the game locations and map.


### How does it work?
A new `DocumentPictureInPicture` object instance representing the always-on-top Picture-in-Picture window for the current document context is available via `Window.documentPictureInPicture`. The Picture-in-Picture window is opened by calling the `DocumentPictureInPicture.requestWindow()` method, which returns a `Promise` that fulfills with the window's own `Window` object.
The Picture-in-Picture window is similar to a blank same-origin window opened via `Window.open()`, with some differences:
  * The Picture-in-Picture window floats on top of other windows.
  * The Picture-in-Picture window never outlives the opening window.
  * The Picture-in-Picture window cannot be navigated.
  * The Picture-in-Picture window position cannot be set by the website.
  * The Picture-in-Picture window is limited to one per browser tab at a time, with the user agent potentially further restricting the global number of Picture-in-Picture windows open.


Apart from that, you can manipulate the Picture-in-Picture window's `Window` instance however you want, for example appending the content you want to display there onto its DOM, and copying stylesheets to it so that the appended content will be styled the same way as when it is in the main window. You can also close the Picture-in-Picture window (by clicking the browser-provided control, or by running `Window.close()` on it), and then react to it closing using the standard `pagehide`. When it closes, you'll want to put the content it was showing back into the main app window.
See Using the Document Picture-in-Picture API for a detailed usage guide.
## Interfaces
`DocumentPictureInPicture`
    
The entry point for creating and handling document Picture-in-Picture windows.
`DocumentPictureInPictureEvent`
    
Event object for the `enter` event, which fires when the Picture-in-Picture window is opened.
## Extensions to other interfaces
`Window.documentPictureInPicture`
    
Returns a reference to the `DocumentPictureInPicture` object for the current document context.
## CSS additions
`display-mode`, the `picture-in-picture` value
    
A CSS media feature value that allows developers to apply CSS to a document based on whether it is being displayed in Picture-in-Picture mode.
## Examples
See Document Picture-in-Picture API Example for a full working demo (see the full source code also).
# Fullscreen API
The Fullscreen API adds methods to present a specific `Element` (and its descendants) in fullscreen mode, and to exit fullscreen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until fullscreen mode is shut off.
See the article Guide to the Fullscreen API for details on how to use the API.
## Interfaces
The Fullscreen API has no interfaces of its own. Instead, it augments several other interfaces to add the methods, properties, and event handlers needed to provide fullscreen functionality. These are listed in the following sections.
## Instance methods
The Fullscreen API adds methods to the `Document` and `Element` interfaces to allow turning off and on fullscreen mode.
### Instance methods on the Document interface
`Document.exitFullscreen()`
    
Requests that the user agent switch from fullscreen mode back to windowed mode. Returns a `Promise` which is resolved once fullscreen mode has been completely shut off.
### Instance methods on the Element interface
`Element.requestFullscreen()`
    
Asks the user agent to place the specified element (and, by extension, its descendants) into fullscreen mode, removing all of the browser's UI elements as well as all other applications from the screen. Returns a `Promise` which is resolved once fullscreen mode has been activated.
## Instance properties
`Document.fullscreenElement` / `ShadowRoot.fullscreenElement`
    
The `fullscreenElement` property tells you the `Element` that's currently being displayed in fullscreen mode on the DOM (or shadow DOM). If this is `null`, the document (or shadow DOM) is not in fullscreen mode.
`Document.fullscreenEnabled`
    
The `fullscreenEnabled` property tells you whether or not it is possible to engage fullscreen mode. This is `false` if fullscreen mode is not available for any reason (such as the `"fullscreen"` feature not being allowed, or fullscreen mode not being supported).
### Obsolete properties
`Document.fullscreen` Deprecated
    
A Boolean value which is `true` if the document has an element currently being displayed in fullscreen mode; otherwise, this returns `false`.
Note: Use the `fullscreenElement` property on the `Document` or `ShadowRoot` instead; if it's not `null`, then it's an `Element` currently being displayed in fullscreen mode.
## Events
`fullscreenchange`
    
Sent to an `Element` when it transitions into or out of fullscreen mode.
`fullscreenerror`
    
Sent to an `Element` if an error occurs while attempting to switch it into or out of fullscreen mode.
## Controlling access
The availability of fullscreen mode can be controlled using a Permissions Policy. The fullscreen mode feature is identified by the string `"fullscreen"`, with a default allowlist value of `"self"`, meaning that fullscreen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document.
## Usage notes
Users can choose to exit fullscreen mode by pressing the `ESC` (or `F11`) key, rather than waiting for the site or app to programmatically do so. Make sure you provide, somewhere in your user interface, appropriate user interface elements that inform the user that this option is available to them.
Note: Navigating to another page, changing tabs, or switching to another application using any application switcher (or `Alt`-`Tab`) will likewise exit fullscreen mode.
## Examples
>
### Simple fullscreen usage
In this example, a video is presented in a web page. Pressing the `Enter` key lets the user toggle between windowed and fullscreen presentation of the video.
View Live Example
#### Watching for the Enter key
When the page is loaded, this code is run to set up an event listener to watch for the `Enter` key.
    
    const video = document.getElementById("video");
    
    // On pressing ENTER call toggleFullScreen method
    document.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        toggleFullScreen(video);
      }
    });
    
#### Toggling fullscreen mode
This code is called by the event handler above when the user hits the `Enter` key.
    
    function toggleFullScreen(video) {
      if (!document.fullscreenElement) {
        // If the document is not in full screen mode
        // make the video full screen
        video.requestFullscreen();
      } else {
        // Otherwise exit the full screen
        document.exitFullscreen?.();
      }
    }
    
This starts by looking at the value of the `document`'s `fullscreenElement` attribute. If the value is `null`, the document is currently in windowed mode, so we need to switch to fullscreen mode; otherwise, it's the element that's currently in fullscreen mode. Switching to fullscreen mode is done by calling `Element.requestFullscreen()` on the `<video>` element.
If fullscreen mode is already active (`fullscreenElement` is not `null`), we call `exitFullscreen()` on the `document` to shut off fullscreen mode.
>
### api.Document.fullscreenElement
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Fullscreen_API` 7120 791212–14 649 581512.1–15 16.46 7125 649 501412.1–14 16.4["Only available on iPad, not on iPhone.", "Shows an overlay button which can not be disabled. Swiping down exits fullscreen mode, making it unsuitable for some use cases like games."]12Only available on iPad, not on iPhone. 10.01.5 714.4 16.4["Only available on iPad, not on iPhone.", "Shows an overlay button which can not be disabled. Swiping down exits fullscreen mode, making it unsuitable for some use cases like games."]12Only available on iPad, not on iPhone.  
### api.Document.fullscreenEnabled
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Fullscreen_API` 7120 12 6410 581512.1–15 16.46 7125 6410 501412.1–14 16.4["Only available on iPad, not on iPhone.", "Shows an overlay button which can not be disabled. Swiping down exits fullscreen mode, making it unsuitable for some use cases like games."]12Only available on iPad, not on iPhone. 10.01.5 714.4 No  
### api.Document.exitFullscreen
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Fullscreen_API` 7115 791212–14 649 581512.1–15 16.45.1 7118 649 501412.1–14 16.4["Only available on iPad, not on iPhone.", "Shows an overlay button which can not be disabled. Swiping down exits fullscreen mode, making it unsuitable for some use cases like games."]12Only available on iPad, not on iPhone. 10.01.0 714.4 No  
`returns_promise` 69 79 64 56 16.4 69 64 48 16.4 10.0 69 No  
### api.Element.requestFullscreen
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Fullscreen_API` 7115 791212–14 649Before Firefox 44, Firefox incorrectly allowed elements inside a `<frame>` or `<object>` element to request, and to be granted, fullscreen. In Firefox 44 and onwards this has been fixed: only elements in the top-level document or in an `<iframe>` element with the `allowfullscreen` attribute can be displayed fullscreen. 581512.1–15 16.45.1 7118 649Before Firefox for Android 44, Firefox for Android incorrectly allowed elements inside a `<frame>` or `<object>` element to request, and to be granted, fullscreen. In Firefox for Android 44 and onwards this has been fixed: only elements in the top-level document or in an `<iframe>` element with the `allowfullscreen` attribute can be displayed fullscreen. 501412.1–14 16.4["Only available on iPad, not on iPhone.", "Shows an overlay button which can not be disabled. Swiping down exits fullscreen mode, making it unsuitable for some use cases like games."]12Only available on iPad, not on iPhone. Shows an overlay button which can not be disabled. 10.01.0 714.4 No  
`options_navigationUI_parameter` 71 79 No 58 16.4 71 No 50 No 10.0 71 No  
`options_screen_parameter` 100 100 No 86 No No No No No No No No  
`returns_promise` 71 79 64 58 16.4 71 64 50 16.4 10.0 71 No  
### api.Document.fullscreen
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Fullscreen_API` 7115 7912 649 5815 16.46 7118 649 5014 16.4["Only available on iPad, not on iPhone.", "Shows an overlay button which can not be disabled. Swiping down exits fullscreen mode, making it unsuitable for some use cases like games."]12Only available on iPad, not on iPhone. 10.01.0 714.4 No  
  * `Element.requestFullscreen()`
  * `Document.exitFullscreen()`
  * `Document.fullscreen`
  * `Document.fullscreenElement`
  * `:fullscreen`, `::backdrop`
  * `allowfullscreen`


# Window Management API
The Window Management API allows you to get detailed information on the displays connected to your device and more easily place windows on specific screens, paving the way towards more effective multi-screen applications.
## Concepts and usage
Historically, we have used `Window.open()` to manage browser windows related to the current application — opening new windows, resizing and closing existing windows, etc. For example, to open a 400×300 window 50 pixels from the left and top of your screen:
    
    const myWindow = window.open(
      "https://example.com/",
      "myWindow",
      "left=50,top=50,width=400,height=300",
    );
    
You can retrieve information about your screen from the `Window.screen` property, such as how much screen space you have available to place windows in.
However, the above features are limited. `Window.screen` only returns data about the primary screen, and not secondary displays available to a device. To move a window to a secondary display, you could use `Window.moveTo()`, but you'd have to guess what coordinates to use based on where it is placed in your setup relative to the primary display.
The Window Management API provides more robust, flexible window management. It allows you to query whether your display is extended with multiple screens and get information on each screen separately: windows can then be placed on each screen as desired. It also provides event handlers to allow you to respond to changes in the available screens, new fullscreen functionality to choose which screen to put into fullscreen mode (if any), and permissions functionality to control access to the API.
For details on how to use it, see Using the Window Management API.
Note: In modern browsers, a separate user gesture event is required for each `Window.open()` call, for security purposes. This prevents sites from spamming users with lots of windows. However, this poses an issue for multi-window applications. To work around this limitation, you can design your applications to open no more than one new window at once, reuse existing windows to display different pages, or advise users on how to update their browser settings to allow multiple windows.
### Use cases
The Window Management API is useful in cases such as:
  * Multi-window graphics editors and audio processors that may wish to arrange editing tools and panels across different screens.
  * Virtual trading desks that want to show market trends in multiple windows and put specific windows of interest in fullscreen mode.
  * Slideshow apps that want to show speaker notes on the internal primary screen and the presentation on an external projector.


## Permissions policy integration
The `window-management` Permissions-Policy can be used to control permission to use the Window Management API. Specifically:
  * Usage of the `Window.getScreenDetails()` method. If blocked, its `Promise` will reject with a `NotAllowedError` exception.
  * Querying the `Window.screen.isExtended` property. If blocked, it will always return `false`.


Developers can explicitly grant permission for an `<iframe>` to use Window Management via the `allow` attribute:
    
    <iframe src="3rd-party.example" allow="window-management"></iframe>
    
## Interfaces
`ScreenDetails` Secure context
    
Represents the details of all the screens available to the user's device.
`ScreenDetailed` Secure context
    
Represents detailed information about one specific screen available to the user's device.
### Extensions to other interfaces
The `Screen` `change` event Secure context
    
Fired on a specific screen when it changes in some way — for example available width or height, or orientation.
`Screen.isExtended` Secure context
    
A boolean property that returns `true` if the user's device has multiple screens, and `false` if not.
`Element.requestFullscreen()`, the `screen` option
    
Specifies on which screen you want to put the element in fullscreen mode.
`Window.getScreenDetails()` Secure context
    
Returns a `Promise` that fulfills with a `ScreenDetails` object instance.
## Examples
You can find full examples here:
  * Basic multi-window learning environment (see the source code).
  * Multi-window Platformer Game (see the source code).
  * Window placement demo (see the source code).


# CSSUnparsedValue
The `CSSUnparsedValue` interface of the CSS Typed Object Model API represents property values that reference custom properties. It consists of a list of string fragments and variable references.
Custom properties are represented by `CSSUnparsedValue` and `var()` references are represented using `CSSVariableReferenceValue`.
CSSStyleValue  CSSUnparsedValue 
## Constructor
`CSSUnparsedValue()`
    
Creates a new `CSSUnparsedValue` object.
## Instance properties
`CSSUnparsedValue.length`
    
Returns the number of items in the `CSSUnparsedValue` object.
## Instance methods
`CSSUnparsedValue.entries()`
    
Returns an array of a given object's own enumerable property `[key, value]` pairs in the same order as that provided by a `for...in` loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
`CSSUnparsedValue.forEach()`
    
Executes a provided function once for each element of the `CSSUnparsedValue` object.
`CSSUnparsedValue.keys()`
    
Returns a new array iterator object that contains the keys for each index in the `CSSUnparsedValue` object.
`CSSUnparsedValue.values()`
    
Returns a new array iterator object that contains the values for each index in the `CSSUnparsedValue` object.
  * `CSSImageValue`
  * `CSSKeywordValue`
  * `CSSNumericValue`
  * `CSSPositionValue`
  * `CSSTransformValue`
  * Using the CSS Typed OM
  * CSS Typed Object Model API


# HTMLInputElement
The `HTMLInputElement` interface provides special properties and methods for manipulating the options, layout, and presentation of `<input>` elements.
EventTarget  Node  Element  HTMLElement  HTMLInputElement 
## Instance properties
Also inherits properties from its parent interface, `HTMLElement`.
Some properties only apply to input element types that support the corresponding attributes.
`align` Deprecated
    
A string that represents the alignment of the element. Use CSS instead.
`alpha` Experimental
    
A boolean that represents the element's `alpha` attribute, indicating whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque.
`colorSpace` Experimental
    
A string that represents the element's `colorspace` attribute, indicating the color space of the serialized CSS color (sRGB or display-p3).
`defaultValue`
    
A string that represents the default value as originally specified in the HTML that created this object.
`dirName`
    
A string that represents the directionality of the element.
`incremental` Non-standard
    
A boolean that represents the search event fire mode, if `true`, fires on every keypress, or on clicking the cancel button; otherwise fires when pressing `Enter`.
`labels` Read only
    
Returns a list of `<label>` elements that are labels for this element.
`list` Read only
    
Returns the element pointed to by the `list` attribute. The property may be `null` if no HTML element is found in the same tree.
`multiple`
    
A boolean that represents the element's `multiple` attribute, indicating whether more than one value is possible (e.g., multiple files).
`name`
    
A string that represents the element's `name` attribute, containing a name that identifies the element when submitting the form.
`popoverTargetAction`
    
Gets and sets the action to be performed (`"hide"`, `"show"`, or `"toggle"`) on a popover element being controlled by an `<input>` element of `type="button"`. It reflects the value of the `popovertargetaction` HTML attribute.
`popoverTargetElement`
    
Gets and sets the popover element to control via an `<input>` element of `type="button"`. The JavaScript equivalent of the `popovertarget` HTML attribute.
`step`
    
A string that represents the element's `step` attribute, which works with `min` and `max` to limit the increments at which a numeric or date-time value can be set. It can be the string `any` or a positive floating point number. If this is not set to `any`, the control accepts only values at multiples of the step value greater than the minimum.
`type`
    
A string that represents the element's `type` attribute, indicating the type of control to display. For possible values, see the documentation for the `type` attribute.
`useMap` Deprecated
    
A string that represents a client-side image map.
`value`
    
A string that represents the current value of the control. If the user enters a value different from the value expected, this may return an empty string.
`valueAsDate`
    
A `Date` that represents the value of the element, interpreted as a date, or `null` if conversion is not possible.
`valueAsNumber`
    
A number that represents the value of the element, interpreted as one of the following, in order: A time value, a number, or `NaN` if conversion is impossible.
### Instance properties related to the parent form
`form` Read only
    
Returns a reference to the parent `<form>` element.
`formAction`
    
A string that represents the element's `formaction` attribute, containing the URL of a program that processes information submitted by the element. This overrides the `action` attribute of the parent form.
`formEnctype`
    
A string that represents the element's `formenctype` attribute, containing the type of content that is used to submit the form to the server. This overrides the `enctype` attribute of the parent form.
`formMethod`
    
A string that represents the element's `formmethod` attribute, containing the HTTP method that the browser uses to submit the form. This overrides the `method` attribute of the parent form.
`formNoValidate`
    
A boolean that represents the element's `formnovalidate` attribute, indicating that the form is not to be validated when it is submitted. This overrides the `novalidate` attribute of the parent form.
`formTarget`
    
A string that represents the element's `formtarget` attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the `target` attribute of the parent form.
### Instance properties that apply to any type of input element that is not hidden
`disabled`
    
A boolean that represents the element's `disabled` attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also `readonly`.
`required`
    
A boolean that represents the element's `required` attribute, indicating that the user must fill in a value before submitting a form.
`validationMessage` Read only
    
Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation (`willValidate` is `false`), or it satisfies its constraints. This value can be set by the `setCustomValidity()` method.
`validity` Read only
    
Returns the element's current validity state.
`willValidate` Read only
    
Returns whether the element is a candidate for constraint validation. It is `false` if any conditions bar it from constraint validation, including: its `type` is one of `hidden`, `reset` or `button`, it has a `<datalist>` ancestor or its `disabled` property is `true`.
### Instance properties that apply only to elements of type checkbox or radio
`checked`
    
A boolean that represents the current state of the element.
`defaultChecked`
    
A boolean that represents the default state of a radio button or checkbox as originally specified in HTML that created this object.
`indeterminate`
    
A boolean that represents whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the `checked` attribute, and clicking the checkbox will set the value to false.
### Instance properties that apply only to elements of type image
`alt`
    
A string that represents the element's `alt` attribute, containing alternative text to use.
`height`
    
A string that represents the element's `height` attribute, which defines the height of the image displayed for the button.
`src`
    
A string that represents the element's `src` attribute, which specifies a URI for the location of an image to display on the graphical submit button.
`width`
    
A string that represents the element's `width` attribute, which defines the width of the image displayed for the button.
### Instance properties that apply only to elements of type file
`accept`
    
A string that represents the element's `accept` attribute, containing comma-separated list of file types that can be selected.
`capture`
    
A string that represents the element's `capture` attribute, indicating the media capture input method in file upload controls.
`files`
    
A `FileList` that represents the files selected for upload.
`webkitdirectory`
    
A boolean that represents the `webkitdirectory` attribute. If `true`, the file-system-picker interface only accepts directories instead of files.
`webkitEntries` Read only
    
Describes the currently selected files or directories.
### Instance properties that apply only to visible elements containing text or numbers
`autocomplete`
    
A string that represents the element's `autocomplete` attribute, indicating whether the value of the control can be automatically completed by the browser.
`max`
    
A string that represents the element's `max` attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (`min` attribute) value.
`maxLength`
    
A number that represents the element's `maxlength` attribute, containing the maximum number of characters (in Unicode code points) that the value can have.
`min`
    
A string that represents the element's `min` attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum (`max` attribute) value.
`minLength`
    
A number that represents the element's `minlength` attribute, containing the minimum number of characters (in Unicode code points) that the value can have.
`pattern`
    
A string that represents the element's `pattern` attribute, containing a regular expression that the control's value is checked against. Use the `title` attribute to describe the pattern to help the user. This attribute only applies when the value of the `type` attribute is `text`, `search`, `tel`, `url` or `email`.
`placeholder`
    
A string that represents the element's `placeholder` attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute only applies when the value of the `type` attribute is `text`, `search`, `tel`, `url` or `email`.
`readOnly`
    
A boolean that represents the element's `readonly` attribute, indicating that the user cannot modify the value of the control. This is ignored if the `type` is `hidden`, `range`, `color`, `checkbox`, `radio`, `file`, or a button type.
`selectionDirection`
    
A string that represents the direction in which selection occurred. Possible values are: `forward` (the selection was performed in the start-to-end direction of the current locale), `backward` (the opposite direction) or `none` (the direction is unknown).
`selectionEnd`
    
A number that represents the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
`selectionStart`
    
A number that represents the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the `<input>` element.
`size`
    
A number that represents the element's `size` attribute, containing visual size of the control. This value is in pixels unless the value of `type` is `text` or `password`, in which case, it is an integer number of characters. Applies only when `type` is set to `text`, `search`, `tel`, `url`, `email`, or `password`.
## Instance methods
Also inherits methods from its parent interface, `HTMLElement`.
`checkValidity()`
    
Returns a boolean value that is `false` if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an `invalid` event at the element. It returns `true` if the element is not a candidate for constraint validation, or if it satisfies its constraints.
`reportValidity()`
    
Runs the `checkValidity()` method, and if it returns false (for an invalid input or no pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.
`select()`
    
Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.
`setCustomValidity()`
    
Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
`setRangeText()`
    
Replaces a range of text in the input element with new text.
`setSelectionRange()`
    
Selects a range of text in the input element (but does not focus it).
`showPicker()`
    
Shows a browser picker for date, time, color, and files.
`stepDown()`
    
Decrements the `value` by (`step` * n), where n defaults to 1 if not specified.
`stepUp()`
    
Increments the `value` by (`step` * n), where n defaults to 1 if not specified.
## Events
Also inherits events from its parent interface, `HTMLElement`.
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface:
`cancel` event
    
Fired when the user cancels the file picker dialog via the `Esc` key or the cancel button and when the user re-selects the same files that were previously selected.
`invalid` event
    
Fired when an element does not satisfy its constraints during constraint validation.
`search` event  Non-standard
    
Fired when a search is initiated on an `<input>` of `type="search"`.
`select` event
    
Fired when some text has been selected.
`selectionchange` event
    
Fires when the text selection in an `<input>` element has been changed.
  * HTML element implementing this interface: `<input>`


# AudioDestinationNode
The `AudioDestinationNode` interface represents the end destination of an audio graph in a given context — usually the speakers of your device. It can also be the node that will "record" the audio data when used with an `OfflineAudioContext`.
`AudioDestinationNode` has no output (as it is the output, no more `AudioNode` can be linked after it in the audio graph) and one input. The number of channels in the input must be between `0` and the `maxChannelCount` value or an exception is raised.
The `AudioDestinationNode` of a given `AudioContext` can be retrieved using the `AudioContext.destination` property.
EventTarget  AudioNode  AudioDestinationNode 
Number of inputs `1`  
Number of outputs `0`  
Channel count mode `"explicit"`  
Channel count `2`  
Channel interpretation `"speakers"`  
## Instance properties
Inherits properties from its parent, `AudioNode`.
`AudioDestinationNode.maxChannelCount`
    
An `unsigned long` defining the maximum number of channels that the physical device can handle.
## Instance methods
No specific method; inherits methods from its parent, `AudioNode`.
## Example
There is no complex set up for using an `AudioDestinationNode` — by default, this represents the output of the user's system (e.g., their speakers), so you can get it hooked up inside an audio graph using only a few lines of code:
    
    const audioCtx = new AudioContext();
    const source = audioCtx.createMediaElementSource(myMediaElement);
    source.connect(gainNode);
    gainNode.connect(audioCtx.destination);
    
To see a more complete implementation, check out one of our MDN Web Audio examples, such as Voice-change-o-matic or Violent Theremin.
  * Using the Web Audio API


# Background Fetch API
Note: This feature is available in Web Workers.
The Background Fetch API provides a method for managing downloads that may take a significant amount of time such as movies, audio files, and software.
## Concepts and Usage
When a web application requires the user to download large files, this often presents a problem in that the user needs to stay connected to the page for the download to complete. If they lose connectivity, close the tab or navigate away from the page the download stops.
The Background Synchronization API provides a way for service workers to defer processing until a user is connected; however it can't be used for long running tasks such as downloading a large file. Background Sync requires that the service worker stays alive until the fetch is completed, and to conserve battery life and to prevent unwanted tasks happening in the background the browser will at some point terminate the task.
The Background Fetch API solves this problem. It creates a way for a web developer to tell the browser to perform some fetches in the background, for example when the user clicks a button to download a video file. The browser then performs the fetches in a user-visible way, displaying progress to the user and giving them a method to cancel the download. Once the download is complete the browser then opens the service worker, at which point your application can do something with the response if required.
The Background Fetch API will enable the fetch to happen if the user starts the process while offline. Once they are connected it will begin. If the user goes off line, the process pauses until the user is on again.
## Interfaces
`BackgroundFetchManager` Experimental
    
A map where the keys are background fetch IDs and the values are `BackgroundFetchRegistration` objects.
`BackgroundFetchRegistration` Experimental
    
Represents a Background Fetch.
`BackgroundFetchRecord` Experimental
    
Represents an individual fetch request and response.
`BackgroundFetchEvent` Experimental
    
The event type for the `backgroundfetchabort` and `backgroundfetchclick` event
`BackgroundFetchUpdateUIEvent` Experimental
    
The event type for the `backgroundfetchsuccess` and `backgroundfetchfail` event
### Extensions to other interfaces
`ServiceWorkerRegistration.backgroundFetch` Read only Experimental
    
Returns a reference to a `BackgroundFetchManager` object, which manages background fetch operations.
`backgroundfetchabort` event  Experimental
    
Fired when a background fetch operation has been canceled by the user or the app.
`backgroundfetchclick` event  Experimental
    
Fired when the user has clicked on the UI for a background fetch operation.
`backgroundfetchfail` event  Experimental
    
Fired when at least one of the requests in a background fetch operation has failed.
`backgroundfetchsuccess` event  Experimental
    
Fired when all of the requests in a background fetch operation have succeeded.
## Examples
Before using Background Fetch, check for browser support.
    
    if (!("BackgroundFetchManager" in self)) {
      // Provide fallback downloading.
    }
    
Using Background Fetch requires a registered service worker. Then call `backgroundFetch.fetch()` to perform a fetch. This returns a promise that resolves with a `BackgroundFetchRegistration`.
A background fetch may fetch a number of files. In our example the fetch requests an MP3 and a JPEG. This enables a package of files that the user sees as one item (for example a podcast and artwork) to be downloaded at once.
    
    navigator.serviceWorker.ready.then(async (swReg) => {
      const bgFetch = await swReg.backgroundFetch.fetch(
        "my-fetch",
        ["/ep-5.mp3", "ep-5-artwork.jpg"],
        {
          title: "Episode 5: Interesting things.",
          icons: [
            {
              sizes: "300x300",
              src: "/ep-5-icon.png",
              type: "image/png",
            },
          ],
          downloadTotal: 60 * 1024 * 1024,
        },
      );
    });
    
You can find further code examples and a demo in Introducing Background Fetch.
>
### api.BackgroundFetchManager
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Background_Fetch_API` 74 79 No 62 No 74 No 53 No 11.0 No No  
`fetch` 74 79 No 62 No 74 No 53 No 11.0 No No  
`get` 74 79 No 62 No 74 No 53 No 11.0 No No  
`getIds` 74 79 No 62 No 74 No 53 No 11.0 No No  
### api.BackgroundFetchRegistration
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Background_Fetch_API` 74 79 No 62 No 74 No 53 No 11.0 No No  
`abort` 74 79 No 62 No 74 No 53 No 11.0 No No  
`downloadTotal` 74 79 No 62 No 74 No 53 No 11.0 No No  
`downloaded` 74 79 No 62 No 74 No 53 No 11.0 No No  
`failureReason` 74 79 No 62 No 74 No 53 No 11.0 No No  
`id` 74 79 No 62 No 74 No 53 No 11.0 No No  
`match` 74 79 No 62 No 74 No 53 No 11.0 No No  
`matchAll` 74 79 No 62 No 74 No 53 No 11.0 No No  
`progress_event` 74 79 No 62 No 74 No 53 No 11.0 No No  
`recordsAvailable` 74 79 No 62 No 74 No 53 No 11.0 No No  
`result` 74 79 No 62 No 74 No 53 No 11.0 No No  
`uploadTotal` 74 79 No 62 No 74 No 53 No 11.0 No No  
`uploaded` 74 79 No 62 No 74 No 53 No 11.0 No No  
### api.BackgroundFetchRecord
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Background_Fetch_API` 74 79 No 62 No 74 No 53 No 11.0 No No  
`request` 74 79 No 62 No 74 No 53 No 11.0 No No  
`responseReady` 74 79 No 62 No 74 No 53 No 11.0 No No  
  * Introducing Background Fetch
  * Background Fetch - HTTP 203


# Compression Streams API
Note: This feature is available in Web Workers.
The Compression Streams API provides a JavaScript API for compressing and decompressing streams of data using the gzip or deflate formats.
Built in compression means that JavaScript applications will not need to include a compression library, which makes the download size of the application smaller.
The Fetch API's `Response` can be used to convert streams to:
  * `ArrayBuffer`
  * `Blob`
  * `Uint8Array`
  * `String`
  * JSON


## Interfaces
`CompressionStream`
    
Compresses a stream of data.
`DecompressionStream`
    
Decompresses a stream of data.
## Examples
In this example a stream is compressed using gzip compression.
    
    const compressedReadableStream = inputReadableStream.pipeThrough(
      new CompressionStream("gzip"),
    );
    
In the following example a function decompresses a blob using gzip.
    
    async function DecompressBlob(blob) {
      const ds = new DecompressionStream("gzip");
      const decompressedStream = blob.stream().pipeThrough(ds);
      return await new Response(decompressedStream).blob();
    }
    
# Comment
The `Comment` interface represents textual notations within markup; although it is generally not visually shown, such comments are available to be read in the source view.
Comments are represented in HTML and XML as content between `<!--` and `-->`. In XML, like inside SVG or MathML markup, the character sequence `--` cannot be used within a comment.
EventTarget  Node  CharacterData  Comment 
## Instance properties
This interface has no specific property, but inherits those of its parent, `CharacterData`, and indirectly those of `Node`.
## Constructor
`Comment()`
    
Returns a new `Comment` object with the parameter as its textual content. If not present, its default value is the empty string, `''`.
## Instance methods
This interface has no specific method, but inherits those of its parent, `CharacterData`, and indirectly those of `Node`.
  * The DOM API


# FileReaderSync
Note: This feature is only available in Web Workers, except for Service Workers.
The `FileReaderSync` interface allows to read `File` or `Blob` objects synchronously. This interface is only available in workers as it enables synchronous I/O that could potentially block.
## Constructor
`FileReaderSync()`
    
Returns a new `FileReaderSync` object.
## Instance properties
This interface does not have any properties.
## Instance methods
`FileReaderSync.readAsArrayBuffer()`
    
This method converts a specified `Blob` or a `File` into an `ArrayBuffer` representing the input data as a binary string.
`FileReaderSync.readAsBinaryString()` Deprecated
    
This method converts a specified `Blob` or a `File` into a string representing the input data as a binary string. This method is deprecated, consider using `readAsArrayBuffer()` instead.
`FileReaderSync.readAsText()`
    
This method converts a specified `Blob` or a `File` into a string representing the input data as a text string. The optional `encoding` parameter indicates the encoding to be used (e.g., iso-8859-1 or UTF-8). If not present, the method will apply a detection algorithm for it.
`FileReaderSync.readAsDataURL()`
    
This method converts a specified `Blob` or a `File` into a string representing the input data as a data URL.
  * `FileReader`
  * `Blob`
  * `File`


# StyleSheet
An object implementing the `StyleSheet` interface represents a single style sheet. CSS style sheets will further implement the more specialized `CSSStyleSheet` interface.
## Instance properties
`StyleSheet.disabled`
    
A boolean value representing whether the current stylesheet has been applied or not.
`StyleSheet.href` Read only
    
Returns a string representing the location of the stylesheet.
`StyleSheet.media` Read only
    
Returns a `MediaList` representing the intended destination medium for style information.
`StyleSheet.ownerNode` Read only
    
Returns a `Node` associating this style sheet with the current document.
`StyleSheet.parentStyleSheet` Read only
    
Returns a `StyleSheet` including this one, if any; returns `null` if there aren't any.
`StyleSheet.title` Read only
    
Returns a string representing the advisory title of the current style sheet.
`StyleSheet.type` Read only
    
Returns a string representing the style sheet language for this style sheet.
  * `CSSStyleSheet`


# CSSCounterStyleRule
The `CSSCounterStyleRule` interface represents an `@counter-style` at-rule.
CSSRule  CSSCounterStyleRule 
## Instance properties
This interface also inherits properties from its parent `CSSRule`.
`CSSCounterStyleRule.name`
    
A string that contains the serialization of the `<custom-ident>` defined as the `name` for the associated rule.
`CSSCounterStyleRule.system`
    
A string that contains the serialization of the `system` descriptor defined for the associated rule. If the descriptor was not specified in the associated rule, the attribute returns an empty string.
`CSSCounterStyleRule.symbols`
    
A string that contains the serialization of the `symbols` descriptor defined for the associated rule. If the descriptor was not specified in the associated rule, the attribute returns an empty string.
`CSSCounterStyleRule.additiveSymbols`
    
A string that contains the serialization of the `additive-symbols` descriptor defined for the associated rule. If the descriptor was not specified in the associated rule, the attribute returns an empty string.
`CSSCounterStyleRule.negative`
    
A string that contains the serialization of the `negative` descriptor defined for the associated rule. If the descriptor was not specified in the associated rule, the attribute returns an empty string.
`CSSCounterStyleRule.prefix`
    
A string that contains the serialization of the `prefix` descriptor defined for the associated rule. If the descriptor was not specified in the associated rule, the attribute returns an empty string.
`CSSCounterStyleRule.suffix`
    
A string that contains the serialization of the `suffix` descriptor defined for the associated rule. If the descriptor was not specified in the associated rule, the attribute returns an empty string.
`CSSCounterStyleRule.range`
    
A string that contains the serialization of the `range` descriptor defined for the associated rule. If the descriptor was not specified in the associated rule, the attribute returns an empty string.
`CSSCounterStyleRule.pad`
    
A string that contains the serialization of the `pad` descriptor defined for the associated rule. If the descriptor was not specified in the associated rule, the attribute returns an empty string.
`CSSCounterStyleRule.speakAs`
    
A string that contains the serialization of the `speak-as` descriptor defined for the associated rule. If the descriptor was not specified in the associated rule, the attribute returns an empty string.
`CSSCounterStyleRule.fallback`
    
A string that contains the serialization of the `fallback` descriptor defined for the associated rule. If the descriptor was not specified in the associated rule, the attribute returns an empty string.
## Instance methods
This interface doesn't implement any specific method but inherits methods from its parent `CSSRule`.
  * `@counter-style`
  * CSS counter styles module
  * Using CSS counters guide


# SVGLength
The `SVGLength` interface correspond to the <length> basic data type.
An `SVGLength` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
## Instance properties
`unitType`
    
The type of the value as specified by one of the `SVG_LENGTHTYPE_*` constants defined on this interface.
`value`
    
The value as a floating point value, in user units.
`valueAsString`
    
The value as a string value, in the units expressed by `unitType`.
`valueInSpecifiedUnits`
    
The value as a floating point value, in the units expressed by `unitType`.
## Instance methods
`convertToSpecifiedUnits()`
    
Preserve the same underlying stored value, but reset the stored unit identifier to the given `unitType`.
`newValueSpecifiedUnits()`
    
Reset the value as a number with an associated `unitType`, thereby replacing the values for all of the attributes on the object.
## Static properties
`SVG_LENGTHTYPE_UNKNOWN` (0)
    
The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_LENGTHTYPE_NUMBER` (1)
    
No unit type was provided (i.e., a unitless value was specified), which indicates a value in user units.
`SVG_LENGTHTYPE_PERCENTAGE` (2)
    
A percentage value was specified.
`SVG_LENGTHTYPE_EMS` (3)
    
A value was specified using the `em` units.
`SVG_LENGTHTYPE_EXS` (4)
    
A value was specified using the `ex` units.
`SVG_LENGTHTYPE_PX` (5)
    
A value was specified using the `px` units.
`SVG_LENGTHTYPE_CM` (6)
    
A value was specified using the `cm` units.
`SVG_LENGTHTYPE_MM` (7)
    
A value was specified using the `mm` units.
`SVG_LENGTHTYPE_IN` (8)
    
A value was specified using the `in` units.
`SVG_LENGTHTYPE_PT` (9)
    
A value was specified using the `pt` units.
`SVG_LENGTHTYPE_PC` (10)
    
A value was specified using the `pc` units.
## Example
    
    <svg height="200" onload="start();" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg">
      <script><![CDATA[
    function start() {
      const rect = document.getElementById("myRect");
      const val = rect.x.baseVal;
    
      // read x in pixel and cm units
      console.log(
        `value: ${val.value}, valueInSpecifiedUnits: ${val.valueInSpecifiedUnits} (${val.unitType}), valueAsString: ${val.valueAsString}`,
      );
    
      // set x = 20pt and read it out in pixel and pt units
      val.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PT, 20);
      console.log(
        `value: ${val.value}, valueInSpecifiedUnits: ${val.valueInSpecifiedUnits} (${val.unitType}), valueAsString: ${val.valueAsString}`,
      );
    
      // convert x = 20pt to inches and read out in pixel and inch units
      val.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_IN);
      console.log(
        `value: ${val.value}, valueInSpecifiedUnits: ${val.valueInSpecifiedUnits} (${val.unitType}), valueAsString: ${val.valueAsString}`,
      );
    }
    ]]></script>
      <rect id="myRect"
            x="1cm" y="1cm"
            fill="green" stroke="black" stroke-width="1"
            width="1cm" height="1cm"
      />
    </svg>
    
Results on a desktop monitor (pixel units will be dpi-dependent):
    
    value: 37.7952766418457, valueInSpecifiedUnits: 6: 1, valueAsString: 1cm
    value: 26.66666603088379, valueInSpecifiedUnits 9: 20, valueAsString: 20pt
    value: 26.66666603088379, valueInSpecifiedUnits 8: 0.277777761220932, valueAsString: 0.277778in
    
# SVGSVGElement
The `SVGSVGElement` interface provides access to the properties of `<svg>` elements, as well as methods to manipulate them. This interface contains also various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGSVGElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGraphicsElement`.
`SVGSVGElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given `<svg>` element.
`SVGSVGElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given `<svg>` element.
`SVGSVGElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given `<svg>` element.
`SVGSVGElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given `<svg>` element.
`SVGSVGElement.viewBox` Read only
    
An `SVGAnimatedRect` corresponding to the `viewBox` attribute of the given `<svg>` element.
`SVGSVGElement.preserveAspectRatio` Read only
    
An `SVGAnimatedPreserveAspectRatio` corresponding to the `preserveAspectRatio` attribute of the given `<svg>` element.
`SVGSVGElement.pixelUnitToMillimeterX` Deprecated
    
A float representing the size of the pixel unit (as defined by CSS2) along the x-axis of the viewport, which represents a unit somewhere in the range of 70dpi to 120dpi, and, on systems that support this, might actually match the characteristics of the target medium. On systems where it is impossible to know the size of a pixel, a suitable default pixel size is provided.
`SVGSVGElement.pixelUnitToMillimeterY` Deprecated
    
A float representing the size of a pixel unit along the y-axis of the viewport.
`SVGSVGElement.screenPixelToMillimeterX` Deprecated
    
User interface (UI) events in DOM Level 2 indicate the screen positions at which the given UI event occurred. When the browser actually knows the physical size of a "screen unit", this float attribute will express that information; otherwise, user agents will provide a suitable default value (such as `.28mm`).
`SVGSVGElement.screenPixelToMillimeterY` Deprecated
    
Corresponding size of a screen pixel along the y-axis of the viewport.
`SVGSVGElement.useCurrentView` Deprecated Non-standard
    
The initial view (i.e., before magnification and panning) of the current innermost SVG document fragment can be either the "standard" view, i.e., based on attributes on the `<svg>` element such as `viewBox` or on a "custom" view (i.e., a hyperlink into a particular `<view>` or other element). If the initial view is the "standard" view, then this attribute is `false`. If the initial view is a "custom" view, then this attribute is `true`.
`SVGSVGElement.currentView` Deprecated Non-standard
    
An `SVGViewSpec` defining the initial view (i.e., before magnification and panning) of the current innermost SVG document fragment. The meaning depends on the situation: If the initial view was a "standard" view, then:
  * the values for `viewBox`, `preserveAspectRatio`, and `zoomAndPan` within `currentView` will match the values for the corresponding DOM attributes that are on `SVGSVGElement` directly
  * the value for `transform` within `currentView` will be `null`


If the initial view was a link into a `<view>` element, then:
  * the values for `viewBox`, `preserveAspectRatio`, and `zoomAndPan` within `currentView` will correspond to the corresponding attributes for the given `<view>` element
  * the value for `transform` within `currentView` will be `null`


If the initial view was a link into another element (i.e., other than a `<view>`), then:
  * the values for `viewBox`, `preserveAspectRatio`, and `zoomAndPan` within `currentView` will match the values for the corresponding DOM attributes that are on `SVGSVGElement` directly for the closest ancestor `<svg>` element
  * the values for `transform` within `currentView` will be `null`


If the initial view was a link into the SVG document fragment using an SVG view specification fragment identifier (i.e., `#svgView(…)`), then:
  * the values for `viewBox`, `preserveAspectRatio`, `zoomAndPan`, and `transform` within `currentView` will correspond to the values from the SVG view specification fragment identifier


`SVGSVGElement.currentScale`
    
On an outermost `<svg>` element, this float attribute indicates the current scale factor relative to the initial view to take into account user magnification and panning operations. DOM attributes `currentScale` and `currentTranslate` are equivalent to the 2×3 matrix `[a b c d e f] = [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]`. If "magnification" is enabled (i.e., `zoomAndPan="magnify"`), then the effect is as if an extra transformation were placed at the outermost level on the SVG document fragment (i.e., outside the outermost `<svg>` element).
`SVGSVGElement.currentTranslate` Read only
    
A `DOMPointReadOnly` representing the translation factor that takes into account user "magnification" corresponding to an outermost `<svg>` element. The behavior is undefined for `<svg>` elements that are not at the outermost level.
## Instance methods
This interface also inherits methods from its parent, `SVGGraphicsElement`.
`SVGSVGElement.suspendRedraw()` Deprecated
    
Takes a time-out value which indicates that redraw shall not occur until:
the corresponding `unsuspendRedraw()` call has been made, an `unsuspendRedrawAll()` call has been made, or its timer has timed out.
In environments that do not support interactivity (e.g., print media), then redraw shall not be suspended. Calls to `suspendRedraw()` and `unsuspendRedraw()` should, but need not be, made in balanced pairs.
To suspend redraw actions as a collection of SVG DOM changes occur, precede the changes to the SVG DOM with a method call similar to:
    
    const suspendHandleID = suspendRedraw(maxWaitMilliseconds);
    
and follow the changes with a method call similar to:
    
    unsuspendRedraw(suspendHandleID);
    
Note that multiple `suspendRedraw()` calls can be used at once, and that each such method call is treated independently of the other `suspendRedraw()` method calls.
`SVGSVGElement.unsuspendRedraw()` Deprecated
    
Cancels a specified `suspendRedraw()` by providing a unique suspend handle ID that was returned by a previous `suspendRedraw()` call.
`SVGSVGElement.unsuspendRedrawAll()` Deprecated
    
Cancels all currently active `suspendRedraw()` method calls. This method is most useful at the very end of a set of SVG DOM calls to ensure that all pending `suspendRedraw()` method calls have been cancelled.
`SVGSVGElement.forceRedraw()` Deprecated
    
In rendering environments supporting interactivity, forces the user agent to immediately redraw all regions of the viewport that require updating.
`SVGSVGElement.pauseAnimations()`
    
Suspends (i.e., pauses) all currently running animations that are defined within the SVG document fragment corresponding to this `<svg>` element, causing the animation clock corresponding to this document fragment to stand still until it is unpaused.
`SVGSVGElement.unpauseAnimations()`
    
Resumes (i.e., unpauses) currently running animations that are defined within the SVG document fragment, causing the animation clock to continue from the time at which it was suspended.
`SVGSVGElement.animationsPaused()`
    
Returns `true` if this SVG document fragment is in a paused state.
`SVGSVGElement.getCurrentTime()`
    
Returns the current time in seconds relative to the start time for the current SVG document fragment. If `getCurrentTime()` is called before the document timeline has begun (for example, by script running in a `<script>` element before the document's `SVGLoad` event is dispatched), then `0` is returned.
`SVGSVGElement.setCurrentTime()`
    
Adjusts the clock for this SVG document fragment, establishing a new current time. If `setCurrentTime()` is called before the document timeline has begun (for example, by script running in a `<script>` element before the document's `SVGLoad` event is dispatched), then the value of seconds in the last invocation of the method gives the time that the document will seek to once the document timeline has begun.
`SVGSVGElement.getIntersectionList()`
    
Returns a `NodeList` of graphics elements whose rendered content intersects the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in `pointer-events` processing.
`SVGSVGElement.getEnclosureList()`
    
Returns a `NodeList` of graphics elements whose rendered content is entirely contained within the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in `pointer-events` processing.
`SVGSVGElement.checkIntersection()`
    
Returns `true` if the rendered content of the given element intersects the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in `pointer-events` processing.
`SVGSVGElement.checkEnclosure()`
    
Returns `true` if the rendered content of the given element is entirely contained within the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in `pointer-events` processing.
`SVGSVGElement.deselectAll()`
    
Unselects any selected objects, including any selections of text strings and type-in bars.
`SVGSVGElement.createSVGNumber()`
    
Creates an `SVGNumber` object outside of any document trees. The object is initialized to `0`.
`SVGSVGElement.createSVGLength()`
    
Creates an `SVGLength` object outside of any document trees. The object is initialized to `0` user units.
`SVGSVGElement.createSVGAngle()`
    
Creates an `SVGAngle` object outside of any document trees. The object is initialized to a value of `0` degrees (unitless).
`SVGSVGElement.createSVGPoint()`
    
Creates a `DOMPoint` object outside of any document trees. The object is initialized to the point `(0,0)` in the user coordinate system.
`SVGSVGElement.createSVGMatrix()`
    
Creates a `DOMMatrix` object outside of any document trees. The object is initialized to the identity matrix.
`SVGSVGElement.createSVGRect()`
    
Creates an `SVGRect` object outside of any document trees. The object is initialized such that all values are set to `0` user units.
`SVGSVGElement.createSVGTransform()`
    
Creates an `SVGTransform` object outside of any document trees. The object is initialized to an identity matrix transform (`SVG_TRANSFORM_MATRIX`).
`SVGSVGElement.createSVGTransformFromMatrix()`
    
Creates an `SVGTransform` object outside of any document trees. The object is initialized to the given matrix transform (i.e., `SVG_TRANSFORM_MATRIX`). The values from the parameter matrix are copied, the matrix parameter is not adopted as `SVGTransform::matrix`.
`SVGSVGElement.getElementById()`
    
Searches this SVG document fragment (i.e., the search is restricted to a subset of the document tree) for an Element whose `id` is given by `elementId`. If an Element is found, that Element is returned. If no such element exists, returns `null`. Behavior is not defined if more than one element has this id.
## Event handlers
The following `Window` `onXYZ` event handler properties are also available as aliases targeting the `window` object. However, it is advised to listen to them on the `window` object directly rather than on `SVGSVGElement`.
Note: Using `addEventListener()` on `SVGSVGElement` will not work for the `onXYZ` event handlers listed below. Listen to the events on the `window` object instead.
`SVGSVGElement.onafterprint`
    
Fired after the associated document has started printing or the print preview has been closed.
`SVGSVGElement.onbeforeprint`
    
Fired when the associated document is about to be printed or previewed for printing.
`SVGSVGElement.onbeforeunload`
    
Fired when the window, the document and its resources are about to be unloaded.
`SVGSVGElement.ongamepadconnected`
    
Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.
`SVGSVGElement.ongamepaddisconnected`
    
Fired when the browser detects that a gamepad has been disconnected.
`SVGSVGElement.onhashchange`
    
Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the `#` symbol).
`SVGSVGElement.onlanguagechange`
    
Fired when the user's preferred language changes.
`SVGSVGElement.onmessage`
    
Fired when the window receives a message, for example from a call to `Window.postMessage()` from another browsing context.
`SVGSVGElement.onmessageerror`
    
Fired when the window receives a message that can't be deserialized.
`SVGSVGElement.onoffline`
    
Fired when the browser has lost access to the network and the value of `Navigator.onLine` switches to `false`.
`SVGSVGElement.ononline`
    
Fired when the browser has gained access to the network and the value of `Navigator.onLine` switches to `true`.
`SVGSVGElement.onpagehide`
    
Fired when the browser hides the current page in the process of presenting a different page from the session's history.
`SVGSVGElement.onpageshow`
    
Fired when the browser displays the window's document due to navigation.
`SVGSVGElement.onpopstate`
    
Fired when the active history entry changes while the user navigates the session history.
`SVGSVGElement.onrejectionhandled`
    
Fired whenever a JavaScript `Promise` is rejected and the rejection has been handled.
`SVGSVGElement.onstorage`
    
Fired when a storage area (`localStorage`) has been modified in the context of another document.
`SVGSVGElement.onunhandledrejection`
    
Fired whenever a `Promise` is rejected but the rejection was not handled.
`SVGSVGElement.onunload`
    
Fired when the document is being unloaded.
  * `<circle>`


# HTMLMenuElement
The `HTMLMenuElement` interface provides additional properties (beyond those inherited from the `HTMLElement` interface) for manipulating a `<menu>` element. `<menu>` is a semantic alternative to the `<ul>` element.
EventTarget  Node  Element  HTMLElement  HTMLMenuElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`, and its ancestors.
`HTMLMenuElement.compact` Deprecated
    
A boolean determining if the menu displays compactly.
## Instance methods
Inherits methods from its parent, `HTMLElement`, and its ancestors.
`HTMLMenuElement` doesn't implement specific methods.
# VTTCue
The `VTTCue` interface of the WebVTT API represents a cue that can be added to the text track associated with a particular video (or other media).
A cue defines the text to display in a particular timeslice of a video or audio track, along with display properties such as its size, alignment, and position.
EventTarget  TextTrackCue  VTTCue 
## Constructor
`VTTCue()`
    
Returns a newly created `VTTCue` object that covers the given time range and has the given text.
## Instance properties
This interface also inherits properties from `TextTrackCue`.
`VTTCue.region`
    
A `VTTRegion` object describing the video's sub-region that the cue will be drawn onto, or `null` if none is assigned.
`VTTCue.vertical`
    
An enum representing the cue writing direction.
`VTTCue.snapToLines`
    
`true` if the `VTTCue.line` attribute indicates an integer number of lines or `false` if it represents a percentage of the video size. This is `true` by default.
`VTTCue.line`
    
Represents the line positioning of the cue. This can be the string `auto` or a number whose interpretation depends on the value of `VTTCue.snapToLines`.
`VTTCue.lineAlign`
    
An enum representing the alignment of the VTT cue.
`VTTCue.position`
    
Represents the indentation of the cue within the line. This can be the string `auto`, a number representing the percentage of the `VTTCue.region`, or the video size if `VTTCue.region` is `null`.
`VTTCue.positionAlign`
    
An enum representing the alignment of the cue. This is used to determine what the `VTTCue.position` is anchored to. The default is `auto`.
`VTTCue.size`
    
Represents the size of the cue, as a percentage of the video size.
`VTTCue.align`
    
An enum representing the alignment of all the lines of text within the cue box.
`VTTCue.text`
    
A string representing the contents of the cue.
## Instance methods
`getCueAsHTML()`
    
Returns the cue text as a `DocumentFragment`.
## Example
>
### HTML
The following example adds a new `TextTrack` to the video, then adds cues using the `TextTrack.addCue()` method, with a `VTTCue` object as the value.
    
    <video controls src="/shared-assets/videos/friday.mp4"></video>
    
### CSS
    
    video {
      width: 420px;
      height: 300px;
    }
    
### JavaScript
    
    let video = document.querySelector("video");
    let track = video.addTextTrack("captions", "Captions", "en");
    track.mode = "showing";
    track.addCue(new VTTCue(0, 0.9, "Hildy!"));
    track.addCue(new VTTCue(1, 1.4, "How are you?"));
    track.addCue(new VTTCue(1.5, 2.9, "Tell me, is the lord of the universe in?"));
    track.addCue(new VTTCue(3, 4.2, "Yes, he's in - in a bad humor"));
    track.addCue(new VTTCue(4.3, 6, "Somebody must've stolen the crown jewels"));
    console.log(track.cues);
    
### Result
# SVGLengthList
The `SVGLengthList` interface defines a list of `SVGLength` objects. It is used for the `baseVal` and `animVal` properties of `SVGAnimatedLengthList`.
An `SVGLengthList` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
An `SVGLengthList` object is indexable and can be accessed like an array.
## Instance properties
`length`
    
The number of items in the list.
`numberOfItems`
    
The number of items in the list.
## Instance methods
`appendItem()`
    
Inserts a new item at the end of the list.
`clear()`
    
Clears all existing items from the list, with the result being an empty list.
`initialize()`
    
Clears all existing items from the list and re-initializes the list to hold the single item specified by the parameter.
`getItem()`
    
Returns the specified item from the list.
`insertItemBefore()`
    
Inserts a new item into the list at the specified position.
`removeItem()`
    
Removes an existing item from the list.
`replaceItem()`
    
Replaces an existing item in the list with a new item.
## Examples
>
### Using SVGLengthList
An `SVGLengthList` object can be retrieved from an `SVGAnimatedLengthList` object, which itself is retrievable from many animatable length attributes, such as `SVGTextPositioningElement.x`.
#### HTML
    
    <svg
      viewBox="0 0 200 100"
      xmlns="http://www.w3.org/2000/svg"
      width="200"
      height="100">
      <text id="text1" x="10" y="50">Hello</text>
    </svg>
    <button id="equally-distribute">Equally distribute letters</button>
    <button id="reset-spacing">Reset spacing</button>
    <div>
      <b>Current <code>SVGLengthList</code></b>
      <pre><output id="output"></output></pre>
    </div>
    
#### JavaScript
    
    const text = document.getElementById("text1");
    const output = document.getElementById("output");
    const list = text.x.baseVal;
    function equallyDistribute() {
      list.clear();
      for (let i = 0; i < text.textContent.length; i++) {
        const length = text.ownerSVGElement.createSVGLength();
        length.value = i * 20 + 10;
        list.appendItem(length);
      }
      printList();
    }
    function resetSpacing() {
      const length = text.ownerSVGElement.createSVGLength();
      length.value = 10;
      list.initialize(length);
      printList();
    }
    function printList() {
      output.textContent = "";
      for (let i = 0; i < list.length; i++) {
        output.innerText += `${list.getItem(i).value}\n`;
      }
    }
    printList();
    
    document
      .getElementById("equally-distribute")
      .addEventListener("click", equallyDistribute);
    document
      .getElementById("reset-spacing")
      .addEventListener("click", resetSpacing);
    
#### Result
  * `SVGNumberList`
  * `SVGPointList`
  * `SVGStringList`
  * `SVGTransformList`


# HTMLEmbedElement
The `HTMLEmbedElement` interface provides special properties (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating `<embed>` elements.
Note: This topic describes the `HTMLEmbedElement` interface as defined in the standard. It does not address earlier, non-standardized version of the interface.
EventTarget  Node  Element  HTMLElement  HTMLEmbedElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLEmbedElement.align` Deprecated
    
A string representing an enumerated property indicating alignment of the element's contents with respect to the surrounding context. The possible values are `"left"`, `"right"`, `"center"`, and `"justify"`.
`HTMLEmbedElement.height`
    
A string reflecting the `height` HTML attribute, containing the displayed height of the resource.
`HTMLEmbedElement.name` Deprecated
    
A string representing the name of the embedded object.
`HTMLEmbedElement.src`
    
A string that reflects the `src` HTML attribute, containing the address of the resource.
`HTMLEmbedElement.type`
    
A string that reflects the `type` HTML attribute, containing the type of the resource.
`HTMLEmbedElement.width`
    
A string that reflects the `width` HTML attribute, containing the displayed width of the resource.
## Instance methods
Also inherits methods from its parent interface, `HTMLElement`.
`HTMLEmbedElement.getSVGDocument()`
    
Returns the embedded SVG as a `Document`.
  * The HTML element implementing this interface: `<embed>`


# Web Bluetooth API
The Web Bluetooth API provides the ability to connect and interact with Bluetooth Low Energy peripherals.
Note: This API is not available in Web Workers (not exposed via `WorkerNavigator`).
## Interfaces
`Bluetooth`
    
Provides methods to query Bluetooth availability and request access to devices.
`BluetoothCharacteristicProperties`
    
Provides properties of a particular `BluetoothRemoteGATTCharacteristic`.
`BluetoothDevice`
    
Represents a Bluetooth device inside a particular script execution environment.
`BluetoothRemoteGATTCharacteristic`
    
Represents a GATT Characteristic, which is a basic data element that provides further information about a peripheral's service.
`BluetoothRemoteGATTDescriptor`
    
Represents a GATT Descriptor, which provides further information about a characteristic's value.
`BluetoothRemoteGATTServer`
    
Represents a GATT Server on a remote device.
`BluetoothRemoteGATTService`
    
Represents a service provided by a GATT server, including a device, a list of referenced services, and a list of the characteristics of this service.
## Extensions to other interfaces
The Bluetooth API extends the following APIs, adding the listed features.
### Navigator
`Navigator.bluetooth`
    
Returns a `Bluetooth` object for the current document, providing access to Web Bluetooth API functionality.
## Security considerations
The Web Bluetooth API can only be used in a secure context.
Access to the API is controlled by the Permissions Policy directive `bluetooth`. The default allowlist for the `bluetooth` policy is `self`, which enables Bluetooth usage in same-origin nested frames but prevents access by third-party content by default. Cross-origin access is enabled by specifying the allowed origins in both the `Permissions-Policy: bluetooth` HTTP header and the desired `<iframe>`.
In order to use the feature the user must first grant explicit permission (they will not be prompted for access if it is not allowed for other reasons, such as being blocked by a Permissions Policy). The permission prompt is displayed when calling `Bluetooth.requestDevice()` to request access to a new Bluetooth device for which permission is not granted (the owning global object must also have transient activation). You can use `Bluetooth.getDevices()` to retrieve any devices that have previously been granted permission for the site.
The Permissions API `navigator.permissions.query()` method can be used with the `bluetooth` permission to test whether a site has permission to use Bluetooth devices. The permission state will be `granted`, `denied` or `prompt` (requires user acknowledgement of a prompt):
    
    const btPermission = await navigator.permissions.query({ name: "bluetooth" });
    if (btPermission.state !== "denied") {
      // Do something
    }
    
# BarProp
The `BarProp` interface of the Document Object Model represents the web browser user interface elements that are exposed to scripts in web pages. Each of the following interface elements are represented by a `BarProp` object.
`Window.locationbar`
    
The browser location bar.
`Window.menubar`
    
The browser menu bar.
`Window.personalbar`
    
The browser personal bar.
`Window.scrollbars`
    
The browser scrollbars.
`Window.statusbar`
    
The browser status bar.
`Window.toolbar`
    
The browser toolbar.
The `BarProp` interface is not accessed directly, but via one of these elements.
## Instance properties
`BarProp.visible` Read only
    
A `Boolean`, which is true if the bar represented by the used interface element is visible.
## Examples
The following example prints a `BarProp` object to the console that represents the location bar.
    
    console.log(window.locationbar);
    
# DOMStringList
Note: This feature is available in Web Workers.
The `DOMStringList` interface is a legacy type returned by some APIs and represents a non-modifiable list of strings (`DOMString`).
This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs represent list structures using types based on JavaScript arrays, thus making many array methods available, and at the same time imposing additional semantics on their usage (such as making their items read-only).
These historical reasons do not mean that you as a developer should avoid `DOMStringList`. You don't create `DOMStringList` objects yourself, but you get them from APIs such as `Location.ancestorOrigins`, and these APIs are not deprecated. However, be careful of the semantic differences from a real array.
This interface is used in IndexedDB and in the `Location` API:
  * `IDBDatabase.objectStoreNames`
  * `IDBObjectStore.indexNames`
  * `Location.ancestorOrigins`


## Instance properties
`DOMStringList.length` Read only
    
Returns the size of the list.
## Instance methods
`DOMStringList.item()`
    
Returns a string from the list with the given index.
`DOMStringList.contains()`
    
Returns a boolean indicating whether the given string is in the list.
# MessagePort
Note: This feature is available in Web Workers.
The `MessagePort` interface of the Channel Messaging API represents one of the two ports of a `MessageChannel`, allowing messages to be sent from one port and listening out for them arriving at the other.
`MessagePort` is a transferable object.
EventTarget  MessagePort 
## Instance methods
Inherits methods from its parent, `EventTarget`.
`postMessage()`
    
Sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts.
`start()`
    
Starts the sending of messages queued on the port (only needed when using `EventTarget.addEventListener`; it is implied when using `onmessage`).
`close()`
    
Disconnects the port, so it is no longer active.
## Events
Inherits events from its parent, `EventTarget`.
`message`
    
Fired when a `MessagePort` object receives a message.
`messageerror`
    
Fired when a `MessagePort` object receives a message that can't be deserialized.
## Example
In the following example, you can see a new channel being created using the `MessageChannel()` constructor.
When the IFrame has loaded, we register an `onmessage` handler for `MessageChannel.port1` and transfer `MessageChannel.port2` to the IFrame using the `window.postMessage` method along with a message.
When a message is received back from the IFrame, the `onMessage` function outputs the message to a paragraph.
    
    const channel = new MessageChannel();
    const output = document.querySelector(".output");
    const iframe = document.querySelector("iframe");
    
    // Wait for the iframe to load
    iframe.addEventListener("load", onLoad);
    
    function onLoad() {
      // Listen for messages on port1
      channel.port1.onmessage = onMessage;
    
      // Transfer port2 to the iframe
      iframe.contentWindow.postMessage("Hello from the main page!", "*", [
        channel.port2,
      ]);
    }
    
    // Handle messages received on port1
    function onMessage(e) {
      output.innerHTML = e.data;
    }
    
For a full working example, see our channel messaging basic demo on GitHub (run it live too).
  * Using channel messaging


# FetchEvent
Note: This feature is only available in Service Workers.
This is the event type for `fetch` events dispatched on the service worker global scope. It contains information about the fetch, including the request and how the receiver will treat the response. It provides the `event.respondWith()` method, which allows us to provide a response to this fetch.
Event  ExtendableEvent  FetchEvent 
## Constructor
`FetchEvent()`
    
Creates a new `FetchEvent` object. This constructor is not typically used. The browser creates these objects and provides them to `fetch` event callbacks.
## Instance properties
Inherits properties from its ancestor, `Event`.
`FetchEvent.clientId` Read only
    
The `id` of the same-origin `client` that initiated the fetch.
`FetchEvent.handled` Read only
    
A promise that is pending while the event has not been handled, and fulfilled once it has.
`FetchEvent.isReload` Read only Deprecated Non-standard
    
Returns `true` if the event was dispatched by the user attempting to reload the page, and `false` otherwise.
`FetchEvent.preloadResponse` Read only
    
A `Promise` for a `Response`, or `undefined` if this fetch is not a navigation, or navigation preload is not enabled.
`FetchEvent.replacesClientId` Read only
    
The `id` of the `client` that is being replaced during a page navigation.
`FetchEvent.resultingClientId` Read only
    
The `id` of the `client` that replaces the previous client during a page navigation.
`FetchEvent.request` Read only
    
The `Request` the browser intends to make.
## Instance methods
Inherits methods from its parent, `ExtendableEvent`.
`FetchEvent.respondWith()`
    
Prevent the browser's default fetch handling, and provide (a promise for) a response yourself.
`ExtendableEvent.waitUntil()`
    
Extends the lifetime of the event. Used to notify the browser of tasks that extend beyond the returning of a response, such as streaming and caching.
## Examples
This fetch event uses the browser default for non-GET requests. For GET requests it tries to return a match in the cache, and falls back to the network. If it finds a match in the cache, it asynchronously updates the cache for next time.
    
    self.addEventListener("fetch", (event) => {
      // Let the browser do its default thing
      // for non-GET requests.
      if (event.request.method !== "GET") return;
    
      // Prevent the default, and handle the request ourselves.
      event.respondWith(
        (async () => {
          // Try to get the response from a cache.
          const cache = await caches.open("dynamic-v1");
          const cachedResponse = await cache.match(event.request);
    
          if (cachedResponse) {
            // If we found a match in the cache, return it, but also
            // update the entry in the cache in the background.
            event.waitUntil(cache.add(event.request));
            return cachedResponse;
          }
    
          // If we didn't find a match in the cache, use the network.
          return fetch(event.request);
        })(),
      );
    });
    
  * `fetch` event
  * `Promise`
  * Fetch API


# EcdsaParams
The `EcdsaParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.sign()` or `SubtleCrypto.verify()` when using the ECDSA algorithm.
## Instance properties
`name`
    
A string. This should be set to `ECDSA`.
`hash`
    
A string or an object containing a single property called `name` with a string value. It is an identifier for the digest algorithm to use. This should be one of the following:
  * `SHA-256`: selects the SHA-256 algorithm.
  * `SHA-384`: selects the SHA-384 algorithm.
  * `SHA-512`: selects the SHA-512 algorithm.


Warning: `SHA-1` is also supported here but the SHA-1 algorithm is considered vulnerable and should no longer be used.
## Examples
See the examples for `SubtleCrypto.sign()` or `SubtleCrypto.verify()`.
Browsers that support the "ECDSA" algorithm for the `SubtleCrypto.sign()` and `SubtleCrypto.verify()` methods will support this type.
### api.SubtleCrypto.sign
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`EcdsaParams` 37 7912–79Not supported: RSA-PSS, ECDSA. 34 24 7 37 34 24 7 3.0 37 7  
`ed25519` 137 137 129 121 17Generates randomized signatures as per draft-irtf-cfrg-det-sigs-with-noise, instead of deterministic signatures as per RFC 8032. 137 129 90 17Generates randomized signatures as per draft-irtf-cfrg-det-sigs-with-noise, instead of deterministic signatures as per RFC 8032. No 137 17Generates randomized signatures as per draft-irtf-cfrg-det-sigs-with-noise, instead of deterministic signatures as per RFC 8032.  
### api.SubtleCrypto.verify
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`EcdsaParams` 37 7912–79Not supported: RSA-PSS, ECDSA. 34 24 7 37 34 24 7 3.0 37 7  
`ed25519` 137 137 129 121 17 137 129 90 17 No 137 17  
  * `SubtleCrypto.sign()` and `SubtleCrypto.verify()`.


# TrackEvent
The `TrackEvent` interface of the HTML DOM API is used for events which represent changes to a set of available tracks on an HTML media element; these events are `addtrack` and `removetrack`.
It's important not to confuse `TrackEvent` with the `RTCTrackEvent` interface, which is used for tracks which are part of an `RTCPeerConnection`.
Events based on `TrackEvent` are always sent to one of the media track list types:
  * Events involving video tracks are always sent to the `VideoTrackList` found in `HTMLMediaElement.videoTracks`
  * Events involving audio tracks are always sent to the `AudioTrackList` specified in `HTMLMediaElement.audioTracks`
  * Events affecting text tracks are sent to the `TextTrackList` object indicated by `HTMLMediaElement.textTracks`.

Event  TrackEvent 
## Constructor
`TrackEvent()`
    
Creates and initializes a new `TrackEvent` object with the event type specified, as well as optional additional properties.
## Instance properties
`TrackEvent` is based on `Event`, so properties of `Event` are also available on `TrackEvent` objects.
`track` Read only
    
The DOM track object the event is in reference to. If not `null`, this is always an object of one of the media track types: `AudioTrack`, `VideoTrack`, or `TextTrack`).
## Instance methods
`TrackEvent` has no methods of its own; however, it is based on `Event`, so it provides the methods available on `Event` objects.
## Example
This example sets up a function, `handleTrackEvent()`, which is called for any `addtrack` or `removetrack` event on the first `<video>` element found in the document.
    
    const videoElem = document.querySelector("video");
    
    videoElem.videoTracks.addEventListener("addtrack", handleTrackEvent, false);
    videoElem.videoTracks.addEventListener("removetrack", handleTrackEvent, false);
    videoElem.audioTracks.addEventListener("addtrack", handleTrackEvent, false);
    videoElem.audioTracks.addEventListener("removetrack", handleTrackEvent, false);
    videoElem.textTracks.addEventListener("addtrack", handleTrackEvent, false);
    videoElem.textTracks.addEventListener("removetrack", handleTrackEvent, false);
    
    function handleTrackEvent(event) {
      let trackKind;
    
      if (event.target instanceof VideoTrackList) {
        trackKind = "video";
      } else if (event.target instanceof AudioTrackList) {
        trackKind = "audio";
      } else if (event.target instanceof TextTrackList) {
        trackKind = "text";
      } else {
        trackKind = "unknown";
      }
    
      switch (event.type) {
        case "addtrack":
          console.log(`Added a ${trackKind} track`);
          break;
        case "removetrack":
          console.log(`Removed a ${trackKind} track`);
          break;
      }
    }
    
The event handler uses the JavaScript `instanceof` operator to determine which type of track the event occurred on, then outputs to console a message indicating what kind of track it is and whether it's being added to or removed from the element.
# PushSubscriptionOptions
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `PushSubscriptionOptions` interface of the Push API represents the options associated with a push subscription.
The read-only `PushSubscriptionOptions` object is returned by calling `PushSubscription.options` on a `PushSubscription`. This interface has no constructor of its own.
## Instance properties
`PushSubscriptionOptions.userVisibleOnly` Read only
    
A boolean value indicating that the returned push subscription will only be used for messages whose effect is made visible to the user.
`PushSubscriptionOptions.applicationServerKey` Read only
    
A public key your push server will use to send messages to client apps via a push server.
## Examples
Calling `PushSubscription.options` on a `PushSubscription` returns a `PushSubscriptionOptions` object. In the example below this is printed to the console.
    
    navigator.serviceWorker.ready.then((reg) => {
      reg.pushManager.getSubscription().then((subscription) => {
        const options = subscription.options;
        console.log(options); // a PushSubscriptionOptions object
      });
    });
    
# RTCIceCandidatePair
The `RTCIceCandidatePair` dictionary describes a pair of ICE candidates which together comprise a description of a viable connection between two WebRTC endpoints. It is used as the return value from `RTCIceTransport.getSelectedCandidatePair()` to identify the currently-selected candidate pair identified by the ICE agent.
## Instance properties
`local`
    
An `RTCIceCandidate` describing the configuration of the local end of the connection.
`remote`
    
The `RTCIceCandidate` describing the configuration of the remote end of the connection.
## Examples
See `RTCIceTransport.onselectedcandidatepairchange` for example code.
This feature does not appear to be defined in any specification.>
# CSSKeyframeRule
The `CSSKeyframeRule` interface describes an object representing a set of styles for a given keyframe. It corresponds to the contents of a single keyframe of a `@keyframes` at-rule.
CSSRule  CSSKeyframeRule 
## Instance properties
Inherits properties from its ancestor `CSSRule`.
`CSSKeyframeRule.keyText`
    
Represents the key of the keyframe, like `'10%'`, `'75%'`. The `from` keyword maps to `'0%'` and the `to` keyword maps to `'100%'`.
`CSSKeyframeRule.style` Read only
    
Returns a `CSSStyleDeclaration` of the CSS style associated with the keyframe.
## Instance methods
No specific methods; inherits methods from its ancestor `CSSRule`.
## Examples
The CSS includes a keyframes at-rule. This will be the first `CSSRule` returned by `document.styleSheets[0].cssRules`. `myRules[0]` returns a `CSSKeyframesRule` object, which will contain individual `CSSKeyFrameRule` objects for each keyframe.
    
    @keyframes slide-in {
      from {
        transform: translateX(0%);
      }
    
      to {
        transform: translateX(100%);
      }
    }
    
    
    let myRules = document.styleSheets[0].cssRules;
    let keyframes = myRules[0]; // a CSSKeyframesRule
    console.log(keyframes[0]); // a CSSKeyframeRule representing an individual keyframe.
    
  * `@keyframes`
  * `CSSKeyFramesRule`


# AnimationPlaybackEvent
The AnimationPlaybackEvent interface of the Web Animations API represents animation events.
As animations play, they report changes to their `playState` through animation events.
Event  AnimationPlaybackEvent 
## Constructor
`AnimationPlaybackEvent()`
    
Constructs a new `AnimationPlaybackEvent` object instance.
## Instance properties
`AnimationPlaybackEvent.currentTime` Read only
    
The current time of the animation that generated the event.
`AnimationPlaybackEvent.timelineTime` Read only
    
The time value of the timeline of the animation that generated the event.
  * Web Animations API
  * `Animation.playState`


# Push API
Note: This feature is available in Web Workers.
The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content.
## Push concepts and usage
Warning: When implementing PushManager subscriptions, it is vitally important that you protect against CSRF/XSRF issues in your app. See the following articles for more information:
  * Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet
  * Preventing CSRF and XSRF Attacks


For an app to receive push messages, it has to have an active service worker. When the service worker is active, it can subscribe to push notifications, using `PushManager.subscribe()`.
The resulting `PushSubscription` includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data.
The service worker will be started as necessary to handle incoming push messages, which are delivered to the `onpush` event handler. This allows apps to react to push messages being received, for example, by displaying a notification (using `ServiceWorkerRegistration.showNotification()`.)
Each subscription is unique to a service worker. The endpoint for the subscription is a unique capability URL: knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret, or other applications might be able to send push messages to your application.
Activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery. Different browsers have different schemes for handling this, there is currently no standard mechanism. Firefox allows a limited number (quota) of push messages to be sent to an application, although Push messages that generate notifications are exempt from this limit. The limit is refreshed each time the site is visited. In Chrome there are no limits.
## Interfaces
`PushEvent`
    
Represents a push action, sent to the global scope of a `ServiceWorker`. It contains information sent from an application to a `PushSubscription`.
`PushManager`
    
Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications.
`PushMessageData`
    
Provides access to push data sent by a server, and includes methods to manipulate the received data.
`PushSubscription`
    
Provides a subscription's URL endpoint, and allows unsubscribing from a push service.
`PushSubscriptionOptions`
    
Represents the options associated with the push subscription.
## Service worker additions
The following additions to the Service Worker API have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.
`ServiceWorkerRegistration.pushManager` Read only
    
Returns a reference to the `PushManager` interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.
`onpush`
    
An event handler fired whenever a `push` event occurs; that is, whenever a server push message is received.
`onpushsubscriptionchange`
    
An event handler fired whenever a `pushsubscriptionchange` event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g., when a push service sets an expiration time.)
## Examples
Mozilla's ServiceWorker Cookbook contains many useful Push examples.
>
### api.PushEvent
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`PushEvent` 42 17 44 37 16Notifications are supported on macOS Ventura and later. 42 48 37 16.4Notifications are supported in web apps saved to the home screen. 4.0 No NoNotifications are supported in web apps saved to the home screen.  
`Push_API` 42 17 44 37 16Notifications are supported on macOS Ventura and later. 42 48 37 16.4Notifications are supported in web apps saved to the home screen. 4.0 No NoNotifications are supported in web apps saved to the home screen.  
`data` 50 17 44 37 16Notifications are supported on macOS Ventura and later. 50 48 37 16.4Notifications are supported in web apps saved to the home screen. 5.0 No NoNotifications are supported in web apps saved to the home screen.  
### api.PushMessageData
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Push_API` 50 17 44 37 16Notifications are supported on macOS Ventura and later. 50 48 37 16.4Notifications are supported in web apps saved to the home screen. 5.0 No NoNotifications are supported in web apps saved to the home screen.  
`arrayBuffer` 50 17 44 37 16Notifications are supported on macOS Ventura and later. 50 48 37 16.4Notifications are supported in web apps saved to the home screen. 5.0 No NoNotifications are supported in web apps saved to the home screen.  
`blob` 50 17 44 37 16Notifications are supported on macOS Ventura and later. 50 48 37 16.4Notifications are supported in web apps saved to the home screen. 5.0 No NoNotifications are supported in web apps saved to the home screen.  
`bytes` 132 132 128 117 18 132 128 87 18 No No No  
`json` 50 17 44 37 16Notifications are supported on macOS Ventura and later. 50 48 37 16.4Notifications are supported in web apps saved to the home screen. 5.0 No NoNotifications are supported in web apps saved to the home screen.  
`text` 50 17 44 37 16Notifications are supported on macOS Ventura and later. 50 48 37 16.4Notifications are supported in web apps saved to the home screen. 5.0 No NoNotifications are supported in web apps saved to the home screen.  
  * Sending VAPID identified WebPush Notifications via Mozilla's Push Service
  * Push notifications overview
  * Service Worker API


# EcKeyGenParams
The `EcKeyGenParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.generateKey()`, when generating any elliptic-curve-based key pair: that is, when the algorithm is identified as either of ECDSA or ECDH.
## Instance properties
`name`
    
A string. This should be set to `ECDSA` or `ECDH`, depending on the algorithm you want to use.
`namedCurve`
    
A string representing the name of the elliptic curve to use. This may be any of the following names for NIST-approved curves:
  * `P-256`
  * `P-384`
  * `P-521`


## Examples
See the examples for `SubtleCrypto.generateKey()`.
Browsers that support the "ECDH" or "ECDSA" algorithms for the `SubtleCrypto.generateKey()` method will support this type.
  * `SubtleCrypto.generateKey()`.


# MediaKeyMessageEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MediaKeyMessageEvent` interface of the Encrypted Media Extensions API contains the content and related data when the content decryption module generates a message for the session.
Event  MediaKeyMessageEvent 
## Constructor
`MediaKeyMessageEvent()`
    
Creates a new instance of `MediaKeyMessageEvent`.
## Instance properties
Inherits properties from its parent, `Event`.
`MediaKeyMessageEvent.message` Read only
    
Returns an `ArrayBuffer` with a message from the content decryption module. Messages vary by key system.
`MediaKeyMessageEvent.messageType` Read only
    
Indicates the type of message. May be one of `license-request`, `license-renewal`, `license-release`, or `individualization-request`.
## Instance methods
Inherits methods from its parent, `Event`.
## Examples
    
    // TBD
    
# WebTransport
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `WebTransport` interface of the WebTransport API provides functionality to enable a user agent to connect to an HTTP/3 server, initiate reliable and unreliable transport in either or both directions, and close the connection once it is no longer needed.
## Constructor
`WebTransport()`
    
Creates a new `WebTransport` object instance.
## Instance properties
`closed` Read only
    
Returns a promise that resolves when the transport is closed.
`datagrams` Read only
    
Returns a `WebTransportDatagramDuplexStream` instance that can be used to send and receive datagrams.
`congestionControl` Read only Experimental
    
Returns a string that indicates the application preference for either high throughput or low-latency when sending data.
`incomingBidirectionalStreams` Read only
    
Represents one or more bidirectional streams opened by the server. Returns a `ReadableStream` of `WebTransportBidirectionalStream` objects. Each one can be used to read data from the server and write data back to it.
`incomingUnidirectionalStreams` Read only
    
Represents one or more unidirectional streams opened by the server. Returns a `ReadableStream` of `WebTransportReceiveStream` objects. Each one can be used to read data from the server.
`ready` Read only
    
Returns a promise that resolves when the transport is ready to use.
`reliability` Read only Experimental
    
Returns a string that indicates whether the connection supports reliable transports only, or whether it also supports unreliable transports (such as UDP).
## Instance methods
`close()`
    
Closes an ongoing WebTransport session.
`createBidirectionalStream()`
    
Asynchronously opens a bidirectional stream (`WebTransportBidirectionalStream`) that can be used to read from and write to the server.
`createUnidirectionalStream()`
    
Asynchronously opens a unidirectional stream (`WritableStream`) that can be used to write to the server.
`getStats()` Experimental
    
Asynchronously returns a `Promise` that fulfills with an object containing HTTP/3 connection statistics.
## Examples
The example code below shows how you'd connect to an HTTP/3 server by passing its URL to the `WebTransport()` constructor. Note that the scheme needs to be HTTPS, and the port number needs to be explicitly specified. Once the `WebTransport.ready` promise fulfills, you can start using the connection.
    
    async function initTransport(url) {
      // Initialize transport connection
      const transport = new WebTransport(url);
    
      // The connection can be used once ready fulfills
      await transport.ready;
      return transport;
    }
    
You can respond to the connection closing by waiting for the `WebTransport.closed` promise to fulfill. Errors returned by `WebTransport` operations are of type `WebTransportError`, and contain additional data on top of the standard `DOMException` set.
The `closeTransport()` method below shows a possible implementation. Within a `try...catch` block it uses `await` to wait for the `closed` promise to fulfill or reject, and then reports whether or not the connection closed intentionally or due to error.
    
    async function closeTransport(transport) {
      // Respond to connection closing
      try {
        await transport.closed;
        console.log(`The HTTP/3 connection to ${url} closed gracefully.`);
      } catch (error) {
        console.error(`The HTTP/3 connection to ${url} closed due to ${error}.`);
      }
    }
    
We might call the asynchronous functions above in their own asynchronous function, as shown below.
    
    // Use the transport
    async function useTransport(url) {
      const transport = await initTransport(url);
    
      // Use the transport object to send and receive data
      // …
    
      // When done, close the transport
      await closeTransport(transport);
    }
    
    const url = "https://example.com:4999/wt";
    useTransport(url);
    
For other example code, see the individual property and method pages.
  * Using WebTransport
  * WebSockets API
  * Streams API
  * WebTransport over HTTP/3


# CSSFontFaceRule
The `CSSFontFaceRule` interface represents an `@font-face` at-rule.
CSSRule  CSSFontFaceRule 
## Instance properties
Inherits properties from its ancestor `CSSRule`.
`CSSFontFaceRule.style` Read only
    
Returns a `CSSStyleDeclaration`.
## Instance methods
Inherits methods from its ancestor `CSSRule`.
## Examples
This example uses the CSS found as an example on the `@font-face` page. The first `CSSRule` returned will be a `CSSFontFaceRule`.
    
    @font-face {
      font-family: MyHelvetica;
      src:
        local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
        url("MgOpenModernaBold.ttf");
      font-weight: bold;
    }
    
    
    const myRules = document.styleSheets[0].cssRules;
    console.log(myRules[0]); // A CSSFontFaceRule
    
# TaskSignal
Note: This feature is available in Web Workers.
The `TaskSignal` interface of the Prioritized Task Scheduling API represents a signal object that allows you to communicate with a prioritized task, and abort it or change the priority (if required) via a `TaskController` object.
An object of this type is created, and associated with, a `TaskController`. The initial priority of the signal may be set by specifying it as an argument to the `TaskController()` constructor (by default it is `"user-visible"`). The priority can be changed by calling `TaskController.setPriority()` on the controller.
The signal may be passed as the `options.signal` argument in `Scheduler.postTask()`, after which it's associated controller can be used to abort the task. If the task priority is mutable, the controller can also be used to change the task's priority. Abortable tasks that do not need the priority to change may instead specify an `AbortSignal` as the `options.signal` argument.
EventTarget  AbortSignal  TaskSignal 
## Instance properties
The `TaskSignal` interface also inherits properties from its parent interface, `AbortSignal`.
`TaskSignal.priority` Read only
    
Returns the priority of the signal.
## Static methods
The `TaskSignal` interface inherits methods from its parent interface, `AbortSignal`.
`TaskSignal.any()`
    
Returns an `TaskSignal` that aborts when any of the given abort signals abort.
## Instance methods
The `TaskSignal` interface inherits methods from its parent interface, `AbortSignal`.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`prioritychange`
    
Fired when the priority is changed. This is triggered by calling `TaskController.setPriority()` on the associated controller.
## Examples
Examples for how the `TaskSignal` is created and used for prioritizing and aborting tasks can be found here:
  * Prioritized Task Scheduling API > Examples
  * `TaskController` > Examples
  * `TaskSignal: prioritychange` event > Examples


# SpeechSynthesisEvent
The `SpeechSynthesisEvent` interface of the Web Speech API contains information about the current state of `SpeechSynthesisUtterance` objects that have been processed in the speech service.
Event  SpeechSynthesisEvent 
## Constructor
`SpeechSynthesisEvent()`
    
Creates a new `SpeechSynthesisEvent`.
## Instance properties
The `SpeechSynthesisEvent` interface also inherits properties from its parent interface, `Event`.
`SpeechSynthesisEvent.charIndex` Read only
    
Returns the index position of the character in the `SpeechSynthesisUtterance.text` that was being spoken when the event was triggered.
`SpeechSynthesisEvent.charLength` Read only
    
Returns the number of characters left to be spoken after the `charIndex` position, if the speaking engine supports it. Returns 0 if the speaking engine can't provide the information.
`SpeechSynthesisEvent.elapsedTime` Read only
    
Returns the elapsed time in seconds after the `SpeechSynthesisUtterance.text` started being spoken that the event was triggered at.
`SpeechSynthesisEvent.name` Read only
    
Returns the name associated with certain types of events occurring as the `SpeechSynthesisUtterance.text` is being spoken: the name of the SSML marker reached in the case of a `mark` event, or the type of boundary reached in the case of a `boundary` event.
`SpeechSynthesisEvent.utterance` Read only
    
Returns the `SpeechSynthesisUtterance` instance that the event was triggered on.
## Instance methods
The `SpeechSynthesisEvent` interface also inherits methods from its parent interface, `Event`.
## Examples
    
    utterThis.onpause = (event) => {
      const char = event.utterance.text.charAt(event.charIndex);
      console.log(
        `Speech paused at character ${event.charIndex} of "${event.utterance.text}", which is "${char}".`,
      );
    };
    
    utterThis.onboundary = (event) => {
      console.log(
        `${event.name} boundary reached after ${event.elapsedTime} seconds.`,
      );
    };
    
  * Web Speech API


# FederatedCredentialInit
The `FederatedCredentialInit` dictionary represents the object passed to `CredentialsContainer.create()` as the value of the `federated` option: that is, when creating a `FederatedCredential` object representing a credential associated with a federated identify provider.
Note: The Federated Credential Management API (FedCM) supersedes the `FederatedCredential` interface in favor of the `IdentityCredential` interface.
The `FederatedCredentialInit` dictionary is not used when working with the `IdentityCredential` interface.
## Instance properties
`iconURL` Optional
    
A string representing the URL of an icon or avatar to be associated with the credential.
`id`
    
A string representing a unique ID for the credential.
`name` Optional
    
A string representing the credential username.
`origin`
    
A string representing the credential's origin. `FederatedCredential` objects are origin-bound, which means that they will only be usable on the specified origin they were intended to be used on.
`protocol` Optional
    
A string representing the protocol of the credentials' federated identity provider (for example, `"openidconnect"`).
`provider`
    
A string representing the credentials' federated identity provider (for example `"https://www.facebook.com"` or `"https://accounts.google.com"`).
## Examples
>
### Creating a federated identity credential
    
    const credInit = {
      id: "1234",
      name: "Serpentina",
      origin: "https://example.org",
      protocol: "openidconnect",
      provider: "https://provider.example.org",
    };
    
    const makeCredential = document.querySelector("#make-credential");
    
    makeCredential.addEventListener("click", async () => {
      const cred = await navigator.credentials.create({
        federated: credInit,
      });
      console.log(cred.name);
      console.log(cred.provider);
    });
    
# RTCTransportStats
The `RTCTransportStats` dictionary of the WebRTC API provides information about the transport (`RTCDtlsTransport` and its underlying `RTCIceTransport`) used by a particular candidate pair.
The BUNDLE feature is an SDP extension that allows negotiation to use a single transport for sending and receiving media described by multiple SDP media descriptions. If the remote endpoint is aware of this feature, all `MediaStreamTrack` and data channels are bundled onto a single transport at the completion of negotiation. This is true for current browsers, but if connecting to an older endpoint that is not BUNDLE-aware, then separate transports might be used for different media. The policy to use in the negotiation is configured in the `RTCPeerConnection` constructor.
These statistics can be obtained by iterating the `RTCStatsReport` returned by `RTCPeerConnection.getStats()` until you find a report with the `type` of `transport`.
## Instance properties
`bytesReceived` Optional
    
The total number of payload bytes received on this transport (bytes received, not including headers, padding or ICE connectivity checks).
`bytesSent` Optional
    
The total number of payload bytes sent on this transport (bytes sent, not including headers, padding or ICE connectivity checks).
`dtlsCipher` Optional
    
A string indicating the name of the cipher suite used for the DTLS transport, such as `TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256`.
`dtlsRole` Optional Experimental
    
A string indicating the DTLS role of the associated `RTCPeerConnection`. This is one of: `client`, `server`, `unknown` (before the DTLS negotiation starts).
`dtlsState`
    
A string indicating the current `state` of the underlying `RTCDtlsTransport`. This is one of: `new`, `connecting`, `connected`, `closed`, `failed`.
`iceLocalUsernameFragment` Optional Experimental
    
A string indicating the local username fragment that uniquely identifies the ICE interaction session managed by this transport.
`iceRole` Optional Experimental
    
A string indicating the ICE `role` of the underlying `RTCIceTransport`. This is one of: `controlled`, `controlling`, or `unknown`.
`iceState` Optional Experimental
    
A string indicating the current `state` of the underlying `RTCIceTransport`. This is one of: `new`, `checking`, `connected`, `completed`, `disconnected`, `failed`, or `closed`.
`localCertificateId` Optional
    
A string containing the id of the local certificate used by this transport. Only present for DTLS transports, and after DTLS has been negotiated.
`packetsReceived` Optional Experimental
    
The total number of packets received on this transport.
`packetsSent` Optional Experimental
    
The total number of packets sent over this transport.
`remoteCertificateId` Optional
    
A string containing the id or the remote certificate used by this transport. Only present for DTLS transports, and after DTLS has been negotiated.
`selectedCandidatePairChanges` Optional
    
The number of times that the selected candidate pair of this transport has changed. The value is initially zero and increases whenever a candidate pair selected or lost.
`selectedCandidatePairId` Optional
    
A string containing the unique identifier for the object that was inspected to produce the `RTCIceCandidatePairStats` associated with this transport.
`srtpCipher` Optional
    
A string indicating the descriptive name of the protection profile used for the Secure Real-time Transport Protocol (SRTP) transport.
`tlsVersion` Optional
    
A string containing the negotiated TLS version. This is present for DTLS transports, and only exists after DTLS has been negotiated.
### Common instance properties
The following properties are common to all WebRTC statistics objects.
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"transport"`, indicating the type of statistics that the object contains.
## Examples
This example shows a function to return the transport statistics, or `null` if no statistics are provided.
The function waits for the result of a call to `RTCPeerConnection.getStats()` and then iterates the returned `RTCStatsReport` to get just the stats of type `"transport"`. It then returns the statistics, or `null`, using the data in the report.
    
    async function numberOpenConnections (peerConnection) {
      const stats = await peerConnection.getStats();
      let transportStats = null;
    
      stats.forEach((report) => {
        if (report.type === "transport") {
          transportStats = report;
          break;
        }
      });
    
    return transportStats
    }
    
# IntersectionObserver
The `IntersectionObserver` interface of the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. The ancestor element or viewport is referred to as the root.
When an `IntersectionObserver` is created, it's configured to watch for given ratios of visibility within the root. The configuration cannot be changed once the `IntersectionObserver` is created, so a given observer object is only useful for watching for specific changes in degree of visibility; however, you can watch multiple target elements with the same observer.
## Constructor
`IntersectionObserver()`
    
Creates a new `IntersectionObserver` object which will execute a specified callback function when it detects that a target element's visibility has crossed one or more thresholds.
## Instance properties
`IntersectionObserver.delay` Read only Experimental
    
An integer indicating the minimum delay between notifications from this observer.
`IntersectionObserver.root` Read only
    
The `Element` or `Document` whose bounds are used as the bounding box when testing for intersection. If no `root` value was passed to the constructor or its value is `null`, the top-level document's viewport is used.
`IntersectionObserver.rootMargin` Read only
    
An offset rectangle applied to the root's bounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes. The value returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements. Each offset can be expressed in pixels (`px`) or percentages (`%`). The default is "0px 0px 0px 0px".
`IntersectionObserver.scrollMargin` Read only
    
An offset rectangle applied to each scroll container on the path from intersection root to target, effectively shrinking or growing the clip rectangles used to calculate intersections. The value returned by this property may not be the same as the one specified when calling the constructor.
`IntersectionObserver.thresholds` Read only
    
A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no value was passed to the constructor, 0 is used.
`IntersectionObserver.trackVisibility` Read only Experimental
    
A boolean indicating whether this `IntersectionObserver` is checking that the target does not have compromised visibility.
## Instance methods
`IntersectionObserver.disconnect()`
    
Stops the `IntersectionObserver` object from observing any target.
`IntersectionObserver.observe()`
    
Tells the `IntersectionObserver` a target element to observe.
`IntersectionObserver.takeRecords()`
    
Returns an array of `IntersectionObserverEntry` objects for all observed targets.
`IntersectionObserver.unobserve()`
    
Tells the `IntersectionObserver` to stop observing a particular target element.
## Examples
    
    const intersectionObserver = new IntersectionObserver((entries) => {
      // If intersectionRatio is 0, the target is out of view
      // and we do not need to do anything.
      if (entries[0].intersectionRatio <= 0) return;
    
      loadItems(10);
      console.log("Loaded new items");
    });
    // start observing
    intersectionObserver.observe(document.querySelector(".scrollerFooter"));
    
  * `MutationObserver`
  * `PerformanceObserver`
  * `ResizeObserver`


# SVGFESpecularLightingElement
The `SVGFESpecularLightingElement` interface corresponds to the `<feSpecularLighting>` element.
EventTarget  Node  Element  SVGElement  SVGFESpecularLightingElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFESpecularLightingElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFESpecularLightingElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFESpecularLightingElement.kernelUnitLengthX` Read only
    
An `SVGAnimatedNumber` corresponding to the X component of the `kernelUnitLength` attribute of the given element.
`SVGFESpecularLightingElement.kernelUnitLengthY` Read only
    
An `SVGAnimatedNumber` corresponding to the Y component of the `kernelUnitLength` attribute of the given element.
`SVGFESpecularLightingElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFESpecularLightingElement.specularConstant` Read only
    
An `SVGAnimatedNumber` corresponding to the `specularConstant` attribute of the given element.
`SVGFESpecularLightingElement.specularExponent` Read only
    
An `SVGAnimatedNumber` corresponding to the `specularExponent` attribute of the given element.
`SVGFESpecularLightingElement.surfaceScale` Read only
    
An `SVGAnimatedNumber` corresponding to the `surfaceScale` attribute of the given element.
`SVGFESpecularLightingElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFESpecularLightingElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFESpecularLightingElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
  * `<feSpecularLighting>`


# WebSocket
Note: This feature is available in Web Workers.
The `WebSocket` object provides the API for creating and managing a WebSocket connection to a server, as well as for sending and receiving data on the connection.
To construct a `WebSocket`, use the `WebSocket()` constructor.
Note: The `WebSocket` API has no way to apply backpressure, therefore when messages arrive faster than the application can process them, the application will either fill up the device's memory by buffering those messages, become unresponsive due to 100% CPU usage, or both. For an alternative that provides backpressure automatically, see `WebSocketStream`.
EventTarget  WebSocket 
## Constructor
`WebSocket()`
    
Returns a newly created `WebSocket` object.
## Instance properties
`WebSocket.binaryType`
    
The binary data type used by the connection.
`WebSocket.bufferedAmount` Read only
    
The number of bytes of queued data.
`WebSocket.extensions` Read only
    
The extensions selected by the server.
`WebSocket.protocol` Read only
    
The sub-protocol selected by the server.
`WebSocket.readyState` Read only
    
The current state of the connection.
`WebSocket.url` Read only
    
The absolute URL of the WebSocket.
## Instance methods
`WebSocket.close()`
    
Closes the connection.
`WebSocket.send()`
    
Enqueues data to be transmitted.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`close`
    
Fired when a connection with a `WebSocket` is closed. Also available via the `onclose` property
`error`
    
Fired when a connection with a `WebSocket` has been closed because of an error, such as when some data couldn't be sent. Also available via the `onerror` property.
`message`
    
Fired when data is received through a `WebSocket`. Also available via the `onmessage` property.
`open`
    
Fired when a connection with a `WebSocket` is opened. Also available via the `onopen` property.
## Examples
    
    // Create WebSocket connection.
    const socket = new WebSocket("ws://localhost:8080");
    
    // Connection opened
    socket.addEventListener("open", (event) => {
      socket.send("Hello Server!");
    });
    
    // Listen for messages
    socket.addEventListener("message", (event) => {
      console.log("Message from server ", event.data);
    });
    
  * Writing WebSocket client applications


# SharedWorker
The `SharedWorker` interface represents a specific kind of worker that can be accessed from several browsing contexts, such as several windows, iframes or even workers. They implement an interface different than dedicated workers and have a different global scope, `SharedWorkerGlobalScope`.
Note: If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host and port).
EventTarget  SharedWorker 
## Constructors
`SharedWorker()`
    
Creates a shared web worker that executes the script at the specified URL.
## Instance properties
Inherits properties from its parent, `EventTarget`.
`SharedWorker.port` Read only
    
Returns a `MessagePort` object used to communicate with and control the shared worker.
## Events
`error`
    
Fires when an error occurs in the shared worker.
## Instance methods
Inherits methods from its parent, `EventTarget`.
## Example
In our Basic shared worker example (run shared worker), we have two HTML pages, each of which uses some JavaScript to perform a simple calculation. The different scripts are using the same worker file to perform the calculation — they can both access it, even if their pages are running inside different windows.
The following code snippet shows creation of a `SharedWorker` object using the `SharedWorker()` constructor. Both scripts contain this:
    
    const myWorker = new SharedWorker("worker.js");
    
Note: Once a shared worker is created, any script running in the same origin can obtain a reference to that worker and communicate with it. The shared worker will be alive as long as its global scope's owner set (a set of `Document` and `WorkerGlobalScope` objects) is not empty (for example, if there is any live page holding a reference to it, maybe through `new SharedWorker()`). To read more about shared worker lifetime, see The worker's lifetime section of the HTML specification.
Both scripts then access the worker through a `MessagePort` object created using the `SharedWorker.port` property. If the onmessage event is attached using addEventListener, the port is manually started using its `start()` method:
    
    myWorker.port.start();
    
When the port is started, both scripts post messages to the worker and handle messages sent from it using `port.postMessage()` and `port.onmessage`, respectively:
Note: You can use browser devtools to debug your SharedWorker, by entering a URL in your browser address bar to access the devtools workers inspector; for example, in Chrome, the URL `chrome://inspect/#workers`, and in Firefox, the URL `about:debugging#workers`.
    
    [first, second].forEach((input) => {
      input.onchange = () => {
        myWorker.port.postMessage([first.value, second.value]);
        console.log("Message posted to worker");
      };
    });
    
    myWorker.port.onmessage = (e) => {
      result1.textContent = e.data;
      console.log("Message received from worker");
    };
    
Inside the worker we use the `onconnect` handler to connect to the same port discussed above. The ports associated with that worker are accessible in the `connect` event's `ports` property — we then use `MessagePort` `start()` method to start the port, and the `onmessage` handler to deal with messages sent from the main threads.
    
    onconnect = (e) => {
      const port = e.ports[0];
    
      port.addEventListener("message", (e) => {
        const workerResult = `Result: ${e.data[0] * e.data[1]}`;
        port.postMessage(workerResult);
      });
    
      port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
    };
    
  * `Worker`


# SpeechGrammarList
The `SpeechGrammarList` interface of the Web Speech API represents a list of `SpeechGrammar` objects containing words or patterns of words that we want the recognition service to recognize.
Grammar is defined using JSpeech Grammar Format (JSGF.) Other formats may also be supported in the future.
## Constructor
`SpeechGrammarList()` Experimental
    
Creates a new `SpeechGrammarList` object.
## Instance properties
`SpeechGrammarList.length` Read only Experimental
    
Returns the number of `SpeechGrammar` objects contained in the `SpeechGrammarList`.
## Instance methods
`SpeechGrammarList.item()` Experimental
    
Standard getter — allows individual `SpeechGrammar` objects to be retrieved from the `SpeechGrammarList` using array syntax.
`SpeechGrammarList.addFromURI()` Experimental
    
Takes a grammar present at a specific URI and adds it to the `SpeechGrammarList` as a new `SpeechGrammar` object.
`SpeechGrammarList.addFromString()` Experimental
    
Adds a grammar in a string to the `SpeechGrammarList` as a new `SpeechGrammar` object.
## Examples
In our simple Speech color changer example, we create a new `SpeechRecognition` object instance using the `SpeechRecognition()` constructor, create a new `SpeechGrammarList`, add our grammar string to it using the `SpeechGrammarList.addFromString` method, and set it to be the grammar that will be recognized by the `SpeechRecognition` instance using the `SpeechRecognition.grammars` property.
    
    const grammar =
      "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
    const recognition = new SpeechRecognition();
    const speechRecognitionList = new SpeechGrammarList();
    speechRecognitionList.addFromString(grammar, 1);
    recognition.grammars = speechRecognitionList;
    
  * Web Speech API


# HTMLObjectElement
The `HTMLObjectElement` interface provides special properties and methods (beyond those on the `HTMLElement` interface it also has available to it by inheritance) for manipulating the layout and presentation of `<object>` element, representing external resources.
EventTarget  Node  Element  HTMLElement  HTMLObjectElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLObjectElement.align` Deprecated
    
A string representing an enumerated property indicating alignment of the element's contents with respect to the surrounding context. The possible values are `"left"`, `"right"`, `"justify"`, and `"center"`.
`HTMLObjectElement.archive` Deprecated
    
A string that reflects the `archive` HTML attribute, containing a list of archives for resources for this object.
`HTMLObjectElement.border` Deprecated
    
A string that reflects the `border` HTML attribute, specifying the width of a border around the object.
`HTMLObjectElement.code` Deprecated
    
A string representing the name of an applet class file, containing either the applet's subclass, or the path to get to the class, including the class file itself.
`HTMLObjectElement.codeBase` Deprecated
    
A string that reflects the `codebase` HTML attribute, specifying the base path to use to resolve relative URIs.
`HTMLObjectElement.codeType` Deprecated
    
A string that reflects the `codetype` HTML attribute, specifying the content type of the data.
`HTMLObjectElement.contentDocument` Read only
    
Returns a `Document` representing the active document of the object element's nested browsing context, if any; otherwise `null`.
`HTMLObjectElement.contentWindow` Read only
    
Returns a WindowProxy representing the window proxy of the object element's nested browsing context, if any; otherwise `null`.
`HTMLObjectElement.data`
    
Returns a string that reflects the `data` HTML attribute, specifying the address of a resource's data.
`HTMLObjectElement.declare` Deprecated
    
A boolean value that reflects the `declare` HTML attribute, indicating that this is a declaration, not an instantiation, of the object.
`HTMLObjectElement.form` Read only
    
Returns a `HTMLFormElement` representing the object element's form owner, or null if there isn't one.
`HTMLObjectElement.height`
    
Returns a string that reflects the `height` HTML attribute, specifying the displayed height of the resource in CSS pixels.
`HTMLObjectElement.hspace` Deprecated
    
A `long` representing the horizontal space in pixels around the control.
`HTMLObjectElement.name`
    
Returns a string that reflects the `name` HTML attribute, specifying the name of the browsing context.
`HTMLObjectElement.standby` Deprecated
    
A string that reflects the `standby` HTML attribute, specifying a message to display while the object loads.
`HTMLObjectElement.type`
    
A string that reflects the `type` HTML attribute, specifying the MIME type of the resource.
`HTMLObjectElement.useMap` Deprecated
    
A string that reflects the `usemap` HTML attribute, specifying a `<map>` element to use.
`HTMLObjectElement.validationMessage` Read only
    
Returns a string representing a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation (`willValidate` is `false`), or it satisfies its constraints.
`HTMLObjectElement.validity` Read only
    
Returns a `ValidityState` with the validity states that this element is in.
`HTMLObjectElement.vspace` Deprecated
    
A `long` representing the horizontal space in pixels around the control.
`HTMLObjectElement.width`
    
A string that reflects the `width` HTML attribute, specifying the displayed width of the resource in CSS pixels.
`HTMLObjectElement.willValidate` Read only
    
Returns a boolean value that indicates whether the element is a candidate for constraint validation. Always `false` for `HTMLObjectElement` objects.
## Instance methods
Inherits methods from its parent, `HTMLElement`.
`HTMLObjectElement.checkValidity()`
    
Always returns `true` because `<object>` elements are never candidates for constraint validation.
`HTMLObjectElement.getSVGDocument()`
    
Returns the embedded SVG as a `Document`.
`HTMLObjectElement.reportValidity()`
    
Always returns `true` because `<object>` elements are never candidates for constraint validation.
`HTMLObjectElement.setCustomValidity()`
    
Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
  * The HTML element implementing this interface: `<object>`


# PushMessageData
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is only available in Service Workers.
The `PushMessageData` interface of the Push API provides methods which let you retrieve the push data sent by a server in various formats.
Unlike the similar methods in the Fetch API, which only allow the method to be invoked once, these methods can be called multiple times.
Messages received through the Push API are sent encrypted by push services and then automatically decrypted by browsers before they are made accessible through the methods of the `PushMessageData` interface.
## Instance properties
None.
## Instance methods
`PushMessageData.arrayBuffer()`
    
Extracts the data as an `ArrayBuffer` object.
`PushMessageData.blob()`
    
Extracts the data as a `Blob` object.
`PushMessageData.bytes()`
    
Extracts the data as a `Uint8Array` object.
`PushMessageData.json()`
    
Extracts the data as a JSON object.
`PushMessageData.text()`
    
Extracts the data as a plain text string.
## Examples
    
    self.addEventListener("push", (event) => {
      const obj = event.data.json();
    
      if (obj.action === "subscribe" || obj.action === "unsubscribe") {
        fireNotification(obj, event);
        port.postMessage(obj);
      } else if (obj.action === "init" || obj.action === "chatMsg") {
        port.postMessage(obj);
      }
    });
    
# Profiler
The `Profiler` interface of the JS Self-Profiling API enables you to create a profile of some part of your web application's execution.
## Constructor
`Profiler()` Experimental
    
Creates a new `Profiler` object, and starts collecting samples.
## Instance methods
`Profiler.stop()` Experimental
    
Stops the profiler, returning a `Promise` that resolves to the profile.
## Events
`samplebufferfull`
    
Fired when the profile has recorded enough samples to fill its internal buffer.
## Examples
>
### Recording a profile
The following code profiles the `doWork()` operation, and logs the result.
    
    const profiler = new Profiler({ sampleInterval: 10, maxBufferSize: 10000 });
    
    doWork();
    
    const profile = await profiler.stop();
    console.log(JSON.stringify(profile));
    
### Profiling page load
The following code profiles the time between the script first running and the window's `load` event firing.
    
    const profiler = new Profiler({ sampleInterval: 10, maxBufferSize: 10000 });
    
    window.addEventListener("load", async () => {
      const profile = await profiler.stop();
      console.log(JSON.stringify(profile));
    });
    
# Trusted Types API
Note: This feature is available in Web Workers.
The Trusted Types API gives web developers a way to ensure that input has been passed through a user-specified transformation function before being passed to an API that might execute that input. This can help to protect against client-side cross-site scripting (XSS) attacks. Most commonly the transformation function sanitizes the input.
## Concepts and usage
Client-side, or DOM-based, XSS attacks happen when data crafted by an attacker is passed to a browser API that executes that data as code. These APIs are known as injection sinks.
The Trusted Types API distinguishes three sorts of injection sinks:
  * HTML sinks: APIs that interpret their input as HTML, such as `Element.innerHTML` or `document.write()`. These APIs could execute JavaScript if it is embedded in the HTML, for example in `<script>` tags or event handler attributes.
  * JavaScript sinks: APIs that interpret their input as JavaScript, such as `eval()` or `HTMLScriptElement.text`.
  * JavaScript URL sinks: APIs that interpret their input as the URL of a script, such as `HTMLScriptElement.src`.


One of the main defenses against DOM-based XSS attacks is to ensure that input is made safe before being passed to an injection sink.
In the Trusted Types API, a developer defines a policy object, which contains methods that transform input bound for an injection sink so as to make it safe. The policy can define different methods for the different types of sink:
  * For HTML sinks, the transformation function typically sanitizes the input, for example by using a library like DOMPurify.
  * For JavaScript and JavaScript URL sinks, the policy may turn off the sinks entirely or allow certain predefined inputs (for example, specific URLs).


The Trusted Types API will then ensure that input is passed through the appropriate transformation function before being passed into the sink.
That is, the API enables you to define your policy in one place and then be assured that any data passed to an injection sink has been passed through the policy.
Note:
The Trusted Types API does not itself supply a policy or any transformation functions: the developer defines their own policy, which contains the transformations that they wish to apply.
The API has two main parts:
  * A JavaScript API enables a developer to sanitize data before passing it to an injection sink.
  * Two CSP directives enforce and control the usage of the JavaScript API.


### The Trusted Types JavaScript API
In the Trusted Types API:
  * The `trustedTypes` global property, available in both `Window` and `Worker` contexts, is used to create `TrustedTypePolicy` objects.
  * A `TrustedTypePolicy` object is used to create trusted type objects: it will do this by passing the data through a transformation function.
  * Trusted type objects represent data that has been through the policy, and can therefore be safely passed to an injection sink. There are three sorts of trusted type, corresponding to the different sort of injection sink: 
    * `TrustedHTML` is for passing to a sink that will render the data as HTML.
    * `TrustedScript` is for passing to a sink that will execute the data as JavaScript.
    * `TrustedScriptURL` is for passing to a sink that will parse the data as a URL to a script.


With this API, instead of passing a string to an injection sink like `innerHTML`, you use a `TrustedTypePolicy` to create a `TrustedHTML` object from the string, then pass that into the sink, and can be sure that the string has been passed through a transformation function.
For example, this code creates a `TrustedTypePolicy` that can create `TrustedHTML` objects by sanitizing the input strings with the DOMPurify library:
    
    const policy = trustedTypes.createPolicy("my-policy", {
      createHTML: (input) => DOMPurify.sanitize(input),
    });
    
Next, you can use this `policy` object to create a `TrustedHTML` object, and pass that object into the injection sink:
    
    const userInput = "<p>I might be XSS</p>";
    const element = document.querySelector("#container");
    
    const trustedHTML = policy.createHTML(userInput);
    element.innerHTML = trustedHTML;
    
### Using a CSP to enforce trusted types
The API described above enables you to sanitize data, but it doesn't ensure that your code never passes input directly to an injection sink: that is, it doesn't stop you passing a string into `innerHTML`.
In order to enforce that a trusted type must always be passed, you include the `require-trusted-types-for` directive in your CSP. With this directive set, passing strings into injection sinks will result in a `TypeError` exception:
    
    const userInput = "<p>I might be XSS</p>";
    const element = document.querySelector("#container");
    
    element.innerHTML = userInput; // Throws a TypeError
    
Additionally, the `trusted-types` CSP directive can be used to control which policies your code is allowed to create. When you create a policy using `trustedTypes.createPolicy()`, you pass a name for the policy. The `trusted-types` CSP directive lists acceptable policy names, so `createPolicy()` will throw an exception if it is passed a name which was not listed in `trusted-types`. This prevents some code in your web application from creating a policy that you were not expecting.
### The default policy
In the Trusted Types API, you can define a default policy. This helps you find any places in your code where you're still passing strings into injection sinks, so you can rewrite the code to create and pass trusted types instead.
If you create a policy named `"default"`, and your CSP enforces the use of trusted types, then any string argument passed into injection sinks will be automatically passed to this policy. For example, suppose we create a policy like this:
    
    trustedTypes.createPolicy("default", {
      createHTML(value) {
        console.log("Please refactor this code");
        return sanitize(value);
      },
    });
    
With this policy, if your code assigns a string to `innerHTML`, the browser will call the policy's `createHTML()` method and assign its result to the sink:
    
    const userInput = "<p>I might be XSS</p>";
    const element = document.querySelector("#container");
    
    element.innerHTML = userInput;
    // Logs "Please refactor this code"
    // Assigns the result of sanitize(userInput)
    
If the default policy returned `null` or `undefined`, then the browser will throw a `TypeError` when assigning the result to the sink:
    
    trustedTypes.createPolicy("default", {
      createHTML(value) {
        console.log("Please refactor this code");
        return null;
      },
    });
    
    const userInput = "<p>I might be XSS</p>";
    const element = document.querySelector("#container");
    
    element.innerHTML = userInput;
    // Logs "Please refactor this code"
    // Throws a TypeError
    
Note: It's recommended that you use the default policy only while you are transitioning from legacy code that passes input directly to injection sinks, to code that uses trusted types explicitly.
### Cross-browser support for trusted types
The Trusted Types API is not yet available in all modern browsers, but it is usable everywhere today thanks to compatibility aids created by the W3C.
  * The full polyfill defines the JavaScript API, attempts to infer the CSP from the current document, and enforces the use of trusted types based on the inferred CSP.
  * The API only polyfill defines only the JavaScript API, and does not include the ability to enforce the use of trusted types using a CSP.


As well as these two polyfills, the W3C provides what it calls a tinyfill, which we'll explain in more detail below.
Note that as long as you have tested your code on a supporting browser with CSP enforcement enabled, then you don't need to use the full polyfill above on other browsers — you can get the same benefits using the API only polyfill or the tinyfill.
This is because the enforcement forces you to refactor your code to ensure that all data is passed through the Trusted Types API (and therefore has been through a sanitization function) before being passed to an injection sink. If you then run the refactored code in a different browser without enforcement, it will still go through the same code paths, and give you the same protection.
#### Trusted Types tinyfill
In this section we'll look at how the trusted types tinyfill can protect a website, even though it doesn't add support for trusted types at all.
The trusted types tinyfill is just this:
    
    if (typeof trustedTypes === "undefined")
      trustedTypes = { createPolicy: (n, rules) => rules };
    
It provides an implementation of `trustedTypes.createPolicy()` which just returns the `policyOptions` object it was passed. The `policyOptions` object defines sanitization functions for data, and these functions are expected to return strings.
With this tinyfill in place, suppose we create a policy:
    
    const policy = trustedTypes.createPolicy("my-policy", {
      createHTML: (input) => DOMPurify.sanitize(input),
    });
    
In browsers that support trusted types, this will return a `TrustedTypePolicy` which will create a `TrustedHTML` object when we call `policy.createHTML()`. The `TrustedHTML` object can then be passed to an injection sink, and we can enforce that the sink received a trusted type, rather than a string.
In browsers that don't support trusted types, this code will return an object with a `createHTML()` function that sanitizes its input and returns it as a string. The sanitized string can then be passed to an injection sink.
    
    const userInput = "I might be XSS";
    const element = document.querySelector("#container");
    
    const trustedHTML = policy.createHTML(userInput);
    // In supporting browsers, trustedHTML is a TrustedHTML object.
    // In non-supporting browsers, trustedHTML is a string.
    
    element.innerHTML = trustedHTML;
    // In supporting browsers, this will throw if trustedHTML
    // is not a TrustedHTML object.
    
Either way, the injection sink gets sanitized data, and because we could enforce the use of the policy in the supporting browser, we know that this code path goes through the sanitization function in the non-supporting browser, too.
## Interfaces
`TrustedHTML`
    
Represents a string to insert into an injection sink that will render it as HTML.
`TrustedScript`
    
Represents a string to insert into an injection sink that could lead to the script being executed.
`TrustedScriptURL`
    
Represents a string to insert into an injection sink that will parse it as a URL of an external script resource.
`TrustedTypePolicy`
    
Defines the functions used to create the above Trusted Type objects.
`TrustedTypePolicyFactory`
    
Creates policies and verifies that Trusted Type object instances were created via one of the policies.
## Examples
In the below example we create a policy that will create `TrustedHTML` objects using `TrustedTypePolicyFactory.createPolicy()`. We can then use `TrustedTypePolicy.createHTML()` to create a sanitized HTML string to be inserted into the document.
The sanitized value can then be used with `Element.innerHTML` to ensure that no new HTML elements can be injected.
    
    <div id="myDiv"></div>
    
    
    const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
      createHTML: (string) =>
        string
          .replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&apos;"),
    });
    
    let el = document.getElementById("myDiv");
    const escaped = escapeHTMLPolicy.createHTML("<img src=x onerror=alert(1)>");
    console.log(escaped instanceof TrustedHTML); // true
    el.innerHTML = escaped;
    
Read more about this example, and discover other ways to sanitize input in the article Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types.
  * Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types
  * Trusted Types polyfill (also available as an npm package)


# DataTransfer
The `DataTransfer` object is used to hold any data transferred between contexts, such as a drag and drop operation, or clipboard read/write. It may hold one or more data items, each of one or more data types.
`DataTransfer` was primarily designed for the HTML Drag and Drop API, as the `DragEvent.dataTransfer` property, and is still specified in the HTML drag-and-drop section, but it is now also used by other APIs, such as `ClipboardEvent.clipboardData` and `InputEvent.dataTransfer`. However, other APIs only use certain parts of its interface, ignoring properties such as `dropEffect`. Documentation of `DataTransfer` will primarily discuss its usage in drag-and-drop operations, and you should refer to the other APIs' documentation for usage of `DataTransfer` in those contexts.
## Constructor
`DataTransfer()`
    
Creates and returns a new `DataTransfer` object.
## Instance properties
`DataTransfer.dropEffect`
    
Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be `none`, `copy`, `link` or `move`.
`DataTransfer.effectAllowed`
    
Provides all of the types of operations that are possible. Must be one of `none`, `copy`, `copyLink`, `copyMove`, `link`, `linkMove`, `move`, `all` or `uninitialized`.
`DataTransfer.files` Read only
    
Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.
`DataTransfer.items` Read only
    
Gives a `DataTransferItemList` object which is a list of all of the drag data.
`DataTransfer.types` Read only
    
An array of strings giving the formats that were set in the `dragstart` event.
## Instance methods
`DataTransfer.addElement()` Experimental Non-standard
    
Sets the drag source for the given element. This will be the element on which `drag` and `dragend` events are fired, and not the default target (the node that was dragged). Firefox-specific.
`DataTransfer.clearData()`
    
Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.
`DataTransfer.getData()`
    
Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.
`DataTransfer.setData()`
    
Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.
`DataTransfer.setDragImage()`
    
Set the image to be used for dragging if a custom one is desired.
## Examples
Every method and property listed in this document has its own reference page and each reference page either directly includes an example of the interface or has a link to an example.
### Reading the data in a paste or drop event
In the following example, we have a `<form>` containing three different types of text inputs: a text `<input>` element, a `<textarea>` element, and a `<div>` element with `contenteditable` set to `true`. The user can paste or drop text into any of these elements, and the data in the `ClipboardEvent.clipboardData` or `DragEvent.dataTransfer` object will be displayed.
#### HTML
    
    <form>
      <fieldset>
        <legend>&lt;input /></legend>
        <input type="text" />
        <table class="center">
          <tr>
            <th scope="row">Operation type</th>
            <td></td>
          </tr>
          <tr>
            <th scope="row">Content type</th>
            <td></td>
          </tr>
        </table>
      </fieldset>
      <fieldset>
        <legend>&lt;textarea /></legend>
        <textarea></textarea>
        <table class="center">
          <tr>
            <th scope="row">Operation type</th>
            <td></td>
          </tr>
          <tr>
            <th scope="row">Content type</th>
            <td></td>
          </tr>
        </table>
      </fieldset>
      <fieldset>
        <legend>&lt;div contenteditable /></legend>
        <div contenteditable></div>
        <table class="center">
          <tr>
            <th scope="row">Operation type</th>
            <td></td>
          </tr>
          <tr>
            <th scope="row">Content type</th>
            <td></td>
          </tr>
        </table>
      </fieldset>
      <p class="center">
        <input type="reset" />
      </p>
    </form>
    
#### CSS
    
    .center {
      text-align: center;
    }
    
    form > fieldset > * {
      vertical-align: top;
    }
    form input,
    form textarea,
    form [contenteditable] {
      min-width: 15rem;
      padding: 0.25rem;
    }
    [contenteditable] {
      appearance: textfield;
      display: inline-block;
      min-height: 1rem;
      border: 1px solid;
    }
    
    form table {
      display: inline-table;
    }
    table ol {
      text-align: left;
    }
    
#### JavaScript
    
    const form = document.querySelector("form");
    
    function displayData(event) {
      if (event.type === "drop") event.preventDefault();
    
      const cells = event.target.nextElementSibling.querySelectorAll("td");
      cells[0].textContent = event.type;
      const transfer = event.clipboardData || event.dataTransfer;
      const ol = document.createElement("ol");
      cells[1].textContent = "";
      cells[1].appendChild(ol);
      for (const item of transfer.items) {
        const li = document.createElement("li");
        li.textContent = `${item.kind} ${item.type}`;
        ol.appendChild(li);
      }
    }
    
    form.addEventListener("paste", displayData);
    form.addEventListener("drop", displayData);
    form.addEventListener("reset", () => {
      for (const cell of form.querySelectorAll("[contenteditable], td")) {
        cell.textContent = "";
      }
    });
    
#### Result
  * Drag and drop
  * Drag Operations
  * Recommended Drag Types


# ServiceWorkerGlobalScope
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is only available in Service Workers.
The `ServiceWorkerGlobalScope` interface of the Service Worker API represents the global execution context of a service worker.
Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.
Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as `fetch` or `message`.
Additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the `fetch()` method, can be used.
This interface inherits from the `WorkerGlobalScope` interface, and its parent `EventTarget`.
EventTarget  WorkerGlobalScope  ServiceWorkerGlobalScope 
## Instance properties
This interface inherits properties from the `WorkerGlobalScope` interface, and its parent `EventTarget`.
`ServiceWorkerGlobalScope.clients` Read only
    
Contains the `Clients` object associated with the service worker.
`ServiceWorkerGlobalScope.cookieStore` Read only
    
Returns a reference to the `CookieStore` object associated with the service worker.
`ServiceWorkerGlobalScope.registration` Read only
    
Contains the `ServiceWorkerRegistration` object that represents the service worker's registration.
`ServiceWorkerGlobalScope.serviceWorker` Read only
    
Contains the `ServiceWorker` object that represents the service worker.
## Instance methods
This interface inherits methods from the `WorkerGlobalScope` interface, and its parent `EventTarget`.
`ServiceWorkerGlobalScope.skipWaiting()`
    
Allows the current service worker registration to progress from waiting to active state while service worker clients are using it.
## Events
Listen to this event using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`activate`
    
Occurs when a `ServiceWorkerRegistration` acquires a new `ServiceWorkerRegistration.active` worker.
`backgroundfetchabort` Experimental
    
Fired when a background fetch operation has been canceled by the user or the app.
`backgroundfetchclick` Experimental
    
Fired when the user has clicked on the UI for a background fetch operation.
`backgroundfetchfail` Experimental
    
Fired when at least one of the requests in a background fetch operation has failed.
`backgroundfetchsuccess` Experimental
    
Fired when all of the requests in a background fetch operation have succeeded.
`canmakepayment` Experimental
    
Fired on a payment app's service worker to check whether it is ready to handle a payment. Specifically, it is fired when the merchant website calls the `PaymentRequest()` constructor.
`contentdelete` Experimental
    
Occurs when an item is removed from the `ContentIndex`.
`cookiechange`
    
Fired when a cookie change has occurred that matches the service worker's cookie change subscription list.
`fetch`
    
Occurs when a `fetch()` is called.
`install`
    
Occurs when a `ServiceWorkerRegistration` acquires a new `ServiceWorkerRegistration.installing` worker.
`message`
    
Occurs when incoming messages are received. Controlled pages can use the `MessagePort.postMessage()` method to send messages to service workers.
`messageerror`
    
Occurs when incoming messages can't be deserialized.
`notificationclick`
    
Occurs when a user clicks on a displayed notification.
`notificationclose`
    
Occurs when a user closes a displayed notification.
`paymentrequest` Experimental
    
Fired on a payment app when a payment flow has been initiated on the merchant website via the `PaymentRequest.show()` method.
`sync`
    
Triggered when a call to `SyncManager.register` is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available.
`periodicsync` Experimental
    
Occurs at periodic intervals, which were specified when registering a `PeriodicSyncManager`.
`push`
    
Occurs when a server push notification is received.
`pushsubscriptionchange`
    
Occurs when a push subscription has been invalidated, or is about to be invalidated (e.g., when a push service sets an expiration time).
## Examples
This code snippet is from the service worker prefetch sample (see prefetch example live.) The `onfetch` event handler listens for the `fetch` event. When fired, the code returns a promise that resolves to the first matching request in the `Cache` object. If no match is found, the code fetches a response from the network.
The code also handles exceptions thrown from the `fetch()` operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.
    
    self.addEventListener("fetch", (event) => {
      console.log("Handling fetch event for", event.request.url);
    
      event.respondWith(
        caches.match(event.request).then((response) => {
          if (response) {
            console.log("Found response in cache:", response);
    
            return response;
          }
          console.log("No response found in cache. About to fetch from network…");
    
          return fetch(event.request).then(
            (response) => {
              console.log("Response from network is:", response);
    
              return response;
            },
            (error) => {
              console.error("Fetching failed:", error);
    
              throw error;
            },
          );
        }),
      );
    });
    
  * Using Service Workers
  * Service workers basic code example


# EditContext
The `EditContext` interface represents the text edit context of an element that was made editable by using the EditContext API.
The EditContext API can be used to build rich text editors on the web that support advanced text input experiences, such as Input Method Editor (IME) composition, emoji picker, or any other platform-specific editing-related UI surfaces.
## Constructor
`EditContext()` Experimental
    
Returns a new `EditContext` instance.
## Instance properties
`EditContext.text` Read only Experimental
    
The editable content of the element.
`EditContext.selectionStart` Read only Experimental
    
The offset, within the editable text content, of the start of the current selection.
`EditContext.selectionEnd` Read only Experimental
    
The offset, within the editable text content, of the end of the current selection.
`EditContext.characterBoundsRangeStart` Read only Experimental
    
The offset, within the editable text content, where the last IME composition started.
## Instance methods
`EditContext` is based on the `EventTarget` interface, and includes its methods.
`EditContext.attachedElements()` Experimental
    
An `Array` containing one `HTMLElement` object which is the element that's associated with the `EditContext` object.
`EditContext.characterBounds()` Experimental
    
The list of bounding rectangles for the characters in the `EditContext` object.
`EditContext.updateText()` Experimental
    
Updates the internal text content of the `EditContext` object.
`EditContext.updateSelection()` Experimental
    
Updates the internal state of the selection within the editable text context.
`EditContext.updateControlBounds()` Experimental
    
Informs the operating system about the position and size of the editable text region.
`EditContext.updateSelectionBounds()` Experimental
    
Informs the operating system about the position and size of the selection within the editable text region.
`EditContext.updateCharacterBounds()` Experimental
    
Informs the operating system about the position and size of the characters in the `EditContext` object.
## Events
`textupdate` Experimental
    
Fired when the user has made changes to the text or selection.
`textformatupdate` Experimental
    
Fired when composition using an Input Method Editor (IME) window is happening and the IME decides that certain parts of the text being composed should be formatted differently to indicate the composition state.
`characterboundsupdate` Experimental
    
Fired when the operating system needs to know the size and position of certain characters within the editable text region of the `EditContext` object, in order to display an IME window.
`compositionstart` Experimental
    
Fired when composition using an IME window is starting.
`compositionend` Experimental
    
Fired when composition using an IME window is ending.
# CanMakePaymentEvent
Note: This feature is only available in Service Workers.
The `CanMakePaymentEvent` interface of the Payment Handler API is the event object for the `canmakepayment` event, fired on a payment app's service worker to check whether it is ready to handle a payment. Specifically, it is fired when the merchant website calls the `PaymentRequest()` constructor.
Event  ExtendableEvent  CanMakePaymentEvent 
## Constructor
`CanMakePaymentEvent()` Experimental
    
Creates a new `CanMakePaymentEvent` object instance.
## Instance methods
`respondWith()` Experimental
    
Enables the service worker to respond appropriately to signal whether it is ready to handle payments.
## Examples
    
    self.addEventListener("canmakepayment", (e) => {
      e.respondWith(
        new Promise((resolve, reject) => {
          someAppSpecificLogic()
            .then((result) => {
              resolve(result);
            })
            .catch((error) => {
              reject(error);
            });
        }),
      );
    });
    
  * Payment Handler API
  * Web-based payment apps overview
  * Setting up a payment method
  * Life of a payment transaction
  * Using the Payment Request API
  * Payment processing concepts


# HTMLVideoElement
Implemented by the `<video>` element, the `HTMLVideoElement` interface provides special properties and methods for manipulating video objects. It also inherits properties and methods of `HTMLMediaElement` and `HTMLElement`.
The list of supported media formats varies from one browser to the other. You should either provide your video in a single format that all the relevant browsers supports, or provide multiple video sources in enough different formats that all the browsers you need to support are covered.
EventTarget  Node  Element  HTMLElement  HTMLMediaElement  HTMLVideoElement 
## Instance properties
Inherits properties from its parent interface, `HTMLMediaElement`, and `HTMLElement`.
`HTMLVideoElement.disablePictureInPicture`
    
Indicates if the user agent should suggest the picture-in-picture to users, or not.
`HTMLVideoElement.height`
    
A string that reflects the `height` HTML attribute, which specifies the height of the display area, in CSS pixels.
`HTMLVideoElement.poster`
    
A string that reflects the `poster` HTML attribute, which specifies an image to show while no video data is available.
`HTMLVideoElement.videoHeight` Read only
    
Returns an unsigned integer value indicating the intrinsic height of the resource in CSS pixels, or 0 if no media is available yet.
`HTMLVideoElement.videoWidth` Read only
    
Returns an unsigned integer value indicating the intrinsic width of the resource in CSS pixels, or 0 if no media is available yet.
`HTMLVideoElement.width`
    
A string that reflects the `width` HTML attribute, which specifies the width of the display area, in CSS pixels.
### Firefox-specific properties
`HTMLVideoElement.mozParsedFrames` Non-standard Read only Deprecated
    
Returns an `unsigned long` with the count of video frames that have been parsed from the media resource.
`HTMLVideoElement.mozDecodedFrames` Non-standard Read only Deprecated
    
Returns an `unsigned long` with the count of parsed video frames that have been decoded into images.
`HTMLVideoElement.mozPresentedFrames` Non-standard Read only Deprecated
    
Returns an `unsigned long` with the count of decoded frames that have been presented to the rendering pipeline for painting.
`HTMLVideoElement.mozPaintedFrames` Non-standard Read only Deprecated
    
Returns an `unsigned long` with the count of presented frames which were painted on the screen.
`HTMLVideoElement.mozFrameDelay` Non-standard Read only Deprecated
    
Returns an `double` with the time which the last painted video frame was late by, in seconds.
`HTMLVideoElement.mozHasAudio` Non-standard Read only Deprecated
    
Returns a boolean indicating if there is some audio associated with the video.
## Instance methods
Inherits methods from its parent interface, `HTMLMediaElement`, and `HTMLElement`.
`HTMLVideoElement.cancelVideoFrameCallback()`
    
Cancels a previously-registered video frame callback (see `requestVideoFrameCallback()`).
`HTMLVideoElement.getVideoPlaybackQuality()`
    
Returns a `VideoPlaybackQuality` object that contains the current playback metrics. This information includes things like the number of dropped or corrupted frames, as well as the total number of frames.
`HTMLVideoElement.requestPictureInPicture()`
    
Requests that the user agent enters the video into picture-in-picture mode.
`HTMLVideoElement.requestVideoFrameCallback()`
    
Registers a callback function that runs when a new video frame is sent to the compositor. This enables developers to perform efficient operations on each video frame.
## Events
Inherits events from its parent interface, `HTMLMediaElement`, and `HTMLElement`.
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`enterpictureinpicture`
    
Fired when the `HTMLVideoElement` enters picture-in-picture mode successfully.
`leavepictureinpicture`
    
Fired when the `HTMLVideoElement` leaves picture-in-picture mode successfully.
`resize`
    
Fires when one or both of the `videoWidth` and `videoHeight` properties have just been updated.
  * HTML element implementing this interface: `<video>`.
  * Supported media formats


# Accelerometer
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Accelerometer` interface of the Sensor APIs provides on each reading the acceleration applied to the device along all three axes.
To use this sensor, the user must grant permission to the `'accelerometer'`, device sensor through the Permissions API.
This feature may be blocked by a Permissions Policy set on your server.
EventTarget  Sensor  Accelerometer 
## Constructor
`Accelerometer()` Experimental
    
Creates a new `Accelerometer` object.
## Instance properties
In addition to the properties listed below, `Accelerometer` inherits properties from its parent interfaces, `Sensor` and `EventTarget`.
`Accelerometer.x` Read only Experimental
    
Returns a double containing the acceleration of the device along the device's x axis.
`Accelerometer.y` Read only Experimental
    
Returns a double containing the acceleration of the device along the device's y axis.
`Accelerometer.z` Read only Experimental
    
Returns a double containing the acceleration of the device along the device's z axis.
## Instance methods
`Accelerometer` doesn't have own methods. However, it inherits methods from its parent interfaces, `Sensor` and `EventTarget`.
## Events
`Accelerometer` doesn't have own events. However, it inherits events from its parent interface, `Sensor`.
## Example
Acceleration is typically read in the `reading` event callback. In the example below this occurs sixty times a second.
    
    const acl = new Accelerometer({ frequency: 60 });
    acl.addEventListener("reading", () => {
      console.log(`Acceleration along the X-axis ${acl.x}`);
      console.log(`Acceleration along the Y-axis ${acl.y}`);
      console.log(`Acceleration along the Z-axis ${acl.z}`);
    });
    
    acl.start();
    
# HTMLModElement
The `HTMLModElement` interface provides special properties (beyond the regular methods and properties available through the `HTMLElement` interface they also have available to them by inheritance) for manipulating modification elements, that is `<del>` and `<ins>`.
EventTarget  Node  Element  HTMLElement  HTMLModElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLModElement.cite`
    
A string reflecting the `cite` HTML attribute, containing a URI of a resource explaining the change.
`HTMLModElement.dateTime`
    
A string reflecting the `datetime` HTML attribute, containing a date-and-time string representing a timestamp for the change.
  * HTML elements implementing this interface: `<ins>`, `<del>`.


# OfflineAudioContext
The `OfflineAudioContext` interface is an `AudioContext` interface representing an audio-processing graph built from linked together `AudioNode`s. In contrast with a standard `AudioContext`, an `OfflineAudioContext` doesn't render the audio to the device hardware; instead, it generates it, as fast as it can, and outputs the result to an `AudioBuffer`.
EventTarget  BaseAudioContext  OfflineAudioContext 
## Constructor
`OfflineAudioContext()`
    
Creates a new `OfflineAudioContext` instance.
## Instance properties
Also inherits properties from its parent interface, `BaseAudioContext`.
`OfflineAudioContext.length` Read only
    
An integer representing the size of the buffer in sample-frames.
## Instance methods
Also inherits methods from its parent interface, `BaseAudioContext`.
`OfflineAudioContext.suspend()`
    
Schedules a suspension of the time progression in the audio context at the specified time and returns a promise.
`OfflineAudioContext.startRendering()`
    
Starts rendering the audio, taking into account the current connections and the current scheduled changes. This page covers both the event-based version and the promise-based version.
### Deprecated methods
`OfflineAudioContext.resume()`
    
Resumes the progression of time in an audio context that has previously been suspended.
Note: The `resume()` method is still available — it is now defined on the `BaseAudioContext` interface (see `AudioContext.resume`) and thus can be accessed by both the `AudioContext` and `OfflineAudioContext` interfaces.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface:
`complete`
    
Fired when the rendering of an offline audio context is complete.
## Examples
>
### Playing audio with an offline audio context
In this example, we declare both an `AudioContext` and an `OfflineAudioContext` object. We use the `AudioContext` to load an audio track `fetch()`, then the `OfflineAudioContext` to render the audio into an `AudioBufferSourceNode` and play the track through. After the offline audio graph is set up, we render it to an `AudioBuffer` using `OfflineAudioContext.startRendering()`.
When the `startRendering()` promise resolves, rendering has completed and the output `AudioBuffer` is returned out of the promise.
At this point we create another audio context, create an `AudioBufferSourceNode` inside it, and set its buffer to be equal to the promise `AudioBuffer`. This is then played as part of a simple standard audio graph.
Note: You can run the full example live, or view the source.
    
    // Define both online and offline audio contexts
    let audioCtx; // Must be initialized after a user interaction
    const offlineCtx = new OfflineAudioContext(2, 44100 * 40, 44100);
    
    // Define constants for dom nodes
    const play = document.querySelector("#play");
    
    function getData() {
      // Fetch an audio track, decode it and stick it in a buffer.
      // Then we put the buffer into the source and can play it.
      fetch("viper.ogg")
        .then((response) => response.arrayBuffer())
        .then((downloadedBuffer) => audioCtx.decodeAudioData(downloadedBuffer))
        .then((decodedBuffer) => {
          console.log("File downloaded successfully.");
          const source = new AudioBufferSourceNode(offlineCtx, {
            buffer: decodedBuffer,
          });
          source.connect(offlineCtx.destination);
          return source.start();
        })
        .then(() => offlineCtx.startRendering())
        .then((renderedBuffer) => {
          console.log("Rendering completed successfully.");
          play.disabled = false;
          const song = new AudioBufferSourceNode(audioCtx, {
            buffer: renderedBuffer,
          });
          song.connect(audioCtx.destination);
    
          // Start the song
          song.start();
        })
        .catch((err) => {
          console.error(`Error encountered: ${err}`);
        });
    }
    
    // Activate the play button
    play.onclick = () => {
      play.disabled = true;
      // We can initialize the context as the user clicked.
      audioCtx = new AudioContext();
    
      // Fetch the data and start the song
      getData();
    };
    
  * Using the Web Audio API


# CSSMathInvert
The `CSSMathInvert` interface of the CSS Typed Object Model API represents a CSS `calc()` used as `calc(1 / <value>)`. It inherits properties and methods from its parent `CSSNumericValue`.
CSSStyleValue  CSSNumericValue  CSSMathValue  CSSMathInvert 
## Constructor
`CSSMathInvert()`
    
Creates a new `CSSMathInvert` object.
## Instance properties
`CSSMathInvert.value` Read only
    
Returns a `CSSNumericValue` object.
## Static methods
The interface may also inherit methods from its parent interface, `CSSMathValue`.
## Instance methods
The interface may also inherit methods from its parent interface, `CSSMathValue`.
## Examples
To do
# LayoutShiftAttribution
The `LayoutShiftAttribution` interface provides debugging information about elements which have shifted.
Instances of `LayoutShiftAttribution` are returned in an array by calling `LayoutShift.sources`.
## Instance properties
`LayoutShiftAttribution.node` Read only Experimental
    
Returns the element that has shifted (null if it has been removed).
`LayoutShiftAttribution.previousRect` Read only Experimental
    
Returns a `DOMRectReadOnly` object representing the position of the element before the shift.
`LayoutShiftAttribution.currentRect` Read only Experimental
    
Returns a `DOMRectReadOnly` object representing the position of the element after the shift.
## Instance methods
`LayoutShiftAttribution.toJSON()` Experimental
    
Returns a JSON representation of the `LayoutShiftAttribution` object.
## Examples
The following example finds the element with the highest layout shift score, and returns the element in that entry with the largest size prior to the shift (`previousRect`). For more detail on this see Debug Web Vitals in the field.
    
    function getCLSDebugTarget(entries) {
      const largestEntry = entries.reduce((a, b) =>
        a && a.value > b.value ? a : b,
      );
      if (largestEntry?.sources?.length) {
        const largestSource = largestEntry.sources.reduce((a, b) => {
          const area = (el) => el.previousRect.width * el.previousRect.height;
          return a.node && area(a) > area(b) ? a : b;
        });
        if (largestSource) {
          return largestSource.node;
        }
      }
    }
    
  * Debug layout shifts
  * Debug Web Vitals in the field


# WebGLSync
Note: This feature is available in Web Workers.
The `WebGLSync` interface is part of the WebGL 2 API and is used to synchronize activities between the GPU and the application.
WebGLObject  WebGLSync 
When working with `WebGLSync` objects, the following methods of the `WebGL2RenderingContext` are useful:
  * `WebGL2RenderingContext.fenceSync()`
  * `WebGL2RenderingContext.deleteSync()`
  * `WebGL2RenderingContext.isSync()`
  * `WebGL2RenderingContext.clientWaitSync()`
  * `WebGL2RenderingContext.waitSync()`
  * `WebGL2RenderingContext.getSyncParameter()`


## Examples
>
### Creating a `WebGLSync` object
in this example, `gl` must be a `WebGL2RenderingContext`. `WebGLSync` objects are not available in WebGL 1.
    
    const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
    
  * `WebGLRenderingContext.finish()`


# EyeDropper
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `EyeDropper` interface represents an instance of an eyedropper tool that can be opened and used by the user to select colors from the screen.
## Constructor
`EyeDropper()` Experimental
    
Returns a new `EyeDropper` instance.
## Instance methods
The `EyeDropper` interface doesn't inherit any methods.
`EyeDropper.open()` Experimental
    
Returns a promise that resolves to an object that gives access to the selected color.
## Examples
>
### Opening the eyedropper tool and sampling a color
This example shows how to open an eyedropper tool and wait for the user to either select a pixel from the screen, or press `Escape` to cancel the eyedropper mode.
#### HTML
    
    <button id="start-button">Open the eyedropper</button> <span id="result"></span>
    
#### JavaScript
    
    document.getElementById("start-button").addEventListener("click", () => {
      const resultElement = document.getElementById("result");
    
      if (!window.EyeDropper) {
        resultElement.textContent =
          "Your browser does not support the EyeDropper API";
        return;
      }
    
      const eyeDropper = new EyeDropper();
    
      eyeDropper
        .open()
        .then((result) => {
          resultElement.textContent = result.sRGBHex;
          resultElement.style.backgroundColor = result.sRGBHex;
        })
        .catch((e) => {
          resultElement.textContent = e;
        });
    });
    
#### Result
### Aborting the eyedropper mode
This example shows that the eyedropper mode can also be aborted before the user has selected a color or pressed `Escape`.
#### HTML
    
    <button id="start-button">Open the eyedropper</button> <span id="result"></span>
    
#### JavaScript
    
    document.getElementById("start-button").addEventListener("click", () => {
      const resultElement = document.getElementById("result");
    
      if (!window.EyeDropper) {
        resultElement.textContent =
          "Your browser does not support the EyeDropper API";
        return;
      }
    
      const eyeDropper = new EyeDropper();
      const abortController = new AbortController();
    
      eyeDropper
        .open({ signal: abortController.signal })
        .then((result) => {
          resultElement.textContent = result.sRGBHex;
          resultElement.style.backgroundColor = result.sRGBHex;
        })
        .catch((e) => {
          resultElement.textContent = e;
        });
    
      setTimeout(() => {
        abortController.abort();
      }, 2000);
    });
    
#### Result
# WEBGL_multi_draw extension
The `WEBGL_multi_draw` extension is part of the WebGL API and allows to render more than one primitive with a single function call. This can improve a WebGL application's performance as it reduces binding costs in the renderer and speeds up GPU thread time with uniform data.
When this extension is enabled:
  * New methods that handle multiple lists of arguments in one call are added (see method list below).
  * The `gl_DrawID` built-in is added to the shading language.


Note: This extension is available to both, WebGL 1 and WebGL 2 contexts.
In shader code, the directive `#extension GL_ANGLE_multi_draw` needs to be called to enable the extension.
This extension enables the `ANGLE_instanced_arrays` extension implicitly.
## Instance methods
`ext.multiDrawArraysWEBGL()`
    
Renders multiple primitives from array data (identical to multiple calls to `drawArrays`).
`ext.multiDrawElementsWEBGL()`
    
Renders multiple primitives from element array data (identical to multiple calls to `drawElements`).
`ext.multiDrawArraysInstancedWEBGL()`
    
Renders multiple primitives from array data (identical to multiple calls to `drawArraysInstanced`).
`ext.multiDrawElementsInstancedWEBGL()`
    
Renders multiple primitives from element array data (identical to multiple calls to `drawElementsInstanced`).
## Shader extension
Note: Although the extension name is named `WEBGL_multi_draw`, the extension must be enabled with the `#extension GL_ANGLE_multi_draw` directive to use the extension in a shader.
When this extension is enabled, the `gl_DrawID` built-in can be used in shader code. For any `multi*` draw call variant, the index of the draw `i` may be read by the vertex shader as `gl_DrawID`. For non-`multi*` calls, the value of `gl_DrawID` is `0`.
    
    <script type="x-shader/x-vertex">
      #extension GL_ANGLE_multi_draw : require
      void main() {
        gl_Position = vec4(gl_DrawID, 0, 0, 1);
      }
    </script>
    
## Examples
>
### Enabling the extension
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
    
    let ext = gl.getExtension("WEBGL_multi_draw");
    
### Drawing multiple arrays
Example calls for `ext.multiDrawArraysWEBGL()` and `ext.multiDrawArraysInstancedWEBGL()`:
    
    // multiDrawArrays variant
    const firsts = new Int32Array(/* … */);
    const counts = new Int32Array(/* … */);
    ext.multiDrawArraysWEBGL(gl.TRIANGLES, firsts, 0, counts, 0, firsts.length);
    
    
    // multiDrawArraysInstanced variant
    const firsts = new Int32Array(/* … */);
    const counts = new Int32Array(/* … */);
    const instanceCounts = new Int32Array(/* … */);
    ext.multiDrawArraysInstancedWEBGL(
      gl.TRIANGLES,
      firsts,
      0,
      counts,
      0,
      instanceCounts,
      0,
      firsts.length,
    );
    
### Drawing multiple elements
Example calls for `ext.multiDrawElementsWEBGL()` and `ext.multiDrawElementsInstancedWEBGL()`.
Assumes that the indices which have been previously uploaded to the `ELEMENT_ARRAY_BUFFER` are to be treated as `UNSIGNED_SHORT`.
    
    // multiDrawElements variant
    const counts = new Int32Array(/* … */);
    const offsets = new Int32Array(/* … */);
    ext.multiDrawElementsWEBGL(
      gl.TRIANGLES,
      counts,
      0,
      gl.UNSIGNED_SHORT,
      offsets,
      0,
      counts.length,
    );
    
    
    // multiDrawElementsInstanced variant
    const counts = new Int32Array(/* … */);
    const offsets = new Int32Array(/* … */);
    const instanceCounts = new Int32Array(/* … */);
    ext.multiDrawElementsInstancedWEBGL(
      gl.TRIANGLES,
      counts,
      0,
      gl.UNSIGNED_SHORT,
      offsets,
      0,
      instanceCounts,
      0,
      counts.length,
    );
    
  * `WebGLRenderingContext.drawArrays()`
  * `WebGLRenderingContext.drawElements()`
  * `ANGLE_instanced_arrays.drawArraysInstancedANGLE()` or in WebGL 2: `WebGL2RenderingContext.drawArraysInstanced()`
  * `ANGLE_instanced_arrays.drawElementsInstancedANGLE()` or in WebGL 2: `WebGL2RenderingContext.drawElementsInstanced()`


# KeyframeEffect
The `KeyframeEffect` interface of the Web Animations API lets us create sets of animatable properties and values, called keyframes. These can then be played using the `Animation()` constructor.
AnimationEffect  KeyframeEffect 
## Constructor
`KeyframeEffect()`
    
Returns a new `KeyframeEffect` object instance, and also allows you to clone an existing keyframe effect object instance.
## Instance properties
`KeyframeEffect.target`
    
Gets and sets the element, or originating element of the pseudo-element, being animated by this object. This may be `null` for animations that do not target a specific element or pseudo-element.
`KeyframeEffect.pseudoElement`
    
Gets and sets the selector of the pseudo-element being animated by this object. This may be `null` for animations that do not target a pseudo-element.
`KeyframeEffect.iterationComposite`
    
Gets and sets the iteration composite operation for resolving the property value changes of this keyframe effect.
`KeyframeEffect.composite`
    
Gets and sets the composite operation property for resolving the property value changes between this and other keyframe effects.
## Instance methods
This interface inherits some of its methods from its parent, `AnimationEffect`.
`AnimationEffect.getComputedTiming()`
    
Returns the calculated, current timing values for this keyframe effect.
`KeyframeEffect.getKeyframes()`
    
Returns the computed keyframes that make up this effect along with their computed keyframe offsets.
`AnimationEffect.getTiming()`
    
Returns the object associated with the animation containing all the animation's timing values.
`KeyframeEffect.setKeyframes()`
    
Replaces the set of keyframes that make up this effect.
`AnimationEffect.updateTiming()`
    
Updates the specified timing properties.
## Examples
In the following example, the KeyframeEffect constructor is used to create a set of keyframes that dictate how the rofl emoji should roll on the floor:
    
    const emoji = document.querySelector("div"); // element to animate
    
    const rollingKeyframes = new KeyframeEffect(
      emoji,
      [
        { transform: "translateX(0) rotate(0)" }, // keyframe
        { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
      ],
      {
        // keyframe options
        duration: 2000,
        direction: "alternate",
        easing: "ease-in-out",
        iterations: "Infinity",
      },
    );
    
    const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
    
    // play rofl animation
    rollingAnimation.play();
    
    
    <div>🤣</div>
    
  * Web Animations API
  * `Animation`


# CharacterBoundsUpdateEvent
The `CharacterBoundsUpdateEvent` interface is a DOM event that represents a request from the operating system to know the bounds of certain characters within an editable region that's attached to an `EditContext` instance.
This interface inherits properties from `Event`.
Event  CharacterBoundsUpdateEvent 
## Constructor
`CharacterBoundsUpdateEvent()` Experimental
    
Creates a new `CharacterBoundsUpdateEvent` object.
## Instance properties
`CharacterBoundsUpdateEvent.rangeStart` Read only Experimental
    
The offset of the first character within the editable region text for which the operating system needs the bounds.
`CharacterBoundsUpdateEvent.rangeEnd` Read only Experimental
    
The offset of the last character within the editable region text for which the operating system needs the bounds.
## Examples
>
### Updating the character bounds when needed
This example shows how to use the `characterboundsupdate` event and the `updateCharacterBounds` method to inform the operating system of the character bounds it requires. Note that the event listener callback is only called when using an IME window, or other platform-specific editing UI surfaces, to compose text.
    
    <canvas id="editor-canvas"></canvas>
    
    
    const FONT_SIZE = 40;
    const FONT = `${FONT_SIZE}px Arial`;
    
    const canvas = document.getElementById("editor-canvas");
    const ctx = canvas.getContext("2d");
    ctx.font = FONT;
    
    const editContext = new EditContext();
    canvas.editContext = editContext;
    
    function computeCharacterBound(offset) {
      // Measure the width from the start of the text to the character.
      const widthBeforeChar = ctx.measureText(
        editContext.text.substring(0, offset),
      ).width;
    
      // Measure the character width.
      const charWidth = ctx.measureText(editContext.text[offset]).width;
    
      const charX = canvas.offsetLeft + widthBeforeChar;
      const charY = canvas.offsetTop;
    
      // Return a DOMRect representing the character bounds.
      return DOMRect.fromRect({
        x: charX,
        y: charY - FONT_SIZE,
        width: charWidth,
        height: FONT_SIZE,
      });
    }
    
    editContext.addEventListener("characterboundsupdate", (e) => {
      const charBounds = [];
      for (let offset = e.rangeStart; offset < e.rangeEnd; offset++) {
        charBounds.push(computeCharacterBound(offset));
      }
    
      // Update the character bounds in the EditContext instance.
      editContext.updateCharacterBounds(e.rangeStart, charBounds);
    
      console.log(
        "The required character bounds are",
        charBounds
          .map(
            (bound) =>
              `(x: ${bound.x}, y: ${bound.y}, width: ${bound.width}, height: ${bound.height})`,
          )
          .join(", "),
      );
    });
    
# USBInterface
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USBInterface` interface of the WebUSB API provides information about an interface provided by the USB device. An interface represents a feature of the device which implements a particular protocol and may contain endpoints for bidirectional communication.
## Constructor
`USBInterface()` Experimental
    
Creates a new `USBInterface` object which will be populated with information about the interface on the provided `USBConfiguration` with the given interface number.
## Instance properties
`USBInterface.interfaceNumber` Read only Experimental
    
Returns the interface number of this interface. This is equal to the `bInterfaceNumber` field of the interface descriptor defining this interface.
`USBInterface.alternate` Read only Experimental
    
Returns the currently selected alternative configuration of this interface. By default this is the `USBAlternateInterface` from `alternates` with `alternateSetting` equal to `0`. It can be changed by calling `USBDevice.selectAlternateInterface()` with any other value found in `alternates`.
`USBInterface.alternates` Read only Experimental
    
Returns an array containing instances of the `USBAlternateInterface` interface describing each of the alternative configurations possible for this interface.
`USBInterface.claimed` Read only Experimental
    
Returns whether or not this interface has been claimed by the current page by calling `USBDevice.claimInterface()`.
# RTCEncodedAudioFrame
Note: This feature is available in Dedicated Web Workers.
The `RTCEncodedAudioFrame` of the WebRTC API represents an encoded audio frame in the WebRTC receiver or sender pipeline, which may be modified using a WebRTC Encoded Transform.
The interface provides methods and properties to get metadata about the frame, allowing its format and order in the sequence of frames to be determined. The `data` property gives access to the encoded frame data as a buffer, which might be encrypted, or otherwise modified by a transform.
## Instance properties
`RTCEncodedAudioFrame.timestamp` Read only Deprecated Non-standard
    
Returns the timestamp at which sampling of the frame started.
`RTCEncodedAudioFrame.data`
    
Return a buffer containing the encoded frame data.
## Instance methods
`RTCEncodedAudioFrame.getMetadata()`
    
Returns the metadata associated with the frame.
## Examples
This code snippet shows a handler for the `rtctransform` event in a `Worker` that implements a `TransformStream`, and pipes encoded frames through it from the `event.transformer.readable` to `event.transformer.writable` (`event.transformer` is a `RTCRtpScriptTransformer`, the worker-side counterpart of `RTCRtpScriptTransform`).
If the transformer is inserted into an audio stream, the `transform()` method is called with a `RTCEncodedAudioFrame` whenever a new frame is enqueued on `event.transformer.readable`. The `transform()` method shows how this might be read, modified using a fictional encryption function, and then enqueued on the controller (this ultimately pipes it through to the `event.transformer.writable`, and then back into the WebRTC pipeline).
    
    addEventListener("rtctransform", (event) => {
      const transform = new TransformStream({
        async transform(encodedFrame, controller) {
          // Reconstruct the original frame.
          const view = new DataView(encodedFrame.data);
    
          // Construct a new buffer
          const newData = new ArrayBuffer(encodedFrame.data.byteLength);
          const newView = new DataView(newData);
    
          // Encrypt frame bytes using the encryptFunction() method (not shown)
          for (let i = 0; i < encodedFrame.data.byteLength; ++i) {
            const encryptedByte = encryptFunction(~view.getInt8(i));
            newView.setInt8(i, encryptedByte);
          }
    
          encodedFrame.data = newData;
          controller.enqueue(encodedFrame);
        },
      });
      event.transformer.readable
        .pipeThrough(transform)
        .pipeTo(event.transformer.writable);
    });
    
Note that more complete examples are provided in Using WebRTC Encoded Transforms.
  * Using WebRTC Encoded Transforms
  * `TransformStream`
  * `RTCRtpScriptTransformer`
  * `RTCEncodedVideoFrame`


# BluetoothRemoteGATTServer
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `BluetoothRemoteGATTServer` interface of the Web Bluetooth API represents a GATT Server on a remote device.
## Instance properties
`BluetoothRemoteGATTServer.connected` Read only Experimental
    
A boolean value that returns true while this script execution environment is connected to `this.device`. It can be false while the user agent is physically connected.
`BluetoothRemoteGATTServer.device` Read only Experimental
    
A reference to the `BluetoothDevice` running the server.
## Instance methods
`BluetoothRemoteGATTServer.connect()` Experimental
    
Causes the script execution environment to connect to `this.device`.
`BluetoothRemoteGATTServer.disconnect()` Experimental
    
Causes the script execution environment to disconnect from `this.device`.
`BluetoothRemoteGATTServer.getPrimaryService()` Experimental
    
Returns a promise to the primary `BluetoothRemoteGATTService` offered by the Bluetooth device for a specified `BluetoothServiceUUID`.
`BluetoothRemoteGATTServer.getPrimaryServices()` Experimental
    
Returns a promise to a list of primary `BluetoothRemoteGATTService` objects offered by the Bluetooth device for a specified `BluetoothServiceUUID`.
# CSSImageValue
The `CSSImageValue` interface of the CSS Typed Object Model API represents values for properties that take an image, for example `background-image`, `list-style-image`, or `border-image-source`.
The CSSImageValue object represents an `<image>` that involves a URL, such as `url()` or `image()`, but not `linear-gradient()` or `element()`.
CSSStyleValue  CSSImageValue 
## Instance properties
None.
## Instance methods
Inherits methods from `CSSStyleValue`.
## Examples
We create an element
    
    <button>Magic Wand</button>
    
We add some CSS, including a background image requesting a binary file:
    
    button {
      display: inline-block;
      min-height: 100px;
      min-width: 100px;
      background: no-repeat 5% center url("magic-wand.png") aqua;
    }
    
We get the element's style map. We then get() the background-image from the style map and stringify it:
    
    // get the element
    const button = document.querySelector("button");
    
    // Retrieve all computed styles with computedStyleMap()
    const allComputedStyles = button.computedStyleMap();
    
    // Return the CSSImageValue Example
    console.log(allComputedStyles.get("background-image"));
    console.log(allComputedStyles.get("background-image").toString());
    
  * `CSSKeywordValue`
  * `CSSNumericValue`
  * `CSSPositionValue`
  * `CSSTransformValue`
  * `CSSUnparsedValue`


# DOMRectList
The `DOMRectList` interface represents a collection of `DOMRect` objects, typically used to hold the rectangles associated with a particular element, like bounding boxes returned by methods such as `getClientRects()`. It provides access to each rectangle in the list via its index, along with a `length` property that indicates the total number of rectangles in the list.
Note: `DOMRectList` exists for compatibility with legacy Web content and is not recommended to be used when creating new APIs.
## Instance properties
`DOMRectList.length` Read only
    
A read-only property that returns the total number of `DOMRect` objects in the `DOMRectList`.
## Instance methods
`DOMRectList.item`
    
Returns the `DOMRect` object at the specified index. If the `index` is out of range, it returns `null`.
  * `DOMRect`
  * `DOMRectReadOnly`


# Media Source API
Note: This feature is available in Dedicated Web Workers.
The Media Source API, formally known as Media Source Extensions (MSE), provides functionality enabling plugin-free web-based streaming media. Using MSE, media streams can be created via JavaScript, and played using `<audio>` and `<video>` elements.
## Concepts and usage
Playing video and audio has been available in web applications without plugins for a few years now, but the basic features offered have really only been useful for playing single whole tracks. We can't, for example, combine/split arraybuffers. Streaming media has up until recently been the domain of Flash, with technologies like Flash Media Server serving video streams using the RTMP protocol.
### The MSE standard
With Media Source Extensions (MSE), this is changing. MSE allows us to replace the usual single progressive `src` URI fed to media elements with a reference to a `MediaSource` object, which is a container for information like the ready state of the media for being played, and references to multiple `SourceBuffer` objects that represent the different chunks of media that make up the entire stream. MSE gives us finer-grained control over how much and how often content is fetched, and some control over memory usage details, such as when buffers are evicted. It lays the groundwork for adaptive bitrate streaming clients (such as those using DASH or HLS) to be built on its extensible API.
Creating assets that work with MSE in modern browsers is a laborious process, taking significant time, computing power, and energy. The usage of external utilities to massage the content into a suitable format is required. While browser support for the various media containers with MSE is spotty, usage of the H.264 video codec, AAC audio codec, and MP4 container format is a common baseline. MSE also provides an API for runtime detection of container and codec support.
If you do not require explicit control of video quality over time, the rate at which content is fetched, or the rate at which memory is evicted, then the `<video>` and `<source>` tags may well be a simple and adequate solution.
### DASH
Dynamic Adaptive Streaming over HTTP (DASH) is a protocol for specifying how adaptive content should be fetched. It is effectively a layer built on top of MSE for building adaptive bitrate streaming clients. While there are other protocols available (such as HTTP Live Streaming (HLS)), DASH has the most platform support.
DASH moves lots of logic out of the network protocol and into the client side application logic, using the simpler HTTP protocol to fetch files. Indeed, one can support DASH with a simple static file server, which is also great for CDNs. This is in direct contrast with previous streaming solutions that required expensive licenses for proprietary non-standard client/server protocol implementations.
The two most common use cases for DASH involve watching content "on demand" or "live." On demand allows a developer to take their time transcoding the assets into multiple resolutions of various quality.
Live profile content can introduce latency due to its transcoding and broadcasting, so DASH is not suitable for real time communication like WebRTC is. It can however support significantly more client connections than WebRTC.
There are numerous available free and open source tools for transcoding content and preparing it for use with DASH, DASH file servers, and DASH client libraries written in JavaScript. The DASH Adaptive Streaming for HTML video article provides an example of how to use DASH with MSE.
### Availability in workers
Starting with Chrome 108, MSE features are available in dedicated web workers, which allows for improved performance when manipulating `MediaSource`s and `SourceBuffer`s. To play back the media, the `MediaSource.handle` property is used to get a reference to a `MediaSourceHandle` object, a proxy for the `MediaSource` that can be transferred back to the main thread and attached to a media element via its `HTMLMediaElement.srcObject` property.
See MSE-in-Workers Demo by Matt Wolenetz for a live example.
## Interfaces
`MediaSource`
    
Represents a media source to be played via an `HTMLMediaElement` object.
`MediaSourceHandle`
    
A proxy for a `MediaSource` that can be transferred from a dedicated worker back to the main thread and attached to a media element via its `HTMLMediaElement.srcObject` property.
`SourceBuffer`
    
Represents a chunk of media to be passed into an `HTMLMediaElement` via a `MediaSource` object.
`SourceBufferList`
    
A simple container list for multiple `SourceBuffer` objects.
`VideoPlaybackQuality`
    
Contains information about the quality of video being played by a `<video>` element, such as number of dropped or corrupted frames. Returned by the `HTMLVideoElement.getVideoPlaybackQuality()` method.
### Extensions to other interfaces
`HTMLMediaElement.buffered`
    
Returns a `TimeRanges` object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the `buffered` property is accessed.
`HTMLMediaElement.seekable`
    
Returns a `TimeRanges` object that contains the time ranges that the user is able to seek to, if any.
`HTMLMediaElement.srcObject`
    
A media provider object representing the media resource to play or that has played in the current `HTMLMediaElement`, or `null` if not assigned.
`HTMLVideoElement.getVideoPlaybackQuality()`
    
Returns a `VideoPlaybackQuality` object for the currently played video.
`AudioTrack.sourceBuffer`, `VideoTrack.sourceBuffer`, `TextTrack.sourceBuffer`
    
Returns the `SourceBuffer` that created the track in question.
  * Transcoding assets for Media Source Extensions
  * Using MSE to create a basic streaming service (TBD)
  * Using MPEG DASH to create a streaming application (TBD)
  * The `<audio>` and `<video>` elements.
  * `HTMLMediaElement`, `HTMLVideoElement`, `HTMLAudioElement`.


# RTCSessionDescription
The `RTCSessionDescription` interface describes one end of a connection—or potential connection—and how it's configured. Each `RTCSessionDescription` consists of a description `type` indicating which part of the offer/answer negotiation process it describes and of the SDP descriptor of the session.
The process of negotiating a connection between two peers involves exchanging `RTCSessionDescription` objects back and forth, with each description suggesting one combination of connection configuration options that the sender of the description supports. Once the two peers agree upon a configuration for the connection, negotiation is complete.
## Constructor
`RTCSessionDescription()` Deprecated
    
Creates a new `RTCSessionDescription` by specifying the `type` and `sdp`. All methods that accept `RTCSessionDescription` objects also accept objects with the same properties, so you can use a plain object instead of creating an `RTCSessionDescription` instance.
## Instance properties
The `RTCSessionDescription` interface doesn't inherit any properties.
`RTCSessionDescription.type` Read only
    
An enum describing the session description's type.
`RTCSessionDescription.sdp` Read only
    
A string containing the SDP describing the session.
## Instance methods
The `RTCSessionDescription` doesn't inherit any methods.
`RTCSessionDescription.toJSON()`
    
Returns a JSON description of the object. The values of both properties, `type` and `sdp`, are contained in the generated JSON.
## Example
    
    signalingChannel.onmessage = (evt) => {
      if (!pc) start(false);
    
      const message = JSON.parse(evt.data);
      if (message.type && message.sdp) {
        pc.setRemoteDescription(
          new RTCSessionDescription(message),
          () => {
            // if we received an offer, we need to answer
            if (pc.remoteDescription.type === "offer") {
              pc.createAnswer(localDescCreated, logError);
            }
          },
          logError,
        );
      } else {
        pc.addIceCandidate(
          new RTCIceCandidate(message.candidate),
          () => {},
          logError,
        );
      }
    };
    
  * WebRTC
  * `RTCPeerConnection.setLocalDescription()` and `RTCPeerConnection.setRemoteDescription()`


# XPathExpression
This interface is a compiled XPath expression that can be evaluated on a document or specific node to return information from its DOM tree.
This is useful when an expression will be reused in an application, because it is just compiled once and all namespace prefixes which occur within the expression are preresolved.
Objects of this type are created by calling `XPathEvaluator.createExpression()`.
## Instance methods
`XPathExpression.evaluate()`
    
Evaluates the XPath expression on the given node or document.
## Example
The following example shows the use of the `XPathExpression` interface.
### HTML
    
    <div>XPath example</div>
    <div>Number of &lt;div&gt;s: <output></output></div>
    
### JavaScript
    
    const xpath = "//div";
    const evaluator = new XPathEvaluator();
    const expression = evaluator.createExpression(xpath);
    const result = expression.evaluate(
      document,
      XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
    );
    document.querySelector("output").textContent = result.snapshotLength;
    
### Result
  * `document.createExpression()`
  * `XPathResult`


# FetchLaterResult
The `FetchLaterResult` interface of the `fetchLater()` API is returned by the `Window.fetchLater()` method after a deferred fetch has been created.
It contains a single `activated` property that indicates whether the deferred request has been sent out or not.
After a successful sending, the whole response is ignored — including body and headers — so the response of the deferred fetch is never returned to the `FetchLaterResult` interface.
## Instance properties
`FetchLaterResult.activated` Read only Experimental
    
A read-only boolean field that indicates whether the deferred request has been sent out. This is initially set to `false` and will then be updated by the browser once the deferred fetch has been sent.
## Examples
>
### Defer a `POST` request for around one minute and create a function to check if sent
    
    const result = fetchLater("https://report.example.com", {
      method: "POST",
      body: JSON.stringify(myReport),
      activateAfter: 60000 /* 1 minute */,
    });
    
    function check_if_fetched() {
      return result.activated;
    }
    
  * `fetchLater()` API
  * Fetch API


# PopStateEvent
`PopStateEvent` is an interface for the `popstate` event.
A `popstate` event is dispatched to the window every time the active history entry changes between two history entries for the same document. If the history entry being activated was created by a call to `history.pushState()` or was affected by a call to `history.replaceState()`, the `popstate` event's `state` property contains a copy of the history entry's state object.
Event  PopStateEvent 
## Constructor
`PopStateEvent()`
    
Creates a new `PopStateEvent` object.
## Instance properties
This interface also inherits the properties of its parent, `Event`.
`PopStateEvent.state` Read only
    
Returns a copy of the information that was provided to `pushState()` or `replaceState()`.
`hasUAVisualTransition` Read only
    
Returns `true` if the user agent performed a visual transition for this navigation before dispatching this event, or `false` otherwise.
## Instance methods
This interface has no methods of its own, but inherits the methods of its parent, `Event`.
  * `popstate` event
  * `hashchange` event


# console
Note: This feature is available in Web Workers.
The `console` object provides access to the debugging console (e.g., the Web console in Firefox).
Implementations of the console API may differ between runtimes. In particular, some console methods may work differently or not work at all in some online editors and IDEs. To see the behavior described in this documentation, try the methods in your browser's developer tools, although even here, there are some differences between browsers.
The `console` object is available in any global scope. For example:
    
    console.log("Failed to open the specified link");
    
## Instance methods
`console.assert()`
    
Log an error message to console if the first argument is `false`.
`console.clear()`
    
Clear the console.
`console.count()`
    
Log the number of times this line has been called with the given label.
`console.countReset()`
    
Resets the value of the counter with the given label.
`console.debug()`
    
Outputs a message to the console with the debug log level.
`console.dir()`
    
Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.
`console.dirxml()`
    
Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible.
`console.error()`
    
Outputs a message to the console with the error log level.
`console.exception()` Non-standard Deprecated
    
An alias for `console.error()`.
`console.group()`
    
Creates a new inline group, indenting all following output by another level. To move back out a level, call `console.groupEnd()`.
`console.groupCollapsed()`
    
Creates a new inline group, indenting all following output by another level. However, unlike `console.group()` this starts with the inline group collapsed requiring the use of a disclosure button to expand it. To move back out a level, call `console.groupEnd()`.
`console.groupEnd()`
    
Exits the current inline group.
`console.info()`
    
Outputs a message to the console with the info log level.
`console.log()`
    
Outputs a message to the console.
`console.profile()` Non-standard
    
Starts the browser's built-in profiler (for example, the Firefox performance tool). You can specify an optional name for the profile.
`console.profileEnd()` Non-standard
    
Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the Firefox performance tool).
`console.table()`
    
Displays tabular data as a table.
`console.time()`
    
Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
`console.timeEnd()`
    
Stops the specified timer and logs the elapsed time in milliseconds since it started.
`console.timeLog()`
    
Logs the value of the specified timer to the console.
`console.timeStamp()` Non-standard
    
Adds a marker to the browser performance tool's timeline (Chrome or Firefox).
`console.trace()`
    
Outputs a stack trace.
`console.warn()`
    
Outputs a message to the console with the warning log level.
## Examples
>
### Outputting text to the console
The console's most frequently used feature is logging text and other data. There are several categories of output you can generate using the `console.log()`, `console.info()`, `console.warn()`, `console.error()`, or `console.debug()` methods. Each of these results in output styled differently in the log, and you can use the filtering controls provided by your browser to view only the kinds of output that interest you.
There are two ways to use each of the output methods:
  * Pass in a variable number of arguments whose string representations get concatenated into one string, then output to the console.
  * Pass in a string containing zero or more substitution strings followed by a variable number of arguments to replace them.


#### Outputting a single object
The simplest way to use the logging methods is to output a single object:
    
    const someObject = { str: "Some text", id: 5 };
    console.log(someObject);
    
The output looks something like this:
    
    {str:"Some text", id:5}
    
The browser will display as much information about the object as it can and wishes to. For example, private state of the object may be displayed too. Certain types of objects, such as DOM elements or functions, may also be displayed in a special way.
#### Snapshotting objects
Information about an object is lazily retrieved. This means that the log message shows the content of an object at the time when it's first viewed, not when it was logged. For example:
    
    const obj = {};
    console.log(obj);
    obj.prop = 123;
    
This will output `{}`. However, if you expand the object's details, you will see `prop: 123`.
If you are going to mutate your object and you want to prevent the logged information from being updated, you can deep-clone the object before logging it. A common way is to `JSON.stringify()` and then `JSON.parse()` it:
    
    console.log(JSON.parse(JSON.stringify(obj)));
    
There are other alternatives that work in browsers, such as `structuredClone()`, which are more effective at cloning different types of objects.
#### Outputting multiple objects
You can also output multiple objects by listing them when calling the logging method, like this:
    
    const car = "Dodge Charger";
    const someObject = { str: "Some text", id: 5 };
    console.info("My first car was a", car, ". The object is:", someObject);
    
The output will look like this:
    
    My first car was a Dodge Charger . The object is: {str:"Some text", id:5}
    
#### Using string substitutions
The first parameter to the logging methods can be a string containing zero or more substitution strings. Each substitution string is replaced by the corresponding argument value.
`%o`
    
Outputs a JavaScript object in the "optimally useful formatting" style, for example DOM elements may be displayed the same way as they would appear in the element inspector.
`%O`
    
Outputs a JavaScript object in the "generic JavaScript object formatting" style, usually in the form of an expandable tree. This is similar to `console.dir()`.
`%d` or `%i`
    
Outputs an integer.
`%s`
    
Outputs a string.
`%f`
    
Outputs a floating-point value.
`%c`
    
Applies CSS style rules to all following text. See Styling console output.
Some browsers may implement additional format specifiers. For example, Safari and Firefox support the C-style precision formatting `%.<precision>f`. For example `console.log("Foo %.2f", 1.1)` will output the number to 2 decimal places: `Foo 1.10`, while `console.log("Foo %.2d", 1.1)` will output the number as two significant figures with a leading 0: `Foo 01`.
Each of these pulls the next argument after the format string off the parameter list. For example:
    
    for (let i = 0; i < 5; i++) {
      console.log("Hello, %s. You've called me %d times.", "Bob", i + 1);
    }
    
The output looks like this:
    
    Hello, Bob. You've called me 1 times.
    Hello, Bob. You've called me 2 times.
    Hello, Bob. You've called me 3 times.
    Hello, Bob. You've called me 4 times.
    Hello, Bob. You've called me 5 times.
    
#### Styling console output
You can use the `%c` directive to apply a CSS style to console output:
    
    console.log(
      "This is %cMy stylish message",
      "color: yellow; font-style: italic; background-color: blue;padding: 2px",
    );
    
The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.
You may use `%c` multiple times:
    
    console.log(
      "Multiple styles: %cred %corange",
      "color: red",
      "color: orange",
      "Additional unformatted message",
    );
    
The properties usable along with the `%c` syntax are as follows (at least, in Firefox — they may differ in other browsers):
  * `background` and its longhand equivalents
  * `border` and its longhand equivalents
  * `border-radius`
  * `box-decoration-break`
  * `box-shadow`
  * `clear` and `float`
  * `color`
  * `cursor`
  * `display`
  * `font` and its longhand equivalents
  * `line-height`
  * `margin`
  * `outline` and its longhand equivalents
  * `padding`
  * `text-*` properties such as `text-transform`
  * `white-space`
  * `word-spacing` and `word-break`
  * `writing-mode`


Note: Each console message behaves like an inline element by default. If you want properties such as `padding`, `margin`, and so on to have any effect, you can set the `display` property to `display: inline-block`.
Note: In order to support both light and dark color schemes, `light-dark()` can be used when specifying colors; for example: `color: light-dark(#D00000, #FF4040);`
### Using groups in the console
You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call `console.group()`. The `console.groupCollapsed()` method is similar but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.
To exit the current group, call `console.groupEnd()`. For example, given this code:
    
    console.log("This is the outer level");
    console.group("First group");
    console.log("In the first group");
    console.group("Second group");
    console.log("In the second group");
    console.warn("Still in the second group");
    console.groupEnd();
    console.log("Back to the first group");
    console.groupEnd();
    console.debug("Back to the outer level");
    
The output looks like this:
### Timers
You can start a timer to calculate the duration of a specific operation. To start one, call the `console.time()` method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the `console.timeEnd()` method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.
For example, given this code:
    
    console.time("answer time");
    alert("Click to continue");
    console.timeLog("answer time");
    alert("Do a bunch of other stuff…");
    console.timeEnd("answer time");
    
Will log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console:
Notice that the timer's name is displayed both when the timer is started and when it's stopped.
### Stack traces
The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call `console.trace()`. Given code like this:
    
    function foo() {
      function bar() {
        console.trace();
      }
      bar();
    }
    
    foo();
    
The output in the console looks something like this:
  * Firefox Developer Tools
  * Web console — how the Web console in Firefox handles console API calls
  * about:debugging — how to see console output when the debugging target is a mobile device
  * Google Chrome DevTools
  * Microsoft Edge DevTools
  * Safari Web Inspector


# ChannelSplitterNode
The `ChannelSplitterNode` interface, often used in conjunction with its opposite, `ChannelMergerNode`, separates the different channels of an audio source into a set of mono outputs. This is useful for accessing each channel separately, e.g., for performing channel mixing where gain must be separately controlled on each channel.
If your `ChannelSplitterNode` always has one single input, the amount of outputs is defined by a parameter on its constructor and the call to `AudioContext.createChannelSplitter()`. In the case that no value is given, it will default to `6`. If there are fewer channels in the input than there are outputs, supernumerary outputs are silent.
EventTarget  AudioNode  ChannelSplitterNode 
Number of inputs `1`  
Number of outputs variable; default to `6`.  
Channel count mode `"explicit"` Older implementations, as per earlier versions of the spec use `"max"`.   
Channel count Fixed to the number of outputs. Older implementations, as per earlier versions of the spec use `2` (not used in the default count mode).   
Channel interpretation `"discrete"`  
## Constructor
`ChannelSplitterNode()`
    
Creates a new `ChannelSplitterNode` object instance.
## Instance properties
No specific property; inherits properties from its parent, `AudioNode`.
## Instance methods
No specific method; inherits methods from its parent, `AudioNode`.
## Example
See `BaseAudioContext.createChannelSplitter()` for example code.
  * Using the Web Audio API


# WebGLRenderingContext
Note: This feature is available in Web Workers.
The `WebGLRenderingContext` interface provides an interface to the OpenGL ES 2.0 graphics rendering context for the drawing surface of an HTML `<canvas>` element.
To get an access to a WebGL context for 2D and/or 3D graphics rendering, call `getContext()` on a `<canvas>` element, supplying "webgl" as the argument:
    
    const canvas = document.getElementById("myCanvas");
    const gl = canvas.getContext("webgl");
    
Once you have the WebGL rendering context for a canvas, you can render within it. The WebGL tutorial has more information, examples, and resources on how to get started with WebGL.
If you require a WebGL 2.0 context, see `WebGL2RenderingContext`; this supplies access to an implementation of OpenGL ES 3.0 graphics.
## Constants
See the WebGL constants page.
## The WebGL context
The following properties and methods provide general information and functionality to deal with the WebGL context:
`WebGLRenderingContext.canvas`
    
A read-only back-reference to the `HTMLCanvasElement`. Might be `null` if it is not associated with a `<canvas>` element.
`WebGLRenderingContext.drawingBufferWidth`
    
The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.
`WebGLRenderingContext.drawingBufferHeight`
    
The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.
`WebGLRenderingContext.getContextAttributes()`
    
Returns a `WebGLContextAttributes` object that contains the actual context parameters. Might return `null`, if the context is lost.
`WebGLRenderingContext.isContextLost()`
    
Returns `true` if the context is lost, otherwise returns `false`.
`WebGLRenderingContext.makeXRCompatible()`
    
Ensures the context is compatible with the user's XR hardware, re-creating the context if necessary with a new configuration to do so. This can be used to start an application using standard 2D presentation, then transition to using a VR or AR mode later.
## Viewing and clipping
`WebGLRenderingContext.scissor()`
    
Defines the scissor box.
`WebGLRenderingContext.viewport()`
    
Sets the viewport.
## State information
`WebGLRenderingContext.activeTexture()`
    
Selects the active texture unit.
`WebGLRenderingContext.blendColor()`
    
Sets the source and destination blending factors.
`WebGLRenderingContext.blendEquation()`
    
Sets both the RGB blend equation and alpha blend equation to a single equation.
`WebGLRenderingContext.blendEquationSeparate()`
    
Sets the RGB blend equation and alpha blend equation separately.
`WebGLRenderingContext.blendFunc()`
    
Defines which function is used for blending pixel arithmetic.
`WebGLRenderingContext.blendFuncSeparate()`
    
Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.
`WebGLRenderingContext.clearColor()`
    
Specifies the color values used when clearing color buffers.
`WebGLRenderingContext.clearDepth()`
    
Specifies the depth value used when clearing the depth buffer.
`WebGLRenderingContext.clearStencil()`
    
Specifies the stencil value used when clearing the stencil buffer.
`WebGLRenderingContext.colorMask()`
    
Sets which color components to enable or to disable when drawing or rendering to a `WebGLFramebuffer`.
`WebGLRenderingContext.cullFace()`
    
Specifies whether or not front- and/or back-facing polygons can be culled.
`WebGLRenderingContext.depthFunc()`
    
Specifies a function that compares incoming pixel depth to the current depth buffer value.
`WebGLRenderingContext.depthMask()`
    
Sets whether writing into the depth buffer is enabled or disabled.
`WebGLRenderingContext.depthRange()`
    
Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.
`WebGLRenderingContext.disable()`
    
Disables specific WebGL capabilities for this context.
`WebGLRenderingContext.enable()`
    
Enables specific WebGL capabilities for this context.
`WebGLRenderingContext.frontFace()`
    
Specifies whether polygons are front- or back-facing by setting a winding orientation.
`WebGLRenderingContext.getParameter()`
    
Returns a value for the passed parameter name.
`WebGLRenderingContext.getError()`
    
Returns error information.
`WebGLRenderingContext.hint()`
    
Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.
`WebGLRenderingContext.isEnabled()`
    
Tests whether a specific WebGL capability is enabled or not for this context.
`WebGLRenderingContext.lineWidth()`
    
Sets the line width of rasterized lines.
`WebGLRenderingContext.pixelStorei()`
    
Specifies the pixel storage modes
`WebGLRenderingContext.polygonOffset()`
    
Specifies the scale factors and units to calculate depth values.
`WebGLRenderingContext.sampleCoverage()`
    
Specifies multi-sample coverage parameters for anti-aliasing effects.
`WebGLRenderingContext.stencilFunc()`
    
Sets the both front and back function and reference value for stencil testing.
`WebGLRenderingContext.stencilFuncSeparate()`
    
Sets the front and/or back function and reference value for stencil testing.
`WebGLRenderingContext.stencilMask()`
    
Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
`WebGLRenderingContext.stencilMaskSeparate()`
    
Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
`WebGLRenderingContext.stencilOp()`
    
Sets both the front and back-facing stencil test actions.
`WebGLRenderingContext.stencilOpSeparate()`
    
Sets the front and/or back-facing stencil test actions.
## Buffers
`WebGLRenderingContext.bindBuffer()`
    
Binds a `WebGLBuffer` object to a given target.
`WebGLRenderingContext.bufferData()`
    
Updates buffer data.
`WebGLRenderingContext.bufferSubData()`
    
Updates buffer data starting at a passed offset.
`WebGLRenderingContext.createBuffer()`
    
Creates a `WebGLBuffer` object.
`WebGLRenderingContext.deleteBuffer()`
    
Deletes a `WebGLBuffer` object.
`WebGLRenderingContext.getBufferParameter()`
    
Returns information about the buffer.
`WebGLRenderingContext.isBuffer()`
    
Returns a Boolean indicating if the passed buffer is valid.
## Framebuffers
`WebGLRenderingContext.bindFramebuffer()`
    
Binds a `WebGLFrameBuffer` object to a given target.
`WebGLRenderingContext.checkFramebufferStatus()`
    
Returns the status of the framebuffer.
`WebGLRenderingContext.createFramebuffer()`
    
Creates a `WebGLFrameBuffer` object.
`WebGLRenderingContext.deleteFramebuffer()`
    
Deletes a `WebGLFrameBuffer` object.
`WebGLRenderingContext.framebufferRenderbuffer()`
    
Attaches a `WebGLRenderingBuffer` object to a `WebGLFrameBuffer` object.
`WebGLRenderingContext.framebufferTexture2D()`
    
Attaches a textures image to a `WebGLFrameBuffer` object.
`WebGLRenderingContext.getFramebufferAttachmentParameter()`
    
Returns information about the framebuffer.
`WebGLRenderingContext.isFramebuffer()`
    
Returns a Boolean indicating if the passed `WebGLFrameBuffer` object is valid.
`WebGLRenderingContext.readPixels()`
    
Reads a block of pixels from the `WebGLFrameBuffer`.
## Renderbuffers
`WebGLRenderingContext.bindRenderbuffer()`
    
Binds a `WebGLRenderBuffer` object to a given target.
`WebGLRenderingContext.createRenderbuffer()`
    
Creates a `WebGLRenderBuffer` object.
`WebGLRenderingContext.deleteRenderbuffer()`
    
Deletes a `WebGLRenderBuffer` object.
`WebGLRenderingContext.getRenderbufferParameter()`
    
Returns information about the renderbuffer.
`WebGLRenderingContext.isRenderbuffer()`
    
Returns a Boolean indicating if the passed `WebGLRenderingBuffer` is valid.
`WebGLRenderingContext.renderbufferStorage()`
    
Creates a renderbuffer data store.
## Textures
`WebGLRenderingContext.bindTexture()`
    
Binds a `WebGLTexture` object to a given target.
`WebGLRenderingContext.compressedTexImage2D()`
    
Specifies a 2D texture image in a compressed format.
`WebGLRenderingContext.compressedTexSubImage2D()`
    
Specifies a 2D texture sub-image in a compressed format.
`WebGLRenderingContext.copyTexImage2D()`
    
Copies a 2D texture image.
`WebGLRenderingContext.copyTexSubImage2D()`
    
Copies a 2D texture sub-image.
`WebGLRenderingContext.createTexture()`
    
Creates a `WebGLTexture` object.
`WebGLRenderingContext.deleteTexture()`
    
Deletes a `WebGLTexture` object.
`WebGLRenderingContext.generateMipmap()`
    
Generates a set of mipmaps for a `WebGLTexture` object.
`WebGLRenderingContext.getTexParameter()`
    
Returns information about the texture.
`WebGLRenderingContext.isTexture()`
    
Returns a Boolean indicating if the passed `WebGLTexture` is valid.
`WebGLRenderingContext.texImage2D()`
    
Specifies a 2D texture image.
`WebGLRenderingContext.texSubImage2D()`
    
Updates a sub-rectangle of the current `WebGLTexture`.
`WebGLRenderingContext.texParameterf()`
    
Sets texture parameters.
`WebGLRenderingContext.texParameteri()`
    
Sets texture parameters.
## Programs and shaders
`WebGLRenderingContext.attachShader()`
    
Attaches a `WebGLShader` to a `WebGLProgram`.
`WebGLRenderingContext.bindAttribLocation()`
    
Binds a generic vertex index to a named attribute variable.
`WebGLRenderingContext.compileShader()`
    
Compiles a `WebGLShader`.
`WebGLRenderingContext.createProgram()`
    
Creates a `WebGLProgram`.
`WebGLRenderingContext.createShader()`
    
Creates a `WebGLShader`.
`WebGLRenderingContext.deleteProgram()`
    
Deletes a `WebGLProgram`.
`WebGLRenderingContext.deleteShader()`
    
Deletes a `WebGLShader`.
`WebGLRenderingContext.detachShader()`
    
Detaches a `WebGLShader`.
`WebGLRenderingContext.getAttachedShaders()`
    
Returns a list of `WebGLShader` objects attached to a `WebGLProgram`.
`WebGLRenderingContext.getProgramParameter()`
    
Returns information about the program.
`WebGLRenderingContext.getProgramInfoLog()`
    
Returns the information log for a `WebGLProgram` object.
`WebGLRenderingContext.getShaderParameter()`
    
Returns information about the shader.
`WebGLRenderingContext.getShaderPrecisionFormat()`
    
Returns a `WebGLShaderPrecisionFormat` object describing the precision for the numeric format of the shader.
`WebGLRenderingContext.getShaderInfoLog()`
    
Returns the information log for a `WebGLShader` object.
`WebGLRenderingContext.getShaderSource()`
    
Returns the source code of a `WebGLShader` as a string.
`WebGLRenderingContext.isProgram()`
    
Returns a Boolean indicating if the passed `WebGLProgram` is valid.
`WebGLRenderingContext.isShader()`
    
Returns a Boolean indicating if the passed `WebGLShader` is valid.
`WebGLRenderingContext.linkProgram()`
    
Links the passed `WebGLProgram` object.
`WebGLRenderingContext.shaderSource()`
    
Sets the source code in a `WebGLShader`.
`WebGLRenderingContext.useProgram()`
    
Uses the specified `WebGLProgram` as part the current rendering state.
`WebGLRenderingContext.validateProgram()`
    
Validates a `WebGLProgram`.
## Uniforms and attributes
`WebGLRenderingContext.disableVertexAttribArray()`
    
Disables a vertex attribute array at a given position.
`WebGLRenderingContext.enableVertexAttribArray()`
    
Enables a vertex attribute array at a given position.
`WebGLRenderingContext.getActiveAttrib()`
    
Returns information about an active attribute variable.
`WebGLRenderingContext.getActiveUniform()`
    
Returns information about an active uniform variable.
`WebGLRenderingContext.getAttribLocation()`
    
Returns the location of an attribute variable.
`WebGLRenderingContext.getUniform()`
    
Returns the value of a uniform variable at a given location.
`WebGLRenderingContext.getUniformLocation()`
    
Returns the location of a uniform variable.
`WebGLRenderingContext.getVertexAttrib()`
    
Returns information about a vertex attribute at a given position.
`WebGLRenderingContext.getVertexAttribOffset()`
    
Returns the address of a given vertex attribute.
`WebGLRenderingContext.uniform[1234][fi][v]()`
    
Specifies a value for a uniform variable.
`WebGLRenderingContext.uniformMatrix[234]fv()`
    
Specifies a matrix value for a uniform variable.
`WebGLRenderingContext.vertexAttrib[1234]f[v]()`
    
Specifies a value for a generic vertex attribute.
`WebGLRenderingContext.vertexAttribPointer()`
    
Specifies the data formats and locations of vertex attributes in a vertex attributes array.
## Drawing buffers
`WebGLRenderingContext.clear()`
    
Clears specified buffers to preset values.
`WebGLRenderingContext.drawArrays()`
    
Renders primitives from array data.
`WebGLRenderingContext.drawElements()`
    
Renders primitives from element array data.
`WebGLRenderingContext.finish()`
    
Blocks execution until all previously called commands are finished.
`WebGLRenderingContext.flush()`
    
Empties different buffer commands, causing all commands to be executed as quickly as possible.
## Color spaces
`WebGLRenderingContext.drawingBufferColorSpace`
    
Specifies the color space of the WebGL drawing buffer.
`WebGLRenderingContext.unpackColorSpace`
    
Specifies the color space to convert to when importing textures.
## Working with extensions
These methods manage WebGL extensions:
`WebGLRenderingContext.getSupportedExtensions()`
    
Returns an `Array` of strings containing all the supported WebGL extensions.
`WebGLRenderingContext.getExtension()`
    
Returns an extension object.
  * `HTMLCanvasElement`


# PictureInPictureEvent
The `PictureInPictureEvent` interface represents picture-in-picture-related events, including `enterpictureinpicture`, `leavepictureinpicture` and `resize`.
Event  PictureInPictureEvent 
## Constructor
`PictureInPictureEvent()`
    
Creates a `PictureInPictureEvent` event with the given parameters.
## Instance properties
This interface also inherits properties from its parent `Event`.
`PictureInPictureEvent.pictureInPictureWindow`
    
Returns the `PictureInPictureWindow` the event relates to.
## Instance methods
This interface also inherits methods from its parent `Event`.
  * The `Event` base interface


# PresentationConnectionList
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
`PresentationConnectionList` is the collection of incoming presentation connections.
EventTarget  PresentationConnectionList 
## Instance properties
`PresentationConnectionList.connections` Read only Experimental
    
Returns the non-terminated set of `PresentationConnection`s in the set of presentation controllers.
## Events
`connectionavailable` Experimental
    
Fired whenever a new presentation connection becomes available.
# DOMQuad
Note: This feature is available in Web Workers.
A `DOMQuad` is a collection of four `DOMPoint`s defining the corners of an arbitrary quadrilateral. Returning `DOMQuad`s lets `getBoxQuads()` return accurate information even when arbitrary 2D or 3D transforms are present. It has a handy `bounds` attribute returning a `DOMRectReadOnly` for those cases where you just want an axis-aligned bounding rectangle.
## Constructor
`DOMQuad()`
    
Creates a new `DOMQuad` object.
## Instance properties
`DOMQuad.p1` Read only
    
A `DOMPoint` representing one corner of the `DOMQuad`.
`DOMQuad.p2` Read only
    
A `DOMPoint` representing one corner of the `DOMQuad`.
`DOMQuad.p3` Read only
    
A `DOMPoint` representing one corner of the `DOMQuad`.
`DOMQuad.p4` Read only
    
A `DOMPoint` representing one corner of the `DOMQuad`.
## Instance methods
`DOMQuad.getBounds()`
    
Returns a `DOMRect` object with the coordinates and dimensions of the `DOMQuad` object.
`DOMQuad.toJSON()`
    
Returns a JSON representation of the `DOMQuad` object.
## Static methods
`DOMQuad.fromRect()`
    
Returns a new `DOMQuad` object based on the passed set of coordinates.
`DOMQuad.fromQuad()`
    
Returns a new `DOMQuad` object or a set of quadrilateral coordinates based on the provided input.
# SecurePaymentConfirmationRequest
The `SecurePaymentConfirmationRequest` dictionary describes input to the Payment Request API when used to authenticate a user during an e-commerce transaction using SPC with Payment Request API.
An instance of this dictionary must be passed into the `PaymentRequest()` constructor as the value of the `data` field corresponding to a `supportedMethods` value of `"secure-payment-confirmation"`.
## Instance properties
`challenge`
    
An `ArrayBuffer`, `TypedArray`, or `DataView` provided by the relying party's server and used as a cryptographic challenge. This value will be signed by the authenticator and the signature will be sent back as part of `AuthenticatorAttestationResponse.attestationObject`. This helps prevent replay attacks.
`credentialIds`
    
A list of `ArrayBuffer`, `TypedArray`, or `DataView`. These Credential IDs represent Web Authentication credentials that have been registered with the relying party for authenticating during a payment with the associated `instrument`.
`extensions` Optional
    
Any WebAuthn extensions that should be used for the passed credential(s). The caller does not need to specify the `payment` extension; this is added automatically.
`instrument`
    
The description of the instrument name and icon to display during registration and to be signed along with the transaction details. This is an object with the following properties:
`displayName`
    
A string containing the payment instrument's name, which will be displayed to the user.
`icon`
    
A string containing the URL of the payment instrument's icon.
`iconMustBeShown` Optional
    
A boolean value indicating whether the icon must be successfully fetched and shown for the request to succeed. Defaults to `true`.
`locale` Optional
    
An optional list of well-formed RFC 5646: Tags for Identifying Languages (also known as BCP 47) language tags, in descending order of priority, that identify the local preferences of the website. That is, this represents a language priority list RFC 4647: Matching of Language Tags, which the user agent can use to perform language negotiation and locale-affected formatting with the caller.
Note: The locale is distinct from language or direction metadata associated with specific input members, in that it represents the caller's requested localized experience rather than assertion about a specific string value. See SPC internationalization Considerations for more discussion.
`payeeName` Optional
    
A string that serves as the display name of the payee that this SPC call is for (e.g., the merchant). Optional, may be provided alongside or instead of `payeeOrigin`.
`payeeOrigin` Optional
    
A string that is the origin of the payee that this SPC call is for (e.g., the merchant). Optional, may be provided alongside or instead of `payeeName`.
`rpId`
    
A string that specifies the relying party's identifier (for example "login.example.org").
`showOptOut` Optional
    
A boolean indicating whether the user should be given a chance to opt-out during the transaction dialog UX. Defaults to `false`.
`timeout` Optional
    
The number of milliseconds before the request to sign the transaction details times out. At most 1 hour.
# Screen Orientation API
The Screen Orientation API provides information about the orientation of the screen.
## Interfaces
  * `ScreenOrientation`


# CSSAnimation
The `CSSAnimation` interface of the Web Animations API represents an `Animation` object.
EventTarget  Animation  CSSAnimation 
## Instance properties
This interface inherits properties from its parent, `Animation`.
`CSSAnimation.animationName` Read only
    
Returns the animation name as a string.
## Instance methods
This interface inherits methods from its parent, `Animation`.
## Examples
>
### Inspecting the returned CSSAnimation
The animation in the following example is defined in CSS with the name `slide-in`. Calling `Element.getAnimations()` returns an array of all `Animation` objects. In our case this returns a `CSSAnimation` object, representing the animation created in CSS.
    
    .animate {
      animation: slide-in 0.7s both;
    }
    
    @keyframes slide-in {
      0% {
        transform: translateY(-1000px);
      }
      100% {
        transform: translateY(0);
      }
    }
    
    
    let animations = document.querySelector(".animate").getAnimations();
    console.log(animations[0]);
    
# WEBGL_color_buffer_float extension
The `WEBGL_color_buffer_float` extension is part of the WebGL API and adds the ability to render to 32-bit floating-point color buffers.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is available to WebGL 1 contexts only. For WebGL 2, use the `EXT_color_buffer_float` extension.
The `OES_texture_float` extension implicitly enables this extension.
## Constants
`ext.RGBA32F_EXT`
    
RGBA 32-bit floating-point color-renderable format.
`ext.RGB32F_EXT` ( Deprecated )
    
RGB 32-bit floating-point color-renderable format.
`ext.FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT`
    
?
`ext.UNSIGNED_NORMALIZED_EXT`
    
?
## Extended methods
This extension extends `WebGLRenderingContext.renderbufferStorage()`:
  * The `internalformat` parameter now accepts `ext.RGBA32F_EXT` and `ext.RGB32F_EXT` ( Deprecated ).


## Examples
    
    const ext = gl.getExtension("WEBGL_color_buffer_float");
    
    gl.renderbufferStorage(gl.RENDERBUFFER, ext.RGBA32F_EXT, 256, 256);
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.renderbufferStorage()`
  * `OES_texture_float`


# SVGFEOffsetElement
The `SVGFEOffsetElement` interface corresponds to the `<feOffset>` element.
EventTarget  Node  Element  SVGElement  SVGFEOffsetElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEOffsetElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEOffsetElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFEOffsetElement.dx` Read only
    
An `SVGAnimatedNumber` corresponding to the `dx` attribute of the given element.
`SVGFEOffsetElement.dy` Read only
    
An `SVGAnimatedNumber` corresponding to the `dy` attribute of the given element.
`SVGFEOffsetElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEOffsetElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEOffsetElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEOffsetElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
  * `<feOffset>`


# HTMLDataElement
The `HTMLDataElement` interface provides special properties (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating `<data>` elements.
EventTarget  Node  Element  HTMLElement  HTMLDataElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLDataElement.value`
    
A string reflecting the `value` HTML attribute, containing a machine-readable form of the element's value.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<data>`.


# WebGLQuery
Note: This feature is available in Web Workers.
The `WebGLQuery` interface is part of the WebGL 2 API and provides ways to asynchronously query for information. By default, occlusion queries and primitive queries are available.
Another kind of queries are disjoint timer queries, which allow you to measure performance and profiling of your GPU. Disjoint timer queries are available with the `EXT_disjoint_timer_query` extension only.
WebGLObject  WebGLQuery 
When working with `WebGLQuery` objects, the following methods of the `WebGL2RenderingContext` are useful:
  * `WebGL2RenderingContext.createQuery()`
  * `WebGL2RenderingContext.deleteQuery()`
  * `WebGL2RenderingContext.isQuery()`
  * `WebGL2RenderingContext.beginQuery()`
  * `WebGL2RenderingContext.endQuery()`
  * `WebGL2RenderingContext.getQuery()`
  * `WebGL2RenderingContext.getQueryParameter()`


## Examples
>
### Creating a `WebGLQuery` object
in this example, `gl` must be a `WebGL2RenderingContext`. `WebGLQuery` objects are not available in WebGL 1.
    
    const query = gl.createQuery();
    
  * `EXT_disjoint_timer_query`


# URL Fragment Text Directives
The URL fragment text directives API allows web apps to interact with text fragments in the URL. Text fragments allow linking directly to a specific portion of text in a web document, without requiring the author to annotate it with an ID, using a particular syntax in the URL fragment.
## Interfaces
`FragmentDirective`
    
A (currently) empty object. The existence of an object of this type in `document.fragmentDirective` is used for feature detection.
## Extensions to other interfaces
`Document.fragmentDirective`
    
A property that returns a `FragmentDirective` object for the current document. Currently only used for feature detection.
## CSS selectors
`::target-text`
    
Represents the text that has been scrolled to. It allows authors to choose how to highlight that section of text.
>
### api.Document.fragmentDirective
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`URL_Fragment_Text_Directives` 86 86 131 72 18.4 86 131 61 18.4 14.0 86 18.4  
### api.FragmentDirective
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`URL_Fragment_Text_Directives` 81 83 131 68 18.4 81 131 58 18.4 13.0 81 18.4  
### css.selectors.target-text
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`URL_Fragment_Text_Directives` 89 89 131 75 18.2 89 131 63 18.2 15.0 89 18.2  
  * URI fragment


# HTMLTableSectionElement
The `HTMLTableSectionElement` interface provides special properties and methods (beyond the `HTMLElement` interface it also has available to it by inheritance) for manipulating the layout and presentation of sections, that is headers, footers and bodies (`<thead>`, `<tfoot>`, and `<tbody>`, respectively) in an HTML table.
EventTarget  Node  Element  HTMLElement  HTMLTableSectionElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLTableSectionElement.align` Deprecated
    
A string containing an enumerated value reflecting the `align` attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are `"left"`, `"right"`, and `"center"`.
`HTMLTableSectionElement.rows` Read only
    
Returns a live `HTMLCollection` containing the rows in the section. The `HTMLCollection` is live and is automatically updated when rows are added or removed.
`HTMLTableSectionElement.ch` Deprecated
    
A string containing one single character. This character is the one to align all the cell of a column on. It reflects the `char` and default to the decimal points associated with the language, e.g., `'.'` for English, or `','` for French. This property was optional and was not very well supported.
`HTMLTableSectionElement.chOff` Deprecated
    
A string containing an integer indicating how many characters must be left at the right (for left-to-right scripts; or at the left for right-to-left scripts) of the character defined by `HTMLTableRowElement.ch`. This property was optional and was not very well supported.
`HTMLTableSectionElement.vAlign` Deprecated
    
A string representing an enumerated value indicating how the content of the cell must be vertically aligned. It reflects the `valign` attribute and can have one of the following values: `"top"`, `"middle"`, `"bottom"`, or `"baseline"`.
## Instance methods
Inherits methods from its parent, `HTMLElement`.
`HTMLTableSectionElement.deleteRow()`
    
Removes the row, corresponding to the `index` given in parameter, in the section. If the `index` value is `-1` the last row is removed; if it smaller than `-1` or greater than the amount of rows in the collection, a `DOMException` with the value `IndexSizeError` is raised.
`HTMLTableSectionElement.insertRow()`
    
Returns an `HTMLTableRowElement` representing a new row of the section. It inserts it in the rows collection immediately before the `<tr>` element at the given `index` position. If the `index` is `-1`, the new row is appended to the collection. If the `index` is smaller than `-1` or greater than the number of rows in the collection, a `DOMException` with the value `IndexSizeError` is raised.
  * The HTML elements implementing this interface: `<tfoot>`, `<thead>`, and `<tbody>`.


# CompressionStream
Note: This feature is available in Web Workers.
The `CompressionStream` interface of the Compression Streams API is an API for compressing a stream of data.
## Constructor
`CompressionStream()`
    
Creates a new `CompressionStream`
## Instance properties
`CompressionStream.readable`
    
Returns the `ReadableStream` instance controlled by this object.
`CompressionStream.writable`
    
Returns the `WritableStream` instance controlled by this object.
## Examples
In this example a stream is compressed using gzip compression.
    
    const compressedReadableStream = inputReadableStream.pipeThrough(
      new CompressionStream("gzip"),
    );
    
# SVGGeometryElement
The `SVGGeometryElement` interface represents SVG elements whose rendering is defined by geometry with an equivalent path, and which can be filled and stroked. This includes paths and the basic shapes.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGGeometryElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGraphicsElement`.
`SVGGeometryElement.pathLength` Read only
    
This property reflects the `pathLength` attribute.
## Instance methods
This interface also inherits methods from its parent, `SVGGraphicsElement`.
`SVGGeometryElement.isPointInFill()`
    
Determines whether a given point is within the fill shape of an element. Normal hit testing rules apply; the value of the `pointer-events` property on the element determines whether a point is considered to be within the fill.
`SVGGeometryElement.isPointInStroke()`
    
Determines whether a given point is within the stroke shape of an element. Normal hit testing rules apply; the value of the `pointer-events` property on the element determines whether a point is considered to be within the stroke.
`SVGGeometryElement.getTotalLength()`
    
Returns the user agent's computed value for the total length of the path in user units.
`SVGGeometryElement.getPointAtLength()`
    
Returns the point at a given distance along the path.
# HTMLHeadElement
The `HTMLHeadElement` interface contains the descriptive information, or metadata, for a document. This object inherits all of the properties and methods described in the `HTMLElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLHeadElement 
## Instance properties
No specific properties; inherits properties from its parent, `HTMLElement`.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<head>`


# TransformStream
Note: This feature is available in Web Workers.
The `TransformStream` interface of the Streams API represents a concrete implementation of the pipe chain transform stream concept.
It may be passed to the `ReadableStream.pipeThrough()` method in order to transform a stream of data from one format into another. For example, it might be used to decode (or encode) video frames, decompress data, or convert the stream from XML to JSON.
A transformation algorithm may be provided as an optional argument to the object constructor. If not supplied, data is not modified when piped through the stream.
`TransformStream` is a transferable object.
## Constructor
`TransformStream()`
    
Creates and returns a transform stream object, optionally specifying a transformation object and queuing strategies for the streams.
## Instance properties
`TransformStream.readable` Read only
    
The `readable` end of a `TransformStream`.
`TransformStream.writable` Read only
    
The `writable` end of a `TransformStream`.
## Instance methods
None
## Examples
>
### Anything-to-uint8array stream
In the following example, a transform stream passes through all chunks it receives as `Uint8Array` values.
    
    const transformContent = {
      start() {}, // required.
      async transform(chunk, controller) {
        chunk = await chunk;
        switch (typeof chunk) {
          case "object":
            // just say the stream is done I guess
            if (chunk === null) {
              controller.terminate();
            } else if (ArrayBuffer.isView(chunk)) {
              controller.enqueue(
                new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength),
              );
            } else if (
              Array.isArray(chunk) &&
              chunk.every((value) => typeof value === "number")
            ) {
              controller.enqueue(new Uint8Array(chunk));
            } else if (
              typeof chunk.valueOf === "function" &&
              chunk.valueOf() !== chunk
            ) {
              this.transform(chunk.valueOf(), controller); // hack
            } else if ("toJSON" in chunk) {
              this.transform(JSON.stringify(chunk), controller);
            }
            break;
          case "symbol":
            controller.error("Cannot send a symbol as a chunk part");
            break;
          case "undefined":
            controller.error("Cannot send undefined as a chunk part");
            break;
          default:
            controller.enqueue(this.textencoder.encode(String(chunk)));
            break;
        }
      },
      flush() {
        /* do any destructor work here */
      },
    };
    
    class AnyToU8Stream extends TransformStream {
      constructor() {
        super({ ...transformContent, textencoder: new TextEncoder() });
      }
    }
    
### Chaining multiple ReadableStreams together
This is a useful one, where multiple streams can be conjoined. Examples include building a PWA with progressive loading and progressive streaming.
    
    let responses = [
      /* conjoined response tree */
    ];
    let { readable, writable } = new TransformStream();
    
    responses.reduce(
      (a, res, i, arr) =>
        a.then(() => res.pipeTo(writable, { preventClose: i + 1 !== arr.length })),
      Promise.resolve(),
    );
    
Note that this is not resilient to other influences.
  * Streams—The Definitive Guide


# CreateMonitor
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `CreateMonitor` interface provides information on the progress of an AI model download or some fine-tuning data for the model.
It can be used via:
  * `Summarizer.create()`
  * `LanguageDetector.create()`
  * `Translator.create()`

EventTarget  CreateMonitor 
## Events
Inherits events from its parent, `EventTarget`.
`downloadprogress` Experimental
    
Fired when progress is made on the AI model download.
## Examples
>
### Basic `CreateMonitor` usage
A `CreateMonitor` instance is used via the `monitor` property of an AI API's `create()` method (`Summarizer.create()` is shown below). The `monitor` property takes a callback function as a value, the argument of which is the `CreateMonitor` instance. You can then monitor download progress via the instance's `downloadprogress` event.
    
    const summarizer = await Summarizer.create({
      sharedContext:
        "A general summary to help a user decide if the text is worth reading",
      monitor(monitor) {
        monitor.addEventListener("downloadprogress", (e) => {
          console.log(`download progress: ${e.loaded}/${e.total}`);
        });
      },
    });
    
    const summary = await summarizer.summarize(myText);
    
  * Using the Summarizer API
  * Web AI demos on chrome.dev.


# ConstantSourceNode
The `ConstantSourceNode` interface—part of the Web Audio API—represents an audio source (based upon `AudioScheduledSourceNode`) whose output is single unchanging value. This makes it useful for cases in which you need a constant value coming in from an audio source. In addition, it can be used like a constructible `AudioParam` by automating the value of its `offset` or by connecting another node to it; see Controlling multiple parameters with ConstantSourceNode.
A `ConstantSourceNode` has no inputs and exactly one monaural (one-channel) output. The output's value is always the same as the value of the `offset` parameter.
EventTarget  AudioNode  AudioScheduledSourceNode  ConstantSourceNode 
Number of inputs `0`  
Number of outputs `1`  
## Constructor
`ConstantSourceNode()`
    
Creates and returns a new `ConstantSourceNode` instance, optionally specifying an object which establishes initial values for the object's properties. As an alternative, you can use the `BaseAudioContext.createConstantSource()` factory method; see Creating an AudioNode.
## Instance properties
Inherits properties from its parent interface, `AudioScheduledSourceNode`, and adds the following properties:
`offset`
    
An `AudioParam` which specifies the value that this source continuously outputs. The default value is 1.0.
### Events
Inherits events from its parent interface, `AudioScheduledSourceNode`.
Note: Some browsers' implementations of these events are part of the `AudioScheduledSourceNode` interface.
`ended`
    
Fired whenever the `ConstantSourceNode` data has stopped playing.
## Instance methods
Inherits methods from its parent interface, `AudioScheduledSourceNode`.
Note: Some browsers' implementations of these methods are part of the `AudioScheduledSourceNode` interface.
`start()`
    
Schedules a sound to playback at an exact time.
`stop()`
    
Schedules a sound to stop playback at an exact time.
## Example
In the article Controlling multiple parameters with ConstantSourceNode, a `ConstantSourceNode` is created to allow one slider control to change the gain on two `GainNode`s. The three nodes are set up like this:
    
    gainNode2 = context.createGain();
    gainNode3 = context.createGain();
    gainNode2.gain.value = gainNode3.gain.value = 0.5;
    volumeSliderControl.value = gainNode2.gain.value;
    
    constantNode = context.createConstantSource();
    constantNode.connect(gainNode2.gain);
    constantNode.connect(gainNode3.gain);
    constantNode.start();
    
    gainNode2.connect(context.destination);
    gainNode3.connect(context.destination);
    
This code starts by creating the gain nodes and setting them and the volume control that will adjust their value all to 0.5. Then the `ConstantSourceNode` is created by calling `AudioContext.createConstantSource()`, and the gain parameters of each of the two gain nodes are connected to the `ConstantSourceNode`. After starting the constant source by calling its `start()` method. Finally, the two gain nodes are connected to the audio destination (typically speakers or headphones).
Now, whenever the value of `constantNode.offset` changes, the gain on both `gainNode2` and `gainNode3` will change to have that same value.
To see this example in action, as well as to read the rest of the code from which these snippets were derived, see Controlling multiple parameters with ConstantSourceNode.
  * Using the Web Audio API
  * `AudioScheduledSourceNode`
  * `AudioNode`


# Range
The `Range` interface represents a fragment of a document that can contain nodes and parts of text nodes.
A range can be created by using the `Document.createRange()` method. Range objects can also be retrieved by using the `getRangeAt()` method of the `Selection` object or the `caretRangeFromPoint()` method of the `Document` object.
There also is the `Range()` constructor available.
AbstractRange  Range 
## Instance properties
There are no inherited properties.
`Range.collapsed` Read only
    
Returns a boolean value indicating whether the range's start and end points are at the same position.
`Range.commonAncestorContainer` Read only
    
Returns the deepest `Node` that contains the `startContainer` and `endContainer` nodes.
`Range.endContainer` Read only
    
Returns the `Node` within which the `Range` ends.
`Range.endOffset` Read only
    
Returns a number representing where in the `endContainer` the `Range` ends.
`Range.startContainer` Read only
    
Returns the `Node` within which the `Range` starts.
`Range.startOffset` Read only
    
Returns a number representing where in the `startContainer` the `Range` starts.
## Constructor
`Range()`
    
Returns a `Range` object with the global `Document` as its start and end.
## Instance methods
There are no inherited methods.
`Range.collapse()`
    
Collapses the `Range` to one of its boundary points.
`Range.compareBoundaryPoints()`
    
Compares the boundary points of the `Range` with another `Range`.
`Range.compareNode()` Deprecated Non-standard
    
Returns a constant representing whether the `Node` is before, after, inside, or surrounding the range.
`Range.comparePoint()`
    
Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the `Range`.
`Range.cloneContents()`
    
Returns a `DocumentFragment` copying the nodes of a `Range`.
`Range.cloneRange()`
    
Returns a `Range` object with boundary points identical to the cloned `Range`.
`Range.createContextualFragment()`
    
Returns a `DocumentFragment` created from a given string of code.
`Range.deleteContents()`
    
Removes the contents of a `Range` from the `Document`.
`Range.detach()`
    
Does nothing. Kept for compatibility.
`Range.extractContents()`
    
Moves contents of a `Range` from the document tree into a `DocumentFragment`.
`Range.getBoundingClientRect()`
    
Returns a `DOMRect` object which bounds the entire contents of the `Range`; this would be the union of all the rectangles returned by `range.getClientRects()`.
`Range.getClientRects()`
    
Returns a list of `DOMRect` objects that aggregates the results of `Element.getClientRects()` for all the elements in the `Range`.
`Range.isPointInRange()`
    
Returns a `boolean` indicating whether the given point is in the `Range`.
`Range.insertNode()`
    
Insert a `Node` at the start of a `Range`.
`Range.intersectsNode()`
    
Returns a `boolean` indicating whether the given node intersects the `Range`.
`Range.selectNode()`
    
Sets the `Range` to contain the `Node` and its contents.
`Range.selectNodeContents()`
    
Sets the `Range` to contain the contents of a `Node`.
`Range.setEnd()`
    
Sets the end position of a `Range`.
`Range.setStart()`
    
Sets the start position of a `Range`.
`Range.setEndAfter()`
    
Sets the end position of a `Range` relative to another `Node`.
`Range.setEndBefore()`
    
Sets the end position of a `Range` relative to another `Node`.
`Range.setStartAfter()`
    
Sets the start position of a `Range` relative to another `Node`.
`Range.setStartBefore()`
    
Sets the start position of a `Range` relative to another `Node`.
`Range.surroundContents()`
    
Moves content of a `Range` into a new `Node`.
`Range.toString()`
    
Returns the text of the `Range`.
  * The DOM interfaces index


# SVGPolylineElement
The `SVGPolylineElement` interface provides access to the properties of `<polyline>` elements, as well as methods to manipulate them.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGGeometryElement  SVGPolylineElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGeometryElement`.
`SVGPolylineElement.animatedPoints` Read only
    
An `SVGPointList` representing the animated value of the element's `points` attribute. If the `points` attribute is not being animated, it contains the same value as the `points` property.
`SVGPolylineElement.points`
    
An `SVGPointList` representing the base (i.e., static) value of the element's `points` attribute. Modifications via the `SVGPointList` object are reflected in the `points` attribute, and vice versa.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent, `SVGGeometryElement`.
  * `<polyline>`


# MediaKeySystemAccess
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MediaKeySystemAccess` interface of the Encrypted Media Extensions API provides access to a Key System for decryption and/or a content protection provider. You can request an instance of this object using the `Navigator.requestMediaKeySystemAccess()` method.
## Instance properties
`MediaKeySystemAccess.keySystem` Read only
    
Returns a string identifying the key system being used.
## Instance methods
`MediaKeySystemAccess.createMediaKeys()`
    
Returns a `Promise` that resolves to a new `MediaKeys` object.
`MediaKeySystemAccess.getConfiguration()`
    
Returns an object with the supported combination of configuration options.
# TextUpdateEvent
The `TextUpdateEvent` interface is a DOM event that represents a text or selection update in an editable text region that's attached to an `EditContext` instance.
This interface inherits properties from `Event`.
Event  TextUpdateEvent 
## Constructor
`TextUpdateEvent()` Experimental
    
Creates a new `TextUpdateEvent` object.
## Instance properties
`TextUpdateEvent.updateRangeStart` Read only Experimental
    
Returns the index of the first character in the range of text that was updated.
`TextUpdateEvent.updateRangeEnd` Read only Experimental
    
Returns the index of the last character in the range of text that was updated.
`TextUpdateEvent.text` Read only Experimental
    
Returns the text that was inserted in the updated range.
`TextUpdateEvent.selectionStart` Read only Experimental
    
Returns the index of the first character in the new selection range, after the update.
`TextUpdateEvent.selectionEnd` Read only Experimental
    
Returns the index of the last character in the new selection range, after the update.
## Examples
>
### Rendering the updated text in an editable canvas
In the following example, the EditContext API is used to render editable text in a `<canvas>` element, and the `textupdate` event is used to render the text when the user is typing.
    
    <canvas id="editor-canvas"></canvas>
    
    
    const canvas = document.getElementById("editor-canvas");
    const ctx = canvas.getContext("2d");
    const editContext = new EditContext();
    canvas.editContext = editContext;
    
    function render() {
      // Clear the canvas.
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    
      // Render the text.
      ctx.fillText(editContext.text, 10, 10);
    }
    
    editContext.addEventListener("textupdate", (e) => {
      // Re-render the editor view when the user is entering text.
      render();
    
      console.log(
        `The user entered ${e.text}. Rendering the entire text: ${editContext.text}`,
      );
    });
    
# WebGLObject
Note: This feature is available in Web Workers.
The `WebGLObject` is part of the WebGL API and is the parent interface for all WebGL objects.
This object has no public properties or methods on its own.
If the WebGL context is lost, the internal invalidated flag of all `WebGLObject` instances is set to `true`.
## Objects inheriting from `WebGLObject`
WebGL 1:
  * `WebGLBuffer`
  * `WebGLFramebuffer`
  * `WebGLProgram`
  * `WebGLRenderbuffer`
  * `WebGLShader`
  * `WebGLTexture`


WebGL 2:
  * `WebGLQuery` (and `WebGLTimerQueryEXT`)
  * `WebGLSampler`
  * `WebGLSync`
  * `WebGLTransformFeedback`
  * `WebGLVertexArrayObject` (and `WebGLVertexArrayObjectOES`)


  * `WebGLRenderingContext.isContextLost()`
  * `WEBGL_lose_context`
  * `webglcontextlost` event


# Insertable Streams for MediaStreamTrack API
Note: This feature is only available in Dedicated Web Workers.
The Insertable Streams for MediaStreamTrack API provides a way to process the video frames of a `MediaStreamTrack` as they are consumed.
## Concepts and Usage
When processing real-time video, you sometimes want to insert visual elements or otherwise process the stream of video frames. For example, an application might include two tracks that need to be combined, such as a weather map and video of a presenter explaining the map. Or, you may want to do processing on a track to blur backgrounds, or introduce other elements (such as adding funny hats to people, and so on). The APIs described here provide direct access to the video stream, allowing you to manipulate it in real time.
To ensure optimal performance, the APIs are only available in dedicated workers (unless otherwise stated).
## Interfaces
`MediaStreamTrackProcessor` Experimental
    
Consumes a `MediaStreamTrack` object's source and produces a stream of video frames.
`VideoTrackGenerator` Experimental
    
Creates a `WritableStream` that acts as a `MediaStreamTrack` video source.
`MediaStreamTrackGenerator` Experimental Non-standard
    
Creates a `WritableStream` that acts as a `MediaStreamTrack` source for either video or audio. Only available on the main thread.
## Examples
The following example is from the article Unbundling MediaStreamTrackProcessor and VideoTrackGenerator. It transfers a camera `MediaStreamTrack` to a worker for processing. The worker creates a pipeline that applies a sepia tone filter to the video frames and mirrors them. The pipeline culminates in a `VideoTrackGenerator` whose `MediaStreamTrack` is transferred back and played. The media now flows in real time through the transform off the main thread.
    
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    const [track] = stream.getVideoTracks();
    const worker = new Worker("worker.js");
    worker.postMessage({ track }, [track]);
    const { data } = await new Promise((r) => (worker.onmessage = r));
    video.srcObject = new MediaStream([data.track]);
    
worker.js:
    
    onmessage = async ({ data: { track } }) => {
      const vtg = new VideoTrackGenerator();
      self.postMessage({ track: vtg.track }, [vtg.track]);
      const { readable } = new MediaStreamTrackProcessor({ track });
      await readable
        .pipeThrough(new TransformStream({ transform }))
        .pipeTo(vtg.writable);
    };
    
# CanvasRenderingContext2D
The `CanvasRenderingContext2D` interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a `<canvas>` element. It is used for drawing shapes, text, images, and other objects.
The interface's properties and methods are described in the reference section of this page. The Canvas tutorial has more explanation, examples, and resources, as well.
For `OffscreenCanvas`, there is an equivalent interface that provides the rendering context. The offscreen rendering context inherits most of the same properties and methods as the `CanvasRenderingContext2D` and is described in more detail in the `OffscreenCanvasRenderingContext2D` reference page.
## Basic example
To get a `CanvasRenderingContext2D` instance, you must first have an HTML `<canvas>` element to work with:
    
    <canvas id="my-house" width="300" height="300"></canvas>
    
To get the canvas' 2D rendering context, call `getContext()` on the `<canvas>` element, supplying `'2d'` as the argument:
    
    const canvas = document.getElementById("my-house");
    const ctx = canvas.getContext("2d");
    
With the context in hand, you can draw anything you like. This code draws a house:
    
    // Set line width
    ctx.lineWidth = 10;
    
    // Wall
    ctx.strokeRect(75, 140, 150, 110);
    
    // Door
    ctx.fillRect(130, 190, 40, 60);
    
    // Roof
    ctx.beginPath();
    ctx.moveTo(50, 140);
    ctx.lineTo(150, 60);
    ctx.lineTo(250, 140);
    ctx.closePath();
    ctx.stroke();
    
The resulting drawing looks like this:
## Reference
>
### Context
`CanvasRenderingContext2D.getContextAttributes()`
    
Returns an object containing the context attributes used by the browser. Context attributes can be requested when using `HTMLCanvasElement.getContext()` to create the 2D context.
`CanvasRenderingContext2D.isContextLost()`
    
Returns `true` if the rendering context was lost.
### Drawing rectangles
There are three methods that immediately draw rectangles to the canvas.
`CanvasRenderingContext2D.clearRect()`
    
Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.
`CanvasRenderingContext2D.fillRect()`
    
Draws a filled rectangle at (x, y) position whose size is determined by width and height.
`CanvasRenderingContext2D.strokeRect()`
    
Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.
### Drawing text
The following methods draw text. See also the `TextMetrics` object for text properties.
`CanvasRenderingContext2D.fillText()`
    
Draws (fills) a given text at the given (x, y) position.
`CanvasRenderingContext2D.strokeText()`
    
Draws (strokes) a given text at the given (x, y) position.
`CanvasRenderingContext2D.measureText()`
    
Returns a `TextMetrics` object.
### Line styles
The following methods and properties control how lines are drawn.
`CanvasRenderingContext2D.lineWidth`
    
Width of lines. Default `1.0`.
`CanvasRenderingContext2D.lineCap`
    
Type of endings on the end of lines. Possible values: `butt` (default), `round`, `square`.
`CanvasRenderingContext2D.lineJoin`
    
Defines the type of corners where two lines meet. Possible values: `round`, `bevel`, `miter` (default).
`CanvasRenderingContext2D.miterLimit`
    
Miter limit ratio. Default `10`.
`CanvasRenderingContext2D.getLineDash()`
    
Returns the current line dash pattern array containing an even number of non-negative numbers.
`CanvasRenderingContext2D.setLineDash()`
    
Sets the current line dash pattern.
`CanvasRenderingContext2D.lineDashOffset`
    
Specifies where to start a dash array on a line.
### Text styles
The following properties control how text is laid out.
`CanvasRenderingContext2D.font`
    
Font setting. Default value `"10px sans-serif"`.
`CanvasRenderingContext2D.textAlign`
    
Text alignment setting. Possible values: `start` (default), `end`, `left`, `right`, `center`.
`CanvasRenderingContext2D.textBaseline`
    
Baseline alignment setting. Possible values: `top`, `hanging`, `middle`, `alphabetic` (default), `ideographic`, `bottom`.
`CanvasRenderingContext2D.direction`
    
Directionality. Possible values: `ltr`, `rtl`, `inherit` (default).
`CanvasRenderingContext2D.letterSpacing`
    
Letter spacing. Default: `0px`.
`CanvasRenderingContext2D.fontKerning`
    
Font kerning. Possible values: `auto` (default), `normal`, `none`.
`CanvasRenderingContext2D.fontStretch`
    
Font stretch. Possible values: `ultra-condensed`, `extra-condensed`, `condensed`, `semi-condensed`, `normal` (default), `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`.
`CanvasRenderingContext2D.fontVariantCaps`
    
Font variant caps. Possible values: `normal` (default), `small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps`.
`CanvasRenderingContext2D.textRendering`
    
Text rendering. Possible values: `auto` (default), `optimizeSpeed`, `optimizeLegibility`, `geometricPrecision`.
`CanvasRenderingContext2D.wordSpacing`
    
Word spacing. Default value: `0px`
`CanvasRenderingContext2D.lang` Experimental
    
Gets or sets the language of the canvas drawing context.
### Fill and stroke styles
Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.
`CanvasRenderingContext2D.fillStyle`
    
Color or style to use inside shapes. Default is `black`.
`CanvasRenderingContext2D.strokeStyle`
    
Color or style to use for the lines around shapes. Default is `black`.
### Gradients and patterns
`CanvasRenderingContext2D.createConicGradient()`
    
Creates a conic gradient around a point given by coordinates represented by the parameters.
`CanvasRenderingContext2D.createLinearGradient()`
    
Creates a linear gradient along the line given by the coordinates represented by the parameters.
`CanvasRenderingContext2D.createRadialGradient()`
    
Creates a radial gradient given by the coordinates of the two circles represented by the parameters.
`CanvasRenderingContext2D.createPattern()`
    
Creates a pattern using the specified image. It repeats the source in the directions specified by the repetition argument. This method returns a `CanvasPattern`.
### Shadows
`CanvasRenderingContext2D.shadowBlur`
    
Specifies the blurring effect. Default: `0`.
`CanvasRenderingContext2D.shadowColor`
    
Color of the shadow. Default: fully-transparent black.
`CanvasRenderingContext2D.shadowOffsetX`
    
Horizontal distance the shadow will be offset. Default: `0`.
`CanvasRenderingContext2D.shadowOffsetY`
    
Vertical distance the shadow will be offset. Default: `0`.
### Paths
The following methods can be used to manipulate paths of objects.
`CanvasRenderingContext2D.beginPath()`
    
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
`CanvasRenderingContext2D.closePath()`
    
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
`CanvasRenderingContext2D.moveTo()`
    
Moves the starting point of a new sub-path to the (x, y) coordinates.
`CanvasRenderingContext2D.lineTo()`
    
Connects the last point in the current sub-path to the specified (x, y) coordinates with a straight line.
`CanvasRenderingContext2D.bezierCurveTo()`
    
Adds a cubic Bézier curve to the current path.
`CanvasRenderingContext2D.quadraticCurveTo()`
    
Adds a quadratic Bézier curve to the current path.
`CanvasRenderingContext2D.arc()`
    
Adds a circular arc to the current path.
`CanvasRenderingContext2D.arcTo()`
    
Adds an arc to the current path with the given control points and radius, connected to the previous point by a straight line.
`CanvasRenderingContext2D.ellipse()`
    
Adds an elliptical arc to the current path.
`CanvasRenderingContext2D.rect()`
    
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
`CanvasRenderingContext2D.roundRect()`
    
Creates a path for a rounded rectangle with a specified position, width, height, and corner radii.
### Drawing paths
`CanvasRenderingContext2D.fill()`
    
Fills the current sub-paths with the current fill style.
`CanvasRenderingContext2D.stroke()`
    
Strokes the current sub-paths with the current stroke style.
`CanvasRenderingContext2D.drawFocusIfNeeded()`
    
If a given element is focused, this method draws a focus ring around the current path.
`CanvasRenderingContext2D.clip()`
    
Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
`CanvasRenderingContext2D.isPointInPath()`
    
Reports whether or not the specified point is contained in the current path.
`CanvasRenderingContext2D.isPointInStroke()`
    
Reports whether or not the specified point is inside the area contained by the stroking of a path.
### Transformations
Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and `Path2D` objects. The methods listed below remain for historical and compatibility reasons as `DOMMatrix` objects are used in most parts of the API nowadays and will be used in the future instead.
`CanvasRenderingContext2D.getTransform()`
    
Retrieves the current transformation matrix being applied to the context.
`CanvasRenderingContext2D.rotate()`
    
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
`CanvasRenderingContext2D.scale()`
    
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
`CanvasRenderingContext2D.translate()`
    
Adds a translation transformation by moving the canvas and its origin x horizontally and y vertically on the grid.
`CanvasRenderingContext2D.transform()`
    
Multiplies the current transformation matrix with the matrix described by its arguments.
`CanvasRenderingContext2D.setTransform()`
    
Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments.
`CanvasRenderingContext2D.resetTransform()`
    
Resets the current transform by the identity matrix.
### Compositing
`CanvasRenderingContext2D.globalAlpha`
    
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0` (opaque).
`CanvasRenderingContext2D.globalCompositeOperation`
    
With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap.
### Drawing images
`CanvasRenderingContext2D.drawImage()`
    
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
### Pixel manipulation
See also the `ImageData` object.
`CanvasRenderingContext2D.createImageData()`
    
Creates a new, blank `ImageData` object with the specified dimensions. All of the pixels in the new object are transparent black.
`CanvasRenderingContext2D.getImageData()`
    
Returns an `ImageData` object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.
`CanvasRenderingContext2D.putImageData()`
    
Paints data from the given `ImageData` object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
### Image smoothing
`CanvasRenderingContext2D.imageSmoothingEnabled`
    
Image smoothing mode; if disabled, images will not be smoothed if scaled.
`CanvasRenderingContext2D.imageSmoothingQuality`
    
Allows you to set the quality of image smoothing.
### The canvas state
The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:
`CanvasRenderingContext2D.save()`
    
Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`.
`CanvasRenderingContext2D.restore()`
    
Restores the drawing style state to the last element on the 'state stack' saved by `save()`.
`CanvasRenderingContext2D.canvas`
    
A read-only back-reference to the `HTMLCanvasElement`. Might be `null` if it is not associated with a `<canvas>` element.
`CanvasRenderingContext2D.getContextAttributes()`
    
Returns an object containing the context attributes used by the browser. Context attributes can be requested when using `HTMLCanvasElement.getContext()` to create the 2D context.
`CanvasRenderingContext2D.reset()`
    
Resets the rendering context, including the backing buffer, the drawing state stack, path, and styles.
`CanvasRenderingContext2D.isContextLost()` Experimental
    
Returns `true` if the rendering context was lost.
### Filters
`CanvasRenderingContext2D.filter`
    
Applies a CSS or SVG filter to the canvas, e.g., to change its brightness or blurriness.
  * `HTMLCanvasElement`
  * `<canvas>`
  * `OffscreenCanvas`


# MediaKeyStatusMap
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MediaKeyStatusMap` interface of the Encrypted Media Extensions API is a read-only map of media key statuses by key IDs.
## Instance properties
`MediaKeyStatusMap.size` Read only
    
Returns the number of key/value pairs in the status map.
## Instance methods
`MediaKeyStatusMap.entries()` Read only
    
Returns a new `Iterator` object containing an array of `[key, value]` for each element in the status map, in insertion order.
`MediaKeyStatusMap.forEach()` Read only
    
Calls `callback` once for each key-value pair in the status map, in insertion order. If `argument` is present it will be passed to the callback.
`MediaKeyStatusMap.get()` Read only
    
Returns the value associated with the given key, or `undefined` if there is none.
`MediaKeyStatusMap.has()` Read only
    
Returns a boolean asserting whether a value has been associated with the given key.
`MediaKeyStatusMap.keys()` Read only
    
Returns a new `Iterator` object containing keys for each element in the status map, in insertion order.
`MediaKeyStatusMap.values()` Read only
    
Returns a new `Iterator` object containing values for each element in the status map, in insertion order.
`MediaKeyStatusMap[Symbol.iterator]()` Read only
    
Returns a new `Iterator` object containing an array of `[key, value]` for each element in the status map, in insertion order.
# RTCDTMFSender
The `RTCDTMFSender` interface provides a mechanism for transmitting DTMF codes on a WebRTC `RTCPeerConnection`. You gain access to the connection's `RTCDTMFSender` through the `RTCRtpSender.dtmf` property on the audio track you wish to send DTMF with.
The primary purpose for WebRTC's DTMF support is to allow WebRTC-based communication clients to be connected to a public-switched telephone network (PSTN) or other legacy telephone service, including extant voice over IP (VoIP) services. For that reason, DTMF can't be used between two WebRTC-based devices, because there is no mechanism provided by WebRTC for receiving DTMF codes.
EventTarget  RTCDTMFSender 
## Instance properties
`RTCDTMFSender.canInsertDTMF` Read only
    
A boolean value which is `true` if the `RTCDTMFSender` is capable of sending DTMF tones, or `false` if it is not.
`RTCDTMFSender.toneBuffer` Read only
    
A string which contains the list of DTMF tones currently in the queue to be transmitted (tones which have already been played are no longer included in the string). See `toneBuffer` for details on the format of the tone buffer.
## Instance methods
`RTCDTMFSender.insertDTMF()`
    
Given a string describing a set of DTMF codes and, optionally, the duration of and inter-tone gap between the tones, `insertDTMF()` starts sending the specified tones. Calling `insertDTMF()` replaces any already-pending tones from the `toneBuffer`. You can abort sending queued tones by specifying an empty string (`""`) as the set of tones to play.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`tonechange`
    
The `tonechange` event is sent to the `RTCDTMFSender` instance's event handler to indicate that a tone has either started or stopped playing.
## Example
See the article Using DTMF with WebRTC for a full example.
  * WebRTC API
  * Using DTMF with WebRTC
  * `RTCRtpSender.dtmf`
  * `RTCPeerConnection`
  * `RTCRtpSender`


# Blob
Note: This feature is available in Web Workers.
The `Blob` interface represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a `ReadableStream` so its methods can be used for processing the data.
Blobs can represent data that isn't necessarily in a JavaScript-native format. The `File` interface is based on `Blob`, inheriting blob functionality and expanding it to support files on the user's system.
## Using blobs
To construct a `Blob` from other non-blob objects and data, use the `Blob()` constructor. To create a blob that contains a subset of another blob's data, use the `slice()` method. To obtain a `Blob` object for a file on the user's file system, see the `File` documentation.
The APIs accepting `Blob` objects are also listed in the `File` documentation.
## Constructor
`Blob()`
    
Returns a newly created `Blob` object which contains a concatenation of all of the data in the array passed into the constructor.
## Instance properties
`Blob.size` Read only
    
The size, in bytes, of the data contained in the `Blob` object.
`Blob.type` Read only
    
A string indicating the MIME type of the data contained in the `Blob`. If the type is unknown, this string is empty.
## Instance methods
`Blob.arrayBuffer()`
    
Returns a promise that resolves with an `ArrayBuffer` containing the entire contents of the `Blob` as binary data.
`Blob.bytes()`
    
Returns a promise that resolves with an `Uint8Array` containing the contents of the `Blob`.
`Blob.slice()`
    
Returns a new `Blob` object containing the data in the specified range of bytes of the blob on which it's called.
`Blob.stream()`
    
Returns a `ReadableStream` that can be used to read the contents of the `Blob`.
`Blob.text()`
    
Returns a promise that resolves with a string containing the entire contents of the `Blob` interpreted as UTF-8 text.
## Examples
>
### Creating a blob
The `Blob()` constructor can create blobs from other objects. For example, to construct a blob from a JSON string:
    
    const obj = { hello: "world" };
    const blob = new Blob([JSON.stringify(obj, null, 2)], {
      type: "application/json",
    });
    
### Creating a URL representing the contents of a typed array
The following example creates a JavaScript typed array and creates a new `Blob` containing the typed array's data. It then calls `URL.createObjectURL()` to convert the blob into a URL.
    
    <p>
      This example creates a typed array containing the ASCII codes for the space
      character through the letter Z, then converts it to an object URL. A link to
      open that object URL is created. Click the link to see the decoded object URL.
    </p>
    
The main piece of this code for example purposes is the `typedArrayToURL()` function, which creates a `Blob` from the given typed array and returns an object URL for it. Having converted the data into an object URL, it can be used in a number of ways, including as the value of the `<img>` element's `src` attribute (assuming the data contains an image, of course).
    
    function showViewLiveResultButton() {
      if (window.self !== window.top) {
        // Ensure that if our document is in a frame, we get the user
        // to first open it in its own tab or window. Otherwise, this
        // example won't work.
        const p = document.querySelector("p");
        p.textContent = "";
        const button = document.createElement("button");
        button.textContent = "View live result of the example code above";
        p.append(button);
        button.addEventListener("click", () => window.open(location.href));
        return true;
      }
      return false;
    }
    
    if (!showViewLiveResultButton()) {
      function typedArrayToURL(typedArray, mimeType) {
        return URL.createObjectURL(
          new Blob([typedArray.buffer], { type: mimeType }),
        );
      }
      const bytes = new Uint8Array(59);
    
      for (let i = 0; i < 59; i++) {
        bytes[i] = 32 + i;
      }
    
      const url = typedArrayToURL(bytes, "text/plain");
      const link = document.createElement("a");
    
      link.href = url;
      link.innerText = "Open the array URL";
      document.body.appendChild(link);
    }
    
### Extracting data from a blob
One way to read content from a `Blob` is to use a `FileReader`. The following code reads the content of a `Blob` as a typed array:
    
    const reader = new FileReader();
    reader.addEventListener("loadend", () => {
      // reader.result contains the contents of blob as a typed array
    });
    reader.readAsArrayBuffer(blob);
    
Another way to read content from a `Blob` is to use a `Response`. The following code reads the content of a `Blob` as text:
    
    const text = await new Response(blob).text();
    
Or by using `Blob.text()`:
    
    const text = await blob.text();
    
By using other methods of `FileReader`, it is possible to read the contents of a Blob as a string or a data URL.
  * `FileReader`
  * `File`
  * `URL.createObjectURL()`
  * Using files from web applications


# TrustedTypePolicy
Note: This feature is available in Web Workers.
The `TrustedTypePolicy` interface of the Trusted Types API defines a group of functions which create `TrustedType` objects.
A `TrustedTypePolicy` object is created by `TrustedTypePolicyFactory.createPolicy()` to define a policy for enforcing security rules on input. Therefore, `TrustedTypePolicy` has no constructor.
## Instance properties
`TrustedTypePolicy.name` Read only
    
A string containing the name of the policy.
## Instance methods
`TrustedTypePolicy.createHTML()`
    
Creates a `TrustedHTML` object.
`TrustedTypePolicy.createScript()`
    
Creates a `TrustedScript` object.
`TrustedTypePolicy.createScriptURL()`
    
Creates a `TrustedScriptURL` object.
## Examples
In the below example we create a policy that will create `TrustedHTML` objects using `TrustedTypePolicyFactory.createPolicy()`. We can then use `TrustedTypePolicy.createHTML` to create a sanitized HTML string to be inserted into the document.
The sanitized value can then be used with `Element.innerHTML` to ensure that no new HTML elements can be injected.
    
    <div id="myDiv"></div>
    
    
    const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
      createHTML: (string) => string.replace(/</g, "&lt;"),
    });
    
    let el = document.getElementById("myDiv");
    const escaped = escapeHTMLPolicy.createHTML("<img src=x onerror=alert(1)>");
    console.log(escaped instanceof TrustedHTML); // true
    el.innerHTML = escaped;
    
# CSSTransition
The `CSSTransition` interface of the Web Animations API represents an `Animation` object used for a CSS Transition.
EventTarget  Animation  CSSTransition 
## Instance properties
This interface inherits properties from its parent, `Animation`.
`CSSTransition.transitionProperty` Read only
    
Returns the transition CSS property name as a string.
## Instance methods
This interface inherits methods from its parent, `Animation`.
No specific methods.
## Examples
>
### Inspecting the returned CSSTransition
The transition in the following example changes the width of the box on hover. Calling `Element.getAnimations()` returns an array of all `Animation` objects. In our case this returns a `CSSTransition` object, representing the animation created.
    
    .box {
      background-color: #165baa;
      color: white;
      width: 100px;
      height: 100px;
      transition: width 4s;
    }
    
    .box:hover {
      width: 200px;
    }
    
    
    const item = document.querySelector(".box");
    item.addEventListener("transitionrun", () => {
      let animations = document.querySelector(".box").getAnimations();
      console.log(animations[0]);
    });
    
# TrustedScript
Note: This feature is available in Web Workers.
The `TrustedScript` interface of the Trusted Types API represents a string with an uncompiled script body that a developer can insert into an injection sink that might execute the script. These objects are created via `TrustedTypePolicy.createScript()` and therefore have no constructor.
The value of a TrustedScript object is set when the object is created and cannot be changed by JavaScript as there is no setter exposed.
## Instance methods
`TrustedScript.toJSON()`
    
Returns a JSON representation of the stored data.
`TrustedScript.toString()`
    
A string containing the sanitized script.
## Examples
The constant `sanitized` is an object created via a Trusted Types policy.
    
    const sanitized = scriptPolicy.createScript("eval('2 + 2')");
    console.log(sanitized); /* a TrustedScript object */
    
  * Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types


# MediaStreamTrackGenerator
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Note: Consider using `VideoTrackGenerator` instead.
The `MediaStreamTrackGenerator` interface of the Insertable Streams for MediaStreamTrack API creates a `WritableStream` that acts as a `MediaStreamTrack` source. The object consumes a stream of media frames as input, which can be audio or video frames.
## Constructor
`MediaStreamTrackGenerator()` Experimental Non-standard
    
Creates a new `MediaStreamTrackGenerator` object which accepts either `VideoFrame` or `AudioData` objects.
## Instance properties
This interface also inherits properties from `MediaStreamTrack`.
`MediaStreamTrackGenerator.writable` Experimental Non-standard
    
A `WritableStream`.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from `MediaStreamTrack`.
## Examples
The following example is from the article Insertable streams for MediaStreamTrack, and demonstrates a barcode scanner application, which process barcodes and highlights them before writing the transformed frames to the writable stream of `MediaStreamTrackGenerator.writable`.
    
    const stream = await getUserMedia({ video: true });
    const videoTrack = stream.getVideoTracks()[0];
    
    const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
    const trackGenerator = new MediaStreamTrackGenerator({ kind: "video" });
    
    const transformer = new TransformStream({
      async transform(videoFrame, controller) {
        const barcodes = await detectBarcodes(videoFrame);
        const newFrame = highlightBarcodes(videoFrame, barcodes);
        videoFrame.close();
        controller.enqueue(newFrame);
      },
    });
    
    trackProcessor.readable
      .pipeThrough(transformer)
      .pipeTo(trackGenerator.writable);
    
  * `VideoTrackGenerator`

This feature does not appear to be defined in any specification.>
# BackgroundFetchUpdateUIEvent
Note: This feature is only available in Service Workers.
The `BackgroundFetchUpdateUIEvent` interface of the Background Fetch API is an event type for the `backgroundfetchsuccess` and `backgroundfetchfail` events, and provides a method for updating the title and icon of the app to inform a user of the success or failure of a background fetch.
Event  ExtendableEvent  BackgroundFetchEvent  BackgroundFetchUpdateUIEvent 
## Constructor
`BackgroundFetchUpdateUIEvent()` Experimental
    
Creates a new `BackgroundFetchUIEvent` object. This constructor is not typically used, as the browser creates these objects itself for the `backgroundfetchsuccess` and `backgroundfetchfail` events.
## Instance properties
Also inherits properties from its parent, `BackgroundFetchEvent`.
## Instance methods
Also inherits methods from its parent, `BackgroundFetchEvent`.
`BackgroundFetchUpdateUIEvent.updateUI()` Experimental
    
Updates the title and icon in the user interface to show the status of a background fetch. Resolves with a `Promise`.
## Examples
In this example, the `backgroundfetchsuccess` event is listened for, indicating that a fetch has completed successfully. The `updateUI()` method is then called, with a message to let the user know the episode they downloaded is ready.
    
    addEventListener("backgroundfetchsuccess", (event) => {
      const bgFetch = event.registration;
    
      event.waitUntil(
        (async () => {
          // Create/open a cache.
          const cache = await caches.open("downloads");
          // Get all the records.
          const records = await bgFetch.matchAll();
          // Copy each request/response across.
          const promises = records.map(async (record) => {
            const response = await record.responseReady;
            await cache.put(record.request, response);
          });
    
          // Wait for the copying to complete.
          await Promise.all(promises);
    
          // Update the progress notification.
          event.updateUI({ title: "Episode 5 ready to listen!" });
        })(),
      );
    });
    
# MathMLElement
The `MathMLElement` interface represents any MathML element.
EventTarget  Node  Element  MathMLElement 
## Instance properties
Also inherits properties from its parent, `Element`.
`MathMLElement.attributeStyleMap` Read only
    
A `StylePropertyMap` representing the declarations of the element's `style` attribute.
`MathMLElement.autofocus`
    
Whether the control should be focused when the page loads, or when a `<dialog>` or popover become shown.
`MathMLElement.dataset` Read only
    
A `DOMStringMap` object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element. This works just like HTML's `HTMLElement.dataset` property and HTML's `data-*` global attribute.
`MathMLElement.style`
    
A `CSSStyleDeclaration` representing the declarations of the element's `style` attribute.
`MathMLElement.tabIndex`
    
The position of the element in the tabbing order.
## Instance methods
This interface also inherits methods from its parent, `Element`.
`MathMLElement.blur()`
    
Removes keyboard focus from the currently focused element.
`MathMLElement.focus()`
    
Makes the element the current keyboard focus.
## Examples
>
### MathML
    
    <math>
      <msqrt>
        <mi>x</mi>
      </msqrt>
    </math>
    
### JavaScript
    
    document.querySelector("msqrt").constructor.name; // MathMLElement
    
  * `Element`
  * `HTMLElement`
  * `SVGElement`


# WebGLTransformFeedback
Note: This feature is available in Web Workers.
The `WebGLTransformFeedback` interface is part of the WebGL 2 API and enables transform feedback, which is the process of capturing primitives generated by vertex processing. It allows to preserve the post-transform rendering state of an object and resubmit this data multiple times.
WebGLObject  WebGLTransformFeedback 
When working with `WebGLTransformFeedback` objects, the following methods of the `WebGL2RenderingContext` are useful:
  * `WebGL2RenderingContext.createTransformFeedback()`
  * `WebGL2RenderingContext.deleteTransformFeedback()`
  * `WebGL2RenderingContext.isTransformFeedback()`
  * `WebGL2RenderingContext.bindTransformFeedback()`
  * `WebGL2RenderingContext.beginTransformFeedback()`
  * `WebGL2RenderingContext.endTransformFeedback()`
  * `WebGL2RenderingContext.pauseTransformFeedback()`
  * `WebGL2RenderingContext.resumeTransformFeedback()`
  * `WebGL2RenderingContext.transformFeedbackVaryings()`
  * `WebGL2RenderingContext.getTransformFeedbackVarying()`


## Examples
>
### Creating a `WebGLTransformFeedback` object
in this example, `gl` must be a `WebGL2RenderingContext`. `WebGLTransformFeedback` objects are not available in WebGL 1.
    
    const transformFeedback = gl.createTransformFeedback();
    
# CookieStore
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Service Workers.
The `CookieStore` interface of the Cookie Store API provides methods for getting and setting cookies asynchronously from either a page or a service worker.
The `CookieStore` is accessed via attributes in the global scope in a `Window` or `ServiceWorkerGlobalScope` context. Therefore there is no constructor.
EventTarget  CookieStore 
## Instance methods
`CookieStore.delete()`
    
The `delete()` method deletes a cookie with the given `name` or `options` object. It returns a `Promise` that resolves when the deletion completes or if no cookies are matched.
`CookieStore.get()`
    
The `get()` method gets a single cookie with the given `name` or `options` object. It returns a `Promise` that resolves with details of a single cookie.
`CookieStore.getAll()`
    
The `getAll()` method gets all matching cookies. It returns a `Promise` that resolves with a list of cookies.
`CookieStore.set()`
    
The `set()` method sets a cookie with the given `name` and `value` or `options` object. It returns a `Promise` that resolves when the cookie is set.
## Events
`change`
    
The `change` event fires when a change is made to any cookie.
## Examples
The examples below can be tested by copying the code into a test harness and running it with a local server, or deploying it to a website site such as GitHub pages.
### Setting cookies
This example shows how to set cookies by passing a `name` and `value`, and by setting an `options` value.
The `cookieTest()` method sets one cookie with `name` and `value` properties and another with `name`, `value`, and `expires` properties. We then use the `CookieStore.get()` method to get each of the cookies, which are then logged.
    
    async function cookieTest() {
      // Set cookie: passing name and value
      try {
        await cookieStore.set("cookie1", "cookie1-value");
      } catch (error) {
        console.log(`Error setting cookie1: ${error}`);
      }
    
      // Set cookie: passing options
      const day = 24 * 60 * 60 * 1000;
    
      try {
        await cookieStore.set({
          name: "cookie2",
          value: "cookie2-value",
          expires: Date.now() + day,
          partitioned: true,
        });
      } catch (error) {
        log(`Error setting cookie2: ${error}`);
      }
    
      // Get named cookies and log their properties
      const cookie1 = await cookieStore.get("cookie1");
      console.log(cookie1);
    
      const cookie2 = await cookieStore.get("cookie2");
      console.log(cookie2);
    }
    
    cookieTest();
    
### Getting cookies
This example shows how you can get a particular cookie using `CookieStore.get()` or all cookies using `CookieStore.getAll()`.
The example code first sets three cookies that we'll use for demonstrating the get methods. First it creates `cookie1` and `cookie2` using the `CookieStore.set()` method. Then it creates a third cookie using the older synchronous `Document.cookie` property (just so we can show that these are also fetched using the `get()` and `getAll()` methods).
The code then uses `CookieStore.get()` to fetch "cookie1" and log its properties, and `CookieStore.getAll()` (without arguments) to fetch all cookies in the current context.
    
    async function cookieTest() {
      // Set a cookie passing name and value
      try {
        await cookieStore.set("cookie1", "cookie1-value");
      } catch (error) {
        console.log(`Error setting cookie1: ${error}`);
      }
    
      // Set a cookie passing an options object
      const day = 24 * 60 * 60 * 1000;
      try {
        await cookieStore.set({
          name: "cookie2",
          value: `cookie2-value`,
          expires: Date.now() + day,
          partitioned: true,
        });
      } catch (error) {
        console.log(`Error setting cookie2: ${error}`);
      }
    
      // Set cookie using document.cookie
      // (to demonstrate these are are fetched too)
      document.cookie = "favorite_food=tripe; SameSite=None; Secure";
    
      // Get named cookie and log properties
      const cookie1 = await cookieStore.get("cookie1");
      console.log(cookie1);
    
      // Get all cookies and log each
      const cookies = await cookieStore.getAll();
      if (cookies.length > 0) {
        console.log(`getAll(): ${cookies.length}:`);
        cookies.forEach((cookie) => console.log(cookie));
      } else {
        console.log("Cookies not found");
      }
    }
    
    cookieTest();
    
The example should log "cookie1" and all three cookies separately. One thing to note is that the cookie created using `Document.cookie` may have a different path than those created using `set()` (which defaults to `/`).
### Delete a named cookie
This example shows how to delete a named cookie using the `delete()` method.
The code first sets two cookies and logs them to the console. We then delete one of the cookies, and then list all cookies again. The deleted cookie ("cookie1") is present in the first log array, and not in the second.
    
    async function cookieTest() {
      // Set two cookies
      try {
        await cookieStore.set("cookie1", "cookie1-value");
      } catch (error) {
        console.log(`Error setting cookie1: ${error}`);
      }
    
      try {
        await cookieStore.set("cookie2", "cookie2-value");
      } catch (error) {
        console.log(`Error setting cookie2: ${error}`);
      }
    
      // Log cookie names
      let cookieNames = (await cookieStore.getAll())
        .map((cookie) => cookie.name)
        .join(" ");
      console.log(`Initial cookies: ${cookieNames}`);
    
      // Delete cookie1
      await cookieStore.delete("cookie1");
    
      // Log cookies again (to show cookie1 deleted)
      cookieNames = (await cookieStore.getAll())
        .map((cookie) => cookie.name)
        .join(" ");
      console.log(
        `Cookies remaining after attempted deletions (cookie1 should be deleted): ${cookieNames}`,
      );
    }
    
    cookieTest();
    
# WebGPU API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The WebGPU API enables web developers to use the underlying system's GPU (Graphics Processing Unit) to carry out high-performance computations and draw complex images that can be rendered in the browser.
WebGPU is the successor to WebGL, providing better compatibility with modern GPUs, support for general-purpose GPU computations, faster operations, and access to more advanced GPU features.
## Concepts and usage
It is fair to say that WebGL revolutionized the web in terms of graphical capabilities after it first appeared around 2011. WebGL is a JavaScript port of the OpenGL ES 2.0 graphics library, allowing web pages to pass rendering computations directly to the device's GPU to be processed at very high speeds, and render the result inside a `<canvas>` element.
WebGL and the GLSL language used to write WebGL shader code are complex, so several WebGL libraries have been created to make WebGL apps easier to write: Popular examples include Three.js, Babylon.js, and PlayCanvas. Developers have used these tools to build immersive web-based 3D games, music videos, training and modeling tools, VR and AR experiences, and more.
However, WebGL has some fundamental issues that needed addressing:
  * Since WebGL's release, a new generation of native GPU APIs have appeared — the most popular being Microsoft's Direct3D 12, Apple's Metal, and The Khronos Group's Vulkan — which provide a multitude of new features. There are no more updates planned to OpenGL (and therefore WebGL), so it won't get any of these new features. WebGPU on the other hand will have new features added to it going forwards.
  * WebGL is based wholly around the use case of drawing graphics and rendering them to a canvas. It does not handle general-purpose GPU (GPGPU) computations very well. GPGPU computations are becoming more and more important for many different use cases, for example those based on machine learning models.
  * 3D graphics apps are becoming increasingly demanding, both in terms of the number of objects to be rendered simultaneously, and usage of new rendering features.


WebGPU addresses these issues, providing an updated general-purpose architecture compatible with modern GPU APIs, which feels more "webby". It supports graphic rendering, but also has first-class support for GPGPU computations. Rendering of individual objects is significantly cheaper on the CPU side, and it supports modern GPU rendering features such as compute-based particles and post-processing filters like color effects, sharpening, and depth-of-field simulation. In addition, it can handle expensive computations such as culling and skinned model transformation directly on the GPU.
## General model
There are several layers of abstraction between a device GPU and a web browser running the WebGPU API. It is useful to understand these as you begin to learn WebGPU:
  * Physical devices have GPUs. Most devices only have one GPU, but some have more than one. Different GPU types are available:
    * Integrated GPUs, which live on the same board as the CPU and share its memory.
    * Discrete GPUs, which live on their own board, separate from the CPU.
    * Software "GPUs", implemented on the CPU.
Note: The above diagram assumes a device with only one GPU.
  * A native GPU API, which is part of the OS (e.g., Metal on macOS), is a programming interface allowing native applications to use the capabilities of the GPU. API instructions are sent to the GPU (and responses received) via a driver. It is possible for a system to have multiple native OS APIs and drivers available to communicate with the GPU, although the above diagram assumes a device with only one native API/driver.
  * A browser's WebGPU implementation handles communicating with the GPU via a native GPU API driver. A WebGPU adapter effectively represents a physical GPU and driver available on the underlying system, in your code.
  * A logical device is an abstraction via which a single web app can access GPU capabilities in a compartmentalized way. Logical devices are required to provide multiplexing capabilities. A physical device's GPU is used by many applications and processes concurrently, including potentially many web apps. Each web app needs to be able to access WebGPU in isolation for security and logic reasons.


## Accessing a device
A logical device — represented by a `GPUDevice` object instance — is the basis from which a web app accesses all WebGPU functionality. Accessing a device is done as follows:
  1. The `Navigator.gpu` property (or `WorkerNavigator.gpu` if you are using WebGPU functionality from inside a worker) returns the `GPU` object for the current context.
  2. You access an adapter via the `GPU.requestAdapter()` method. This method accepts an optional settings object allowing you to request for example a high-performance or low-energy adapter. If this is not included, the device will provide access to the default adapter, which is good enough for most purposes.
  3. A device can be requested via `GPUAdapter.requestDevice()`. This method also accepts an options object (referred to as a descriptor), which can be used to specify the exact features and limits you want the logical device to have. If this is not included, the supplied device will have a reasonable general-purpose spec that is good enough for most purposes.


Putting this together with some feature detection checks, the above process could be achieved as follows:
    
    async function init() {
      if (!navigator.gpu) {
        throw Error("WebGPU not supported.");
      }
    
      const adapter = await navigator.gpu.requestAdapter();
      if (!adapter) {
        throw Error("Couldn't request WebGPU adapter.");
      }
    
      const device = await adapter.requestDevice();
    
      // …
    }
    
## Pipelines and shaders: WebGPU app structure
A pipeline is a logical structure containing programmable stages that are completed to get your program's work done. WebGPU is currently able to handle two types of pipeline:
  * A render pipeline renders graphics, typically into a `<canvas>` element, but it could also render graphics offscreen. It has two main stages:
    * A vertex stage, in which a vertex shader takes positioning data fed into the GPU and uses it to position a series of vertices in 3D space by applying specified effects like rotation, translation, or perspective. The vertices are then assembled into primitives such as triangles (the basic building block of rendered graphics) and rasterized by the GPU to figure out what pixels each one should cover on the drawing canvas.
    * A fragment stage, in which a fragment shader computes the color for each pixel covered by the primitives produced by the vertex shader. These computations frequently use inputs such as images (in the form of textures) that provide surface details and the position and color of virtual lights.
  * A compute pipeline is for general computation. A compute pipeline contains a single compute stage in which a compute shader takes general data, processes it in parallel across a specified number of workgroups, then returns the result in one or more buffers. The buffers can contain any kind of data.


The shaders mentioned above are sets of instructions processed by the GPU. WebGPU shaders are written in a low-level Rust-like language called WebGPU Shading Language (WGSL).
There are several different ways in which you could architect a WebGPU app, but the process will likely contain the following steps:
  1. Create shader modules: Write your shader code in WGSL and package it into one or more shader modules.
  2. Get and configure the canvas context: Get the `webgpu` context of a `<canvas>` element and configure it to receive information on what graphics to render from your GPU logical device. This step is not necessary if your app has no graphical output, such as one that only uses compute pipelines.
  3. Create resources containing your data: The data that you want processed by your pipelines needs to be stored in GPU buffers or textures to be accessed by your app.
  4. Create pipelines: Define pipeline descriptors that describe the desired pipelines in detail, including the required data structure, bindings, shaders, and resource layouts, then create pipelines from them. Our basic demos only contain a single pipeline, but non-trivial apps will usually contain multiple pipelines for different purposes.
  5. Run a compute/rendering pass: This involves a number of substeps: 
     1. Create a command encoder that can encode a set of commands to be passed to the GPU to execute.
     2. Create a pass encoder object on which compute/render commands are issued.
     3. Run commands to specify which pipelines to use, what buffer(s) to get the required data from, how many drawing operations to run (in the case of render pipelines), etc.
     4. Finalize the command list and encapsulate it in a command buffer.
     5. Submit the command buffer to the GPU via the logical device's command queue.


In the sections below, we will examine a basic render pipeline demo, to allow you to explore what it requires. Later on, we'll also examine a basic compute pipeline example, looking at how it differs from the render pipeline.
## Basic render pipeline
In our basic render demo we give a `<canvas>` element a solid blue background and draw a triangle onto it.
### Create shader modules
We are using the following shader code. The vertex shader stage (`@vertex` block) accepts a chunk of data containing a position and a color, positions the vertex according to the given position, interpolates the color, then passes the data along to the fragment shader stage. The fragment shader stage (`@fragment` block) accepts the data from the vertex shader stage and colors the vertex according to the given color.
    
    const shaders = `
    struct VertexOut {
      @builtin(position) position : vec4f,
      @location(0) color : vec4f
    }
    
    @vertex
    fn vertex_main(@location(0) position: vec4f,
                   @location(1) color: vec4f) -> VertexOut
    {
      var output : VertexOut;
      output.position = position;
      output.color = color;
      return output;
    }
    
    @fragment
    fn fragment_main(fragData: VertexOut) -> @location(0) vec4f
    {
      return fragData.color;
    }
    `;
    
Note: In our demos we are storing our shader code inside a template literal, but you can store it anywhere from which it can easily be retrieved as text to be fed into your WebGPU program. For example, another common practice is to store shaders inside a `<script>` element and retrieve the contents using `Node.textContent`. The correct mime type to use for WGSL is `text/wgsl`.
To make your shader code available to WebGPU, you have to put it inside a `GPUShaderModule` via a `GPUDevice.createShaderModule()` call, passing your shader code as a property inside a descriptor object. For example:
    
    const shaderModule = device.createShaderModule({
      code: shaders,
    });
    
### Get and configure the canvas context
In a render pipeline, we need to specify somewhere to render the graphics to. In this case we are getting a reference to an onscreen `<canvas>` element then calling `HTMLCanvasElement.getContext()` with a parameter of `webgpu` to return its GPU context (a `GPUCanvasContext` instance).
From there, we configure the context with a call to `GPUCanvasContext.configure()`, passing it an options object containing the `GPUDevice` that the rendering information will come from, the format the textures will have, and the alpha mode to use when rendering semi-transparent textures.
    
    const canvas = document.querySelector("#gpuCanvas");
    const context = canvas.getContext("webgpu");
    
    context.configure({
      device,
      format: navigator.gpu.getPreferredCanvasFormat(),
      alphaMode: "premultiplied",
    });
    
Note: The best practice for determining the texture format is to use the `GPU.getPreferredCanvasFormat()` method; this selects the most efficient format (either `bgra8unorm` or `rgba8unorm`) for the user's device.
### Create a buffer and write our triangle data into it
Next we will provide our WebGPU program with our data, in a form it can use. Our data is initially provided in a `Float32Array`, which contains 8 data points for each triangle vertex — X, Y, Z, W for position, and R, G, B, A for color.
    
    const vertices = new Float32Array([
      0.0, 0.6, 0, 1, 1, 0, 0, 1, -0.5, -0.6, 0, 1, 0, 1, 0, 1, 0.5, -0.6, 0, 1, 0,
      0, 1, 1,
    ]);
    
However, we've got an issue here. We need to get our data into a `GPUBuffer`. Behind the scenes, this type of buffer is stored in memory very tightly integrated with the GPU's cores to allow for the desired high performance processing. As a side effect, this memory can't be accessed by processes running on the host system, like the browser.
The `GPUBuffer` is created via a call to `GPUDevice.createBuffer()`. We give it a size equal to the length of the `vertices` array so it can contain all the data, and `VERTEX` and `COPY_DST` usage flags to indicate that the buffer will be used as a vertex buffer and the destination of copy operations.
    
    const vertexBuffer = device.createBuffer({
      size: vertices.byteLength, // make it big enough to store vertices in
      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
    });
    
We could handle getting our data into the `GPUBuffer` using a mapping operation, like we use in the compute pipeline example to read data from the GPU back to JavaScript. However, in this case we are going to use the handy `GPUQueue.writeBuffer()` convenience method, which takes as its parameters the buffer to write to, the data source to write from, an offset value for each, and the size of data to write (we've specified the whole length of the array). The browser then works out the most efficient way to handle writing the data.
    
    device.queue.writeBuffer(vertexBuffer, 0, vertices, 0, vertices.length);
    
### Define and create the render pipeline
Now we've got our data into a buffer, the next part of the setup is to actually create our pipeline, ready to be used for rendering.
First of all, we create an object that describes the required layout of our vertex data. This perfectly describes what we saw earlier on in our `vertices` array and vertex shader stage — each vertex has position and color data. Both are formatted in `float32x4` format (which maps to the WGSL `vec4<f32>` type), and the color data starts at an offset of 16 bytes into each vertex. `arrayStride` specifies the stride, meaning the number of bytes making up each vertex, and `stepMode` specifies that the data should be fetched per-vertex.
    
    const vertexBuffers = [
      {
        attributes: [
          {
            shaderLocation: 0, // position
            offset: 0,
            format: "float32x4",
          },
          {
            shaderLocation: 1, // color
            offset: 16,
            format: "float32x4",
          },
        ],
        arrayStride: 32,
        stepMode: "vertex",
      },
    ];
    
Next, we create a descriptor object that specifies the configuration of our render pipeline stages. For both the shader stages, we specify the `GPUShaderModule` that the relevant code can be found in (`shaderModule`), and the name of the function that acts as the entry point for each stage.
In addition, in the case of the vertex shader stage we provide our `vertexBuffers` object to provide the expected state of our vertex data. And in the case of our fragment shader stage, we provide an array of color target states that indicate the specified rendering format (this matches the format specified in our canvas context config earlier).
We also specify a `primitive` object, which in this case just states the type of primitive we will be drawing, and a `layout` of `auto`. The `layout` property defines the layout (structure, purpose, and type) of all the GPU resources (buffers, textures, etc.) used during the execution of the pipeline. In more complex apps, this would take the form of a `GPUPipelineLayout` object, created using `GPUDevice.createPipelineLayout()` (you can see an example in our Basic compute pipeline), which allows the GPU to figure out how to run the pipeline most efficiently ahead of time. However, we are specifying the `auto` value, which will cause the pipeline to generate an implicit bind group layout based on any bindings defined in the shader code.
    
    const pipelineDescriptor = {
      vertex: {
        module: shaderModule,
        entryPoint: "vertex_main",
        buffers: vertexBuffers,
      },
      fragment: {
        module: shaderModule,
        entryPoint: "fragment_main",
        targets: [
          {
            format: navigator.gpu.getPreferredCanvasFormat(),
          },
        ],
      },
      primitive: {
        topology: "triangle-list",
      },
      layout: "auto",
    };
    
Finally, we can create a `GPURenderPipeline` based on our `pipelineDescriptor` object, by passing it in as a parameter to a `GPUDevice.createRenderPipeline()` method call.
    
    const renderPipeline = device.createRenderPipeline(pipelineDescriptor);
    
### Running a rendering pass
Now that all the setup is done, we can actually run a rendering pass and draw something onto our `<canvas>`. To encode any commands to be later issued to the GPU, you need to create a `GPUCommandEncoder` instance, which is done using a `GPUDevice.createCommandEncoder()` call.
    
    const commandEncoder = device.createCommandEncoder();
    
Next up we start the rendering pass running by creating a `GPURenderPassEncoder` instance with a `GPUCommandEncoder.beginRenderPass()` call. This method takes a descriptor object as a parameter, the only mandatory property of which is a `colorAttachments` array. In this case, we specify:
  1. A texture view to render into; we create a new view from the `<canvas>` via `context.getCurrentTexture().createView()`.
  2. That the view should be "cleared" to a specified color once loaded and before any drawing takes place. This is what causes the blue background behind the triangle.
  3. That the value of the current rendering pass should be stored for this color attachment.


    
    const clearColor = { r: 0.0, g: 0.5, b: 1.0, a: 1.0 };
    
    const renderPassDescriptor = {
      colorAttachments: [
        {
          clearValue: clearColor,
          loadOp: "clear",
          storeOp: "store",
          view: context.getCurrentTexture().createView(),
        },
      ],
    };
    
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    
Now we can invoke methods of the rendering pass encoder to draw our triangle:
  1. `GPURenderPassEncoder.setPipeline()` is called with our `renderPipeline` object as a parameter to specify the pipeline to use for the rendering pass.
  2. `GPURenderPassEncoder.setVertexBuffer()` is called with our `vertexBuffer` object as a parameter to act as the data source to pass to the pipeline to render. The first parameter is the slot to set the vertex buffer for, and is a reference to the index of the element in the `vertexBuffers` array which describes this buffer's layout.
  3. `GPURenderPassEncoder.draw()` sets the drawing in motion. There is data for three vertices inside our `vertexBuffer`, so we set a vertex count value of `3` to draw them all.


    
    passEncoder.setPipeline(renderPipeline);
    passEncoder.setVertexBuffer(0, vertexBuffer);
    passEncoder.draw(3);
    
To finish encoding the sequence of commands and issue them to the GPU, three more steps are needed.
  1. We invoke the `GPURenderPassEncoder.end()` method to signal the end of the render pass command list.
  2. We invoke the `GPUCommandEncoder.finish()` method to complete recording of the issued command sequence and encapsulate it into a `GPUCommandBuffer` object instance.
  3. We submit the `GPUCommandBuffer` to the device's command queue (represented by a `GPUQueue` instance) to be sent to the GPU. The device's queue is available via the `GPUDevice.queue` property, and an array of `GPUCommandBuffer` instances can be added to the queue via a `GPUQueue.submit()` call.


These three steps can be achieved via the following two lines:
    
    passEncoder.end();
    
    device.queue.submit([commandEncoder.finish()]);
    
## Basic compute pipeline
In our basic compute demo, we get the GPU to calculate some values, store them in an output buffer, copy the data across to a staging buffer, then map that staging buffer so that the data can be read out to JavaScript and logged to the console.
The app follows a similar structure to the basic rendering demo. We create a `GPUDevice` reference in the same way as before, and encapsulate our shader code into a `GPUShaderModule` via a `GPUDevice.createShaderModule()` call. The difference here is that our shader code only has one shader stage, a `@compute` stage:
    
    // Define global buffer size
    const NUM_ELEMENTS = 1000;
    const BUFFER_SIZE = NUM_ELEMENTS * 4; // Buffer size, in bytes
    
    const shader = `
    @group(0) @binding(0)
    var<storage, read_write> output: array<f32>;
    
    @compute @workgroup_size(64)
    fn main(
      @builtin(global_invocation_id)
      global_id : vec3u,
    
      @builtin(local_invocation_id)
      local_id : vec3u,
    ) {
      // Avoid accessing the buffer out of bounds
      if (global_id.x >= ${NUM_ELEMENTS}) {
        return;
      }
    
      output[global_id.x] =
        f32(global_id.x) * 1000. + f32(local_id.x);
    }
    `;
    
### Create buffers to handle our data
In this example we create two `GPUBuffer` instances to handle our data, an `output` buffer to write the GPU calculation results to at high speed, and a `stagingBuffer` that we'll copy the `output` contents to, which can be mapped to allow JavaScript to access the values.
  * `output` is specified as a storage buffer that will be the source of a copy operation.
  * `stagingBuffer` is specified as a buffer that can be mapped for reading by JavaScript, and will be the destination of a copy operation.


    
    const output = device.createBuffer({
      size: BUFFER_SIZE,
      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
    });
    
    const stagingBuffer = device.createBuffer({
      size: BUFFER_SIZE,
      usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
    });
    
### Create a bind group layout
When the pipeline is created, we specify a bind group to use for the pipeline. This involves first creating a `GPUBindGroupLayout` (via a call to `GPUDevice.createBindGroupLayout()`) that defines the structure and purpose of GPU resources such as buffers that will be used in this pipeline. This layout is used as a template for bind groups to adhere to. In this case we give the pipeline access to a single memory buffer, tied to binding slot 0 (this matches the relevant binding number in our shader code — `@binding(0)`), usable in the compute stage of the pipeline, and with the buffer's purpose defined as `storage`.
    
    const bindGroupLayout = device.createBindGroupLayout({
      entries: [
        {
          binding: 0,
          visibility: GPUShaderStage.COMPUTE,
          buffer: {
            type: "storage",
          },
        },
      ],
    });
    
Next we create a `GPUBindGroup` by calling `GPUDevice.createBindGroup()`. We pass this method call a descriptor object that specifies the bind group layout to base this bind group on, and the details of the variable to bind to the slot defined in the layout. In this case, we are declaring binding 0, and specifying that the `output` buffer we defined earlier should be bound to it.
    
    const bindGroup = device.createBindGroup({
      layout: bindGroupLayout,
      entries: [
        {
          binding: 0,
          resource: {
            buffer: output,
          },
        },
      ],
    });
    
Note: You could retrieve an implicit layout to use when creating a bind group by calling the `GPUComputePipeline.getBindGroupLayout()` method. There is also a version available for render pipelines: see `GPURenderPipeline.getBindGroupLayout()`.
### Create a compute pipeline
With the above all in place, we can now create a compute pipeline by calling `GPUDevice.createComputePipeline()`, passing it a pipeline descriptor object. This works in a similar way to creating a render pipeline. We describe the compute shader, specifying what module to find the code in and what the entry point is. We also specify a `layout` for the pipeline, in this case creating a layout based on the `bindGroupLayout` we defined earlier via a `GPUDevice.createPipelineLayout()` call.
    
    const computePipeline = device.createComputePipeline({
      layout: device.createPipelineLayout({
        bindGroupLayouts: [bindGroupLayout],
      }),
      compute: {
        module: shaderModule,
        entryPoint: "main",
      },
    });
    
One difference here from the render pipeline layout is that we are not specifying a primitive type, as we are not drawing anything.
### Running a compute pass
Running a compute pass is similar in structure to running a rendering pass, with some different commands. For a start, the pass encoder is created using `GPUCommandEncoder.beginComputePass()`.
When issuing the commands, we specify the pipeline to use in the same way as before, using `GPUComputePassEncoder.setPipeline()`. We then however use `GPUComputePassEncoder.setBindGroup()` to specify that we want to use our `bindGroup` to specify the data to use in the calculation, and `GPUComputePassEncoder.dispatchWorkgroups()` to specify the number of GPU workgroups to use to run the calculations.
We then signal the end of the render pass command list using `GPURenderPassEncoder.end()`.
    
    passEncoder.setPipeline(computePipeline);
    passEncoder.setBindGroup(0, bindGroup);
    passEncoder.dispatchWorkgroups(Math.ceil(NUM_ELEMENTS / 64));
    
    passEncoder.end();
    
### Reading the results back to JavaScript
Before submitting the encoded commands to the GPU for execution using `GPUQueue.submit()`, we copy the contents of the `output` buffer to the `stagingBuffer` buffer using `GPUCommandEncoder.copyBufferToBuffer()`.
    
    // Copy output buffer to staging buffer
    commandEncoder.copyBufferToBuffer(
      output,
      0, // Source offset
      stagingBuffer,
      0, // Destination offset
      BUFFER_SIZE, // Length, in bytes
    );
    
    // End frame by passing array of command buffers to command queue for execution
    device.queue.submit([commandEncoder.finish()]);
    
Once the output data is available in the `stagingBuffer`, we use the `GPUBuffer.mapAsync()` method to map the data to intermediate memory, grab a reference to the mapped range using `GPUBuffer.getMappedRange()`, copy the data into JavaScript, and then log it to the console. We also unmap the `stagingBuffer` once we are finished with it.
    
    // map staging buffer to read results back to JS
    await stagingBuffer.mapAsync(
      GPUMapMode.READ,
      0, // Offset
      BUFFER_SIZE, // Length, in bytes
    );
    
    const copyArrayBuffer = stagingBuffer.getMappedRange(0, BUFFER_SIZE);
    const data = copyArrayBuffer.slice();
    stagingBuffer.unmap();
    console.log(new Float32Array(data));
    
## GPU error handling
WebGPU calls are validated asynchronously in the GPU process. If errors are found, the problem call is marked as invalid on the GPU side. If another call is made that relies on the return value of an invalidated call, that object will also be marked as invalid, and so on. For this reason, errors in WebGPU are referred to as "contagious".
Each `GPUDevice` instance maintains its own error scope stack. This stack is initially empty, but you can start pushing an error scope to the stack by invoking `GPUDevice.pushErrorScope()` to capture errors of a particular type.
Once you are done capturing errors, you can end capture by invoking `GPUDevice.popErrorScope()`. This pops the scope from the stack and returns a `Promise` that resolves to an object (`GPUInternalError`, `GPUOutOfMemoryError`, or `GPUValidationError`) describing the first error captured in the scope, or `null` if no errors were captured.
We have attempted to provide useful information to help you understand why errors are occurring in your WebGPU code in "Validation" sections where appropriate, which list criteria to meet to avoid errors. See for example the `GPUDevice.createBindGroup()` Validation section. Some of this information is complex; rather than repeat the spec, we have decided to just list error criteria that are:
  * Non-obvious, for example combinations of descriptor properties that produce validation errors. There is no point telling you to make sure you use the correct descriptor object structure. That is both obvious and vague.
  * Developer-controlled. Some of the error criteria are purely based on internals and not really relevant to web developers.


You can find more information about WebGPU error handling in the explainer — see Object validity and destroyed-ness and Errors. WebGPU Error Handling best practices provides useful real-world examples and advice.
Note: The historic way of handling errors in WebGL is to provide a `getError()` method to return error information. This is problematic in that it returns errors synchronously, which is bad for performance — each call requires a round-trip to the GPU and requires all previously issued operations to be finished. Its state model is also flat, meaning that errors can leak between unrelated code. The creators of WebGPU were determined to improve on this.
## Interfaces
>
### Entry point for the API
`Navigator.gpu` / `WorkerNavigator.gpu`
    
The entry point for the API — returns the `GPU` object for the current context.
`GPU`
    
The starting point for using WebGPU. It can be used to return a `GPUAdapter`.
`GPUAdapter`
    
Represents a GPU adapter. From this you can request a `GPUDevice`, adapter info, features, and limits.
`GPUAdapterInfo`
    
Contains identifying information about an adapter.
### Configuring GPUDevices
`GPUDevice`
    
Represents a logical GPU device. This is the main interface through which the majority of WebGPU functionality is accessed.
`GPUSupportedFeatures`
    
A setlike object that describes additional functionality supported by a `GPUAdapter` or `GPUDevice`.
`GPUSupportedLimits`
    
Describes the limits supported by a `GPUAdapter` or `GPUDevice`.
### Configuring a rendering `<canvas>`
`HTMLCanvasElement.getContext()` — the `"webgpu"` `contextType`
    
Invoking `getContext()` with the `"webgpu"` `contextType` returns a `GPUCanvasContext` object instance, which can then be configured with `GPUCanvasContext.configure()`.
`GPUCanvasContext`
    
Represents the WebGPU rendering context of a `<canvas>` element.
### Representing pipeline resources
`GPUBuffer`
    
Represents a block of memory that can be used to store raw data to use in GPU operations.
`GPUExternalTexture`
    
A wrapper object containing an `HTMLVideoElement` snapshot that can be used as a texture in GPU rendering operations.
`GPUSampler`
    
Controls how shaders transform and filter texture resource data.
`GPUShaderModule`
    
A reference to an internal shader module object, a container for WGSL shader code that can be submitted to the GPU to execution by a pipeline.
`GPUTexture`
    
A container used to store 1D, 2D, or 3D arrays of data, such as images, to use in GPU rendering operations.
`GPUTextureView`
    
A view onto some subset of the texture subresources defined by a particular `GPUTexture`.
### Representing pipelines
`GPUBindGroup`
    
Based on a `GPUBindGroupLayout`, a `GPUBindGroup` defines a set of resources to be bound together in a group and how those resources are used in shader stages.
`GPUBindGroupLayout`
    
Defines the structure and purpose of related GPU resources such as buffers that will be used in a pipeline, and is used as a template when creating `GPUBindGroup`s.
`GPUComputePipeline`
    
Controls the compute shader stage and can be used in a `GPUComputePassEncoder`.
`GPUPipelineLayout`
    
Defines the `GPUBindGroupLayout`s used by a pipeline. `GPUBindGroup`s used with the pipeline during command encoding must have compatible `GPUBindGroupLayout`s.
`GPURenderPipeline`
    
Controls the vertex and fragment shader stages and can be used in a `GPURenderPassEncoder` or `GPURenderBundleEncoder`.
### Encoding and submitting commands to the GPU
`GPUCommandBuffer`
    
Represents a recorded list of GPU commands that can be submitted to a `GPUQueue` for execution.
`GPUCommandEncoder`
    
Represents a command encoder, used to encode commands to be issued to the GPU.
`GPUComputePassEncoder`
    
Encodes commands related to controlling the compute shader stage, as issued by a `GPUComputePipeline`. Part of the overall encoding activity of a `GPUCommandEncoder`.
`GPUQueue`
    
controls execution of encoded commands on the GPU.
`GPURenderBundle`
    
A container for pre-recorded bundles of commands (see `GPURenderBundleEncoder`).
`GPURenderBundleEncoder`
    
Used to pre-record bundles of commands. These can be reused in `GPURenderPassEncoder`s via the `executeBundles()` method, as many times as required.
`GPURenderPassEncoder`
    
Encodes commands related to controlling the vertex and fragment shader stages, as issued by a `GPURenderPipeline`. Part of the overall encoding activity of a `GPUCommandEncoder`.
### Running queries on rendering passes
`GPUQuerySet`
    
Used to record the results of queries on passes, such as occlusion or timestamp queries.
### Debugging errors
`GPUCompilationInfo`
    
An array of `GPUCompilationMessage` objects, generated by the GPU shader module compiler to help diagnose problems with shader code.
`GPUCompilationMessage`
    
Represents a single informational, warning, or error message generated by the GPU shader module compiler.
`GPUDeviceLostInfo`
    
Returned when the `GPUDevice.lost` `Promise` resolves, providing information as to why the device was lost.
`GPUError`
    
The base interface for errors surfaced by `GPUDevice.popErrorScope` and the `uncapturederror` event.
`GPUInternalError`
    
One of the types of errors surfaced by `GPUDevice.popErrorScope` and the `GPUDevice` `uncapturederror` event. Indicates that an operation failed for a system or implementation-specific reason, even when all validation requirements were satisfied.
`GPUOutOfMemoryError`
    
One of the types of errors surfaced by `GPUDevice.popErrorScope` and the `GPUDevice` `uncapturederror` event. Indicates that there was not enough free memory to complete the requested operation.
`GPUPipelineError`
    
Describes a pipeline failure. The value received when a `Promise` returned by a `GPUDevice.createComputePipelineAsync()` or `GPUDevice.createRenderPipelineAsync()` call rejects.
`GPUUncapturedErrorEvent`
    
The event object type for the `GPUDevice` `uncapturederror` event.
`GPUValidationError`
    
One of the types of errors surfaced by `GPUDevice.popErrorScope` and the `GPUDevice` `uncapturederror` event. Describes an application error indicating that an operation did not pass the WebGPU API's validation constraints.
## Security requirements
The whole API is available only in a secure context.
## Examples
  * Basic compute demo
  * Basic render demo
  * WebGPU samples


  * WebGPU best practices
  * WebGPU explainer
  * WebGPU — All of the cores, none of the canvas


# URLPattern
Note: This feature is available in Web Workers.
The `URLPattern` interface of the URL Pattern API matches URLs or parts of URLs against a pattern. The pattern can contain capturing groups that extract parts of the matched URL.
More information about the syntax of patterns can be found on the API overview page: URL Pattern API.
## Constructor
`URLPattern()`
    
Returns a new `URLPattern` object based on the given pattern and base URL.
## Instance properties
`hash` Read only
    
A string containing a pattern to match the hash part of a URL.
`hasRegExpGroups` Read only
    
A boolean indicating whether or not any of the `URLPattern` components contain regular expression capturing groups.
`hostname` Read only
    
A string containing a pattern to match the hostname part of a URL.
`password` Read only
    
A string containing a pattern to match the password part of a URL.
`pathname` Read only
    
A string containing a pattern to match the pathname part of a URL.
`port` Read only
    
A string containing a pattern to match the port part of a URL.
`protocol` Read only
    
A string containing a pattern to match the protocol part of a URL.
`search` Read only
    
A string containing a pattern to match the search part of a URL.
`username` Read only
    
A string containing a pattern to match the username part of a URL.
## Instance methods
`exec()`
    
Returns an object with the matched parts of the URL or `null` if the URL does not match.
`test()`
    
Returns `true` if the URL matches the given pattern, `false` otherwise.
  * A polyfill of `URLPattern` is available on GitHub
  * The pattern syntax used by URLPattern is similar to the syntax used by path-to-regexp


# RTCCertificateStats
The `RTCCertificateStats` dictionary of the WebRTC API is used to report information about a certificate used by an `RTCDtlsTransport` and its underlying `RTCIceTransport`.
The report can be obtained by iterating the `RTCStatsReport` returned by `RTCPeerConnection.getStats()` until you find an entry with the `type` of `certificate`.
## Instance properties
`fingerprint`
    
A string containing the certificate fingerprint, which is calculated using the hash function specified in `fingerprintAlgorithm`.
`fingerprintAlgorithm`
    
A string containing the hash function used to compute the certificate `fingerprint`, such as "sha-256".
`base64Certificate`
    
A string containing the base-64 representation of the DER-encoded certificate.
### Common instance properties
The following properties are common to all WebRTC statistics objects (See `RTCStatsReport` for more information).
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"certificate"`, indicating the type of statistics that the object contains.
## Examples
Given a variable `myPeerConnection`, which is an instance of `RTCPeerConnection`, the code below uses `await` to wait for the statistics report, and then iterates it using `RTCStatsReport.forEach()`. It then filters the dictionaries for just those reports that have the type of `certificate` and logs the result.
    
    const stats = await myPeerConnection.getStats();
    
    stats.forEach((report) => {
      if (report.type === "certificate") {
        // Log the certificate information
        console.log(report);
      }
    });
    
  * `RTCStatsReport`
  * `RTCCertificate`


# IntersectionObserverEntry
The `IntersectionObserverEntry` interface of the Intersection Observer API describes the intersection between the target element and its root container at a specific moment of transition.
Instances of `IntersectionObserverEntry` are delivered to an `IntersectionObserver` callback in its `entries` parameter; otherwise, these objects can only be obtained by calling `IntersectionObserver.takeRecords()`.
## Instance properties
`IntersectionObserverEntry.boundingClientRect` Read only
    
Returns the bounds rectangle of the target element as a `DOMRectReadOnly`. The bounds are computed as described in the documentation for `Element.getBoundingClientRect()`.
`IntersectionObserverEntry.intersectionRatio` Read only
    
Returns the ratio of the `intersectionRect` to the `boundingClientRect`.
`IntersectionObserverEntry.intersectionRect` Read only
    
Returns a `DOMRectReadOnly` representing the target's visible area.
`IntersectionObserverEntry.isIntersecting` Read only
    
A Boolean value which is `true` if the target element intersects with the intersection observer's root. If this is `true`, then, the `IntersectionObserverEntry` describes a transition into a state of intersection; if it's `false`, then you know the transition is from intersecting to not-intersecting.
`IntersectionObserverEntry.rootBounds` Read only
    
Returns a `DOMRectReadOnly` for the intersection observer's root.
`IntersectionObserverEntry.target` Read only
    
The `Element` whose intersection with the root changed.
`IntersectionObserverEntry.time` Read only
    
A `DOMHighResTimeStamp` indicating the time at which the intersection was recorded, relative to the `IntersectionObserver`'s time origin.
## Instance methods
This interface has no methods.
# Location
The `Location` interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the `Document` and `Window` interface have such a linked `Location`, accessible via `Document.location` and `Window.location` respectively.
## Location anatomy
Hover over the URL segments below to highlight their meaning:
## Instance properties
`Location.ancestorOrigins` Read only
    
A static `DOMStringList` containing, in reverse order, the origins of all ancestor browsing contexts of the document associated with the given `Location` object.
`Location.href`
    
A stringifier that returns a string containing the entire URL. If changed, the associated document navigates to the new page. It can be set from a different origin than the associated document.
`Location.protocol`
    
A string containing the protocol scheme of the URL, including the final `':'`.
`Location.host`
    
A string containing the host, that is the hostname, a `':'`, and the port of the URL.
`Location.hostname`
    
A string containing the domain of the URL.
`Location.port`
    
A string containing the port number of the URL.
`Location.pathname`
    
A string containing an initial `'/'` followed by the path of the URL, not including the query string or fragment.
`Location.search`
    
A string containing a `'?'` followed by the parameters or "query string" of the URL. Modern browsers provide `URLSearchParams` and `URL.searchParams` to make it easy to parse out the parameters from the query string.
`Location.hash`
    
A string containing a `'#'` followed by the fragment identifier of the URL.
`Location.origin` Read only
    
Returns a string containing the canonical form of the origin of the specific location.
## Instance methods
`Location.assign()`
    
Loads the resource at the URL provided in parameter.
`Location.reload()`
    
Reloads the current URL, like the Refresh button.
`Location.replace()`
    
Replaces the current resource with the one at the provided URL (redirects to the provided URL). The difference from the `assign()` method and setting the `href` property is that after using `replace()` the current page will not be saved in session `History`, meaning the user won't be able to use the back button to navigate to it.
`Location.toString()`
    
Returns a string containing the whole URL. It is a synonym for `Location.href`, though it can't be used to modify the value.
## Examples
    
    // location: https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
    const loc = document.location;
    console.log(loc.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
    console.log(loc.protocol); // https:
    console.log(loc.host); // developer.mozilla.org:8080
    console.log(loc.hostname); // developer.mozilla.org
    console.log(loc.port); // 8080
    console.log(loc.pathname); // /en-US/search
    console.log(loc.search); // ?q=URL
    console.log(loc.hash); // #search-results-close-container
    console.log(loc.origin); // https://developer.mozilla.org:8080
    
    location.assign("http://another.site"); // load another page
    
  * Two `Location` properties: `Window.location` and `Document.location`.
  * URL manipulation interfaces: `URL` and `URLSearchParams`.


# HTMLFormElement
The `HTMLFormElement` interface represents a `<form>` element in the DOM. It allows access to—and, in some cases, modification of—aspects of the form, as well as access to its component elements.
EventTarget  Node  Element  HTMLElement  HTMLFormElement 
## Instance properties
This interface also inherits properties from its parent, `HTMLElement`.
`HTMLFormElement.acceptCharset`
    
A string reflecting the value of the form's `accept-charset` HTML attribute.
`HTMLFormElement.action`
    
A string reflecting the value of the form's `action` HTML attribute, containing the URI of a program that processes the information submitted by the form.
`HTMLFormElement.autocomplete`
    
A string reflecting the value of the form's `autocomplete` HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.
`HTMLFormElement.encoding` or `HTMLFormElement.enctype`
    
A string reflecting the value of the form's `enctype` HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two properties are synonyms.
`HTMLFormElement.elements` Read only
    
A `HTMLFormControlsCollection` holding all form controls belonging to this form element.
`HTMLFormElement.length` Read only
    
A `long` reflecting the number of controls in the form.
`HTMLFormElement.name`
    
A string reflecting the value of the form's `name` HTML attribute, containing the name of the form.
`HTMLFormElement.noValidate`
    
A boolean value reflecting the value of the form's `novalidate` HTML attribute, indicating whether the form should not be validated.
`HTMLFormElement.method`
    
A string reflecting the value of the form's `method` HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.
`HTMLFormElement.rel`
    
A string reflecting the value of the form's `rel` HTML attribute, which represents what kinds of links the form creates as a space-separated list of enumerated values.
`HTMLFormElement.relList` Read only
    
A `DOMTokenList` that reflects the `rel` HTML attribute, as a list of tokens.
`HTMLFormElement.target`
    
A string reflecting the value of the form's `target` HTML attribute, indicating where to display the results received from submitting the form.
Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (e.g., a form with an input named `action` will have its `action` property return that input instead of the form's `action` HTML attribute).
## Instance methods
This interface also inherits methods from its parent, `HTMLElement`.
`checkValidity()`
    
Returns `true` if the element's child controls are subject to constraint validation and satisfy those constraints; returns `false` if some controls do not satisfy their constraints. Fires an event named `invalid` at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to `false`.
`reportValidity()`
    
Returns `true` if the element's child controls satisfy their validation constraints. When `false` is returned, cancelable `invalid` events are fired for each invalid child and validation problems are reported to the user.
`requestSubmit()`
    
Requests that the form be submitted using the specified submit button and its corresponding configuration.
`reset()`
    
Resets the form to its initial state.
`submit()`
    
Submits the form to the server.
## Events
Listen to these events using `addEventListener()`, or by assigning an event listener to the `oneventname` property of this interface.
`formdata`
    
The `formdata` event fires after the entry list representing the form's data is constructed.
`reset`
    
The `reset` event fires when a form is reset.
`submit`
    
The `submit` event fires when a form is submitted.
## Usage notes
>
### Obtaining a form element object
To obtain an `HTMLFormElement` object, you can use a CSS selector with `querySelector()`, or you can get a list of all of the forms in the document using its `forms` property.
`Document.forms` returns an array of `HTMLFormElement` objects listing each of the forms on the page. You can then use any of the following syntaxes to get an individual form:
`document.forms[index]`
    
Returns the form at the specified `index` into the array of forms.
`document.forms[id]`
    
Returns the form whose ID is `id`.
`document.forms[name]`
    
Returns the form whose `name` attribute's value is `name`.
### Accessing the form's elements
You can access the list of the form's data-containing elements by examining the form's `elements` property. This returns an `HTMLFormControlsCollection` listing all of the form's user data entry elements, both those which are descendants of the `<form>` and those which are made members of the form using their `form` attributes.
You can also get the form's element by using its `name` attribute as a key of the `form`, but using `elements` is a better approach—it contains only the form's elements, and it cannot be mixed with other attributes of the `form`.
### Issues with Naming Elements
Some names will interfere with JavaScript access to the form's properties and elements.
For example:
  * `<input name="id">` will take precedence over `<form id="…">`. This means that `form.id` will not refer to the form's id, but to the element whose name is `"id"`. This will be the case with any other form properties, such as `<input name="action">` or `<input name="post">`.
  * `<input name="elements">` will render the form's `elements` collection inaccessible. The reference `form.elements` will now refer to the individual element.


To avoid such problems with element names:
  * Always use the `elements` collection to avoid ambiguity between an element name and a form property.
  * Never use `"elements"` as an element name.


If you are not using JavaScript, this will not cause a problem.
### Elements that are considered form controls
The elements included by `HTMLFormElement.elements` and `HTMLFormElement.length` are the following:
  * `<button>`
  * `<fieldset>`
  * `<input>` (with the exception that any whose `type` is `"image"` are omitted for historical reasons)
  * `<object>`
  * `<output>`
  * `<select>`
  * `<textarea>`


No other elements are included in the list returned by `elements`, which makes it an excellent way to get at the most important elements when processing forms.
## Examples
Creating a new form element, modifying its attributes, then submitting it:
    
    const f = document.createElement("form"); // Create a form
    document.body.appendChild(f); // Add it to the document body
    f.action = "/cgi-bin/some.cgi"; // Add action and method attributes
    f.method = "POST";
    f.submit(); // Call the form's submit() method
    
Extract information from a `<form>` element and set some of its attributes:
    
    <form name="formA" action="/cgi-bin/test" method="post">
      <p>Press "Info" for form details, or "Set" to change those details.</p>
      <p>
        <button type="button" id="info">Info</button>
        <button type="button" id="set-info">Set</button>
        <button type="reset">Reset</button>
      </p>
    
      <textarea id="form-info" rows="15" cols="20"></textarea>
    </form>
    
    
    document.getElementById("info").addEventListener("click", () => {
      // Get a reference to the form via its name
      const f = document.forms["formA"];
      // The form properties we're interested in
      const properties = [
        "elements",
        "length",
        "name",
        "charset",
        "action",
        "acceptCharset",
        "action",
        "enctype",
        "method",
        "target",
      ];
      // Iterate over the properties, turning them into a string that we can display to the user
      const info = properties
        .map((property) => `${property}: ${f[property]}`)
        .join("\n");
    
      // Set the form's <textarea> to display the form's properties
      document.forms["formA"].elements["form-info"].value = info; // document.forms["formA"]['form-info'].value would also work
    });
    
    document.getElementById("set-info").addEventListener("click", (e) => {
      // Get a reference to the form via the event target
      // e.target is the button, and .form is the form it belongs to
      const f = e.target.form;
      // Argument should be a form element reference.
      f.action = "a-different-url.cgi";
      f.name = "a-different-name";
    });
    
Submit a `<form>` into a new window:
    
    <form action="test.php" target="_blank">
      <p>
        <label>First name: <input type="text" name="first-name" /></label>
      </p>
      <p>
        <label>Last name: <input type="text" name="last-name" /></label>
      </p>
      <p>
        <label><input type="password" name="pwd" /></label>
      </p>
    
      <fieldset>
        <legend>Pet preference</legend>
    
        <p>
          <label><input type="radio" name="pet" value="cat" /> Cat</label>
        </p>
        <p>
          <label><input type="radio" name="pet" value="dog" /> Dog</label>
        </p>
      </fieldset>
    
      <fieldset>
        <legend>Owned vehicles</legend>
    
        <p>
          <label
            ><input type="checkbox" name="vehicle" value="Bike" />I have a
            bike</label
          >
        </p>
        <p>
          <label
            ><input type="checkbox" name="vehicle" value="Car" />I have a car</label
          >
        </p>
      </fieldset>
    
      <p><button>Submit</button></p>
    </form>
    
  * The HTML element implementing this interface: `<form>`.


# FileSystemWritableFileStream
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `FileSystemWritableFileStream` interface of the File System API is a `WritableStream` object with additional convenience methods, which operates on a single file on disk. The interface is accessed through the `FileSystemFileHandle.createWritable()` method.
WritableStream  FileSystemWritableFileStream 
## Instance properties
Inherits properties from its parent, `WritableStream`.
## Instance methods
Inherits methods from its parent, `WritableStream`.
`FileSystemWritableFileStream.write()`
    
Writes content into the file the method is called on, at the current file cursor offset.
`FileSystemWritableFileStream.seek()`
    
Updates the current file cursor offset to the position (in bytes) specified.
`FileSystemWritableFileStream.truncate()`
    
Resizes the file associated with the stream to be the specified size in bytes.
## Examples
The following asynchronous function opens the 'Save File' picker, which returns a `FileSystemFileHandle` once a file is selected. From this, a writable stream is created using the `FileSystemFileHandle.createWritable()` method.
A text string is then written to the stream, which is subsequently closed.
    
    async function saveFile() {
      // create a new handle
      const newHandle = await window.showSaveFilePicker();
    
      // create a FileSystemWritableFileStream to write to
      const writableStream = await newHandle.createWritable();
    
      // write our file
      await writableStream.write("This is my file content");
    
      // close the file and write the contents to disk.
      await writableStream.close();
    }
    
The following examples show different options that can be passed into the `write()` method.
    
    // just pass in the data (no options)
    writableStream.write(data);
    
    // writes the data to the stream from the determined position
    writableStream.write({ type: "write", position, data });
    
    // updates the current file cursor offset to the position specified
    writableStream.write({ type: "seek", position });
    
    // resizes the file to be size bytes long
    writableStream.write({ type: "truncate", size });
    
  * File System API
  * The File System Access API: simplifying access to local files


# Web Authentication API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Web Authentication API (WebAuthn) is an extension of the Credential Management API that enables strong authentication with public key cryptography, enabling passwordless authentication and secure multi-factor authentication (MFA) without SMS texts.
## WebAuthn concepts and usage
WebAuthn uses asymmetric (public-key) cryptography instead of passwords or SMS texts for registering, authenticating, and multi-factor authentication with websites. This has some benefits:
  * Protection against phishing: An attacker who creates a fake login website can't login as the user because the signature changes with the origin of the website.
  * Reduced impact of data breaches: Developers don't need to hash the public key, and if an attacker gets access to the public key used to verify the authentication, it can't authenticate because it needs the private key.
  * Invulnerable to password attacks: Some users might reuse passwords, and an attacker may obtain the user's password for another website (e.g., via a data breach). Also, text passwords are much easier to brute-force than a digital signature.


Many websites already have pages that allow users to register new accounts or log into an existing account, and WebAuthn acts as a replacement or enhancement for the authentication part of the system. It extends the Credential Management API, abstracting communication between the user agent and an authenticator and providing the following new functionality:
  * When `navigator.credentials.create()` is used with the `publicKey` option, the user agent creates new credentials via an authenticator — either for registering a new account or for associating a new asymmetric key pair with an existing account. 
    * When registering a new account, these credentials are stored on a server (also referred to as a service or a relying party) and can be subsequently used to log a user in.
    * The asymmetric key pair is stored in the authenticator, which can then be used to authenticate a user with a relying party for example during MFA. The authenticator may be embedded into the user agent, into an operating system, such as Windows Hello, or it may be a physical token, such as a USB or Bluetooth Security Key.
  * When `navigator.credentials.get()` is used with the `publicKey` option, the user agent uses an existing set of credentials to authenticate to a relying party (either as the primary login or to provide an additional factor during MFA as described above).


In their most basic forms, both `create()` and `get()` receive a very large random number called the "challenge" from the server and return the challenge signed by the private key back to the server. This proves to the server that a user has the private key required for authentication without revealing any secrets over the network.
Note: The "challenge" must be a buffer of random information at least 16 bytes in size.
### Creating a key pair and registering a user
To illustrate how the credential creation process works, let's describe the typical flow that occurs when a user wants to register a credential to a relying party:
  1. The relying party server sends user and relying party information to the web app handling the registration process, along with the "challenge", using an appropriate secure mechanism (for example Fetch or XMLHttpRequest).
Note: The format for sharing information between the relying party server and the web app is up to the application. A recommended approach is to exchange JSON type representation objects for credentials and credential options. Convenience methods have been created in `PublicKeyCredential` for converting from the JSON representations to the form required by the authentication APIs: `parseCreationOptionsFromJSON()`, `parseRequestOptionsFromJSON()` and `PublicKeyCredential.toJSON()`.
  2. The web app initiates generation of a new credential via the authenticator, on behalf of the relying party, via a `navigator.credentials.create()` call. This call is passed a `publicKey` option specifying device capabilities, e.g., whether the device provides its own user authentication (for example with biometrics).
A typical `create()` call might look like so:
         let credential = await navigator.credentials.create({
           publicKey: {
             challenge: new Uint8Array([117, 61, 252, 231, 191, 241 /* … */]),
             rp: { id: "acme.com", name: "ACME Corporation" },
             user: {
               id: new Uint8Array([79, 252, 83, 72, 214, 7, 89, 26]),
               name: "jamiedoe",
               displayName: "Jamie Doe",
             },
             pubKeyCredParams: [{ type: "public-key", alg: -7 }],
           },
         });
         
The parameters of the `create()` call are passed to the authenticator, along with a SHA-256 hash that is signed to ensure that it isn't tampered with.
  3. After the authenticator obtains user consent, it generates a key pair and returns the public key and optional signed attestation to the web app. This is provided when the `Promise` returned by the `create()` call fulfills, in the form of a `PublicKeyCredential` object instance (the `PublicKeyCredential.response` property contains the attestation information).
  4. The web app forwards the `PublicKeyCredential` to the relying party server, again using an appropriate mechanism.
  5. The relying party server stores the public key, coupled with the user identity, to remember the credential for future authentications. During this process, it performs a series of checks to ensure that the registration was complete and not tampered with. These include:
     1. Verifying that the challenge is the same as the challenge that was sent.
     2. Ensuring that the origin was the origin expected.
     3. Validating that the signature and attestation are using the correct certificate chain for the specific model of the authenticator used to generate the key pair in the first place.


Warning: Attestation provides a way for a relying party to determine the provenance of an authenticator. Relying parties should not attempt to maintain allowlists of authenticators.
### Authenticating a user
After a user has registered with WebAuthn, they can authenticate (login) with the service. The authentication flow looks similar to the registration flow, the main differences being that authentication:
  1. Doesn't require user or relying party information
  2. Creates an assertion using the previously-generated key pair for the service, rather than the authenticator's key pair.


A typical authentication flow is as follows:
  1. The relying party generates a "challenge" and sends it to the user agent using an appropriate secure mechanism, along with a list of relying party and user credentials. It can also indicate where to look for the credential, e.g., on a local built-in authenticator, or on an external one over USB, BLE, etc.
  2. The browser asks the authenticator to sign the challenge via a `navigator.credentials.get()` call, which is passed the credentials in a `publicKey` option.
A typical `get()` call might look like so:
         let credential = await navigator.credentials.get({
           publicKey: {
             challenge: new Uint8Array([139, 66, 181, 87, 7, 203 /* … */]),
             rpId: "acme.com",
             allowCredentials: [
               {
                 type: "public-key",
                 id: new Uint8Array([64, 66, 25, 78, 168, 226, 174 /* … */]),
               },
             ],
             userVerification: "required",
           },
         });
         
The parameters of the `get()` call are passed to the authenticator to handle the authentication.
  3. If the authenticator contains one of the given credentials and is able to successfully sign the challenge, it returns a signed assertion to the web app after receiving user consent. This is provided when the `Promise` returned by the `get()` call fulfills, in the form of a `PublicKeyCredential` object instance (the `PublicKeyCredential.response` property contains the assertion information).
  4. The web app forwards the signed assertion to the relying party server for the relying party to validate. The validation checks include:
     1. Using the public key that was stored during the registration request to validate the signature by the authenticator.
     2. Ensuring that the challenge that was signed by the authenticator matches the challenge that was generated by the server.
     3. Checking that the Relying Party ID is the one expected for this service.
  5. Once verified by the server, the authentication flow is considered successful.


### Discoverable credentials and conditional mediation
Discoverable credentials are retrieved from an authenticator — discovered by the browser — to offer as login options when the user is logging in to a relying party web app. In contrast, non-discoverable credentials are provided by the relying party server for the browser to offer as login options.
Discoverable credential IDs and associated metadata such as user names and display names are stored in a client-side authenticator such as a browser password manager, authenticator app, or hardware solution such as a YubiKey. Having this information available in the authenticator means that the user can log in conveniently without having to supply credentials, and the relying party does not have to provide a `credentialId` when asserting it (although it can do if desired; if the credential is asserted by the RP then the non-discoverable workflow is followed).
A discoverable credential is created via a `create()` call with a specified `residentKey`. The `credentialId`, user metadata, and public key for the new credential is stored by the authenticator as discussed above, but also returned to the web app and stored on the RP server.
In order to authenticate, the RP server calls `get()` with conditional mediation specified, that is `mediation` set to `conditional`, an empty `allowCredentials` list (meaning only discoverable credentials can be shown), and a challenge.
Conditional mediation results in discoverable credentials found in the authenticator being presented to the user in a non-modal UI along with an indication of the origin requesting credentials, rather than a modal dialog. In practice, this means autofilling available credentials in your login forms. The metadata stored in discoverable credentials can be displayed to help users choose a credential when logging in. To display discoverable credentials in your login forms, you also need to include `autocomplete="webauthn"` on your form fields.
To reiterate, the relying party doesn't tell the authenticator what credentials to offer to the user — instead, the authenticator supplies the list it has available. Once the user selects a credential, the authenticator uses it to sign the challenge with the associated private key, and the browser returns the signed challenge and its `credentialId` to the RP server.
The subsequent authentication process on the RP server is the same as for non-discoverable credentials.
Note: You can check whether conditional mediation is available on a specific user agent by calling the `PublicKeyCredential.isConditionalMediationAvailable()` method.
Passkeys are a significant use case for discoverable credentials; see Create a passkey for passwordless logins and Sign in with a passkey through form autofill for implementation details. See also Discoverable credentials deep dive for more general information on discoverable credentials.
When conditional mediation is used for authentication, the prevent silent access flag (see `CredentialsContainer.preventSilentAccess()`) is treated as being `true` regardless of its actual value: the conditional behavior always involves user mediation of some sort if applicable credentials are discovered.
Note: If no credentials are discovered, the non-modal dialog will not be visible, and the user agent can prompt the user to take action in a way that depends on the type of credential (for example, to insert a device containing credentials).
#### Discoverable credential synchronization methods
It is possible for the information stored in a user's authenticator about a discoverable credential to go out sync with the relying party's server. This might happen when the user deletes a credential or modifies their user/display name on the RP web app without updating the authenticator.
The API provides methods to allow the relying party server to signal changes to the authenticator, so it can update its stored credentials:
  * `PublicKeyCredential.signalAllAcceptedCredentials()`: Signals to the authenticator all of the valid credential IDs that the RP server still holds for a particular user.
  * `PublicKeyCredential.signalCurrentUserDetails()`: Signals to the authenticator that a particular user has updated their user name and/or display name on the RP server.
  * `PublicKeyCredential.signalUnknownCredential()`: Signals to the authenticator that a credential ID was not recognized by the RP server.


It may seem like `signalUnknownCredential()` and `signalAllAcceptedCredentials()` have similar purposes, so what situation should each one be used in?
  * `signalAllAcceptedCredentials()` should be called after every successful sign-in, and when the user is logged in and you want to update the state of their credentials. It must only be called when a user is authenticated, as it shares the entire list of `credentialId`s for a given user. This would cause a privacy leak if the user is not authenticated.
  * `signalUnknownCredential()` should be called after an unsuccessful login, to signal to the authenticator that the `credentialId` of the selected credential cannot be validated, and should be removed. The method can safely be called when the user is not authenticated as it passes a single `credentialId` to the authenticator — the one the client just tried to authenticate with — and no user information.


### Customizing workflows based on client capabilities
The signup and login workflows can be customized based on the capabilities of the WebAuthn client (browser). The `PublicKeyCredential.getClientCapabilities()` static method can be used to query those capabilities; it returns an object where each key refers to a WebAuthn capability or extension, and each value is a boolean indicating support for that feature.
This can be used, for example, to check:
  * Client support for various authenticators such as passkeys or biometric user verification.
  * Whether the client supports methods to keep relying party and authenticator credentials in sync.
  * Whether the client allows a single passkey to be used on different websites with the same origin.


The code below shows how you might use `getClientCapabilities()` to check if the client supports authenticators that offer biometric user verification. Note that the actual actions performed depend on your site. For sites that require biometric authentication, you might replace the login UI with a message indicating that biometric authentication is needed, and the user should try a different browser or device.
    
    async function checkIsUserVerifyingPlatformAuthenticatorAvailable() {
      const capabilities = await PublicKeyCredential.getClientCapabilities();
      // Check the capability: userVerifyingPlatformAuthenticator
      if (capabilities.userVerifyingPlatformAuthenticator) {
        // Perform actions if biometric support is available
      } else {
        // Perform actions if biometric support is not available.
      }
    }
    
## Controlling access to the API
The availability of WebAuthn can be controlled using a Permissions Policy, specifying two directives in particular:
  * `publickey-credentials-create`: Controls the availability of `navigator.credentials.create()` with the `publicKey` option.
  * `publickey-credentials-get`: Controls the availability of `navigator.credentials.get()` with the `publicKey` option.


Both directives have a default allowlist value of `"self"`, meaning that by default these methods can be used in top-level document contexts. In addition, `get()` can be used in nested browsing contexts loaded from the same origin as the top-most document. `get()` and `create()` can be used in nested browsing contexts loaded from the different origins to the top-most document (i.e., in cross-origin `<iframes>`), if allowed by the `publickey-credentials-get` and `publickey-credentials-create` `Permissions-Policy` directives, respectively. For cross-origin `create()` calls, where the permission was granted by `allow=` on an iframe, the frame must also have Transient activation.
Note: Where a policy forbids use of these methods, the promises returned by them will reject with a `NotAllowedError` `DOMException`.
### Basic access control
If you wish to allow access to a specific subdomain only, you could provide it like this:
    
    Permissions-Policy: publickey-credentials-get=("https://subdomain.example.com")
    Permissions-Policy: publickey-credentials-create=("https://subdomain.example.com")
    
### Allowing embedded `create` and `get()` calls in an `<iframe>`
If you wish to authenticate with `get()` or `create()` in an `<iframe>`, there are a couple of steps to follow:
  1. The site embedding the relying party site must provide permission via an `allow` attribute:
     * If using `get()`:
           <iframe
             src="https://auth.provider.com"
             allow="publickey-credentials-get *">
           </iframe>
           
     * If using `create()`:
           <iframe
             src="https://auth.provider.com"
             allow="publickey-credentials-create 'self' https://a.auth.provider.com https://b.auth.provider.com">
           </iframe>
           
The `<iframe>` must also have Transient activation if `create()` is called cross-origin.
  2. The relying party site must provide permission for the above access via a `Permissions-Policy` header:
         Permissions-Policy: publickey-credentials-get=*
         Permissions-Policy: publickey-credentials-create=*
         
Or to allow only a specific URL to embed the relying party site in an `<iframe>`:
         Permissions-Policy: publickey-credentials-get=("https://subdomain.example.com")
         Permissions-Policy: publickey-credentials-create=("https://*.auth.provider.com")
         


## Interfaces
`AuthenticatorAssertionResponse`
    
Provides proof to a service that an authenticator has the necessary key pair to successfully handle an authentication request initiated by a `CredentialsContainer.get()` call. Available in the `response` property of the `PublicKeyCredential` instance obtained when the `get()` `Promise` fulfills.
`AuthenticatorAttestationResponse`
    
The result of a WebAuthn credential registration (i.e., a `CredentialsContainer.create()` call). It contains information about the credential that the server needs to perform WebAuthn assertions, such as its credential ID and public key. Available in the `response` property of the `PublicKeyCredential` instance obtained when the `create()` `Promise` fulfills.
`AuthenticatorResponse`
    
The base interface for `AuthenticatorAttestationResponse` and `AuthenticatorAssertionResponse`.
`PublicKeyCredential`
    
Provides information about a public key / private key pair, which is a credential for logging into a service using an un-phishable and data-breach resistant asymmetric key pair instead of a password. Obtained when the `Promise` returned via a `create()` or `get()` call fulfills.
## Extensions to other interfaces
`CredentialsContainer.create()`, the `publicKey` option
    
Calling `create()` with a `publicKey` option initiates the creation of new asymmetric key credentials via an authenticator, as explained above.
`CredentialsContainer.get()`, the `publicKey` option
    
Calling `get()` with a `publicKey` option instructs the user agent uses an existing set of credentials to authenticate to a relying party.
## Examples
>
### Demo sites
  * Mozilla Demo website and its source code.
  * Google Demo website and its source code.
  * WebAuthn.io demo website and its source code.
  * github.com/webauthn-open-source and its client source code and server source code


### Usage example
Note: For security reasons, the Web Authentication API calls (`create()` and `get()`) are canceled if the browser window loses focus while the call is pending.
    
    // sample arguments for registration
    const createCredentialDefaultArgs = {
      publicKey: {
        // Relying Party (a.k.a. - Service):
        rp: {
          name: "Acme",
        },
        // User:
        user: {
          id: new Uint8Array(16),
          name: "carina.p.anand@example.com",
          displayName: "Carina P. Anand",
        },
        pubKeyCredParams: [
          {
            type: "public-key",
            alg: -7,
          },
        ],
        attestation: "direct",
        timeout: 60000,
        challenge: new Uint8Array([
          // must be a cryptographically random number sent from a server
          0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17,
          0x1a, 0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15,
          0x7e, 0x38, 0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
        ]).buffer,
      },
    };
    
    // sample arguments for login
    const getCredentialDefaultArgs = {
      publicKey: {
        timeout: 60000,
        // allowCredentials: [newCredential] // see below
        challenge: new Uint8Array([
          // must be a cryptographically random number sent from a server
          0x79, 0x50, 0x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15,
          0x67, 0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x78, 0x2e, 0xd5, 0x6f,
          0x81, 0x26, 0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50,
        ]).buffer,
      },
    };
    
    // register / create a new credential
    navigator.credentials
      .create(createCredentialDefaultArgs)
      .then((cred) => {
        console.log("NEW CREDENTIAL", cred);
        // normally the credential IDs available for an account would come from a server
        // but we can just copy them from above…
        const idList = [
          {
            id: cred.rawId,
            transports: ["usb", "nfc", "ble"],
            type: "public-key",
          },
        ];
        getCredentialDefaultArgs.publicKey.allowCredentials = idList;
        return navigator.credentials.get(getCredentialDefaultArgs);
      })
      .then((assertion) => {
        console.log("ASSERTION", assertion);
      })
      .catch((err) => {
        console.log("ERROR", err);
      });
    
# IdentityCredentialRequestOptions
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `IdentityCredentialRequestOptions` dictionary represents the object passed to `CredentialsContainer.get()` as the value of the `identity` option.
When an `identity` option is provided in a `get()` call made on a relying party (RP) website, the user is offered a list of federated identity providers (IdPs) as sign-in options. Once the user signs in successfully using one of these options, the promise returned by the `get()` call returns an `IdentityCredential` object.
## Instance properties
`context` Optional
    
A string specifying the context in which the user is authenticating with FedCM. The browser uses this value to vary the text in its FedCM UI to better suit the context. Possible values are:
`"continue"`
    
Suitable for situations where the user is choosing an identity to continue to the next page in the flow, which requires a sign-in. Browsers will provide a text string similar to:
> Continue to <page-origin> with <IdP>
`"signin"`
    
Suitable for general situations where the user is signing in with an IdP account they've already used on this origin. Browsers will provide a text string similar to:
> Sign in to <page-origin> with <IdP>
`"signup"`
    
An option for situations where the user is signing in to the origin with a new IdP account they've not used here before. Browsers will provide a text string similar to:
> Sign up to <page-origin> with <IdP>
`"use"`
    
Suitable for situations where a different action, such as validating a payment, is being performed. Browsers will provide a text string similar to:
> Use <page-origin> with <IdP>
The default value is `"signin"`.
`mode` Optional
    
A string specifying the UI mode to use for the sign-in flow. Possible values are:
`active`
    
The sign-in flow must be initiated via a user action such as clicking a button. If `mode` is set to `active`, `providers` can only have a length of `1`, otherwise the `get()` promise will reject.
`passive`
    
The sign-in flow can be initiated without direct user interaction. This is the default value.
See Active versus passive mode for more details of the difference between the two modes.
`providers`
    
An array of objects specifying details of the IdPs that the user should be presented with as options for signing in. These objects can contain the following properties:
`configURL`
    
A string specifying the URL of the IdP's config file. See Provide a config file for more information.
`clientId`
    
A string specifying the RP client identifier. This information is issued by the IdP to the RP in a separate process that is specific to the IdP.
`domainHint` Optional
    
A string hinting at the domain of accounts that the RP is interested in. If provided, the user agent will only show accounts that match the domain hint value in their `domain_hints` array. If `"any"` is specified, the RP will show any account that is associated with at least one domain hint.
`fields` Optional
    
An array of strings specifying user information that the RP wishes to obtain from the IdP for use in the sign-in process. The exact strings will vary by IdP, but tend to be similar to `"name"`, `"email"`, or `"profile-picture-url"`.
`loginHint` Optional
    
A string providing a hint about the account option(s) the browser should provide for the user to sign in with. This is useful in cases where the user has already signed in and the site asks them to reauthenticate. Otherwise, the reauthentication process can be confusing when a user has multiple accounts and can't remember which one they used to sign in previously. The value for the `loginHint` property can be taken from the user's previous sign-in, and is matched against the `login_hints` values provided by the IdP in the array of user information returned from the IdP's accounts list endpoint.
`nonce` Optional
    
A random string that can be included to ensure the response is issued specifically for this request and prevent replay attacks.
`params` Optional
    
A custom object used to specify any additional key-value parameters that RP needs to send to the IdP. This will vary by IdP and could include, for example, additional permission requests such as `admin: true`, or `calendar: "readonly"`.
# GPUCompilationInfo
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUCompilationInfo` interface of the WebGPU API represents an array of `GPUCompilationMessage` objects generated by the GPU shader module compiler to help diagnose problems with shader code.
`GPUCompilationInfo` is accessed via `GPUShaderModule.getCompilationInfo()`.
## Instance properties
`messages` Read only
    
An array of `GPUCompilationMessage` objects, each one containing the details of an individual shader compilation message. Messages can be informational, warnings, or errors.
## Examples
In the example below, we have deliberately left a parenthesis out of a function declaration in our shader code:
    
    const shaders = `
    struct VertexOut {
      @builtin(position) position : vec4f,
      @location(0) color : vec4f
    }
    
    @vertex
    fn vertex_main(@location(0) position: vec4f,
                   @location(1) color: vec4f -> VertexOut
    {
      var output : VertexOut;
      output.position = position;
      output.color = color;
      return output;
    }
    
    @fragment
    fn fragment_main(fragData: VertexOut) -> @location(0) vec4f
    {
      return fragData.color;
    }
    `;
    
When we compile the shader module, we use `getCompilationInfo()` to grab some information about the resulting error:
    
    async function init() {
      // …
    
      const shaderModule = device.createShaderModule({
        code: shaders,
      });
    
      const shaderInfo = await shaderModule.getCompilationInfo();
      const firstMessage = shaderInfo.messages[0];
    
      console.log(firstMessage.lineNum); // 9
      console.log(firstMessage.message); // "expected ')' for function declaration"
      console.log(firstMessage.type); // "error"
      // …
    }
    
  * The WebGPU API


# MediaDeviceInfo
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MediaDeviceInfo` interface of the Media Capture and Streams API contains information that describes a single media input or output device.
The list of devices obtained by calling `navigator.mediaDevices.enumerateDevices()` is an array of `MediaDeviceInfo` objects, one per media device.
## Instance properties
`MediaDeviceInfo.deviceId` Read only
    
Returns a string that is an identifier for the represented device that is persisted across sessions. It is un-guessable by other applications and unique to the origin of the calling application. It is reset when the user clears cookies (for Private Browsing, a different identifier is used that is not persisted across sessions).
`MediaDeviceInfo.groupId` Read only
    
Returns a string that is a group identifier. Two devices have the same group identifier if they belong to the same physical device — for example a monitor with both a built-in camera and a microphone.
`MediaDeviceInfo.kind` Read only
    
Returns an enumerated value that is either `"videoinput"`, `"audioinput"` or `"audiooutput"`.
`MediaDeviceInfo.label` Read only
    
Returns a string describing this device (for example "External USB Webcam").
Note: For security reasons, the `label` field is always blank unless an active media stream exists or the user has granted persistent permission for media device access. The set of device labels could otherwise be used as part of a fingerprinting mechanism to identify a user.
## Instance methods
`MediaDeviceInfo.toJSON()`
    
Returns a JSON representation of the `MediaDeviceInfo` object.
## Example
Here's an example that uses `enumerateDevices()` to get a list of devices.
    
    if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
      console.log("enumerateDevices() not supported.");
    } else {
      // List cameras and microphones.
      navigator.mediaDevices
        .enumerateDevices()
        .then((devices) => {
          devices.forEach((device) => {
            console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
          });
        })
        .catch((err) => {
          console.log(`${err.name}: ${err.message}`);
        });
    }
    
This might produce:
    
    videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
    audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
    audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
    
or if one or more media streams are active, or if persistent permissions have been granted:
    
    videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
    audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
    audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
    
  * WebRTC API
  * `navigator.mediaDevices.enumerateDevices()`
  * `navigator.mediaDevices.getUserMedia()`


# HTMLMeterElement
The HTML `<meter>` elements expose the `HTMLMeterElement` interface, which provides special properties and methods (beyond the `HTMLElement` object interface they also have available to them by inheritance) for manipulating the layout and presentation of `<meter>` elements.
EventTarget  Node  Element  HTMLElement  HTMLMeterElement 
## Instance properties
Also inherits properties from its parent, `HTMLElement`.
`HTMLMeterElement.high`
    
A `double` representing the value of the high boundary, reflecting the `high` attribute.
`HTMLMeterElement.low`
    
A `double` representing the value of the low boundary, reflecting the `low` attribute.
`HTMLMeterElement.max`
    
A `double` representing the maximum value, reflecting the `max` attribute.
`HTMLMeterElement.min`
    
A `double` representing the minimum value, reflecting the `min` attribute.
`HTMLMeterElement.optimum`
    
A `double` representing the optimum, reflecting the `optimum` attribute.
`HTMLMeterElement.value`
    
A `double` representing the current value, reflecting the `value` attribute.
`HTMLMeterElement.labels` Read only
    
A `NodeList` of `<label>` elements that are associated with the element.
## Instance methods
This interface does not implement any specific methods but inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<meter>`


# SecurityPolicyViolationEvent
Note: This feature is available in Web Workers.
The `SecurityPolicyViolationEvent` interface inherits from `Event`, and represents the event object of a `securitypolicyviolation` event sent on an `Element`, `Document`, or worker when its Content Security Policy (CSP) is violated.
Event  SecurityPolicyViolationEvent 
## Constructor
`SecurityPolicyViolationEvent()`
    
Creates a new `SecurityPolicyViolationEvent` object instance.
## Instance properties
`SecurityPolicyViolationEvent.blockedURI` Read only
    
A string representing the URI of the resource that was blocked because it violates a policy.
`SecurityPolicyViolationEvent.columnNumber` Read only
    
The column number in the document or worker at which the violation occurred.
`SecurityPolicyViolationEvent.disposition` Read only
    
A string indicating whether the user agent is configured to enforce or just report the policy violation.
`SecurityPolicyViolationEvent.documentURI` Read only
    
A string representing the URI of the document or worker in which the violation occurred.
`SecurityPolicyViolationEvent.effectiveDirective` Read only
    
A string representing the directive that was violated.
`SecurityPolicyViolationEvent.lineNumber` Read only
    
The line number in the document or worker at which the violation occurred.
`SecurityPolicyViolationEvent.originalPolicy` Read only
    
A string containing the policy whose enforcement caused the violation.
`SecurityPolicyViolationEvent.referrer` Read only
    
A string representing the URL for the referrer of the resources whose policy was violated, or `null`.
`SecurityPolicyViolationEvent.sample` Read only
    
A string representing a sample of the resource that caused the violation, usually the first 40 characters. This will only be populated if the resource is an inline script, event handler, or style — external resources causing a violation will not generate a sample.
`SecurityPolicyViolationEvent.sourceFile` Read only
    
If the violation occurred as a result of a script, this will be the URL of the script; otherwise, it will be `null`. Both `columnNumber` and `lineNumber` should have non-null values if this property is not `null`.
`SecurityPolicyViolationEvent.statusCode` Read only
    
A number representing the HTTP status code of the document or worker in which the violation occurred.
`SecurityPolicyViolationEvent.violatedDirective` Read only
    
A string representing the directive that was violated. This is a historical alias of `effectiveDirective`.
## Examples
    
    document.addEventListener("securitypolicyviolation", (e) => {
      console.log(e.blockedURI);
      console.log(e.violatedDirective);
      console.log(e.originalPolicy);
    });
    
  * HTTP Content Security Policy (CSP)
  * `CSPViolationReportBody`
  * The `securitypolicyviolation` event of the `Element` interface
  * The `securitypolicyviolation` event of the `Document` interface
  * The `securitypolicyviolation` event of the `WorkerGlobalScope` interface


# AudioWorkletNode
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: Although the interface is available outside secure contexts, the `BaseAudioContext.audioWorklet` property is not, thus custom `AudioWorkletProcessor`s cannot be defined outside them.
The `AudioWorkletNode` interface of the Web Audio API represents a base class for a user-defined `AudioNode`, which can be connected to an audio routing graph along with other nodes. It has an associated `AudioWorkletProcessor`, which does the actual audio processing in a Web Audio rendering thread.
EventTarget  AudioNode  AudioWorkletNode 
## Constructor
`AudioWorkletNode()`
    
Creates a new instance of an `AudioWorkletNode` object.
## Instance properties
Also Inherits properties from its parent, `AudioNode`.
`AudioWorkletNode.port` Read only
    
Returns a `MessagePort` used for bidirectional communication between the node and its associated `AudioWorkletProcessor`. The other end is available under the `port` property of the processor.
`AudioWorkletNode.parameters` Read only
    
Returns an `AudioParamMap` — a collection of `AudioParam` objects. They are instantiated during the creation of the underlying `AudioWorkletProcessor`. If the `AudioWorkletProcessor` has a static `parameterDescriptors` getter, the `AudioParamDescriptor` array returned from it is used to create `AudioParam` objects on the `AudioWorkletNode`. With this mechanism it is possible to make your own `AudioParam` objects accessible from your `AudioWorkletNode`. You can then use their values in the associated `AudioWorkletProcessor`.
### Events
`processorerror`
    
Fired when an error is thrown in associated `AudioWorkletProcessor`. Once fired, the processor and consequently the node will output silence throughout its lifetime.
## Instance methods
Also inherits methods from its parent, `AudioNode`.
The `AudioWorkletNode` interface does not define any methods of its own.
## Examples
In this example we create a custom `AudioWorkletNode` that outputs random noise.
First, we need to define a custom `AudioWorkletProcessor`, which will output random noise, and register it. Note that this should be done in a separate file.
    
    // random-noise-processor.js
    class RandomNoiseProcessor extends AudioWorkletProcessor {
      process(inputs, outputs, parameters) {
        const output = outputs[0];
        output.forEach((channel) => {
          for (let i = 0; i < channel.length; i++) {
            channel[i] = Math.random() * 2 - 1;
          }
        });
        return true;
      }
    }
    
    registerProcessor("random-noise-processor", RandomNoiseProcessor);
    
Next, in our main script file we'll load the processor, create an instance of `AudioWorkletNode` passing it the name of the processor, and connect the node to an audio graph.
    
    const audioContext = new AudioContext();
    await audioContext.audioWorklet.addModule("random-noise-processor.js");
    const randomNoiseNode = new AudioWorkletNode(
      audioContext,
      "random-noise-processor",
    );
    randomNoiseNode.connect(audioContext.destination);
    
  * Web Audio API
  * Using the Web Audio API
  * Using AudioWorklet


# HmacKeyGenParams
The `HmacKeyGenParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.generateKey()`, when generating a key for the HMAC algorithm.
## Instance properties
`name`
    
A string. This should be set to `HMAC`.
`hash`
    
A string or an object containing a single property called `name` with a string value. It is an identifier for the digest algorithm to use. This should be one of the following:
  * `SHA-256`: selects the SHA-256 algorithm.
  * `SHA-384`: selects the SHA-384 algorithm.
  * `SHA-512`: selects the SHA-512 algorithm.


Warning: `SHA-1` is also supported here but the SHA-1 algorithm is considered vulnerable and should no longer be used.
`length` Optional
    
A `Number` — the length in bits of the key. If this is omitted, the length of the key is equal to the block size of the hash function you have chosen. Unless you have a good reason to use a different length, omit this property and use the default.
## Examples
See the examples for `SubtleCrypto.generateKey()`.
Browsers that support the "HMAC" algorithm for the `SubtleCrypto.generateKey()` method will support this type.
  * `SubtleCrypto.generateKey()`.


# RTCIceParameters
The `RTCIceParameters` dictionary specifies the username fragment and password assigned to an ICE session.
During ICE negotiation, each peer's username fragment and password are recorded in an `RTCIceParameters` object, which can be obtained from the `RTCIceTransport` by calling its `getLocalParameters()` or `getRemoteParameters()` method, depending on which end interests you.
## Instance properties
`usernameFragment`
    
A string specifying the value of the ICE session's username fragment field, `ufrag`.
`password`
    
A string specifying the session's password string.
## Usage notes
The username fragment and password uniquely identify the remote peer for the duration of the ICE session, and are used to both ensure security and to avoid crosstalk across multiple ongoing ICE sessions. See `RTCIceCandidate.usernameFragment` for further information.
# FontFaceSetLoadEvent
Note: This feature is available in Web Workers.
The `FontFaceSetLoadEvent` interface of the CSS Font Loading API represents events fired at a `FontFaceSet` after it starts loading font faces.
Events are fired when font loading starts (`loading`), loading completes (`loadingdone`) or there is an error loading one of the fonts (`loadingerror`).
Event  FontFaceSetLoadEvent 
## Constructor
`FontFaceSetLoadEvent()`
    
Creates a new `FontFaceSetLoadEvent` object.
## Instance properties
Also inherits properties from its parent `Event`.
`FontFaceSetLoadEvent.fontfaces` Read only
    
Returns an array of `FontFace` instances. Depending on the event, the array will contain font faces that are loading (`loading`), have successfully loaded (`loadingdone`), or have failed to load (`loadingerror`).
## Instance methods
Inherits methods from its parent, `Event`.
  * `Document.fonts`
  * `WorkerGlobalScope.fonts`


# Storage API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The Storage Standard defines a shared storage system designed to be used by all APIs and technologies that websites can use to store data in a user's browser.
The data stored for a website which is managed by the Storage Standard usually includes IndexedDB databases and Cache API data, but may include other kind of site-accessible data such as Web Storage API data.
The Storage API gives websites the ability to find out how much space they can use, how much they are already using, and even control whether or not they need to be alerted before the user agent disposes of data in order to make room for other things.
This article gives an overview of the way user agents store and maintain websites' data. For more information about storage limits and eviction, see Browser storage quotas and eviction criteria.
This article also gives an overview of the `StorageManager` interface used to estimate available storage for a site.
## Concepts and usage
>
### Storage buckets
The storage system described by the Storage Standard, where site data is stored, usually consists of a single bucket for each origin.
In essence, every website has its own storage space into which its data gets placed. In some cases however, user agents may decide to store a single origin's data in multiple different buckets, for example when this origin is embedded in different third-party origins.
To learn more, see How do browsers separate data from different websites?
### Bucket modes
Each site storage bucket has a mode that describes the data retention policy for that bucket. There are two modes:
`"best-effort"`
    
The user agent will try to retain the data contained in the bucket for as long as it can, but will not warn users if storage space runs low and it becomes necessary to clear the bucket in order to relieve the storage pressure.
`"persistent"`
    
The user agent will retain the data as long as possible, clearing all `"best-effort"` buckets before considering clearing a bucket marked `"persistent"`. If it becomes necessary to consider clearing persistent buckets, the user agent will notify the user and provide a way to clear one or more persistent buckets as needed.
You can change an origin's storage bucket mode by using the `navigator.storage.persist()` method, which requires the `"persistent-storage"` user permission.
    
    if (navigator.storage && navigator.storage.persist) {
      navigator.storage.persist().then((persistent) => {
        if (persistent) {
          console.log("Storage will not be cleared except by explicit user action");
        } else {
          console.log("Storage may be cleared by the UA under storage pressure.");
        }
      });
    }
    
You can also use the `navigator.storage.persisted()` method to know whether an origin's storage is persistent or not:
    
    if (navigator.storage && navigator.storage.persist) {
      navigator.storage.persisted().then((persistent) => {
        if (persistent) {
          console.log("Storage will not be cleared except by explicit user action");
        } else {
          console.log("Storage may be cleared by the UA under storage pressure.");
        }
      });
    }
    
To learn more, see Does browser-stored data persist?.
### Quotas and usage estimates
The user agent determines, using whatever mechanism it chooses, the maximum amount of storage a given site can use. This maximum is the origin's quota. The amount of this space which is in use by the site is called its usage. Both of these values are estimates; there are several reasons why they're not precise:
  * User agents are encouraged to obscure the exact size of the data used by a given origin, to prevent these values from being used for fingerprinting purposes.
  * De-duplication, compression, and other methods to reduce the physical size of the stored data may be used.
  * Quotas are conservative estimates of the space available for the origin's use, and should be less than the available space on the device to help prevent overruns.


To determine the estimated quota and usage values for a given origin, use the `navigator.storage.estimate()` method, which returns a promise that, when resolved, receives an object that contains these figures. For example:
    
    navigator.storage.estimate().then((estimate) => {
      // estimate.quota is the estimated quota
      // estimate.usage is the estimated number of bytes used
    });
    
For more information about how much data an origin can store, see How much data can be stored?.
### Data eviction
Data eviction is the process by which a user agent deletes an origin's stored data. This can happen, for example, when the device used to store the data is running low on storage space.
When clearing the data stored by an origin, the origin's bucket is treated as a single entity. The entire data stored by this origin is cleared.
If a bucket is marked as `"persistent"`, the contents won't be cleared by the user agent without either the data's origin itself or the user specifically doing so. This includes scenarios such as the user selecting a "Clear Caches" or "Clear Recent History" option. The user will be asked specifically for permission to remove persistent site storage buckets.
To learn more, see When is data evicted?.
## Interfaces
`StorageManager`
    
Provides an interface for managing persistence permissions and estimating available storage.
### Extensions to other interfaces
`Navigator.storage` Read only
    
Returns the singleton `StorageManager` object used for managing persistence permissions and estimating available storage on a site-by-site/app-by-app basis.
`WorkerNavigator.storage` Read only
    
Returns a `StorageManager` interface for managing persistence permissions and estimating available storage.
  * Using the Permissions API
  * Storage for the web on web.dev
  * Persistent storage on web.dev
  * Chrome Web Storage and Quota Concepts


# RTCDataChannelStats
The `RTCDataChannelStats` dictionary of the WebRTC API provides statistics related to one `RTCDataChannel` object on the connection.
The report can be obtained by iterating the `RTCStatsReport` returned by `RTCPeerConnection.getStats()` until you find an entry with the `type` of `data-channel`.
The data channels statistics may be correlated to a particular channel by comparing the `dataChannelIdentifier` property to a matching `RTCDataChannel.id`.
## Instance properties
`bytesSent` Optional
    
A positive integer value indicating the total number of payload bytes sent on the associated `RTCDataChannel`.
`bytesReceived` Optional
    
A positive integer value indicating the total number of payload bytes received on the associated `RTCDataChannel`.
`dataChannelIdentifier` Optional
    
A positive integer value containing the `id` of the associated `RTCDataChannel`.
`label` Optional
    
A string containing the `label` of the associated `RTCDataChannel`.
`messagesReceived` Optional
    
A positive integer value indicating the total number of `message` events fired for received messages on the associated `RTCDataChannel`.
`messagesSent` Optional
    
A positive integer value indicating the total number of `message` events fired for sent messages on the channel.
`protocol` Optional
    
A string containing the `protocol` of the associated `RTCDataChannel`.
`state`
    
The `readyState` of the associated `RTCDataChannel`.
### Common instance properties
The following properties are common to all WebRTC statistics objects (See `RTCStatsReport` for more information).
`id`
    
A string that uniquely identifies the object that is being monitored to produce this set of statistics.
`timestamp`
    
A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.
`type`
    
A string with the value `"data-channel"`, indicating the type of statistics that the object contains.
## Examples
Given a variable `myPeerConnection`, which is an instance of `RTCPeerConnection`, the code below uses `await` to wait for the statistics report, and then iterates it using `RTCStatsReport.forEach()`. It then filters the dictionaries for just those reports that have the type of `data-channel` and logs the result.
    
    const stats = await myPeerConnection.getStats();
    
    stats.forEach((report) => {
      if (report.type === "data-channel") {
        // Log the channel information
        console.log(report);
      }
    });
    
# FileSystemHandle
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `FileSystemHandle` interface of the File System API is an object which represents a file or directory entry. Multiple handles can represent the same entry. For the most part you do not work with `FileSystemHandle` directly but rather its child interfaces `FileSystemFileHandle` and `FileSystemDirectoryHandle`.
## Interfaces based on FileSystemHandle
Below is a list of interfaces based on the `FileSystemHandle` interface.
`FileSystemFileHandle`
    
Represents a handle to a file entry.
`FileSystemDirectoryHandle`
    
Provides a handle to a directory entry.
## Instance properties
`kind` Read only
    
Returns the type of entry. This is `'file'` if the associated entry is a file or `'directory'`.
`name` Read only
    
Returns the name of the associated entry.
## Instance methods
`isSameEntry()`
    
Compares two handles to see if the associated entries (either a file or directory) match.
`queryPermission()` Experimental
    
Queries the current permission state of the current handle.
`remove()` Experimental Non-standard
    
Requests removal of the entry represented by the handle from the underlying file system.
`requestPermission()` Experimental
    
Requests read or readwrite permissions for the file handle.
## Examples
>
### Checking Type
The below code allows the user to choose a file from the file picker and then tests to see whether the handle returned is a file or directory
    
    // store a reference to our file handle
    let fileHandle;
    
    async function getFile() {
      // open file picker
      [fileHandle] = await window.showOpenFilePicker();
    
      if (fileHandle.kind === "file") {
        // run file code
      } else if (fileHandle.kind === "directory") {
        // run directory code
      }
    }
    
### Query/Request Permissions
The following asynchronous function returns true if user has granted read or readwrite permissions to the file handle. Permission is requested if not.
    
    // fileHandle is a FileSystemFileHandle
    // withWrite is a boolean set to true if write
    
    async function verifyPermission(fileHandle, withWrite) {
      const opts = {};
      if (withWrite) {
        opts.mode = "readwrite";
      }
    
      // Check if we already have permission, if so, return true.
      if ((await fileHandle.queryPermission(opts)) === "granted") {
        return true;
      }
    
      // Request permission to the file, if the user grants permission, return true.
      if ((await fileHandle.requestPermission(opts)) === "granted") {
        return true;
      }
    
      // The user did not grant permission, return false.
      return false;
    }
    
### Comparing Entries
The following function compares a single entry with an array of entries, and returns a new array with any matching entries removed.
    
    function removeMatches(fileEntry, entriesArr) {
      const newArr = entriesArr.filter((entry) => !fileEntry.isSameEntry(entry));
    
      return newArr;
    }
    
  * File System API
  * The File System Access API: simplifying access to local files


# HTMLAreaElement
The `HTMLAreaElement` interface provides special properties and methods (beyond those of the regular object `HTMLElement` interface it also has available to it by inheritance) for manipulating the layout and presentation of `<area>` elements.
EventTarget  Node  Element  HTMLElement  HTMLAreaElement 
## Instance properties
Inherits properties from its parent `HTMLElement`.
`HTMLAreaElement.alt`
    
A string that reflects the `alt` HTML attribute, containing alternative text for the element.
`HTMLAreaElement.coords`
    
A string that reflects the `coords` HTML attribute, containing coordinates to define the hot-spot region.
`HTMLAreaElement.download`
    
A string indicating that the linked resource is intended to be downloaded rather than displayed in the browser. The value represent the proposed name of the file. If the name is not a valid filename of the underlying OS, browser will adjust it accordingly.
`HTMLAreaElement.hash`
    
A string containing the fragment identifier (including the leading hash mark (#)), if any, in the referenced URL.
`HTMLAreaElement.host`
    
A string containing the hostname and port (if it's not the default port) in the referenced URL.
`HTMLAreaElement.hostname`
    
A string containing the hostname in the referenced URL.
`HTMLAreaElement.href`
    
A string containing that reflects the `href` HTML attribute, containing a valid URL of a linked resource.
`HTMLAreaElement.noHref` Deprecated
    
A boolean flag indicating if the area is inactive (`true`) or active (`false`).
`HTMLAreaElement.origin` Read only
    
Returns a string containing the origin of the URL, that is its scheme, its domain and its port.
`HTMLAreaElement.password`
    
A string containing the password specified before the domain name.
`HTMLAreaElement.pathname`
    
A string containing the path name component, if any, of the referenced URL.
`HTMLAreaElement.ping`
    
A space-separated list of URLs. When the link is followed, the browser will send `POST` requests with the body PING to the URLs.
`HTMLAreaElement.port`
    
A string containing the port component, if any, of the referenced URL.
`HTMLAreaElement.protocol`
    
A string containing the protocol component (including trailing colon `':'`), of the referenced URL.
`HTMLAreaElement.referrerPolicy`
    
A string that reflects the `referrerpolicy` HTML attribute indicating which referrer to use when fetching the linked resource.
`HTMLAreaElement.rel`
    
A string that reflects the `rel` HTML attribute, indicating relationships of the current document to the linked resource.
`HTMLAreaElement.relList` Read only
    
Returns a `DOMTokenList` that reflects the `rel` HTML attribute, indicating relationships of the current document to the linked resource, as a list of tokens.
`HTMLAreaElement.search`
    
A string containing the search element (including leading question mark `'?'`), if any, of the referenced URL.
`HTMLAreaElement.shape`
    
A string that reflects the `shape` HTML attribute, indicating the shape of the hot-spot, limited to known values.
`HTMLAreaElement.target`
    
A string that reflects the `target` HTML attribute, indicating the browsing context in which to open the linked resource.
`HTMLAreaElement.username`
    
A string containing the username specified before the domain name.
## Instance methods
Inherits methods from its parent, `HTMLElement`.
`HTMLAreaElement.toString()`
    
Returns a string containing the whole URL. It is a synonym for `HTMLAreaElement.href`.
  * HTML element implementing this interface: `<area>`


# SVGStringList
The `SVGStringList` interface defines a list of strings.
An `SVGStringList` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
An `SVGStringList` object is indexable and can be accessed like an array.
## Instance properties
`length`
    
The number of items in the list.
`numberOfItems`
    
The number of items in the list.
## Instance methods
`appendItem()`
    
Inserts a new item at the end of the list.
`clear()`
    
Clears all existing items from the list, with the result being an empty list.
`initialize()`
    
Clears all existing items from the list and re-initializes the list to hold the single item specified by the parameter.
`getItem()`
    
Returns the specified item from the list.
`insertItemBefore()`
    
Inserts a new item into the list at the specified position.
`removeItem()`
    
Removes an existing item from the list.
`replaceItem()`
    
Replaces an existing item in the list with a new item.
# NDEFReadingEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `NDEFReadingEvent` interface of the Web NFC API represents events dispatched on new NFC readings obtained by `NDEFReader`.
Event  NDEFReadingEvent 
## Constructor
`NDEFReadingEvent.NDEFReadingEvent()` Experimental
    
Creates a new `NDEFReadingEvent`.
## Instance properties
Inherits properties from its parent, `Event`.
`NDEFReadingEvent.message` Read only Experimental
    
Returns an `NDEFMessage` object containing the received message.
`NDEFReadingEvent.serialNumber` Read only Experimental
    
Returns the serial number of the device, which is used for anti-collision and identification, or an empty string if no serial number is available.
## Instance methods
Inherits methods from its parent, `Event`.
# RTCIdentityAssertion
The `RTCIdentityAssertion` interface of the WebRTC API represents the identity of a remote peer of the current connection. If no peer has yet been set and verified, then this interface returns `null`. Once set it can't be changed.
## Instance properties
`RTCIdentityAssertion.idp` Experimental
    
Indicates the provider of the identity assertion.
`RTCIdentityAssertion.name` Experimental
    
Indicates the name of the identity assertion provider.
# GPUBuffer
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUBuffer` interface of the WebGPU API represents a block of memory that can be used to store raw data to use in GPU operations.
A `GPUBuffer` object instance is created using the `GPUDevice.createBuffer()` method.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
`mapState` Read only
    
An enumerated value representing the mapped state of the `GPUBuffer`.
`size` Read only
    
A number representing the length of the `GPUBuffer`'s memory allocation, in bytes.
`usage` Read only
    
The bitwise flags representing the allowed usages of the `GPUBuffer`.
## Instance methods
`destroy()`
    
Destroys the `GPUBuffer`.
`getMappedRange()`
    
Returns an `ArrayBuffer` containing the mapped contents of the `GPUBuffer` in the specified range.
`mapAsync()`
    
Maps the specified range of the `GPUBuffer`. Returns a `Promise` that resolves when the `GPUBuffer`'s content is ready to be accessed with `GPUBuffer.getMappedRange()`.
`unmap()`
    
Unmaps the mapped range of the `GPUBuffer`, making its contents available for use by the GPU again.
## Examples
In our basic compute demo, we create an output buffer to read GPU calculations to, and a staging buffer to be mapped for JavaScript access.
    
    const output = device.createBuffer({
      size: BUFFER_SIZE,
      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
    });
    
    const stagingBuffer = device.createBuffer({
      size: BUFFER_SIZE,
      usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
    });
    
Later on, once the `stagingBuffer` contains the results of the GPU computation, a combination of `GPUBuffer` methods are used to read the data back to JavaScript so that it can then be logged to the console:
  * `GPUBuffer.mapAsync()` is used to map the `GPUBuffer` for reading.
  * `GPUBuffer.getMappedRange()` is used to return an `ArrayBuffer` containing the `GPUBuffer`'s contents.
  * `GPUBuffer.unmap()` is used to unmap the `GPUBuffer` again, once we have read the content into JavaScript as needed.


    
    // map staging buffer to read results back to JS
    await stagingBuffer.mapAsync(
      GPUMapMode.READ,
      0, // Offset
      BUFFER_SIZE, // Length
    );
    
    const copyArrayBuffer = stagingBuffer.getMappedRange(0, BUFFER_SIZE);
    const data = copyArrayBuffer.slice(0);
    stagingBuffer.unmap();
    console.log(new Float32Array(data));
    
  * The WebGPU API


# AesCtrParams
The `AesCtrParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.encrypt()`, `SubtleCrypto.decrypt()`, `SubtleCrypto.wrapKey()`, or `SubtleCrypto.unwrapKey()`, when using the AES-CTR algorithm.
AES is a block cipher, meaning that it splits the message into blocks and encrypts it a block at a time. In CTR mode, every time a block of the message is encrypted, an extra block of data is mixed in. This extra block is called the "counter block".
A given counter block value must never be used more than once with the same key:
  * Given a message n blocks long, a different counter block must be used for every block.
  * If the same key is used to encrypt more than one message, a different counter block must be used for all blocks across all messages.


Typically this is achieved by splitting the initial counter block value into two concatenated parts:
  * A nonce (that is, a number that may only be used once). The nonce part of the block stays the same for every block in the message. Each time a new message is to be encrypted, a new nonce is chosen. Nonces don't have to be secret, but they must not be reused with the same key.
  * A counter. This part of the block gets incremented each time a block is encrypted.


Essentially: the nonce should ensure that counter blocks are not reused from one message to the next, while the counter should ensure that counter blocks are not reused within a single message.
Note: See Appendix B of the NIST SP800-38A standard for more information.
## Instance properties
`name`
    
A string. This should be set to `AES-CTR`.
`counter`
    
An `ArrayBuffer`, a `TypedArray`, or a `DataView` — the initial value of the counter block. This must be 16 bytes long (the AES block size). The rightmost `length` bits of this block are used for the counter, and the rest is used for the nonce. For example, if `length` is set to 64, then the first half of `counter` is the nonce and the second half is used for the counter.
`length`
    
A `Number` — the number of bits in the counter block that are used for the actual counter. The counter must be big enough that it doesn't wrap: if the message is `n` blocks and the counter is `m` bits long, then the following must be true: `n <= 2^m`. The NIST SP800-38A standard, which defines CTR, suggests that the counter should occupy half of the counter block (see Appendix B.2), so for AES it would be 64.
## Examples
See the examples for `SubtleCrypto.encrypt()` and `SubtleCrypto.decrypt()`.
Browsers that support the "AES-CTR" algorithm for the `SubtleCrypto.encrypt()`, `SubtleCrypto.decrypt()`, `SubtleCrypto.wrapKey()`, or `SubtleCrypto.unwrapKey()` methods will support this type.
  * CTR mode is defined in section 6.5 of the NIST SP800-38A standard.
  * `SubtleCrypto.encrypt()`.
  * `SubtleCrypto.decrypt()`.
  * `SubtleCrypto.wrapKey()`.
  * `SubtleCrypto.unwrapKey()`.


# USBIsochronousInTransferResult
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USBIsochronousInTransferResult` interface of the WebUSB API provides the result from a call to the `isochronousTransferIn()` method of the `USBDevice` interface. It represents the result from requesting a transfer of data from the USB device to the USB host.
## Constructor
`USBIsochronousInTransferResult()` Experimental
    
Creates a new `USBIsochronousInTransferResult` object with the provided `packets` and `data` fields.
## Instance properties
`USBIsochronousInTransferResult.data` Read only Experimental
    
Returns a `DataView` object containing the data received from the device. This is the combined data from all packets. See the individual `DataView` objects in the `packets` array for the portion of this buffer containing data from each packet.
`USBIsochronousInTransferResult.packets` Read only Experimental
    
Returns an array of `USBIsochronousInTransferPacket` objects containing the result of each request to receive a packet from the device.
# PressureRecord
Note: This feature is available in Web Workers, except for Service Workers.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PressureRecord` interface is part of the Compute Pressure API and describes the pressure trend of a source at a specific moment of transition.
## Instance properties
`PressureRecord.source` Read only Experimental
    
A string indicating the origin source from which the record is coming.
`PressureRecord.state` Read only Experimental
    
A string indicating the pressure state recorded.
`PressureRecord.time` Read only Experimental
    
A `DOMHighResTimeStamp` indicating the timestamp of the record.
## Instance methods
`PressureRecord.toJSON()` Experimental
    
Returns a JSON representation of the `PressureRecord` object.
## Examples
>
### Using the `PressureRecord` object
In the following example we log the properties of the `PressureRecord` object in the pressure observer callback.
    
    function callback(records) {
      const lastRecord = records[records.length - 1];
      console.log(`Current pressure is ${lastRecord.state}`);
      console.log(`Current pressure observed at ${lastRecord.time}`);
      console.log(`Current pressure source: ${lastRecord.source}`);
    }
    
    try {
      const observer = new PressureObserver(callback);
      await observer.observe("cpu", {
        sampleInterval: 1000, // 1000ms
      });
    } catch (error) {
      // report error setting up the observer
    }
    
# SVGAnimatedInteger
The `SVGAnimatedInteger` interface is used for attributes of basic type <integer> which can be animated.
## Instance properties
`baseVal`
    
An integer representing the base value of the given attribute before applying any animations.
`animVal` Read only
    
An integer representing the current animated value of the given attribute. If the given attribute is not currently being animated, then it contains the same value as `baseVal`.
## Instance methods
The `SVGAnimatedInteger` interface does not provide any specific methods.
# IDBCursorWithValue
Note: This feature is available in Web Workers.
The `IDBCursorWithValue` interface of the IndexedDB API represents a cursor for traversing or iterating over multiple records in a database. It is the same as the `IDBCursor`, except that it includes the `value` property.
The cursor has a source that indicates which index or object store it is iterating over. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. The cursor enables an application to asynchronously process all the records in the cursor's range.
You can have an unlimited number of cursors at the same time. You always get the same `IDBCursorWithValue` object representing a given cursor. Operations are performed on the underlying index or object store.
IDBCursor  IDBCursorWithValue 
## Instance methods
Inherits methods from its parent interface, `IDBCursor`.
## Instance properties
Inherits properties from its parent interface, `IDBCursor`.
`IDBCursorWithValue.value` Read only
    
Returns the value of the current cursor.
## Example
In this example we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. The cursor does not require us to select the data based on a key; we can just grab all of it. Also note that in each iteration of the loop, you can grab data from the current record under the cursor object using `cursor.value.foo`. For a complete working example, see our IDBCursor example (view example live.)
    
    function displayData() {
      const transaction = db.transaction(["rushAlbumList"], "readonly");
      const objectStore = transaction.objectStore("rushAlbumList");
    
      objectStore.openCursor().onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
          const listItem = document.createElement("li");
          listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
          list.appendChild(listItem);
    
          cursor.continue();
        } else {
          console.log("Entries all displayed.");
        }
      };
    }
    
  * Using IndexedDB
  * Starting transactions: `IDBDatabase`
  * Using transactions: `IDBTransaction`
  * Setting a range of keys: `IDBKeyRange`
  * Retrieving and making changes to your data: `IDBObjectStore`
  * Using cursors: `IDBCursor`
  * Reference example: To-do Notifications (View the example live).


# CSSMathNegate
The `CSSMathNegate` interface of the CSS Typed Object Model API negates the value passed into it. It inherits properties and methods from its parent `CSSNumericValue`.
CSSStyleValue  CSSNumericValue  CSSMathValue  CSSMathNegate 
## Constructor
`CSSMathNegate()`
    
Creates a new `CSSMathNegate` object.
## Instance properties
`CSSMathNegate.value` Read only
    
Returns a `CSSNumericValue` object.
## Static methods
The interface may also inherit methods from its parent interface, `CSSMathValue`.
## Instance methods
The interface may also inherit methods from its parent interface, `CSSMathValue`.
## Examples
To do
# User-Agent Client Hints API
The User-Agent Client Hints API extends Client Hints to provide a way of exposing browser and platform information via User-Agent response and request headers, and a JavaScript API.
## Concepts and Usage
Parsing the User-Agent string has historically been the way to get information about the user's browser or device. A typical user agent string looks like the following example, identifying Chrome 92 on Windows:
    
    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36
    
User agent Client Hints aims to provide this information in a more privacy-preserving way by enforcing a model where the server requests a set of information. The browser decides what to return. This approach means that a user-agent could provide settings that allow a user to hide some of the information that could fingerprint them from such requests.
In order to decide what to return, the information accessed via this API is split into two groups—low entropy and high entropy hints. Low entropy hints are those that do not give away much information, the API makes these easily accessible with every request. High entropy hints have the potential to give away more information and therefore are gated in such a way that the browser can make a decision as to whether to provide them. This decision could potentially be based on user preferences, or behind a permission request.
### Use cases for User-Agent Client Hints
Potential use cases include:
  * Providing custom-tailored polyfills to users on identifying that their browser lacked some web platform feature.
  * Working around browser bugs.
  * Recording browser analytics.
  * Adapting content based on user-agent information. This includes serving different content to mobile devices, in particular devices identified as low-powered. It might also include adapting the design to tailor the interfaces to the user's OS, or providing links to OS-specific ones.
  * Providing a notification when a user logs in from a different browser or device, as a security feature.
  * Providing the correct binary executable, on a site offering a download.
  * Collecting information about the browser and device to identify application errors.
  * Blocking spammers, bots, and crawlers.


## Interfaces
`NavigatorUAData`
    
Provides properties and methods to access data about the user's browser and operating system.
### Extensions to other interfaces
`Navigator.userAgentData` Read only
    
Returns a `NavigatorUAData` object, which gives access to information about the browser and operating system of the user.
`WorkerNavigator.userAgentData` Read only
    
Returns a `NavigatorUAData` object, which gives access to information about the browser and operating system of the user.
## Examples
>
### Getting the brands
The following example prints the value of `NavigatorUAData.brands` to the console.
    
    console.log(navigator.userAgentData.brands);
    
### Returning high entropy values
In the following example a number of hints are requested using the `NavigatorUAData.getHighEntropyValues()` method. When the promise resolves, this information is printed to the console.
    
    navigator.userAgentData
      .getHighEntropyValues([
        "architecture",
        "model",
        "platform",
        "platformVersion",
        "fullVersionList",
      ])
      .then((ua) => {
        console.log(ua);
      });
    
>
### api.NavigatorUAData
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`User-Agent_Client_Hints_API` 90 90 No 76 No 90 No 64 No No No No  
`brands` 90 90 No 76 No 90 No 64 No No No No  
`getHighEntropyValues` 90 90 No 76 No 90 No 64 No No No No  
`mobile` 90 90 No 76 No 90 No 64 No No No No  
`platform` 93 93 No 79 No 93 No 66 No No No No  
`toJSON` 93 93 No 79 No 93 No 66 No No No No  
### api.Navigator.userAgentData
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`User-Agent_Client_Hints_API` 90 90 No 76 No 90 No 64 No 15.0 119 No  
`secure_context_required` 90 90 No 76 No 90 No 64 No 15.0 119 No  
### api.WorkerNavigator.userAgentData
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`User-Agent_Client_Hints_API` 90 90 No 76 No 90 No 64 No 15.0 No No  
  * Improving user privacy and developer experience with User-Agent Client Hints
  * Migrate to User-Agent Client Hints


# BarcodeDetector
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `BarcodeDetector` interface of the Barcode Detection API allows detection of linear and two dimensional barcodes in images.
## Constructors
`BarcodeDetector.BarcodeDetector()` Experimental
    
Creates and returns a `BarcodeDetector` object, with optional `BarcodeDetectorOptions`.
## Static methods
`getSupportedFormats()` Experimental
    
Returns a `Promise` which fulfills with an `Array` of supported barcode format types.
## Instance methods
`detect()` Experimental
    
Returns a `Promise` which fulfills with an array of `DetectedBarcode` objects with the following properties:
  * `boundingBox`: A `DOMRectReadOnly`, which returns the dimensions of a rectangle representing the extent of a detected barcode, aligned with the image.
  * `cornerPoints`: The x and y co-ordinates of the four corner points of the detected barcode relative to the image, starting with the top left and working clockwise. This may not be square due to perspective distortions within the image.
  * `format`: The detected barcode format. (For a full list of formats, consult the supported barcode format) list.
  * `rawValue`: A string decoded from the barcode data.


## Examples
>
### Creating A Detector
This example creates a new barcode detector object, with specified supported formats and tests for browser compatibility.
    
    // check compatibility
    if (!("BarcodeDetector" in globalThis)) {
      console.log("Barcode Detector is not supported by this browser.");
    } else {
      console.log("Barcode Detector supported!");
    
      // create new detector
      const barcodeDetector = new BarcodeDetector({
        formats: ["code_39", "codabar", "ean_13"],
      });
    }
    
### Getting Supported Formats
The following example calls the `getSupportFormat()` static method and logs the results to the console.
    
    // check supported types
    BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
      supportedFormats.forEach((format) => console.log(format));
    });
    
### Detect Barcodes
This example uses the `detect()` method to detect the barcodes within the given image. These are iterated over and the barcode data is logged to the console.
    
    barcodeDetector
      .detect(imageEl)
      .then((barcodes) => {
        barcodes.forEach((barcode) => console.log(barcode.rawValue));
      })
      .catch((err) => {
        console.log(err);
      });
    
  * barcodefaq.com: A website with information about different barcodes and examples of the different types.
  * Accelerated Shape Detection in Images


# DocumentType
The `DocumentType` interface represents a `Node` containing a doctype.
EventTarget  Node  DocumentType 
## Instance properties
Inherits properties from its parent, `Node`.
`DocumentType.name` Read only
    
The type of the document. It is always `"html"` for HTML documents, but will vary for XML documents.
`DocumentType.publicId` Read only
    
A string with an identifier of the type of document. Empty if the doctype given specifies no public ID.
`DocumentType.systemId` Read only
    
A string containing the URL to the associated DTD. Empty if the doctype given specifies no system ID.
## Instance methods
Inherits methods from its parent, `Node`.
`DocumentType.after()`
    
Inserts a set of `Node` objects or strings in the children list of the object's parent, just after this node.
`DocumentType.before()`
    
Inserts a set of `Node` objects or strings in the children list of the object's parent, just before this node.
`DocumentType.remove()`
    
Removes this object from its parent children list.
`DocumentType.replaceWith()`
    
Replaces the document type with a set of given nodes.
  * The DOM interfaces index.
  * `DOMImplementation.createDocumentType()` to create a new `DocumentType` node.


# CSSTranslate
The `CSSTranslate` interface of the CSS Typed Object Model API represents the translate() value of the individual `transform` property in CSS. It inherits properties and methods from its parent `CSSTransformValue`.
CSSTransformComponent  CSSTranslate 
## Constructor
`CSSTranslate()`
    
Creates a new `CSSTranslate` object.
## Instance properties
`x`
    
Returns or sets the x-axis value.
`y`
    
Returns or sets the y-axis value.
`z`
    
Returns or sets the z-axis value.
## Examples
To do.
# CustomStateSet
The `CustomStateSet` interface of the Document Object Model stores a list of states for an autonomous custom element, and allows states to be added and removed from the set.
The interface can be used to expose the internal states of a custom element, allowing them to be used in CSS selectors by code that uses the element.
## Instance properties
`CustomStateSet.size`
    
Returns the number of values in the `CustomStateSet`.
## Instance methods
`CustomStateSet.add()`
    
Adds a value to the set.
`CustomStateSet.clear()`
    
Removes all elements from the `CustomStateSet` object.
`CustomStateSet.delete()`
    
Removes one value from the `CustomStateSet` object.
`CustomStateSet.entries()`
    
Returns a new iterator with the values for each element in the `CustomStateSet` in insertion order.
`CustomStateSet.forEach()`
    
Executes a provided function for each value in the `CustomStateSet` object.
`CustomStateSet.has()`
    
Returns a `Boolean` asserting whether an element is present with the given value.
`CustomStateSet.keys()`
    
An alias for `CustomStateSet.values()`.
`CustomStateSet.values()`
    
Returns a new iterator object that yields the values for each element in the `CustomStateSet` object in insertion order.
## Description
Built in HTML elements can have different states, such as "enabled" and "disabled, "checked" and "unchecked", "initial", "loading" and "ready". Some of these states are public and can be set or queried using properties/attributes, while others are effectively internal, and cannot be directly set. Whether external or internal, element states can generally be selected and styled using CSS pseudo-classes as selectors.
The `CustomStateSet` allows developers to add and delete states for autonomous custom elements (but not elements derived from built-in elements). These states can then be used as custom state pseudo-class selectors in a similar way to the pseudo-classes for built-in elements.
### Setting custom element states
To make the `CustomStateSet` available, a custom element must first call `HTMLElement.attachInternals()` in order to attach an `ElementInternals` object. `CustomStateSet` is then returned by `ElementInternals.states`. Note that `ElementInternals` cannot be attached to a custom element based on a built-in element, so this feature only works for autonomous custom elements (see github.com/whatwg/html/issues/5166).
The `CustomStateSet` instance is a `Set`-like object that can hold an ordered set of state values. Each value is a custom identifier. Identifiers can be added to the set or deleted. If an identifier is present in the set the particular state is `true`, while if it is removed the state is `false`.
Custom elements that have states with more than two values can represent them with multiple boolean states, only one of which is `true` (present in the `CustomStateSet`) at a time.
The states can be used within the custom element but are not directly accessible outside of the custom component.
### Interaction with CSS
You can select a custom element that is in a specific state using the `:state()` custom state pseudo-class. The format of this pseudo-class is `:state(my-state-name)`, where `my-state-name` is the state as defined in the element. The custom state pseudo-class matches the custom element only if the state is `true` (i.e., if `my-state-name` is present in the `CustomStateSet`).
For example, the following CSS matches a `labeled-checkbox` custom element when the element's `CustomStateSet` contains the `checked` state, and applies a `solid` border to the checkbox:
    
    labeled-checkbox:state(checked) {
      border: solid;
    }
    
CSS can also be used to match a custom state within a custom element's shadow DOM by specifying `:state()` within the `:host()` pseudo-class function.
Additionally, the `:state()` pseudo-class can be used after the `::part()` pseudo-element to match the shadow parts of a custom element that are in a particular state.
Warning: Browsers that do not yet support `:state()` will use a CSS `<dashed-ident>` for selecting custom states, which is now deprecated. For information about how to support both approaches see the Compatibility with `<dashed-ident>` syntax section below.
## Examples
>
### Matching the custom state of a custom checkbox element
This example, which is adapted from the specification, demonstrates a custom checkbox element that has an internal "checked" state. This is mapped to the `checked` custom state, allowing styling to be applied using the `:state(checked)` custom state pseudo class.
#### JavaScript
First we define our class `LabeledCheckbox` which extends from `HTMLElement`. In the constructor we call the `super()` method, add a listener for the click event, and call `this.attachInternals()` to attach an `ElementInternals` object.
Most of the rest of the "work" is then left to `connectedCallback()`, which is invoked when a custom element is added to the page. The content of the element is defined using a `<style>` element to be the text `[]` or `[x]` followed by a label. What's noteworthy here is that the custom state pseudo class is used to select the text to display: `:host(:state(checked))`. After the example below, we'll cover what's happening in the snippet in more detail.
    
    class LabeledCheckbox extends HTMLElement {
      constructor() {
        super();
        this._boundOnClick = this._onClick.bind(this);
        this.addEventListener("click", this._boundOnClick);
    
        // Attach an ElementInternals to get states property
        this._internals = this.attachInternals();
      }
    
      connectedCallback() {
        const shadowRoot = this.attachShadow({ mode: "open" });
        shadowRoot.innerHTML = `<style>
      :host {
        display: block;
      }
      :host::before {
        content: "[ ]";
        white-space: pre;
        font-family: monospace;
      }
      :host(:state(checked))::before {
        content: "[x]";
      }
    </style>
    <slot>Label</slot>
    `;
      }
    
      get checked() {
        return this._internals.states.has("checked");
      }
    
      set checked(flag) {
        if (flag) {
          this._internals.states.add("checked");
        } else {
          this._internals.states.delete("checked");
        }
      }
    
      _onClick(event) {
        // Toggle the 'checked' property when the element is clicked
        this.checked = !this.checked;
      }
    
      static isStateSyntaxSupported() {
        return CSS.supports("selector(:state(checked))");
      }
    }
    
    customElements.define("labeled-checkbox", LabeledCheckbox);
    
    // Display a warning to unsupported browsers
    if (!LabeledCheckbox.isStateSyntaxSupported()) {
      if (!document.getElementById("state-warning")) {
        const warning = document.createElement("div");
        warning.id = "state-warning";
        warning.style.color = "red";
        warning.textContent = "This feature is not supported by your browser.";
        document.body.insertBefore(warning, document.body.firstChild);
      }
    }
    
In the `LabeledCheckbox` class:
  * In the `get checked()` and `set checked()` we use `ElementInternals.states` to get the `CustomStateSet`.
  * The `set checked(flag)` method adds the `"checked"` identifier to the `CustomStateSet` if the flag is set and delete the identifier if the flag is `false`.
  * The `get checked()` method just checks whether the `checked` property is defined in the set.
  * The property value is toggled when the element is clicked.


We then call the `define()` method on the object returned by `Window.customElements` in order to register the custom element:
    
    customElements.define("labeled-checkbox", LabeledCheckbox);
    
#### HTML
After registering the custom element we can use the element in HTML as shown:
    
    <labeled-checkbox>You need to check this</labeled-checkbox>
    
#### CSS
Finally we use the `:state(checked)` custom state pseudo class to select CSS for when the box is checked.
    
    labeled-checkbox {
      border: dashed red;
    }
    labeled-checkbox:state(checked) {
      border: solid;
    }
    
#### Result
Click the element to see a different border being applied as the checkbox `checked` state is toggled.
### Matching a custom state in a shadow part of a custom element
This example, which is adapted from the specification, demonstrates that custom states can be used to target the shadow parts of a custom element for styling. Shadow parts are sections of the shadow tree that are intentionally exposed to pages that use the custom element.
The example creates a `<question-box>` custom element that displays a question prompt along with a checkbox labeled "Yes". The element uses the `<labeled-checkbox>` defined in the previous example for the checkbox.
#### JavaScript
First, we define the custom element class `QuestionBox`, which extends `HTMLElement`. As always, the constructor first calls the `super()` method. Next, we attach a shadow DOM tree to the custom element by calling `attachShadow()`.
    
    class QuestionBox extends HTMLElement {
      constructor() {
        super();
        const shadowRoot = this.attachShadow({ mode: "open" });
        shadowRoot.innerHTML = `<div><slot>Question</slot></div>
    <labeled-checkbox part="checkbox">Yes</labeled-checkbox>
    `;
      }
    }
    
The content of the shadow root is set using `innerHTML`. This defines a `<slot>` element that contains the default prompt text "Question" for the element. We then define a `<labeled-checkbox>` custom element with the default text `"Yes"`. This checkbox is exposed as a shadow part of the question box with the name `checkbox` using the `part` attribute.
Note that the code and styling for the `<labeled-checkbox>` element are exactly the same as in the previous example, and are therefore not repeated here.
Next, we call the `define()` method on the object returned by `Window.customElements` to register the custom element with the name `question-box`:
    
    customElements.define("question-box", QuestionBox);
    
#### HTML
After registering the custom element, we can use the element in HTML as shown below.
    
    <!-- Question box with default prompt "Question" -->
    <question-box></question-box>
    
    <!-- Question box with custom prompt "Continue?" -->
    <question-box>Continue?</question-box>
    
#### CSS
The first block of CSS matches the exposed shadow part named `checkbox` using the `::part()` selector, styling it to be `red` by default.
    
    question-box::part(checkbox) {
      color: red;
    }
    
The second block follows `::part()` with `:state()`, in order to match `checkbox` parts that are in the `checked` state:
    
    question-box::part(checkbox):state(checked) {
      color: green;
      outline: dashed 1px green;
    }
    
#### Result
Click either of the checkboxes to see the color change from `red` to `green` with an outline when the `checked` state toggles.
### Non-boolean internal states
This example shows how to handle the case where the custom element has an internal property with multiple possible value.
The custom element in this case has a `state` property with allowed values: "loading", "interactive" and "complete". To make this work, we map each value to its custom state and create code to ensure that only the identifier corresponding to the internal state is set. You can see this in the implementation of the `set state()` method: we set the internal state, add the identifier for the matching custom state to `CustomStateSet`, and remove the identifiers associated with all the other values.
Most of the remaining code is similar to the example that demonstrates a single boolean state (we show different text for each state as the user toggles through them).
#### JavaScript
    
    class ManyStateElement extends HTMLElement {
      constructor() {
        super();
        this._boundOnClick = this._onClick.bind(this);
        this.addEventListener("click", this._boundOnClick);
        // Attach an ElementInternals to get states property
        this._internals = this.attachInternals();
      }
    
      connectedCallback() {
        this.state = "loading";
    
        const shadowRoot = this.attachShadow({ mode: "open" });
        shadowRoot.innerHTML = `<style>
      :host {
        display: block;
        font-family: monospace;
      }
      :host::before {
        content: "[ unknown ]";
        white-space: pre;
      }
      :host(:state(loading))::before {
        content: "[ loading ]";
      }
      :host(:state(interactive))::before {
        content: "[ interactive ]";
      }
      :host(:state(complete))::before {
        content: "[ complete ]";
      }
    </style>
    <slot>Click me</slot>
    `;
      }
    
      get state() {
        return this._state;
      }
    
      set state(stateName) {
        // Set internal state to passed value
        // Add identifier matching state and delete others
        if (stateName === "loading") {
          this._state = "loading";
          this._internals.states.add("loading");
          this._internals.states.delete("interactive");
          this._internals.states.delete("complete");
        } else if (stateName === "interactive") {
          this._state = "interactive";
          this._internals.states.delete("loading");
          this._internals.states.add("interactive");
          this._internals.states.delete("complete");
        } else if (stateName === "complete") {
          this._state = "complete";
          this._internals.states.delete("loading");
          this._internals.states.delete("interactive");
          this._internals.states.add("complete");
        }
      }
    
      _onClick(event) {
        // Cycle the state when element clicked
        if (this.state === "loading") {
          this.state = "interactive";
        } else if (this.state === "interactive") {
          this.state = "complete";
        } else if (this.state === "complete") {
          this.state = "loading";
        }
      }
    
      static isStateSyntaxSupported() {
        return CSS.supports("selector(:state(loading))");
      }
    }
    
    customElements.define("many-state-element", ManyStateElement);
    
    if (!LabeledCheckbox.isStateSyntaxSupported()) {
      if (!document.getElementById("state-warning")) {
        const warning = document.createElement("div");
        warning.id = "state-warning";
        warning.style.color = "red";
        warning.textContent = "This feature is not supported by your browser.";
        document.body.insertBefore(warning, document.body.firstChild);
      }
    }
    
#### HTML
After registering the new element we add it to the HTML. This is similar to the example that demonstrates a single boolean state, except we don't specify a value and use the default value from the slot (`<slot>Click me</slot>`).
    
    <many-state-element></many-state-element>
    
#### CSS
In the CSS we use the three custom state pseudo classes to select CSS for each of the internal state values: `:state(loading)`, `:state(interactive)`, `:state(complete)`. Note that the custom element code ensures that only one of these custom states can be defined at a time.
    
    many-state-element:state(loading) {
      border: dotted grey;
    }
    many-state-element:state(interactive) {
      border: dashed blue;
    }
    many-state-element:state(complete) {
      border: solid green;
    }
    
#### Results
Click the element to see a different border being applied as the state changes.
## Compatibility with `<dashed-ident>` syntax
Previously custom elements with custom states were selected using a `<dashed-ident>` instead of the `:state()` function. Browser versions that don't support `:state()` will throw an error when supplied with an ident that is not prefixed with the double dash. If support for these browsers is required, either use a try...catch block to support both syntaxes, or use a `<dashed-ident>` as the state's value and select it with both the `:--my-state` and `:state(--my-state)` CSS selector.
### Using a try...catch block
This code shows how you can use `try...catch` to attempt adding a state identifier that does not use a `<dashed-ident>`, and fall back to `<dashed-ident>` if an error is thrown.
#### JavaScript
    
    class CompatibleStateElement extends HTMLElement {
      constructor() {
        super();
        this._internals = this.attachInternals();
      }
    
      connectedCallback() {
        // The double dash is required in browsers with the
        // legacy syntax, not supplying it will throw
        try {
          this._internals.states.add("loaded");
        } catch {
          this._internals.states.add("--loaded");
        }
      }
    }
    
#### CSS
    
    compatible-state-element:is(:--loaded, :state(loaded)) {
      border: solid green;
    }
    
### Using double dash prefixed idents
An alternative solution can be to use the `<dashed-ident>` within JavaScript. The downside to this approach is that the dashes must be included when using the CSS `:state()` syntax.
#### JavaScript
    
    class CompatibleStateElement extends HTMLElement {
      constructor() {
        super();
        this._internals = this.attachInternals();
      }
      connectedCallback() {
        // The double dash is required in browsers with the
        // legacy syntax, but works with the modern syntax
        this._internals.states.add("--loaded");
      }
    }
    
#### CSS
    
    compatible-state-element:is(:--loaded, :state(--loaded)) {
      border: solid green;
    }
    
Using custom elements
# BlobEvent
The `BlobEvent` interface of the MediaStream Recording API represents events associated with a `Blob`. These blobs are typically, but not necessarily, associated with media content.
Event  BlobEvent 
## Constructor
`BlobEvent()`
    
Creates a `BlobEvent` event with the given parameters.
## Instance properties
Inherits properties from its parent `Event`.
`BlobEvent.data` Read only
    
A `Blob` representing the data associated with the event. The event was fired on the `EventTarget` because of something happening on that specific `Blob`.
`BlobEvent.timecode` Read only
    
A `DOMHighResTimeStamp` indicating the difference between the timestamp of the first chunk in data and the timestamp of the first chunk in the first BlobEvent produced by this recorder. Note that the timecode in the first produced BlobEvent does not need to be zero.
## Instance methods
No specific method; inherits methods from its parent `Event`.
  * The `Event` base interface.
  * MediaStream Recording API: Sends `BlobEvent` objects each time a chunk of media is ready.
  * Using the MediaStream Recording API


# ProgressEvent
Note: This feature is available in Web Workers.
The `ProgressEvent` interface represents events that measure the progress of an underlying process, like an HTTP request (e.g., an `XMLHttpRequest`, or the loading of the underlying resource of an `<img>`, `<audio>`, `<video>`, `<style>` or `<link>`).
Event  ProgressEvent 
## Constructor
`ProgressEvent()`
    
Creates a `ProgressEvent` event with the given parameters.
## Instance properties
Also inherits properties from its parent `Event`.
`ProgressEvent.lengthComputable` Read only
    
A boolean flag indicating if the ratio between the size of the data already transmitted or processed (`loaded`), and the total size of the data (`total`), is calculable. In other words, it tells if the progress is measurable or not.
`ProgressEvent.loaded` Read only
    
A number indicating the size of the data already transmitted or processed. For a `ProgressEvent` dispatched by the browser in HTTP messages, the value refers to the size, in bytes, of the message body, excluding headers and other overhead. In compressed messages of unknown total size, `loaded` might refer to the size of the compressed or uncompressed data, depending on the browser. As of 2024, it contains the size of the compressed data in Firefox, and the uncompressed data in Chrome. In a `ProgressEvent` you create yourself, you can assign any numeric value to `loaded` that represents the amount of work completed relative to the `total` value.
`ProgressEvent.total` Read only
    
A number indicating the total size of the data being transmitted or processed. For `ProgressEvent`s dispatched by the browser in HTTP messages, the value refers to the size, in bytes, of a resource and is derived from the `Content-Length` header. In a `ProgressEvent` you create yourself, you may wish to normalize `total` to a value such as `100` or `1` if revealing the precise amount of bytes of a resource is a concern. If using `1` as a total, for example, then `loaded` would be a decimal value between `0` and `1`.
## Instance methods
Inherits methods from its parent, `Event`.
## Examples
>
### Showing the status of a request
The following example adds a `ProgressEvent` to a new `XMLHttpRequest` and uses it to display the status of the request.
    
    const progressBar = document.getElementById("p"),
      client = new XMLHttpRequest();
    client.open("GET", "magical-unicorns");
    client.onprogress = (pe) => {
      if (pe.lengthComputable) {
        progressBar.max = pe.total;
        progressBar.value = pe.loaded;
      }
    };
    client.onloadend = (pe) => {
      progressBar.value = pe.loaded;
    };
    client.send();
    
### Using fractions in a ProgressEvent
The total number of bytes of a resource may reveal too much information about a resource, so a number between 0 and 1 may be used in a `ProgressEvent()` instead:
    
    function updateProgress(loaded, total) {
      const progressEvent = new ProgressEvent("progress", {
        lengthComputable: true,
        loaded,
        total,
      });
    
      document.dispatchEvent(progressEvent);
    }
    
    document.addEventListener("progress", (event) => {
      console.log(`Progress: ${event.loaded}/${event.total}`);
    });
    
    updateProgress(0.123456, 1);
    
  * The `Event` base interface.


# CDATASection
The `CDATASection` interface represents a CDATA section that can be used within XML to include extended portions of unescaped text. When inside a CDATA section, the symbols `<` and `&` don't need escaping as they normally do.
In XML, a CDATA section looks like:
    
    <![CDATA[ … ]]>
    
For example:
    
    <foo>
      Here is a CDATA section: <![CDATA[ < > & ]]> with all kinds of unescaped text.
    </foo>
    
The only sequence which is not allowed within a CDATA section is the closing sequence of a CDATA section itself, `]]>`.
Note: CDATA sections should not be used within HTML. They are considered comments and are not displayed.
EventTarget  Node  CharacterData  Text  CDATASection 
## Instance properties
This interface has no specific properties and implements those of its parent `Text`.
## Instance methods
This interface has no specific methods and implements those of its parent `Text`.
  * `Document.createCDATASection()`


# SensorErrorEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `SensorErrorEvent` interface of the Sensor APIs provides information about errors thrown by a `Sensor` or derived interface.
Event  SensorErrorEvent 
## Constructor
`SensorErrorEvent()`
    
Creates a new `SensorErrorEvent` object.
## Instance properties
`SensorErrorEvent.error` Read only
    
Returns the `DOMException` object passed in the event's constructor.
# PublicKeyCredential
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PublicKeyCredential` interface provides information about a public key / private key pair, which is a credential for logging in to a service using an un-phishable and data-breach resistant asymmetric key pair instead of a password. It inherits from `Credential`, and is part of the Web Authentication API extension to the Credential Management API.
Credential  PublicKeyCredential 
Note: This API is restricted to top-level contexts. Use from within an `<iframe>` element will not have any effect.
## Instance properties
`PublicKeyCredential.authenticatorAttachment` Read only
    
A string that indicates the mechanism by which the WebAuthn implementation is attached to the authenticator at the time the associated `navigator.credentials.create()` or `navigator.credentials.get()` call completes.
`PublicKeyCredential.id` Read only
    
Inherited from `Credential` and overridden to be the base64url encoding of `PublicKeyCredential.rawId`.
`PublicKeyCredential.rawId` Read only
    
An `ArrayBuffer` that holds the globally unique identifier for this `PublicKeyCredential`. This identifier can be used to look up credentials for future calls to `navigator.credentials.get()`.
`PublicKeyCredential.response` Read only
    
An instance of an `AuthenticatorResponse` object. It is either of type `AuthenticatorAttestationResponse` if the `PublicKeyCredential` was the results of a `navigator.credentials.create()` call, or of type `AuthenticatorAssertionResponse` if the `PublicKeyCredential` was the result of a `navigator.credentials.get()` call.
`PublicKeyCredential.type` Read only
    
Inherited from `Credential`. Always set to `public-key` for `PublicKeyCredential` instances.
## Static methods
`PublicKeyCredential.getClientCapabilities()`
    
Returns a `Promise` that resolves with an object that can be used to check whether or not particular WebAuthn capabilities and extensions are supported.
`PublicKeyCredential.isConditionalMediationAvailable()`
    
Returns a `Promise` which resolves to `true` if conditional mediation is available.
`PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()`
    
Returns a `Promise` which resolves to `true` if an authenticator bound to the platform is capable of verifying the user.
`PublicKeyCredential.parseCreationOptionsFromJSON()`
    
Convenience method for deserializing server-sent credential registration data when registering a user with credentials.
`PublicKeyCredential.parseRequestOptionsFromJSON()`
    
Convenience method for deserializing server-sent credential request data when authenticating a (registered) user.
`PublicKeyCredential.signalAllAcceptedCredentials()`
    
Signals to the authenticator all of the valid credential IDs that the relying party server still holds for a particular user.
`PublicKeyCredential.signalCurrentUserDetails()`
    
Signals to the authenticator that a particular user has updated their user name and/or display name.
`PublicKeyCredential.signalUnknownCredential()`
    
Signals to the authenticator that a credential ID was not recognized by the relying party server, for example because it was deleted.
## Instance methods
`PublicKeyCredential.getClientExtensionResults()`
    
If any extensions were requested, this method will return the results of processing those extensions.
`PublicKeyCredential.toJSON()`
    
Convenience method for creating a JSON string representation of a `PublicKeyCredential` for sending to the server when registering a user with credentials and authenticating a registered user.
## Examples
>
### Creating a new instance of PublicKeyCredential
Here, we use `navigator.credentials.create()` to generate a new credential.
    
    const createCredentialOptions = {
      publicKey: {
        challenge: new Uint8Array([
          21, 31, 105 /* 29 more random bytes generated by the server */,
        ]),
        rp: {
          name: "Example CORP",
          id: "login.example.com",
        },
        user: {
          id: new Uint8Array(16),
          name: "canand@example.com",
          displayName: "Carina Anand",
        },
        pubKeyCredParams: [
          {
            type: "public-key",
            alg: -7,
          },
        ],
      },
    };
    
    navigator.credentials
      .create(createCredentialOptions)
      .then((newCredentialInfo) => {
        const response = newCredentialInfo.response;
        const clientExtensionsResults =
          newCredentialInfo.getClientExtensionResults();
      })
      .catch((err) => {
        console.error(err);
      });
    
### Getting an existing instance of PublicKeyCredential
Here, we fetch an existing credential from an authenticator, using `navigator.credentials.get()`.
    
    const requestCredentialOptions = {
      publicKey: {
        challenge: new Uint8Array([
          /* bytes sent from the server */
        ]),
      },
    };
    
    navigator.credentials
      .get(requestCredentialOptions)
      .then((credentialInfoAssertion) => {
        // send assertion response back to the server
        // to proceed with the control of the credential
      })
      .catch((err) => {
        console.error(err);
      });
    
  * The parent interface `Credential`


# TreeWalker
The `TreeWalker` object represents the nodes of a document subtree and a position within them.
A `TreeWalker` can be created using the `Document.createTreeWalker()` method.
## Instance properties
This interface doesn't inherit any property.
`TreeWalker.root` Read only
    
Returns the root `Node` as specified when the `TreeWalker` was created.
`TreeWalker.whatToShow` Read only
    
Returns an `unsigned long` being a bitmask made of constants describing the types of `Node` that must be presented. Non-matching nodes are skipped, but their children may be included, if relevant. The possible values are:
Constant Numerical value Description  
`NodeFilter.SHOW_ALL` `4294967295` (that is the max value of `unsigned long`) Shows all nodes.  
`NodeFilter.SHOW_ATTRIBUTE` Deprecated `2` Shows attribute `Attr` nodes. This is meaningful only when creating a `TreeWalker` with an `Attr` node as its root. In this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.  
`NodeFilter.SHOW_CDATA_SECTION` Deprecated `8` Shows `CDATASection` nodes.  
`NodeFilter.SHOW_COMMENT` `128` Shows `Comment` nodes.  
`NodeFilter.SHOW_DOCUMENT` `256` Shows `Document` nodes.  
`NodeFilter.SHOW_DOCUMENT_FRAGMENT` `1024` Shows `DocumentFragment` nodes.  
`NodeFilter.SHOW_DOCUMENT_TYPE` `512` Shows `DocumentType` nodes.  
`NodeFilter.SHOW_ELEMENT` `1` Shows `Element` nodes.  
`NodeFilter.SHOW_ENTITY` Deprecated `32` Legacy, no more usable.  
`NodeFilter.SHOW_ENTITY_REFERENCE` Deprecated `16` Legacy, no more usable.  
`NodeFilter.SHOW_NOTATION` Deprecated `2048` Legacy, no more usable.  
`NodeFilter.SHOW_PROCESSING_INSTRUCTION` `64` Shows `ProcessingInstruction` nodes.  
`NodeFilter.SHOW_TEXT` `4` Shows `Text` nodes.  
`TreeWalker.filter` Read only
    
Returns the `NodeFilter` associated with this `TreeWalker` used to select the relevant nodes.
`TreeWalker.currentNode`
    
Is the `Node` on which the `TreeWalker` is currently pointing at.
## Instance methods
This interface doesn't inherit any method.
Note: In the context of a `TreeWalker`, a node is visible if it exists in the logical view determined by the `whatToShow` and `filter` parameter arguments. (Whether or not the node is visible on the screen is irrelevant.)
`TreeWalker.parentNode()`
    
Moves the current `Node` to the first visible ancestor node in the document order, and returns the found node. It also moves the current node to this one. If no such node exists, or if it is before that the root node defined at the object construction, returns `null` and the current node is not changed.
`TreeWalker.firstChild()`
    
Moves the current `Node` to the first visible child of the current node, and returns the found child. It also moves the current node to this child. If no such child exists, returns `null` and the current node is not changed. Note that the node returned by `firstChild()` is dependent on the value of `whatToShow` set during instantiation of the `TreeWalker` object. Assuming the following HTML tree, and if you set the `whatToShow` to `NodeFilter.SHOW_ALL` a call to `firstChild()` will return a `Text` node and not an `HTMLDivElement` object.
    
    <!doctype html>
    <html lang="en">
      <head>
        <title>Demo</title>
      </head>
      <body>
        <div id="container"></div>
      </body>
    </html>
    
    
    let walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ALL);
    let node = walker.firstChild(); // nodeName: "#text"
    
But if we do:
    
    let walker = document.createTreeWalker(
      document.body,
      NodeFilter.SHOW_ELEMENT,
    );
    let node = walker.firstChild(); // nodeName: "DIV"
    
The same applies to `nextSibling()`, `previousSibling()`, `firstChild()` and `lastChild()`
`TreeWalker.lastChild()`
    
Moves the current `Node` to the last visible child of the current node, and returns the found child. It also moves the current node to this child. If no such child exists, `null` is returned and the current node is not changed.
`TreeWalker.previousSibling()`
    
Moves the current `Node` to its previous sibling, if any, and returns the found sibling. If there is no such node, return `null` and the current node is not changed.
`TreeWalker.nextSibling()`
    
Moves the current `Node` to its next sibling, if any, and returns the found sibling. If there is no such node, `null` is returned and the current node is not changed.
`TreeWalker.previousNode()`
    
Moves the current `Node` to the previous visible node in the document order, and returns the found node. It also moves the current node to this one. If no such node exists, or if it is before that the root node defined at the object construction, returns `null` and the current node is not changed.
`TreeWalker.nextNode()`
    
Moves the current `Node` to the next visible node in the document order, and returns the found node. It also moves the current node to this one. If no such node exists, returns `null` and the current node is not changed.
  * The creator method: `Document.createTreeWalker()`.
  * Related interface: `NodeIterator`.


# CaretPosition
The `CaretPosition` interface represents the caret position, an indicator for the text insertion point. You can get a `CaretPosition` using the `Document.caretPositionFromPoint()` method.
## Instance properties
This interface doesn't inherit any properties.
`CaretPosition.offsetNode` Read only
    
Returns a `Node` containing the found node at the caret's position.
`CaretPosition.offset` Read only
    
Returns a `long` representing the offset of the selection in the caret position node. This will be the character offset in a text node or the selected child node's index in an element node.
## Instance methods
`CaretPosition.getClientRect`
    
Returns the client rectangle for the caret range.
  * `Document.caretPositionFromPoint()`
  * `Range`
  * `Node`


# BeforeUnloadEvent
The `BeforeUnloadEvent` interface represents the event object for the `beforeunload` event, which is fired when the current window, contained document, and associated resources are about to be unloaded.
See the `beforeunload` event reference for detailed guidance on using this event.
Event  BeforeUnloadEvent 
## Instance properties
Inherits properties from its parent, `Event`.
`returnValue` Deprecated
    
When set to a truthy value, triggers a browser-controlled confirmation dialog asking users to confirm if they want to leave the page when they try to close or reload it. This is a legacy feature, and best practice is to trigger the dialog by invoking `event.preventDefault()`, while also setting `returnValue` to support legacy cases.
## Instance methods
Inherits methods from its parent, `Event`.
  * `beforeunload` event


# HTMLAudioElement
The `HTMLAudioElement` interface provides access to the properties of `<audio>` elements, as well as methods to manipulate them.
This element is based on, and inherits properties and methods from, the `HTMLMediaElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLMediaElement  HTMLAudioElement 
## Constructor
`Audio()`
    
Creates and returns a new `HTMLAudioElement` object, optionally starting the process of loading an audio file into it if the file URL is given.
## Instance properties
No specific properties; inherits properties from its parent, `HTMLMediaElement`, and from `HTMLElement`.
## Instance methods
Inherits methods from its parent, `HTMLMediaElement`, and from `HTMLElement`. It offers no methods of its own.
## Examples
>
### Basic usage
You can create a `HTMLAudioElement` entirely with JavaScript using the `Audio()` constructor:
    
    const audioElement = new Audio("car_horn.wav");
    
then you can invoke the `play()` method on the element
    
    audioElement.play();
    
Note: A common gotcha is trying to play an audio element immediately on page load. Modern browser's default autoplay policy will block that from happening. Refer to Firefox and chrome for best practices and workarounds.
Some of the more commonly used properties of the audio element include `src`, `currentTime`, `duration`, `paused`, `muted`, and `volume`. This snippet copies the audio file's duration to a variable:
    
    const audioElement = new Audio("car_horn.wav");
    audioElement.addEventListener("loadeddata", () => {
      let duration = audioElement.duration;
      // The duration variable now holds the duration (in seconds) of the audio clip
    });
    
## Events
Inherits methods from its parent, `HTMLMediaElement`, and from its ancestor `HTMLElement`. Listen to events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
  * Web media technologies
  * Audio and Video Delivery
  * HTML element implementing this interface: `<audio>`.


# GPUValidationError
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUValidationError` interface of the WebGPU API describes an application error indicating that an operation did not pass the WebGPU API's validation constraints.
It represents one of the types of errors surfaced by `GPUDevice.popErrorScope` and the `uncapturederror` event.
Validation errors occur whenever invalid inputs are given to a WebGPU call. These are consistent, predictable, and should not occur provided your app is well-formed. They will occur in the same way on every device your code runs on, so once you've fixed any errors that show up during development you probably don't need to observe them directly most of the time. An exception to that rule is if you're consuming user-supplied assets, shaders, etc., in which case watching for validation errors while loading could be helpful.
Note: We have attempted to provide useful information to help you understand why validation errors are occurring in your WebGPU code in "Validation" sections where appropriate, which list criteria to meet to avoid validation errors. See for example the `GPUDevice.createBindGroup()` Validation section.
GPUError  GPUValidationError 
## Constructor
`GPUValidationError()`
    
Creates a new `GPUValidationError` object instance.
## Instance properties
The `message` property is inherited from its parent, `GPUError`:
`message` Experimental Read only
    
A string providing a human-readable message that explains why the error occurred.
## Examples
The following example uses an error scope to capture a suspected validation error, logging it to the console.
    
    device.pushErrorScope("validation");
    
    let sampler = device.createSampler({
      maxAnisotropy: 0, // Invalid, maxAnisotropy must be at least 1.
    });
    
    device.popErrorScope().then((error) => {
      if (error) {
        // error is a GPUValidationError object instance
        sampler = null;
        console.error(`An error occurred while creating sampler: ${error.message}`);
      }
    });
    
  * The WebGPU API
  * WebGPU Error Handling best practices


# HTMLMapElement
The `HTMLMapElement` interface provides special properties and methods (beyond those of the regular object `HTMLElement` interface it also has available to it by inheritance) for manipulating the layout and presentation of map elements.
EventTarget  Node  Element  HTMLElement  HTMLMapElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLMapElement.name`
    
A string representing the `<map>` element for referencing it other context. If the `id` attribute is set, this must have the same value; and it cannot be `null` or empty.
`HTMLMapElement.areas` Read only
    
A live `HTMLCollection` representing the `<area>` elements associated to this `<map>`.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement` .
  * HTML element implementing this interface: `<map>`.


# HTMLUnknownElement
The `HTMLUnknownElement` interface represents an invalid HTML element and derives from the `HTMLElement` interface, but without implementing any additional properties or methods.
EventTarget  Node  Element  HTMLElement  HTMLUnknownElement 
## Instance properties
No specific property; inherits properties from its parent, `HTMLElement`.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
# LaunchQueue
The `LaunchQueue` interface of the Launch Handler API is available via the `Window.launchQueue` property. When a progressive web app (PWA) is launched with a `launch_handler` `client_mode` value of `focus-existing`, `navigate-new`, or `navigate-existing`, `LaunchQueue` provides access to functionality that allows custom launch navigation handling to be implemented in the PWA. This functionality is controlled by the properties of the `LaunchParams` object passed into the `setConsumer()` callback function.
## Instance Methods
`setConsumer()` Experimental
    
Contains a callback function that handles custom launch navigation for a PWA.
## Examples
    
    if ("launchQueue" in window) {
      window.launchQueue.setConsumer((launchParams) => {
        if (launchParams.targetURL) {
          const params = new URL(launchParams.targetURL).searchParams;
    
          // Assuming a music player app that gets a track passed to it to be played
          const track = params.get("track");
          if (track) {
            audio.src = track;
            title.textContent = new URL(track).pathname.slice(1);
            audio.play();
          }
        }
      });
    }
    
  * Launch Handler API: Control how your app is launched
  * `Window.launchQueue`
  * Musicr 2.0 demo app


# SVGMPathElement
The `SVGMPathElement` interface corresponds to the `<mpath>` element.
EventTarget  Node  Element  SVGElement  SVGMPathElement 
## Instance properties
This interface also inherits properties from its parent, `SVGElement`.
`SVGMPathElement.href` Read only
    
An `SVGAnimatedString` that corresponds to the `href` or `xlink:href` Deprecated attribute of the given `<mpath>` element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.
# WebTransport API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The WebTransport API provides a modern update to WebSockets, transmitting data between client and server using HTTP/3 Transport. WebTransport provides support for multiple streams, unidirectional streams, and out-of-order delivery. It enables reliable transport via streams and unreliable transport via UDP-like datagrams.
## Concepts and usage
HTTP/3 has been in progress since 2018. It is based on Google's QUIC protocol (which is itself based on UDP), and fixes several issues around the classic TCP protocol, on which HTTP and WebSockets are based.
These include:
Head-of-line blocking
    
HTTP/2 allows multiplexing, so a single connection can stream multiple resources simultaneously. However, if a single resource fails, all other resources on that connection are held up until any missing packets are retransmitted. With QUIC, only the failing resource is affected.
Faster performance
    
QUIC is more performant than TCP in many ways. QUIC can handle security features by itself, rather than handing responsibility off to other protocols like TLS — meaning fewer round trips. And streams provide better transport efficiency than the older packet mechanism. That can make a significant difference, especially on high-latency networks.
Better network transitions
    
QUIC uses a unique connection ID to handle the source and destination of each request — to ensure that packets are delivered correctly. This ID can persist between different networks, meaning that, for example, a download can continue without getting interrupted if you switch from Wi-Fi to a mobile network. HTTP/2, on the other hand, uses IP addresses as identifiers, so network transitions can be problematic.
Unreliable transport
    
HTTP/3 supports unreliable data transmission via datagrams.
The WebTransport API provides low-level access to two-way communication via HTTP/3, taking advantage of the above benefits, and supporting both reliable and unreliable data transmission.
### Initial connection
To open a connection to an HTTP/3 server, you pass its URL to the `WebTransport()` constructor. Note that the scheme needs to be HTTPS, and the port number needs to be explicitly specified. Once the `WebTransport.ready` promise fulfills, you can start using the connection.
Also note that you can respond to the connection closing by waiting for the `WebTransport.closed` promise to fulfill. Errors returned by WebTransport operations are of type `WebTransportError`, and contain additional data on top of the standard `DOMException` set.
    
    const url = "https://example.com:4999/wt";
    
    async function initTransport(url) {
      // Initialize transport connection
      const transport = new WebTransport(url);
    
      // The connection can be used once ready fulfills
      await transport.ready;
    
      // …
    }
    
    // …
    
    async function closeTransport(transport) {
      // Respond to connection closing
      try {
        await transport.closed;
        console.log(`The HTTP/3 connection to ${url} closed gracefully.`);
      } catch (error) {
        console.error(`The HTTP/3 connection to ${url} closed due to ${error}.`);
      }
    }
    
### Unreliable transmission via datagrams
"Unreliable" means that transmission of data is not guaranteed, nor is arrival in a specific order. This is fine in some situations and provides very fast delivery. For example, you might want to transmit regular game state updates where each message supersedes the last one that arrives, and order is not important.
Unreliable data transmission is handled via the `WebTransport.datagrams` property — this returns a `WebTransportDatagramDuplexStream` object containing everything you need to send datagrams to the server, and receive them back.
The `WebTransportDatagramDuplexStream.writable` property returns a `WritableStream` object that you can write data to using a writer, for transmission to the server:
    
    const writer = transport.datagrams.writable.getWriter();
    const data1 = new Uint8Array([65, 66, 67]);
    const data2 = new Uint8Array([68, 69, 70]);
    writer.write(data1);
    writer.write(data2);
    
The `WebTransportDatagramDuplexStream.readable` property returns a `ReadableStream` object that you can use to receive data from the server:
    
    async function readData() {
      const reader = transport.datagrams.readable.getReader();
      while (true) {
        const { value, done } = await reader.read();
        if (done) {
          break;
        }
        // value is a Uint8Array.
        console.log(value);
      }
    }
    
### Reliable transmission via streams
"Reliable" means that transmission and order of data are guaranteed. That provides slower delivery (albeit faster than with WebSockets), and is needed in situations where reliability and ordering are important (such as chat applications, for example).
When using reliable transmission via streams you can also set the relative priority of different streams over the same transport.
### Unidirectional transmission
To open a unidirectional stream from a user agent, you use the `WebTransport.createUnidirectionalStream()` method to get a reference to a `WritableStream`. From this you can get a writer to allow data to be written to the stream and sent to the server.
    
    async function writeData() {
      const stream = await transport.createUnidirectionalStream();
      const writer = stream.writable.getWriter();
      const data1 = new Uint8Array([65, 66, 67]);
      const data2 = new Uint8Array([68, 69, 70]);
      writer.write(data1);
      writer.write(data2);
    
      try {
        await writer.close();
        console.log("All data has been sent.");
      } catch (error) {
        console.error(`An error occurred: ${error}`);
      }
    }
    
Note also the use of the `WritableStreamDefaultWriter.close()` method to close the associated HTTP/3 connection once all data has been sent.
If the server opens a unidirectional stream to transmit data to the client, this can be accessed on the client via the `WebTransport.incomingUnidirectionalStreams` property, which returns a `ReadableStream` of `WebTransportReceiveStream` objects. These can be used to read `Uint8Array` instances sent by the server.
In this case, the first thing to do is set up a function to read a `WebTransportReceiveStream`. These objects inherit from the `ReadableStream` class, so can be used in just the same way:
    
    async function readData(receiveStream) {
      const reader = receiveStream.getReader();
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          break;
        }
        // value is a Uint8Array
        console.log(value);
      }
    }
    
Next, call `WebTransport.incomingUnidirectionalStreams` and get a reference to the reader available on the `ReadableStream` it returns, and then use the reader to read the data from the server. Each chunk is a `WebTransportReceiveStream`, and we use the `readFrom()` set up earlier to read them:
    
    async function receiveUnidirectional() {
      const uds = transport.incomingUnidirectionalStreams;
      const reader = uds.getReader();
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          break;
        }
        // value is an instance of WebTransportReceiveStream
        await readData(value);
      }
    }
    
#### Bidirectional transmission
To open a bidirectional stream from a user agent, you use the `WebTransport.createBidirectionalStream()` method to get a reference to a `WebTransportBidirectionalStream`. This contains `readable` and `writable` properties returning references to `WebTransportReceiveStream` and `WebTransportSendStream` instances that can be used to read from and write to the server.
Note: `WebTransportBidirectionalStream` is similar to `WebTransportDatagramDuplexStream`, except that in that interface the `readable` and `writable` properties are `ReadableStream` and `WritableStream` respectively.
    
    async function setUpBidirectional() {
      const stream = await transport.createBidirectionalStream();
      // stream is a WebTransportBidirectionalStream
      // stream.readable is a WebTransportReceiveStream
      const readable = stream.readable;
      // stream.writable is a WebTransportSendStream
      const writable = stream.writable;
    
      // …
    }
    
Reading from the `WebTransportReceiveStream` can then be done as follows:
    
    async function readData(readable) {
      const reader = readable.getReader();
      while (true) {
        const { value, done } = await reader.read();
        if (done) {
          break;
        }
        // value is a Uint8Array.
        console.log(value);
      }
    }
    
And writing to the `WebTransportSendStream` can be done like this:
    
    async function writeData(writable) {
      const writer = writable.getWriter();
      const data1 = new Uint8Array([65, 66, 67]);
      const data2 = new Uint8Array([68, 69, 70]);
      writer.write(data1);
      writer.write(data2);
    }
    
If the server opens a bidirectional stream to transmit data to and receive it from the client, this can be accessed via the `WebTransport.incomingBidirectionalStreams` property, which returns a `ReadableStream` of `WebTransportBidirectionalStream` objects. Each one can be used to read and write `Uint8Array` instances as shown above. However, as with the unidirectional example, you need an initial function to read the bidirectional stream in the first place:
    
    async function receiveBidirectional() {
      const bds = transport.incomingBidirectionalStreams;
      const reader = bds.getReader();
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          break;
        }
        // value is an instance of WebTransportBidirectionalStream
        await readData(value.readable);
        await writeData(value.writable);
      }
    }
    
## Interfaces
`WebTransport`
    
Provides functionality to enable a user agent to connect to an HTTP/3 server, initiate reliable and unreliable transport in either or both directions, and close the connection once it is no longer needed.
`WebTransportBidirectionalStream`
    
Represents a bidirectional stream created by a server or a client that can be used for reliable transport. Provides access to a `ReadableStream` for reading incoming data, and a `WritableStream` for writing outgoing data.
`WebTransportDatagramDuplexStream`
    
Represents a duplex stream that can be used for unreliable transport of datagrams between client and server. Provides access to a `ReadableStream` for reading incoming datagrams, a `WritableStream` for writing outgoing datagrams, and various settings and statistics related to the stream.
`WebTransportError`
    
Represents an error related to the WebTransport API, which can arise from server errors, network connection problems, or client-initiated abort operations (for example, arising from a `WritableStream.abort()` call).
`WebTransportReceiveStream`
    
Provides streaming features for an incoming WebTransport unidirectional or bidirectional `WebTransport` stream.
`WebTransportSendStream`
    
Provides streaming features for an outgoing WebTransport unidirectional or bidirectional `WebTransport` stream.
## Examples
For complete examples, see:
  * WebTransport over HTTP/3 client


  * Using WebTransport
  * WebSockets API
  * Streams API
  * WebTransport over HTTP/3


# EventTarget
Note: This feature is available in Web Workers.
The `EventTarget` interface is implemented by objects that can receive events and may have listeners for them. In other words, any target of events implements the three methods associated with this interface.
`Element`, and its children, as well as `Document` and `Window`, are the most common event targets, but other objects can be event targets, too. For example `IDBRequest`, `AudioNode`, and `AudioContext` are also event targets.
Many event targets (including elements, documents, and windows) also support registering event handlers via `onevent` properties and attributes.
## Constructor
`EventTarget()`
    
Creates a new `EventTarget` object instance.
## Instance methods
`EventTarget.addEventListener()`
    
Registers an event handler of a specific event type on the `EventTarget`.
`EventTarget.removeEventListener()`
    
Removes an event listener from the `EventTarget`.
`EventTarget.dispatchEvent()`
    
Dispatches an event to this `EventTarget`.
  * Event index
  * Introduction to events
  * `Event` interface


# MIDIOutputMap
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MIDIOutputMap` read-only interface of the Web MIDI API provides the set of MIDI output ports that are currently available.
A `MIDIOutputMap` instance is a read-only `Map`-like object, in which each key is the ID string for MIDI output, and the associated value is the corresponding `MIDIOutput` object.
# HTMLDocument
For historical reasons, `Window` objects have a `window.HTMLDocument` property whose value is the `Document` interface. So you can think of `HTMLDocument` as an alias for `Document`, and you can find documentation for `HTMLDocument` members under the documentation for the `Document` interface.
# OVR_multiview2 extension
The `OVR_multiview2` extension is part of the WebGL API and adds support for rendering into multiple views simultaneously. This especially useful for virtual reality (VR) and WebXR.
For more information, see also:
  * Multiview on WebXR
  * Multiview in babylon.js
  * Optimizing Virtual Reality: Understanding Multiview
  * Multiview WebGL Rendering for Meta Quest


WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: Support depends on the system's graphics driver (Windows+ANGLE and Android are supported; Windows+GL, Mac, Linux are not supported).
This extension is only available to WebGL 2 contexts as it needs GLSL 3.00 and texture arrays.
Currently, there is no way to use multiview to render to a multisampled backbuffer, so you should create contexts with `antialias: false`. However, the Oculus browser (6+) also supports multisampling using the `OCULUS_multiview` extension. See also this WebGL issue.
## Constants
This extension exposes 4 constants that can be used in `getParameter()` or `getFramebufferAttachmentParameter()`.
`FRAMEBUFFER_ATTACHMENT_TEXTURE_NUM_VIEWS_OVR`
    
Number of views of the framebuffer object attachment.
`FRAMEBUFFER_ATTACHMENT_TEXTURE_BASE_VIEW_INDEX_OVR`
    
Base view index of the framebuffer object attachment.
`MAX_VIEWS_OVR`
    
The maximum number of views. Most VR headsets have two views, but there are prototypes of headset with ultra-wide FOV using 4 views which is currently the maximum number of views supported by multiview.
`FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR`
    
If baseViewIndex is not the same for all framebuffer attachment points where the value of `FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE` is not `NONE`, the framebuffer is considered incomplete. Calling `checkFramebufferStatus` for a framebuffer in this state returns `FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR`.
## Instance methods
`framebufferTextureMultiviewOVR()`
    
Simultaneously renders to multiple elements of a 2D texture array.
## Examples
This example is taken from the specification.
    
    const gl = document
      .createElement("canvas")
      .getContext("webgl2", { antialias: false });
    const ext = gl.getExtension("OVR_multiview2");
    const fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, fb);
    
    const colorTex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D_ARRAY, colorTex);
    gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.RGBA8, 512, 512, 2);
    ext.framebufferTextureMultiviewOVR(
      gl.DRAW_FRAMEBUFFER,
      gl.COLOR_ATTACHMENT0,
      colorTex,
      0,
      0,
      2,
    );
    
    const depthStencilTex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D_ARRAY, depthStencilTex);
    gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.DEPTH32F_STENCIL8, 512, 512, 2);
    
    ext.framebufferTextureMultiviewOVR(
      gl.DRAW_FRAMEBUFFER,
      gl.DEPTH_STENCIL_ATTACHMENT,
      depthStencilTex,
      0,
      0,
      2,
    );
    gl.drawElements(/* … */); // draw will be broadcasted to the layers of colorTex and depthStencilTex.
    
Shader code
    
    #version 300 es
    #extension GL_OVR_multiview2 : require
    precision mediump float;
    layout (num_views = 2) in;
    in vec4 inPos;
    uniform mat4 u_viewMatrices[2];
    void main() {
      gl_Position = u_viewMatrices[gl_ViewID_OVR] * inPos;
    }
    
Also, see this three.js demo for a live multiview example.
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.getParameter()`
  * WebXR


# CSSContainerRule
The `CSSContainerRule` interface represents a single CSS `@container` rule.
An object of this type can be used to get the query conditions for the `@container`, along with the container name if one is defined. Note that the container name and query together define the "condition text", which can be obtained using `CSSConditionRule.conditionText`.
CSSRule  CSSGroupingRule  CSSConditionRule  CSSContainerRule 
## Instance properties
Inherits properties from its ancestors `CSSConditionRule`, `CSSGroupingRule`, and `CSSRule`.
`CSSContainerRule.containerName` Read only
    
Returns a string representing the name of an `@container`, or an empty string.
`CSSContainerRule.containerQuery` Read only
    
Returns a string representing the set of features or "container conditions" that are evaluated to determine if the styles in the associated `@container` are applied.
## Instance methods
No specific methods; inherits methods from its ancestors `CSSConditionRule`, `CSSGroupingRule`, and `CSSRule`.
## Examples
>
### Unnamed container rule
The example below defines an unnamed `@container` rule, and displays the properties of the associated `CSSContainerRule`. The CSS is the same as in the `@container` example Setting styles based on a container's size.
The first part of the code simply creates a list for logging the container rule properties, along with a JavaScript `log()` method to simplify adding the properties.
    
    <div id="log">
      <h2>Log</h2>
      <ul></ul>
      <hr />
    </div>
    
    
    // Store reference to log list
    const logList = document.querySelector("#log ul");
    // Function to log data from underlying source
    function log(result) {
      const listItem = document.createElement("li");
      listItem.textContent = result;
      logList.appendChild(listItem);
    }
    
Then we define the HTML for a `card` (`<div>`) contained within a `post`.
    
    <div class="post">
      <div class="card">
        <h2>Card title</h2>
        <p>Card content</p>
      </div>
    </div>
    
The CSS for the example is shown below. As described in the corresponding `@container` example, the CSS for the container element specifies the type of the container. The `@container` then applies a new width, font-size and background color to the card if the width is less than 650px.
    
    <style id="example-styles">
      /* A container context based on inline size */
      .post {
        container-type: inline-size;
      }
    
      /* Apply styles if the container is narrower than 650px */
      @container (width < 650px) {
        .card {
          width: 50%;
          background-color: gray;
          font-size: 1em;
        }
      }
    </style>
    
The code below gets the `HTMLStyleElement` associated with the example using its id, and then uses its `sheet` property to get the `StyleSheet`. From the `StyleSheet` we get the set of `cssRules` added to the sheet. Since we added the `@container` as the second rule above, we can access the associated `CSSContainerRule` using the second entry, with index "1", in the `cssRules`. Last of all, we log the `containerName`, `containerQuery` and `conditionText` (inherited) properties.
    
    const exampleStylesheet = document.getElementById("example-styles").sheet;
    const exampleRules = exampleStylesheet.cssRules;
    const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
    log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
    log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
    log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
    
Note: The styles for this example are defined in an inline HTML `style` element with an id in order to make it easy for the code to find the correct sheet. You might also locate the correct sheets for each example from the document by indexing against the length (e.g., `document.styleSheets[document.styleSheets.length-1]` but that makes working out correct sheet for each example more complicated).
The example output is shown below. The log section lists the `containerName`, which is an empty string as no name has been defined. The `containerQuery` and `conditionText` strings are also logged, and have the same value because there is no name defined. The card should change background and as the width of the page transitions through 650px.
### Named container rule
The example below defines a named `@container` rule, and displays the properties of the associated `CSSContainerRule`. The CSS is very similar to that in the `@container` example Creating named container contexts.
First we define the HTML for a `card` (`<div>`) contained within a `post` (the example does not show the logging code, as this is the same as in the previous example).
    
    <div class="post">
      <div class="card">
        <h2>Card title</h2>
        <p>Card content</p>
      </div>
    </div>
    
As described in `@container`, the CSS for the container element specifies the type of the container, and may also specify a name for the container. The card has a default font size, which is overridden for the `@container` named `sidebar` if the minimum width is greater than 700px.
    
    <style id="example-styles">
      .post {
        container-type: inline-size;
        container-name: sidebar;
      }
    
      /* Default heading styles for the card title */
      .card h2 {
        font-size: 1em;
      }
    
      @container sidebar (width >= 700px) {
        .card {
          font-size: 2em;
        }
      }
    </style>
    
The code for getting the sheet and rules is almost identical to the previous example. The only difference is that in this example we have three CSS rules, so to get the associated `CSSContainerRule` we get the third entry in the `cssRules`.
    
    const exampleStylesheet = document.getElementById("example-styles").sheet;
    const exampleRules = exampleStylesheet.cssRules;
    const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
    log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
    log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
    log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
    
The example output is shown below. The log section lists the `containerName` and `containerQuery` strings. The `conditionText` is also logged, and shows the combination of these two strings. The title in the card section should double in size as the width of the page goes over 700px.
  * CSS `container-name`, `container-type`, and `container` shorthand properties
  * CSS containment module
  * Container queries
  * Using container size and style queries


# PresentationAvailability
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
A `PresentationAvailability` object is associated with available presentation displays and represents the presentation display availability for a presentation request. If the controlling user agent can monitor the list of available presentation displays in the background (without a pending request to `start()`), the `PresentationAvailability` object MUST be implemented in a controlling browsing context.
The `value` attribute MUST return the last value it was set to. The value is updated by the monitor the list of available presentation displays algorithm.
The `onchange` attribute is an event handler whose corresponding event handler event type is `change`.
EventTarget  PresentationAvailability 
## Instance properties
`PresentationAvailability.value` Read only Experimental
    
A boolean value indicating whether the given presentation display is available. The `value` attribute MUST return the last value it was set to.
### Event
`change` Experimental
    
Indicates that the availability of the presentation display has changed.
## Instance methods
None.
# Content Index API
Note: This feature is available in Web Workers.
The Content Index API allows developers to register their offline enabled content with the browser.
## Concepts and usage
As it stands, offline web content is not easily discoverable by users. Content indexing allows developers to tell the browser about their specific offline content. This allows users to discover and view what is available, whilst giving developers the ability to add and manage this content. Examples could be a news website prefetching the latest articles in the background, or a content streaming app registering downloaded content.
The Content Index API is an extension to service workers, which allows developers to add URLs and metadata of already cached pages, under the scope of the current service worker. The browser can then use these entries to display offline reading to a user. As a developer you can also display these entries within your application.
Indexed entries do not automatically expire. It's good practice to present an interface for clearing out entries, or periodically remove older entries.
Note: The API supports indexing URLs corresponding to HTML documents. A URL for a cached media file, for example, can't be indexed directly. Instead, you need to provide a URL for a page that displays media, and which works offline.
## Interfaces
`ContentIndex` Experimental
    
Provides functionality to register content available offline.
`ContentIndexEvent` Experimental
    
Defines the object used to represent the `contentdelete` event.
### Extensions to other interfaces
The following additions to the `ServiceWorker` have been specified in the Content Index API spec to provide an entry point for using content indexing.
`ServiceWorkerRegistration.index` Read only Experimental
    
Returns a reference to the `ContentIndex` interface for indexing cached pages.
`contentdelete` event  Experimental
    
Fired when content is removed by the user agent.
## Examples
All the following examples assume a service worker has been registered. For more information see the Service Worker API.
### Feature detection and interface access
Here we get a reference to the `ServiceWorkerRegistration`, then check for the `index` property, which gives us access to the content index interface.
    
    // reference registration
    const registration = await navigator.serviceWorker.ready;
    
    // feature detection
    if ("index" in registration) {
      // Content Index API functionality
      const contentIndex = registration.index;
    }
    
### Adding to the content index
Here we're declaring an item in the correct format and creating an asynchronous function which uses the `add()` method to register it with the content index.
    
    // our content
    const item = {
      id: "post-1",
      url: "/posts/amet.html",
      title: "Amet consectetur adipisicing",
      description:
        "Repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.",
      icons: [
        {
          src: "/media/dark.png",
          sizes: "128x128",
          type: "image/png",
        },
      ],
      category: "article",
    };
    
    // our asynchronous function to add indexed content
    async function registerContent(data) {
      const registration = await navigator.serviceWorker.ready;
    
      // feature detect Content Index
      if (!registration.index) {
        return;
      }
    
      // register content
      try {
        await registration.index.add(data);
      } catch (e) {
        console.log("Failed to register content: ", e.message);
      }
    }
    
### Retrieving items within the current index
The below example shows an asynchronous function that retrieves items within the content index and iterates over each entry, building a list for the interface.
    
    async function createReadingList() {
      // access our service worker registration
      const registration = await navigator.serviceWorker.ready;
    
      // get our index entries
      const entries = await registration.index.getAll();
    
      // create a containing element
      const readingListElem = document.createElement("div");
    
      // test for entries
      if (entries.length === 0) {
        // if there are no entries, display a message
        const message = document.createElement("p");
        message.innerText =
          "You currently have no articles saved for offline reading.";
    
        readingListElem.append(message);
      } else {
        // if entries are present, display in a list of links to the content
        const listElem = document.createElement("ul");
    
        for (const entry of entries) {
          const listItem = document.createElement("li");
    
          const anchorElem = document.createElement("a");
          anchorElem.innerText = entry.title;
          anchorElem.setAttribute("href", entry.url);
    
          listElem.append(listItem);
        }
    
        readingListElem.append(listElem);
      }
    }
    
### Unregistering indexed content
Below is an asynchronous function, that removes an item from the content index.
    
    async function unregisterContent(article) {
      // reference registration
      const registration = await navigator.serviceWorker.ready;
    
      // feature detect Content Index
      if (!registration.index) return;
    
      // unregister content from index
      await registration.index.delete(article.id);
    }
    
All the above methods are available within the scope of the service worker. They are accessible from the `WorkerGlobalScope.self` property:
    
    // service worker script
    
    self.registration.index.add(item);
    
    self.registration.index.delete(item.id);
    
    const contentIndexItems = self.registration.index.getAll();
    
### The contentdelete event
When an item is removed from the user agent interface, a `contentdelete` event is received by the service worker.
    
    self.addEventListener("contentdelete", (event) => {
      console.log(event.id);
    
      // logs content index id, which can then be used to determine what content to delete from your cache
    });
    
The `contentdelete` event is only fired when the deletion happens due to interaction with the browser's built-in user interface. It is not fired when the `ContentIndex.delete()` method is called.
>
### api.ContentIndex
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Content_Index_API` No No No No No 84 No 60 No 14.0 84 No  
`add` No No No No No 84 No 60 No 14.0 84 No  
`delete` No No No No No 84 No 60 No 14.0 84 No  
`getAll` No No No No No 84 No 60 No 14.0 84 No  
### api.ServiceWorkerRegistration.index
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Content_Index_API` No No No No No 84 No 60 No 14.0 84 No  
  * An introductory article on the Content Index API
  * Service Worker API, along with information about Cache and CacheStorage


# Sanitizer
The `Sanitizer` interface of the HTML Sanitizer API defines a configuration object that specifies what elements, attributes and comments are allowed or should be removed when inserting strings of HTML into an `Element` or `ShadowRoot`, or when parsing an HTML string into a `Document`.
A `Sanitizer` instance is effectively a wrapper around a `SanitizerConfig`, and can be passed as a configuration alternative in the same sanitization methods:
  * `setHTML()` or `setHTMLUnsafe()` on `Element`.
  * `setHTML()` or `setHTMLUnsafe()` on `ShadowRoot`.
  * `Document.parseHTML()` or `Document.parseHTMLUnsafe()` static methods.


Note that `Sanitizer` is expected to be more efficient to reuse and modify when needed.
## Constructors
`Sanitizer()` Experimental
    
Creates and returns a `Sanitizer` object, optionally with custom sanitization behavior defined in a `SanitizerConfig`.
## Instance methods
`Sanitizer.allowElement()` Experimental
    
Sets an element as allowed by the sanitizer, optionally with an array of attributes that are allowed or disallowed.
`Sanitizer.get()` Experimental
    
Returns the current `Sanitizer` configuration as an `SanitizerConfig` dictionary instance.
`Sanitizer.removeElement()` Experimental
    
Sets an element to be removed by the sanitizer.
`Sanitizer.removeUnsafe()` Experimental
    
Updates the sanitizer configuration so that it will remove any XSS-unsafe HTML.
`Sanitizer.replaceElementWithChildren()` Experimental
    
Sets an element to be replaced by its child HTML elements.
`Sanitizer.allowAttribute()` Experimental
    
Sets an attribute as allowed on any element.
`Sanitizer.removeAttribute()` Experimental
    
Sets an attribute to be removed from any element.
`Sanitizer.setComments()` Experimental
    
Sets whether comments will be allowed or removed by the sanitizer.
`Sanitizer.setDataAttributes()` Experimental
    
Sets whether data attributes on elements will be allowed or removed by the sanitizer.
## Examples
For more examples see the HTML Sanitizer API and the individual methods. Below we show a few examples of how you might create different sanitizer configurations.
### Creating a default sanitizer
The default sanitizer is constructed as shown below.
    
    const sanitizer = new Sanitizer();
    
The XSS-safe sanitization methods create the same sanitizer automatically if no options are passed.
### Creating an empty sanitizer
To create an empty sanitizer, pass an empty object to the constructor. The resulting sanitizer configuration is shown below.
    
    const sanitizer = new Sanitizer({});
    /*
    {
      "attributes": [],
      "comments": true,
      "dataAttributes": true,
      "elements": [],
      "removeAttributes": [],
      "removeElements": [],
      "replaceWithChildrenElements": []
    }
    */
    
### Creating an "allow" sanitizer
This example shows how you might create an "allow sanitizer": a sanitizer that allows only a subset of attributes and elements.
The code first uses the `Sanitizer()` constructor to create a `Sanitizer`, specifying a `SanitizerConfig` that allows the element `<div>`, `<p>` and `<script>`.
The example then uses `allowElement()` to further allow `<span>` elements, `allowAttribute()` to allow the `id` attribute on any element, and `replaceElementWithChildren()` method to set that any `<b>` elements should be replaced by their inner content (this is a kind of "allow" in that you are explicitly specifying some entities to keep). Lastly we specify that comments should be retained.
    
    const sanitizer = new Sanitizer({ elements: ["div", "p", "script"] });
    sanitizer.allowElement("span");
    sanitizer.allowAttribute("id");
    sanitizer.replaceElementWithChildren("b");
    sanitizer.setComments(true);
    
### Creating a "remove" sanitizer
This example shows how you might create a "remove sanitizer", specifying items to remove from the input.
The code first uses the `Sanitizer()` constructor to create a `Sanitizer`, specifying a `SanitizerConfig` that removes the element `<span>` and `<script>`. We then use `removeElement()` to add `<h6>` to the array of elements to be removed, and `removeAttribute()` to remove `lang` from the attributes list. We also remove comments.
    
    const sanitizer = new Sanitizer({ removeElements: ["span", "script"] });
    sanitizer.removeElement("h6");
    sanitizer.removeAttribute("lang");
    sanitizer.setComments(false);
    
# SVGFEComponentTransferElement
The `SVGFEComponentTransferElement` interface corresponds to the `<feComponentTransfer>` element.
EventTarget  Node  Element  SVGElement  SVGFEComponentTransferElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEComponentTransferElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEComponentTransferElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFEComponentTransferElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEComponentTransferElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEComponentTransferElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEComponentTransferElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
  * `<feComponentTransfer>`


# PaymentMethodChangeEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PaymentMethodChangeEvent` interface of the Payment Request API describes the `paymentmethodchange` event which is fired by some payment handlers when the user switches payment instruments (e.g., a user selects a "store" card to make a purchase while using Apple Pay).
Event  PaymentRequestUpdateEvent  PaymentMethodChangeEvent 
## Constructor
`PaymentMethodChangeEvent()`
    
Creates and returns a new `PaymentMethodChangeEvent` object.
## Instance properties
In addition to the properties below, this interface includes properties inherited from `PaymentRequestUpdateEvent`.
`methodDetails` Read only
    
An object containing payment method-specific data useful when handling a payment method change. If no such information is available, this value is `null`.
`methodName` Read only
    
A string containing the payment method identifier, a string which uniquely identifies a particular payment method. This identifier is usually a URL used during the payment process, but may be a standardized non-URL string as well, such as `basic-card`. The default value is the empty string, `""`.
## Instance methods
This interface includes methods inherited from `PaymentRequestUpdateEvent`.
# HTMLTrackElement
The `HTMLTrackElement` interface represents an HTML `<track>` element within the DOM. This element can be used as a child of either `<audio>` or `<video>` to specify a text track containing information such as closed captions or subtitles.
EventTarget  Node  Element  HTMLElement  HTMLTrackElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLTrackElement.kind`
    
A string that reflects the `kind` HTML attribute, indicating how the text track is meant to be used. Possible values are: `subtitles`, `captions`, `descriptions`, `chapters`, or `metadata`.
`HTMLTrackElement.src`
    
A string that reflects the `src` HTML attribute, indicating the address of the text track data.
`HTMLTrackElement.srclang`
    
A string that reflects the `srclang` HTML attribute, indicating the language of the text track data.
`HTMLTrackElement.label`
    
A string that reflects the `label` HTML attribute, indicating a user-readable title for the track.
`HTMLTrackElement.default`
    
A boolean value reflecting the `default` attribute, indicating that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate.
`HTMLTrackElement.readyState` Read only
    
Returns an `unsigned short` that show the readiness state of the track:
Constant Value Description  
`NONE` 0 Indicates that the text track's cues have not been obtained.  
`LOADING` 1 Indicates that the text track is loading and there have been no fatal errors encountered so far. Further cues might still be added to the track by the parser.  
`LOADED` 2 Indicates that the text track has been loaded with no fatal errors.  
`ERROR` 3 Indicates that the text track was enabled, but when the user agent attempted to obtain it, this failed in some way. Some or all of the cues are likely missing and will not be obtained.  
`HTMLTrackElement.track` Read only
    
Returns `TextTrack` is the track element's text track data.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
## Events
Inherits events from its parent, `HTMLElement`.
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface:
`cuechange`
    
Sent when the underlying `TextTrack` has changed the currently-presented cues. This event is always sent to the `TextTrack` but is also sent to the `HTMLTrackElement` if one is associated with the track. You may also use the `oncuechange` event handler to establish a handler for this event.
## Usage notes
>
### Loading of the track's text resource
The WebVTT or TTML data describing the actual cues for the text track isn't loaded if the track's `mode` is initially in the `disabled` state. If you need to be able to perform any processing on the track after the `<track>` is set up, you should instead ensure that the track's `mode` is either `hidden` (if you don't want it to start out being presented to the user) or `showing` (to initially display the track). You can then change the mode as desired later.
  * The HTML element implementing this interface: `<track>`.


# StylePropertyMapReadOnly
The `StylePropertyMapReadOnly` interface of the CSS Typed Object Model API provides a read-only representation of a CSS declaration block that is an alternative to `CSSStyleDeclaration`. Retrieve an instance of this interface using `Element.computedStyleMap()`.
## Instance properties
`StylePropertyMapReadOnly.size`
    
Returns an unsigned long integer containing the size of the `StylePropertyMapReadOnly` object.
## Instance methods
`StylePropertyMapReadOnly.entries()`
    
Returns an array of a given object's own enumerable property `[key, value]` pairs, in the same order as that provided by a `for...in` loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
`StylePropertyMapReadOnly.forEach()`
    
Executes a provided function once for each element of `StylePropertyMapReadOnly`.
`StylePropertyMapReadOnly.get()`
    
Returns the value of the specified property.
`StylePropertyMapReadOnly.getAll()`
    
Returns an array of `CSSStyleValue` objects containing the values for the provided property.
`StylePropertyMapReadOnly.has()`
    
Indicates whether the specified property is in the `StylePropertyMapReadOnly` object.
`StylePropertyMapReadOnly.keys()`
    
Returns a new array iterator containing the keys for each item in `StylePropertyMapReadOnly`.
`StylePropertyMapReadOnly.values()`
    
Returns a new array iterator containing the values for each index in the `StylePropertyMapReadOnly` object.
## Examples
We have to have an element to observe:
    
    <p>
      This is a paragraph with some text. We can add some CSS, or not. The style map
      will include all the default and inherited CSS property values.
    </p>
    <dl id="output"></dl>
    
We add a touch of CSS with a custom property to better demonstrate the output:
    
    p {
      --some-variable: 1.6em;
      --some-other-variable: translateX(33vw);
      --another-variable: 42;
      line-height: var(--some-variable);
    }
    
We add JavaScript to grab our paragraph and return back a definition list of all the default CSS property values using `Element.computedStyleMap()`.
    
    // get the element
    const myElement = document.querySelector("p");
    
    // get the <dl> we'll be populating
    const stylesList = document.querySelector("#output");
    
    // Retrieve all computed styles with computedStyleMap()
    const stylePropertyMap = myElement.computedStyleMap();
    
    // iterate through the map of all the properties and values, adding a <dt> and <dd> for each
    for (const [prop, val] of stylePropertyMap) {
      // properties
      const cssProperty = document.createElement("dt");
      cssProperty.innerText = prop;
      stylesList.appendChild(cssProperty);
    
      // values
      const cssValue = document.createElement("dd");
      cssValue.innerText = val;
      stylesList.appendChild(cssValue);
    }
    
# CSSSkewY
Note: This feature is available in Web Workers.
The `CSSSkewY` interface of the CSS Typed Object Model API represents the `skewY()` value of the individual `transform` property in CSS. It inherits properties and methods from its parent `CSSTransformValue`.
CSSTransformComponent  CSSSkewY 
## Constructor
`CSSSkewY()`
    
Creates a new `CSSSkewY` object.
## Instance properties
Inherits properties from its ancestor `CSSTransformValue`.
`ay`
    
Returns or sets the y-axis value.
## Instance methods
Inherits methods from its ancestor `CSSTransformValue`.
## Examples
To Do
# ContentIndexEvent
Note: This feature is only available in Service Workers.
The `ContentIndexEvent` interface of the content index defines the object used to represent the `contentdelete` event.
This event is sent to the global scope of a `ServiceWorker`. It contains the id of the indexed content to be removed.
The `contentdelete` event is only fired when the deletion happens due to interaction with the browser's built-in user interface. It is not fired when the `ContentIndex.delete` method is called.
Event  ExtendableEvent  ContentIndexEvent 
## Constructor
`ContentIndexEvent()` Experimental
    
Creates and returns a new `ContentIndexEvent` object whose type and other options are configured as specified.
## Instance properties
In addition to the properties listed below, this interface inherits the properties of its parent interface, `ExtendableEvent`.
`id` Read only Experimental
    
A `String` which identifies the deleted content index via it's `id`.
## Instance methods
While `ContentIndexEvent` offers no methods of its own, it inherits any specified by its parent interface, `ExtendableEvent`.
## Examples
This example shows the service worker script listening for the `contentdelete` event and logs the removed content index id.
    
    self.addEventListener("contentdelete", (event) => {
      console.log(event.id);
    
      // logs content index id, which can then be used to determine what content to delete from your cache
    });
    
  * An introductory article on the Content Index API
  * Service Worker API, along with information about Cache and CacheStorage


# MIDIAccess
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MIDIAccess` interface of the Web MIDI API provides methods for listing MIDI input and output devices, and obtaining access to those devices.
`MIDIAccess` is a transferable object.
EventTarget  MIDIAccess 
## Instance properties
`MIDIAccess.inputs` Read only
    
Returns an instance of `MIDIInputMap` which provides access to any available MIDI input ports.
`MIDIAccess.outputs` Read only
    
Returns an instance of `MIDIOutputMap` which provides access to any available MIDI output ports.
`MIDIAccess.sysexEnabled` Read only
    
A boolean attribute indicating whether system exclusive support is enabled on the current MIDIAccess instance.
### Events
`statechange`
    
Called whenever a new MIDI port is added or an existing port changes state.
## Examples
The `Navigator.requestMIDIAccess()` method returns a promise that resolves with a `MIDIAccess` object. Information about the input and output ports is returned.
When a port changes state, information about that port is printed to the console.
    
    navigator.requestMIDIAccess().then((access) => {
      // Get lists of available MIDI controllers
      const inputs = access.inputs.values();
      const outputs = access.outputs.values();
    
      access.onstatechange = (event) => {
        // Print information about the (dis)connected MIDI controller
        console.log(event.port.name, event.port.manufacturer, event.port.state);
      };
    });
    
# SVGSetElement
The `SVGSetElement` interface corresponds to the `<set>` element.
EventTarget  Node  Element  SVGElement  SVGAnimationElement  SVGSetElement 
## Instance properties
This interface doesn't implement any specific properties, but inherits properties from its parent interface, `SVGAnimationElement`.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGAnimationElement`.
# ToggleEvent
The `ToggleEvent` interface represents an event notifying the user an Element's state has changed.
This is the event object for the `HTMLElement` `beforetoggle` and `toggle` events, which fire on some elements just before and just after they transition between showing and hidden, respectively.
  * `beforetoggle` fires on popovers and `<dialog>` elements.
  * `toggle` fires on popovers, `<dialog>` elements, and `<details>` elements.

Event  ToggleEvent 
## Constructor
`ToggleEvent()`
    
Creates an `ToggleEvent` object.
## Instance properties
This interface inherits properties from its parent, `Event`.
`ToggleEvent.newState` Read only
    
A string (either `"open"` or `"closed"`), representing the state the element is transitioning to.
`ToggleEvent.oldState` Read only
    
A string (either `"open"` or `"closed"`), representing the state the element is transitioning from.
`ToggleEvent.source` Experimental Read only
    
An `Element` object instance representing the HTML control that initiated the toggle.
## Examples
>
### Basic example
    
    const popover = document.getElementById("mypopover");
    
    // …
    
    popover.addEventListener("beforetoggle", (event) => {
      if (event.newState === "open") {
        console.log("Popover is being shown");
      } else {
        console.log("Popover is being hidden");
      }
    });
    
  * Popover API
  * `beforetoggle` event
  * `toggle` event


# The HTML DOM API
The HTML DOM API is made up of the interfaces that define the functionality of each of the elements in HTML, as well as any supporting types and interfaces they rely upon.
The functional areas included in the HTML DOM API include:
  * Access to and control of HTML elements via the DOM.
  * Access to and manipulation of form data.
  * Interacting with the contents of 2D images and the context of an HTML `<canvas>`, for example to draw on top of them.
  * Management of media connected to the HTML media elements (`<audio>` and `<video>`).
  * Dragging and dropping of content on webpages.
  * Access to the browser navigation history
  * Supporting and connective interfaces for other APIs such as Web Components, Web Storage, Web Workers, WebSocket, and Server-sent events.


## HTML DOM concepts and usage
In this article, we'll focus on the parts of the HTML DOM that involve engaging with HTML elements. Discussion of other areas, such as Drag and Drop, WebSockets, Web Storage, etc. can be found in the documentation for those APIs.
### Structure of an HTML document
The Document Object Model (DOM) is an architecture that describes the structure of a `document`; each document is represented by an instance of the interface `Document`. A document, in turn, consists of a hierarchical tree of nodes, in which a node is a fundamental record representing a single object within the document (such as an element or text node).
Nodes may be strictly organizational, providing a means for grouping other nodes together or for providing a point at which a hierarchy can be constructed; other nodes may represent visible components of a document. Each node is based on the `Node` interface, which provides properties for getting information about the node as well as methods for creating, deleting, and organizing nodes within the DOM.
Nodes don't have any concept of including the content that is actually displayed in the document. They're empty vessels. The fundamental notion of a node that can represent visual content is introduced by the `Element` interface. An `Element` object instance represents a single element in a document created using either HTML or an XML vocabulary such as SVG.
For example, consider a document with two elements, one of which has two more elements nested inside it:
While the `Document` interface is defined as part of the DOM specification, the HTML specification significantly enhances it to add information specific to using the DOM in the context of a web browser, as well as to using it to represent HTML documents specifically.
Among the things added to `Document` by the HTML standard are:
  * Support for accessing various information provided by the HTTP headers when loading the page, such as the location from which the document was loaded, cookies, modification date, referring site, and so forth.
  * Access to lists of elements in the document's `<head>` block and body, as well as lists of the images, links, scripts, etc. contained in the document.
  * Support for interacting with the user by examining focus and by executing commands on editable content.
  * Event handlers for document events defined by the HTML standard to allow access to mouse and keyboard events, drag and drop, media control, and more.
  * Event handlers for events that can be delivered to both elements and documents; these presently include only `copy`, `cut`, and `paste` actions.


### HTML element interfaces
The `Element` interface has been further adapted to represent HTML elements specifically by introducing the `HTMLElement` interface, which all more specific HTML element classes inherit from. This expands the `Element` class to add HTML-specific general features to the element nodes. Properties added by `HTMLElement` include for example `hidden` and `innerText`.
An HTML document is a DOM tree in which each of the nodes is an HTML element, represented by the `HTMLElement` interface. The `HTMLElement` class, in turn, implements `Node`, so every element is also a node (but not the other way around). This way, the structural features implemented by the `Node` interface are also available to HTML elements, allowing them to be nested within each other, created and deleted, moved around, and so forth.
The `HTMLElement` interface is generic, however, providing only the functionality common to all HTML elements such as the element's ID, its coordinates, the HTML making up the element, information about scroll position, and so forth.
In order to expand upon the functionality of the core `HTMLElement` interface to provide the features needed by a specific element, the `HTMLElement` class is subclassed to add the needed properties and methods. For example, the `<canvas>` element is represented by an object of type `HTMLCanvasElement`. `HTMLCanvasElement` augments the `HTMLElement` type by adding properties such as `height` and methods like `getContext()` to provide canvas-specific features.
The overall inheritance for HTML element classes looks like this:
As such, an element inherits the properties and methods of all of its ancestors. For example, consider an `<a>` element, which is represented in the DOM by an object of type `HTMLAnchorElement`. The element, then, includes the anchor-specific properties and methods described in that class's documentation, but also those defined by `HTMLElement` and `Element`, as well as from `Node` and, finally, `EventTarget`.
Each level defines a key aspect of the utility of the element. From `Node`, the element inherits concepts surrounding the ability for the element to be contained by another element, and to contain other elements itself. Of special importance is what is gained by inheriting from `EventTarget`: the ability to receive and handle events such as mouse clicks, play and pause events, and so forth.
There are elements that share commonalities and thus have an additional intermediary type. For example, the `<audio>` and `<video>` elements both present audiovisual media. The corresponding types, `HTMLAudioElement` and `HTMLVideoElement`, are both based upon the common type `HTMLMediaElement`, which in turn is based upon `HTMLElement` and so forth. `HTMLMediaElement` defines the methods and properties held in common between audio and video elements.
These element-specific interfaces make up the majority of the HTML DOM API, and are the focus of this article. To learn more about the actual structure of the DOM, see Introduction to the DOM.
## HTML DOM target audience
The features exposed by the HTML DOM are among the most commonly-used APIs in a web developer's toolkit. All but the most simple web applications will use some features of the HTML DOM.
## HTML DOM API interfaces
The majority of the interfaces that comprise the HTML DOM API map almost one-to-one to individual HTML elements, or to a small group of elements with similar functionality. In addition, the HTML DOM API includes a few interfaces and types to support the HTML element interfaces.
### HTML element interfaces
These interfaces represent specific HTML elements (or sets of related elements which have the same properties and methods associated with them).
  * `HTMLAnchorElement`
  * `HTMLAreaElement`
  * `HTMLAudioElement`
  * `HTMLBaseElement`
  * `HTMLBodyElement`
  * `HTMLBRElement`
  * `HTMLButtonElement`
  * `HTMLCanvasElement`
  * `HTMLDataElement`
  * `HTMLDataListElement`
  * `HTMLDetailsElement`
  * `HTMLDialogElement`
  * `HTMLDirectoryElement`
  * `HTMLDivElement`
  * `HTMLDListElement`
  * `HTMLElement`
  * `HTMLEmbedElement`
  * `HTMLFieldSetElement`
  * `HTMLFormElement`
  * `HTMLHRElement`
  * `HTMLHeadElement`
  * `HTMLHeadingElement`
  * `HTMLHtmlElement`
  * `HTMLIFrameElement`
  * `HTMLImageElement`
  * `HTMLInputElement`
  * `HTMLLabelElement`
  * `HTMLLegendElement`
  * `HTMLLIElement`
  * `HTMLLinkElement`
  * `HTMLMapElement`
  * `HTMLMediaElement`
  * `HTMLMenuElement`
  * `HTMLMetaElement`
  * `HTMLMeterElement`
  * `HTMLModElement`
  * `HTMLObjectElement`
  * `HTMLOListElement`
  * `HTMLOptGroupElement`
  * `HTMLOptionElement`
  * `HTMLOutputElement`
  * `HTMLParagraphElement`
  * `HTMLPictureElement`
  * `HTMLPreElement`
  * `HTMLProgressElement`
  * `HTMLQuoteElement`
  * `HTMLScriptElement`
  * `HTMLSelectElement`
  * `HTMLSlotElement`
  * `HTMLSourceElement`
  * `HTMLSpanElement`
  * `HTMLStyleElement`
  * `HTMLTableCaptionElement`
  * `HTMLTableCellElement`
  * `HTMLTableColElement`
  * `HTMLTableElement`
  * `HTMLTableRowElement`
  * `HTMLTableSectionElement`
  * `HTMLTemplateElement`
  * `HTMLTextAreaElement`
  * `HTMLTimeElement`
  * `HTMLTitleElement`
  * `HTMLTrackElement`
  * `HTMLUListElement`
  * `HTMLUnknownElement`
  * `HTMLVideoElement`


#### Deprecated HTML Element Interfaces
  * `HTMLMarqueeElement` Deprecated


#### Obsolete HTML Element Interfaces
  * `HTMLFontElement` Deprecated
  * `HTMLFrameElement` Deprecated
  * `HTMLFrameSetElement` Deprecated


### Web app and browser integration interfaces
These interfaces offer access to the browser window and document that contain the HTML, as well as to the browser's state, available plugins (if any), and various configuration options.
  * `BarProp`
  * `Navigator`
  * `Window`


#### Deprecated web app and browser integration interfaces
  * `External` Deprecated


#### Obsolete web app and browser integration interfaces
  * `Plugin` Deprecated
  * `PluginArray` Deprecated


### Form support interfaces
These interfaces provide structure and functionality required by the elements used to create and manage forms, including the `<form>` and `<input>` elements.
  * `FormDataEvent`
  * `HTMLFormControlsCollection`
  * `HTMLOptionsCollection`
  * `RadioNodeList`
  * `ValidityState`


### Canvas and image interfaces
These interfaces represent objects used by the Canvas API as well as the `<img>` element and `<picture>` elements.
  * `CanvasGradient`
  * `CanvasPattern`
  * `CanvasRenderingContext2D`
  * `ImageBitmap`
  * `ImageBitmapRenderingContext`
  * `ImageData`
  * `OffscreenCanvas`
  * `OffscreenCanvasRenderingContext2D`
  * `Path2D`
  * `TextMetrics`


### Media interfaces
The media interfaces provide HTML access to the contents of the media elements: `<audio>` and `<video>`.
  * `AudioTrack`
  * `AudioTrackList`
  * `MediaError`
  * `TextTrack`
  * `TextTrackCue`
  * `TextTrackCueList`
  * `TextTrackList`
  * `TimeRanges`
  * `TrackEvent`
  * `VideoTrack`
  * `VideoTrackList`


### Drag and drop interfaces
These interfaces are used by the HTML Drag and Drop API to represent individual draggable (or dragged) items, groups of dragged or draggable items, and to handle the drag and drop process.
  * `DataTransfer`
  * `DataTransferItem`
  * `DataTransferItemList`
  * `DragEvent`


### Page history interfaces
The History API interfaces let you access information about the browser's history, as well as to shift the browser's current tab forward and backward through that history.
  * `BeforeUnloadEvent`
  * `HashChangeEvent`
  * `History`
  * `Location`
  * `PageRevealEvent`
  * `PageSwapEvent`
  * `PageTransitionEvent`
  * `PopStateEvent`


### Web Components interfaces
These interfaces are used by the Web Components API to create and manage the available custom elements.
  * `CustomElementRegistry`


### Miscellaneous and supporting interfaces
These supporting object types are used in a variety of ways in the HTML DOM API. In addition, `PromiseRejectionEvent` represents the event delivered when a JavaScript `Promise` is rejected.
  * `DOMStringList`
  * `DOMStringMap`
  * `ErrorEvent`
  * `HTMLAllCollection`
  * `MimeType`
  * `MimeTypeArray`
  * `PromiseRejectionEvent`


### Interfaces belonging to other APIs
Several interfaces are technically defined in the HTML specification while actually being part of other APIs.
#### Web storage interfaces
The Web Storage API provides the ability for websites to store data either temporarily or permanently on the user's device for later re-use.
  * `Storage`
  * `StorageEvent`


#### Web Workers interfaces
These interfaces are used by the Web Workers API both to establish the ability for workers to interact with an app and its content, but also to support messaging between windows or apps.
  * `BroadcastChannel`
  * `DedicatedWorkerGlobalScope`
  * `MessageChannel`
  * `MessageEvent`
  * `MessagePort`
  * `SharedWorker`
  * `SharedWorkerGlobalScope`
  * `Worker`
  * `WorkerGlobalScope`
  * `WorkerLocation`
  * `WorkerNavigator`


#### WebSocket interfaces
These interfaces, defined by the HTML specification, are used by the WebSockets API.
  * `CloseEvent`
  * `WebSocket`


#### Server-sent events interfaces
The `EventSource` interface represents the source which sent or is sending server-sent events.
  * `EventSource`


## Examples
In this example, an `<input>` element's `input` event is monitored in order to update the state of a form's "submit" button based on whether or not a given field currently has a value.
### JavaScript
    
    const nameField = document.getElementById("userName");
    const sendButton = document.getElementById("sendButton");
    
    sendButton.disabled = true;
    // [note: this is disabled since it causes this article to always load with this example focused and scrolled into view]
    // nameField.focus();
    
    nameField.addEventListener("input", (event) => {
      const elem = event.target;
      const valid = elem.value.length !== 0;
    
      if (valid && sendButton.disabled) {
        sendButton.disabled = false;
      } else if (!valid && !sendButton.disabled) {
        sendButton.disabled = true;
      }
    });
    
This code uses the `Document` interface's `getElementById()` method to get the DOM object representing the `<input>` elements whose IDs are `userName` and `sendButton`. With these, we can access the properties and methods that provide information about and grant control over these elements.
The `HTMLInputElement` object for the "Send" button's `disabled` property is set to `true`, which disables the "Send" button so it can't be clicked. In addition, the user name input field is made the active focus by calling the `focus()` method it inherits from `HTMLElement`.
Then `addEventListener()` is called to add a handler for the `input` event to the user name input. This code looks at the length of the current value of the input; if it's zero, then the "Send" button is disabled if it's not already disabled. Otherwise, the code ensures that the button is enabled.
With this in place, the "Send" button is always enabled whenever the user name input field has a value, and disabled when it's empty.
### HTML
The HTML for the form looks like this:
    
    <p>Please provide the information below. Items marked with "*" are required.</p>
    <form action="" method="get">
      <p>
        <label for="userName" required>Your name:</label>
        <input type="text" id="userName" /> (*)
      </p>
      <p>
        <label for="userEmail">Email:</label>
        <input type="email" id="userEmail" />
      </p>
      <input type="submit" value="Send" id="sendButton" />
    </form>
    
### Result
>
### References
  * HTML elements reference
  * HTML attribute reference
  * Document Object Model (DOM) reference


### Guides
  * DOM scripting introduction


# NavigationActivation
The `NavigationActivation` interface of the Navigation API represents a recent cross-document navigation. It contains the navigation type and outgoing and inbound document history entries.
This object is accessed via the `PageSwapEvent.activation` and `Navigation.activation` properties. Note that, in each case, the `NavigationActivation` represents a different navigation:
  * `Navigation.activation` represents information about the navigation to the current page.
  * `PageSwapEvent.activation` represents information about the navigation to the next page.


## Instance properties
`entry` Read only Experimental
    
Contains a `NavigationHistoryEntry` object representing the history entry for the inbound ("to") document in the navigation. This is equivalent to the `Navigation.currentEntry` property at the moment the inbound document was activated.
`from` Read only Experimental
    
Contains a `NavigationHistoryEntry` object representing the history entry for the outgoing ("from") document in the navigation.
`navigationType` Read only Experimental
    
Contains a string indicating the type of navigation.
## Examples
    
    window.addEventListener("pagereveal", async (e) => {
      // If the "from" history entry does not exist, return
      if (!navigation.activation.from) return;
    
      // Only run this if an active view transition exists
      if (e.viewTransition) {
        const fromUrl = new URL(navigation.activation.from.url);
        const currentUrl = new URL(navigation.activation.entry.url);
    
        // Went from profile page to homepage
        // ~> Set VT names on the relevant list item
        if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {
          const profile = extractProfileNameFromUrl(fromUrl);
    
          // Set view-transition-name values on the elements to animate
          document.querySelector(`#${profile} span`).style.viewTransitionName =
            "name";
          document.querySelector(`#${profile} img`).style.viewTransitionName =
            "avatar";
    
          // Remove names after snapshots have been taken
          // so that we're ready for the next navigation
          await e.viewTransition.ready;
          document.querySelector(`#${profile} span`).style.viewTransitionName =
            "none";
          document.querySelector(`#${profile} img`).style.viewTransitionName =
            "none";
        }
    
        // Went to profile page
        // ~> Set VT names on the main title and image
        if (isProfilePage(currentUrl)) {
          // Set view-transition-name values on the elements to animate
          document.querySelector(`#detail main h1`).style.viewTransitionName =
            "name";
          document.querySelector(`#detail main img`).style.viewTransitionName =
            "avatar";
    
          // Remove names after snapshots have been taken
          // so that we're ready for the next navigation
          await e.viewTransition.ready;
          document.querySelector(`#detail main h1`).style.viewTransitionName =
            "none";
          document.querySelector(`#detail main img`).style.viewTransitionName =
            "none";
        }
      }
    });
    
Note: See List of Chrome DevRel team members for the live demo this code is taken from.
  * Navigation API
  * View Transition API


# Web NFC API
The Web NFC API allows exchanging data over NFC via light-weight NFC Data Exchange Format (NDEF) messages.
Note: Devices and tags have to be formatted and recorded specifically to support NDEF record format to be used with Web NFC. Low-level operations are currently not supported by the API, however there is a public discussion about API that would add such functionality.
## Interfaces
`NDEFMessage`
    
Interface that represents NDEF messages that can be received from or sent to a compatible tag via a `NDEFReader` object. A message is composed of metadata and NDEF Records.
`NDEFReader` Experimental
    
Interface that enables reading and writing messages from compatible NFC tags. The messages are represented as `NDEFMessage` objects.
`NDEFRecord`
    
Interface that represents NDEF records that can be included in an NDEF message.
# Crypto
Note: This feature is available in Web Workers.
The `Crypto` interface represents basic cryptography features available in the current context. It allows access to a cryptographically strong random number generator and to cryptographic primitives.
The `Crypto` is available in windows using the `Window.crypto` property and in workers using the `WorkerGlobalScope.crypto` property.
## Instance properties
This interface implements properties defined on `RandomSource`.
`Crypto.subtle` Read only Secure context
    
Returns a `SubtleCrypto` object providing access to common cryptographic primitives, like hashing, signing, encryption, or decryption.
## Instance methods
This interface implements methods defined on `RandomSource`.
`Crypto.getRandomValues()`
    
Fills the passed `TypedArray` with cryptographically sound random values.
`Crypto.randomUUID()` Secure context
    
Returns a randomly generated, 36 character long v4 UUID.
  * Web security
  * Secure contexts
  * Features restricted to secure contexts
  * Transport Layer Security
  * Strict-Transport-Security


# MediaTrackSettings
The `MediaTrackSettings` dictionary is used to return the current values configured for each of a `MediaStreamTrack`'s settings. These values will adhere as closely as possible to any constraints previously described using a `MediaTrackConstraints` object and set using `applyConstraints()`, and will adhere to the default constraints for any properties whose constraints haven't been changed, or whose customized constraints couldn't be matched.
To learn more about how constraints and settings work, see Capabilities, constraints, and settings.
## Instance properties
Some or all of the following will be included in the object, either because it's not supported by the browser or because it's not available due to context. For example, because RTP doesn't provide some of these values during negotiation of a WebRTC connection, a track associated with a `RTCPeerConnection` will not include certain values, such as `facingMode` or `groupId`.
### Instance properties of all media tracks
`deviceId`
    
A string indicating the current value of the `deviceId` property. The device ID is an origin-unique string identifying the source of the track; this is usually a GUID. This value is specific to the source of the track's data and is not usable for setting constraints; it can, however, be used for initially selecting media when calling `MediaDevices.getUserMedia()`.
`groupId`
    
A string indicating the current value of the `groupId` property. The group ID is a browsing session-unique string identifying the source group of the track. Two devices (as identified by the `deviceId`) are considered part of the same group if they are from the same physical device. For instance, the audio input and output devices for the speaker and microphone built into a phone would share the same group ID, since they're part of the same physical device. The microphone on a headset would have a different ID, though. This value is specific to the source of the track's data and is not usable for setting constraints; it can, however, be used for initially selecting media when calling `MediaDevices.getUserMedia()`.
### Instance properties of audio tracks
`autoGainControl`
    
A Boolean which indicates the current value of the `autoGainControl` property, which is `true` if automatic gain control is enabled and is `false` otherwise.
`channelCount`
    
A long integer value indicating the current value of the `channelCount` property, specifying the number of audio channels present on the track (therefore indicating how many audio samples exist in each audio frame). This is 1 for mono, 2 for stereo, and so forth.
`echoCancellation`
    
A Boolean indicating the current value of the `echoCancellation` property, specifying `true` if echo cancellation is enabled, otherwise `false`.
`latency`
    
A double-precision floating point value indicating the current value of the `latency` property, specifying the audio latency, in seconds. Latency is the amount of time which elapses between the start of processing the audio and the data being available to the next stop in the audio utilization process. This value is a target value; actual latency may vary to some extent for various reasons.
`noiseSuppression`
    
A Boolean which indicates the current value of the `noiseSuppression` property, which is `true` if noise suppression is enabled and is `false` otherwise.
`sampleRate`
    
A long integer value indicating the current value of the `sampleRate` property, specifying the sample rate in samples per second of the audio data. Standard CD-quality audio, for example, has a sample rate of 41,000 samples per second.
`sampleSize`
    
A long integer value indicating the current value of the `sampleSize` property, specifying the linear size, in bits, of each audio sample. CD-quality audio, for example, is 16-bit, so this value would be 16 in that case.
`suppressLocalAudioPlayback`
    
Controls whether the audio playing in a tab will continue to be played out of a user's local speakers when the tab is captured.
`volume` Deprecated Non-standard
    
A double-precision floating point value indicating the current value of the `volume` property, specifying the volume level of the track. This value will be between 0.0 (silent) to 1.0 (maximum supported volume).
### Instance properties of video tracks
`aspectRatio`
    
A double-precision floating point value indicating the current value of the `aspectRatio` property, specified precisely to 10 decimal places. This is the width of the image in pixels divided by its height in pixels. Common values include 1.3333333333 (for the classic television 4:3 "standard" aspect ratio, also used on tablets such as Apple's iPad), 1.7777777778 (for the 16:9 high-definition widescreen aspect ratio), and 1.6 (for the 16:10 aspect ratio common among widescreen computers and tablets).
`facingMode`
    
A string indicating the current value of the `facingMode` property, specifying the direction the camera is facing. The value will be one of:
`"user"`
    
A camera facing the user (commonly known as a "selfie cam"), used for self-portraiture and video calling.
`"environment"`
    
A camera facing away from the user (when the user is looking at the screen). This is typically the highest quality camera on the device, used for general photography.
`"left"`
    
A camera facing toward the environment to the user's left.
`"right"`
    
A camera facing toward the environment to the user's right.
`frameRate`
    
A double-precision floating point value indicating the current value of the `frameRate` property, specifying how many frames of video per second the track includes. If the value can't be determined for any reason, the value will match the vertical sync rate of the device the user agent is running on.
`height`
    
A long integer value indicating the current value of the `height` property, specifying the height of the track's video data in pixels.
`width`
    
A long integer value indicating the current value of the `width` property, specifying the width of the track's video data in pixels.
`resizeMode`
    
A string indicating the current value of the `resizeMode` property, specifying the mode used by the user agent to derive the resolution of the track. The value will be one of:
`"none"`
    
The track has the resolution offered by the camera, its driver or the OS.
`"crop-and-scale"`
    
The track's resolution might be the result of the user agent using cropping or downscaling from a higher camera resolution.
### Instance properties of shared screen tracks
Tracks containing video shared from a user's screen (regardless of whether the screen data comes from the entire screen or a portion of a screen, like a window or tab) are generally treated like video tracks, with the exception that they also support the following added settings:
`cursor`
    
A string which indicates whether or not the mouse cursor is being included in the generated stream and under what conditions. Possible values are:
`always`
    
The mouse is always visible in the video content of the {domxref("MediaStream"), unless the mouse has moved outside the area of the content.
`motion`
    
The mouse cursor is always included in the video if it's moving, and for a short time after it stops moving.
`never`
    
The mouse cursor is never included in the shared video.
`displaySurface`
    
A string which specifies the type of source the track contains; one of:
`browser`
    
The stream contains the contents of a single browser tab selected by the user.
`monitor`
    
The stream's video track contains the entire contents of one or more of the user's screens.
`window`
    
The stream contains a single window selected by the user for sharing.
`logicalSurface`
    
A Boolean value which, if `true`, indicates that the video contained in the stream's video track contains a background rendering context, rather than a user-visible one. This is `false` if the video being captured is coming from a foreground (user-visible) source.
`screenPixelRatio`
    
A number representing the ratio of the physical size of a pixel on the captured display surface (displayed at its physical resolution) to the logical size of a CSS pixel on the capturing screen (displayed at its logical resolution). It cannot be used as a constraint or capability.
  * `MediaDevices.getUserMedia()`
  * `MediaDevices.getDisplayMedia()`
  * `MediaStreamTrack.getConstraints()`
  * `MediaStreamTrack.applyConstraints()`
  * `MediaStreamTrack.getSettings()`


# TextTrackList
The `TextTrackList` interface is used to represent a list of the text tracks defined for the associated video or audio element, with each track represented by a separate `textTrack` object in the list.
Text tracks can be added to a media element declaratively using the `<track>` element or programmatically using the `HTMLMediaElement.addTextTrack()` method.
An instance of this object can be retrieved using the `textTracks` property of an `HTMLMediaElement` object.
For a given `HTMLMediaElement` object media, the individual tracks can be accessed using:
  * `media.TextTracks[n]`, to get the n-th text track from the object's list of text tracks
  * the `media.textTracks.getTrackById()` method

EventTarget  TextTrackList 
## Instance properties
This interface also inherits properties from its parent interface, `EventTarget`.
`length` Read only
    
The number of tracks in the list.
## Instance methods
This interface also inherits methods from its parent interface, `EventTarget`.
`getTrackById()`
    
Returns the `TextTrack` found within the `TextTrackList` whose `id` matches the specified string. If no match is found, `null` is returned.
## Events
`addtrack`
    
Fired when a new text track has been added to the media element. Also available via the `onaddtrack` property.
`change`
    
Fired when a text track has been made active or inactive. Also available via the `onchange` property.
`removetrack`
    
Fired when a new text track has been removed from the media element. Also available via the `onremovetrack` property.
## Usage notes
In addition to being able to obtain direct access to the text tracks present on a media element, `TextTrackList` lets you set event handlers on the `addtrack` and `removetrack` events, so that you can detect when tracks are added to or removed from the media element's stream.
## Examples
>
### Getting a video element's text track list
To get a media element's `TextTrackList`, use its `textTracks` property.
    
    const textTracks = document.querySelector("video").textTracks;
    
### Monitoring track count changes
In this example, we have an app that displays information about the number of channels available. To keep it up to date, handlers for the `addtrack` and `removetrack` events are set up.
    
    textTracks.onaddtrack = updateTrackCount;
    textTracks.onremovetrack = updateTrackCount;
    
    function updateTrackCount(event) {
      trackCount = textTracks.length;
      drawTrackCountIndicator(trackCount);
    }
    
# SVGStyleElement
The `SVGStyleElement` interface corresponds to the SVG `<style>` element.
EventTarget  Node  Element  SVGElement  SVGStyleElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGStyleElement.type` Deprecated
    
A string corresponding to the `type` attribute of the given element.
`SVGStyleElement.media`
    
A string corresponding to the `media` attribute of the given element.
`SVGStyleElement.title`
    
A string corresponding to the `title` attribute of the given element.
`SVGStyleElement.sheet` Read only
    
Returns the `CSSStyleSheet` object associated with the given element, or `null` if there is none.
`SVGStyleElement.disabled`
    
A boolean value indicating whether or not the associated stylesheet is disabled.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.
## Examples
>
### Dynamically adding an SVG style element
To dynamically create an SVG style element (`SVGStyleElement`), you need to use `Document.createElementNS()`, specifying a `style` element in the SVG namespace.
Note: `Document.createElement()` can't be used to create SVG style elements (it returns an `HTMLStyleElement`).
Given the following SVG element:
    
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <circle cx="50" cy="50" r="25" />
    </svg>
    
You can create an SVG style element as shown:
    
    // Get the SVG element object by tag name
    const svg = document.querySelector("svg");
    
    // Create the `style` element in the SVG namespace
    const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
    const node = document.createTextNode("circle { fill: red; }");
    style.appendChild(node);
    
    // Append the style element to the SVG element
    svg.appendChild(style);
    
### Accessing an existing SVG style
You can access an SVG style element that was defined in HTML (or an SVG file) using the normal HTML methods for getting tags, ids, and so on. These include: `Document.getElementsByTagName()`, `Document.getElementById()`, `Document.querySelector()`, `Document.querySelectorAll()`, and so on.
For example, consider the HTML below that defines an SVG file with a style element.
    
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <style id="circle_style_id">
        circle {
          fill: gold;
          stroke: green;
          stroke-width: 3px;
        }
      </style>
      <circle cx="50" cy="50" r="25" />
    </svg>
    
To fetch the first `style` element in the first `svg` element, you might use `Document.querySelector()` as shown below.
    
    const svg = document.querySelector("svg");
    const style = svg.querySelector("style");
    
Alternatively, you can could use `Document.getElementById()`, specifying the tag id:
    
    const svg = document.querySelector("svg");
    const style = svg.getElementById("circle_style_id");
    
Or just get the element from document by id (in this case using `document.querySelector()`):
    
    const style = document.querySelector("#circle_style_id");
    
## Getting and setting properties
This example demonstrates how to get and set the properties of a style element, which in this case was specified in an SVG definition.
### HTML
The HTML contains an SVG definition for a `<circle>` with a `<style>` element, along with an HTML `<button>` element that will be used to enable and disable the style, and an HTML `<textarea>` element for logging the property values.
    
    <button>Disable</button>
    <textarea id="log" rows="6" cols="90"></textarea>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <style id="circle_style_id" media="(width >= 600px)">
        circle {
          fill: gold;
          stroke: green;
          stroke-width: 3px;
        }
      </style>
      <circle cx="60" cy="60" r="50" />
    </svg>
    
Note that above we have set the `media` attribute on the `style` tag. We have not set `type` as it is deprecated, or `disabled` because there is no such attribute (only the property on the element).
### JavaScript
The code below gets the `style` element (an `SVGStyleElement`) using its id.
    
    const svg = document.querySelector("svg");
    const style = svg.getElementById("circle_style_id");
    
We then add a function to log the style properties. This is called after initialization, whenever the frame resizes, and if the button is pressed.
    
    // Get logging text area
    const log = document.getElementById("log");
    
    function setLogText() {
      // Log current values of properties
      log.value = `style.media: ${style.media} (frame width: ${window.innerWidth})\n`; // 'all' by default
      log.value += `style.title: ${style.title}\n`; // no default value
      log.value += `style.disabled: ${style.disabled}\n`; // 'false' by default
      log.value += `style.type: ${style.type}\n`; // deprecated (do not use)
      log.value += `style.sheet.rules[0].cssText: ${style.sheet.rules[0].cssText}\n`;
    }
    
    // Log initial property values
    setLogText();
    
    // Log when the frame resizes
    addEventListener("resize", () => {
      setLogText();
    });
    
Last of all we set an event handler for the button. When the button is clicked the `disabled` property is toggled. This also updates the log and the button text.
    
    const button = document.querySelector("button");
    
    button.addEventListener("click", () => {
      style.disabled = !style.disabled;
      button.textContent = style.disabled ? "Enable" : "Disable";
    
      // Log after button presses
      setLogText();
    });
    
### Result
The result is shown below. Toggle the button to enable and disable the SVG style element. If the SVG style is not disabled, you can also resize the window width to see the effect of the `media` property on the style when the frame holding the live example is 600px wide.
  * `HTMLStyleElement`


# FileSystemDirectoryHandle
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `FileSystemDirectoryHandle` interface of the File System API provides a handle to a file system directory.
The interface can be accessed via the `window.showDirectoryPicker()`, `StorageManager.getDirectory()`, `DataTransferItem.getAsFileSystemHandle()`, and `FileSystemDirectoryHandle.getDirectoryHandle()` methods.
FileSystemHandle  FileSystemDirectoryHandle 
## Instance properties
Inherits properties from its parent, `FileSystemHandle`.
## Instance methods
Inherits methods from its parent, `FileSystemHandle`.
Regular methods:
`FileSystemDirectoryHandle.getDirectoryHandle()`
    
Returns a `Promise` fulfilled with a `FileSystemDirectoryHandle` for a subdirectory with the specified name within the directory handle on which the method is called.
`FileSystemDirectoryHandle.getFileHandle()`
    
Returns a `Promise` fulfilled with a `FileSystemFileHandle` for a file with the specified name, within the directory the method is called.
`FileSystemDirectoryHandle.removeEntry()`
    
Attempts to asynchronously remove an entry if the directory handle contains a file or directory called the name specified.
`FileSystemDirectoryHandle.resolve()`
    
Returns a `Promise` fulfilled with an `Array` of directory names from the parent handle to the specified child entry, with the name of the child entry as the last array item.
Asynchronous iterator methods:
`FileSystemDirectoryHandle.entries()`
    
Returns a new async iterator of a given object's own enumerable property `[key, value]` pairs.
`FileSystemDirectoryHandle.keys()`
    
Returns a new async iterator containing the keys for each item in `FileSystemDirectoryHandle`.
`FileSystemDirectoryHandle.values()`
    
Returns a new async iterator containing the values for each index in the `FileSystemDirectoryHandle` object.
`FileSystemDirectoryHandle[Symbol.asyncIterator]()`
    
Returns a new async iterator of a given object's own enumerable property `[key, value]` pairs.
## Examples
>
### Return directory handle
The following example returns a directory handle with the specified name; if the directory does not already exist it is created.
    
    const dirName = "directoryToGetName";
    
    // assuming we have a directory handle: 'currentDirHandle'
    const subDir = currentDirHandle.getDirectoryHandle(dirName, { create: true });
    
### Return file path
The following asynchronous function uses `resolve()` to find the path to a chosen file, relative to a specified directory handle.
    
    async function returnPathDirectories(directoryHandle) {
      // Get a file handle by showing a file picker:
      const handle = await self.showOpenFilePicker();
      if (!handle) {
        // User cancelled, or otherwise failed to open a file.
        return;
      }
    
      // Check if handle exists inside our directory handle
      const relativePaths = await directoryHandle.resolve(handle);
    
      if (relativePath === null) {
        // Not inside directory handle
      } else {
        // relativePath is an array of names, giving the relative path
    
        for (const name of relativePaths) {
          // log each entry
          console.log(name);
        }
      }
    }
    
### Return handles for all files in a directory
The following example scans recursively through a directory to return `FileSystemFileHandle` objects for each file in that directory:
    
    async function* getFilesRecursively(entry) {
      if (entry.kind === "file") {
        const file = await entry.getFile();
        if (file !== null) {
          file.relativePath = getRelativePath(entry);
          yield file;
        }
      } else if (entry.kind === "directory") {
        for await (const handle of entry.values()) {
          yield* getFilesRecursively(handle);
        }
      }
    }
    for await (const fileHandle of getFilesRecursively(directoryHandle)) {
      console.log(fileHandle);
    }
    
  * File System API
  * The File System Access API: simplifying access to local files


# AudioParamMap
The `AudioParamMap` interface of the Web Audio API represents an iterable and read-only set of multiple audio parameters.
An `AudioParamMap` instance is a read-only `Map`-like object, in which each key is the name string for a parameter, and the corresponding value is an `AudioParam` containing the value of that parameter.
## Instance properties
The following methods are available to all read-only `Map`-like objects (the below links are to the `Map` global object reference page).
`size`
    
Returns the number of entries in the map.
## Instance methods
The following methods are available to all read-only `Map`-like objects (the below links are to the `Map` global object reference page).
`entries()`
    
Returns a new iterator object that yields entries in `[key, value]` pairs in the map in insertion order.
`forEach()`
    
Calls a provided callback function once for each value and key present in the map, in insertion order.
`get()`
    
Returns the `AudioParam` value associated with the string key, or `undefined` if there is none.
`has()`
    
Returns a boolean indicating whether a key is present in the map or not.
`keys()`
    
Returns a new iterator object that yields the string keys in the map in insertion order.
`values()`
    
Returns a new iterator object that yields the `AudioParam` values in the map in insertion order.
# XMLHttpRequestEventTarget
Note: This feature is available in Web Workers, except for Service Workers.
`XMLHttpRequestEventTarget` is the interface that describes the event handlers shared on `XMLHttpRequest` and `XMLHttpRequestUpload`.
You don't use `XMLHttpRequestEventTarget` directly; instead you interact with the sub classes.
## Events
The following events are made available to `XMLHttpRequest` and `XMLHttpRequestUpload`:
`abort`
    
Fired when a request has been aborted, for example because the program called `XMLHttpRequest.abort()`. Also available via the `onabort` event handler property.
`error`
    
Fired when the request encountered an error. Also available via the `onerror` event handler property.
`load`
    
Fired when a request transaction completes successfully. Also available via the `onload` event handler property.
`loadend`
    
Fired when a request has completed, whether successfully (after `load`) or unsuccessfully (after `abort` or `error`). Also available via the `onloadend` event handler property.
`loadstart`
    
Fired when a request has started to load data. Also available via the `onloadstart` event handler property.
`progress`
    
Fired periodically when a request receives more data. Also available via the `onprogress` event handler property.
`timeout`
    
Fired when progress is terminated due to preset time expiring. Also available via the `ontimeout` event handler property.
  * `XMLHttpRequest`
  * `XMLHttpRequestUpload`


# XSLTProcessor
An `XSLTProcessor` applies an XSLT stylesheet transformation to an XML document to produce a new XML document as output. It has methods to load the XSLT stylesheet, to manipulate `<xsl:param>` parameter values, and to apply the transformation to documents.
## Constructor
`XSLTProcessor()`
    
Create a new `XSLTProcessor`.
## Instance methods
`XSLTProcessor.importStylesheet()`
    
Imports the XSLT stylesheet. If the given node is a document node, you can pass in a full XSL Transform or a literal result element transform; otherwise, it must be an `<xsl:stylesheet>` or `<xsl:transform>` element.
`XSLTProcessor.transformToFragment()`
    
Transforms the node source by applying the XSLT stylesheet imported using the `XSLTProcessor.importStylesheet()` function. The owner document of the resulting document fragment is the owner node.
`XSLTProcessor.transformToDocument()`
    
Transforms the node source applying the XSLT stylesheet given importing using the `XSLTProcessor.importStylesheet()` function.
`XSLTProcessor.setParameter()`
    
Sets a parameter (`<xsl:param>`) value in the XSLT stylesheet that was imported.
`XSLTProcessor.getParameter()`
    
Gets the value of a parameter from the XSLT stylesheet.
`XSLTProcessor.removeParameter()`
    
Removes the parameter if it was previously set. This will make the `XSLTProcessor` use the default value for the parameter as specified in the XSLT stylesheet.
`XSLTProcessor.clearParameters()`
    
Removes all set parameters from the `XSLTProcessor`. The `XSLTProcessor` will then use the default values specified in the XSLT stylesheet.
`XSLTProcessor.reset()`
    
Removes all parameters and stylesheets from the `XSLTProcessor`.
## Instance properties
This are no properties for this interface.
## Examples
>
### Instantiating an `XSLTProcessor`
    
    async function init() {
      const parser = new DOMParser();
      const xsltProcessor = new XSLTProcessor();
    
      // Load the XSLT file, example1.xsl
      const xslResponse = await fetch("example1.xsl");
      const xslText = await xslResponse.text();
      const xslStylesheet = parser.parseFromString(xslText, "application/xml");
      xsltProcessor.importStylesheet(xslStylesheet);
    
      // process the file
      // …
    }
    
### Creating an XML document based on part of a document's DOM
For the actual transformation, `XSLTProcessor` requires an XML document, which is used in conjunction with the imported XSL file to produce the final result. The XML document can be a separate XML file loaded using `fetch()`, or it can be part of the existing page.
To process part of a page's DOM, it is necessary to first create an XML document in memory. Assuming that the DOM to be processed is contained by an element with the id `example`, that DOM can be "cloned" using the in-memory XML document's `Document.importNode()` method. `Document.importNode()` allows transferring a DOM fragment between documents, in this case from an HTML document to an XML document. The first parameter references the DOM node to clone. By making the second parameter "true", it will clone all descendants as well (a deep clone). The cloned DOM can then be inserted into the XML document using `Node.appendChild()`, as shown below.
    
    // Create a new XML document in memory
    const xmlRef = document.implementation.createDocument("", "", null);
    
    // We want to move a part of the DOM from an HTML document to an XML document.
    // importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone
    const myNode = document.getElementById("example");
    const clonedNode = xmlRef.importNode(myNode, true);
    
    // Add the cloned DOM into the XML document
    xmlRef.appendChild(clonedNode);
    
Once the stylesheet has been imported, `XSLTProcessor` has to perform two methods for the actual transformation, namely `XSLTProcessor.transformToDocument()` and `XSLTProcessor.transformToFragment()`. `XSLTProcessor.transformToDocument()` returns a full XML document while `XSLTProcessor.transformToFragment()` returns a document fragment that can be easily added to an existing document. Both take in the XML document as the first parameter that will be transformed. `XSLTProcessor.transformToFragment()` requires a second parameter, namely the document object that will own the generated fragment. If the generated fragment will be inserted into the current HTML document, passing in document is enough.
### Creating an XML document From a String 'XML Soup'
You can use the `DOMParser` to create an XML document from a string of XML.
    
    const parser = new DOMParser();
    const doc = parser.parseFromString(str, "text/xml");
    
### Performing the transformation
    
    const fragment = xsltProcessor.transformToFragment(xmlRef, document);
    
### Basic Example
The basic example will load an XML file and apply a XSL transformation on it. These are the same files used in the Generating HTML example. The XML file describes an article and the XSL file formats the information for display.
#### XML
    
    <?xml version="1.0"?>
    <myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
      <myNS:Title>My Article</myNS:Title>
      <myNS:Authors>
        <myNS:Author company="Foopy Corp.">Mr. Foo</myNS:Author>
        <myNS:Author>Mr. Bar</myNS:Author>
      </myNS:Authors>
      <myNS:Body>
        The <b>rain</b> in <u>Spain</u> stays mainly in the plains.
      </myNS:Body>
    </myNS:Article>
    
#### XSLT
    
    <?xml version="1.0"?>
    <xsl:stylesheet version="1.0"
                       xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                       xmlns:myNS="http://devedge.netscape.com/2002/de">
    
      <xsl:output method="html" />
    
      <xsl:template match="/">
        <html>
    
          <head>
    
            <title>
              <xsl:value-of select="/myNS:Article/myNS:Title"/>
            </title>
    
            <style>
              .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
            </style>
    
          </head>
    
          <body>
            <p class="myBox">
              <span class="title">
                <xsl:value-of select="/myNS:Article/myNS:Title"/>
              </span> <br />
    
              Authors:   <br />
                <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
              </p>
    
            <p class="myBox">
              <xsl:apply-templates select="//myNS:Body"/>
            </p>
    
          </body>
    
        </html>
      </xsl:template>
    
      <xsl:template match="myNS:Author">
         --   <xsl:value-of select="." />
    
        <xsl:if test="@company">
         ::   <b>  <xsl:value-of select="@company" />  </b>
        </xsl:if>
    
        <br />
      </xsl:template>
    
      <xsl:template match="myNS:Body">
        <xsl:copy>
          <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
      </xsl:template>
    
      <xsl:template match="@*|node()">
          <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
          </xsl:copy>
      </xsl:template>
    </xsl:stylesheet>
    
The example loads both the .xsl (`xslStylesheet`) and the .xml (`xmlDoc`) files into memory. The .xsl file is then imported (`xsltProcessor.importStylesheet(xslStylesheet)`) and the transformation run (`xsltProcessor.transformToFragment(xmlDoc, document)`). This allows fetching of data after the page has been loaded, without initiating a fresh page load.
#### JavaScript
    
    async function init() {
      const parser = new DOMParser();
      const xsltProcessor = new XSLTProcessor();
    
      // Load the XSLT file, example1.xsl
      const xslResponse = await fetch("example1.xsl");
      const xslText = await xslResponse.text();
      const xslStylesheet = parser.parseFromString(xslText, "application/xml");
      xsltProcessor.importStylesheet(xslStylesheet);
    
      // Load the XML file, example1.xml
      const xmlResponse = await fetch("example1.xml");
      const xmlText = await xmlResponse.text();
      const xmlDoc = parser.parseFromString(xmlText, "application/xml");
    
      const fragment = xsltProcessor.transformToFragment(xmlDoc, document);
    
      document.getElementById("example").textContent = "";
      document.getElementById("example").appendChild(fragment);
    }
    
    init();
    
### Advanced example
This advanced example sorts several divs based on their content. The example allows sorting the content multiple times, alternating between ascending and descending order. The JavaScript loads the .xsl file only on the first sort and sets the `xslLoaded` variable to true once it has finished loading the file. Using the `XSLTProcessor.getParameter()` method, the code can figure whether to sort in ascending or descending order. It defaults to ascending if the parameter is empty (the first time the sorting happens, as there is no value for it in the XSLT file). The sorting value is set using `XSLTProcessor.setParameter()`.
The XSLT file has a parameter called `myOrder` that JavaScript sets to change the sorting method. The `xsl:sort` element's order attribute can access the value of the parameter using `$myOrder`. However, the value needs to be an XPATH expression and not a string, so `{$myOrder}` is used. Using {} evaluates the content as an XPath expression.
Once the transformation is complete, the result is appended to the document, as shown in this example.
#### XHTML
    
    <div id="example">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
    </div>
    
#### JavaScript
    
    let xslRef;
    let xslLoaded = false;
    const parser = new DOMParser();
    const xsltProcessor = new XSLTProcessor();
    let myDOM;
    
    let xmlRef = document.implementation.createDocument("", "", null);
    
    async function sort() {
      if (!xslLoaded) {
        const response = await fetch("example2.xsl");
        const xslText = await response.text();
        xslRef = parser.parseFromString(xslText, "application/xml");
        xsltProcessor.importStylesheet(xslRef);
        xslLoaded = true;
      }
    
      // Create a new XML document in memory
      xmlRef = document.implementation.createDocument("", "", null);
    
      // We want to move a part of the DOM from an HTML document to an XML document.
      // importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone
      const myNode = document.getElementById("example");
      const clonedNode = xmlRef.importNode(myNode, true);
    
      // After cloning, we append
      xmlRef.appendChild(clonedNode);
    
      // Set the sorting parameter in the XSL file
      const sortVal = xsltProcessor.getParameter(null, "myOrder");
    
      if (sortVal === "" || sortVal === "descending") {
        xsltProcessor.setParameter(null, "myOrder", "ascending");
      } else {
        xsltProcessor.setParameter(null, "myOrder", "descending");
      }
    
      // Initiate the transformation
      const fragment = xsltProcessor.transformToFragment(xmlRef, document);
    
      // Clear the contents
      document.getElementById("example").textContent = "";
    
      myDOM = fragment;
    
      // Add the new content from the transformation
      document.getElementById("example").appendChild(fragment);
    }
    
#### XSLT
    
    <?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
      <xsl:output method="html" indent="yes" />
    
      <xsl:param name="myOrder" />
    
      <xsl:template match="/">
    
        <xsl:apply-templates select="/div//div">
          <xsl:sort select="." data-type="number" order="{$myOrder}" />
        </xsl:apply-templates>
      </xsl:template>
    
      <xsl:template match="div">
        <xsl:copy-of select="." />
      </xsl:template>
    </xsl:stylesheet>
    
  * XSLT
  * Transforming with XSLT


# SVGAnimatedPreserveAspectRatio
The `SVGAnimatedPreserveAspectRatio` interface represents attributes of type `SVGPreserveAspectRatio` which can be animated.
## Instance properties
`baseVal` Read only
    
An `SVGPreserveAspectRatio` that represents the base value of the given attribute before applying any animations.
`animVal` Read only
    
An `SVGPreserveAspectRatio` that represents the current animated value of the given attribute. If the given attribute is not currently being animated, then the `SVGPreserveAspectRatio` will have the same contents as `baseVal`. The object referenced by `animVal` is always distinct from the one referenced by `baseVal`, even when the attribute is not animated.
## Instance methods
The `SVGAnimatedPreserveAspectRatio` interface do not provide any specific methods.
# FragmentDirective
The `FragmentDirective` interface is an object exposed to allow code to check whether or not a browser supports text fragments.
It is accessed via the `Document.fragmentDirective` property.
## Instance properties
None.
## Instance methods
None.
## Examples
>
### Checking if text fragments are supported
The code below logs whether or not text fragments are supported in your browser by checking that `Document.fragmentDirective` is defined. Note that the object is empty, and at present is mainly intended for feature detection. In the future, it might include other information.
    
    if (document.fragmentDirective) {
      log("Your browser supports text fragments.");
    } else {
      log("Text fragments are not supported in your browser.");
    }
    
  * `::target-text`


# HTMLTextAreaElement
The `HTMLTextAreaElement` interface provides properties and methods for manipulating the layout and presentation of `<textarea>` elements.
EventTarget  Node  Element  HTMLElement  HTMLTextAreaElement 
## Instance properties
Also inherits properties from its parent interface, `HTMLElement`.
`autocomplete`
    
A string that represents the element's `autocomplete` attribute.
`cols`
    
A number that represents the element's `cols` attribute, indicating the visible width of the text area.
`defaultValue`
    
A string that represents the control's default value, which behaves like the `Node.textContent` property.
`dirName`
    
A string that represents the directionality of the element.
`disabled`
    
A boolean that represents the element's `disabled` attribute, indicating that the control is not available for interaction.
`form` Read only
    
Returns a reference to the parent form element. If this element is not contained in a form element, it can be the `id` attribute of any `<form>` element in the same document or the value `null`.
`labels` Read only
    
Returns a `NodeList` of the `<label>` elements associated with this element.
`maxLength`
    
A number that represents the element's `maxlength` attribute, indicating the maximum number of characters the user can enter. This constraint is evaluated only when the value changes.
`minLength`
    
A number that represents the element's `minlength` attribute, indicating the minimum number of characters the user can enter. This constraint is evaluated only when the value changes.
`name`
    
A string that represents the element's `name` attribute, containing the name of the control.
`placeholder`
    
A string that represents the element's `placeholder` attribute, containing a hint to the user about what to enter in the control.
`readOnly`
    
A boolean that represents the element's `readonly` attribute, indicating that the user cannot modify the value of the control.
`required`
    
A boolean that represents the element's `required` attribute, indicating that the user must specify a value before submitting the form.
`rows`
    
A number that represents the element's `rows` attribute, indicating the number of visible text lines for the control.
`selectionDirection`
    
A string that represents the direction in which selection occurred. This is `forward` if selection was performed in the start-to-end direction of the current locale, or `backward` for the opposite direction. This can also be `none` if the direction is unknown.
`selectionEnd`
    
A number that represents the index of the end of selected text. If no text is selected, it contains the index of the character that follows the input cursor. On being set, the control behaves as if `setSelectionRange()` had been called with this as the second argument, and `selectionStart` as the first argument.
`selectionStart`
    
A number that represents the index of the beginning of selected text. If no text is selected, it contains the index of the character that follows the input cursor. On being set, the control behaves as if `setSelectionRange()` had been called with this as the first argument and `selectionEnd` as the second argument.
`textLength` Read only
    
Returns the code point length of the control's `value`. Same as reading `value.length`.
`type` Read only
    
Returns the string `textarea`.
`validationMessage` Read only
    
Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation (`willValidate` is `false`), or it satisfies its constraints.
`validity` Read only
    
Returns the validity state that this element is in.
`value`
    
A string that represents the raw value contained in the control.
`willValidate` Read only
    
Returns whether the element is a candidate for constraint validation. `false` if any conditions bar it from constraint validation, including its `readOnly` or `disabled` property is `true`.
`wrap`
    
A string that represents the element's `wrap` attribute, indicating how the control wraps text.
## Instance methods
Also inherits methods from its parent interface, `HTMLElement`.
`checkValidity()`
    
Returns `false` if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires a cancelable `invalid` event at the control. It returns `true` if the control is not a candidate for constraint validation, or if it satisfies its constraints.
`reportValidity()`
    
This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable `invalid` event at the element, and returns `false`; if there are no problems, it returns `true`.
`select()`
    
Selects the contents of the control.
`setCustomValidity()`
    
Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
`setRangeText()`
    
Replaces a range of text in the element with new text.
`setSelectionRange()`
    
Selects a range of text in the element (but does not focus it).
## Events
Also inherits events from its parent interface, `HTMLElement`.
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface:
`select` event
    
Fires when some text has been selected.
`selectionchange` event
    
Fires when the text selection in a `<textarea>` element has been changed.
## Examples
>
### Autogrowing textarea example
Make a textarea autogrow while typing:
#### JavaScript
    
    function autoGrow(field) {
      if (field.scrollHeight > field.clientHeight) {
        field.style.height = `${field.scrollHeight}px`;
      }
    }
    
    document.querySelector("textarea").addEventListener("keyup", (e) => {
      autoGrow(e.target);
    });
    
#### CSS
    
    textarea.no-scrollbars {
      overflow: hidden;
      width: 300px;
      height: 100px;
    }
    
#### HTML
    
    <form>
      <fieldset>
        <legend>Your comments</legend>
        <p><textarea class="no-scrollbars"></textarea></p>
        <p><input type="submit" value="Send" /></p>
      </fieldset>
    </form>
    
### Insert HTML tags example
Insert some HTML tags in a textarea:
    
    function insert(startTag, endTag) {
      const textArea = document.myForm.myTextArea;
      const start = textArea.selectionStart;
      const end = textArea.selectionEnd;
      const oldText = textArea.value;
    
      const prefix = oldText.substring(0, start);
      const inserted = startTag + oldText.substring(start, end) + endTag;
      const suffix = oldText.substring(end);
    
      textArea.value = `${prefix}${inserted}${suffix}`;
    
      const newStart = start + startTag.length;
      const newEnd = end + startTag.length;
    
      textArea.setSelectionRange(newStart, newEnd);
      textArea.focus();
    }
    
    function insertURL() {
      const newURL = prompt("Enter the full URL for the link");
      if (newURL) {
        insert(`<a href="${newURL}">`, "</a>");
      } else {
        document.myForm.myTextArea.focus();
      }
    }
    
    const strong = document.querySelector("#format-strong");
    const em = document.querySelector("#format-em");
    const link = document.querySelector("#format-link");
    const code = document.querySelector("#format-code");
    
    strong.addEventListener("click", (e) => insert("<strong>", "</strong>"));
    em.addEventListener("click", (e) => insert("<em>", "</em>"));
    link.addEventListener("click", (e) => insertURL());
    code.addEventListener("click", (e) => insert("<code>", "</code>"));
    
Decorate the span to behave like a link:
    
    .intLink {
      cursor: pointer;
      text-decoration: underline;
      color: blue;
    }
    
    
    <form name="myForm">
      <p>
        [
        <span class="intLink" id="format-strong"><strong>Bold</strong></span> |
        <span class="intLink" id="format-em"><em>Italic</em></span> |
        <span class="intLink" id="format-link">URL</span> |
        <span class="intLink" id="format-code">code</span> ]
      </p>
    
      <p>
        <textarea name="myTextArea" rows="10" cols="50">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. 
        </textarea>
      </p>
    </form>
    
# ContentIndex
Note: This feature is available in Web Workers.
The `ContentIndex` interface of the Content Index API allows developers to register their offline enabled content with the browser.
## Instance properties
There are no properties of this interface.
## Instance methods
`ContentIndex.add()` Experimental
    
Registers an item with the content index.
`ContentIndex.delete()` Experimental
    
Unregisters an item from the currently indexed content.
`ContentIndex.getAll()` Experimental
    
Returns a `Promise` that resolves with an iterable list of content index entries.
## Examples
>
### Feature detection and interface access
Here we get a reference to the `ServiceWorkerRegistration`, then check for the `index` property, which gives us access to the content index interface.
    
    // reference registration
    const registration = await navigator.serviceWorker.ready;
    
    // feature detection
    if ("index" in registration) {
      // Content Index API functionality
      const contentIndex = registration.index;
    }
    
### Adding to the content index
Here we're declaring an item in the correct format and creating an asynchronous function which uses the `add()` method to register it with the content index.
    
    // our content
    const item = {
      id: "post-1",
      url: "/posts/amet.html",
      title: "Amet consectetur adipisicing",
      description:
        "Repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.",
      icons: [
        {
          src: "/media/dark.png",
          sizes: "128x128",
          type: "image/png",
        },
      ],
      category: "article",
    };
    
    // our asynchronous function to add indexed content
    async function registerContent(data) {
      const registration = await navigator.serviceWorker.ready;
    
      // feature detect Content Index
      if (!registration.index) {
        return;
      }
    
      // register content
      try {
        await registration.index.add(data);
      } catch (e) {
        console.log("Failed to register content: ", e.message);
      }
    }
    
### Retrieving items within the current index
The below example shows an asynchronous function that retrieves items within the content index and iterates over each entry, building a list for the interface.
    
    async function createReadingList() {
      // access our service worker registration
      const registration = await navigator.serviceWorker.ready;
    
      // get our index entries
      const entries = await registration.index.getAll();
    
      // create a containing element
      const readingListElem = document.createElement("div");
    
      // test for entries
      if (entries.length === 0) {
        // if there are no entries, display a message
        const message = document.createElement("p");
        message.innerText =
          "You currently have no articles saved for offline reading.";
    
        readingListElem.append(message);
      } else {
        // if entries are present, display in a list of links to the content
        const listElem = document.createElement("ul");
    
        for (const entry of entries) {
          const listItem = document.createElement("li");
    
          const anchorElem = document.createElement("a");
          anchorElem.innerText = entry.title;
          anchorElem.setAttribute("href", entry.url);
    
          listElem.append(listItem);
        }
    
        readingListElem.append(listElem);
      }
    }
    
### Unregistering indexed content
Below is an asynchronous function, that removes an item from the content index.
    
    async function unregisterContent(article) {
      // reference registration
      const registration = await navigator.serviceWorker.ready;
    
      // feature detect Content Index
      if (!registration.index) return;
    
      // unregister content from index
      await registration.index.delete(article.id);
    }
    
All the above methods are available within the scope of the service worker. They are accessible from the `WorkerGlobalScope.self` property:
    
    // service worker script
    
    self.registration.index.add(item);
    
    self.registration.index.delete(item.id);
    
    const contentIndexItems = self.registration.index.getAll();
    
  * An introductory article on the Content Index API
  * Service Worker API, along with information about Cache and CacheStorage


# WindowClient
Note: This feature is only available in Service Workers.
The `WindowClient` interface of the ServiceWorker API represents the scope of a service worker client that is a document in a browsing context, controlled by an active worker. The service worker client independently selects and uses a service worker for its own loading and sub-resources.
Client  WindowClient 
## Instance methods
`WindowClient` inherits methods from its parent interface, `Client`.
`WindowClient.focus()`
    
Gives user input focus to the current client.
`WindowClient.navigate()`
    
Loads a specified URL into a controlled client page.
## Instance properties
`WindowClient` inherits properties from its parent interface, `Client`.
`WindowClient.ancestorOrigins` Read only Experimental
    
An array of strings that indicates the ancestor origins of the browsing context represented by this `WindowClient` in reverse order.
`WindowClient.focused` Read only
    
A boolean that indicates whether the current client has focus.
`WindowClient.visibilityState` Read only
    
Indicates the visibility of the current client. This value can be one of `"hidden"` or `"visible"`.
## Example
    
    self.addEventListener("notificationclick", (event) => {
      console.log("On notification click: ", event.notification.tag);
      event.notification.close();
    
      // This looks to see if the current is already open and
      // focuses if it is
      event.waitUntil(
        clients
          .matchAll({
            type: "window",
          })
          .then((clientList) => {
            for (const client of clientList) {
              if (client.url === "/" && "focus" in client) {
                client.focus();
                break;
              }
            }
            if (clients.openWindow) return clients.openWindow("/");
          }),
      );
    });
    
  * Using Service Workers
  * Service workers basic code example
  * Using web workers
  * Channel Messaging API


# InstallEvent
The parameter passed into an `install` event handler function, the `InstallEvent` interface represents an install action that is dispatched on the `ServiceWorkerGlobalScope` of a `ServiceWorker`. As a child of `ExtendableEvent`, it ensures that functional events such as `FetchEvent` are not dispatched during installation.
This interface inherits from the `ExtendableEvent` interface.
Event  ExtendableEvent  InstallEvent 
## Constructor
`InstallEvent()` Experimental
    
Creates a new `InstallEvent` object.
## Instance properties
Inherits properties from its parent, `ExtendableEvent`.
## Instance methods
Inherits methods from its parent, `ExtendableEvent`.
`addRoutes()` Experimental
    
Specifies one or more static routes, which define rules for fetching specified resources that will be used even before service worker startup.
## Examples
This code snippet is from the service worker prefetch sample (see prefetch running live.) The code calls `ExtendableEvent.waitUntil()` in `ServiceWorkerGlobalScope.oninstall` and delays treating the `ServiceWorkerRegistration.installing` worker as installed until the passed promise resolves successfully. The promise resolves when all resources have been fetched and cached, or when any exception occurs.
The code snippet also shows a best practice for versioning caches used by the service worker. Although this example has only one cache, you can use this approach for multiple caches. The code maps a shorthand identifier for a cache to a specific, versioned cache name.
Note: Logging statements are visible in Google Chrome via the "Inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.
    
    const CACHE_VERSION = 1;
    const CURRENT_CACHES = {
      prefetch: `prefetch-cache-v${CACHE_VERSION}`,
    };
    
    self.addEventListener("install", (event) => {
      const urlsToPrefetch = [
        "./static/pre_fetched.txt",
        "./static/pre_fetched.html",
        "https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",
      ];
    
      console.log(
        "Handling install event. Resources to pre-fetch:",
        urlsToPrefetch,
      );
    
      event.waitUntil(
        caches
          .open(CURRENT_CACHES["prefetch"])
          .then((cache) =>
            cache.addAll(
              urlsToPrefetch.map(
                (urlToPrefetch) => new Request(urlToPrefetch, { mode: "no-cors" }),
              ),
            ),
          )
          .then(() => {
            console.log("All resources have been fetched and cached.");
          })
          .catch((error) => {
            console.error("Pre-fetching failed:", error);
          }),
      );
    });
    
  * `install` event
  * `NotificationEvent`
  * `Promise`
  * Fetch API


# XMLHttpRequest
Note: This feature is available in Web Workers, except for Service Workers.
`XMLHttpRequest` (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.
EventTarget  XMLHttpRequestEventTarget  XMLHttpRequest 
Despite its name, `XMLHttpRequest` can be used to retrieve any type of data, not just XML.
If your communication needs to involve receiving event data or message data from a server, consider using server-sent events through the `EventSource` interface. For full-duplex communication, WebSockets may be a better choice.
## Constructor
`XMLHttpRequest()`
    
The constructor initializes an `XMLHttpRequest`. It must be called before any other method calls.
## Instance properties
This interface also inherits properties of `XMLHttpRequestEventTarget` and of `EventTarget`.
`XMLHttpRequest.readyState` Read only
    
Returns a number representing the state of the request.
`XMLHttpRequest.response` Read only
    
Returns an `ArrayBuffer`, a `Blob`, a `Document`, a JavaScript object, or a string, depending on the value of `XMLHttpRequest.responseType`, that contains the response entity body.
`XMLHttpRequest.responseText` Read only
    
Returns a string that contains the response to the request as text, or `null` if the request was unsuccessful or has not yet been sent.
`XMLHttpRequest.responseType`
    
Specifies the type of the response.
`XMLHttpRequest.responseURL` Read only
    
Returns the serialized URL of the response or the empty string if the URL is null.
`XMLHttpRequest.responseXML` Read only
    
Returns a `Document` containing the response to the request, or `null` if the request was unsuccessful, has not yet been sent, or cannot be parsed as XML or HTML. Not available in Web Workers.
`XMLHttpRequest.status` Read only
    
Returns the HTTP response status code of the request.
`XMLHttpRequest.statusText` Read only
    
Returns a string containing the response string returned by the HTTP server. Unlike `XMLHttpRequest.status`, this includes the entire text of the response message (`"OK"`, for example).
Note: According to the HTTP/2 specification RFC 7540, section 8.1.2.4: Response Pseudo-Header Fields, HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.
`XMLHttpRequest.timeout`
    
The time in milliseconds a request can take before automatically being terminated.
`XMLHttpRequest.upload` Read only
    
A `XMLHttpRequestUpload` representing the upload process.
`XMLHttpRequest.withCredentials`
    
Returns `true` if cross-site `Access-Control` requests should be made using credentials such as cookies or authorization headers; otherwise `false`.
### Non-standard properties
`XMLHttpRequest.mozAnon` Read only Non-standard
    
A boolean. If true, the request will be sent without cookie and authentication headers.
`XMLHttpRequest.mozSystem` Read only Non-standard
    
A boolean. If true, the same origin policy will not be enforced on the request.
## Instance methods
`XMLHttpRequest.abort()`
    
Aborts the request if it has already been sent.
`XMLHttpRequest.getAllResponseHeaders()`
    
Returns all the response headers, separated by CRLF, as a string, or `null` if no response has been received.
`XMLHttpRequest.getResponseHeader()`
    
Returns the string containing the text of the specified header, or `null` if either the response has not yet been received or the header doesn't exist in the response.
`XMLHttpRequest.open()`
    
Initializes a request.
`XMLHttpRequest.overrideMimeType()`
    
Overrides the MIME type returned by the server.
`XMLHttpRequest.send()`
    
Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.
`XMLHttpRequest.setAttributionReporting()` Secure context Experimental
    
Indicates that you want the request's response to be able to register an attribution source or trigger event.
`XMLHttpRequest.setRequestHeader()`
    
Sets the value of an HTTP request header. You must call `setRequestHeader()` after `open()`, but before `send()`.
## Events
This interface also inherits events of `XMLHttpRequestEventTarget`.
`readystatechange`
    
Fired whenever the `readyState` property changes. Also available via the `onreadystatechange` event handler property.
  * `XMLSerializer`: Serializing a DOM tree into XML
  * Using XMLHttpRequest
  * Fetch API


# CSSStartingStyleRule
The `CSSStartingStyleRule` interface of the CSS Object Model represents a CSS `@starting-style` at-rule.
CSSRule  CSSGroupingRule  CSSStartingStyleRule 
## Instance properties
Inherits properties from its ancestors `CSSGroupingRule` and `CSSRule`.
## Instance methods
Inherits methods from its ancestors `CSSGroupingRule` and `CSSRule`.
  * `@starting-style`
  * CSS transitions module
  * Using dynamic styling information


# GPUAdapter
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUAdapter` interface of the WebGPU API represents a GPU adapter. From this you can request a `GPUDevice`, adapter info, features, and limits.
A `GPUAdapter` object is requested using the `GPU.requestAdapter()` method.
## Instance properties
`features` Read only
    
A `GPUSupportedFeatures` object that describes additional functionality supported by the adapter.
`isFallbackAdapter` Read only Deprecated Non-standard
    
A boolean value. Returns `true` if the adapter is a fallback adapter, and `false` if not.
`info` Read only
    
A `GPUAdapterInfo` object containing identifying information about the adapter.
`limits` Read only
    
A `GPUSupportedLimits` object that describes the limits supported by the adapter.
## Instance methods
`requestAdapterInfo()` Deprecated Non-standard
    
Returns a `Promise` that fulfills with a `GPUAdapterInfo` object containing identifying information about the adapter.
`requestDevice()`
    
Returns a `Promise` that fulfills with a `GPUDevice` object, which is the primary interface for communicating with the GPU.
## Examples
    
    async function init() {
      if (!navigator.gpu) {
        throw Error("WebGPU not supported.");
      }
    
      const adapter = await navigator.gpu.requestAdapter();
      if (!adapter) {
        throw Error("Couldn't request WebGPU adapter.");
      }
    
      const device = await adapter.requestDevice();
    
      // …
    }
    
  * The WebGPU API


# WebGLTexture
Note: This feature is available in Web Workers.
The WebGLTexture interface is part of the WebGL API and represents an opaque texture object providing storage and state for texturing operations.
WebGLObject  WebGLTexture 
## WebGL textures
The `WebGLTexture` object does not define any methods or properties of its own and its content is not directly accessible. When working with `WebGLTexture` objects, the following methods of the `WebGLRenderingContext` are useful:
  * `WebGLRenderingContext.bindTexture()`
  * `WebGLRenderingContext.createTexture()`
  * `WebGLRenderingContext.deleteTexture()`
  * `WebGLRenderingContext.isTexture()`


See also the WebGL tutorial on Using textures in WebGL.
## WebXR opaque textures
When using WebXR layers, the `XRWebGLBinding` object will return instances of an opaque `WebGLTexture` for the color and depth/stencil attachments.
WebXR methods that return opaque `WebGLTexture` objects:
  * `XRWebGLBinding.getSubImage()`
  * `XRWebGLBinding.getViewSubImage()`


The WebXR opaque texture is identical to the standard `WebGLTexture` with the following exceptions:
  * A WebXR opaque texture is invalid outside a WebXR `requestAnimationFrame()` callback for its session.
  * A WebXR opaque texture is invalid until it is returned by `XRWebGLBinding.getSubImage()` or `XRWebGLBinding.getViewSubImage()`.
  * A WebXR opaque texture for the color attachment contains colors with premultiplied alpha.
  * At the end of a `requestAnimationFrame()` callback a WebXR opaque texture is unbounded and detached from all `WebGLShader` objects.
  * A WebXR opaque texture behaves as though it was allocated with `texStorage2D` or `texStorage3D`, as appropriate, even when using a WebGL 1.0 context.
  * If a WebXR opaque texture calls `WebGLRenderingContext.deleteTexture()`, an `INVALID_OPERATION` error is thrown.
  * Changes to the dimension or format of a WebXR opaque texture are not allowed. GL functions may only alter the texel values and texture parameters.


## Examples
>
### Creating a texture
    
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext("webgl");
    const texture = gl.createTexture();
    
  * `WebGLRenderingContext.bindTexture()`
  * `WebGLRenderingContext.createTexture()`
  * `WebGLRenderingContext.deleteTexture()`
  * `WebGLRenderingContext.isTexture()`
  * `WebGLRenderingContext.compressedTexImage2D()`
  * `WebGLRenderingContext.compressedTexSubImage2D()`
  * `WebGLRenderingContext.copyTexImage2D()`
  * `WebGLRenderingContext.copyTexSubImage2D()`
  * `WebGLRenderingContext.generateMipmap()`
  * `WebGLRenderingContext.getTexParameter()`
  * `WebGLRenderingContext.texImage2D()`
  * `WebGLRenderingContext.texSubImage2D()`
  * `WebGLRenderingContext.texParameterf()`
  * `WebGLRenderingContext.texParameteri()`


# Beacon API
The `Beacon` API is used to send an asynchronous and non-blocking request to a web server. The request does not expect a response. Unlike requests made using `XMLHttpRequest` or the Fetch API, the browser guarantees to initiate beacon requests before the page is unloaded and to run them to completion.
The main use case for the Beacon API is to send analytics such as client-side events or session data to the server. Historically, websites have used `XMLHttpRequest` for this, but browsers do not guarantee to send these asynchronous requests in some circumstances (for example, if the page is about to be unloaded). To combat this, websites have resorted to various techniques, such as making the request synchronous, that have a bad effect on responsiveness. Because beacon requests are both asynchronous and guaranteed to be sent, they combine good performance characteristics and reliability.
For more details about the motivation for and usage of this API, see the documentation for the `navigator.sendBeacon()` method.
Note: This API is not available in Web Workers (not exposed via `WorkerNavigator`).
## Interfaces
This API defines a single method: `navigator.sendBeacon()`.
The method takes two arguments, the URL and the data to send in the request. The data argument is optional and its type may be a string, an `ArrayBuffer`, a `TypedArray`, a `DataView`, a `ReadableStream`, a `Blob`, a `FormData` object, or a `URLSearchParams` object. If the browser successfully queues the request for delivery, the method returns `true`; otherwise, it returns `false`.
  * Beacon standard
  * Beacon CanIUse data
  * Intercepting beacons through service workers; Ehsan Akhgari; 2015-Apr-08
  * https://webkit.org/blog/8821/link-click-analytics-and-privacy/
  * Beaconing in Practice


# Lock
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `Lock` interface of the Web Locks API provides the name and mode of a lock. This may be a newly requested lock that is received in the callback to `LockManager.request()`, or a record of an active or queued lock returned by `LockManager.query()`.
## Instance properties
`Lock.mode` Read only
    
Returns the access mode passed to `LockManager.request()` when the lock was requested. The mode is either `"exclusive"` (the default) or `"shared"`.
`Lock.name` Read only
    
Returns the name passed to `LockManager.request()` when the lock was requested.
## Examples
The following examples show how the mode and name properties are passed in the call to `LockManager.request()`. `LockManager` is the object returned by `navigator.locks`.
    
    navigator.locks.request("net_db_sync", show_lock_properties);
    navigator.locks.request(
      "another_lock",
      { mode: "shared" },
      show_lock_properties,
    );
    
    function show_lock_properties(lock) {
      console.log(`The lock name is: ${lock.name}`);
      console.log(`The lock mode is: ${lock.mode}`);
    }
    
# ExtendableCookieChangeEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is only available in Service Workers.
The `ExtendableCookieChangeEvent` interface of the Cookie Store API is the event type passed to `cookiechange` event fired at the `ServiceWorkerGlobalScope` when any cookie changes occur which match the service worker's cookie change subscription list. A cookie change event consists of a cookie and a type (either "changed" or "deleted").
Cookie changes that cause the `ExtendableCookieChangeEvent` to be dispatched are:
  * A cookie is newly created and not immediately removed, or if a cookies is replaced. In this case `type` is "changed".
  * A cookie is newly created and immediately removed. In this case `type` is "deleted"
  * A cookie is removed. In this case `type` is "deleted".

Event  ExtendableEvent  ExtendableCookieChangeEvent 
## Constructor
`ExtendableCookieChangeEvent()`
    
Creates a new `ExtendableCookieChangeEvent`.
## Instance properties
This interface also inherits properties from `ExtendableEvent`.
`ExtendableCookieChangeEvent.changed` Read only
    
Returns an array containing the changed cookies.
`ExtendableCookieChangeEvent.deleted` Read only
    
Returns an array containing the deleted cookies.
## Instance methods
This interface also inherits methods from `ExtendableEvent`.
## Examples
In the below example, we use `CookieStoreManager.getSubscriptions()` to get a list of existing subscriptions. (In service workers, a subscription is required in order to listen for events.) We unsubscribe from existing subscriptions using `CookieStoreManager.unsubscribe()`, then subscribe to the cookie with a name of 'COOKIE_NAME' using `CookieStoreManager.subscribe()`. If that cookie is changed, the event listener logs the event to the console. This will be an `ExtendableCookieChangeEvent` object, with the `changed` or `deleted` property containing the modified cookie.
    
    self.addEventListener("activate", (event) => {
      event.waitUntil(async () => {
        const subscriptions = await self.registration.cookies.getSubscriptions();
    
        await self.registration.cookies.unsubscribe(subscriptions);
    
        await self.registration.cookies.subscribe([
          {
            name: "COOKIE_NAME",
          },
        ]);
      });
    });
    
    self.addEventListener("cookiechange", (event) => {
      console.log(event);
    });
    
# WEBGL_compressed_texture_astc extension
The `WEBGL_compressed_texture_astc` extension is part of the WebGL API and exposes Adaptive Scalable Texture Compression (ASTC) compressed texture formats to WebGL.
For more information, see the article Using ASTC Texture Compression for Game Assets by NVIDIA.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: ASTC compression is typically available on Mali ARM GPUs, Intel GPUs, and NVIDIA Tegra chips.
This extension is available to both, WebGL1 and WebGL2 contexts.
## Instance methods
This extension exposes one new methods.
`ext.getSupportedProfiles()`
    
Returns an array of strings containing the names of the ASTC profiles supported by the implementation.
## Constants
The compressed texture formats are exposed by 28 constants and can be used in two functions: `compressedTexImage2D()` and `compressedTexSubImage2D()`.
Constants Blocks Bits per pixel `ArrayBuffer` `byteLength` bytes if height and width are 512  
`ext.COMPRESSED_RGBA_ASTC_4x4_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR` 4x4 8.00 `floor((width + 3) / 4) * floor((height + 3) / 4) * 16` 262144  
`ext.COMPRESSED_RGBA_ASTC_5x4_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR` 5x4 6.40 `floor((width + 4) / 5) * floor((height + 3) / 4) * 16` 210944  
`ext.COMPRESSED_RGBA_ASTC_5x5_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR` 5x5 5.12 `floor((width + 4) / 5) * floor((height + 4) / 5) * 16` 169744  
`ext.COMPRESSED_RGBA_ASTC_6x5_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR` 6x5 4.27 `floor((width + 5) / 6) * floor((height + 4) / 5) * 16` 141728  
`ext.COMPRESSED_RGBA_ASTC_6x6_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR` 6x6 3.56 `floor((width + 5) / 6) * floor((height + 5) / 6) * 16` 118336  
`ext.COMPRESSED_RGBA_ASTC_8x5_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR` 8x5 3.20 `floor((width + 7) / 8) * floor((height + 4) / 5) * 16` 105472  
`ext.COMPRESSED_RGBA_ASTC_8x6_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR` 8x6 2.67 `floor((width + 7) / 8) * floor((height + 5) / 6) * 16` 88064  
`ext.COMPRESSED_RGBA_ASTC_8x8_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR` 8x8 2.00 `floor((width + 7) / 8) * floor((height + 7) / 8) * 16` 65536  
`ext.COMPRESSED_RGBA_ASTC_10x5_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR` 10x5 2.56 `floor((width + 9) / 10) * floor((height + 4) / 5) * 16` 85696  
`ext.COMPRESSED_RGBA_ASTC_10x6_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR` 10x6 2.13 `floor((width + 9) / 10) * floor((height + 5) / 6) * 16` 71552  
`ext.COMPRESSED_RGBA_ASTC_10x8_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x8_KHR` 10x8 1.60 `floor((width + 9) / 10) * floor((height + 7) / 8) * 16` 53248  
`ext.COMPRESSED_RGBA_ASTC_10x10_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR` 10x10 1.28 `floor((width + 9) / 10) * floor((height + 9) / 10) * 16` 43264  
`ext.COMPRESSED_RGBA_ASTC_12x10_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR` 12x10 1.07 `floor((width + 11) / 12) * floor((height + 9) / 10) * 16` 35776  
`ext.COMPRESSED_RGBA_ASTC_12x12_KHR  
ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR` 12x12 0.89 `floor((width + 11) / 12) * floor((height + 11) / 12) * 16` 29584  
## Examples
    
    const ext = gl.getExtension("WEBGL_compressed_texture_astc");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.compressedTexImage2D(
      gl.TEXTURE_2D,
      0,
      ext.COMPRESSED_RGBA_ASTC_12x12_KHR,
      512,
      512,
      0,
      textureData,
    );
    
  * Using ASTC Texture Compression for Game Assets
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.compressedTexImage2D()`
  * `WebGLRenderingContext.compressedTexSubImage2D()`
  * `WebGLRenderingContext.getParameter()`


# Geolocation
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Geolocation` interface represents an object able to obtain the position of the device programmatically. It gives Web content access to the location of the device. This allows a website or app to offer customized results based on the user's location.
An object with this interface is obtained using the `navigator.geolocation` property implemented by the `Navigator` object.
Note: For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.
## Instance properties
The `Geolocation` interface neither implements, nor inherits any property.
## Instance methods
The `Geolocation` interface doesn't inherit any method.
`Geolocation.getCurrentPosition()`
    
Determines the device's current location and gives back a `GeolocationPosition` object with the data.
`Geolocation.watchPosition()`
    
Returns a `long` value representing the newly established callback function to be invoked whenever the device location changes.
`Geolocation.clearWatch()`
    
Removes the particular handler previously installed using `watchPosition()`.
  * Using geolocation


# HTMLHeadingElement
The `HTMLHeadingElement` interface represents the different heading elements, `<h1>` through `<h6>`. It inherits methods and properties from the `HTMLElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLHeadingElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLHeadingElement.align` Deprecated
    
A string representing an enumerated attribute indicating alignment of the heading with respect to the surrounding context. The possible values are `"left"`, `"right"`, `"justify"`, and `"center"`.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML heading elements, `<h1>` to `<h6>`, which correspond to this interface.


# Encrypted Media Extensions API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Encrypted Media Extensions API provides interfaces for controlling the playback of content which is subject to a digital restrictions management scheme.
Access to this API is provided through `Navigator.requestMediaKeySystemAccess()`.
## Interfaces
`MediaEncryptedEvent`
    
Represents a specific `encrypted` event thrown when a `HTMLMediaElement` encounters some initialization data.
`MediaKeyMessageEvent`
    
Contains the content and related data when the content decryption module (CDM) generates a message for the session.
`MediaKeys`
    
Represents a set of keys that an associated `HTMLMediaElement` can use for decryption of media data during playback.
`MediaKeySession`
    
Represents a context for message exchange with a content decryption module (CDM).
`MediaKeyStatusMap`
    
A read-only map of media key statuses by key IDs.
`MediaKeySystemAccess`
    
Provides access to a key system for decryption and/or a content protection provider.
### Extensions to other interfaces
The Encrypted Media Extensions API extends the following APIs, adding the listed features.
#### HTMLMediaElement
`HTMLMediaElement.mediaKeys` Read only
    
Provides a `MediaKeys` object that represents the set of keys that the element can use for decryption of media data during playback.
`HTMLMediaElement.setMediaKeys()`
    
Sets the `MediaKeys` that will be used to decrypt media during playback.
`encrypted` event
    
Event that is fired on a `HTMLMediaElement` when initialization data is encountered in the media, indicating that it is encrypted.
#### Navigator
`Navigator.requestMediaKeySystemAccess()`
    
Returns a `Promise` that fulfils to a `MediaKeySystemAccess` object that can be used to access a particular media key system, which can in turn be used to create keys for decrypting a media stream.
# WorkerLocation
Note: This feature is only available in Web Workers.
The `WorkerLocation` interface defines the absolute location of the script executed by the `Worker`. Such an object is initialized for each worker and is available via the `WorkerGlobalScope.location` property obtained by calling `self.location`.
This interface is only visible from inside a JavaScript script executed in the context of a Web worker.
## Instance properties
`WorkerLocation.href` Read only
    
Returns a string containing the serialized `URL` for the worker's location.
`WorkerLocation.protocol` Read only
    
Returns the `protocol` part of the worker's location.
`WorkerLocation.host` Read only
    
Returns the `host` part of the worker's location.
`WorkerLocation.hostname` Read only
    
Returns the `hostname` part of the worker's location.
`WorkerLocation.origin` Read only
    
Returns the worker's `origin`.
`WorkerLocation.port` Read only
    
Returns the `port` part of the worker's location.
`WorkerLocation.pathname` Read only
    
Returns the `pathname` part of the worker's location.
`WorkerLocation.search` Read only
    
Returns the `search` part of the worker's location.
`WorkerLocation.hash` Read only
    
Returns the `hash` part of the worker's location.
## Instance methods
`WorkerLocation.toString()`
    
Returns a string containing the serialized `URL` for the worker's location. It is a synonym for `WorkerLocation.href`.
  * Other Worker-related interfaces: `Worker`, `WorkerNavigator`, and `WorkerGlobalScope`
  * Using web workers


# SVGGElement
The `SVGGElement` interface corresponds to the `<g>` element.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGGElement 
## Instance properties
This interface doesn't implement any specific properties, but inherits properties from its parent interface, `SVGGraphicsElement`.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGGraphicsElement`.
# SVGAnimateMotionElement
The `SVGAnimateMotionElement` interface corresponds to the `<animateMotion>` element.
EventTarget  Node  Element  SVGElement  SVGAnimationElement  SVGAnimateMotionElement 
## Instance properties
This interface has no properties but inherits properties from its parent, `SVGAnimationElement`.
## Instance methods
This interface has no methods but inherits methods from its parent, `SVGAnimationElement`.
# WindowControlsOverlayGeometryChangeEvent
The `WindowControlsOverlayGeometryChangeEvent` interface of the Window Controls Overlay API is passed to `geometrychange` when the size or visibility of a desktop Progress Web App's title bar region changes.
Event  WindowControlsOverlayGeometryChangeEvent 
## Constructor
`WindowControlsOverlayGeometryChangeEvent()` Experimental
    
Creates a `WindowControlsOverlayGeometryChangeEvent` event with the given parameters.
## Instance properties
Also inherits properties from its parent `Event`.
`WindowControlsOverlayGeometryChangeEvent.titlebarAreaRect` Read only Experimental
    
A `DOMRect` representing the position and size of the title bar region.
`WindowControlsOverlayGeometryChangeEvent.visible` Read only Experimental
    
A Boolean that indicates whether the window controls overlay is visible or not.
## Examples
The following example shows how to use a `WindowControlsOverlayGeometryChangeEvent` instance by adding an event handler on the `Navigator.windowControlsOverlay` property, to listen to geometry changes of a PWA's title bar region.
    
    if ("windowControlsOverlay" in navigator) {
      navigator.windowControlsOverlay.addEventListener(
        "geometrychange",
        (event) => {
          if (event.visible) {
            const rect = event.titlebarAreaRect;
            // Do something with the coordinates of the title bar area.
          }
        },
      );
    }
    
  * The Window Controls Overlay API.


# BatteryManager
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `BatteryManager` interface of the Battery Status API provides information about the system's battery charge level. The `navigator.getBattery()` method returns a promise that resolves with a `BatteryManager` interface.
Since Chrome 103, the `BatteryManager` interface of Battery Status API only expose to secure context.
EventTarget  BatteryManager 
## Instance properties
Also inherits properties from its parent interface, `EventTarget`.
`BatteryManager.charging` Read only
    
A Boolean value indicating whether the battery is currently being charged.
`BatteryManager.chargingTime` Read only
    
A number representing the remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged.
`BatteryManager.dischargingTime` Read only
    
A number representing the remaining time in seconds until the battery is completely discharged and the system suspends.
`BatteryManager.level` Read only
    
A number representing the system's battery charge level scaled to a value between 0.0 and 1.0.
## Instance methods
Also inherits methods from its parent interface, `EventTarget`.
## Events
Also inherits events from its parent interface, `EventTarget`.
`chargingchange`
    
Fired when the battery charging state (the `charging` property) is updated.
`chargingtimechange`
    
Fired when the battery charging time (the `chargingTime` property) is updated.
`dischargingtimechange`
    
Fired when the battery discharging time (the `dischargingTime` property) is updated.
`levelchange`
    
Fired when the battery level (the `level` property) is updated.
  * The Battery Status API
  * `Navigator.getBattery()`


# PaymentRequestEvent
Note: This feature is only available in Service Workers.
The `PaymentRequestEvent` interface of the Payment Handler API is the object passed to a payment handler when a `PaymentRequest` is made.
Event  ExtendableEvent  PaymentRequestEvent 
## Constructor
`PaymentRequestEvent()` Experimental
    
Creates a new `PaymentRequestEvent` object instance.
## Instance properties
`methodData` Read only Experimental
    
Returns an array of objects containing payment method identifiers for the payment methods that the website accepts and any associated payment method specific data.
`modifiers` Read only Experimental
    
Returns an array of objects containing changes to payment details.
`paymentRequestId` Read only Experimental
    
Returns the ID of the `PaymentRequest` object.
`paymentRequestOrigin` Read only Experimental
    
Returns the origin where the `PaymentRequest` object was initialized.
`topOrigin` Read only Experimental
    
Returns the top-level origin where the `PaymentRequest` object was initialized.
`total` Read only Experimental
    
Returns the total amount being requested for payment.
## Instance methods
`changePaymentMethod()` Experimental
    
Gets an updated total, given payment method details.
`openWindow()` Experimental
    
Opens the specified URL in a new window, if and only if the given URL is on the same origin as the calling page. It returns a `Promise` that resolves with a reference to a `WindowClient`.
`respondWith()` Experimental
    
Prevents the default event handling and allows you to provide a `Promise` for a `PaymentResponse` object yourself.
## Examples
When the `PaymentRequest.show()` method is invoked, a `paymentrequest` event is fired on the service worker of the payment app. This event is listened for inside the payment app's service worker to begin the next stage of the payment process.
    
    let payment_request_event;
    let resolver;
    let client;
    
    // `self` is the global object in service worker
    self.addEventListener("paymentrequest", async (e) => {
      if (payment_request_event) {
        // If there's an ongoing payment transaction, reject it.
        resolver.reject();
      }
      // Preserve the event for future use
      payment_request_event = e;
    
      // …
    });
    
When a `paymentrequest` event is received, the payment app can open a payment handler window by calling `PaymentRequestEvent.openWindow()`. The payment handler window will present the customers with a payment app interface where they can authenticate, choose shipping address and options, and authorize the payment.
When the payment has been handled, `PaymentRequestEvent.respondWith()` is used to pass the payment result back to the merchant website.
See Receive a payment request event from the merchant for more details of this stage.
  * Web-based payment apps overview
  * Setting up a payment method
  * Life of a payment transaction
  * Using the Payment Request API
  * Payment processing concepts


# Media Capabilities API
Note: This feature is available in Web Workers.
The Media Capabilities API allows developers to determine decoding and encoding abilities of the device, exposing information such as whether media is supported and whether playback should be smooth and power efficient, with real time feedback about playback to better enable adaptive streaming, and access to display property information.
## Concepts
There are a myriad of video and audio codecs. Different browsers support different media types and new media types are always being developed. With the Media Capabilities API, developers can ensure each user is getting the best bitrate and storage savings for their browser, device, and OS capabilities.
Whether a device uses hardware or software decoding impacts how smooth and power efficient the video decoding is and how efficient the playback will be. The Media Capabilities API enables determining which codecs are supported and how performant a media file will be both in terms of smoothness and power efficiency.
The Media Capabilities API provide more powerful features than say `MediaRecorder.isTypeSupported()` or `HTMLMediaElement.canPlayType()`, which only address general browser support, not performance. The API also provides abilities to access display property information such as supported color gamut, dynamic range abilities, and real-time feedback about the playback.
To test support, smoothness, and power efficiency for encoding and decoding video or audio content, you use the `MediaCapabilities` interface's `encodingInfo()` and `decodingInfo()` methods.
Media capabilities information enables websites to enable adaptive streaming to alter the quality of content based on actual user-perceived quality, and react to a pick of CPU/GPU usage in real time.
## Interfaces
`MediaCapabilities`
    
Provides information about the decoding abilities of the device, system and browser based on codecs, profile, resolution, and bitrates. The information can be used to serve optimal media streams to the user and determine if playback should be smooth and power efficient.
### Extensions to other interfaces
`Navigator.mediaCapabilities` Read only
    
A `MediaCapabilities` object that can expose information about the decoding and encoding capabilities for a given media format and output capabilities.
`WorkerNavigator.mediaCapabilities` Read only
    
A `MediaCapabilities` object that can expose information about the decoding and encoding capabilities for a given media format and output capabilities.
## Examples
>
### Detect audio file support and expected performance
This example defines an audio configuration then checks to see if the user agent supports decoding that media configuration, and whether it will perform well in terms of smoothness and power efficiency.
    
    if ("mediaCapabilities" in navigator) {
      const audioFileConfiguration = {
        type: "file",
        audio: {
          contentType: "audio/mp3",
          channels: 2,
          bitrate: 132700,
          samplerate: 5200,
        },
      };
    
      navigator.mediaCapabilities
        .decodingInfo(audioFileConfiguration)
        .then((result) => {
          console.log(
            `This configuration is ${result.supported ? "" : "not "}supported,`,
          );
          console.log(`${result.smooth ? "" : "not "}smooth, and`);
          console.log(`${result.powerEfficient ? "" : "not "}power efficient.`);
        })
        .catch(() => {
          console.log(`decodingInfo error: ${contentType}`);
        });
    }
    
  * HTMLMediaElement's method canPlayType()
  * MediaSource's method isTypeSupported()
  * Using the Media Capabilities API


# EventSource
Note: This feature is available in Web Workers.
The `EventSource` interface is web content's interface to server-sent events.
An `EventSource` instance opens a persistent connection to an HTTP server, which sends events in `text/event-stream` format. The connection remains open until closed by calling `EventSource.close()`.
EventTarget  EventSource 
Once the connection is opened, incoming messages from the server are delivered to your code in the form of events. If there is an event field in the incoming message, the triggered event is the same as the event field value. If no event field is present, then a generic `message` event is fired.
Unlike WebSockets, server-sent events are unidirectional; that is, data messages are delivered in one direction, from the server to the client (such as a user's web browser). That makes them an excellent choice when there's no need to send data from the client to the server in message form. For example, `EventSource` is a useful approach for handling things like social media status updates, news feeds, or delivering data into a client-side storage mechanism like IndexedDB or web storage.
Warning: When not used over HTTP/2, SSE suffers from a limitation to the maximum number of open connections, which can be specially painful when opening various tabs as the limit is per browser and set to a very low number (6). The issue has been marked as "Won't fix" in Chrome and Firefox. This limit is per browser + domain, so that means that you can open 6 SSE connections across all of the tabs to `www.example1.com` and another 6 SSE connections to `www.example2.com`. (from Stack Overflow). When using HTTP/2, the maximum number of simultaneous HTTP streams is negotiated between the server and the client (defaults to 100).
## Constructor
`EventSource()`
    
Creates a new `EventSource` to handle receiving server-sent events from a specified URL, optionally in credentials mode.
## Instance properties
This interface also inherits properties from its parent, `EventTarget`.
`EventSource.readyState` Read only
    
A number representing the state of the connection. Possible values are `CONNECTING` (`0`), `OPEN` (`1`), or `CLOSED` (`2`).
`EventSource.url` Read only
    
A string representing the URL of the source.
`EventSource.withCredentials` Read only
    
A boolean value indicating whether the `EventSource` object was instantiated with cross-origin (CORS) credentials set (`true`), or not (`false`, the default).
## Instance methods
This interface also inherits methods from its parent, `EventTarget`.
`EventSource.close()`
    
Closes the connection, if any, and sets the `readyState` attribute to `CLOSED`. If the connection is already closed, the method does nothing.
## Events
`error`
    
Fired when a connection to an event source failed to open.
`message`
    
Fired when data is received from an event source.
`open`
    
Fired when a connection to an event source has opened.
Additionally, the event source itself may send messages with an event field, which will create ad hoc events keyed to that value.
## Examples
In this basic example, an `EventSource` is created to receive unnamed events from the server; a page with the name `sse.php` is responsible for generating the events.
    
    const evtSource = new EventSource("sse.php");
    const eventList = document.querySelector("ul");
    
    evtSource.onmessage = (e) => {
      const newElement = document.createElement("li");
    
      newElement.textContent = `message: ${e.data}`;
      eventList.appendChild(newElement);
    };
    
Each received event causes our `EventSource` object's `onmessage` event handler to be run. It, in turn, creates a new `<li>` element and writes the message's data into it, then appends the new element to the list element already in the document.
Note: You can find a full example on GitHub — see Simple SSE demo using PHP.
To listen to named events, you'll require a listener for each type of event sent.
    
    const sse = new EventSource("/api/v1/sse");
    
    /*
     * This will listen only for events
     * similar to the following:
     *
     * event: notice
     * data: useful data
     * id: some-id
     */
    sse.addEventListener("notice", (e) => {
      console.log(e.data);
    });
    
    /*
     * Similarly, this will listen for events
     * with the field `event: update`
     */
    sse.addEventListener("update", (e) => {
      console.log(e.data);
    });
    
    /*
     * The event "message" is a special case, as it
     * will capture events without an event field
     * as well as events that have the specific type
     * `event: message` It will not trigger on any
     * other event type.
     */
    sse.addEventListener("message", (e) => {
      console.log(e.data);
    });
    
  * Server-sent events
  * Using server-sent events


# PictureInPictureWindow
The `PictureInPictureWindow` interface represents an object able to programmatically obtain the `width` and `height` and `resize event` of the floating video window.
An object with this interface is obtained using the `HTMLVideoElement.requestPictureInPicture()` promise return value.
EventTarget  PictureInPictureWindow 
## Instance properties
The `PictureInPictureWindow` interface doesn't inherit any properties.
`PictureInPictureWindow.width` Read only
    
Determines the width of the floating video window.
`PictureInPictureWindow.height` Read only
    
Determines the height of the floating video window.
## Instance methods
The `PictureInPictureWindow` interface doesn't inherit any methods.
## Events
The `PictureInPictureWindow` interface doesn't inherit any events.
`resize`
    
Sent to a `PictureInPictureWindow` when the floating video window is resized.
## Examples
Given a `<button>` and a `<video>`, clicking the button will make the video enter the picture-in-picture mode; we then attach an event to print the floating video window dimensions to the console.
    
    const button = document.querySelector("button");
    const video = document.querySelector("video");
    
    function printPipWindowDimensions(evt) {
      const pipWindow = evt.target;
      console.log(
        `The floating window dimensions are: ${pipWindow.width}x${pipWindow.height}px`,
      );
      // will print:
      // The floating window dimensions are: 640x360px
    }
    
    button.onclick = () => {
      video.requestPictureInPicture().then((pictureInPictureWindow) => {
        pictureInPictureWindow.onresize = printPipWindowDimensions;
      });
    };
    
  * Picture-in-Picture API


# PushEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is only available in Service Workers.
The `PushEvent` interface of the Push API represents a push message that has been received. This event is sent to the global scope of a `ServiceWorker`. It contains the information sent from an application server to a `PushSubscription`.
Event  ExtendableEvent  PushEvent 
## Constructor
`PushEvent()`
    
Creates a new `PushEvent` object.
## Instance properties
Inherits properties from its parent, `ExtendableEvent`. Additional properties:
`PushEvent.data` Read only
    
Returns a reference to a `PushMessageData` object containing data sent to the `PushSubscription`.
## Instance methods
Inherits methods from its parent, `ExtendableEvent`.
## Examples
The following example takes data from a `PushEvent` and displays it on all of the service worker's clients.
    
    self.addEventListener("push", (event) => {
      if (!(self.Notification && self.Notification.permission === "granted")) {
        return;
      }
    
      const data = event.data?.json() ?? {};
      const title = data.title || "Something Has Happened";
      const message =
        data.message || "Here's something you might want to check out.";
      const icon = "images/new-notification.png";
    
      const notification = new self.Notification(title, {
        body: message,
        tag: "simple-push-demo-notification",
        icon,
      });
    
      notification.addEventListener("click", () => {
        clients.openWindow(
          "https://example.blog.com/2015/03/04/something-new.html",
        );
      });
    });
    
  * Push API
  * Service Worker API


# Notifications API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The Notifications API allows web pages to control the display of system notifications to the end user. These are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app. The API is designed to be compatible with existing notification systems, across different platforms.
## Concepts and usage
On supported platforms, showing a system notification generally involves two things. First, the user needs to grant the current origin permission to display system notifications, which is generally done when the app or site initializes, using the `Notification.requestPermission()` method. This method should only be called when handling a user gesture, such as when handling a mouse click. For example:
    
    btn.addEventListener("click", () => {
      let promise = Notification.requestPermission();
      // wait for permission
    });
    
This will spawn a request dialog, along the following lines:
From here the user can choose to allow notifications from this origin, or block them. Once a choice has been made, the setting will generally persist for the current session.
Next, a new notification is created using the `Notification()` constructor. This must be passed a title argument, and can optionally be passed an options object to specify options, such as text direction, body text, icon to display, notification sound to play, and more.
In addition, the Notifications API spec specifies a number of additions to the ServiceWorker API, to allow service workers to fire notifications.
Note: To find out more about using notifications in your own app, read Using the Notifications API.
## Interfaces
`Notification`
    
Defines a notification object.
`NotificationEvent`
    
Represents a notification event dispatched on the `ServiceWorkerGlobalScope` of a `ServiceWorker`.
### Extensions to other interfaces
`notificationclick` event
    
Occurs when a user clicks on a displayed notification.
`notificationclose` event
    
Occurs when a user closes a displayed notification.
`ServiceWorkerRegistration.getNotifications()`
    
Returns a list of the notifications in the order that they were created from the current origin via the current service worker registration.
`ServiceWorkerRegistration.showNotification()`
    
Displays the notification with the requested title.
>
### api.Notification
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Notification` 20 14 224 23 7 42["A notification can only be sent from a service worker. To show a notification, see `ServiceWorkerRegistration.showNotification()`.", "This constructor always throws a `TypeError` exception."] 224 29["A notification can only be sent from a service worker. To show a notification, see `ServiceWorkerRegistration.showNotification()`.", "This constructor always throws a `TypeError` exception."] 16.4["This constructor throws a `ReferenceError` exception, unless the page is a web app saved to the home screen. The app's manifest must have a non-default `display` value.", "A notification can only be sent from a service worker. To show a notification, see `ServiceWorkerRegistration.showNotification()`."] 4.0["A notification can only be sent from a service worker. To show a notification, see `ServiceWorkerRegistration.showNotification()`.", "This constructor always throws a `TypeError` exception."] No No  
`Notifications_API` 20["Starting in Chrome 49, notifications do not work in incognito mode.", "Before Chrome 42, service worker additions were not supported."] 14 224 23["Starting in Opera 36, notifications do not work in incognito mode.", "Before Opera 29, service worker additions were not supported."] 7 42A notification can only be sent from a service worker. To show a notification, see `ServiceWorkerRegistration.showNotification()`. 224 29["Notifications in Opera for Android are only available through service workers. To show notifications on Android, see `ServiceWorkerRegistration.showNotification()`.", "Starting in Opera for Android 36, notifications do not work in incognito mode."] 16.4["The `Notification` interface is undefined, unless the page is a web app saved to the home screen. The app's manifest must have a non-default `display` value.", "A notification can only be sent from a service worker. To show a notification, see `ServiceWorkerRegistration.showNotification()`."] 4.0["Notifications in Samsung Internet are only available through service workers. To show notifications on Android, see `ServiceWorkerRegistration.showNotification()`.", "Starting in Samsung Internet 5.0, notifications do not work in incognito mode."] No No  
`actions` 53 18 preview 39 No 53 No 41 No 6.0 No No  
`badge` 53 18 No 39 No 53 No 41 No 6.0 No No  
`body` 33 14 26 23 11 42 26 29 16.4 4.0 No No  
`click_event` 20 14 22 23 7 42 22 29 16.4 4.0 No No  
`close` 20 14 22 23 7 42 22 29 16.4 4.0 No No  
`close_event` 20 14 22 23 7 42 22 29 16.4 4.0 No No  
`data` 44 16 34 31 16 44 34 32 16.4 4.0 No No  
`dir` 20 14 26 23 7 42 26 29 16.4 4.0 No No  
`error_event` 20 14 22 23 7 42 22 29 16.4 4.0 No No  
`icon` 33 14 26 23 NoThe property can be set, but has no effect. 42 26 29 NoThe property can be set, but has no effect. 4.0 No No  
`image` 56 18 No 43 No 56 No 43 No 6.0 No No  
`lang` 33 14 26 23 11 42 26 29 No 4.0 No No  
`maxActions_static` 48 18 preview138–140 35 No 48 138–140 35 No 5.0 No No  
`permission_static` 32 14 22 23 7 42 22 29 16.4The parent `Notification` interface is undefined unless the page is a web app saved to the home screen. The app's manifest must have a non-default `display` value. 4.0 No No  
`renotify` 50 79 No 37 No 50 No 37 No 5.0 No No  
`requestPermission_static` 20 14 22["From Firefox 70 onwards, cannot be called from a cross-origin `iframe`.", "From Firefox 72 onwards, can only be called in response to a user gesture such as a `click` event."] 23 157–15Only supported the deprecated callback syntax. 42 22["From Firefox Android 79 onwards, cannot be called from a cross-origin `iframe`.", "From Firefox Android 79 onwards, can only be called in response to a user gesture such as a `click` event."] 29 16.4The parent `Notification` interface is undefined unless the page is a web app saved to the home screen. The app's manifest must have a non-default `display` value. 4.0 No No  
`requireInteraction` 47 17 117Only supported on Windows. Behind a flag on other operating systems.117 34 No 47 117Only supported on Windows. Behind a flag on other operating systems. 34 No 5.0 No No  
`secure_context_required` 62 79 67 49 No 62 67 46 No 8.0 No No  
`show_event` 20 14 22 23 7 42 22 29 No 4.0 No No  
`silent` 43 17 132 30 16.6 43 132 30 No 4.0 No No  
`tag` 20 14 26 23 NoThe property can be set, but has no effect. 42 26 29 No 4.0 No No  
`timestamp` 50 17 No 37 No 50 No 37 No 5.0 No No  
`title` 33 14 26 23 11 42 26 29 No 4.0 No No  
`vibrate` 53 79 No 40 No 53 No 41 No 6.0 No No  
`worker_support` 42 15 41 29 No 42 41 29 No 4.0 No No  
### api.ServiceWorkerRegistration.showNotification
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Notifications_API` 42 17 44 29 16Notifications are supported on macOS Ventura and later. 42 44 29 16.4Notifications are supported in web apps saved to the home screen. 4.0 No NoNotifications are supported in web apps saved to the home screen.  
`options_actions_parameter` 48 18 No 35 No 48 No 35 No 5.0 No No  
`options_badge_parameter` 53 79 No 39 No 53 No 41 No 6.0 No No  
`options_data_parameter` 44 79 No 31 No 44 No 32 No 4.0 No No  
`options_image_parameter` 56 79 No 43 No 56 No 43 No 6.0 No No  
`options_renotify_parameter` 50 79 No 37 No 50 No 37 No 5.0 No No  
`options_requireInteraction_parameter` 47 79 No 34 No 47 No 34 No 5.0 No No  
`options_vibrate_parameter` 45 79 No 32 No NoIn Android Oreo and above, regardless of Chrome version, this parameter has no effect. See bug 40630890. No NoIn Android Oreo and above, regardless of Chrome version, this parameter has no effect. See bug 40630890. No NoIn Android Oreo and above, regardless of Chrome version, this parameter has no effect. See bug 40630890. No No  
### api.ServiceWorkerRegistration.getNotifications
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Notifications_API` 40 17 44 27 16Notifications are supported on macOS Ventura and later. 40 44 27 16.4Notifications are supported in web apps saved to the home screen. 4.0 No NoNotifications are supported in web apps saved to the home screen.  
  * Using the Notifications API


# SVGMaskElement
The `SVGMaskElement` interface provides access to the properties of `<mask>` elements, as well as methods to manipulate them.
EventTarget  Node  Element  SVGElement  SVGMaskElement 
## Instance properties
This interface also inherits properties from its parent, `SVGElement`.
`SVGMaskElement.maskUnits` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `maskUnits` attribute of the given `<mask>` element. Takes one of the constants defined in `SVGUnitTypes`.
`SVGMaskElement.maskContentUnits` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `maskContentUnits` attribute of the given `<mask>` element. Takes one of the constants defined in `SVGUnitTypes`.
`SVGMaskElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given `<mask>` element.
`SVGMaskElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given `<mask>` element.
`SVGMaskElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given `<mask>` element.
`SVGMaskElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given `<mask>` element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.
  * `<mask>`


# SpeechRecognitionErrorEvent
The `SpeechRecognitionErrorEvent` interface of the Web Speech API represents error messages from the recognition service.
Event  SpeechRecognitionErrorEvent 
## Instance properties
`SpeechRecognitionErrorEvent` also inherits properties from its parent interface, `Event`.
`SpeechRecognitionErrorEvent.error` Read only
    
Returns the type of error raised.
`SpeechRecognitionErrorEvent.message` Read only
    
Returns a message describing the error in more detail.
## Examples
    
    const recognition = new SpeechRecognition();
    
    recognition.onerror = (event) => {
      console.log(`Speech recognition error detected: ${event.error}`);
      console.log(`Additional information: ${event.message}`);
    };
    
  * Web Speech API


# PerformanceObserver
Note: This feature is available in Web Workers.
The `PerformanceObserver` interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.
## Constructor
`PerformanceObserver()`
    
Creates and returns a new `PerformanceObserver` object.
## Static properties
`PerformanceObserver.supportedEntryTypes` Read only
    
Returns an array of the `entryType` values supported by the user agent.
## Instance methods
`PerformanceObserver.observe()`
    
Specifies the set of entry types to observe. The performance observer's callback function will be invoked when performance entry is recorded for one of the specified `entryTypes`.
`PerformanceObserver.disconnect()`
    
Stops the performance observer callback from receiving performance entries.
`PerformanceObserver.takeRecords()`
    
Returns the current list of performance entries stored in the performance observer, emptying it out.
## Examples
>
### Creating a PerformanceObserver
The following example creates a `PerformanceObserver` watching for "mark" (`PerformanceMark`) and "measure" (`PerformanceMeasure`) events. The `perfObserver` callback provides a `list` (`PerformanceObserverEntryList`) which allows you to get observed performance entries.
    
    function perfObserver(list, observer) {
      list.getEntries().forEach((entry) => {
        if (entry.entryType === "mark") {
          console.log(`${entry.name}'s startTime: ${entry.startTime}`);
        }
        if (entry.entryType === "measure") {
          console.log(`${entry.name}'s duration: ${entry.duration}`);
        }
      });
    }
    const observer = new PerformanceObserver(perfObserver);
    observer.observe({ entryTypes: ["measure", "mark"] });
    
  * `MutationObserver`
  * `ResizeObserver`
  * `IntersectionObserver`


# RsaHashedImportParams
The `RsaHashedImportParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.importKey()` or `SubtleCrypto.unwrapKey()`, when importing any RSA-based key pair: that is, when the algorithm is identified as any of RSASSA-PKCS1-v1_5, RSA-PSS, or RSA-OAEP.
## Instance properties
`name`
    
A string. This should be set to `RSASSA-PKCS1-v1_5`, `RSA-PSS`, or `RSA-OAEP`, depending on the algorithm you want to use.
`hash`
    
A string or an object containing a single property called `name` with a string value. It is an identifier for the digest algorithm to use. This should be one of the following:
  * `SHA-256`: selects the SHA-256 algorithm.
  * `SHA-384`: selects the SHA-384 algorithm.
  * `SHA-512`: selects the SHA-512 algorithm.


Warning: `SHA-1` is also supported here but the SHA-1 algorithm is considered vulnerable and should no longer be used.
## Examples
See the examples for `SubtleCrypto.importKey()`.
Browsers that support any RSA-based algorithm for the `SubtleCrypto.importKey()` or `SubtleCrypto.unwrapKey()` methods will support this type.
  * `SubtleCrypto.importKey()`.
  * `SubtleCrypto.unwrapKey()`.


# HTMLOptionElement
The `HTMLOptionElement` interface represents `<option>` elements and inherits all properties and methods of the `HTMLElement` interface.
EventTarget  Node  Element  HTMLElement  HTMLOptionElement 
## Constructor
`Option()`
    
Returns a newly created `HTMLOptionElement` object. It has four parameters: the text to display, `text`, the value associated, `value`, the value of `defaultSelected`, and the value of `selected`. The last three parameters are optional.
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLOptionElement.defaultSelected`
    
Has a value of either `true` or `false` that shows the initial value of the `selected` HTML attribute, indicating whether the option is selected by default or not.
`HTMLOptionElement.disabled`
    
Has a value of either `true` or `false` representing the value of the `disabled` HTML attribute, which indicates that the option is unavailable to be selected.
`HTMLOptionElement.form` Read only
    
A `HTMLFormElement` representing the same value as the `form` of the corresponding `<select>` element, if the option is a descendant of a `<select>` element, or null if none is found.
`HTMLOptionElement.index` Read only
    
A `long` representing the position of the option within the list of options it belongs to, in tree-order. If the option is not part of a list of options, like when it is part of the `<datalist>` element, the value is `0`.
`HTMLOptionElement.label`
    
A string that reflects the value of the `label` HTML attribute, which provides a label for the option. If this attribute isn't specifically set, reading it returns the element's `text` content.
`HTMLOptionElement.selected`
    
Has a value of either `true` or `false` that indicates whether the option is currently selected.
`HTMLOptionElement.text`
    
A string that contains the text content of the element.
`HTMLOptionElement.value`
    
A string that reflects the value of the `value` HTML attribute, if it exists; otherwise reflects value of the `Node.textContent` property.
## Instance methods
Doesn't implement any specific method, but inherits methods from its parent, `HTMLElement`.
  * `<option>`
  * `<select>`
  * `<datalist>`
  * `<optgroup>`
  * `HTMLOptionsCollection`
  * `HTMLSelectElement`
  * `HTMLOptGroupElement`
  * `HTMLElement`
  * `HTMLCollection`


# Report
Note: This feature is available in Web Workers.
The `Report` interface of the Reporting API represents a single report.
Reports can be accessed in a number of ways:
  * Via the `ReportingObserver.takeRecords()` method — this returns all reports in an observer's report queue, and then empties the queue.
  * Via the `reports` parameter of the callback function passed into the `ReportingObserver()` constructor upon creation of a new observer instance. This contains the list of reports currently contained in the observer's report queue.
  * By sending requests to the endpoints defined via the `Reporting-Endpoints` HTTP header.


## Instance properties
`Report.body` Read only
    
The body of the report, which is a `ReportBody` object containing the detailed report information.
`Report.type` Read only
    
The type of report generated, e.g., `deprecation` or `intervention`.
`Report.url` Read only
    
The URL of the document that generated the report.
## Instance methods
This interface has no methods defined on it.
## Events
This interface has no events that fire on it.
## Examples
In our deprecation_report.html example, we create a simple reporting observer to observe usage of deprecated features on our web page:
    
    const options = {
      types: ["deprecation"],
      buffered: true,
    };
    
    const observer = new ReportingObserver((reports, observer) => {
      reportBtn.onclick = () => displayReports(reports);
    }, options);
    
We then tell it to start observing reports using `ReportingObserver.observe()`; this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor:
    
    observer.observe();
    
Because of the event handler we set up inside the `ReportingObserver()` constructor, we can now click the button to display the report details.
The report details are displayed via the `displayReports()` function, which takes the observer callback's `reports` parameter as its parameter:
    
    function displayReports(reports) {
      const outputElem = document.querySelector(".output");
      const list = document.createElement("ul");
      outputElem.appendChild(list);
    
      reports.forEach((report, i) => {
        let listItem = document.createElement("li");
        let textNode = document.createTextNode(
          `Report ${i + 1}, type: ${report.type}`,
        );
        listItem.appendChild(textNode);
        let innerList = document.createElement("ul");
        listItem.appendChild(innerList);
        list.appendChild(listItem);
    
        for (const key in report.body) {
          const innerListItem = document.createElement("li");
          const keyValue = report.body[key];
          innerListItem.textContent = `${key}: ${keyValue}`;
          innerList.appendChild(innerListItem);
        }
      });
    }
    
The `reports` parameter contains an array of all the reports in the observer's report queue. We loop over each report using a `forEach()` loop, then iterate over each entry of in the report's body using a `for...in` structure, displaying each key/value pair inside a list item.
  * Reporting API
  * `Report-To` HTTP header


# GamepadHapticActuator
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `GamepadHapticActuator` interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.
This interface is accessible through the `Gamepad.hapticActuators` property.
## Instance properties
`GamepadHapticActuator.effects` Read only Experimental
    
Returns an array of enumerated values representing the different haptic effects that the actuator supports.
`GamepadHapticActuator.type` Deprecated Read only Non-standard
    
Returns an enumerated value representing the type of the haptic hardware. This property is deprecated: use `GamepadHapticActuator.effects` to detect effect support.
## Instance methods
`GamepadHapticActuator.playEffect()` Read only
    
Causes the hardware to play a specific vibration effect.
`GamepadHapticActuator.pulse()` Read only
    
Makes the hardware pulse at a certain intensity for a specified duration.
`GamepadHapticActuator.reset()` Read only
    
Stops the hardware from playing an active vibration effect.
## Examples
    
    const gamepad = navigator.getGamepads()[0];
    
    gamepad.hapticActuators[0].pulse(1.0, 200);
    
    gamepad.vibrationActuator.playEffect("dual-rumble", {
      startDelay: 0,
      duration: 200,
      weakMagnitude: 1.0,
      strongMagnitude: 1.0,
    });
    
  * Gamepad API


# SharedStorage
The `SharedStorage` interface of the Shared Storage API represents the shared storage for a particular origin, defining methods to write data to the shared storage.
`SharedStorage` is the base class for:
  * `WindowSharedStorage`, accessed via `Window.sharedStorage`.
  * `WorkletSharedStorage`, accessed via `SharedStorageWorkletGlobalScope.sharedStorage`.


## Instance methods
`append()` Experimental
    
Appends a string to the value of an existing key-value pair in the current origin's shared storage.
`clear()` Experimental
    
Clears the current origin's shared storage, removing all data from it.
`delete()` Experimental
    
Deletes an existing key-value pair from the current origin's shared storage.
`set()` Experimental
    
Stores a new key-value pair in the current origin's shared storage or updates an existing one.
## Examples
    
    window.sharedStorage
      .set("ab-testing-group", "0")
      .then(() => console.log("Value saved to shared storage"));
    
  * `WindowSharedStorage`
  * Shared Storage API


# AuthenticatorAttestationResponse
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `AuthenticatorAttestationResponse` interface of the Web Authentication API is the result of a WebAuthn credential registration. It contains information about the credential that the server needs to perform WebAuthn assertions, such as its credential ID and public key.
An `AuthenticatorAttestationResponse` object instance is available in the `response` property of a `PublicKeyCredential` object returned by a successful `CredentialsContainer.create()` call.
This interface inherits from `AuthenticatorResponse`.
AuthenticatorResponse  AuthenticatorAttestationResponse 
Note: This interface is restricted to top-level contexts. Use of its features from within an `<iframe>` element will not have any effect.
## Instance properties
Also inherits properties from its parent, `AuthenticatorResponse`.
`AuthenticatorAttestationResponse.attestationObject` Read only
    
An `ArrayBuffer` containing authenticator data and an attestation statement for a new key pair generated by the authenticator.
`AuthenticatorResponse.clientDataJSON` Read only
    
Inherited from `AuthenticatorResponse`, this property contains the JSON-compatible serialization of the data passed from the browser to the authenticator in order to generate this credential — i.e., when `CredentialsContainer.create()` is called with a `publicKey` option. This data contains some information from the options passed into the `create()` call, and some information controlled by the browser.
## Instance methods
`AuthenticatorAttestationResponse.getAuthenticatorData()`
    
Returns an `ArrayBuffer` containing the authenticator data contained within the `AuthenticatorAttestationResponse.attestationObject` property.
`AuthenticatorAttestationResponse.getPublicKey()`
    
Returns an `ArrayBuffer` containing the DER `SubjectPublicKeyInfo` of the new credential (see Subject Public Key Info), or `null` if this is not available.
`AuthenticatorAttestationResponse.getPublicKeyAlgorithm()`
    
Returns a number that is equal to a COSE Algorithm Identifier, representing the cryptographic algorithm used for the new credential.
`AuthenticatorAttestationResponse.getTransports()`
    
Returns an array of strings describing which transport methods (e.g., `usb`, `nfc`) are believed to be supported with the authenticator. The array may be empty if the information is not available.
## Examples
See Creating a public key credential for a detailed example.
  * `AuthenticatorAssertionResponse`: the interface for the type of response given when retrieving an existing credential
  * `AuthenticatorResponse`: the parent interface


# Web Workers API
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.
## Concepts and usage
A worker is an object created using a constructor (e.g., `Worker()`) that runs a named JavaScript file — this file contains the code that will run in the worker thread.
In addition to the standard JavaScript set of functions (such as `String`, `Array`, `Object`, `JSON`, etc.), you can run almost any code you like inside a worker thread. There are some exceptions: for example, you can't directly manipulate the DOM from inside a worker, or use some default methods and properties of the `Window` object. For information about the code that you can run see supported functions, and supported Web APIs.
Data is sent between workers and the main thread via a system of messages — both sides send their messages using the `postMessage()` method, and respond to messages via the `onmessage` event handler (the message is contained within the `message` event's `data` property). The data is copied rather than shared.
Workers may in turn spawn new workers, as long as those workers are hosted within the same origin as the parent page.
In addition, workers can make network requests using the `fetch()` or `XMLHttpRequest` APIs (although note that the `responseXML` attribute of `XMLHttpRequest` will always be `null`).
### Worker types
There are a number of different types of workers:
  * Dedicated workers are workers that are utilized by a single script. This context is represented by a `DedicatedWorkerGlobalScope` object.
  * Shared workers are workers that can be utilized by multiple scripts running in different windows, IFrames, etc., as long as they are in the same domain as the worker. They are a little more complex than dedicated workers — scripts must communicate via an active port.
  * Service Workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.


### Worker contexts
While `Window` is not directly available to workers, many of the same methods are defined in a shared mixin (`WindowOrWorkerGlobalScope`), and made available to workers through their own `WorkerGlobalScope`-derived contexts:
  * `DedicatedWorkerGlobalScope` for dedicated workers
  * `SharedWorkerGlobalScope` for shared workers
  * `ServiceWorkerGlobalScope` for service workers


## Interfaces
`Worker`
    
Represents a running worker thread, allowing you to pass messages to the running worker code.
`WorkerLocation`
    
Defines the absolute location of the script executed by the `Worker`.
`SharedWorker`
    
Represents a specific kind of worker that can be accessed from several browsing contexts (i.e., windows, tabs, or iframes) or even other workers.
`WorkerGlobalScope`
    
Represents the generic scope of any worker (doing the same job as `Window` does for normal web content). Different types of worker have scope objects that inherit from this interface and add more specific features.
`DedicatedWorkerGlobalScope`
    
Represents the scope of a dedicated worker, inheriting from `WorkerGlobalScope` and adding some dedicated features.
`SharedWorkerGlobalScope`
    
Represents the scope of a shared worker, inheriting from `WorkerGlobalScope` and adding some dedicated features.
`WorkerNavigator`
    
Represents the identity and state of the user agent (the client).
## Examples
We have created a couple of demos to show web worker usage:
  * Basic dedicated worker example (run dedicated worker).
  * Basic shared worker example (run shared worker).
  * OffscreenCanvas worker example (run OffscreenCanvas worker).


You can find out more information on how these demos work in Using Web Workers.
  * Using Web Workers
  * `Worker` interface
  * `SharedWorker` interface
  * Service Worker API


# ClipboardEvent
The `ClipboardEvent` interface of the Clipboard API represents events providing information related to modification of the clipboard, that is `cut`, `copy`, and `paste` events.
Event  ClipboardEvent 
## Constructor
`ClipboardEvent()`
    
Creates a `ClipboardEvent` event with the given parameters.
## Instance properties
Also inherits properties from its parent `Event`.
`ClipboardEvent.clipboardData` Read only
    
A `DataTransfer` object containing the data affected by the user-initiated `cut`, `copy`, or `paste` operation, along with its MIME type.
## Instance methods
No specific methods; inherits methods from its parent `Event`.
  * Copy-related events: `copy`, `cut`, `paste`
  * Clipboard API
  * Image support for Async Clipboard article


# MediaStreamTrackProcessor
Note: This feature is only available in Dedicated Web Workers.
Warning: Browsers differ on which global context they expose this interface in (e.g., only window in some browsers and only dedicated worker in others), making them incompatible. Keep this in mind when comparing support.
The `MediaStreamTrackProcessor` interface of the Insertable Streams for MediaStreamTrack API consumes a video `MediaStreamTrack` object's source and generates a stream of `VideoFrame` objects.
## Constructor
`MediaStreamTrackProcessor()`
    
Creates a new `MediaStreamTrackProcessor` object.
`window.MediaStreamTrackProcessor()` Experimental Non-standard
    
Creates a new `MediaStreamTrackProcessor` object on the main thread that can process both video and audio.
## Instance properties
`MediaStreamTrackProcessor.readable`
    
Returns a `ReadableStream`.
## Examples
The following example is from the article Unbundling MediaStreamTrackProcessor and VideoTrackGenerator. It transfers a camera `MediaStreamTrack` to a worker for processing. The worker creates a pipeline that applies a sepia tone filter to the video frames and mirrors them. The pipeline culminates in a `VideoTrackGenerator` whose `MediaStreamTrack` is transferred back and played. The media now flows in real time through the transform off the main thread.
    
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    const [track] = stream.getVideoTracks();
    const worker = new Worker("worker.js");
    worker.postMessage({ track }, [track]);
    const { data } = await new Promise((r) => {
      worker.onmessage = r;
    });
    video.srcObject = new MediaStream([data.track]);
    
worker.js:
    
    onmessage = async ({ data: { track } }) => {
      const vtg = new VideoTrackGenerator();
      self.postMessage({ track: vtg.track }, [vtg.track]);
      const { readable } = new MediaStreamTrackProcessor({ track });
      await readable
        .pipeThrough(new TransformStream({ transform }))
        .pipeTo(vtg.writable);
    };
    
  * `VideoTrackGenerator`
  * Insertable streams for MediaStreamTrack on developer.chrome.com 
Note: This article was written before the API was restricted to workers and video. Beware its use of the non-standard version of `MediaStreamTrackProcessor` which blocks on the main thread.


# DOMPointReadOnly
Note: This feature is available in Web Workers.
The `DOMPointReadOnly` interface specifies the coordinate and perspective fields used by `DOMPoint` to define a 2D or 3D point in a coordinate system.
There are two ways to create a new `DOMPointReadOnly` instance. First, you can use its constructor, passing in the values of the parameters for each dimension and, optionally, the perspective:
    
    /* 2D */
    const point2D = new DOMPointReadOnly(50, 50);
    
    /* 3D */
    const point3D = new DOMPointReadOnly(50, 50, 25);
    
    /* 3D with perspective */
    const point3DPerspective = new DOMPointReadOnly(100, 100, 100, 1.0);
    
The other option is to use the static `DOMPointReadOnly.fromPoint()` method:
    
    const point = DOMPointReadOnly.fromPoint({ x: 100, y: 100, z: 50, w: 1.0 });
    
## Constructor
`DOMPointReadOnly()`
    
Creates a new `DOMPointReadOnly` object given the values of its coordinates and perspective. To create a point using an object, you can instead use `DOMPointReadOnly.fromPoint()`.
## Instance properties
`DOMPointReadOnly.x` Read only
    
The point's horizontal coordinate, `x`.
`DOMPointReadOnly.y` Read only
    
The point's vertical coordinate, `y`.
`DOMPointReadOnly.z` Read only
    
The point's depth coordinate, `z`.
`DOMPointReadOnly.w` Read only
    
The point's perspective value, `w`.
## Static methods
`DOMPointReadOnly.fromPoint()`
    
A static method that creates a new `DOMPointReadOnly` object given the coordinates provided in the specified object.
## Instance methods
`matrixTransform()`
    
Applies a matrix transform specified as an object to the `DOMPointReadOnly` object.
`toJSON()`
    
Returns a JSON representation of the `DOMPointReadOnly` object.
  * `DOMPoint`
  * `DOMRect`
  * `DOMMatrix`


# SVGFEBlendElement
The `SVGFEBlendElement` interface corresponds to the `<feBlend>` element.
EventTarget  Node  Element  SVGElement  SVGFEBlendElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEBlendElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEBlendElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFEBlendElement.in2` Read only
    
An `SVGAnimatedString` corresponding to the `in2` attribute of the given element.
`SVGFEBlendElement.mode` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `mode` attribute of the given element. It takes one of the `SVG_FEBLEND_MODE_*` constants defined on this interface.
`SVGFEBlendElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEBlendElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEBlendElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEBlendElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
## Static properties
`SVG_FEBLEND_MODE_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_FEBLEND_MODE_NORMAL` (1)
    
Corresponds to the value `normal`.
`SVG_FEBLEND_MODE_MULTIPLY` (2)
    
Corresponds to the value `multiply`.
`SVG_FEBLEND_MODE_SCREEN` (3)
    
Corresponds to the value `screen`.
`SVG_FEBLEND_MODE_DARKEN` (4)
    
Corresponds to the value `darken`.
`SVG_FEBLEND_MODE_LIGHTEN` (5)
    
Corresponds to the value `lighten`.
  * `<feBlend>`


# MutationObserver
The `MutationObserver` interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.
## Constructor
`MutationObserver()`
    
Creates and returns a new `MutationObserver` which will invoke a specified callback function when DOM changes occur.
## Instance methods
`disconnect()`
    
Stops the `MutationObserver` instance from receiving further notifications until and unless `observe()` is called again.
`observe()`
    
Configures the `MutationObserver` to begin receiving notifications through its callback function when DOM changes matching the given options occur.
`takeRecords()`
    
Removes all pending notifications from the `MutationObserver`'s notification queue and returns them in a new `Array` of `MutationRecord` objects.
## Example
The following example was adapted from this blog post.
    
    // Select the node that will be observed for mutations
    const targetNode = document.getElementById("some-id");
    
    // Options for the observer (which mutations to observe)
    const config = { attributes: true, childList: true, subtree: true };
    
    // Callback function to execute when mutations are observed
    const callback = (mutationList, observer) => {
      for (const mutation of mutationList) {
        if (mutation.type === "childList") {
          console.log("A child node has been added or removed.");
        } else if (mutation.type === "attributes") {
          console.log(`The ${mutation.attributeName} attribute was modified.`);
        }
      }
    };
    
    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);
    
    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
    
    // Later, you can stop observing
    observer.disconnect();
    
  * `PerformanceObserver`
  * `ResizeObserver`
  * `IntersectionObserver`
  * A brief overview
  * A more in-depth discussion
  * A screencast by Chromium developer Rafael Weinstein


# IdentityCredential
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `IdentityCredential` interface of the Federated Credential Management API (FedCM) represents a user identity credential arising from a successful federated sign-in.
A successful `navigator.credentials.get()` call that includes an `identity` option fulfills with an `IdentityCredential` instance.
Credential  IdentityCredential 
## Instance properties
Inherits properties from its ancestor, `Credential`.
`IdentityCredential.configURL` Read only Experimental
    
A string specifying the config file URL of the IdP used for sign-in.
`IdentityCredential.isAutoSelected` Read only Experimental
    
A boolean value that indicates whether the federated sign-in was carried out using auto-reauthentication (i.e., without user mediation) or not.
`IdentityCredential.token` Experimental
    
Returns the token used to validate the associated sign-in.
## Static methods
`IdentityCredential.disconnect()` Experimental
    
Disconnects the federated sign-in account used to obtain the credential.
## Examples
>
### Basic federated sign-in
Relying parties (RPs) can call `navigator.credentials.get()` with the `identity` option to make a request for users to sign in to the RP via an identity provider (IdP), using identity federation. A typical request would look like this:
    
    async function signIn() {
      const identityCredential = await navigator.credentials.get({
        identity: {
          providers: [
            {
              configURL: "https://accounts.idp.example/config.json",
              clientId: "********",
              nonce: "******",
            },
          ],
        },
      });
    }
    
If successful, this call will fulfill with an `IdentityCredential` instance. From this, you could return the `IdentityCredential.token` value, for example:
    
    console.log(identityCredential.token);
    
Check out Federated Credential Management API (FedCM) for more details on how this works. This call will start off the sign-in flow described in FedCM sign-in flow.
  * Federated Credential Management API


# ReportingObserver
Note: This feature is available in Web Workers.
The `ReportingObserver` interface of the Reporting API allows you to collect and access reports.
## Constructor
`ReportingObserver()`
    
Creates a new `ReportingObserver` object instance, which can be used to collect and access reports.
## Instance properties
This interface has no properties defined on it.
## Instance methods
`ReportingObserver.disconnect()`
    
Stops a reporting observer that had previously started observing from collecting reports.
`ReportingObserver.observe()`
    
Instructs a reporting observer to start collecting reports in its report queue.
`ReportingObserver.takeRecords()`
    
Returns the current list of reports contained in the observer's report queue, and empties the queue.
## Events
This interface has no events that fire on it.
## Examples
In our deprecation_report.html example, we create a simple reporting observer to observe usage of deprecated features on our web page:
    
    const options = {
      types: ["deprecation"],
      buffered: true,
    };
    
    const observer = new ReportingObserver((reports, observer) => {
      reportBtn.onclick = () => displayReports(reports);
    }, options);
    
We then tell it to start observing reports using `ReportingObserver.observe()`; this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor:
    
    observer.observe();
    
Later on in the example we deliberately use the deprecated version of `MediaDevices.getUserMedia()`:
    
    if (navigator.mozGetUserMedia) {
      navigator.mozGetUserMedia(constraints, success, failure);
    } else {
      navigator.getUserMedia(constraints, success, failure);
    }
    
This causes a deprecation report to be generated; because of the event handler we set up inside the `ReportingObserver()` constructor, we can now click the button to display the report details.
Note: If you look at the complete source code, you'll notice that we actually call the deprecated `getUserMedia()` method twice. After the first time we call `ReportingObserver.takeRecords()`, which returns the first generated report and empties the queue. Because of this, when the button is pressed only the second report is listed.
  * Reporting API


# GPUInternalError
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUInternalError` interface of the WebGPU API describes an application error indicating that an operation failed for a system or implementation-specific reason, even when all validation requirements were satisfied.
It represents one of the types of errors surfaced by `GPUDevice.popErrorScope` and the `uncapturederror` event.
Internal errors occur when something happens in the WebGPU implementation that wasn't caught by validation and wasn't clearly identifiable as an out-of-memory error. It generally means that an operation your code performed hit a system limit in a way that was difficult to express with WebGPU's supported limits. The same operation might succeed on a different device. These can only be raised by pipeline creation, usually if the shader is too complex for the device.
GPUError  GPUInternalError 
## Constructor
`GPUInternalError()`
    
Creates a new `GPUInternalError` object instance.
## Instance properties
The `message` property is inherited from its parent, `GPUError`:
`message` Experimental Read only
    
A string providing a human-readable message that explains why the error occurred.
## Examples
The following example uses an error scope to capture a suspected validation error, logging it to the console.
    
    device.pushErrorScope("internal");
    
    let module = device.createShaderModule({
      code: shader, // REALLY complex shader
    });
    
    device.popErrorScope().then((error) => {
      if (error) {
        // error is a GPUInternalError object instance
        module = null;
        console.error(`An error occurred while creating shader: ${error.message}`);
      }
    });
    
  * The WebGPU API
  * WebGPU Error Handling best practices


# IndexedDB API
Note: This feature is available in Web Workers.
IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution. This is the main landing page for MDN's IndexedDB coverage — here we provide links to the full API reference and usage guides, browser support details, and some explanation of key concepts.
## Key concepts and usage
IndexedDB is a transactional database system, like an SQL-based Relational Database Management System (RDBMS). However, unlike SQL-based RDBMSes, which use fixed-column tables, IndexedDB is a JavaScript-based object-oriented database. IndexedDB lets you store and retrieve objects that are indexed with a key; any objects supported by the structured clone algorithm can be stored. You need to specify the database schema, open a connection to your database, and then retrieve and update data within a series of transactions.
  * Read more about IndexedDB key characteristics and basic terminology.
  * Learn to use IndexedDB asynchronously from first principles with our Using IndexedDB guide.
  * See a complete step-by-step example in the checking when a deadline is due guide.


Note: Like most web storage solutions, IndexedDB follows a same-origin policy. So while you can access stored data within a domain, you cannot access data across different domains.
### Synchronous and asynchronous
Operations performed using IndexedDB are done asynchronously, so as not to block applications.
### Storage limits and eviction criteria
There are a number of web technologies that store data of one kind or another on the client side (i.e., on your local disk). IndexedDB is most commonly talked about. The process by which the browser works out how much space to allocate to web data storage and what to delete when that limit is reached is not simple, and differs between browsers. Browser storage quotas and eviction criteria attempts to explain how this works, at least in the case of Firefox.
## Interfaces
To get access to a database, call `open()` on the `indexedDB` property of a window object. This method returns an `IDBRequest` object; asynchronous operations communicate to the calling application by firing events on `IDBRequest` objects.
### Connecting to a database
`IDBFactory`
    
Provides access to a database. An object of this type is the value of the global `Window.indexedDB` and `WorkerGlobalScope.indexedDB` properties. It is therefore the entry point for the API.
`IDBOpenDBRequest`
    
Represents a request to open a database.
`IDBDatabase`
    
Represents a connection to a database. It's the only way to get a transaction on the database.
### Retrieving and modifying data
`IDBTransaction`
    
Represents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or readwrite) that you want.
`IDBRequest`
    
Generic interface that handles database requests and provides access to results.
`IDBObjectStore`
    
Represents an object store that allows access to a set of data in an IndexedDB database, looked up via primary key.
`IDBIndex`
    
Also allows access to a subset of data in an IndexedDB database, but uses an index to retrieve the record(s) rather than the primary key. This is sometimes faster than using `IDBObjectStore`.
`IDBCursor`
    
Iterates over object stores and indexes.
`IDBCursorWithValue`
    
Iterates over object stores and indexes and returns the cursor's current value.
`IDBKeyRange`
    
Defines a key range that can be used to retrieve data from a database in a certain range.
### Custom event interfaces
This specification fires events with the following custom interface:
`IDBVersionChangeEvent`
    
The `IDBVersionChangeEvent` interface indicates that the version of the database has changed, as the result of an `IDBOpenDBRequest.onupgradeneeded` event handler function.
## Examples
  * To-do Notifications (view example live): The reference application for the examples in the reference docs.


  * Web Storage API
  * Window: localStorage property
  * Window: sessionStorage property
  * StorageEvent


# ProcessingInstruction
The `ProcessingInstruction` interface represents a processing instruction; that is, a `Node` which embeds an instruction targeting a specific application but that can be ignored by any other applications which don't recognize the instruction.
Warning: `ProcessingInstruction` nodes are only supported in XML documents, not in HTML documents. In these, a process instruction will be considered as a comment and be represented as a `Comment` object in the tree.
A processing instruction may be different than the XML declaration.
Note: User-defined processing instructions cannot begin with `"xml"`, as `xml`-prefixed processing-instruction target names are reserved by the XML specification for particular, standard uses (see, for example, `<?xml-stylesheet ?>`.
For example:
    
    <?xml version="1.0"?>
    
is a processing instruction whose `target` is `xml`.
EventTarget  Node  CharacterData  ProcessingInstruction 
## Instance properties
This interface also inherits properties from its parent interfaces, `CharacterData`, `Node`, and `EventTarget`.
`ProcessingInstruction.sheet` Read only
    
Returns the associated `StyleSheet` object, if any; or `null` if none.
`ProcessingInstruction.target` Read only
    
A name identifying the application to which the instruction is targeted.
## Instance methods
This interface doesn't have any specific method, but inherits methods from its parent interfaces, `CharacterData`, `Node`, and `EventTarget`.
  * document.createProcessingInstruction()
  * The DOM API


# PeriodicSyncManager
Note: This feature is available in Web Workers.
The `PeriodicSyncManager` interface of the Web Periodic Background Synchronization API provides a way to register tasks to be run in a service worker at periodic intervals with network connectivity. These tasks are referred to as periodic background sync requests. Access `PeriodicSyncManager` through the `ServiceWorkerRegistration.periodicSync`.
## Instance properties
None.
## Instance methods
`PeriodicSyncManager.register()` Experimental
    
Registers a periodic sync request with the browser with the specified tag and options. Returns a `Promise` that resolves when the registration completes.
`PeriodicSyncManager.getTags()` Experimental
    
Returns a `Promise` that resolves with a list of `strings` representing the tags that are currently registered for periodic syncing.
`PeriodicSyncManager.unregister()` Experimental
    
Unregisters the periodic sync request corresponding to the specified tag and returns a `Promise` that resolves when unregistration completes.
## Examples
The following examples show how to use the interface.
### Requesting a Periodic Background Sync
The following asynchronous function registers a periodic background sync at a minimum interval of one day from a browsing context:
    
    async function registerPeriodicNewsCheck() {
      const registration = await navigator.serviceWorker.ready;
      try {
        await registration.periodicSync.register("get-latest-news", {
          minInterval: 24 * 60 * 60 * 1000,
        });
      } catch {
        console.log("Periodic Sync could not be registered!");
      }
    }
    
### Verifying a Background Periodic Sync by Tag
This code checks to see if a Periodic Background Sync task with a given tag is registered.
    
    navigator.serviceWorker.ready.then((registration) => {
      registration.periodicSync.getTags().then((tags) => {
        if (tags.includes("get-latest-news")) skipDownloadingLatestNewsOnPageLoad();
      });
    });
    
### Removing a Periodic Background Sync Task
The following code removes a Periodic Background Sync task to stop articles syncing in the background.
    
    navigator.serviceWorker.ready.then((registration) => {
      registration.periodicSync.unregister("get-latest-news");
    });
    
  * Richer offline experiences with the Periodic Background Sync API


# EXT_texture_compression_rgtc extension
The `EXT_texture_compression_rgtc` extension is part of the WebGL API and exposes 4 RGTC compressed texture formats. RGTC is a block-based texture compression format suited for unsigned and signed red and red-green textures (Red-Green Texture Compression).
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: Support depends on the system's graphics driver. There is no support on Windows.
This extension is available to both, WebGL1 and WebGL2 contexts.
## Constants
The compressed texture formats are exposed by 4 constants and can be used in two functions: `compressedTexImage2D()` and `compressedTexSubImage2D()`.
`ext.COMPRESSED_RED_RGTC1_EXT`
    
Each 4x4 block of texels consists of 64 bits of unsigned red image data. See also BC4 unsigned.
`ext.COMPRESSED_SIGNED_RED_RGTC1_EXT`
    
Each 4x4 block of texels consists of 64 bits of signed red image data. See also BC4 signed.
`ext.COMPRESSED_RED_GREEN_RGTC2_EXT`
    
Each 4x4 block of texels consists of 64 bits of compressed unsigned red image data followed by 64 bits of compressed unsigned green image data. See also BC5 unsigned.
`ext.COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT`
    
Each 4x4 block of texels consists of 64 bits of compressed signed red image data followed by 64 bits of compressed signed green image data. See also BC5 signed.
## Examples
    
    const ext = gl.getExtension("EXT_texture_compression_rgtc");
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    gl.compressedTexImage2D(
      gl.TEXTURE_2D,
      0,
      ext.COMPRESSED_RED_RGTC1_EXT,
      128,
      128,
      0,
      textureData,
    );
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.compressedTexImage2D()`
  * `WebGLRenderingContext.compressedTexSubImage2D()`
  * `WebGLRenderingContext.getParameter()`


# ValidityState
The `ValidityState` interface represents the validity states that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.
## Instance properties
For each of these Boolean properties, a value of `true` indicates that the specified reason validation may have failed is true, with the exception of the `valid` property, which is `true` if the element's value obeys all constraints.
`badInput` Read only
    
A boolean value that is `true` if the user has provided input that the browser is unable to convert.
`customError` Read only
    
A boolean value indicating whether the element's custom validity message has been set to a non-empty string by calling the element's `setCustomValidity()` method.
`patternMismatch` Read only
    
A boolean value that is `true` if the value does not match the specified `pattern`, and `false` if it does match. If `true`, the element matches the `:invalid` CSS pseudo-class.
`rangeOverflow` Read only
    
A boolean value that is `true` if the value is greater than the maximum specified by the `max` attribute, or `false` if it is less than or equal to the maximum. If `true`, the element matches the `:invalid` and `:out-of-range` and CSS pseudo-classes.
`rangeUnderflow` Read only
    
A boolean value that is `true` if the value is less than the minimum specified by the `min` attribute, or `false` if it is greater than or equal to the minimum. If `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.
`stepMismatch` Read only
    
A boolean value that is `true` if the value does not fit the rules determined by the `step` attribute (that is, it's not evenly divisible by the step value), or `false` if it does fit the step rule. If `true`, the element matches the `:invalid` CSS pseudo-class.
`tooLong` Read only
    
A boolean value that is `true` if the value exceeds the specified `maxlength` for `HTMLInputElement` or `HTMLTextAreaElement` objects, or `false` if its length is less than or equal to the maximum length. Note: This property is never `true` in Gecko, because elements' values are prevented from being longer than `maxlength`. If `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.
`tooShort` Read only
    
A boolean value that is `true` if the value fails to meet the specified `minlength` for `HTMLInputElement` or `HTMLTextAreaElement` objects, or `false` if its length is greater than or equal to the minimum length. If `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.
`typeMismatch` Read only
    
A boolean value that is `true` if the value is not in the required syntax (when `type` is `email` or `url`), or `false` if the syntax is correct. If `true`, the element matches the `:invalid` CSS pseudo-class.
`valid` Read only
    
A boolean value that is `true` if the element meets all its validation constraints, and is therefore considered to be valid, or `false` if it fails any constraint. If `true`, the element matches the `:valid` CSS pseudo-class; the `:invalid` CSS pseudo-class otherwise.
`valueMissing` Read only
    
A boolean value that is `true` if the element has a `required` attribute, but no value, or `false` otherwise. If `true`, the element matches the `:invalid` CSS pseudo-class.
  * Guide: Constraint validation
  * Tutorial: Form data validation


# Screen
The `Screen` interface represents a screen, usually the one on which the current window is being rendered, and is obtained using `window.screen`.
Note that browsers determine which screen to report as current by detecting which screen has the center of the browser window.
## Instance properties
Also inherits properties from its parent `EventTarget`.
`Screen.availHeight`
    
Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.
`Screen.availWidth`
    
Returns the amount of horizontal space in pixels available to the window.
`Screen.colorDepth`
    
Returns the color depth of the screen.
`Screen.height`
    
Returns the height of the screen in pixels.
`Screen.isExtended` Experimental Secure context
    
Returns `true` if the user's device has multiple screens, and `false` if not.
`Screen.orientation`
    
Returns the `ScreenOrientation` instance associated with this screen.
`Screen.pixelDepth`
    
Gets the bit depth of the screen.
`Screen.width`
    
Returns the width of the screen.
`Screen.mozEnabled` Non-standard Deprecated
    
Boolean. Setting to false will turn off the device's screen.
`Screen.mozBrightness` Non-standard Deprecated
    
Controls the brightness of a device's screen. A double between 0 and 1.0 is expected.
## Non-standard properties
The following properties are specified as part of the Window Management API, which makes them available on the `ScreenDetailed` interface; this is where we have chosen to document them. However, non-standard versions of these properties are available on the `Screen` interface in browsers that don't support that API. See this page's Browser compatibility table for details of the non-standard support.
`Screen.availLeft` Read only Non-standard Secure context
    
A number representing the x-coordinate (left-hand edge) of the available screen area.
`Screen.availTop` Read only Non-standard Secure context
    
A number representing the y-coordinate (top edge) of the available screen area.
`Screen.left` Read only Non-standard Secure context
    
A number representing the x-coordinate (left-hand edge) of the total screen area.
`Screen.top` Read only Non-standard Deprecated Secure context
    
A number representing the y-coordinate (top edge) of the total screen area.
## Instance methods
Also inherits methods from its parent `EventTarget`.
`Screen.lockOrientation` Deprecated
    
Lock the screen orientation (only works in fullscreen or for installed apps)
`Screen.unlockOrientation` Deprecated
    
Unlock the screen orientation (only works in fullscreen or for installed apps)
## Events
`change` Experimental Secure context
    
Fired on a specific screen when it changes in some way — width or height, available width or height, color depth, or orientation.
`orientationchange` Deprecated Non-standard
    
Fires when the screen orientation changes.
## Examples
    
    if (screen.colorDepth < 8) {
      // use low-color version of page
    } else {
      // use regular, colorful page
    }
    
# Reporting API
Note: This feature is available in Web Workers.
The Reporting API provides a generic reporting mechanism for web applications to use to make reports available based on various platform features (for example Content Security Policy, Permissions-Policy, or feature deprecation reports) in a consistent manner.
## Concepts and usage
There are several different features and problems on the web platform that generate information useful to web developers when they are trying to fix bugs or improve their websites in other ways. Such information can include:
  * Content Security Policy violations.
  * Permissions-Policy violations.
  * Integrity-Policy violations.
  * Deprecated feature usage (when you are using something that will stop working soon in browsers).
  * Occurrence of crashes.
  * Occurrence of user-agent interventions (when the browser blocks something your code is trying to do because it is deemed a security risk for example, or just plain annoying, like auto-playing audio).


The purpose of the Reporting API is to provide a consistent reporting mechanism that can be used to make such information available to developers in the form of reports represented by JavaScript objects. There are a few ways to use it, which are detailed in the sections below.
### Reporting server endpoints
Each unique origin you want to get reports for can be given a series of "endpoints", which are named URLs (or groups of URLs) that can be sent reports from a user agent. A reporting server at these endpoints can collect the reports, and process and present them as needed by your application.
The `Reporting-Endpoints` HTTP header is used to specify details about the different endpoints that a user-agent has available to it for delivering reports. The `report-to` directive can then be used on particular HTTP response headers to indicate the specific endpoint that will be used for the associated report. For example, the CSP `report-to` directive can be used on the `Content-Security-Policy` or `Content-Security-Policy-Report-Only` HTTP headers to specify the endpoint that CSP violation reports should be sent to.
Note: There is no absolute guarantee of report delivery — a report could still fail to be collected if a serious error occurs.
The reports themselves are sent to the target endpoint by the user agent in a `POST` operation with a `Content-Type` of `application/reports+json`. They are serializations of `Report` objects, where the `type` indicates the type of report, the `url` indicates the origin of the report, and the `body` contains a serialization of the API interface that corresponds to the report type. For example, CSP violation reports have a `type` of `csp-violation` and a `body` that is a serialization of a `CSPViolationReportBody` object.
Reports sent to endpoints can be retrieved independently of the running of the websites they relate to, which is useful — a crash for example could bring down a website and stop anything running, but a report could still be obtained to give the developer some clues as to why it happened.
### Reporting observers
Reports can also be obtained via `ReportingObserver` objects created via JavaScript inside the website you are aiming to get reports on. This method is not as failsafe as sending reports to the server because any page crash could stop you retrieving the reports — but it is easier to set up, and more flexible.
A `ReportingObserver` object is created using the `ReportingObserver()` constructor, which is passed two parameters:
  * A callback function with two parameters — an array of the reports available in the observer's report queue and a copy of the same `ReportingObserver` object, which allows observation to be controlled directly from inside the callback. The callback runs when observation starts.
  * An options dictionary that allows you to specify the type of reports to collect, and whether reports generated before the observer was created should be observable (`buffered: true`).


Methods are then available on the observer to start collecting reports (`ReportingObserver.observe()`), retrieve the reports currently in the report queue (`ReportingObserver.takeRecords()`), and disconnect the observer so it can no longer collect records (`ReportingObserver.disconnect()`).
### Report types
Reports sent to reporting endpoints and reporting observers are essentially the same: they have an origin `url`, a `type`, and a `body` that is an instance of the interface corresponding with that type. The only difference is that server reports are JSON serializations of the objects.
The mapping of report `type` to `body` is shown below.
`type` `body` Items reported  
`deprecation` `DeprecationReportBody` Deprecated features used by the site.  
`integrity-violation` `IntegrityViolationReportBody` Violations of the page's integrity policy.  
`intervention` `InterventionReportBody` Features blocked by the user agent, for example, if permissions are not granted.  
`csp-violation` `CSPViolationReportBody` Violations of the site's CSP policy.  
### Generating reports via WebDriver
The Reporting API spec also defines a Generate Test Report WebDriver extension, which allows you to simulate report generation during automation. Reports generated via WebDriver are observed by any registered `ReportObserver` objects present in the loaded website. This is not yet documented.
## Interfaces
`DeprecationReportBody`
    
Contains details of deprecated web platform features that a website is using.
`InterventionReportBody`
    
Contains details of an intervention report, which is generated when a request made by the website has been denied by the browser; e.g., for security reasons.
`Report`
    
An object representing a single report.
`ReportingObserver`
    
An object that can be used to collect and access reports as they are generated.
### Related interfaces
These interfaces are defined as part of the HTTP Content Security Policy (CSP) specifications:
`CSPViolationReportBody`
    
Contains details of a CSP violation.
`SecurityPolicyViolationEvent`
    
Represents the event object of a `securitypolicyviolation` event fired on an element, document, or worker when its CSP is violated.
This interface is defined as part of the Subresource Integrity specification:
`IntegrityViolationReportBody`
    
Contains information about a resource that was blocked because it did not meet the Subresource Integrity guarantees required by its `Integrity-Policy`, or that would be blocked for report-only policies set using `Integrity-Policy-Report-Only`.
## Related HTTP Headers
These HTTP response headers define the endpoints where reports are sent.
`Reporting-Endpoints`
    
Sets the name and URL of reporting endpoints. These endpoints can be used in the `report-to` directive, which may be used with a number of HTTP headers including `Content-Security-Policy` and or `Content-Security-Policy-Report-Only`.
`Report-To` Deprecated
    
No longer part of the Reporting API but still supported by some browsers. This sets the name and URL of reporting endpoint groups, which may be used with a number of HTTP headers especially for Network Error Logging that has not yet been updated to support `Reporting-Endpoints`. Other Reporting API reports should use `Reporting-Endpoints` instead for better future support.
Report endpoints can be set for the following reports using the `report-to` directive on the corresponding headers:
CSP violations
    
`Content-Security-Policy` or `Content-Security-Policy-Report-Only`.
Report endpoints can be set for the following reports using the `endpoints` field in a structured dictionary on the corresponding headers:
Integrity-Policy violations
    
`Integrity-Policy` or `Integrity-Policy-Report-Only`.
## Examples
>
### Reporting deprecated features
In our deprecation_report.html example, we create a simple reporting observer to observe usage of deprecated features on our web page:
    
    const options = {
      types: ["deprecation"],
      buffered: true,
    };
    
    const observer = new ReportingObserver((reports, observer) => {
      reportBtn.onclick = () => displayReports(reports);
    }, options);
    
We then tell it to start observing reports using `ReportingObserver.observe()`; this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor:
    
    observer.observe();
    
Later on in the example we deliberately use the deprecated version of `MediaDevices.getUserMedia()`:
    
    if (navigator.mozGetUserMedia) {
      navigator.mozGetUserMedia(constraints, success, failure);
    } else {
      navigator.getUserMedia(constraints, success, failure);
    }
    
This causes a deprecation report to be generated; because of the event handler we set up inside the `ReportingObserver()` constructor, we can now click the button to display the report details.
Note: If you look at the complete source code, you'll notice that we actually call the deprecated `getUserMedia()` method twice. After the first time we call `ReportingObserver.takeRecords()`, which returns the first generated report and empties the queue. Because of this, when the button is pressed only the second report is listed.
  * Content Security Policy
  * `Permissions-Policy`


# MediaKeys
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MediaKeys` interface of Encrypted Media Extensions API represents a set of keys that an associated `HTMLMediaElement` can use for decryption of media data during playback.
## Instance properties
None.
## Instance methods
`MediaKeys.createSession()`
    
Returns a new `MediaKeySession` object, which represents a context for message exchange with a content decryption module (CDM).
`MediaKeys.getStatusForPolicy()`
    
Returns a `Promise` that resolves to a status string indicating whether the CDM would allow the presentation of encrypted media data using the keys, based on specified policy requirements.
`MediaKeys.setServerCertificate()`
    
Returns a `Promise` to a server certificate to be used to encrypt messages to the license server.
## Examples
>
### Check if keys are usable with HDCP restriction
This example shows how `getStatusForPolicy()` can be used to check if keys can decrypt a particular video format in a setup that has a minimum HDCP version of `2.2`. For more information, see the MediaKeys: getStatusForPolicy() method documentation.
#### HTML
    
    <pre id="log"></pre>
    
#### JavaScript
    
    const config = [
      {
        videoCapabilities: [
          {
            contentType: 'video/mp4; codecs="avc1.640028"',
            encryptionScheme: "cenc",
            robustness: "SW_SECURE_DECODE", // Widevine L3
          },
        ],
      },
    ];
    
    getMediaStatus(config);
    
    async function getMediaStatus(config) {
      try {
        const mediaKeySystemAccess = await navigator.requestMediaKeySystemAccess(
          "com.widevine.alpha",
          config,
        );
        const mediaKeys = await mediaKeySystemAccess.createMediaKeys();
        const mediaStatus = await mediaKeys.getStatusForPolicy({
          minHdcpVersion: "2.2",
        });
        log(mediaStatus);
    
        // Get the content or fallback to an alternative if the
        // keys are not usable
        if (mediaStatus === "usable") {
          console.log("HDCP 2.2 can be enforced.");
          // Fetch the high resolution protected content
        } else {
          log("HDCP 2.2 cannot be enforced");
          // Fallback other content, get license, etc.
        }
      } catch (error) {
        log(error);
      }
    }
    
#### Results
# VTTRegion
The `VTTRegion` interface of the WebVTT API describes a portion of the video to render a `VTTCue` onto.
## Constructor
`VTTRegion()`
    
Returns a newly created `VTTRegion` object.
## Instance properties
`VTTRegion.id`
    
A string that identifies the region.
`VTTRegion.width`
    
Represents the width of the region, as a percentage of the video.
`VTTRegion.lines`
    
Represents the height of the region, in number of lines.
`VTTRegion.regionAnchorX`
    
Represents the region anchor X offset, as a percentage of the region.
`VTTRegion.regionAnchorY`
    
Represents the region anchor Y offset, as a percentage of the region.
`VTTRegion.viewportAnchorX`
    
Represents the viewport anchor X offset, as a percentage of the video.
`VTTRegion.viewportAnchorY`
    
Represents the viewport anchor Y offset, as a percentage of the video.
`VTTRegion.scroll`
    
An enum representing how adding a new cue will move existing cues.
## Examples
    
    const region = new VTTRegion();
    region.width = 50; // Use 50% of the video width
    region.lines = 4; // Use 4 lines of height.
    region.viewportAnchorX = 25; // Have the region start at 25% from the left.
    const cue = new VTTCue(2, 3, "Cool text to be displayed");
    cue.region = region; // This cue will be drawn only within this region.
    
# GeolocationPositionError
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `GeolocationPositionError` interface represents the reason of an error occurring when using the geolocating device.
## Instance properties
The `GeolocationPositionError` interface doesn't inherit any property.
`GeolocationPositionError.code` Read only
    
Returns an `unsigned short` representing the error code. The following values are possible:
Value Associated constant Description  
`1` `PERMISSION_DENIED` The acquisition of the geolocation information failed because the page didn't have the necessary permissions, for example because it is blocked by a Permissions Policy  
`2` `POSITION_UNAVAILABLE` The acquisition of the geolocation failed because at least one internal source of position returned an internal error.  
`3` `TIMEOUT` The time allowed to acquire the geolocation was reached before the information was obtained.  
`GeolocationPositionError.message` Read only
    
Returns a human-readable string describing the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface.
## Instance methods
The `GeolocationPositionError` interface neither implements nor inherits any method.
  * Using the Geolocation API
  * `Geolocation`


# XMLDocument
The XMLDocument interface represents an XML document. It inherits from the generic `Document` and does not add any specific methods or properties to it: nevertheless, several algorithms behave differently with the two types of documents.
EventTarget  Node  Document  XMLDocument 
## Instance properties
Also inherits properties from: `Document`.
## Instance methods
Also inherits methods from: `Document`.
  * The Document Object Model (DOM)


# HashChangeEvent
The `HashChangeEvent` interface represents events that fire when the fragment identifier of the URL has changed.
The fragment identifier is the part of the URL that follows (and includes) the `#` symbol.
Event  HashChangeEvent 
## Constructor
`HashChangeEvent()`
    
Creates a new `HashChangeEvent` object.
## Instance properties
This interface also inherits the properties of its parent, `Event`.
`HashChangeEvent.newURL` Read only
    
The new URL to which the window is navigating.
`HashChangeEvent.oldURL` Read only
    
The previous URL from which the window was navigated.
## Instance methods
This interface has no methods of its own, but inherits the methods of its parent, `Event`.
## Examples
>
### Basic example
    
    function locationHashChanged() {
      if (location.hash === "#some-cool-feature") {
        someCoolFeature();
      }
    }
    
    window.addEventListener("hashchange", locationHashChanged);
    
## Related events
  * `hashchange`
  * `popstate`


# GPUDevice
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUDevice` interface of the WebGPU API represents a logical GPU device. This is the main interface through which the majority of WebGPU functionality is accessed.
A `GPUDevice` object is requested using the `GPUAdapter.requestDevice()` method.
EventTarget  GPUDevice 
## Instance properties
Inherits properties from its parent, `EventTarget`.
`adapterInfo` Read only
    
A `GPUAdapterInfo` object containing identifying information about the device's originating adapter.
`features` Read only
    
A `GPUSupportedFeatures` object that describes additional functionality supported by the device.
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
`limits` Read only
    
A `GPUSupportedLimits` object that describes the limits supported by the device.
`lost` Read only
    
Contains a `Promise` that remains pending throughout the device's lifetime and resolves with a `GPUDeviceLostInfo` object when the device is lost.
`queue` Read only
    
Returns the primary `GPUQueue` for the device.
## Instance methods
Inherits methods from its parent, `EventTarget`.
`createBindGroup()`
    
Creates a `GPUBindGroup` based on a `GPUBindGroupLayout` that defines a set of resources to be bound together in a group and how those resources are used in shader stages.
`createBindGroupLayout()`
    
Creates a `GPUBindGroupLayout` that defines the structure and purpose of related GPU resources such as buffers that will be used in a pipeline, and is used as a template when creating `GPUBindGroup`s.
`createBuffer()`
    
Creates a `GPUBuffer` in which to store raw data to use in GPU operations.
`createCommandEncoder()`
    
Creates a `GPUCommandEncoder`, which is used to encode commands to be issued to the GPU.
`createComputePipeline()`
    
Creates a `GPUComputePipeline` that can control the compute shader stage and be used in a `GPUComputePassEncoder`.
`createComputePipelineAsync()`
    
Returns a `Promise` that fulfills with a `GPUComputePipeline`, which can control the compute shader stage and be used in a `GPUComputePassEncoder`, once the pipeline can be used without any stalling.
`createPipelineLayout()`
    
Creates a `GPUPipelineLayout` that defines the `GPUBindGroupLayout`s used by a pipeline. `GPUBindGroup`s used with the pipeline during command encoding must have compatible `GPUBindGroupLayout`s.
`createQuerySet()`
    
Creates a `GPUQuerySet` that can be used to record the results of queries on passes, such as occlusion or timestamp queries.
`createRenderBundleEncoder()`
    
Creates a `GPURenderBundleEncoder` that can be used to pre-record bundles of commands. These can be reused in `GPURenderPassEncoder`s via the `executeBundles()` method, as many times as required.
`createRenderPipeline()`
    
Creates a `GPURenderPipeline` that can control the vertex and fragment shader stages and be used in a `GPURenderPassEncoder` or `GPURenderBundleEncoder`.
`createRenderPipelineAsync()`
    
Returns a `Promise` that fulfills with a `GPURenderPipeline`, which can control the vertex and fragment shader stages and be used in a `GPURenderPassEncoder` or `GPURenderBundleEncoder`, once the pipeline can be used without any stalling.
`createSampler()`
    
Creates a `GPUSampler`, which controls how shaders transform and filter texture resource data.
`createShaderModule()`
    
Creates a `GPUShaderModule` from a string of WGSL source code.
`createTexture()`
    
Creates a `GPUTexture` in which to store texture data to use in GPU rendering operations.
`destroy()`
    
Destroys the device, preventing further operations on it.
`importExternalTexture()`
    
Takes an `HTMLVideoElement` as an input and returns a `GPUExternalTexture` wrapper object containing a snapshot of the video that can be used in GPU rendering operations.
`popErrorScope()`
    
Pops an existing GPU error scope from the error scope stack and returns a `Promise` that resolves to an object (`GPUInternalError`, `GPUOutOfMemoryError`, or `GPUValidationError`) describing the first error captured in the scope, or `null` if no error occurred.
`pushErrorScope()`
    
Pushes a new GPU error scope onto the device's error scope stack, allowing you to capture errors of a particular type.
## Events
`uncapturederror`
    
Fired when an error is thrown that has not been observed by a GPU error scope, to provide a way to report unexpected errors. Known error cases should be handled using `pushErrorScope()` and `popErrorScope()`.
## Examples
    
    async function init() {
      if (!navigator.gpu) {
        throw Error("WebGPU not supported.");
      }
    
      const adapter = await navigator.gpu.requestAdapter();
      if (!adapter) {
        throw Error("Couldn't request WebGPU adapter.");
      }
    
      const device = await adapter.requestDevice();
    
      const shaderModule = device.createShaderModule({
        code: shaders,
      });
    
      // …
    }
    
See the individual member pages listed above and the following demo sites for a lot more examples of `GPUDevice` usage:
  * Basic compute demo
  * Basic render demo
  * WebGPU samples


  * The WebGPU API


# MediaEncryptedEvent
The `MediaEncryptedEvent` interface of the Encrypted Media Extensions API contains the information associated with an `encrypted` event sent to a `HTMLMediaElement` when some initialization data is encountered in the media.
Event  MediaEncryptedEvent 
## Constructor
`MediaEncryptedEvent()`
    
Creates a new instance of a `MediaEncryptedEvent` object.
## Instance properties
This interface also inherits properties from its parent, `Event`.
`MediaEncryptedEvent.initDataType` Read only
    
Returns a case-sensitive string with the type of the format of the initialization data found.
`MediaEncryptedEvent.initData` Read only
    
Returns an `ArrayBuffer` containing the initialization data found. If there is no initialization data associated with the format, it returns `null`.
## Instance methods
This interface doesn't provide any specific methods, but inherits methods from its parent, `Event`.
# OverconstrainedError
The `OverconstrainedError` interface of the Media Capture and Streams API indicates that the set of desired capabilities for the current `MediaStreamTrack` cannot currently be met. When this event is thrown on a MediaStreamTrack, it is muted until either the current constraints can be established or until satisfiable constraints are applied.
DOMException  OverconstrainedError 
## Constructor
`OverconstrainedError()`
    
Creates a new `OverconstrainedError` object.
## Instance properties
Also inherits properties from its parent interface, `DOMException`.
`OverconstrainedError.constraint` Read only
    
Returns the constraint that was supplied in the constructor, meaning the constraint that was not satisfied.
## Instance methods
Also inherits methods from its parent interface, `DOMException`.
# WorkletGlobalScope
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `WorkletGlobalScope` interface is an abstract class that specific worklet scope classes inherit from. Each `WorkletGlobalScope` defines a new global environment.
Note: You don't normally need to interact with this interface. It is a base interface intended to be subclassed. You will encounter the subclasses `AudioWorkletGlobalScope` inside `AudioWorklet` objects, or `PaintWorkletGlobalScope` inside CSS paint `Worklet` objects.
## Instance properties
None.
## Instance methods
None.
  * `AudioWorkletGlobalScope`
  * `PaintWorkletGlobalScope`


# VideoColorSpace
Note: This feature is available in Dedicated Web Workers.
The `VideoColorSpace` interface of the WebCodecs API represents the color space of a video.
## Constructor
`VideoColorSpace()`
    
Creates a new `VideoColorSpace` object.
## Instance properties
`VideoColorSpace.primaries` Read only
    
A string containing the color primary describing the color gamut of a video sample.
`VideoColorSpace.transfer`
    
A string containing the transfer characteristics of video samples.
`VideoColorSpace.matrix`
    
A string containing the matrix coefficients describing the relationship between sample component values and color coordinates.
`VideoColorSpace.fullRange`
    
A `Boolean`. If `true` indicates that full-range color values are used.
## Instance methods
`VideoColorSpace.toJSON()`
    
Returns a JSON representation of the `VideoColorSpace` object.
## Examples
In the following example, `colorSpace` is a `VideoColorSpace` object returned from `VideoFrame`. The object is then printed to the console.
    
    let colorSpace = VideoFrame.colorSpace;
    console.log(colorSpace);
    
# ChapterInformation
The `ChapterInformation` interface of the Media Session API represents the metadata for an individual chapter of a media resource (i.e., a video or audio file).
The chapter information for a given media resource is set when it is first created, via the `chapterInfo` property of the `MediaMetadata()` constructor's initialization object. The property takes an array of `ChapterInformation` objects as its value.
You can access the chapter information for an existing `MediaMetadata` object via its `chapterInfo` property. This returns an array of `ChapterInformation` objects.
## Instance properties
`ChapterInformation.artwork` Read only Experimental
    
Returns an `Array` of objects representing images associated with the chapter.
`ChapterInformation.startTime` Read only Experimental
    
Returns a number, in seconds, representing the start time of the chapter.
`ChapterInformation.title` Read only Experimental
    
Returns a string representing the title of the chapter.
## Examples
The sample code below from Video / Media Session Sample shows a typical structure for the `ChapterInformation` object:
    
    const BASE_URL = "https://storage.googleapis.com/media-session/";
    
    const metadata = {
      // …
      chapterInfo: [
        {
          title: "Chapter 1",
          startTime: 0,
          artwork: [
            {
              src: `${BASE_URL}sintel/chapter1-128.png`,
              sizes: "128x128",
              type: "image/png",
            },
            {
              src: `${BASE_URL}sintel/chapter1-512.png`,
              sizes: "512x512",
              type: "image/png",
            },
          ],
        },
        {
          title: "Chapter 2",
          startTime: 37,
          artwork: [
            {
              src: `${BASE_URL}sintel/chapter2-128.png`,
              sizes: "128x128",
              type: "image/png",
            },
            {
              src: `${BASE_URL}sintel/chapter2-512.png`,
              sizes: "512x512",
              type: "image/png",
            },
          ],
        },
      ],
    };
    
The following snippet shows how it can be used inside Media Session code (the above object property is part of the `playlist` object referenced below):
    
    function updateMetadata() {
      const track = playlist[index];
    
      log(`Playing ${track.title} track...`);
      navigator.mediaSession.metadata = new MediaMetadata({
        title: track.title,
        artist: track.artist,
        artwork: track.artwork,
        chapterInfo: track.chapterInfo,
      });
    
      // …
    }
    
  * `MediaMetadata`


# ContactsManager
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `ContactsManager` interface of the Contact Picker API allows users to select entries from their contact list and share limited details of the selected entries with a website or application.
The `ContactsManager` is available through the global `navigator.contacts` property.
## Instance methods
`select()` Experimental
    
Returns a `Promise` which, when resolved, presents the user with a contact picker which allows them to select contact(s) they wish to share.
`getProperties()` Experimental
    
Returns a `Promise` which resolves with an `Array` of `strings` indicating which contact properties are available.
## Examples
>
### Feature Detection
The following code checks whether the Contact Picker API is supported.
    
    const supported = "contacts" in navigator && "ContactsManager" in window;
    
### Checking for Supported Properties
The following asynchronous function uses the `getProperties` method to check for supported properties.
    
    async function checkProperties() {
      const supportedProperties = await navigator.contacts.getProperties();
      if (supportedProperties.includes("name")) {
        // run code for name support
      }
      if (supportedProperties.includes("email")) {
        // run code for email support
      }
      if (supportedProperties.includes("tel")) {
        // run code for telephone number support
      }
      if (supportedProperties.includes("address")) {
        // run code for address support
      }
      if (supportedProperties.includes("icon")) {
        // run code for avatar support
      }
    }
    
### Selecting Contacts
The following example sets an array of properties to be retrieved for each contact, as well as setting an options object to allow for multiple contacts to be selected.
An asynchronous function is then defined which uses the `select()` method to present the user with a contact picker interface and handle the chosen results.
    
    const props = ["name", "email", "tel", "address", "icon"];
    const opts = { multiple: true };
    
    async function getContacts() {
      try {
        const contacts = await navigator.contacts.select(props, opts);
        handleResults(contacts);
      } catch (ex) {
        // Handle any errors here.
      }
    }
    
`handleResults()` is a developer defined function.
  * A Contact Picker for the Web
  * Contact Picker API live demo


# BluetoothDevice
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The BluetoothDevice interface of the Web Bluetooth API represents a Bluetooth device inside a particular script execution environment.
EventTarget  BluetoothDevice 
## Instance properties
`BluetoothDevice.id` Experimental Read only
    
A string that uniquely identifies a device.
`BluetoothDevice.name` Experimental Read only
    
A string that provides a human-readable name for the device.
`BluetoothDevice.gatt` Experimental Read only
    
A reference to the device's `BluetoothRemoteGATTServer`.
## Instance methods
`BluetoothDevice.watchAdvertisements()` Experimental
    
A `Promise` that resolves to `undefined` or is rejected with an error if advertisements can't be shown for any reason.
`BluetoothDevice.forget()` Experimental
    
Provides a way for the page to revoke access to a device the user has granted access to.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`gattserverdisconnected` Experimental
    
Fired on a device when an active GATT connection is lost.
# StyleSheetList
The `StyleSheetList` interface represents a list of `CSSStyleSheet` objects. An instance of this object can be returned by `Document.styleSheets`.
It is an array-like object but can't be iterated over using `Array` methods. However it can be iterated over in a standard `for` loop over its indices, or converted to an `Array`.
Note: Typically list interfaces like `StyleSheetList` wrap around `Array` types, so you can use `Array` methods on them. This is not the case here for historical reasons. However, you can convert `StyleSheetList` to an `Array` in order to use those methods (see the example below).
## Instance properties
`StyleSheetList.length` Read only
    
Returns the number of `CSSStyleSheet` objects in the collection.
## Instance methods
`StyleSheetList.item()`
    
Returns the `CSSStyleSheet` object at the index passed in, or `null` if no item exists for that index.
## Examples
>
### Get CSSStyleSheet objects with for loop
    
    for (const styleSheet of document.styleSheets) {
      console.log(styleSheet); // A CSSStyleSheet object
    }
    
### Get all CSS rules for the document using Array methods
    
    const allCSS = [...document.styleSheets]
      .map((styleSheet) => {
        try {
          return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
        } catch (e) {
          console.log(
            "Access to stylesheet %s is denied. Ignoring…",
            styleSheet.href,
          );
          return undefined;
        }
      })
      .filter(Boolean)
      .join("\n");
    
# TextTrackCue
The `TextTrackCue` interface of the WebVTT API is the abstract base class for the various derived cue types, such as `VTTCue`; you will work with these derived types rather than the base class.
These cues represent strings of text presented for some duration of time during the performance of a `TextTrack`. The cue includes the start time (the time at which the text will be displayed) and the end time (the time at which it will be removed from the display), as well as other information.
EventTarget  TextTrackCue 
## Instance properties
This interface also inherits properties from `EventTarget`.
`TextTrackCue.track` Read only
    
The `TextTrack` that this cue belongs to, or `null` if it doesn't belong to any.
`TextTrackCue.id`
    
A string that identifies the cue.
`TextTrackCue.startTime`
    
A `double` that represents the video time that the cue will start being displayed, in seconds.
`TextTrackCue.endTime`
    
A `double` that represents the video time that the cue will stop being displayed, in seconds.
`TextTrackCue.pauseOnExit`
    
A `boolean` for whether the video will pause when this cue stops being displayed.
## Events
`enter`
    
Fired when a cue becomes active.
`exit`
    
Fired when the cue has stopped being active.
# Remote Playback API
The Remote Playback API extends the `HTMLMediaElement` to enable the control of media played on a remote device.
## Concepts and Usage
Remote playback devices are connected devices such as TVs, projectors, or speakers. The API takes into account wired devices connected via HDMI or DVI, and wireless devices, for example Chromecast or AirPlay.
The API enables a page, which has an media element such as a video or audio file, to initiate and control playback of that media on a connected remote device. For example, playing a video on a connected TV.
Note: Safari for iOS has some APIs which enable remote playback on AirPlay. Details of these can be found in the Safari 9.0 release notes.
Android versions of Firefox and Chrome also contain some remote playback features. These devices will show a Cast button if there is a Cast device available in the local network.
## Interfaces
`RemotePlayback`
    
Allows the page to detect availability of remote playback devices, then connect to and control playing on these devices.
### Extensions to other interfaces
`HTMLMediaElement.disableRemotePlayback`
    
A boolean that sets or returns the remote playback state, indicating whether the media element is allowed to have a remote playback UI.
`HTMLMediaElement.remote` Read only
    
Return a `RemotePlayback` object instance associated with the media element.
## Examples
The following example demonstrates a player with custom controls that supports remote playback. Initially the button used to select a device is hidden.
    
    <video id="videoElement" src="https://example.org/media.ext">
      <button id="deviceBtn" class="hidden">Pick device</button>
    </video>
    
    
    .hidden {
      display: none;
    }
    
The `RemotePlayback.watchAvailability()` method watches for available remote playback devices. If a device is available, use the callback to show the button.
    
    const deviceBtn = document.getElementById("deviceBtn");
    const videoElem = document.getElementById("videoElement");
    
    function availabilityCallback(available) {
      // Show or hide the device picker button depending on device availability.
      if (available) {
        deviceBtn.classList.remove("hidden");
      } else {
        deviceBtn.classList.add("hidden");
      }
    }
    
    videoElem.remote.watchAvailability(availabilityCallback).catch(() => {
      // If the device cannot continuously watch available,
      // show the button to allow the user to try to prompt for a connection.
      deviceBtn.style.display = "inline";
    });
    
# MediaElementAudioSourceNode
The `MediaElementAudioSourceNode` interface represents an audio source consisting of an HTML `<audio>` or `<video>` element. It is an `AudioNode` that acts as an audio source.
A `MediaElementAudioSourceNode` has no inputs and exactly one output, and is created using the `AudioContext.createMediaElementSource()` method. The number of channels in the output equals the number of channels of the audio referenced by the `HTMLMediaElement` used in the creation of the node, or is 1 if the `HTMLMediaElement` has no audio.
EventTarget  AudioNode  MediaElementAudioSourceNode 
Number of inputs `0`  
Number of outputs `1`  
Channel count 2 (but note that `AudioNode.channelCount` is only used for up-mixing and down-mixing `AudioNode` inputs, and `MediaElementAudioSourceNode` doesn't have any input)   
## Constructor
`MediaElementAudioSourceNode()`
    
Creates a new `MediaElementAudioSourceNode` object instance.
## Instance properties
Inherits properties from its parent, `AudioNode`.
`mediaElement` Read only
    
The `HTMLMediaElement` used when constructing this `MediaStreamAudioSourceNode`.
## Instance methods
Inherits methods from its parent, `AudioNode`.
## Example
See `AudioContext.createMediaElementSource()` for example code.
  * Using the Web Audio API


# GPUQuerySet
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUQuerySet` interface of the WebGPU API is used to record the results of queries on passes, such as occlusion or timestamp queries.
  * Occlusion queries are available on render passes to query whether any fragment samples pass all the per-fragment tests for a set of drawing commands (including scissor, sample mask, alpha to coverage, stencil, and depth tests). To run an occlusion query, an appropriate `GPUQuerySet` must be provided as the value of the `occlusionQuerySet` descriptor property when invoking `GPUCommandEncoder.beginRenderPass()` to run a render pass.
  * Timestamp queries allow applications to write timestamps to a `GPUQuerySet`. To run a timestamp query, appropriate `GPUQuerySet`s must be provided inside the value of the `timestampWrites` descriptor property when invoking `GPUCommandEncoder.beginRenderPass()` to run a render pass, or `GPUCommandEncoder.beginComputePass()` to run a compute pass.


Note: The `timestamp-query` feature needs to be enabled to use timestamp queries.
A `GPUQuerySet` object instance is created using the `GPUDevice.createQuerySet()` method.
## Instance properties
`count` Read only
    
A number specifying the number of queries managed by the `GPUQuerySet`.
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
`type` Read only
    
An enumerated value specifying the type of queries managed by the `GPUQuerySet`.
## Instance methods
`destroy()`
    
Destroys the `GPUQuerySet`.
## Examples
The following snippet creates a `GPUQuerySet` that holds 32 occlusion query results, and then returns the `type` and `count`:
    
    const querySet = device.createQuerySet({
      type: "occlusion",
      count: 32,
    });
    
    console.log(querySet.count); // 32
    console.log(querySet.type); // "occlusion"
    
  * The WebGPU API


# HTMLFieldSetElement
The `HTMLFieldSetElement` interface provides special properties and methods (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating the layout and presentation of `<fieldset>` elements.
EventTarget  Node  Element  HTMLElement  HTMLFieldSetElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLFieldSetElement.disabled`
    
A boolean value reflecting the `disabled` HTML attribute, indicating whether the user can interact with the control.
`HTMLFieldSetElement.elements` Read only
    
The elements belonging to this field set. The type of this property depends on the version of the spec that is implemented by the browser.
`HTMLFieldSetElement.form` Read only
    
An `HTMLFormControlsCollection` or `HTMLCollection` referencing the containing form element, if this element is in a form. If the field set is not a descendant of a form element, then the attribute can be the ID of any form element in the same document it is related to, or the `null` value if none matches.
`HTMLFieldSetElement.name`
    
A string reflecting the `name` HTML attribute, containing the name of the field set. This can be used when accessing the field set in JavaScript. It is not part of the data which is sent to the server.
`HTMLFieldSetElement.type` Read only
    
The string `"fieldset"`.
`HTMLFieldSetElement.validationMessage` Read only
    
A string representing a localized message that describes the validation constraints that the element does not satisfy (if any). This is the empty string if the element is not a candidate for constraint validation (`willValidate` is `false`), or it satisfies its constraints.
`HTMLFieldSetElement.validity` Read only
    
A `ValidityState` representing the validity states that this element is in.
`HTMLFieldSetElement.willValidate` Read only
    
A boolean value `false`, because `<fieldset>` objects are never candidates for constraint validation.
## Instance methods
Inherits methods from its parent, `HTMLElement`.
`HTMLFieldSetElement.checkValidity()`
    
Always returns `true` because `<fieldset>` objects are never candidates for constraint validation.
`HTMLFieldSetElement.reportValidity()`
    
Always returns `true` because `<fieldset>` objects are never candidates for constraint validation.
`HTMLFieldSetElement.setCustomValidity()`
    
Sets a custom validity message for the field set. If this message is not the empty string, then the field set is suffering from a custom validity error, and does not validate.
  * The HTML element implementing this interface: `<fieldset>`.


# TextMetrics
Note: This feature is available in Web Workers.
The `TextMetrics` interface represents the dimensions of a piece of text in the canvas; a `TextMetrics` instance can be retrieved using the `CanvasRenderingContext2D.measureText()` method.
## Instance properties
`TextMetrics.width` Read only
    
Returns the width of a segment of inline text in CSS pixels. It takes into account the current font of the context.
`TextMetrics.actualBoundingBoxLeft` Read only
    
Distance parallel to the baseline from the alignment point given by the `CanvasRenderingContext2D.textAlign` property to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point.
`TextMetrics.actualBoundingBoxRight` Read only
    
Returns the distance from the alignment point given by the `CanvasRenderingContext2D.textAlign` property to the right side of the bounding rectangle of the given text, in CSS pixels. The distance is measured parallel to the baseline.
`TextMetrics.fontBoundingBoxAscent` Read only
    
Returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels.
`TextMetrics.fontBoundingBoxDescent` Read only
    
Returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels.
`TextMetrics.actualBoundingBoxAscent` Read only
    
Returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` attribute to the top of the bounding rectangle used to render the text, in CSS pixels.
`TextMetrics.actualBoundingBoxDescent` Read only
    
Returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels.
`TextMetrics.emHeightAscent` Read only
    
Returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` property to the top of the em square in the line box, in CSS pixels.
`TextMetrics.emHeightDescent` Read only
    
Returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` property to the bottom of the em square in the line box, in CSS pixels.
`TextMetrics.hangingBaseline` Read only
    
Returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` property to the hanging baseline of the line box, in CSS pixels.
`TextMetrics.alphabeticBaseline` Read only
    
Returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` property to the alphabetic baseline of the line box, in CSS pixels.
`TextMetrics.ideographicBaseline` Read only
    
Returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` property to the ideographic baseline of the line box, in CSS pixels.
## Examples
>
### Baselines illustrated
This example demonstrates the baselines the `TextMetrics` object holds. The default baseline is the `alphabeticBaseline`. See also the `CanvasRenderingContext2D.textBaseline` property.
#### HTML
    
    <canvas id="canvas" width="550" height="500"></canvas>
    
#### JavaScript
    
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    
    const baselinesAboveAlphabetic = [
      "fontBoundingBoxAscent",
      "actualBoundingBoxAscent",
      "emHeightAscent",
      "hangingBaseline",
    ];
    const baselinesBelowAlphabetic = [
      "ideographicBaseline",
      "emHeightDescent",
      "actualBoundingBoxDescent",
      "fontBoundingBoxDescent",
    ];
    const baselines = [...baselinesAboveAlphabetic, ...baselinesBelowAlphabetic];
    ctx.font = "25px serif";
    ctx.strokeStyle = "red";
    
    baselines.forEach((baseline, index) => {
      const text = `Abcdefghijklmnop (${baseline})`;
      const textMetrics = ctx.measureText(text);
      const y = 50 + index * 50;
      ctx.beginPath();
      ctx.fillText(text, 0, y);
    
      const baselineMetricValue = textMetrics[baseline];
      if (baselineMetricValue === undefined) {
        return;
      }
    
      const lineY = baselinesBelowAlphabetic.includes(baseline)
        ? y + Math.abs(baselineMetricValue)
        : y - Math.abs(baselineMetricValue);
      ctx.moveTo(0, lineY);
      ctx.lineTo(550, lineY);
      ctx.stroke();
    });
    
#### Result
### Measuring text width
When measuring the x-direction of a piece of text, the sum of `actualBoundingBoxLeft` and `actualBoundingBoxRight` can be wider than the width of the inline box (`width`), due to slanted/italic fonts where characters overhang their advance width.
It can therefore be useful to use the sum of `actualBoundingBoxLeft` and `actualBoundingBoxRight` as a more accurate way to get the absolute text width:
    
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    const text = "Abcdefghijklmnop";
    ctx.font = "italic 50px serif";
    const textMetrics = ctx.measureText(text);
    
    console.log(textMetrics.width);
    // 459.8833312988281
    
    console.log(
      textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,
    );
    // 462.8833333333333
    
  * Creator method in `CanvasRenderingContext2D`
  * The `<canvas>` element and its associated interface, `HTMLCanvasElement`


# Topics API
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Warning: This feature is currently opposed by two browser vendors. See the Standards positions section below for details.
Note: An Enrollment process is required to use the Topics API in your applications. See the Enrollment section for details of what sub-features are gated by enrollment.
The Topics API provides a mechanism for developers to implement use cases such as interest-based advertising (IBA) based on topics collected by the browser as the user navigates different pages, rather than collected by the developer by tracking the user's journey around different sites with third-party cookies.
## Concepts and usage
A typical mechanism for advertising on the web involves a user visiting publisher sites that use an advertising technology (ad tech) platform to publish ads for an advertiser's products or services. The publisher is paid to display the ads, which helps to fund their content, and more business is driven to advertiser sites.
The above process can be made more effective using interest-based advertising (IBA). The idea is that when users visit the publisher sites, they are served a personalized selection of ads based on their interests. Their interests are inferred from sites they have previously visited. In the past, third-party tracking cookies have been used to collect information on user interests, but browsers are phasing out the availability of third-party cookies for an increasing proportion of users. The Topics API provides part of the path towards this goal — a mechanism to implement IBA that does not depend on user tracking.
First of all, the browser infers a user's interests from the URLs of sites they visit that have ad tech `<iframe>`s embedded. These interests are mapped to specific topics of interest, and the browser calculates and records the users' top topic (i.e., the topic that their interests mapped to most often) at the end of each epoch. An epoch is a week by default. The top topic is updated each week so that interests are kept current and users don't start to see ads for topics that they are no longer interested in.
Note: This process only happens on sites where a Topics API feature is used (see What API features enable the Topics API?).
Once the browser has observed one or more topics for a user, the Topics API can retrieve them and send them to an ad tech platform. The platform can then use those topics to personalize the ads they serve to the user. The API helps to preserve privacy by only returning topics to an API caller that have been observed by them on pages visited by the current user.
See Using the Topics API for an explanation of how the API works.
### What topics are there?
The available top topics that the browser could calculate are stored in a publicly available taxonomy of interests. The initial taxonomy has been proposed by Chrome, with the intention that it becomes a resource maintained by trusted ecosystem contributors. The taxonomy has been human-curated to exclude categories generally considered sensitive, such as ethnicity or sexual orientation.
## Interfaces
The Topics API has no distinct interfaces of its own.
### Extensions to other interfaces
`Document.browsingTopics()`
    
Returns a promise that fulfills with an array of objects representing the top topics for the user, one from each of the last three epochs. By default, the method also causes the browser to record the current page visit as observed by the caller, so the page's hostname can later be used in topics calculation.
`fetch()` / `Request()`, the `browsingTopics` option
    
A boolean specifying that the selected topics for the current user should be sent in a `Sec-Browsing-Topics` header with the associated request.
`HTMLIFrameElement.browsingTopics`
    
A boolean property specifying that the selected topics for the current user should be sent with the request for the associated `<iframe>`'s source. This reflects the `browsingtopics` content attribute value.
## HTML elements
`<iframe>`, the `browsingtopics` attribute
    
A boolean attribute that, if present, specifies that the selected topics for the current user should be sent with the request for the `<iframe>`'s source.
## HTTP headers
`Sec-Browsing-Topics`
    
Sends the selected topics for the current user along with a request, which are used by an ad tech platform to choose a personalized ad to display.
`Observe-Browsing-Topics`
    
Used to mark topics of interest inferred from a calling site's URL (i.e., the site where the ad tech `<iframe>` is embedded) as observed in the response to a request generated by a feature that enables the Topics API. The browser will subsequently use those topics to calculate top topics for the current user for future epochs.
`Permissions-Policy`; the `browsing-topics` directive
    
Controls access to the Topics API. Where a policy specifically disallows the use of the Topics API, any attempts to call the `Document.browsingTopics()` method or send a request with a `Sec-Browsing-Topics` header will fail with a `NotAllowedError` `DOMException`.
## Enrollment
To use the Topics API in your sites, you must specify it in a privacy sandbox enrollment process. If you don't do this, the following sub-features won't work:
  * The promise returned by the `Document.browsingTopics()` method will reject with a `NotAllowedError` `DOMException`.
  * Creating or modifying the `Sec-Browsing-Topics` header will fail silently, and any existing `Sec-Browsing-Topics` header will be deleted.


## Examples
See Using the Topics API for code examples.
This feature is not part of an official standard, although it is specified in the Topics API Unofficial Proposal Draft.
### Standards positions
Two browser vendors oppose this specification. Known standards positions are as follows:
  * Mozilla (Firefox): Negative
  * Apple (Safari): Negative


  * Topics API on privacysandbox.google.com (2023)
  * The Privacy Sandbox on privacysandbox.google.com (2023)


# FileSystemEntry
The `FileSystemEntry` interface of the File and Directory Entries API represents a single entry in a file system. The entry can be a file or a directory (directories are represented by the `FileSystemDirectoryEntry` interface). It includes methods for working with files—including copying, moving, removing, and reading files—as well as information about a file it points to—including the file name and its path from the root to the entry.
## Basic concepts
You don't create `FileSystemEntry` objects directly. Instead, you will receive an object based on this interface through other APIs. This interface serves as a base class for the `FileSystemFileEntry` and `FileSystemDirectoryEntry` interfaces, which provide features specific to file system entries representing files and directories, respectively.
The `FileSystemEntry` interface includes methods that you would expect for manipulating files and directories, but it also includes a convenient method for obtaining the URL of the entry: `toURL()`. It also introduces a new URL scheme: `filesystem:`.
You can use the `filesystem:` scheme on Google Chrome to see all the files and folders that are stored in the origin of your app. Just use `filesystem:` scheme for the root directory of the origin of the app. For example, if your app is in `http://www.example.com`, open `filesystem:http://www.example.com/temporary/` in a tab. Chrome shows a read-only list of all the files and folders stored the origin of your app.
### Example
To see an example of how `toURL()` works, see the method description. The snippet below shows you how you can remove a file by name.
    
    // Taking care of the browser-specific prefixes.
    window.requestFileSystem =
      window.requestFileSystem || window.webkitRequestFileSystem;
    
    // …
    
    // Opening a file system with temporary storage
    window.requestFileSystem(
      TEMPORARY,
      1024 * 1024 /* 1MB */,
      (fs) => {
        fs.root.getFile(
          "log.txt",
          {},
          (fileEntry) => {
            fileEntry.remove(() => {
              console.log("File removed.");
            }, onError);
          },
          onError,
        );
      },
      onError,
    );
    
## Instance properties
This interface provides the following properties.
`filesystem` Read only
    
A `FileSystem` object representing the file system in which the entry is located.
`fullPath` Read only
    
A string which provides the full, absolute path from the file system's root to the entry; it can also be thought of as a path which is relative to the root directory, prepended with a "/" character.
`isDirectory` Read only
    
A boolean value which is `true` if the entry represents a directory; otherwise, it's `false`.
`isFile` Read only
    
A Boolean which is `true` if the entry represents a file. If it's not a file, this value is `false`.
`name` Read only
    
A string containing the name of the entry (the final part of the path, after the last "/" character).
## Instance methods
This interface defines the following methods.
`copyTo()` Deprecated Non-standard
    
Copies the file or directory to a new location on the file system.
`getMetadata()` Deprecated Non-standard
    
Obtains metadata about the file, such as its modification date and size.
`getParent()`
    
Returns a `FileSystemDirectoryEntry` representing the entry's parent directory.
`moveTo()` Deprecated Non-standard
    
Moves the file or directory to a new location on the file system, or renames the file or directory.
`remove()` Deprecated Non-standard
    
Removes the specified file or directory. You can only remove directories which are empty.
`toURL()` Deprecated Non-standard
    
Creates and returns a URL which identifies the entry. This URL uses the URL scheme `"filesystem:"`.
  * File and Directory Entries API
  * `FileSystemFileEntry` and `FileSystemDirectoryEntry` are based on `FileSystemEntry`.


# SVGAngle
The `SVGAngle` interface is used to represent a value that can be an `<angle>` or `<number>` value.
The `SVGAngle` returned from `SVGAnimatedAngle.animVal` and `SVGAnimatedAngle.baseVal` is read only, but the `SVGAngle` returned from `SVGSVGElement.createSVGAngle()` is writable. When designated as read only, attempts to modify the object will result in an exception being thrown.
An `SVGAngle` object can be associated with a particular element. The associated element is used to determine which element's content attribute to update if the object reflects an attribute. Unless otherwise described, an `SVGAngle` object is not associated with any element.
Every `SVGAngle` object operates in one of two modes:
  1. Reflect the base value of a reflected animatable attribute (being exposed through the `baseVal` member of an `SVGAnimatedAngle`),
  2. Be detached, which is the case for `SVGAngle` objects created with `SVGSVGElement.createSVGAngle()`.


## Instance properties
`SVGAngle.unitType`
    
The type of the value as specified by one of the `SVG_ANGLETYPE_*` constants defined on this interface.
`SVGAngle.value`
    
The value as a floating point value, in user units. Setting this attribute will cause `valueInSpecifiedUnits` and `valueAsString` to be updated automatically to reflect this setting.
`SVGAngle.valueInSpecifiedUnits`
    
The value as a floating point value, in the units expressed by `unitType`. Setting this attribute will cause `value` and `valueAsString` to be updated automatically to reflect this setting.
`SVGAngle.valueAsString`
    
The value as a string value, in the units expressed by `unitType`. Setting this attribute will cause `value`, `valueInSpecifiedUnits`, and `unitType` to be updated automatically to reflect this setting.
## Instance methods
`SVGAngle.convertToSpecifiedUnits()`
    
Preserve the same underlying stored value, but reset the stored unit identifier to the given `unitType`. Object attributes `unitType`, `valueInSpecifiedUnits`, and `valueAsString` might be modified as a result of this method.
`SVGAngle.newValueSpecifiedUnits()`
    
Reset the value as a number with an associated unitType, thereby replacing the values for all of the attributes on the object.
## Static properties
`SVG_ANGLETYPE_UNKNOWN` (0)
    
Some unknown type of value.
`SVG_ANGLETYPE_UNSPECIFIED` (1)
    
A unitless `<number>` interpreted as a value in degrees.
`SVG_ANGLETYPE_DEG` (2)
    
An `<angle>` with a `deg` unit.
`SVG_ANGLETYPE_RAD` (3)
    
An `<angle>` with a `rad` unit.
`SVG_ANGLETYPE_GRAD` (4)
    
An `<angle>` with a `grad` unit.
# USBIsochronousInTransferPacket
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USBIsochronousInTransferPacket` interface of the WebUSB API is part of the response from a call to the `isochronousTransferIn()` method of the `USBDevice` interface. It represents the status of an individual packet from a request to transfer data from the USB device to the USB host over an isochronous endpoint.
## Constructor
`USBIsochronousInTransferPacket()` Experimental
    
Creates a new `USBIsochronousInTransferPacket` object with the provided `status` and `data` fields.
## Instance properties
`USBIsochronousInTransferPacket.data` Read only Read only Experimental
    
Returns a `DataView` object containing the data received from the USB device in this packet, if any.
`USBIsochronousInTransferPacket.status` Read only Read only Experimental
    
Returns the status of the transfer request, one of:
  * `"ok"` \- The transfer was successful.
  * `"stall"` \- The device indicated an error by generating a stall condition on the endpoint. A stall on an isochronous endpoint does not need to be cleared.
  * `"babble"` \- The device responded with more data than was expected.


# FileSystemDirectoryEntry
The `FileSystemDirectoryEntry` interface of the File and Directory Entries API represents a directory in a file system. It provides methods which make it possible to access and manipulate the files in a directory, as well as to access the entries within the directory.
FileSystemEntry  FileSystemDirectoryEntry 
## Basic concepts
You can create a new directory by calling `getDirectory()`. If you want to create subdirectories, create each child directory in sequence. If you try creating a directory using a full path that includes parent directories that do not exist yet, an error is returned. So create the hierarchy by recursively adding a new path after creating the parent directory.
### Example
In the following code snippet, we create a directory called "Documents."
    
    // Taking care of the browser-specific prefixes.
    window.requestFileSystem =
      window.requestFileSystem || window.webkitRequestFileSystem;
    window.directoryEntry = window.directoryEntry || window.webkitDirectoryEntry;
    
    // …
    
    function onFs(fs) {
      fs.root.getDirectory(
        "Documents",
        { create: true },
        (directoryEntry) => {
          // directoryEntry.isFile === false
          // directoryEntry.isDirectory === true
          // directoryEntry.name === 'Documents'
          // directoryEntry.fullPath === '/Documents'
        },
        onError,
      );
    }
    
    // Opening a file system with temporary storage
    window.requestFileSystem(TEMPORARY, 1024 * 1024 /* 1MB */, onFs, onError);
    
## Instance properties
This interface has no properties of its own, but inherits properties from its parent interface, `FileSystemEntry`.
## Instance methods
This interface inherits methods from its parent interface, `FileSystemEntry`.
`createReader()`
    
Creates a `FileSystemDirectoryReader` object which can be used to read the entries in this directory.
`getDirectory()`
    
Returns a `FileSystemDirectoryEntry` object representing a directory located at a given path, relative to the directory on which the method is called.
`getFile()`
    
Returns a `FileSystemFileEntry` object representing a file located within the directory's hierarchy, given a path relative to the directory on which the method is called.
`removeRecursively()` Deprecated Non-standard
    
Removes the directory as well as all of its content, hierarchically iterating over its entire subtree of descendant files and directories.
  * File and Directory Entries API
  * `FileSystemDirectoryReader`
  * `FileSystemEntry`
  * `FileSystemFileEntry`


# SpeechRecognition
The `SpeechRecognition` interface of the Web Speech API is the controller interface for the recognition service; this also handles the `SpeechRecognitionEvent` sent from the recognition service.
Note: On some browsers, like Chrome, using Speech Recognition on a web page involves a server-based recognition engine. Your audio is sent to a web service for recognition processing, so it won't work offline.
EventTarget  SpeechRecognition 
## Constructor
`SpeechRecognition()`
    
Creates a new `SpeechRecognition` object.
## Instance properties
`SpeechRecognition` also inherits properties from its parent interface, `EventTarget`.
`SpeechRecognition.grammars`
    
Returns and sets a collection of `SpeechGrammar` objects that represent the grammars that will be understood by the current `SpeechRecognition`.
`SpeechRecognition.lang`
    
Returns and sets the language of the current `SpeechRecognition`. If not specified, this defaults to the HTML `lang` attribute value, or the user agent's language setting if that isn't set either.
`SpeechRecognition.continuous`
    
Controls whether continuous results are returned for each recognition, or only a single result. Defaults to single (`false`.)
`SpeechRecognition.interimResults`
    
Controls whether interim results should be returned (`true`) or not (`false`.) Interim results are results that are not yet final (e.g., the `SpeechRecognitionResult.isFinal` property is `false`.)
`SpeechRecognition.maxAlternatives`
    
Sets the maximum number of `SpeechRecognitionAlternative`s provided per result. The default value is 1.
## Instance methods
`SpeechRecognition` also inherits methods from its parent interface, `EventTarget`.
`SpeechRecognition.abort()`
    
Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a `SpeechRecognitionResult`.
`SpeechRecognition.start()`
    
Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current `SpeechRecognition`.
`SpeechRecognition.stop()`
    
Stops the speech recognition service from listening to incoming audio, and attempts to return a `SpeechRecognitionResult` using the audio captured so far.
## Events
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`audiostart`
    
Fired when the user agent has started to capture audio. Also available via the `onaudiostart` property.
`audioend`
    
Fired when the user agent has finished capturing audio. Also available via the `onaudioend` property.
`end`
    
Fired when the speech recognition service has disconnected. Also available via the `onend` property.
`error`
    
Fired when a speech recognition error occurs. Also available via the `onerror` property.
`nomatch`
    
Fired when the speech recognition service returns a final result with no significant recognition. This may involve some degree of recognition, which doesn't meet or exceed the `confidence` threshold. Also available via the `onnomatch` property.
`result`
    
Fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app. Also available via the `onresult` property.
`soundstart`
    
Fired when any sound — recognizable speech or not — has been detected. Also available via the `onsoundstart` property.
`soundend`
    
Fired when any sound — recognizable speech or not — has stopped being detected. Also available via the `onsoundend` property.
`speechstart`
    
Fired when sound that is recognized by the speech recognition service as speech has been detected. Also available via the `onspeechstart` property.
`speechend`
    
Fired when speech recognized by the speech recognition service has stopped being detected. Also available via the `onspeechend` property.
`start`
    
Fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current `SpeechRecognition`. Also available via the `onstart` property.
## Examples
In our simple Speech color changer example, we create a new `SpeechRecognition` object instance using the `SpeechRecognition()` constructor, create a new `SpeechGrammarList`, and set it to be the grammar that will be recognized by the `SpeechRecognition` instance using the `SpeechRecognition.grammars` property.
After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see `SpeechRecognition.start()`.) When a result has been successfully recognized, the `result` event fires, we extract the color that was spoken from the event object, and then set the background color of the `<html>` element to that color.
    
    const grammar =
      "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
    const recognition = new SpeechRecognition();
    const speechRecognitionList = new SpeechGrammarList();
    speechRecognitionList.addFromString(grammar, 1);
    recognition.grammars = speechRecognitionList;
    recognition.continuous = false;
    recognition.lang = "en-US";
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;
    
    const diagnostic = document.querySelector(".output");
    const bg = document.querySelector("html");
    
    document.body.onclick = () => {
      recognition.start();
      console.log("Ready to receive a color command.");
    };
    
    recognition.onresult = (event) => {
      const color = event.results[0][0].transcript;
      diagnostic.textContent = `Result received: ${color}`;
      bg.style.backgroundColor = color;
    };
    
  * Web Speech API


# Popover API
The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either using HTML attributes, or via JavaScript.
## Concepts and usage
A very common pattern on the web is to show content over the top of other content, drawing the user's attention to specific important information or actions that need to be taken. This content can take several different names — overlays, popups, popovers, dialogs, etc. We will refer to them as popovers through the documentation. Generally speaking, these can be:
  * modal, meaning that while a popover is being shown, the rest of the page is rendered non-interactive until the popover is actioned in some way (for example an important choice is made).
  * non-modal, meaning that the rest of the page can be interacted with while the popover is being shown.


Popovers created using the Popover API are always non-modal. If you want to create a modal popover, a `<dialog>` element is the right way to go. There is significant overlap between the two — you might for example want to create a popover that persists, but control it using HTML. You can turn a `<dialog>` element into a popover (`<dialog popover>` is perfectly valid) if you want to combine popover control with dialog semantics.
Typical use cases for the popover API include user-interactive elements like action menus, custom "toast" notifications, form element suggestions, content pickers, or teaching UI.
You can create popovers in two different ways:
  * Via a set of new HTML attributes. A simple popover with a toggle button can be created using the following code:
        <button popovertarget="mypopover">Toggle the popover</button>
        <div id="mypopover" popover>Popover content</div>
        
  * Via a JavaScript API. For example, `HTMLElement.togglePopover()` can be used to toggle a popover between shown and hidden.


There are also new events to react to a popover being toggled, and CSS features to aid in styling popovers. All the new features are listed below.
See Using the popover API for a detailed guide to using this API.
## HTML attributes
`popover`
    
A global attribute that turns an element into a popover element; takes a popover state (`"auto"`, `"hint"`, or `"manual"`) as its value.
`popovertarget`
    
Turns a `<button>` or `<input>` element into a popover control button; takes the ID of the popover element to control as its value.
`popovertargetaction`
    
Specifies the action to be performed (`"hide"`, `"show"`, or `"toggle"`) on the popover element being controlled by a control `<button>` or `<input>`.
## CSS features
`::backdrop`
    
The `::backdrop` pseudo-element is a full-screen element placed directly behind popover elements, allowing effects to be added to the page content behind the popover(s) if desired (for example blurring it out).
`:popover-open`
    
The `:popover-open` pseudo-class matches a popover element only when it is in the showing state — it can be used to style popover elements when they are showing.
## Interfaces
`ToggleEvent`
    
Represents an event notifying the user when a popover element's state toggles between showing and hidden. It is the event object for the `beforetoggle` and `toggle` events, which fire on popovers when their state changes.
## Extensions to other interfaces
>
### Instance properties
`HTMLElement.popover`
    
Gets and sets an element's popover state via JavaScript (`"auto"`, `"hint"`, or `"manual"`), and can be used for feature detection. Reflects the value of the `popover` global HTML attribute.
`HTMLButtonElement.popoverTargetElement` and `HTMLInputElement.popoverTargetElement`
    
Gets and sets the popover element being controlled by the control button. The JavaScript equivalent of the `popovertarget` HTML attribute.
`HTMLButtonElement.popoverTargetAction` and `HTMLInputElement.popoverTargetAction`
    
Gets and sets the action to be performed (`"hide"`, `"show"`, or `"toggle"`) on the popover element being controlled by the control button. Reflects the value of the `popovertargetaction` HTML attribute.
### Instance methods
`HTMLElement.hidePopover()`
    
Hides a popover element by removing it from the top layer and styling it with `display: none`.
`HTMLElement.showPopover()`
    
Shows a popover element by adding it to the top layer.
`HTMLElement.togglePopover()`
    
Toggles a popover element between the showing and hidden states.
### Events
`HTMLElement.beforetoggle` event
    
Fired just before a popover element's state changes between showing and hidden, or vice versa. Can be used to prevent a popover from opening, or to update other elements that need to be triggered by popover state.
`HTMLElement.toggle` event
    
Fired just after a popover element's state changes between showing and hidden, or vice versa.
## Examples
See our Popover API examples landing page to access the full collection of MDN popover examples.
>
### api.HTMLElement.popover
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Popover_API` 114 114 125 100 17 114 125 76 18.317–18.3On iOS and iPadOS, popovers are not dismissed when the user taps outside of the popover area, see bug 267688. 23.0 114 18.317–18.3On iOS and iPadOS, popovers are not dismissed when the user taps outside of the popover area, see bug 267688.  
`hint` 133 133 No 118 No 133 No 88 No No 133 No  
### api.HTMLElement.beforetoggle_event.popover_elements
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Popover_API` 114 114 125 100 17 114 125 76 17 23.0 114 17  
### api.HTMLElement.toggle_event.popover_elements
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Popover_API` 114 114 125 100 17 114 125 76 17 23.0 114 17  
  * `popover` HTML global attribute
  * `popovertarget` HTML attribute
  * `popovertargetaction` HTML attribute
  * `::backdrop` CSS pseudo-element
  * `:popover-open` CSS pseudo-class


# WEBGL_debug_shaders extension
The `WEBGL_debug_shaders` extension is part of the WebGL API and exposes a method to debug shaders from privileged contexts.
This extension is not directly available to websites as the way of how the shader is translated may uncover personally-identifiable information to the web page about the kind of graphics card in the user's computer.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: Depending on the privacy settings of the browser, this extension might only be available to privileged contexts.
This extension is available to both, WebGL1 and WebGL2 contexts.
## Instance methods
`WEBGL_debug_shaders.getTranslatedShaderSource()`
    
Returns the translated shader source.
  * `WebGLRenderingContext.getExtension()`


# TransformStreamDefaultController
Note: This feature is available in Web Workers.
The `TransformStreamDefaultController` interface of the Streams API provides methods to manipulate the associated `ReadableStream` and `WritableStream`.
When constructing a `TransformStream`, the `TransformStreamDefaultController` is created. It therefore has no constructor. The way to get an instance of `TransformStreamDefaultController` is via the callback methods of `TransformStream()`.
## Instance properties
`TransformStreamDefaultController.desiredSize` Read only
    
Returns the desired size to fill the readable side of the stream's internal queue.
## Instance methods
`TransformStreamDefaultController.enqueue()`
    
Enqueues a chunk (single piece of data) in the readable side of the stream.
`TransformStreamDefaultController.error()`
    
Errors both the readable and writable side of the transform stream.
`TransformStreamDefaultController.terminate()`
    
Closes the readable side and errors the writable side of the stream.
## Examples
In the following example, a transform stream passes through all chunks it receives as `Uint8Array` values, using the `error()` and `enqueue()` methods.
    
    const transformContent = {
      start() {}, // required.
      async transform(chunk, controller) {
        chunk = await chunk;
        switch (typeof chunk) {
          case "object":
            // just say the stream is done I guess
            if (chunk === null) {
              controller.terminate();
            } else if (ArrayBuffer.isView(chunk)) {
              controller.enqueue(
                new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength),
              );
            } else if (
              Array.isArray(chunk) &&
              chunk.every((value) => typeof value === "number")
            ) {
              controller.enqueue(new Uint8Array(chunk));
            } else if (
              typeof chunk.valueOf === "function" &&
              chunk.valueOf() !== chunk
            ) {
              this.transform(chunk.valueOf(), controller); // hack
            } else if ("toJSON" in chunk) {
              this.transform(JSON.stringify(chunk), controller);
            }
            break;
          case "symbol":
            controller.error("Cannot send a symbol as a chunk part");
            break;
          case "undefined":
            controller.error("Cannot send undefined as a chunk part");
            break;
          default:
            controller.enqueue(this.textencoder.encode(String(chunk)));
            break;
        }
      },
      flush() {
        /* do any destructor work here */
      },
    };
    
    class AnyToU8Stream extends TransformStream {
      constructor() {
        super({ ...transformContent, textencoder: new TextEncoder() });
      }
    }
    
# Invoker Commands API
The Invoker Commands API provides a way to declaratively assign behaviors to buttons, allowing control of interactive elements when the button is enacted (clicked or invoked via a keypress, such as the spacebar or return key).
## Concepts and usage
A common pattern on the web is to have `<button>` elements control various aspects of the page, such as opening and closing popovers or `<dialog>` elements, formatting text, and more.
Historically creating these kinds of controls has required JavaScript event listeners added to the button which can then call the APIs on the element they control. The `commandForElement` and `command` properties provide a way to do this declaratively for a limited set of actions. This can be advantageous for built-in commands as the user does not have to wait for JavaScript to download and execute to make these buttons interactive.
## HTML attributes
`commandfor`
    
Turns a `<button>` element into a button, controlling the given interactive element; takes the ID of the element to control as its value.
`command`
    
Specifies the action to be performed on an element being controlled by a control `<button>`, specified via the `commandfor` attribute.
## Interfaces
`CommandEvent`
    
Represents an event notifying the user that a command has been issued. It is the event object for the `command` event. The event fires on element referenced by `commandForElement`.
## Extensions to other interfaces
>
### Instance properties
`HTMLButtonElement.commandForElement`
    
Gets and sets the element being controlled by the button. The JavaScript equivalent of the `commandfor` HTML attribute.
`HTMLButtonElement.command`
    
Gets and sets the action to be performed on the element being controlled by the button. Reflects the value of the `command` HTML attribute.
### Events
`command` event
    
Fired on the element referenced by the button.
## Examples
>
### Creating declarative popovers
    
    <button commandfor="mypopover" command="toggle-popover">
      Toggle the popover
    </button>
    <div id="mypopover" popover>
      <button commandfor="mypopover" command="hide-popover">Close</button>
      Popover content
    </div>
    
### Creating declarative dialogs
    
    <button commandfor="mydialog" command="show-modal">Show modal dialog</button>
    <dialog id="mydialog">
      <button commandfor="mydialog" command="close">Close</button>
      Dialog Content
    </dialog>
    
### Creating custom commands
    
    <button commandfor="my-img" command="--rotate-left">Rotate left</button>
    <button commandfor="my-img" command="--rotate-right">Rotate right</button>
    <img id="my-img" src="photo.jpg" alt="[add appropriate alt text here]" />
    
    
    const myImg = document.getElementById("my-img");
    
    myImg.addEventListener("command", (event) => {
      if (event.command === "--rotate-left") {
        myImg.style.rotate = "-90deg";
      } else if (event.command === "--rotate-right") {
        myImg.style.rotate = "90deg";
      }
    });
    
>
### api.CommandEvent
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`CommandEvent` 135 135 preview 120 preview 135 No 89 No No 135 No  
`Invoker_Commands_API` 135 135 preview 120 preview 135 No 89 No No 135 No  
`command` 135 135 preview 120 preview 135 No 89 No No 135 No  
`source` 135 135 preview 120 preview 135 No 89 No No 135 No  
### api.HTMLButtonElement.commandForElement
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Invoker_Commands_API` 135 135 preview 120 preview 135 No 89 No No 135 No  
### api.HTMLButtonElement.command
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Invoker_Commands_API` 135 135 preview 120 preview 135 No 89 No No 135 No  
`request-close` 139 139 preview 123 preview 139 No 91 No No 139 No  
  * `command` property
  * `commandForElement` property
  * `CommandEvent` interface


# MediaError
The `MediaError` interface represents an error which occurred while handling media in an HTML media element based on `HTMLMediaElement`, such as `<audio>` or `<video>`.
A `MediaError` object describes the error in general terms using a numeric `code` categorizing the kind of error, and a `message`, which provides specific diagnostics about what went wrong.
## Instance properties
This interface doesn't inherit any properties.
`MediaError.code`
    
A number which represents the general type of error that occurred.
`MediaError.message`
    
A human-readable string which provides specific diagnostic information to help the reader understand the error condition which occurred; specifically, it isn't a summary of what the error code means, but actual diagnostic information to help in understanding what exactly went wrong. This text and its format is not defined by the specification and will vary from one user agent to another. If no diagnostics are available, or no explanation can be provided, this value is an empty string (`""`).
## Instance methods
This interface doesn't implement or inherit any methods, and has none of its own.
  * `HTMLMediaElement.error`


# RTCRtpScriptTransform
The `RTCRtpScriptTransform` interface of the WebRTC API is used to insert a WebRTC Encoded Transform (a `TransformStream` running in a worker thread) into the WebRTC sender and receiver pipelines.
## Constructor
`RTCRtpScriptTransform()`
    
Creates a new instance of the `RTCRtpScriptTransform` object.
## Instance properties
None.
## Instance methods
None.
## Description
`RTCRtpScriptTransform` instances are constructed with a `Worker`, in which the transform stream code will run, along with an (optional) `options` object and array of transferrable object that will be passed to the worker. They are then added into incoming and outgoing RTC pipelines by assigning them to `RTCRtpReceiver.transform` and `RTCRtpSender.transform`, respectively.
On construction of this object, and whenever an encoded frame arrives, the `rtctransform` event is fired on the worker global object. The event's `transformer` property is a `RTCRtpScriptTransformer`, the worker-side counterpart to the main-thread `RTCRtpScriptTransform`. This has `readable` (`ReadableStream`) and `writable` (`WritableStream`) properties that have been shared from the main thread `RTCRtpScriptTransform` — where they are not public. If the corresponding `RTCRtpScriptTransform` is used with an `RTCRtpReceiver`, then the `readable` queues incoming encoded audio or video frames from the packetizer. If it is used with `RTCRtpSender` then `readable` contains frames coming from a codec.
The worker thread `rtctransform` event handler defines a pipe chain. This pipes encoded frames from `event.transformer.readable`, through a `TransformStream` which defines the transformation function, through to `event.transformer.writable`. The `event.transformer` also has the `options` object passed from the `RTCRtpScriptTransform` constructor (if defined) that can be used to determine the source of the event, and hence the specific `TransformStream` to add to the chain.
## Examples
Note that these examples show how `RTCRtpScriptTransform` is defined and used. Worker thread transform code is covered as part of the more complete example in Using WebRTC Encoded Transforms.
### Adding a transform for outgoing frames
This example shows how you might stream video from a user's webcam over WebRTC, adding a WebRTC encoded transform to modify the outgoing streams. The code assumes that there is an `RTCPeerConnection` called `peerConnection` that is already connected to a remote peer.
First we gets a `MediaStreamTrack`, using `getUserMedia()` to get a video `MediaStream` from a media device, and then the `MediaStream.getTracks()` method to get the first `MediaStreamTrack` in the stream.
The track is added to the peer connection using `addTrack()` and sent. The `addTrack()` method returns the `RTCRtpSender` that is being used to send the track.
    
    // Get Video stream and MediaTrack
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    const [track] = stream.getTracks();
    const videoSender = peerConnection.addTrack(track, stream);
    
An `RTCRtpScriptTransform` is then constructed taking a worker script, which defines the transform, and an optional object that can be used to pass arbitrary messages to the worker (in this case we've used a `name` property with value "senderTransform" to tell the worker that this transform will be added to the outbound stream). We then add the transform to the sender by assigning it to the `RTCRtpSender.transform` property.
    
    // Create a worker containing a TransformStream
    const worker = new Worker("worker.js");
    videoSender.transform = new RTCRtpScriptTransform(worker, {
      name: "senderTransform",
    });
    
Note that you can add the transform at any time. However by adding it immediately after calling `addTrack()` the transform will get the first encoded frame that is sent.
### Adding a transform for incoming frames
This example shows how you add a WebRTC encoded transform to modify an incoming stream. The code assumes that there is an `RTCPeerConnection` called `peerConnection` that is already connected to a remote peer.
First we add an `RTCPeerConnection` `track` event handler to catch the event when a new track is streamed. Within the handler we construct an `RTCRtpScriptTransform` and add it to `event.receiver.transform` (`event.receiver` is a `RTCRtpReceiver`). As in the previous example, the constructor takes an object with `name` property: but here we use `receiverTransform` as the value to tell the worker that frames are incoming from the packetizer.
    
    peerConnection.ontrack = (event) => {
      const worker = new Worker("worker.js");
      event.receiver.transform = new RTCRtpScriptTransform(worker, {
        name: "receiverTransform",
      });
      received_video.srcObject = event.streams[0];
    };
    
Note again that you can add the transform stream at any time. However by adding it in the `track` event handler ensures that the transform stream will get the first encoded frame for the track.
  * Using WebRTC Encoded Transforms
  * `TransformStream`
  * `RTCRtpScriptTransformer`


# EXT_texture_filter_anisotropic extension
The `EXT_texture_filter_anisotropic` extension is part of the WebGL API and exposes two constants for anisotropic filtering (AF).
AF improves the quality of mipmapped texture access when viewing a textured primitive at an oblique angle. Using just mipmapping, these lookups have a tendency to average to grey.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is available to both, WebGL1 and WebGL2 contexts.
## Constants
`ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT`
    
This is the `pname` argument to the `gl.getParameter()` call, and it returns the maximum available anisotropy.
`ext.TEXTURE_MAX_ANISOTROPY_EXT`
    
This is the `pname` argument to the `gl.getTexParameter()` and `gl.texParameterf()` / `gl.texParameteri()` calls and sets the desired maximum anisotropy for a texture.
## Examples
    
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    const ext =
      gl.getExtension("EXT_texture_filter_anisotropic") ||
      gl.getExtension("MOZ_EXT_texture_filter_anisotropic") ||
      gl.getExtension("WEBKIT_EXT_texture_filter_anisotropic");
    if (ext) {
      const max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
      gl.texParameterf(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, max);
    }
    
  * `WebGLRenderingContext.getExtension()`


# SourceBufferList
Note: This feature is available in Dedicated Web Workers.
The `SourceBufferList` interface represents a simple container list for multiple `SourceBuffer` objects.
The source buffer list containing the `SourceBuffer`s appended to a particular `MediaSource` can be retrieved using the `MediaSource.sourceBuffers` property.
The individual source buffers can be accessed using the bracket notation `[]`.
EventTarget  SourceBufferList 
## Instance properties
`SourceBufferList.length` Read only
    
Returns the number of `SourceBuffer` objects in the list.
## Instance methods
Inherits methods from its parent interface, `EventTarget`.
## Events
`addsourcebuffer`
    
Fired when a `SourceBuffer` is added to the list.
`removesourcebuffer`
    
Fired when a `SourceBuffer` is removed from the list.
## Examples
This example shows how to access the active source buffers of the `MediaSource` connected to an already playing `HTMLVideoElement`.
    
    // Video is an already playing video using a MediaSource srcObject
    const video = document.querySelector("video");
    const mediaSource = video.srcObject;
    const sourceBufferList = mediaSource.activeSourceBuffers;
    for (const sourceBuffer of sourceBufferList) {
      // Do something with each SourceBuffer, such as call abort()
      sourceBuffer.abort();
    }
    
  * `MediaSource`
  * `SourceBuffer`


# SVGFEMorphologyElement
The `SVGFEMorphologyElement` interface corresponds to the `<feMorphology>` element.
EventTarget  Node  Element  SVGElement  SVGFEMorphologyElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEMorphologyElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEMorphologyElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFEMorphologyElement.operator` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `operator` attribute of the given element. It takes one of the `SVG_MORPHOLOGY_OPERATOR_*` constants defined on this interface.
`SVGFEMorphologyElement.radiusX` Read only
    
An `SVGAnimatedNumber` corresponding to the X component of the `radius` attribute of the given element.
`SVGFEMorphologyElement.radiusY` Read only
    
An `SVGAnimatedNumber` corresponding to the Y component of the `radius` attribute of the given element.
`SVGFEMorphologyElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEMorphologyElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEMorphologyElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEMorphologyElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
## Static properties
`SVG_MORPHOLOGY_OPERATOR_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_MORPHOLOGY_OPERATOR_ERODE` (1)
    
Corresponds to the value `erode`.
`SVG_MORPHOLOGY_OPERATOR_DILATE` (2)
    
Corresponds to the value `dilate`.
  * `<feMorphology>`


# IdleDeadline
The `IdleDeadline` interface is used as the data type of the input parameter to idle callbacks established by calling `Window.requestIdleCallback()`. It offers a method, `timeRemaining()`, which lets you determine how much longer the user agent estimates it will remain idle and a property, `didTimeout`, which lets you determine if your callback is executing because its timeout duration expired.
To learn more about how request callbacks work, see Collaborative Scheduling of Background Tasks.
## Instance properties
`IdleDeadline.didTimeout` Read only
    
A Boolean whose value is `true` if the callback is being executed because the timeout specified when the idle callback was installed has expired.
## Instance methods
`IdleDeadline.timeRemaining()`
    
Returns a `DOMHighResTimeStamp`, which is a floating-point value providing an estimate of the number of milliseconds remaining in the current idle period. If the idle period is over, the value is 0. Your callback can call this repeatedly to see if there's enough time left to do more work before returning.
## Example
See our complete example in the article Cooperative Scheduling of Background Tasks API.
  * Cooperative Scheduling of Background Tasks API
  * `Window.requestIdleCallback()`
  * `Window.cancelIdleCallback()`


# Permissions API
Note: This feature is available in Web Workers.
The Permissions API provides a consistent programmatic way to query the status of API permissions attributed to the current context, such as a web page or worker. For example, it can be used to determine if permission to access a particular feature or API has been granted, denied, or requires specific user permission.
## Concepts and usage
Historically different APIs handle their own permissions inconsistently — for example the Notifications API provided its own methods for requesting permissions and checking permission status, whereas the Geolocation API did not. The Permissions API provides the tools to allow developers to implement a consistent user experience for working with permissions.
The permissions from this API effectively aggregate all security restrictions for the context, including any requirement for an API to be used in a secure context, Permissions-Policy restrictions applied to the document, requirements for user interaction, and user prompts. So, for example, if an API is restricted by permissions policy, the returned permission would be `denied` and the user would not be prompted for access.
The `permissions` property has been made available on the `Navigator` object, both in the standard browsing context and the worker context (`WorkerNavigator` — so permission checks are available inside workers), and returns a `Permissions` object that provides access to the Permissions API functionality.
Once you have this object you can then use the `Permissions.query()` method to return a promise that resolves with the `PermissionStatus` for a specific API.
### Requesting permission
If the permission status is `prompt`, the user must acknowledge a prompt to grant access to the feature.
The mechanism that triggers this prompt will depend on the specific API — it is not defined as part of the Permissions API. Generally the trigger is code calling a method to access or open the feature, or that registers for notifications from the feature that will subsequently access it.
Note that not all features require a prompt. Permission might be granted by a `Permission Policy`, implicitly by transient activation, or via some other mechanism.
### Revoking permission
Permission revocation is not managed by the API. More specifically, a `Permissions.revoke()` method was proposed, but has since been removed from those browsers where it was implemented.
Users can manually remove permission for particular sites using browser settings:
  * Firefox: Hamburger Menu > Settings > Privacy & Security > Permissions (then select the Settings button for the permission of interest).
  * Chrome: Hamburger Menu > Settings > Show advanced settings. In the Privacy section, click Content Settings. In the resulting dialog, find the Location section and select Ask when a site tries to…. Finally, click Manage Exceptions and remove the permissions you granted to the sites you are interested in.


### Permission-aware APIs
Not all APIs' permission statuses can be queried using the Permissions API. A non-exhaustive list of permission-aware APIs includes:
  * Background Synchronization API: `background-sync` (should always be granted)
  * Clipboard_API: `clipboard-read`, `clipboard-write`
  * Compute Pressure API: `compute-pressure`
  * Geolocation API: `geolocation`
  * Local Font Access API: `local-fonts`
  * Media Capture and Streams API: `microphone`, `camera`
  * Notifications API: `notifications`
  * Payment Handler API: `payment-handler`
  * Push API: `push`
  * Screen Capture API: `captured-surface-control`, `display-capture`
  * Screen Wake Lock API: `screen-wake-lock`
  * Sensor APIs: `accelerometer`, `gyroscope`, `magnetometer`, `ambient-light-sensor`
  * Storage Access API: `storage-access`, `top-level-storage-access`
  * Storage API: `persistent-storage`
  * Web Bluetooth API: `bluetooth`
  * Web MIDI API: `midi`
  * Window Management API: `window-management`


## Interfaces
`Permissions`
    
Provides the core Permission API functionality, such as methods for querying and revoking permissions.
`PermissionStatus`
    
Provides access to the current status of a permission, and an event handler to respond to changes in permission status.
### Extensions to other interfaces
`Navigator.permissions` and `WorkerNavigator.permissions` Read only
    
Provides access to the `Permissions` object from the main context and worker context respectively.
## Examples
We have created an example called Location Finder. You can run the example live, view the source code on GitHub, or read more about how it works in our article Using the Permissions API.
The `Permissions.query()` example also so shows code that tests most permissions on the current browser and logs the result.
>
### api.Permissions
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Permissions_API` 43 79 46 30 16 43 46 30 16 4.0 No 16  
`permission_accelerometer` 62 79 No 49 No 62 No 46 No 8.0 No No  
`permission_accessibility-events` 62–131 79–131 No 49–116 No 62–131 No 46–87 No 8.0 No No  
`permission_ambient-light-sensor` 62 79 No 49 No 62 No No No No No No  
`permission_background-sync` 62 79 No 49 No 62 No 46 No 8.0 No No  
`permission_camera` 64 79 132 51 16 64 132 47 16 9.0 No No  
`permission_captured-surface-control` 136 136 No 121 No No No No No No No No  
`permission_clipboard-read` 64 79 No 51 No 64 No 47 No 9.0 No No  
`permission_clipboard-write` 64 79 No 51 No 64 No 47 No 9.0 No No  
`permission_compute-pressure` 125 125 No 111 No No No No No No No No  
`permission_geolocation` 43 79 46 30 16 43 46 30 16 4.0 No No  
`permission_gyroscope` 51 79 No 38 No 51 No 41 No 5.0 No No  
`permission_local-fonts` 103 103 No 89 No No No No No No No No  
`permission_magnetometer` 62 79 No 49 No 62 No No No No No No  
`permission_microphone` 64 79 132 51 16 64 132 47 16 9.0 No No  
`permission_midi` 43 79 110 30 No 43 110 30 No 4.0 No No  
`permission_notifications` 43 79 46Alias for the `push` permission (returns the same value). 30 16.4 43 46Alias for the `push` permission (returns the same value). 30 16.4 4.0 No No  
`permission_payment-handler` 66 79 No 53 No 66 No 47 No 9.0 No No  
`permission_persistent-storage` 71 79 53 58 No 71 53 50 No 10.0 No No  
`permission_push` 43 79 46Alias for the `notifications` permission (returns the same value). 30 16.5 43 46Alias for the `notifications` permission (returns the same value). 30 16.5 4.0 No No  
`permission_screen-wake-lock` 84 84 126122–126The value is recognized, but has no effect. 70 No 84 126122–126The value is recognized, but has no effect. 60 No 14.0 No No  
`permission_storage-access` 119 85 117 105 No 120 117 80 No 25.0 No No  
`permission_top-level-storage-access` 113 113 No 99 No 120 No 80 No 25.0 No No  
`permission_window-management` 111 111 No 97 No No No No No No No No  
`query` 43 79 46 30 16 43 46 30 16 4.0 No 16  
`request` 46 79 No 33 No 46 No No No No No No  
`requestAll` 48 79 No 35 No 48 No No No No No No  
`revoke` 46 79 5147–51 33 No 46 47–51 No No No No No  
### api.Navigator.permissions
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Permissions_API` 43 79 46 30 16 43 46 30 16 4.0 No 16  
### api.WorkerNavigator.permissions
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Permissions_API` 43 79 133 30 16.4 43 133 30 16.4 4.0 No 16.4  
  * Using the Permissions API
  * Using the Permissions API to Detect How Often Users Allow or Deny Camera Access
  * `Notification.permission`
  * Privacy, permissions, and information security


# Magnetometer
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Magnetometer` interface of the Sensor APIs provides information about the magnetic field as detected by the device's primary magnetometer sensor.
To use this sensor, the user must grant permission to the `'magnetometer'` device sensor through the Permissions API. In addition, this feature may be blocked by a Permissions Policy set on your server.
EventTarget  Sensor  Magnetometer 
## Constructor
`Magnetometer()` Experimental
    
Creates a new `Magnetometer` object.
## Instance properties
`Magnetometer.x` Read only Experimental
    
Returns a double containing the magnetic field around the device's x axis.
`Magnetometer.y` Read only Experimental
    
Returns a double containing the magnetic field around the device's y axis.
`Magnetometer.z` Read only Experimental
    
Returns a double containing the magnetic field around the device's z axis.
## Instance methods
`Magnetometer` doesn't have own methods. However, it inherits methods from its parent interfaces, `Sensor` and `EventTarget`.
## Events
`Magnetometer` doesn't have own events. However, it inherits events from its parent interface, `Sensor`.
## Example
The magnetometer is typically read in the `reading` event callback. In the example below this occurs sixty times a second.
    
    let magSensor = new Magnetometer({ frequency: 60 });
    
    magSensor.addEventListener("reading", (e) => {
      console.log(`Magnetic field along the X-axis ${magSensor.x}`);
      console.log(`Magnetic field along the Y-axis ${magSensor.y}`);
      console.log(`Magnetic field along the Z-axis ${magSensor.z}`);
    });
    magSensor.start();
    
# DynamicsCompressorNode
The `DynamicsCompressorNode` interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once. This is often used in musical production and game audio. `DynamicsCompressorNode` is an `AudioNode` that has exactly one input and one output.
EventTarget  AudioNode  DynamicsCompressorNode 
Number of inputs `1`  
Number of outputs `1`  
Channel count mode `"clamped-max"`  
Channel count `2`  
Channel interpretation `"speakers"`  
## Constructor
`DynamicsCompressorNode()`
    
Creates a new instance of an `DynamicsCompressorNode` object.
## Instance properties
Inherits properties from its parent, `AudioNode`.
`DynamicsCompressorNode.threshold` Read only
    
A k-rate `AudioParam` representing the decibel value above which the compression will start taking effect.
`DynamicsCompressorNode.knee` Read only
    
A k-rate `AudioParam` containing a decibel value representing the range above the threshold where the curve smoothly transitions to the compressed portion.
`DynamicsCompressorNode.ratio` Read only
    
A k-rate `AudioParam` representing the amount of change, in dB, needed in the input for a 1 dB change in the output.
`DynamicsCompressorNode.reduction` Read only
    
A `float` representing the amount of gain reduction currently applied by the compressor to the signal.
`DynamicsCompressorNode.attack` Read only
    
A k-rate `AudioParam` representing the amount of time, in seconds, required to reduce the gain by 10 dB.
`DynamicsCompressorNode.release` Read only
    
A k-rate `AudioParam` representing the amount of time, in seconds, required to increase the gain by 10 dB.
## Instance methods
No specific methods; inherits methods from its parent, `AudioNode`.
## Example
See `BaseAudioContext.createDynamicsCompressor()` example code.
  * Using the Web Audio API


# BiquadFilterNode
The `BiquadFilterNode` interface represents a simple low-order filter, and is created using the `BaseAudioContext/createBiquadFilter` method. It is an `AudioNode` that can represent different kinds of filters, tone control devices, and graphic equalizers. A `BiquadFilterNode` always has exactly one input and one output.
EventTarget  AudioNode  BiquadFilterNode 
Number of inputs `1`  
Number of outputs `1`  
Channel count mode `"max"`  
Channel count `2` (not used in the default count mode)  
Channel interpretation `"speakers"`  
## Constructor
`BiquadFilterNode()`
    
Creates a new instance of a `BiquadFilterNode` object.
## Instance properties
Inherits properties from its parent, `AudioNode`.
Note: Though the `AudioParam` objects returned are read-only, the values they represent are not.
`BiquadFilterNode.frequency` Read only
    
An a-rate `AudioParam`, a double representing a frequency in the current filtering algorithm measured in hertz (Hz).
`BiquadFilterNode.detune` Read only
    
An a-rate `AudioParam` representing detuning of the frequency in cents.
`BiquadFilterNode.Q` Read only
    
An a-rate `AudioParam`, a double representing a Q factor, or quality factor.
`BiquadFilterNode.gain` Read only
    
An a-rate `AudioParam`, a double representing the gain used in the current filtering algorithm.
`BiquadFilterNode.type`
    
A string value defining the kind of filtering algorithm the node is implementing.
The meaning of the different parameters depending on the type of the filter (detune has the same meaning regardless, so isn't listed below)  `type` Description `frequency` `Q` `gain`  
`lowpass` Standard second-order resonant lowpass filter with 12dB/octave rolloff. Frequencies below the cutoff pass through; frequencies above it are attenuated.  The cutoff frequency. Indicates how peaked the frequency is around the cutoff. The greater the value is, the greater is the peak.  Not used  
`highpass` Standard second-order resonant highpass filter with 12dB/octave rolloff. Frequencies below the cutoff are attenuated; frequencies above it pass through.  The cutoff frequency. Indicates how peaked the frequency is around the cutoff. The greater the value, the greater the peak.  Not used  
`bandpass` Standard second-order bandpass filter. Frequencies outside the given range of frequencies are attenuated; the frequencies inside it pass through.  The center of the range of frequencies. Controls the width of the frequency band. The greater the `Q` value, the smaller the frequency band.  Not used  
`lowshelf` Standard second-order lowshelf filter. Frequencies lower than the frequency get a boost, or an attenuation; frequencies over it are unchanged.  The upper limit of the frequencies getting a boost or an attenuation.  Not used The boost, in dB, to be applied; if negative, it will be an attenuation.   
`highshelf` Standard second-order highshelf filter. Frequencies higher than the frequency get a boost or an attenuation; frequencies lower than it are unchanged.  The lower limit of the frequencies getting a boost or an attenuation.  Not used The boost, in dB, to be applied; if negative, it will be an attenuation.   
`peaking` Frequencies inside the range get a boost or an attenuation; frequencies outside it are unchanged.  The middle of the frequency range getting a boost or an attenuation.  Controls the width of the frequency band. The greater the `Q` value, the smaller the frequency band.  The boost, in dB, to be applied; if negative, it will be an attenuation.   
`notch` Standard notch filter, also called a band-stop or band-rejection filter. It is the opposite of a bandpass filter: frequencies outside the give range of frequencies pass through; frequencies inside it are attenuated.  The center of the range of frequencies. Controls the width of the frequency band. The greater the `Q` value, the smaller the frequency band.  Not used  
`allpass` Standard second-order allpass filter. It lets all frequencies through, but changes the phase-relationship between the various frequencies.  The frequency with the maximal group delay, that is, the frequency where the center of the phase transition occurs.  Controls how sharp the transition is at the medium frequency. The larger this parameter is, the sharper and larger the transition will be.  Not used  
## Instance methods
Inherits methods from its parent, `AudioNode`.
`BiquadFilterNode.getFrequencyResponse()`
    
From the current filter parameter settings this method calculates the frequency response for frequencies specified in the provided array of frequencies.
## Example
See `AudioContext.createBiquadFilter` for example code that shows how to use an `AudioContext` to create a Biquad filter node.
  * Using the Web Audio API


# USBConnectionEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USBConnectionEvent` interface of the WebUSB API is the event type passed to `USB` `connect` and `disconnect` events when the user agent detects that a new USB device has been connected or disconnected.
Event  USBConnectionEvent 
## Constructor
`USBConnectionEvent()` Experimental
    
Returns a `USBConnectionEvent` object.
## Instance properties
`USBConnectionEvent.device` Read only Experimental
    
Returns a `USBDevice` object representing the current device.
## Examples
In the following example listening for connect and disconnect events is used to add and remove the devices from the user interface of an application.
    
    navigator.usb.addEventListener("connect", (event) => {
      // Add event.device to the UI.
    });
    
    navigator.usb.addEventListener("disconnect", (event) => {
      // Remove event.device from the UI.
    });
    
# GPUAdapterInfo
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUAdapterInfo` interface of the WebGPU API contains identifying information about a `GPUAdapter`.
An adapter's `GPUAdapterInfo` can be retrieved using the `GPUAdapter.info` property of the adapter itself, or the `GPUDevice.adapterInfo` property of a device that originated from the adapter.
This object allows developers to access specific details about the user's GPU so that they can preemptively apply workarounds for GPU-specific bugs, or provide different codepaths to better suit different GPU architectures. Providing such information does present a security risk — it could be used for fingerprinting — therefore the information shared is kept at a minimum, and different browser vendors are likely to share different information types and granularities.
## Instance properties
`architecture` Read only
    
The name of the family or class of GPUs the adapter belongs to. Returns an empty string if it is not available.
`description` Read only
    
A human-readable string describing the adapter. Returns an empty string if it is not available.
`device` Read only
    
A vendor-specific identifier for the adapter. Returns an empty string if it is not available.
`vendor` Read only
    
The name of the adapter vendor. Returns an empty string if it is not available.
`subgroupMaxSize` Read only
    
The maximum supported subgroup size for the `GPUAdapter`.
`subgroupMinSize` Read only
    
The minimum supported subgroup size for the `GPUAdapter`.
## Examples
>
### Access GPUAdapterInfo via GPUAdapter.info
    
    const adapter = await navigator.gpu.requestAdapter();
    if (!adapter) {
      throw Error("Couldn't request WebGPU adapter.");
    }
    
    const adapterInfo = adapter.info;
    console.log(adapterInfo.vendor);
    console.log(adapterInfo.architecture);
    
### Access GPUAdapterInfo via GPUDevice.adapterInfo
    
    const adapter = await navigator.gpu.requestAdapter();
    if (!adapter) {
      throw Error("Couldn't request WebGPU adapter.");
    }
    
    const myDevice = await adapter.requestDevice();
    
    function optimizeForGpuDevice(device) {
      if (device.adapterInfo.vendor === "amd") {
        // Use AMD-specific optimizations
      } else if (device.adapterInfo.architecture.includes("turing")) {
        // Optimize for NVIDIA Turing architecture
      }
    }
    
    optimizeForGpuDevice(myDevice);
    
  * `GPUAdapter.info`
  * The WebGPU API


# DOMHighResTimeStamp
The `DOMHighResTimeStamp` type is a `double` and is used to store a time value in milliseconds.
This type can be used to describe a discrete point in time or a time interval (the difference in time between two discrete points in time). The starting time can be either a specific time determined by the script for a site or app, or the time origin.
The time, given in milliseconds, should be accurate to 5 µs (microseconds), with the fractional part of the number indicating fractions of a millisecond. However, if the browser is unable to provide a time value accurate to 5 µs (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond. Also note the section below on reduced time precision controlled by browser preferences to avoid timing attacks and fingerprinting.
Further, if the device or operating system the user agent is running on doesn't have a clock accurate to the microsecond level, they may only be accurate to the millisecond.
## Security requirements
To offer protection against timing attacks and fingerprinting, `DOMHighResTimeStamp` types are coarsened based on site isolation status.
  * Resolution in isolated contexts: 5 microseconds
  * Resolution in non-isolated contexts: 100 microseconds


Cross-origin isolate your site using the `Cross-Origin-Opener-Policy` and `Cross-Origin-Embedder-Policy` headers:
    
    Cross-Origin-Opener-Policy: same-origin
    Cross-Origin-Embedder-Policy: require-corp
    
These headers ensure a top-level document does not share a browsing context group with cross-origin documents. COOP process-isolates your document and potential attackers can't access to your global object if they were opening it in a popup, preventing a set of cross-origin attacks dubbed XS-Leaks.
  * `performance.now()`
  * `performance.timeOrigin`


# TextFormatUpdateEvent
The `TextFormatUpdateEvent` interface is a DOM event that represents a list of text formats that an Input Method Editor (IME) window wants to apply to the text being composed in an editable region that's attached to an `EditContext` instance.
This interface inherits properties from `Event`.
Event  TextFormatUpdateEvent 
## Constructor
`TextFormatUpdateEvent()` Experimental
    
Creates a new `TextFormatUpdateEvent` object.
## Instance methods
`TextFormatUpdateEvent.getTextFormats` Experimental
    
Returns an `Array` of `TextFormat` objects that represent the formats that the IME window wants to apply to the text.
## Examples
>
### Styling IME-composed text
In the following example, the `textformatupdate` event is used to update the formatting of the text in the editable region.
    
    <canvas id="editor-canvas"></canvas>
    
    
    const TEXT_X = 10;
    const TEXT_Y = 10;
    
    const canvas = document.getElementById("editor-canvas");
    const ctx = canvas.getContext("2d");
    
    const editContext = new EditContext();
    canvas.editContext = editContext;
    
    editContext.addEventListener("textformatupdate", (e) => {
      // Clear the canvas.
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    
      // Render the text.
      ctx.fillText(editContext.text, TEXT_X, TEXT_Y);
      console.log(`Rendering text: ${editContext.text}`);
    
      // Get the text formats that the IME window wants to apply.
      const formats = e.getTextFormats();
    
      // Iterate over the text formats
      for (const format of formats) {
        const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format;
    
        console.log(
          `Applying underline ${underlineThickness} ${underlineStyle} between ${rangeStart} and ${rangeEnd}.`,
        );
    
        const underlineXStart = ctx.measureText(
          editContext.text.substring(0, rangeStart),
        ).width;
        const underlineXEnd = ctx.measureText(
          editContext.text.substring(0, rangeEnd),
        ).width;
        const underlineY = TEXT_Y + 3;
    
        // For brevity, this example only draws a simple underline.
        // Use underlineStyle and underlineThickness to draw the correct underline.
    
        ctx.beginPath();
        ctx.moveTo(TEXT_X + underlineXStart, underlineY);
        ctx.lineTo(TEXT_X + underlineXEnd, underlineY);
        ctx.stroke();
      }
    });
    
# GPUQueue
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUQueue` interface of the WebGPU API controls execution of encoded commands on the GPU.
A device's primary queue is accessed via the `GPUDevice.queue` property.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Instance methods
`copyExternalImageToTexture()`
    
Copies a snapshot taken from a source image, video, or canvas into a given `GPUTexture`.
`onSubmittedWorkDone()`
    
Returns a `Promise` that resolves when all the work submitted to the GPU via this `GPUQueue` at the point the method is called has been processed.
`submit()`
    
Schedules the execution of command buffers represented by one or more `GPUCommandBuffer` objects by the GPU.
`writeBuffer()`
    
Writes a provided data source into a given `GPUBuffer`.
`writeTexture()`
    
Writes a provided data source into a given `GPUTexture`.
## Examples
In our basic render demo, we define some vertex data in a `Float32Array` that we'll use to draw a triangle:
    
    const vertices = new Float32Array([
      0.0, 0.6, 0, 1, 1, 0, 0, 1, -0.5, -0.6, 0, 1, 0, 1, 0, 1, 0.5, -0.6, 0, 1, 0,
      0, 1, 1,
    ]);
    
To use this data in a render pipeline, we need to put it into a `GPUBuffer`. First we'll create the buffer:
    
    const vertexBuffer = device.createBuffer({
      size: vertices.byteLength, // make it big enough to store vertices in
      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
    });
    
To get the data into the buffer we can use the `writeBuffer()` function, which lets the user agent determine most efficient way to copy the data over:
    
    device.queue.writeBuffer(vertexBuffer, 0, vertices, 0, vertices.length);
    
Later on, a set of commands is encoded into a `GPUCommandBuffer` using the `GPUCommandEncoder.finish()` method. The command buffer is then passed into the queue via a `submit()` call, ready to be processed by the GPU.
    
    device.queue.submit([commandEncoder.finish()]);
    
Note: Study the WebGPU samples to find more queue examples.
  * The WebGPU API


# DocumentFragment
The `DocumentFragment` interface represents a minimal document object that has no parent.
It is used as a lightweight version of `Document` that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is due to the fact that the document fragment isn't part of the active document tree structure. Changes made to the fragment don't affect the document.
EventTarget  Node  DocumentFragment 
## Constructor
`DocumentFragment()`
    
Creates and returns a new `DocumentFragment` object.
## Instance properties
This interface has no specific properties, but inherits those of its parent, `Node`.
`DocumentFragment.childElementCount` Read only
    
Returns the amount of child `elements` the `DocumentFragment` has.
`DocumentFragment.children` Read only
    
Returns a live `HTMLCollection` containing all objects of type `Element` that are children of the `DocumentFragment` object.
`DocumentFragment.firstElementChild` Read only
    
Returns the `Element` that is the first child of the `DocumentFragment` object, or `null` if there is none.
`DocumentFragment.lastElementChild` Read only
    
Returns the `Element` that is the last child of the `DocumentFragment` object, or `null` if there is none.
## Instance methods
This interface inherits the methods of its parent, `Node`.
`DocumentFragment.append()`
    
Inserts a set of `Node` objects or strings after the last child of the document fragment.
`DocumentFragment.prepend()`
    
Inserts a set of `Node` objects or strings before the first child of the document fragment.
`DocumentFragment.querySelector()`
    
Returns the first `Element` node within the `DocumentFragment`, in document order, that matches the specified selectors.
`DocumentFragment.querySelectorAll()`
    
Returns a `NodeList` of all the `Element` nodes within the `DocumentFragment` that match the specified selectors.
`DocumentFragment.moveBefore()` Experimental
    
Moves a given `Node` inside the invoking `DocumentFragment` as a direct child, before a given reference node, without removing and then inserting the node.
`DocumentFragment.replaceChildren()`
    
Replaces the existing children of a `DocumentFragment` with a specified new set of children.
`DocumentFragment.getElementById()`
    
Returns the first `Element` node within the `DocumentFragment`, in document order, that matches the specified ID. Functionally equivalent to `Document.getElementById()`.
## Usage notes
A common use for `DocumentFragment` is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using `Node` interface methods such as `appendChild()`, `append()`, or `insertBefore()`. Doing this moves the fragment's nodes into the DOM, leaving behind an empty `DocumentFragment`.
This interface is also of great use with Web components: `<template>` elements contain a `DocumentFragment` in their `HTMLTemplateElement.content` property.
An empty `DocumentFragment` can be created using the `document.createDocumentFragment()` method or the constructor.
## Performance
The performance benefit of `DocumentFragment` is often overstated. In fact, in some engines, using a `DocumentFragment` is slower than appending to the document in a loop as demonstrated in this benchmark. However, the difference between these examples is so marginal that it's better to optimize for readability than performance.
## Example
>
### HTML
    
    <ul></ul>
    
### JavaScript
    
    const ul = document.querySelector("ul");
    const fruits = ["Apple", "Orange", "Banana", "Melon"];
    
    const fragment = new DocumentFragment();
    
    for (const fruit of fruits) {
      const li = document.createElement("li");
      li.textContent = fruit;
      fragment.append(li);
    }
    
    ul.append(fragment);
    
### Result
# MessageChannel
Note: This feature is available in Web Workers.
The `MessageChannel` interface of the Channel Messaging API allows us to create a new message channel and send data through it via its two `MessagePort` properties.
## Constructor
`MessageChannel()`
    
Returns a new `MessageChannel` object with two new `MessagePort` objects.
## Instance properties
`MessageChannel.port1` Read only
    
Returns port1 of the channel.
`MessageChannel.port2` Read only
    
Returns port2 of the channel.
## Example
In the following example, you can see a new channel being created using the `MessageChannel()` constructor.
When the IFrame has loaded, we register an `onmessage` handler for `MessageChannel.port1` and transfer `MessageChannel.port2` to the IFrame using the `window.postMessage` method along with a message.
When a message is received back from the IFrame, the `onMessage` function outputs the message to a paragraph.
    
    const channel = new MessageChannel();
    const output = document.querySelector(".output");
    const iframe = document.querySelector("iframe");
    
    // Wait for the iframe to load
    iframe.addEventListener("load", onLoad);
    
    function onLoad() {
      // Listen for messages on port1
      channel.port1.onmessage = onMessage;
    
      // Transfer port2 to the iframe
      iframe.contentWindow.postMessage("Hello from the main page!", "*", [
        channel.port2,
      ]);
    }
    
    // Handle messages received on port1
    function onMessage(e) {
      output.innerHTML = e.data;
    }
    
For a full working example, see our channel messaging basic demo on GitHub (run it live too).
  * Using channel messaging


# VirtualKeyboard
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `VirtualKeyboard` interface of the VirtualKeyboard API is useful on devices that have on-screen virtual keyboards, such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.
The `VirtualKeyboard` interface makes it possible to opt out of the automatic way browsers handle on-screen virtual keyboards by reducing the height of the viewport to make room for the virtual keyboard. You can prevent the browser from changing the size of the viewport, detect the position and size of the virtual keyboard — adapting the layout of your web page as a follow-up — and programmatically show or hide the virtual keyboard.
You access the `VirtualKeyboard` interface by using `navigator.virtualKeyboard`.
EventTarget  VirtualKeyboard 
## Instance properties
The `VirtualKeyboard` interface inherits properties from its parent, `EventTarget`.
`VirtualKeyboard.boundingRect` Read only Experimental
    
A `DOMRect` that describes the geometry of the virtual keyboard.
`VirtualKeyboard.overlaysContent` Experimental
    
A `Boolean` that defines whether the browser should stop handling the on-screen virtual keyboard.
## Instance methods
The `VirtualKeyboard` interface inherits methods from its parent, `EventTarget`.
`VirtualKeyboard.show()` Experimental
    
Show the virtual keyboard.
`VirtualKeyboard.hide()` Experimental
    
Hide the virtual keyboard.
## Events
`geometrychange` Experimental
    
Fires when the geometry of the on-screen virtual keyboard changes, which happens when the virtual keyboard appears or disappears.
## Example
The following example demonstrates how to opt out of the automatic virtual keyboard behavior, and detect the geometry of the virtual keyboard in the web page:
    
    if ("virtualKeyboard" in navigator) {
      navigator.virtualKeyboard.overlaysContent = true;
    
      navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
        const { x, y, width, height } = event.target.boundingRect;
      });
    }
    
  * The VirtualKeyboard API
  * Full control with the VirtualKeyboard API


# MediaQueryListEvent
The `MediaQueryListEvent` object stores information on the changes that have happened to a `MediaQueryList` object — instances are available as the event object on a function referenced by a `change` event.
Event  MediaQueryListEvent 
## Constructor
`MediaQueryListEvent()`
    
Creates a new `MediaQueryListEvent` instance.
## Instance properties
The `MediaQueryListEvent` interface inherits properties from its parent interface, `Event`.
`MediaQueryListEvent.matches` Read only
    
A boolean value that is `true` if the `document` currently matches the media query list, or `false` if not.
`MediaQueryListEvent.media` Read only
    
A string representing a serialized media query.
## Instance methods
The `MediaQueryListEvent` interface inherits methods from its parent interface, `Event`.
## Examples
    
    const para = document.querySelector("p"); // This is the UI element where to display the text
    const mql = window.matchMedia("(width <= 600px)");
    
    mql.addEventListener("change", (event) => {
      if (event.matches) {
        // The viewport is 600 pixels wide or less
        para.textContent = "This is a narrow screen — less than 600px wide.";
        document.body.style.backgroundColor = "red";
      } else {
        // The viewport is more than 600 pixels wide
        para.textContent = "This is a wide screen — more than 600px wide.";
        document.body.style.backgroundColor = "blue";
      }
    });
    
  * Media queries
  * Using media queries from code
  * `window.matchMedia()`
  * `MediaQueryList`


# RequestInit
The `RequestInit` dictionary of the Fetch API represents the set of options that can be used to configure a fetch request.
You can pass a `RequestInit` object into the `Request()` constructor, or directly into the `fetch()` function call.
You can also construct a `Request` with a `RequestInit`, and pass the `Request` to a `fetch()` call along with another `RequestInit`. If you do this, and the same option is set in both places, then the value passed directly into `fetch()` is used.
## Instance properties
`attributionReporting` Optional Experimental
    
Indicates that you want the request's response to be able to register a JavaScript-based attribution source or attribution trigger. `attributionReporting` is an object containing the following properties:
`eventSourceEligible`
    
A boolean. If set to `true`, the request's response is eligible to register an attribution source. If set to `false`, it isn't.
`triggerEligible`
    
A boolean. If set to `true`, the request's response is eligible to register an attribution trigger. If set to `false`, it isn't.
See the Attribution Reporting API for more details.
`body` Optional
    
The request body contains content to send to the server, for example in a `POST` or `PUT` request. It is specified as an instance of any of the following types:
  * a string
  * `ArrayBuffer`
  * `Blob`
  * `DataView`
  * `File`
  * `FormData`
  * `TypedArray`
  * `URLSearchParams`
  * `ReadableStream`


See Setting a body for more details.
`browsingTopics` Optional Experimental
    
A boolean specifying that the selected topics for the current user should be sent in a `Sec-Browsing-Topics` header with the associated request.
See Using the Topics API for more details.
`cache` Optional
    
The cache mode you want to use for the request. This may be any one of the following values:
`default`
    
The browser looks in its HTTP cache for a response matching the request.
  * If there is a match and it is fresh, it will be returned from the cache.
  * If there is a match but it is stale, the browser will make a conditional request to the remote server. If the server indicates that the resource has not changed, it will be returned from the cache. Otherwise the resource will be downloaded from the server and the cache will be updated.
  * If there is no match, the browser will make a normal request, and will update the cache with the downloaded resource.


`no-store`
    
The browser fetches the resource from the remote server without first looking in the cache, and will not update the cache with the downloaded resource.
`reload`
    
The browser fetches the resource from the remote server without first looking in the cache, but then will update the cache with the downloaded resource.
`no-cache`
    
The browser looks in its HTTP cache for a response matching the request.
  * If there is a match, fresh or stale, the browser will make a conditional request to the remote server. If the server indicates that the resource has not changed, it will be returned from the cache. Otherwise the resource will be downloaded from the server and the cache will be updated.
  * If there is no match, the browser will make a normal request, and will update the cache with the downloaded resource.


`force-cache`
    
The browser looks in its HTTP cache for a response matching the request.
  * If there is a match, fresh or stale, it will be returned from the cache.
  * If there is no match, the browser will make a normal request, and will update the cache with the downloaded resource.


`only-if-cached`
    
The browser looks in its HTTP cache for a response matching the request.  Experimental
  * If there is a match, fresh or stale, it will be returned from the cache.
  * If there is no match, a network error is returned.


The `"only-if-cached"` mode can only be used if the request's `mode` is `"same-origin"`. Cached redirects will be followed if the request's `redirect` property is `"follow"` and the redirects do not violate the `"same-origin"` mode.
`credentials` Optional
    
Controls whether or not the browser sends credentials with the request, as well as whether any `Set-Cookie` response headers are respected. Credentials are cookies, TLS client certificates, or authentication headers containing a username and password. This option may be any one of the following values:
`omit`
    
Never send credentials in the request or include credentials in the response.
`same-origin`
    
Only send and include credentials for same-origin requests.
`include`
    
Always include credentials, even for cross-origin requests.
Including credentials in cross-origin requests can make a site vulnerable to CSRF attacks, so even if `credentials` is set to `include`, the server must also agree to their inclusion by including the `Access-Control-Allow-Credentials` in its response. Additionally, in this situation the server must explicitly specify the client's origin in the `Access-Control-Allow-Origin` response header (that is, `*` is not allowed).
See Including credentials for more details.
Defaults to `same-origin`.
`duplex` Optional Experimental
    
Controls duplex behavior of the request. If this is present it must have the value `half`, meaning that the browser must send the entire request before processing the response.
This option must be present when `body` is a `ReadableStream`.
`headers` Optional
    
Any headers you want to add to your request, contained within a `Headers` object or an object literal whose keys are the names of headers and whose values are the header values.
Many headers are set automatically by the browser and can't be set by a script: these are called Forbidden request headers.
If the `mode` option is set to `no-cors`, you can only set CORS-safelisted request headers.
See Setting headers for more details.
`integrity` Optional
    
Contains the subresource integrity value of the request.
This will be checked when the resource is fetched, just as it would be when the `integrity` attribute is set on a `<script>` element. The browser will compute the hash of the fetched resource using the specified algorithm, and if the result does not match the value specified, the browser will reject the fetch request with a network error.
The format of this option is `<hash-algo>-<hash-source>` where:
  * `<hash-algo>` is one of the following values: `sha256`, `sha384`, or `sha512`
  * `<hash-source>` is the Base64-encoding of the result of hashing the resource with the specified hash algorithm.


Defaults to an empty string.
`keepalive` Optional
    
A boolean. When set to `true`, the browser will not abort the associated request if the page that initiated it is unloaded before the request is complete. This enables a `fetch()` request to send analytics at the end of a session even if the user navigates away from or closes the page.
This has some advantages over using `Navigator.sendBeacon()` for the same purpose. For example, you can use HTTP methods other than `POST`, customize request properties, and access the server response via the fetch `Promise` fulfillment. It is also available in service workers.
The body size for `keepalive` requests is limited to 64 kibibytes.
Defaults to `false`.
`method` Optional
    
The request method.
Defaults to `GET`.
`mode` Optional
    
Sets cross-origin behavior for the request. One of the following values:
`same-origin`
    
Disallows cross-origin requests. If a `same-origin` request is sent to a different origin, the result is a network error.
`cors`
    
If the request is cross-origin then it will use the Cross-Origin Resource Sharing (CORS) mechanism. Only CORS-safelisted response headers are exposed in the response.
`no-cors`
    
Disables CORS for cross-origin requests. This option comes with the following restrictions:
  * The method may only be one of `HEAD`, `GET` or `POST`.
  * The headers may only be CORS-safelisted request headers, with the additional restriction that the `Range` header is also not allowed. This also applies to any headers added by service workers.
  * The response is opaque, meaning that its headers and body are not available to JavaScript, and its status code is always `0`.


The main application for `no-cors` is for a service worker: although the response to a `no-cors` request can't be read by JavaScript, it can be cached by a service worker and then used as a response to an intercepted fetch request. Note that in this situation you don't know whether the request succeeded or not, so you should adopt a caching strategy which enables the cached response to be updated from the network (such as cache first with cache refresh).
`navigate`
    
Used only by HTML navigation. A `navigate` request is created only while navigating between documents.
See Making cross-origin requests for more details.
Defaults to `cors`.
`priority` Optional
    
Specifies the priority of the fetch request relative to other requests of the same type. Must be one of the following:
`high`
    
A high priority fetch request relative to other requests of the same type.
`low`
    
A low priority fetch request relative to other requests of the same type.
`auto`
    
No user preference for the fetch priority. It is used if no value is set or if an invalid value is set.
Defaults to `auto`.
`redirect` Optional
    
Determines the browser's behavior in case the server replies with a redirect status. One of the following values:
`follow`
    
Automatically follow redirects.
`error`
    
Reject the promise with a network error when a redirect status is returned.
`manual`
    
Return a response with almost all fields filtered out, to enable a service worker to store the response and later replay it.
Defaults to `follow`.
`referrer` Optional
    
A string specifying the value to use for the request's `Referer` header. One of the following:
A same-origin relative or absolute URL
    
Set the `Referer` header to the given value. Relative URLs are resolved relative to the URL of the page that made the request.
An empty string
    
Omit the `Referer` header.
`about:client`
    
Set the `Referer` header to the default value for the context of the request (for example, the URL of the page that made the request).
Defaults to `about:client`.
`referrerPolicy` Optional
    
A string that sets a policy for the `Referer` header. The syntax and semantics of this option are exactly the same as for the `Referrer-Policy` header.
`signal` Optional
    
An `AbortSignal`. If this option is set, the request can be canceled by calling `abort()` on the corresponding `AbortController`.
## Examples
>
### Passing options into `fetch()`
In this example we pass the `method`, `body`, and `headers` options directly into the `fetch()` method call:
    
    async function post() {
      const response = await fetch("https://example.org/post", {
        method: "POST",
        body: JSON.stringify({ username: "example" }),
        headers: {
          "Content-Type": "application/json",
        },
      });
    
      console.log(response.status);
    }
    
### Passing options into the `Request()` constructor
In this example we create a `Request`, passing the same set of options into its constructor, and then pass the request into `fetch()`:
    
    async function post() {
      const request = new Request("https://example.org/post", {
        method: "POST",
        body: JSON.stringify({ username: "example" }),
        headers: {
          "Content-Type": "application/json",
        },
      });
    
      const response = await fetch(request);
    
      console.log(response.status);
    }
    
### Passing options into both `Request()` and `fetch()`
In this example we create a `Request`, passing the `method`, `headers`, and `body` options into its constructor. We then pass the request into `fetch()` along with `body` and `referrer` options:
    
    async function post() {
      const request = new Request("https://example.org/post", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ username: "example1" }),
      });
    
      const response = await fetch(request, {
        body: JSON.stringify({ username: "example2" }),
        referrer: "",
      });
    
      console.log(response.status);
    }
    
In this case the request will be sent with the following options:
  * `method: "POST"`
  * `headers: {"Content-Type": "application/json"}`
  * `body: '{"username":"example2"}'`
  * `referrer: ""`


  * Using Fetch
  * ServiceWorker API
  * HTTP access control (CORS)
  * HTTP


# MediaStreamTrackEvent
The `MediaStreamTrackEvent` interface of the Media Capture and Streams API represents events which indicate that a `MediaStream` has had tracks added to or removed from the stream through calls to Media Capture and Streams API methods. These events are sent to the stream when these changes occur.
Event  MediaStreamTrackEvent 
The events based on this interface are `addtrack` and `removetrack`.
## Constructor
`MediaStreamTrackEvent()`
    
Constructs a new `MediaStreamTrackEvent` with the specified configuration.
## Instance properties
Also inherits properties from its parent interface, `Event`.
`MediaStreamTrackEvent.track` Read only
    
Returns a `MediaStreamTrack` object representing the track associated with the event.
## Instance methods
Also inherits methods from its parent interface, `Event`.
  * `MediaStream`: `addtrack` and `removetrack` events
  * `MediaStreamTrack`
  * Media Capture and Streams API


# PerformanceScriptTiming
The `PerformanceScriptTiming` interface is specified in the Long Animation Frames API and provides metrics on individual scripts that contribute to long animation frames (LoAFs).
## Description
Long animation frames (LoAFs) are rendering updates that are delayed beyond 50ms. LoAFs can result in slow user interface (UI) updates, making controls appear unresponsive and causing janky (non-smooth) animated effects and scrolling. This often leads to user frustration.
The `PerformanceScriptTiming` interface (instances of which are accessed via the `PerformanceLongAnimationFrameTiming.scripts` property) provides the following granular set of information on individual scripts that contribute to LoAFs, allowing developers to narrow down their root causes:
  * A detailed set of timestamps for each script.
  * The identity and type of the invoker, i.e., the feature that, when invoked, ran the script.
  * Detailed information on each script source file, including the URL, and the function name and character position that contributed to the LoAF.


`PerformanceScriptTiming` inherits from `PerformanceEntry`.
PerformanceEntry  PerformanceScriptTiming 
## Instance properties
This interface extends the following `PerformanceEntry` properties for long animation frame performance entries:
`PerformanceEntry.duration` Read only Experimental
    
Returns a `DOMHighResTimeStamp` representing the elapsed time in milliseconds between the start and end of the script's execution.
`PerformanceEntry.entryType` Read only Experimental
    
Returns the entry type, which is always `"script"`.
`PerformanceEntry.name` Read only Experimental
    
Returns the entry name, which is always `"script"`.
`PerformanceEntry.startTime` Read only Experimental
    
Returns a `DOMHighResTimeStamp` representing the time when the script execution started, in milliseconds.
This interface also supports the following properties:
`PerformanceScriptTiming.executionStart` Read only Experimental
    
Returns a `DOMHighResTimeStamp` indicating the time when the script compilation finished and execution started.
`PerformanceScriptTiming.forcedStyleAndLayoutDuration` Read only Experimental
    
Returns a `DOMHighResTimeStamp` indicating the total time spent, in milliseconds, by the script processing forced layout/style. See Avoid layout thrashing to understand what causes this.
`PerformanceScriptTiming.invoker` Read only Experimental
    
Returns a string value indicating the identity of the feature that, when invoked, ran the script.
`PerformanceScriptTiming.invokerType` Read only Experimental
    
Returns a string value indicating the type of feature that, when invoked, ran the script.
`PerformanceScriptTiming.pauseDuration` Read only Experimental
    
Returns a `DOMHighResTimeStamp` indicating the total time, in milliseconds, spent by the script on "pausing" synchronous operations (for example, `Window.alert()` calls or synchronous `XMLHttpRequest`s).
`PerformanceScriptTiming.sourceCharPosition` Read only Experimental
    
Returns a number representing the script character position of the script feature that contributed to the LoAF.
`PerformanceScriptTiming.sourceFunctionName` Read only Experimental
    
Returns a string representing the name of the function that contributed to the LoAF.
`PerformanceScriptTiming.sourceURL` Read only Experimental
    
Returns a string representing the URL of the script.
`PerformanceScriptTiming.window` Read only Experimental
    
Returns a reference to a `Window` object representing the `window` of the container (i.e., either the top-level document or an `<iframe>`) in which the LoAF-causing script was executed.
`PerformanceScriptTiming.windowAttribution` Read only Experimental
    
Returns an enumerated value describing the relationship of the container (i.e., either the top-level document or an `<iframe>`) in which the LoAF-causing script was executed, relative to the window running the current document.
## Instance methods
`PerformanceScriptTiming.toJSON()` Experimental
    
Returns a JSON representation of the `PerformanceScriptTiming` object.
## Examples
See Long animation frame timing for examples related to the Long Animation Frames API.
  * Long animation frame timing
  * `PerformanceLongAnimationFrameTiming`


# BackgroundFetchRegistration
Note: This feature is available in Web Workers.
The `BackgroundFetchRegistration` interface of the Background Fetch API represents an individual background fetch.
A `BackgroundFetchRegistration` instance is returned by the `BackgroundFetchManager.fetch()` or `BackgroundFetchManager.get()` methods, and therefore there has no constructor.
EventTarget  BackgroundFetchRegistration 
## Instance properties
Also inherits properties from its parent, `EventTarget`.
`BackgroundFetchRegistration.id` Read only Experimental
    
A string containing the background fetch's ID.
`BackgroundFetchRegistration.uploadTotal` Read only Experimental
    
A `number` containing the total number of bytes to be uploaded.
`BackgroundFetchRegistration.uploaded` Read only Experimental
    
A `number` containing the size in bytes successfully sent, initially `0`.
`BackgroundFetchRegistration.downloadTotal` Read only Experimental
    
A `number` containing the total size in bytes of this download. This is the value set when the background fetch was registered, or `0`.
`BackgroundFetchRegistration.downloaded` Read only Experimental
    
A `number` containing the size in bytes that has been downloaded, initially `0`.
`BackgroundFetchRegistration.result` Read only Experimental
    
Returns an empty string initially, on completion either the string `"success"` or `"failure"`.
`BackgroundFetchRegistration.failureReason` Read only Experimental
    
A string with a value that indicates a reason for a background fetch failure. Can be one of the following values: `""`, `"aborted"`, `"bad-status"`, `"fetch-error"`, `"quota-exceeded"`, `"download-total-exceeded"`.
`BackgroundFetchRegistration.recordsAvailable` Read only Experimental
    
A `boolean` indicating whether the `recordsAvailable` flag is set.
## Instance methods
Also inherits methods from its parent, `EventTarget`.
`BackgroundFetchRegistration.abort()` Experimental
    
Aborts the background fetch. Returns a `Promise` that resolves with `true` if the fetch was successfully aborted.
`BackgroundFetchRegistration.match()` Experimental
    
Returns a single `BackgroundFetchRecord` object which is the first match for the arguments.
`BackgroundFetchRegistration.matchAll()` Experimental
    
Returns a `Promise` that resolves with an array of `BackgroundFetchRecord` objects containing requests and responses.
## Events
Also inherits events from its parent, `EventTarget`.
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`progress` Experimental
    
Fired when there is a change to any of the following properties: `uploaded`, `downloaded`, `result` or `failureReason`.
## Examples
The following code creates a `BackGroundFetchRegistration` as `bgFetch`, with an `id` of `"my-fetch"`.
    
    navigator.serviceWorker.ready.then(async (swReg) => {
      const bgFetch = await swReg.backgroundFetch.fetch(
        "my-fetch",
        ["/ep-5.mp3", "ep-5-artwork.jpg"],
        {
          title: "Episode 5: Interesting things.",
          icons: [
            {
              sizes: "300x300",
              src: "/ep-5-icon.png",
              type: "image/png",
            },
          ],
          downloadTotal: 60 * 1024 * 1024,
        },
      );
    });
    
Logging the `id` to the console returns `"my-fetch"`.
    
    console.log(bgFetch.id); // "my-fetch"
    
The `match()` method can be used to find a particular `BackgroundFetchRecord` from those that are part of the registration.
    
    bgFetch.match("/ep-5.mp3").then(async (record) => {
      if (!record) {
        console.log("No record found");
        return;
      }
    
      console.log(`Here's the request`, record.request);
      const response = await record.responseReady;
      console.log(`And here's the response`, response);
    });
    
# DedicatedWorkerGlobalScope
Note: This feature is only available in Dedicated Web Workers.
The `DedicatedWorkerGlobalScope` object (the `Worker` global scope) is accessible through the `self` keyword. Some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the JavaScript Reference. See also: Functions available to workers.
EventTarget  WorkerGlobalScope  DedicatedWorkerGlobalScope 
## Instance properties
This interface inherits properties from the `WorkerGlobalScope` interface, and its parent `EventTarget`.
`DedicatedWorkerGlobalScope.name` Read only
    
The name that the `Worker` was (optionally) given when it was created using the `Worker()` constructor. This is mainly useful for debugging purposes.
## Instance methods
This interface inherits methods from the `WorkerGlobalScope` interface, and its parent `EventTarget`.
`DedicatedWorkerGlobalScope.close()`
    
Discards any tasks queued in the `WorkerGlobalScope`'s event loop, effectively closing this particular scope.
`DedicatedWorkerGlobalScope.postMessage()`
    
Sends a message — which can consist of `any` JavaScript object — to the parent document that first spawned the worker.
`DedicatedWorkerGlobalScope.cancelAnimationFrame()`
    
Cancels an animation frame request previously scheduled through a call to `requestAnimationFrame()`.
`DedicatedWorkerGlobalScope.requestAnimationFrame()`
    
Perform an animation frame request and call a user-supplied callback function before the next repaint.
## Events
Listen to this event using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`message`
    
Fired when the worker receives a message from its parent.
`messageerror`
    
Fired when a worker receives a message that can't be deserialized.
`rtctransform`
    
Fired when an encoded video or audio frame has been queued for processing by a WebRTC Encoded Transform.
  * `Worker`
  * `WorkerGlobalScope`
  * Using web workers
  * Functions available to workers


# MIDIInputMap
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `MIDIInputMap` read-only interface of the Web MIDI API provides the set of MIDI input ports that are currently available.
A `MIDIInputMap` instance is a read-only `Map`-like object, in which each key is the ID string for MIDI input, and the associated value is the corresponding `MIDIInput` object.
# SyncEvent
Note: This feature is only available in Service Workers.
The `SyncEvent` interface of the Background Synchronization API represents a sync action that is dispatched on the `ServiceWorkerGlobalScope` of a ServiceWorker.
This interface inherits from the `ExtendableEvent` interface.
Event  ExtendableEvent  SyncEvent 
## Constructor
`SyncEvent()`
    
Creates a new `SyncEvent` object.
## Instance properties
Inherits properties from its parent, `ExtendableEvent` and `Event`.
`SyncEvent.tag` Read only
    
Returns the developer-defined identifier for this `SyncEvent`.
`SyncEvent.lastChance` Read only
    
Returns `true` if the user agent will not make further synchronization attempts after the current attempt.
## Instance methods
Inherits methods from its parent, `ExtendableEvent` and `Event`.
None.
# SVGFEConvolveMatrixElement
The `SVGFEConvolveMatrixElement` interface corresponds to the `<feConvolveMatrix>` element.
EventTarget  Node  Element  SVGElement  SVGFEConvolveMatrixElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFEConvolveMatrixElement.bias` Read only
    
An `SVGAnimatedNumber` corresponding to the `bias` attribute of the given element.
`SVGFEConvolveMatrixElement.divisor` Read only
    
An `SVGAnimatedNumber` corresponding to the `divisor` attribute of the given element.
`SVGFEConvolveMatrixElement.edgeMode` Read only
    
An `SVGAnimatedEnumeration` corresponding to the `edgeMode` attribute of the given element. Takes one of the `SVG_EDGEMODE_*` constants defined on this interface.
`SVGFEConvolveMatrixElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFEConvolveMatrixElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFEConvolveMatrixElement.kernelMatrix` Read only
    
An `SVGAnimatedNumberList` corresponding to the `kernelMatrix` attribute of the given element.
`SVGFEConvolveMatrixElement.kernelUnitLengthX` Read only
    
An `SVGAnimatedNumber` corresponding to the `kernelUnitLength` attribute of the given element.
`SVGFEConvolveMatrixElement.kernelUnitLengthY` Read only
    
An `SVGAnimatedNumber` corresponding to the `kernelUnitLength` attribute of the given element.
`SVGFEConvolveMatrixElement.orderX` Read only
    
An `SVGAnimatedInteger` corresponding to the `order` attribute of the given element.
`SVGFEConvolveMatrixElement.orderY` Read only
    
An `SVGAnimatedInteger` corresponding to the `order` attribute of the given element.
`SVGFEConvolveMatrixElement.preserveAlpha` Read only
    
An `SVGAnimatedBoolean` corresponding to the `preserveAlpha` attribute of the given element.
`SVGFEConvolveMatrixElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFEConvolveMatrixElement.targetX` Read only
    
An `SVGAnimatedInteger` corresponding to the `targetX` attribute of the given element.
`SVGFEConvolveMatrixElement.targetY` Read only
    
An `SVGAnimatedInteger` corresponding to the `targetY` attribute of the given element.
`SVGFEConvolveMatrixElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFEConvolveMatrixElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFEConvolveMatrixElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
## Static properties
`SVG_EDGEMODE_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_EDGEMODE_DUPLICATE` (1)
    
Corresponds to the value `duplicate`.
`SVG_EDGEMODE_WRAP` (2)
    
Corresponds to the value `wrap`.
`SVG_EDGEMODE_NONE` (3)
    
Corresponds to the value `none`.
  * `<feConvolveMatrix>`


# Server-sent events
Note: This feature is available in Web Workers.
Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events \+ data inside the web page.
## Concepts and usage
To learn how to use server-sent events, see our article Using server-sent events.
## Interfaces
`EventSource`
    
Defines all the features that handle connecting to a server, receiving events/data, errors, closing a connection, etc.
## Examples
  * Simple SSE demo using PHP

>
### Tools
  * Mercure: a real-time communication protocol (publish-subscribe) built on top of SSE
  * Transmit: a native opinionated Server-Sent-Event (SSE) module built for AdonisJS
  * EventSource polyfill for Node.js
  * Remy Sharp's EventSource polyfill
  * Yaffle's EventSource polyfill
  * Rick Waldron's jquery plugin
  * intercooler.js declarative SSE support


### Related Topics
  * Learn: Making network requests with JavaScript
  * JavaScript
  * WebSockets


### Other resources
  * Creating a wall/feed social application powered by server-sent events and its code on GitHub.


# SVGTransformList
The `SVGTransformList` interface defines a list of `SVGTransform` objects.
An `SVGTransformList` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
An `SVGTransformList` is indexable and can be accessed like an array.
## Instance properties
`numberOfItems`
    
The number of items in the list.
`length`
    
The number of items in the list.
## Instance methods
`clear()`
    
Clears all existing current items from the list, with the result being an empty list.
`initialize()`
    
Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. The return value is the item inserted into the list.
`getItem()`
    
Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list. The first item is number `0`.
`insertItemBefore()`
    
Inserts a new item into the list at the specified position. The first item is number `0`. If `newItem` is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to insert before is before the removal of the item. If the `index` is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to `numberOfItems`, then the new item is appended to the end of the list.
`replaceItem()`
    
Replaces an existing item in the list with a new item. If `newItem` is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is before the removal of the item.
`removeItem()`
    
Removes an existing item from the list.
`appendItem()`
    
Inserts a new item at the end of the list. If `newItem` is already in a list it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
`createSVGTransformFromMatrix()`
    
Creates an `SVGTransform` object which is initialized to transform of type `SVG_TRANSFORM_MATRIX` and whose values are the given matrix. The values from the parameter matrix are copied, the matrix parameter is not adopted as `SVGTransform::matrix`.
`consolidate()`
    
Consolidates the list of separate `SVGTransform` objects by multiplying the equivalent transformation matrices together to result in a list consisting of a single `SVGTransform` object of type `SVG_TRANSFORM_MATRIX`. The consolidation operation creates new `SVGTransform` object as the first and only item in the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.
## Examples
>
### Using multiple SVGTransform objects
In this example we create a function that will apply three different transformations to the SVG element that has been clicked on. In order to do this we create a separate `SVGTransform` object for each transformation — such as `translate`, `rotate`, and `scale`. We apply multiple transformation by appending the transform object to the `SVGTransformList` associated with an SVG element.
    
    <svg
      id="my-svg"
      viewBox="0 0 300 280"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1">
      <desc>
        Example showing how to transform svg elements that using SVGTransform
        objects
      </desc>
      <polygon
        fill="orange"
        stroke="black"
        stroke-width="5"
        points="100,225 100,115 130,115 70,15 70,15 10,115 40,115 40,225" />
      <rect
        x="200"
        y="100"
        width="100"
        height="100"
        fill="yellow"
        stroke="black"
        stroke-width="5" />
      <text x="40" y="250" font-family="Verdana" font-size="16" fill="green">
        Click on a shape to transform it
      </text>
    </svg>
    
    
    function transformMe(evt) {
      // svg root element to access the createSVGTransform() function
      const svgRoot = evt.target.parentNode;
      // SVGTransformList of the element that has been clicked on
      const tfmList = evt.target.transform.baseVal;
    
      // Create a separate transform object for each transform
      const translate = svgRoot.createSVGTransform();
      translate.setTranslate(50, 5);
      const rotate = svgRoot.createSVGTransform();
      rotate.setRotate(10, 0, 0);
      const scale = svgRoot.createSVGTransform();
      scale.setScale(0.8, 0.8);
    
      // apply the transformations by appending the SVGTransform objects to the SVGTransformList associated with the element
      tfmList.appendItem(translate);
      tfmList.appendItem(rotate);
      tfmList.appendItem(scale);
    }
    
    document.querySelector("polygon").addEventListener("click", transformMe);
    document.querySelector("rect").addEventListener("click", transformMe);
    
# Touch
The `Touch` interface represents a single contact point on a touch-sensitive device. The contact point is commonly a finger or stylus and the device may be a touchscreen or trackpad.
The `Touch.radiusX`, `Touch.radiusY`, and `Touch.rotationAngle` describe the area of contact between the user and the screen, the touch area. This can be helpful when dealing with imprecise pointing devices such as fingers. These values are set to describe an ellipse that as closely as possible matches the entire area of contact (such as the user's fingertip).
Note: Many of the properties' values are hardware-dependent; for example, if the device doesn't have a way to detect the amount of pressure placed on the surface, the `force` value will always be 0. This may also be the case for `radiusX` and `radiusY`; if the hardware reports only a single point, these values will be 1.
## Constructor
`Touch()`
    
Creates a Touch object.
## Instance properties
This interface has no parent, and doesn't inherit or implement other properties.
### Basic properties
`Touch.identifier` Read only
    
Returns a unique identifier for this `Touch` object. A given touch point (say, by a finger) will have the same identifier for the duration of its movement around the surface. This lets you ensure that you're tracking the same touch all the time.
`Touch.screenX` Read only
    
Returns the X coordinate of the touch point relative to the left edge of the screen.
`Touch.screenY` Read only
    
Returns the Y coordinate of the touch point relative to the top edge of the screen.
`Touch.clientX` Read only
    
Returns the X coordinate of the touch point relative to the left edge of the browser viewport, not including any scroll offset.
`Touch.clientY` Read only
    
Returns the Y coordinate of the touch point relative to the top edge of the browser viewport, not including any scroll offset.
`Touch.pageX` Read only
    
Returns the X coordinate of the touch point relative to the left edge of the document. Unlike `clientX`, this value includes the horizontal scroll offset, if any.
`Touch.pageY` Read only
    
Returns the Y coordinate of the touch point relative to the top of the document. Unlike `clientY`, this value includes the vertical scroll offset, if any.
`Touch.target` Read only
    
Returns the `Element` on which the touch point started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document.
### Touch area
`Touch.radiusX` Read only
    
Returns the X radius of the ellipse that most closely circumscribes the area of contact with the screen. The value is in pixels of the same scale as `screenX`.
`Touch.radiusY` Read only
    
Returns the Y radius of the ellipse that most closely circumscribes the area of contact with the screen. The value is in pixels of the same scale as `screenY`.
`Touch.rotationAngle` Read only
    
Returns the angle (in degrees) that the ellipse described by radiusX and radiusY must be rotated, clockwise, to most accurately cover the area of contact between the user and the surface.
`Touch.force` Read only
    
Returns the amount of pressure being applied to the surface by the user, as a `float` between `0.0` (no pressure) and `1.0` (maximum pressure).
## Instance methods
This interface has no methods and no parent, and doesn't inherit or implement any methods.
  * Touch events
  * `Document.createTouch()`


# CSSUnitValue
The `CSSUnitValue` interface of the CSS Typed Object Model API represents values that contain a single unit type. For example, "42px" would be represented by a `CSSNumericValue`.
CSSStyleValue  CSSNumericValue  CSSUnitValue 
## Constructor
`CSSUnitValue()`
    
Creates a new `CSSUnitValue` object.
## Instance properties
`CSSUnitValue.value`
    
Returns a double indicating the number of units.
`CSSUnitValue.unit`
    
Returns a string indicating the type of unit.
## Static methods
The interface may also inherit methods from its parent interface, `CSSNumericValue`.
## Instance methods
The interface may also inherit methods from its parent interface, `CSSNumericValue`.
## Examples
The following shows a method of creating a `CSSPositionValue` from individual `CSSUnitValue` constructors.
    
    let pos = new CSSPositionValue(
      new CSSUnitValue(5, "px"),
      new CSSUnitValue(10, "px"),
    );
    
# WebOTP API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The WebOTP API provides a streamlined user experience for web apps to verify that a phone number belongs to a user when using it as a sign-in factor. WebOTP is an extension of the Credential Management API.
The verification is done via a two-step process:
  1. The app client requests a one-time password (OTP), which is obtained from a specially-formatted SMS message sent by the app server.
  2. JavaScript is used to enter the OTP into a validation form on the app client and it is submitted back to the server to verify that it matches what was originally sent in the SMS.


## Concepts and usage
Phone numbers are often used as a way to identify the user of an app. An SMS is frequently deployed to verify that the number belongs to the user. The SMS typically contains an OTP that the user is required to copy and paste into a form in the app to verify that they own the number. This is a somewhat clunky user experience.
OTP use cases include:
  * Improving sign-in security by using a phone number as an extra factor (i.e., for two-factor authentication (2FA) or multifactor authentication (MFA)).
  * Verifying sensitive actions such as payments.


The WebOTP API allows web apps to expedite this validation process by copying the OTP from the SMS and passing it to the app automatically after the user has provided consent (most native platforms have an equivalent API).
Note that an OTP is bound to the sending domain. This is a useful security constraint for verifying that the OTP is coming from the right source, which can mitigate the risk of phishing attacks during day-to-day reauthentication.
### Security concerns with SMS OTPs
SMS OTPs are useful for verifying phone numbers, and using SMS for a second factor is certainly better than having no second factor. In some regions, other identifiers such as email addresses and authenticators are not widely-used, so SMS OTPs are very common.
However, SMSes aren't that secure. Attackers can spoof an SMS and hijack a person's phone number. Carriers can recycle phone numbers to new users after an account is closed.
You are, therefore, recommended to use a stronger form of authentication if possible, such as a Web Authentication API-based solution involving a password and security key or a passkey.
## How does the WebOTP API work?
The process works like so:
  1. At the point where phone number verification is required, an app client will ask a user to enter their phone number into a form, which is then submitted to the app server.
  2. The app client then invokes `navigator.credentials.get()` with an `otp` option specifying a `transport` type of `"sms"`. This triggers a request for an OTP from the underlying system, the source of which will be a specially-formatted SMS message (containing the OTP and the app's domain) received from the app server. The `get()` call is `Promise`-based and waits for the SMS message to be received.
  3. The app server sends the SMS message to the specified phone number. This must be done just after Step 2 has occurred.
  4. When the SMS is received on the device, provided it contains the app's domain, the browser will ask the user if they consent to the OTP being retrieved/used. Chrome, for example, displays a dialog asking them for their permission to retrieve the OTP from the SMS; other browsers may handle it differently. If they do consent, the `get()` call will fulfill with an `OTPCredential` object containing the OTP.
  5. You can then use the OTP in any way you wish. Typical usage would be to set it as the value of the validation form on the app client and then submit the form, making the process as seamless as possible.
  6. The app server will then verify that the OTP sent back to it matches what it originally sent in the SMS and, if so, complete the process (for example, sign the user in).


### SMS message format
A typical SMS message looks like so:
    
    Your verification code is 123456.
    
    @www.example.com #123456
    
  * The first line and second blank line are optional and are for human readability.
  * The last line is mandatory. It must be the last line if there are others present, and must consist of: 
    * The domain part of the URL of the website that invoked the API, preceded by a `@`.
    * Followed by a space.
    * Followed by the OTP, preceded by a pound sign (`#`).


Note: The provided domain value must not include a URL schema, port, or other URL features not shown above.
If the `get()` method is invoked by a third-party site embedded in an `<iframe>`, the SMS structure should be:
    
    Your verification code is 123456.
    
    @top-level.example.com #123456 @embedded.com
    
In this case, the last line must consist of:
  * The domain part of the top-level domain, preceded by a `@`.
  * Followed by a space.
  * Followed by the OTP, preceded by a pound sign (`#`).
  * Followed by a space.
  * Followed by the domain part of the embedded domain, preceded by a `@`.


## Controlling access to the API
The availability of WebOTP can be controlled using a Permissions Policy specifying a `otp-credentials` directive. This directive has a default allowlist value of `"self"`, meaning that by default, these methods can be used in top-level document contexts.
You could specify a directive allowing the use of WebOTP in a specific cross-origin domain (i.e., inside an `<iframe>`) like this:
    
    Permissions-Policy: otp-credentials=(self "https://embedded.com")
    
Or you could specify it directly on the `<iframe>` like this:
    
    <iframe src="https://embedded.com/..." allow="otp-credentials"> ... </iframe>
    
Note: Where a policy forbids use of WebOTP `get()`, `promises` returned by it will reject with a `SecurityError` `DOMException`.
## Interfaces
`OTPCredential`
    
Returned when a WebOTP `get()` call fulfills; includes a `code` property that contains the retrieved OTP.
### Extensions to other interfaces
`CredentialsContainer.get()`, the `otp` option
    
Calling `get()` with an `otp` option instructs the user agent to attempt to retrieve an OTP from the underlying system's SMS app.
## Examples
In this example, when an SMS message arrives and the user grants permission, an `OTPCredential` object is returned with an OTP. This password is then prefilled into the verification form field, and the form is submitted.
Try this demo using a phone.
The form field includes an `autocomplete` attribute with the value of `one-time-code`. This is not needed for the WebOTP API to work, but it is worth including. As a result, Safari will prompt the user to autofill this field with the OTP when a correctly-formatted SMS is received, even though the WebOTP API isn't fully supported in Safari.
    
    <input type="text" autocomplete="one-time-code" inputmode="numeric" />
    
The JavaScript is as follows:
    
    // Detect feature support via OTPCredential availability
    if ("OTPCredential" in window) {
      const input = document.querySelector('input[autocomplete="one-time-code"]');
      if (!input) return;
      // Set up an AbortController to use with the OTP request
      const ac = new AbortController();
      const form = input.closest("form");
      if (form) {
        // Abort the OTP request if the user attempts to submit the form manually
        form.addEventListener("submit", (e) => {
          ac.abort();
        });
      }
      // Request the OTP via get()
      navigator.credentials
        .get({
          otp: { transport: ["sms"] },
          signal: ac.signal,
        })
        .then((otp) => {
          // When the OTP is received by the app client, enter it into the form
          // input and submit the form automatically
          input.value = otp.code;
          if (form) form.submit();
        })
        .catch((err) => {
          console.error(err);
        });
    }
    
Another good use for the `AbortController` is to cancel the `get()` request after a certain amount of time:
    
    setTimeout(() => {
      // abort after 30 seconds
      ac.abort();
    }, 30 * 1000);
    
If the user becomes distracted or navigates somewhere else, it is good to cancel the request so that they don't get presented with a permission prompt that is no longer relevant to them.
  * Verify phone numbers on the web with WebOTP on developer.chrome.com (2023)
  * Fill OTP forms within cross-origin iframes with WebOTP API


# The WebSocket API (WebSockets)
Note: This feature is available in Web Workers.
The WebSocket API makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive responses without having to poll the server for a reply.
The WebSocket API provides two alternative mechanisms for creating and using web socket connections: the `WebSocket` interface and the `WebSocketStream` interface.
  * The `WebSocket` interface is stable and has good browser and server support. However it doesn't support backpressure. As a result, when messages arrive faster than the application can process them it will either fill up the device's memory by buffering those messages, become unresponsive due to 100% CPU usage, or both.
  * The `WebSocketStream` interface is a `Promise`-based alternative to `WebSocket`. It uses the Streams API to handle receiving and sending messages, meaning that socket connections can take advantage of stream backpressure automatically, regulating the speed of reading or writing to avoid bottlenecks in the application. However, `WebSocketStream` is non-standard and currently only supported in one rendering engine.


Additionally, the WebTransport API is expected to replace the WebSocket API for many applications. WebTransport is a versatile, low-level API that provides backpressure and many other features not supported by either `WebSocket` or `WebSocketStream`, such as unidirectional streams, out-of-order delivery, and unreliable data transmission via datagrams. WebTransport is more complex to use than WebSockets and its cross-browser support is not as wide, but it enables the implementation of sophisticated solutions. If standard WebSocket connections are a good fit for your use case and you need wide browser compatibility, you should employ the WebSockets API to get up and running quickly. However, if your application requires a non-standard custom solution, then you should use the WebTransport API.
Note: If a page has an open WebSocket connection, the browser may not add it to the bfcache. It's therefore good practice to close the connection when the user has finished with the page. See working with the bfcache.
## Interfaces
`WebSocket`
    
The primary interface for connecting to a WebSocket server and then sending and receiving data on the connection.
`WebSocketStream` Non-standard
    
Promise-based interface for connecting to a WebSocket server; uses streams to send and receive data on the connection.
`CloseEvent`
    
The event sent by the WebSocket object when the connection closes.
`MessageEvent`
    
The event sent by the WebSocket object when a message is received from the server.
## Related HTTP headers
The HTTP headers are used in the WebSocket handshake:
`Sec-WebSocket-Key`
    
An HTTP request header that contains a nonce from the client. This is used in the WebSocket opening handshake to verify that the client explicitly intends to open a WebSocket. It is added automatically by the browser.
`Sec-WebSocket-Accept`
    
An HTTP response header used in the WebSocket opening handshake to indicate that the server is willing to upgrade to a WebSocket connection. The value in the directive is calculated from the value of `Sec-WebSocket-Key` in the corresponding request.
`Sec-WebSocket-Version`
    
An HTTP header that in requests indicates the version of the WebSocket protocol understood by the client. In responses, it is sent only if the requested protocol version is not supported by the server, and lists the versions that the server supports.
`Sec-WebSocket-Protocol`
    
An HTTP header that in requests indicates the sub-protocols supported by the client in preferred order. In responses, it indicates the sub-protocol selected by the server from the client's preferences.
`Sec-WebSocket-Extensions`
    
An HTTP header that in requests indicates the WebSocket extensions supported by the client in preferred order. In responses, it indicates the extension selected by the server from the client's preferences.
## Guides
  * Writing WebSocket client applications
  * Writing WebSocket servers
  * Writing a WebSocket server in C#
  * Writing a WebSocket server in Java
  * Writing a WebSocket server in JavaScript (Deno)
  * Using WebSocketStream to write a client


## Tools
  * AsyncAPI: A specification for describing event-driven architectures based on protocols like WebSocket. You can use it to describe WebSocket-based APIs just as you would describe REST APIs with the OpenAPI specification. Learn why you should consider using AsyncAPI with WebSocket and how to do so.
  * µWebSockets: Highly scalable WebSocket server and client implementation for C++11 and Node.js.
  * Socket.IO: A long polling/WebSocket based third party transfer protocol for Node.js.
  * SocketCluster: A pub/sub WebSocket framework for Node.js with a focus on scalability.
  * WebSocket-Node: A WebSocket server API implementation for Node.js.
  * Total.js: Web application framework for Node.js (Example: WebSocket chat)
  * SignalR: SignalR will use WebSockets under the covers when it's available, and gracefully fallback to other techniques and technologies when it isn't, while your application code stays the same.
  * Caddy: A web server capable of proxying arbitrary commands (stdin/stdout) as a websocket.
  * ws: a popular WebSocket client & server library for Node.js.
  * cowboy: Cowboy is a small, fast and modern HTTP server for Erlang/OTP with WebSocket support.
  * ZeroMQ: ZeroMQ is embeddable networking library that carries messages across in-process, IPC, TCP, UDP, TIPC, multicast and WebSocket.
  * WebSocket King: A client tool to help develop, test and work with WebSocket servers.
  * PHP WebSocket Server: Server written in PHP to handle connections via websockets `wss://` or `ws://` and normal sockets over `ssl://`, `tcp://`
  * Django Channels: Django library that adds support for WebSockets (and other protocols that require long running asynchronous connections).
  * (Phoenix) Channels: Scalable real-time communication using WebSocket in Elixir Phoenix framework.
  * Phoenix LiveView: Real-time interactive web experiences through WebSocket in Elixir Phoenix framework.
  * Flask-SocketIO: gives Flask applications access to low latency bi-directional communications between the clients and the server.
  * Gorilla WebSocket: Gorilla WebSocket is a Go implementation of the WebSocket protocol.

>
### api.WebSocket
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`WebSocket` 5 12 117–11 12.1 5 18 147–14 12.1 4.2 1.0 4.4 4.2  
`WebSockets_API` 5 12 117–11Message size limited to 16 MB (see bug 711205). 12.1 5 18 147–14Message size limited to 16 MB (see bug 711205). 12.1 4.2 1.0 4.4 4.2  
`binaryType` 15 12 11 12.1 6 18 14 12.1 6 1.0 4.4 6  
`bufferedAmount` 5 12 7 12.1 5 18 7 12.1 4.2 1.0 4.4 4.2  
`close` 5 12 7 12.1 5 18 7 12.1 4.2 1.0 4.4 4.2  
`close_event` 5 12 7 12.1 5 18 7 12.1 4.2 1.0 4.4 4.2  
`error_event` 5 12 7 12.1 5 18 7 12.1 4.2 1.0 4.4 4.2  
`extensions` 16 12 8 12.1 6 18 8 12.1 6 1.0 4.4 6  
`message_event` 5 12 7 12.1 5 18 7 12.1 4.2 1.0 4.4 4.2  
`open_event` 5 12 7 12.1 5 18 7 12.1 4.2 1.0 4.4 4.2  
`protocol` 15 12 7 12.1 6 18 7 12.1 6 1.0 4.4 6  
`protocol_rfc_6455` 16 12 11 15 6 18 14 14 6 1.0 4.4 6  
`readyState` 5 12 7 12.1 5 18 7 12.1 4.2 1.0 4.4 4.2  
`send` 5 12 1811–18Only parameter of type `ArrayBuffer` and `String` supported.8–11Only parameter of type `String` supported.7–8Only parameter of type `String` supported. Returns `boolean`. 12.1 5 18 1814–18Only parameter of type `ArrayBuffer` and `String` supported.8–14Only parameter of type `String` supported.7–8Only parameter of type `String` supported. Returns `boolean`. 12.1 4.2 1.0 4.4 4.2  
`url` 18 12 7 12.1 6 18 7 12.1 6 1.0 4.4 6  
`worker_support` 5 12 37 12.1 5 18 37 12.1 5 1.0 4.4 5  
### api.WebSocketStream
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`WebSocketStream` 124 124 No 110 No 124 No 82 No 27.0 124 No  
`WebSockets_API` 124 124 No 110 No 124 No 82 No 27.0 124 No  
`close` 124 124 No 110 No 124 No 82 No 27.0 124 No  
`closed` 124 124 No 110 No 124 No 82 No 27.0 124 No  
`opened` 124 124 No 110 No 124 No 82 No 27.0 124 No  
`url` 124 124 No 110 No 124 No 82 No 27.0 124 No  
  * RFC 6455 — The WebSocket Protocol
  * WebSocket API Specification
  * Server-Sent Events


# OES_vertex_array_object extension
The OES_vertex_array_object extension is part of the WebGL API and provides vertex array objects (VAOs) which encapsulate vertex array states. These objects keep pointers to vertex data and provide names for different sets of vertex data.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default and the constants and methods are available without the `OES_` suffix.
## Constants
This extension exposes one new constant, which can be used in the `gl.getParameter()` method:
`ext.VERTEX_ARRAY_BINDING_OES`
    
Returns a `WebGLVertexArrayObject` object when used in the `gl.getParameter()` method as the `pname` parameter.
## Instance methods
This extension exposes four new methods.
`ext.createVertexArrayOES()`
    
Creates a new `WebGLVertexArrayObject`.
`ext.deleteVertexArrayOES()`
    
Deletes a given `WebGLVertexArrayObject`.
`ext.isVertexArrayOES()`
    
Returns `true` if a given object is a `WebGLVertexArrayObject`.
`ext.bindVertexArrayOES()`
    
Binds a given `WebGLVertexArrayObject` to the buffer.
## Examples
    
    const oes_vao_ext = gl.getExtension("OES_vertex_array_object");
    const vao = oes_vao_ext.createVertexArrayOES();
    oes_vao_ext.bindVertexArrayOES(vao);
    
    // …
    // calls to bindBuffer or vertexAttribPointer
    // which will be "recorded" in the VAO
    // …
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.vertexAttribPointer()`
  * WebGL2 equivalent methods: 
    * `WebGL2RenderingContext.createVertexArray()`
    * `WebGL2RenderingContext.deleteVertexArray()`
    * `WebGL2RenderingContext.isVertexArray()`
    * `WebGL2RenderingContext.bindVertexArray()`


# AbsoluteOrientationSensor
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `AbsoluteOrientationSensor` interface of the Sensor APIs describes the device's physical orientation in relation to the Earth's reference coordinate system.
To use this sensor, the user must grant permission to the `'accelerometer'`, `'gyroscope'`, and `'magnetometer'` device sensors through the Permissions API.
This feature may be blocked by a Permissions Policy set on your server.
EventTarget  Sensor  OrientationSensor  AbsoluteOrientationSensor 
## Constructor
`AbsoluteOrientationSensor()`
    
Creates a new `AbsoluteOrientationSensor` object.
## Instance properties
No specific properties; inherits properties from its ancestors `OrientationSensor` and `Sensor`.
## Instance methods
No specific methods; inherits methods from its ancestors `OrientationSensor` and `Sensor`.
## Events
No specific events; inherits methods from its ancestor, `Sensor`.
## Examples
>
### Basic Example
The following example, which is loosely based on Intel's Orientation Phone demo, instantiates an `AbsoluteOrientationSensor` with a frequency of 60 times a second. On each reading it uses `OrientationSensor.quaternion` to rotate a visual model of a phone.
    
    const options = { frequency: 60, referenceFrame: "device" };
    const sensor = new AbsoluteOrientationSensor(options);
    
    sensor.addEventListener("reading", () => {
      // model is a Three.js object instantiated elsewhere.
      model.quaternion.fromArray(sensor.quaternion).inverse();
    });
    sensor.addEventListener("error", (event) => {
      if (event.error.name === "NotReadableError") {
        console.log("Sensor is not available.");
      }
    });
    sensor.start();
    
### Permissions Example
Using orientation sensors requires requesting permissions for multiple device sensors. Because the `Permissions` interface uses promises, a good way to request permissions is to use `Promise.all`.
    
    const sensor = new AbsoluteOrientationSensor();
    Promise.all([
      navigator.permissions.query({ name: "accelerometer" }),
      navigator.permissions.query({ name: "magnetometer" }),
      navigator.permissions.query({ name: "gyroscope" }),
    ]).then((results) => {
      if (results.every((result) => result.state === "granted")) {
        sensor.start();
        // …
      } else {
        console.log("No permissions to use AbsoluteOrientationSensor.");
      }
    });
    
# DeviceMotionEventAcceleration
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `DeviceMotionEventAcceleration` interface of the Device Orientation Events provides information about the amount of acceleration the device is experiencing along all three axes.
## Instance properties
`DeviceMotionEventAcceleration.x` Read only
    
The amount of acceleration along the X axis.
`DeviceMotionEventAcceleration.y` Read only
    
The amount of acceleration along the Y axis.
`DeviceMotionEventAcceleration.z` Read only
    
The amount of acceleration along the Z axis.
# WorkletSharedStorage
The `WorkletSharedStorage` interface of the Shared Storage API represents the shared storage for a particular origin within a worklet context.
`WorkletSharedStorage` is accessed via `SharedStorageWorkletGlobalScope.sharedStorage`.
## Instance properties
`context` Experimental Non-standard
    
Contains contextual data passed into the shared storage worklet from the associated browsing context via the `FencedFrameConfig.setSharedStorageContext()` method.
## Instance methods
`WorkletSharedStorage` inherits properties from its parent interface, `SharedStorage`.
`get()` Experimental
    
Retrieves a value from the shared storage.
`length()` Experimental
    
Returns the number of entries currently stored in the shared storage for the current origin.
`remainingBudget()` Experimental
    
Returns the remaining navigation budget for the current origin.
`WorkletSharedStorage` also includes the following methods because it has an async iterator defined on it:
`entries()` Experimental
    
Returns a new async iterator for the key-value pairs of a `WorkletSharedStorage` object instance's enumerable properties.
`keys()` Experimental
    
Returns a new async iterator containing the keys for each item in a `WorkletSharedStorage` object instance.
`WorkletSharedStorage[Symbol.asyncIterator]()` Experimental
    
Returns the `entries()` function by default.
## Examples
>
### Passing contextual data via `setSharedStorageContext()`
You can use the Private Aggregation API to create reports that combine event-level data inside fenced frames with contextual data from the embedding document. `setSharedStorageContext()` can be used to pass contextual data from the embedder to shared storage worklets initiated by the Protected Audience API.
In this example, we store data from both the embedding page and the fenced frame using shared storage.
On the embedding page, we set a mock event ID as the shared storage context using `setSharedStorageContext()`:
    
    const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });
    
    // Data from the embedder that you want to pass to the shared storage worklet
    frameConfig.setSharedStorageContext("some-event-id");
    
    const frame = document.createElement("fencedframe");
    frame.config = frameConfig;
    
Within the fenced frame, after adding the worklet module with `window.sharedStorage.worklet.addModule()`, we send the event-level data into the shared storage worklet module using `window.sharedStorage.run()` (this is unrelated to the contextual data from the embedding document):
    
    const frameData = {
      // Data available only inside the fenced frame
    };
    
    await window.sharedStorage.worklet.addModule("reporting-worklet.js");
    
    await window.sharedStorage.run("send-report", {
      data: {
        frameData,
      },
    });
    
In the `reporting-worklet.js` worklet, we read the embedding document's event ID from `sharedStorage.context` and the frame's event-level data from the data object. We then report them through Private Aggregation:
    
    class ReportingOperation {
      convertEventIdToBucket(eventId) {
        // …
      }
      convertEventPayloadToValue(info) {
        // …
      }
    
      async run(data) {
        // Data from the embedder
        const eventId = sharedStorage.context;
    
        // Data from the fenced frame
        const eventPayload = data.frameData;
    
        privateAggregation.sendHistogramReport({
          bucket: convertEventIdToBucket(eventId),
          value: convertEventPayloadToValue(eventPayload),
        });
      }
    }
    
    register("send-report", ReportingOperation);
    
This feature does not appear to be defined in any specification.>
  * Shared Storage API


# IDBVersionChangeEvent
Note: This feature is available in Web Workers.
The `IDBVersionChangeEvent` interface of the IndexedDB API indicates that the version of the database has changed, as the result of an `onupgradeneeded` event handler function.
Event  IDBVersionChangeEvent 
## Constructor
`IDBVersionChangeEvent()`
    
Creates and returns a new `IDBVersionChangeEvent` object which is used to represent when a version of the database has changed.
## Instance properties
Also inherits properties from its parent, `Event` interface.
`IDBVersionChangeEvent.oldVersion` Read only
    
Returns the old version of the database.
`IDBVersionChangeEvent.newVersion` Read only
    
Returns the new version of the database.
## Instance methods
No specific method, but inherits methods from its parent, `Event` interface.
## Example
In the following code snippet, we make a request to open a database, and include handlers for the success and error cases. Upon a version change (after an `upgradeneeded` event), the `success` event will implement the `IDBVersionChangeEvent` interface. For a full working example, see our To-do Notifications app (view example live).
    
    const note = document.querySelector("ul");
    
    // Let us open version 4 of our database
    const DBOpenRequest = window.indexedDB.open("toDoList", 4);
    
    // these two event handlers act on the database being opened successfully, or not
    DBOpenRequest.onerror = (event) => {
      note.appendChild(document.createElement("li")).textContent =
        "Error loading database.";
    };
    
    DBOpenRequest.onsuccess = (event) => {
      note.appendChild(document.createElement("li")).textContent =
        "Database initialized.";
    
      // store the result of opening the database in the db variable. This is used a lot later on, for opening transactions and suchlike.
      const db = DBOpenRequest.result;
    };
    
  * Using IndexedDB
  * Starting transactions: `IDBDatabase`
  * Using transactions: `IDBTransaction`
  * Setting a range of keys: `IDBKeyRange`
  * Retrieving and making changes to your data: `IDBObjectStore`
  * Using cursors: `IDBCursor`
  * Reference example: To-do Notifications (View the example live).


# ScrollTimeline
The `ScrollTimeline` interface of the Web Animations API represents a scroll progress timeline (see CSS scroll-driven animations for more details).
Pass a `ScrollTimeline` instance to the `Animation()` constructor or the `animate()` method to specify it as the timeline that will control the progress of the animation.
AnimationTimeline  ScrollTimeline 
## Constructor
`ScrollTimeline()`
    
Creates a new `ScrollTimeline` object instance.
## Instance properties
This interface also inherits the properties of its parent, `AnimationTimeline`.
`source` Read only
    
Returns a reference to the scrollable element (scroller) whose scroll position is driving the progress of the timeline and therefore the animation.
`axis` Read only
    
Returns an enumerated value representing the scroll axis that is driving the progress of the timeline.
## Instance methods
This interface inherits the methods of its parent, `AnimationTimeline`.
## Examples
>
### Displaying the source and axis of a scroll progress timeline
In this example, we animate an element with a `class` of `box` along a view progress timeline — it animates across the screen as the document scrolls. We output the `source` element and scroll `axis` to an `output` element in the top-right corner.
#### HTML
The HTML for the example is shown below.
    
    <div class="content"></div>
    <div class="box"></div>
    <div class="output"></div>
    
#### CSS
The CSS for the example looks like this:
    
    .content {
      height: 2000px;
    }
    
    .box {
      width: 100px;
      height: 100px;
      border-radius: 10px;
      background-color: rebeccapurple;
      position: fixed;
      top: 20px;
      left: 0%;
    }
    
    .output {
      font-family: Arial, Helvetica, sans-serif;
      position: fixed;
      top: 5px;
      right: 5px;
    }
    
#### JavaScript
In the JavaScript, we grab references to the `box` and `output` `<div>`s, then create a new `ScrollTimeline`, specifying that the element that will drive the scroll timeline progress is the document (`<html>`) element, and the scroll axis is the `block` axis. We then animate the `box` element with the Web Animations API. Last of all, we display the source element and axis in the `output` element.
    
    const box = document.querySelector(".box");
    const output = document.querySelector(".output");
    
    const timeline = new ScrollTimeline({
      source: document.documentElement,
      axis: "block",
    });
    
    box.animate(
      {
        rotate: ["0deg", "720deg"],
        left: ["0%", "100%"],
      },
      {
        timeline,
      },
    );
    
    output.textContent = `Timeline source element: ${timeline.source.nodeName}. Timeline scroll axis: ${timeline.axis}`;
    
#### Result
Scroll to see the box being animated.
  * Web Animations API
  * CSS scroll-driven animations
  * `AnimationTimeline`, `ViewTimeline`


# PresentationRequest
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
A `PresentationRequest` object is used to initiate or reconnect to a presentation made by a controlling browsing context. The `PresentationRequest` object MUST be implemented in a controlling browsing context provided by a controlling user agent.
When a `PresentationRequest` is constructed, the given `urls` MUST be used as the list of presentation request URLs which are each a possible presentation URL for the `PresentationRequest` instance.
EventTarget  PresentationRequest 
## Constructor
`PresentationRequest()` Experimental
    
Creates a `PresentationRequest`.
## Instance properties
None
## Instance methods
`PresentationRequest.start()` Experimental
    
Returns a `Promise` that resolves with a `PresentationConnection` after the user agent prompts the user to select a display and grant permission to use that display.
`PresentationRequest.reconnect()` Experimental
    
When the `reconnect(presentationId)` method is called on a `PresentationRequest` presentationRequest, the user agent MUST run the following steps to reconnect to a presentation.
`PresentationRequest.getAvailability()` Experimental
    
When the `getAvailability()` method is called, the user agent MUST run the steps as the link.
# ReadableStreamBYOBRequest
Note: This feature is available in Web Workers.
The `ReadableStreamBYOBRequest` interface of the Streams API represents a "pull request" for data from an underlying source that will made as a zero-copy transfer to a consumer (bypassing the stream's internal queues).
`ReadableStreamBYOBRequest` objects are created in "BYOB mode" when a consumer makes a request for data and the stream's internal queue is empty. (The stream will resolve the consumer's request directly if it already has buffered data). An underlying byte source can access active BYOB requests through its controller's `ReadableByteStreamController.byobRequest` property, which will be set to `null` if there is no outstanding request.
An underlying source that supports "BYOB mode" should check for `ReadableByteStreamController.byobRequest` and must use it for transferring data, if present. If data arrives from the underlying source when `ReadableByteStreamController.byobRequest` is `null`, it can be queued using `ReadableByteStreamController.enqueue()`. This might happen when an underlying push source receives new data when the stream's internal buffers are not empty.
An underlying source uses the request by writing data to the BYOB request's `view` and then calling `respond()`, or by calling `respondWithNewView()` and passing a new view as an argument. Note that the "new view" must actually be a view over the same buffer as the original `view`, starting at the same offset. This might be used to return a shorter buffer if the underlying source is unable to fill the entire original view.
Note that a `ReadableByteStreamController` is only created for underlying sources when `type="bytes"` is specified for the source in the `ReadableStream()` constructor. "BYOB mode" is enabled when either `autoAllocateChunkSize` is specified in the `ReadableController()` constructor or when using a `ReadableStreamBYOBReader` (typically constructed by calling `ReadableStream.getReader()` with the argument `{ mode: 'byob' }`).
## Constructor
None. `ReadableStreamBYOBRequest` instance is created automatically by `ReadableByteStreamController` as needed.
## Instance properties
`ReadableStreamBYOBRequest.view` Read only
    
Returns the current view. This is a view on a buffer that will be transferred to the consumer when `ReadableStreamBYOBRequest.respond()` is called.
## Instance methods
`ReadableStreamBYOBRequest.respond()`
    
Signals the associated readable byte stream that the specified number of bytes were written into the current `view`, which then causes the pending request from the consumer to be resolved. Note that after this method is called the `view` is transferred and no longer modifiable.
`ReadableStreamBYOBRequest.respondWithNewView()`
    
Signals to the associated readable byte stream view passed as an argument should be transferred to the consumer of the readable byte stream. This new view must use the same buffer as the original `view`, start at the same offset, and be the same length or shorter. Note that after this method is called the `view` is transferred and no longer modifiable.
## Examples
The following code is taken from the live example in Using readable byte streams > Creating a readable socket push byte stream.
A push underlying byte source with data to transfer should first check that `controller.byobRequest` is non-`null`. Pul A pull underlying byte source would only need this check if auto chunk allocation was not enabled and it was used with a default reader.
    
    if (controller.byobRequest) {
      /* code to transfer data */
    }
    
There are two ways to read data into a `ReadableStreamBYOBRequest` and then transfer it. The first is to write the data into the `ReadableStreamBYOBRequest.view` property and then call `ReadableStreamBYOBRequest.respond()` to indicate the amount of data to be transferred. After the operation the `byobRequest.view` is detached and the request should be discarded.
The code below shows this case using a hypothetical `readInto()` method to copy data into the view:
    
    const v = controller.byobRequest.view;
    bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
    controller.byobRequest.respond(bytesRead);
    
The other approach is to call `ReadableStreamBYOBRequest.respondWithNewView()` passing your own view on the same underlying backing data. Note that this just another way of specifying the range of the underlying buffer/memory backing that is actually transferred. The `respondWithNewView` equivalent to the code above would be:
    
    const v = controller.byobRequest.view;
    bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
    const newView = new Uint8Array(v.buffer, v.byteOffset, bytesRead);
    controller.byobRequest.respondWithNewView(newView);
    
  * Using readable byte stream


# VideoTrackGenerator
Note: This feature is only available in Dedicated Web Workers.
The `VideoTrackGenerator` interface of the Insertable Streams for MediaStreamTrack API has a `WritableStream` property that acts as a `MediaStreamTrack` source, by consuming a stream of `VideoFrame`s as input.
## Constructor
`VideoTrackGenerator()` Experimental
    
Creates a new `VideoTrackGenerator` object which accepts `VideoFrame` objects.
## Instance properties
`VideoTrackGenerator.muted` Experimental
    
A Boolean property to temporarily halt or resume the generation of video frames in the output track.
`VideoTrackGenerator.track` Experimental
    
The output `MediaStreamTrack`.
`VideoTrackGenerator.writable` Experimental
    
The input `WritableStream`.
## Examples
The following example is from the article Unbundling MediaStreamTrackProcessor and VideoTrackGenerator. It transfers a camera `MediaStreamTrack` to a worker for processing. The worker creates a pipeline that applies a sepia tone filter to the video frames and mirrors them. The pipeline culminates in a `VideoTrackGenerator` whose `MediaStreamTrack` is transferred back and played. The media now flows in real time through the transform off the main thread.
    
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    const [track] = stream.getVideoTracks();
    const worker = new Worker("worker.js");
    worker.postMessage({ track }, [track]);
    const { data } = await new Promise((r) => {
      worker.onmessage = r;
    });
    video.srcObject = new MediaStream([data.track]);
    
worker.js:
    
    onmessage = async ({ data: { track } }) => {
      const vtg = new VideoTrackGenerator();
      self.postMessage({ track: vtg.track }, [vtg.track]);
      const { readable } = new MediaStreamTrackProcessor({ track });
      await readable
        .pipeThrough(new TransformStream({ transform }))
        .pipeTo(vtg.writable);
    };
    
  * `MediaStreamTrackProcessor`


# CSSStyleDeclaration
The `CSSStyleDeclaration` interface represents an object that is a CSS declaration block, and exposes style information and various style-related methods and properties.
A `CSSStyleDeclaration` object can be exposed using three different APIs:
  * Via `HTMLElement.style`, which deals with the inline styles of a single element (e.g., `<div style="…">`).
  * Via the `CSSStyleSheet` API. For example, `document.styleSheets[0].cssRules[0].style` returns a `CSSStyleDeclaration` object on the first CSS rule in the document's first stylesheet.
  * Via `Window.getComputedStyle()`, which exposes the `CSSStyleDeclaration` object as a read-only interface.


## Attributes
`CSSStyleDeclaration.cssText`
    
Textual representation of the declaration block, if and only if it is exposed via `HTMLElement.style`. Setting this attribute changes the inline style. If you want a text representation of a computed declaration block, you can get it with `JSON.stringify()`.
`CSSStyleDeclaration.length` Read only
    
The number of properties. See the `item()` method below.
`CSSStyleDeclaration.parentRule` Read only
    
The containing `CSSRule`.
### CSS Properties
`CSSStyleDeclaration.cssFloat`
    
Special alias for the `float` CSS property.
`CSSStyleDeclaration` named properties
    
Dashed and camel-cased attributes for all supported CSS properties.
## Instance methods
`CSSStyleDeclaration.getPropertyPriority()`
    
Returns the optional priority, "important".
`CSSStyleDeclaration.getPropertyValue()`
    
Returns the property value given a property name.
`CSSStyleDeclaration.item()`
    
Returns a CSS property name by its index, or the empty string if the index is out-of-bounds.
`CSSStyleDeclaration.removeProperty()`
    
Removes a property from the CSS declaration block.
`CSSStyleDeclaration.setProperty()`
    
Modifies an existing CSS property or creates a new CSS property in the declaration block.
`CSSStyleDeclaration.getPropertyCSSValue()` Deprecated
    
Only supported via getComputedStyle in Firefox. Returns the property value as a `CSSPrimitiveValue` or `null` for shorthand properties.
## Example
    
    const styleObj = document.styleSheets[0].cssRules[0].style;
    console.log(styleObj.cssText);
    
    for (let i = styleObj.length; i--; ) {
      const nameString = styleObj[i];
      styleObj.removeProperty(nameString);
    }
    
    console.log(styleObj.cssText);
    
# SpeechSynthesis
The `SpeechSynthesis` interface of the Web Speech API is the controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.
EventTarget  SpeechSynthesis 
## Instance properties
`SpeechSynthesis` also inherits properties from its parent interface, `EventTarget`.
`SpeechSynthesis.paused` Read only
    
A boolean value that returns `true` if the `SpeechSynthesis` object is in a paused state.
`SpeechSynthesis.pending` Read only
    
A boolean value that returns `true` if the utterance queue contains as-yet-unspoken utterances.
`SpeechSynthesis.speaking` Read only
    
A boolean value that returns `true` if an utterance is currently in the process of being spoken — even if `SpeechSynthesis` is in a paused state.
## Instance methods
`SpeechSynthesis` also inherits methods from its parent interface, `EventTarget`.
`SpeechSynthesis.cancel()`
    
Removes all utterances from the utterance queue.
`SpeechSynthesis.getVoices()`
    
Returns a list of `SpeechSynthesisVoice` objects representing all the available voices on the current device.
`SpeechSynthesis.pause()`
    
Puts the `SpeechSynthesis` object into a paused state.
`SpeechSynthesis.resume()`
    
Puts the `SpeechSynthesis` object into a non-paused state: resumes it if it was already paused.
`SpeechSynthesis.speak()`
    
Adds an `utterance` to the utterance queue; it will be spoken when any other utterances queued before it have been spoken.
## Events
Listen to this event using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`voiceschanged`
    
Fired when the list of `SpeechSynthesisVoice` objects that would be returned by the `SpeechSynthesis.getVoices()` method has changed. Also available via the `onvoiceschanged` property.
## Examples
First, an example:
    
    let utterance = new SpeechSynthesisUtterance("Hello world!");
    speechSynthesis.speak(utterance);
    
Now we'll look at a more fully-fledged example. In our Speech synthesizer demo, we first grab a reference to the SpeechSynthesis controller using `window.speechSynthesis`. After defining some necessary variables, we retrieve a list of the voices available using `SpeechSynthesis.getVoices()` and populate a select menu with them so the user can choose what voice they want.
Inside the `inputForm.onsubmit` handler, we stop the form submitting with preventDefault(), create a new `SpeechSynthesisUtterance` instance containing the text from the text `<input>`, set the utterance's voice to the voice selected in the `<select>` element, and start the utterance speaking via the `SpeechSynthesis.speak()` method.
    
    const synth = window.speechSynthesis;
    
    const inputForm = document.querySelector("form");
    const inputTxt = document.querySelector(".txt");
    const voiceSelect = document.querySelector("select");
    const pitch = document.querySelector("#pitch");
    const pitchValue = document.querySelector(".pitch-value");
    const rate = document.querySelector("#rate");
    const rateValue = document.querySelector(".rate-value");
    
    let voices = [];
    
    function populateVoiceList() {
      voices = synth.getVoices();
    
      for (const voice of voices) {
        const option = document.createElement("option");
        option.textContent = `${voice.name} (${voice.lang})`;
    
        if (voice.default) {
          option.textContent += " — DEFAULT";
        }
    
        option.setAttribute("data-lang", voice.lang);
        option.setAttribute("data-name", voice.name);
        voiceSelect.appendChild(option);
      }
    }
    
    populateVoiceList();
    if (speechSynthesis.onvoiceschanged !== undefined) {
      speechSynthesis.onvoiceschanged = populateVoiceList;
    }
    
    inputForm.onsubmit = (event) => {
      event.preventDefault();
    
      const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
      const selectedOption =
        voiceSelect.selectedOptions[0].getAttribute("data-name");
      for (const voice of voices) {
        if (voice.name === selectedOption) {
          utterThis.voice = voice;
        }
      }
      utterThis.pitch = pitch.value;
      utterThis.rate = rate.value;
      synth.speak(utterThis);
    
      inputTxt.blur();
    };
    
  * Web Speech API


# EXT_texture_norm16 extension
The `EXT_texture_norm16` extension is part of the WebGL API and provides a set of new 16-bit signed normalized and unsigned normalized formats (fixed-point texture, renderbuffer and texture buffer).
When this extension is enabled:
  * The `WebGLRenderingContext.texImage2D()` and `WebGLRenderingContext.texSubImage2D()` methods accept new formats provided by this extension.
  * The 16-bit normalized fixed-point types `ext.R16_EXT`, `ext.RG16_EXT` and `ext.RGBA16_EXT` become available as color-renderable formats and renderbuffers and be created in these formats.


WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL 2 contexts.
## Constants
`ext.R16_EXT`
    
Red 16-bit unsigned format. Color-renderable.
`ext.RG16_EXT`
    
RG 16-bit unsigned format. Color-renderable.
`ext.RGB16_EXT`
    
RGB 16-bit unsigned format.
`ext.RGBA16_EXT`
    
RGBA 16-bit unsigned format. Color-renderable.
`ext.R16_SNORM_EXT`
    
Red 16-bit signed normalized format.
`ext.RG16_SNORM_EXT`
    
RG 16-bit signed normalized format.
`ext.RGB16_SNORM_EXT`
    
RGB 16-bit signed normalized format.
`ext.RGBA16_SNORM_EXT`
    
RGBA 16-bit signed normalized format.
## Examples
>
### Enabling the extension
    
    let ext = gl.getExtension("EXT_texture_norm16");
    
### Texture formats
The `WebGLRenderingContext.texImage2D()` method accepts new formats when `EXT_texture_norm16` is enabled. Example calls:
    
    // imageData = Uint16Array
    gl.texImage2D(gl.TEXTURE_2D, 0, ext.R16_EXT, 1, 1, 0, gl.RED, gl.UNSIGNED_SHORT, imageData);
    gl.texImage2D(gl.TEXTURE_2D, 0, ext.RG16_EXT, 1, 1, 0, gl.RG, gl.UNSIGNED_SHORT, imageData);
    gl.texImage2D(gl.TEXTURE_2D, 0, ext.RGB16_EXT, 1, 1, 0, gl.RGB, gl.UNSIGNED_SHORT, imageData);
    gl.texImage2D(gl.TEXTURE_2D, 0, ext.RGBA16_EXT, 1, 1, 0, gl.RGBA, gl.UNSIGNED_SHORT, imageData);
    
    // imageData = Int16Array
    gl.texImage2D(gl.TEXTURE_2D, 0, ext.R16_SNORM_EXT, 1, 1, 0, gl.RED, gl.SHORT, imageData);
    gl.texImage2D(gl.TEXTURE_2D, 0, ext.RG16_SNORM_EXT, 1, 1, 0, gl.RG, gl.SHORT, imageData);
    gl.texImage2D(gl.TEXTURE_2D, 0, ext.RGB16_SNORM_EXT, 1, 1, 0, gl.RGB, gl.SHORT, imageData);
    gl.texImage2D(gl.TEXTURE_2D, 0, ext.RGBA16_SNORM_EXT, 1, 1, 0, gl.RGBA, gl.SHORT, imageData);
    
### Renderbuffer formats
The `WebGLRenderingContext.renderbufferStorage()` method accepts `ext.R16_EXT`, `ext.RG16_EXT` and `ext.RGBA16_EXT` as internal formats to create renderbuffers in these formats. Example calls:
    
    gl.renderbufferStorage(gl.RENDERBUFFER, ext.R16_EXT, 1, 1);
    gl.renderbufferStorage(gl.RENDERBUFFER, ext.RG16_EXT, 1, 1);
    gl.renderbufferStorage(gl.RENDERBUFFER, ext.RGBA16_EXT, 1, 1);
    
  * `WebGLRenderingContext.getExtension()`
  * `WebGLRenderingContext.texImage2D()`
  * `WebGLRenderingContext.renderbufferStorage()`


# AudioBufferSourceNode
The `AudioBufferSourceNode` interface is an `AudioScheduledSourceNode` which represents an audio source consisting of in-memory audio data, stored in an `AudioBuffer`.
This interface is especially useful for playing back audio which has particularly stringent timing accuracy requirements, such as for sounds that must match a specific rhythm and can be kept in memory rather than being played from disk or the network. To play sounds which require accurate timing but must be streamed from the network or played from disk, use a `AudioWorkletNode` to implement its playback.
EventTarget  AudioNode  AudioScheduledSourceNode  AudioBufferSourceNode 
An `AudioBufferSourceNode` has no inputs and exactly one output, which has the same number of channels as the `AudioBuffer` indicated by its `buffer` property. If there's no buffer set—that is, if `buffer` is `null`—the output contains a single channel of silence (every sample is 0).
An `AudioBufferSourceNode` can only be played once; after each call to `start()`, you have to create a new node if you want to play the same sound again. Fortunately, these nodes are very inexpensive to create, and the actual `AudioBuffer`s can be reused for multiple plays of the sound. Indeed, you can use these nodes in a "fire and forget" manner: create the node, call `start()` to begin playing the sound, and don't even bother to hold a reference to it. It will automatically be garbage-collected at an appropriate time, which won't be until sometime after the sound has finished playing.
Multiple calls to `stop()` are allowed. The most recent call replaces the previous one, if the `AudioBufferSourceNode` has not already reached the end of the buffer.
Number of inputs `0`  
Number of outputs `1`  
Channel count defined by the associated `AudioBuffer`  
## Constructor
`AudioBufferSourceNode()`
    
Creates and returns a new `AudioBufferSourceNode` object. As an alternative, you can use the `BaseAudioContext.createBufferSource()` factory method; see Creating an AudioNode.
## Instance properties
Inherits properties from its parent, `AudioScheduledSourceNode`.
`AudioBufferSourceNode.buffer`
    
An `AudioBuffer` that defines the audio asset to be played, or when set to the value `null`, defines a single channel of silence (in which every sample is 0.0).
`AudioBufferSourceNode.detune`
    
A k-rate `AudioParam` representing detuning of playback in cents. This value is compounded with `playbackRate` to determine the speed at which the sound is played. Its default value is `0` (meaning no detuning), and its nominal range is -∞ to ∞.
`AudioBufferSourceNode.loop`
    
A Boolean attribute indicating if the audio asset must be replayed when the end of the `AudioBuffer` is reached. Its default value is `false`.
`AudioBufferSourceNode.loopStart` Optional
    
A floating-point value indicating the time, in seconds, at which playback of the `AudioBuffer` must begin when `loop` is `true`. Its default value is `0` (meaning that at the beginning of each loop, playback begins at the start of the audio buffer).
`AudioBufferSourceNode.loopEnd` Optional
    
A floating-point number indicating the time, in seconds, at which playback of the `AudioBuffer` stops and loops back to the time indicated by `loopStart`, if `loop` is `true`. The default value is `0`.
`AudioBufferSourceNode.playbackRate`
    
A k-rate `AudioParam` that defines the speed factor at which the audio asset will be played, where a value of 1.0 is the sound's natural sampling rate. Since no pitch correction is applied on the output, this can be used to change the pitch of the sample. This value is compounded with `detune` to determine the final playback rate.
## Instance methods
Inherits methods from its parent, `AudioScheduledSourceNode`, and overrides the following method:.
`start()`
    
Schedules playback of the audio data contained in the buffer, or begins playback immediately. Additionally allows the start offset and play duration to be set.
## Examples
In this example, we create a two-second buffer, fill it with white noise, and then play it using an `AudioBufferSourceNode`. The comments should clearly explain what is going on.
Note: You can also run the code live, or view the source.
    
    const audioCtx = new AudioContext();
    
    // Create an empty three-second stereo buffer at the sample rate of the AudioContext
    const myArrayBuffer = audioCtx.createBuffer(
      2,
      audioCtx.sampleRate * 3,
      audioCtx.sampleRate,
    );
    
    // Fill the buffer with white noise;
    // just random values between -1.0 and 1.0
    for (let channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
      // This gives us the actual ArrayBuffer that contains the data
      const nowBuffering = myArrayBuffer.getChannelData(channel);
      for (let i = 0; i < myArrayBuffer.length; i++) {
        // Math.random() is in [0; 1.0]
        // audio needs to be in [-1.0; 1.0]
        nowBuffering[i] = Math.random() * 2 - 1;
      }
    }
    
    // Get an AudioBufferSourceNode.
    // This is the AudioNode to use when we want to play an AudioBuffer
    const source = audioCtx.createBufferSource();
    // set the buffer in the AudioBufferSourceNode
    source.buffer = myArrayBuffer;
    // connect the AudioBufferSourceNode to the
    // destination so we can hear the sound
    source.connect(audioCtx.destination);
    // start the source playing
    source.start();
    
Note: For a `decodeAudioData()` example, see the `AudioContext.decodeAudioData()` page.
  * Using the Web Audio API
  * Web Audio API


# HTMLTableColElement
The `HTMLTableColElement` interface provides properties for manipulating single or grouped table column elements.
EventTarget  Node  Element  HTMLElement  HTMLTableColElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLTableColElement.align` Deprecated
    
A string that indicates the horizontal alignment of the cell data in the column.
`HTMLTableColElement.ch` Deprecated
    
A string representing the alignment character for cell data.
`HTMLTableColElement.chOff` Deprecated
    
A string representing the offset for the alignment character.
`HTMLTableColElement.span`
    
A positive number that reflects the `span` HTML attribute, indicating the number of columns to apply this object's attributes to.
`HTMLTableColElement.vAlign` Deprecated
    
A string that indicates the vertical alignment of the cell data in the column.
`HTMLTableColElement.width` Deprecated
    
A string representing the default column width.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<col>` and `<colgroup>`.


# CSSConditionRule
An object implementing the `CSSConditionRule` interface represents a single condition CSS at-rule, which consists of a condition and a statement block.
Three objects derive from `CSSConditionRule`: `CSSMediaRule`, `CSSContainerRule` and `CSSSupportsRule`.
CSSRule  CSSGroupingRule  CSSConditionRule 
## Instance properties
Inherits properties from its ancestors `CSSGroupingRule` and `CSSRule`.
`CSSConditionRule.conditionText` Read only
    
Represents the text of the condition of the rule.
## Instance methods
Inherits methods from its ancestors `CSSGroupingRule` and `CSSRule`.
  * Using dynamic styling information


# Shared Storage API
Warning: This feature is currently opposed by one browser vendor. See the Standards positions section below for details.
The Shared Storage API is a client-side storage mechanism that enables unpartitioned, cross-site data access while preserving privacy (i.e., without relying on tracking cookies).
## Concepts and usage
One major source of privacy and security problems on the web is the use of cookies set on third-party content embedded in sites (for example via `<iframe>` elements). These cookies can be used to track and profile users, and share information across sites.
To prevent cross-site tracking, browsers are working towards partitioning all storage types, including Cookies, Web Storage, IndexedDB, and the Cache API. However, a major barrier to achieving this is the need for several legitimate use cases that rely on cross-site information sharing. Examples of such use cases include advertisers wanting to measure the reach of their ads across sites and generate reports, and site owners wanting to customize user experiences based on the group they are in or their previous site interactions.
The Shared Storage API provides a flexible solution for such use cases. It aims to provide the required data storage, processing, and sharing capabilities without the ability to track and profile users.
Like other storage APIs, you can write to shared storage at any time. However, you can only read shared storage data from inside a worklet. Worklets provide a secure environment inside which you can process shared storage data and return useful results, but you can't directly share the data with the associated browsing context.
To extract useful results from a shared storage worklet, you need to use an output gate. These gates serve specific purposes such as selecting a URL from a provided list to display to the user based on shared storage data. Results meant for the user are shown securely inside a fenced frame where they can't be accessed from the embedding page.
## Output gates
The currently available output gates for the Shared Storage API are discussed in the sections below. In each section, we list typical use cases for each gate and provide links to guides with more information and code examples.
Note: More output gates will likely be added in the future to support additional use cases.
### URL Selection
The URL Selection output gate, accessed via the `selectURL()` method, is used to select a URL from a provided list to display to the user, based on shared storage data. This gate be used for the following purposes:
  * Creative rotation: Use stored data such as creative IDs, view counts, and user interaction to determine which creative content users see across different sites. This approach helps in balancing views and prevents overexposure of certain content, which in turn can help avoid a negative user experience.
  * A/B testing: Assign a user to an experiment group, then store group details in shared storage for cross-site access.
  * Custom user experiences: Share custom content and calls-to-action based on a user's registration status or other user states.


### Run
The Run output gate, accessed via the `run()` method, is intended to be used in a generic way to process some shared storage data.
The Private Aggregation API can use the Run output gate to process shared storage data and generate aggregated reports. These reports can be used in the following use cases:
  * Unique reach reporting: Content producers and advertisers often want to know the number of unique viewers for their content. You can use shared storage to report the first time a user sees your ad or embedded publication and prevent duplicate counting for the same user on a different site, giving you an aggregated noisy report of approximate unique reach.
  * User demographic reporting: Content producers often want to understand the demographics of their audience. You can use shared storage to record user demographic data on your main site, and use aggregated reporting to report on it across other sites in embedded contexts.
  * K+ frequency measurement: Sometimes described as "effective frequency", K+ frequency refers to the minimum number of views needed before a user will recognize or recall certain content (often used in the context of ad views). You can use shared storage to build reports of unique users who have seen a piece of content at least K times.


## Understanding how shared storage works
There are two parts to using the Shared Storage API — writing data to storage and reading/processing it. To give you an idea of how these parts are handled, we'll walk you through the basic A/B testing example from developer.chrome.com. In this example, a user is assigned to an experiment group, and the group details are stored in shared storage. Other sites are able to use this data when choosing a URL to display in a fenced frame.
### Writing to shared storage
Writing data to shared storage is simple — you use methods defined on the `SharedStorage` interface to set, append, or delete/clear data.
This functionality is available in two different contexts:
  * In the main browsing context, where your site or app runs, on `WindowSharedStorage`. This is available via `window.sharedStorage`.
  * In the context of your shared storage worklet, on `WorkletSharedStorage`. This is available via `this.sharedStorage`.


In our A/B testing example, we define a function in our app context that generates a random number — 0 or 1 — to represent an experiment group. We then run the `window.sharedStorage.set()` function to assign the user to a group and save the result in shared storage:
    
    // Randomly assigns a user to a group 0 or 1
    function getExperimentGroup() {
      return Math.round(Math.random());
    }
    
    async function injectContent() {
      // Assign user to a random group (0 or 1) and store it in shared storage
      window.sharedStorage.set("ab-testing-group", getExperimentGroup(), {
        ignoreIfPresent: true,
      });
    }
    
Note: The `ignoreIfPresent: true` option causes the `set()` function to abort if the shared storage already contains a data item with the specified key.
### Reading and processing data from shared storage
As mentioned above, to extract useful results from a shared storage worklet, you need to use an output gate. In this example, we'll use the URL Selection output gate to read the user's experiment group and then display a URL in a fenced frame based on their group.
To use the output gate, you need to:
  1. Define an operation in a worklet module script to handle choosing the URL, and register it.
  2. Add the module to your shared storage worklet.
  3. Choose the URL using the worklet operation and load it in a fenced frame.


Below we'll look at these steps one by one.
#### Define an operation in a worklet module
The URL selection is based on the experiment group stored in shared storage. To retrieve this value and choose a URL based on it, we need to define an operation in a `SharedStorageWorklet` context. This ensures the raw data is hidden from other contexts, thereby preserving privacy.
The URL Selection operation is a JavaScript class that must follow the rules below (these rules vary for each output gate, depending on their intended use case):
  * The actual functionality must be contained in an asynchronous `run()` method, which takes an array of objects containing URLs as its first parameter and a data object as its second parameter (when called, the data argument is optional).
  * The `run()` method must return a number, which will equate to the number of the URL chosen.


Note: Each output gate has a corresponding interface that defines the required structure of its class and `run()` method. For URL Selection, see `SharedStorageSelectURLOperation`.
Once the operation is defined, it needs to be registered using `SharedStorageWorkletGlobalScope.register()`.
    
    // ab-testing-worklet.js
    class SelectURLOperation {
      async run(urls, data) {
        // Read the user's experiment group from shared storage
        const experimentGroup = await this.sharedStorage.get("ab-testing-group");
    
        // Return the group number
        return experimentGroup;
      }
    }
    
    register("ab-testing", SelectURLOperation);
    
Notice how the value set in our main app context is retrieved using `WorkletSharedStorage.get()`. To reiterate, to preserve privacy and mitigate data leakage, you can read values from shared storage only within a worklet.
Note: It is possible to define and register multiple operations in the same shared storage worklet module script with different names; see `SharedStorageOperation` for an example.
#### Add the module to the shared storage worklet
To use the operation defined in the worklet module, it needs to be added to the shared storage worklet using `window.sharedStorage.worklet.addModule()`. In our main app context, this is done before we set the experiment group value, so that it is ready to use when needed:
    
    async function injectContent() {
      // Add the module to the shared storage worklet
      await window.sharedStorage.worklet.addModule("ab-testing-worklet.js");
    
      // Assign user to a random group (0 or 1) and store it in shared storage
      window.sharedStorage.set("ab-testing-group", getExperimentGroup(), {
        ignoreIfPresent: true,
      });
    }
    
#### Choose a URL and load it in a fenced frame
To run the operation defined in the worklet, we call `WindowSharedStorage.selectURL()`. This method acts as a proxy to our worklet operation, accessing it securely and returning the result without leaking any data. `selectURL()` is the correct method to call our user-defined worklet operation because it was defined with the appropriate class structure for a URL Selection operation, as discussed above.
`selectURL()` expects an array of objects containing URLs to choose from, an optional options object, and for the underlying operation to return an integer that it can use to choose a URL.
    
    // Run the URL selection operation
    const fencedFrameConfig = await window.sharedStorage.selectURL(
      "ab-testing",
      [
        { url: `https://your-server.example/content/default-content.html` },
        { url: `https://your-server.example/content/experiment-content-a.html` },
      ],
      {
        resolveToConfig: true,
      },
    );
    
Because the options object contains `resolveToConfig: true`, the returned `Promise` will resolve with a `FencedFrameConfig` object. This object can be set as the value of the `HTMLFencedFrameElement.config` property, resulting in the content of the chosen URL being displayed in the corresponding `<fencedframe>` element:
    
    document.getElementById("content-slot").config = fencedFrameConfig;
    
The full app script looks like so:
    
    // Randomly assigns a user to a group 0 or 1
    function getExperimentGroup() {
      return Math.round(Math.random());
    }
    
    async function injectContent() {
      // Add the module to the shared storage worklet
      await window.sharedStorage.worklet.addModule("ab-testing-worklet.js");
    
      // Assign user to a random group (0 or 1) and store it in shared storage
      window.sharedStorage.set("ab-testing-group", getExperimentGroup(), {
        ignoreIfPresent: true,
      });
    
      // Run the URL selection operation
      const fencedFrameConfig = await window.sharedStorage.selectURL(
        "ab-testing",
        [
          { url: `https://your-server.example/content/default-content.html` },
          { url: `https://your-server.example/content/experiment-content-a.html` },
        ],
        {
          resolveToConfig: true,
        },
      );
    
      // Render the chosen URL into a fenced frame
      document.getElementById("content-slot").config = fencedFrameConfig;
    }
    
    injectContent();
    
## Differences between shared storage and web storage
The key difference is that shared storage is intended for use with cross-origin data after storage has been partitioned.
  * If you are a publisher and you want to store first-party data that is accessible to only you, use the `localStorage` version of web storage.
  * If you want data to persist only during a browser session, use `sessionStorage`.
  * If you are operating as a third-party on another site, and you want to record data from that site to access later on another site, use shared storage.


Another important difference between shared storage and web storage is that reading from shared storage is guarded (writing to storage behaves similarly). With `localStorage` and `sessionStorage`, you can read freely. With shared storage, reading can happen only within a shared storage worklet, and the origin used for reading in the worklet is the same as the browsing context that created it.
Additionally, you cannot extract shared storage data outside of a shared storage worklet, as a tracking protection. You must use one of the output gates to work with your data in shared storage.
Lastly, data in `localStorage` persists until it is manually cleared. `sessionStorage` clears at the end of a browsing session, whereas shared storage data clears 30 days after the last write call.
## Interfaces
`SharedStorage`
    
Represents the shared storage for a particular origin. It defines methods to write data to the shared storage.
`WindowSharedStorage`
    
Represents the shared storage for a particular origin as exposed to a standard browsing context. Among other things, it defines methods to use the available output gates, which act as proxies for the operations defined in the worklet.
`WorkletSharedStorage`
    
Represents the shared storage for a particular origin within a worklet context. Among other things, it defines methods to read the shared storage data.
`SharedStorageWorklet`
    
Represents the current origin's shared storage worklet. It contains the `addModule()` method for adding modules. Unlike a regular `Worklet`, the `SharedStorageWorklet` can have only a single module added to it, for privacy reasons.
`SharedStorageWorkletGlobalScope`
    
Represents the global scope of a `SharedStorageWorklet` module. It contains the functionality to register a defined operation and access the shared storage.
### Output gate operation signature definitions
`SharedStorageOperation`
    
Represents the base class for all different output gate operation types.
`SharedStorageRunOperation`
    
Represents a Run output gate operation.
`SharedStorageSelectURLOperation`
    
Represents a URL Selection output gate operation.
### Extensions to other interfaces
`Window.sharedStorage`
    
Returns the `WindowSharedStorage` object for the current origin.
## Enrollment and local testing
To use the Shared Storage API in your sites, you must specify it in the privacy sandbox enrollment process. If you don't, the Shared Storage API methods won't run successfully.
You can test your Shared Storage API code locally without enrollment. To allow local testing, enable the following Chrome developer flag:
`chrome://flags/#privacy-sandbox-enrollment-overrides`
## Examples
For extensive demos, see the Shared Storage API demo site, which also includes some Private Aggregation API examples.
### Standards positions
One browser vendor opposes this specification. Known standards positions are as follows:
  * Mozilla (Firefox): Negative


  * Shared Storage on privacysandbox.google.com
  * The Privacy Sandbox on privacysandbox.google.com


# SourceBuffer
Note: This feature is available in Dedicated Web Workers.
The `SourceBuffer` interface represents a chunk of media to be passed into an `HTMLMediaElement` and played, via a `MediaSource` object. This can be made up of one or several media segments.
EventTarget  SourceBuffer 
## Instance properties
`SourceBuffer.appendWindowEnd`
    
Controls the timestamp for the end of the append window.
`SourceBuffer.appendWindowStart`
    
Controls the timestamp for the start of the append window. This is a timestamp range that can be used to filter what media data is appended to the `SourceBuffer`. Coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out.
`SourceBuffer.audioTracks` Read only
    
A list of the audio tracks currently contained inside the `SourceBuffer`.
`SourceBuffer.buffered` Read only
    
Returns the time ranges that are currently buffered in the `SourceBuffer`.
`SourceBuffer.mode`
    
Controls how the order of media segments in the `SourceBuffer` is handled, in terms of whether they can be appended in any order, or they have to be kept in a strict sequence.
`SourceBuffer.textTracks` Read only Experimental
    
A list of the text tracks currently contained inside the `SourceBuffer`.
`SourceBuffer.timestampOffset`
    
Controls the offset applied to timestamps inside media segments that are subsequently appended to the `SourceBuffer`.
`SourceBuffer.updating` Read only
    
A boolean indicating whether the `SourceBuffer` is currently being updated — i.e., whether an `SourceBuffer.appendBuffer()` or `SourceBuffer.remove()` operation is currently in progress.
`SourceBuffer.videoTracks` Read only
    
A list of the video tracks currently contained inside the `SourceBuffer`.
## Instance methods
Inherits methods from its parent interface, `EventTarget`.
`SourceBuffer.abort()`
    
Aborts the current segment and resets the segment parser.
`SourceBuffer.appendBuffer()`
    
Appends media segment data from an `ArrayBuffer`, a `TypedArray` or a `DataView` object to the `SourceBuffer`.
`SourceBuffer.appendBufferAsync()` Non-standard Experimental
    
Starts the process of asynchronously appending the specified buffer to the `SourceBuffer`. Returns a `Promise` which is fulfilled once the buffer has been appended.
`SourceBuffer.changeType()`
    
Changes the MIME type that future calls to `appendBuffer()` will expect the new data to conform to.
`SourceBuffer.remove()`
    
Removes media segments within a specific time range from the `SourceBuffer`.
`SourceBuffer.removeAsync()` Non-standard Experimental
    
Starts the process of asynchronously removing media segments in the specified range from the `SourceBuffer`. Returns a `Promise` which is fulfilled once all matching segments have been removed.
## Events
`abort`
    
Fired whenever `SourceBuffer.appendBuffer()` is ended by a call to `SourceBuffer.abort()`. `SourceBuffer.updating` changes from `true` to `false`.
`error`
    
Fired whenever an error occurs during `SourceBuffer.appendBuffer()`. `SourceBuffer.updating` changes from `true` to `false`.
`update`
    
Fired whenever `SourceBuffer.appendBuffer()` or `SourceBuffer.remove()` completes. `SourceBuffer.updating` changes from `true` to `false`. This event is fired before `updateend`.
`updateend`
    
Fired after `SourceBuffer.appendBuffer()` or `SourceBuffer.remove()` ends. This event is fired after `update`.
`updatestart`
    
Fired whenever the value of `SourceBuffer.updating` changes from `false` to `true`.
## Examples
>
### Loading a video chunk by chunk
The following example loads a video chunk by chunk as fast as possible, playing it as soon as it can.
You can see the complete code at https://github.com/mdn/dom-examples/tree/main/sourcebuffer and try the demo live at https://mdn.github.io/dom-examples/sourcebuffer/.
    
    const video = document.querySelector("video");
    
    const assetURL = "frag_bunny.mp4";
    // Need to be specific for Blink regarding codecs
    const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    
    function loadVideo() {
      if (MediaSource.isTypeSupported(mimeCodec)) {
        const mediaSource = new MediaSource();
        console.log(mediaSource.readyState); // closed
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener("sourceopen", sourceOpen);
      } else {
        console.error("Unsupported MIME type or codec: ", mimeCodec);
      }
    }
    
    async function sourceOpen() {
      console.log(this.readyState); // open
      const sourceBuffer = this.addSourceBuffer(mimeCodec);
      const response = await fetch(assetURL);
      const buffer = await response.arrayBuffer();
      sourceBuffer.addEventListener("updateend", () => {
        this.endOfStream();
        video.play();
        console.log(this.readyState); // ended
      });
      sourceBuffer.appendBuffer(buffer);
    }
    
    const load = document.querySelector("#load");
    load.addEventListener("click", loadVideo);
    
  * `MediaSource`
  * `SourceBufferList`


# CSPViolationReportBody
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `CSPViolationReportBody` interface is an extension of the Reporting API that represents the body of a Content Security Policy (CSP) violation report.
CSP violations are thrown when the webpage attempts to load a resource that violates the policy set by the `Content-Security-Policy` HTTP header.
CSP violation reports are returned in the reports parameter of `ReportingObserver` callbacks that have a `type` of `"csp-violation"`. The `body` property of those reports is an instance of `CSPViolationReportBody`.
CSP violation reports may also be sent as JSON objects to the endpoint specified in the `report-to` policy directive of the `Content-Security-Policy` header. These reports similarly have a `type` of `"csp-violation"`, and a `body` property containing a serialization of an instance of this interface.
Note: CSP violation reports sent by the Reporting API, when an endpoint is specified using the CSP `report-to` directive, are similar (but not identical) to the "CSP report" JSON objects sent when endpoints are specified using the `report-uri` directive. The Reporting API and `report-to` directive are intended to replace the older report format and the `report-uri` directive.
## Instance properties
Also inherits properties from its parent interface, `ReportBody`.
`CSPViolationReportBody.blockedURL` Read only
    
A string representing either the type or the URL of the resource that was blocked because it violates the CSP.
`CSPViolationReportBody.columnNumber` Read only
    
The column number in the script at which the violation occurred.
`CSPViolationReportBody.disposition` Read only
    
Indicates how the violated policy is configured to be treated by the user agent. This will be `"enforce"` or `"report"`.
`CSPViolationReportBody.documentURL` Read only
    
A string representing the URL of the document or worker in which the violation was found.
`CSPViolationReportBody.effectiveDirective` Read only
    
A string representing the directive whose enforcement uncovered the violation.
`CSPViolationReportBody.lineNumber` Read only
    
The line number in the script at which the violation occurred.
`CSPViolationReportBody.originalPolicy` Read only
    
A string containing the policy whose enforcement uncovered the violation.
`CSPViolationReportBody.referrer` Read only
    
A string representing the URL for the referrer of the resources whose policy was violated, or `null`.
`CSPViolationReportBody.sample` Read only
    
A string representing a sample of the resource that caused the violation, usually the first 40 characters. This will only be populated if the resource is an inline script, event handler, or style — external resources causing a violation will not generate a sample.
`CSPViolationReportBody.sourceFile` Read only
    
If the violation occurred as a result of a script, this will be the URL of the script; otherwise, it will be `null`. Both `columnNumber` and `lineNumber` should have non-null values if this property is not `null`.
`CSPViolationReportBody.statusCode` Read only
    
A number representing the HTTP status code of the document or worker in which the violation occurred.
## Instance methods
Also inherits methods from its parent interface, `ReportBody`.
`CSPViolationReportBody.toJSON()` Deprecated
    
A serializer which returns a JSON representation of the `CSPViolationReportBody` object.
## Examples
>
### Obtaining a `CSPViolationReportBody` object
To obtain a `CSPViolationReportBody` object, you must configure your page so that a CSP violation will occur. In this example, we will set our CSP to only allow content from the site's own origin, and then attempt to load a script from `apis.google.com`, which is an external origin.
First, we will set our `Content-Security-Policy` header in the HTTP response:
    
    Content-Security-Policy: default-src 'self';
    
or in the HTML `<meta>` element:
    
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
    
Then, we will attempt to load an external script:
    
    <!-- This should generate a CSP violation -->
    <script src="https://apis.google.com/js/platform.js"></script>
    
Finally, we will create a new `ReportingObserver` object to listen for CSP violations (this will need to be loaded from the same location, before the script that causes the violation).
    
    const observer = new ReportingObserver(
      (reports, observer) => {
        reports.forEach((violation) => {
          console.log(violation);
          console.log(JSON.stringify(violation));
        });
      },
      {
        types: ["csp-violation"],
        buffered: true,
      },
    );
    
    observer.observe();
    
Above we log the each violation report object and a JSON-string version of the object, which might look similar to the object below. Note that the `body` is an instance of the `CSPViolationReportBody` and the `type` is `"csp-violation"`.
    
    {
      "type": "csp-violation",
      "url": "http://127.0.0.1:9999/",
      "body": {
        "sourceFile": null,
        "lineNumber": null,
        "columnNumber": null,
        "documentURL": "http://127.0.0.1:9999/",
        "referrer": "",
        "blockedURL": "https://apis.google.com/js/platform.js",
        "effectiveDirective": "script-src-elem",
        "originalPolicy": "default-src 'self';",
        "sample": "",
        "disposition": "enforce",
        "statusCode": 200
      }
    }
    
### Sending a CSP violation report
Configuring a web page to send a CSP violation report is similar to the previous example. As before, you need to configure your page so that there is a violation.
In addition, you also need to specify the endpoint(s) where the report will be sent. A server specifies endpoints using the `Reporting-Endpoints` response header: these must be secure URLs (HTTPS). The CSP `report-to` directive is then used to specify that a particular endpoint is used for reporting CSP violations:
    
    Reporting-Endpoints: csp-endpoint="https://example.com/csp-report-to"
    Content-Security-Policy: default-src 'self'; report-to csp-endpoint
    
As before, we can trigger a violation by loading an external script from a location that is not allowed by our CSP header:
    
    <!-- This should generate a CSP violation -->
    <script src="https://apis.google.com/js/platform.js"></script>
    
The violation report will then be sent to the indicated endpoint as a JSON file. As you can see from the example below, the `type` is `"csp-violation"` and the `body` property is a serialization of the `CSPViolationReportBody` object:
    
    [
      {
        "age": 53531,
        "body": {
          "blockedURL": "inline",
          "columnNumber": 59,
          "disposition": "enforce",
          "documentURL": "https://example.com/csp-report-to",
          "effectiveDirective": "script-src-elem",
          "lineNumber": 1441,
          "originalPolicy": "default-src 'self'; report-to csp-endpoint",
          "referrer": "https://www.google.com/",
          "sample": "",
          "sourceFile": "https://example.com/csp-report-to",
          "statusCode": 200
        },
        "type": "csp-violation",
        "url": "https://example.com/csp-report-to",
        "user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36"
      }
    ]
    
  * `ReportBody`
  * `ReportingObserver`
  * `Content-Security-Policy`
  * `SecurityPolicyViolationEvent`


# SVGRectElement
The `SVGRectElement` interface provides access to the properties of `<rect>` elements, as well as methods to manipulate them.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGGeometryElement  SVGRectElement 
## Instance properties
This interface also inherits properties from its parent, `SVGGeometryElement`.
`SVGRectElement.x` Read only
    
Returns an `SVGAnimatedLength` corresponding to the `x` attribute of the given `<rect>` element.
`SVGRectElement.y` Read only
    
Returns an `SVGAnimatedLength` corresponding to the `y` attribute of the given `<rect>` element.
`SVGRectElement.width` Read only
    
Returns an `SVGAnimatedLength` corresponding to the `width` attribute of the given `<rect>` element.
`SVGRectElement.height` Read only
    
Returns an `SVGAnimatedLength` corresponding to the `height` attribute of the given `<rect>` element.
`SVGRectElement.rx` Read only
    
Returns an `SVGAnimatedLength` corresponding to the `rx` attribute of the given `<rect>` element.
`SVGRectElement.ry` Read only
    
Returns an `SVGAnimatedLength` corresponding to the `ry` attribute of the given `<rect>` element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent, `SVGGeometryElement`.
## Examples
>
### Changing the color of an SVG rectangle
This example sets the fill color of an `SVGRectElement` to a random value whenever the user clicks it.
#### HTML
    
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect width="300" height="100" id="myrect" />
      <text x="60" y="40" fill="white" font-size="40">Click Me</text>
    </svg>
    
#### CSS
    
    #myrect {
      fill: blue;
      stroke-width: 1;
      stroke: black;
    }
    
#### JavaScript
    
    const myRect = document.querySelector("#myrect");
    
    myRect.addEventListener("click", () => {
      const r = Math.floor(Math.random() * 255);
      const g = Math.floor(Math.random() * 255);
      const b = Math.floor(Math.random() * 255);
      myRect.style.fill = `rgb(${r} ${g} ${b})`;
    });
    
#### Result
  * `<rect>`


# SpeechRecognitionResultList
The `SpeechRecognitionResultList` interface of the Web Speech API represents a list of `SpeechRecognitionResult` objects, or a single one if results are being captured in `non-continuous` mode.
## Instance properties
`SpeechRecognitionResultList.length` Read only
    
Returns the length of the "array" — the number of `SpeechRecognitionResult` objects in the list.
## Instance methods
`SpeechRecognitionResultList.item`
    
A standard getter that allows `SpeechRecognitionResult` objects in the list to be accessed via array syntax.
## Examples
This code is excerpted from our Speech color changer example.
    
    recognition.onresult = (event) => {
      // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
      // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
      // It has a getter so it can be accessed like an array
      // The first [0] returns the SpeechRecognitionResult at position 0.
      // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects
      // that contain individual results.
      // These also have getters so they can be accessed like arrays.
      // The second [0] returns the SpeechRecognitionAlternative at position 0.
      // We then return the transcript property of the SpeechRecognitionAlternative object
      const color = event.results[0][0].transcript;
      diagnostic.textContent = `Result received: ${color}.`;
      bg.style.backgroundColor = color;
    };
    
  * Web Speech API


# Sensor APIs
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Sensor APIs are a set of interfaces built to a common design that expose device sensors in a consistent way to the web platform.
## Concepts and usage
Although the Generic Sensor API specification defines a `Sensor` interface, as a web developer you will never use it. Instead you'll use one of its subclasses to retrieve specific kinds of sensor data. For example, the `Accelerometer` interface returns the acceleration of the device along all three axes at the time it is read.
Sensors may or may not correspond exactly to a physical device sensor. For example, the `Gyroscope` interface corresponds exactly to a physical device interface. Alternatively, the `AbsoluteOrientationSensor` interface provides information that is algorithmically aggregated from two or more device sensors. These sensor types are referred to as low-level and high-level respectively. The latter type of sensor is also called a fusion sensor (alternatively, virtual or synthetic sensors).
### Feature detection
Sensor interfaces are only proxies for the underlying device sensors. Consequently, feature detection is more complicated for sensors than it is for other APIs. The presence of a sensor API does not tell you whether that API is connected to a real hardware sensor, whether that sensor works, if it's still connected, or even whether the user has granted access to it. Making all this information consistently available is costly to performance and battery life.
Therefore, feature detection for sensor APIs must include both detection of the APIs themselves and defensive programming strategies (see below).
The examples below show three methods for detecting sensor APIs. Additionally you can put object instantiation inside a `try...catch` block. Notice that detection through the `Navigator` interface is not one of the available options.
    
    if (typeof Gyroscope === "function") {
      // run in circles…
    }
    
    if ("ProximitySensor" in window) {
      // watch out!
    }
    
    if (window.AmbientLightSensor) {
      // go dark…
    }
    
### Defensive programming
As stated in Feature Detection, checking for a particular sensor API is insufficient for feature detection. The existence of an actual sensor must be confirmed as well. This is where defensive programming is needed. Defensive programming requires three strategies.
  * Checking for thrown errors when instantiating a sensor object.
  * Listening for errors thrown during its use.
  * Handling the errors gracefully so that the user experience is enhanced rather than degraded.


The code example below illustrates these principles. The `try...catch` block catches errors thrown during sensor instantiation. It listens for `error` events to catch errors thrown during use. The only time anything is shown to the user is when permissions need to be requested and when the sensor type isn't supported by the device.
In addition, this feature may be blocked by a Permissions Policy set on your server.
    
    let accelerometer = null;
    try {
      accelerometer = new Accelerometer({ referenceFrame: "device" });
      accelerometer.addEventListener("error", (event) => {
        // Handle runtime errors.
        if (event.error.name === "NotAllowedError") {
          // Branch to code for requesting permission.
        } else if (event.error.name === "NotReadableError") {
          console.log("Cannot connect to the sensor.");
        }
      });
      accelerometer.addEventListener("reading", () => reloadOnShake(accelerometer));
      accelerometer.start();
    } catch (error) {
      // Handle construction errors.
      if (error.name === "SecurityError") {
        // See the note above about permissions policy.
        console.log("Sensor construction was blocked by a permissions policy.");
      } else if (error.name === "ReferenceError") {
        console.log("Sensor is not supported by the User Agent.");
      } else {
        throw error;
      }
    }
    
### Permissions and Permissions Policy
Sensor readings may not be taken unless the user grants permission to a specific sensor type using the Permissions API and/or if access is not blocked by the server `Permissions-Policy`.
The example below shows how to request user-permission before attempting to use the sensor.
    
    navigator.permissions.query({ name: "accelerometer" }).then((result) => {
      if (result.state === "denied") {
        console.log("Permission to use accelerometer sensor is denied.");
        return;
      }
      // Use the sensor.
    });
    
An alternative approach is to attempt to use the sensor and listen for the `SecurityError`.
    
    const sensor = new AbsoluteOrientationSensor();
    sensor.start();
    sensor.addEventListener("error", (error) => {
      if (event.error.name === "SecurityError")
        console.log("No permissions to use AbsoluteOrientationSensor.");
    });
    
The following table describes for each sensor type, the name required for the Permissions API, the `<iframe>` element's `allow` attribute and the `Permissions-Policy` directive.
Sensor Permission Policy Name  
`AbsoluteOrientationSensor` `'accelerometer'`, `'gyroscope'`, and `'magnetometer'`  
`Accelerometer` `'accelerometer'`  
`AmbientLightSensor` `'ambient-light-sensor'`  
`GravitySensor` `'accelerometer'`  
`Gyroscope` `'gyroscope'`  
`LinearAccelerationSensor` `'accelerometer'`  
`Magnetometer` `'magnetometer'`  
`RelativeOrientationSensor` `'accelerometer'`, and `'gyroscope'`  
### Readings
Sensor readings are received through the `reading` event callback which is inherited by all sensor types. Reading frequency is decided by you, accomplished with an option passed to a sensor's constructor. The option is a number that specifies the number of readings per second. A whole number or decimal may be used, the latter for frequencies less than a second. The actual reading frequency depends on device hardware and consequently may be less than requested.
The following example illustrates this using the `Magnetometer` sensor.
    
    let magSensor = new Magnetometer({ frequency: 60 });
    
    magSensor.addEventListener("reading", (e) => {
      console.log(`Magnetic field along the X-axis ${magSensor.x}`);
      console.log(`Magnetic field along the Y-axis ${magSensor.y}`);
      console.log(`Magnetic field along the Z-axis ${magSensor.z}`);
    });
    magSensor.addEventListener("error", (event) => {
      console.log(event.error.name, event.error.message);
    });
    magSensor.start();
    
## Interfaces
`AbsoluteOrientationSensor`
    
Describes the device's physical orientation in relation to the Earth's reference coordinate system.
`Accelerometer`
    
Provides the acceleration applied to the device along all three axes.
`AmbientLightSensor`
    
Returns the current light level or illuminance of the ambient light around the hosting device.
`GravitySensor`
    
Provides the gravity applied to the device along all three axes.
`Gyroscope`
    
Provides the angular velocity of the device along all three axes.
`LinearAccelerationSensor`
    
Provides the acceleration applied to the device along all three axes, but without the contribution of gravity.
`Magnetometer`
    
Provides information about the magnetic field as detected by the device's primary magnetometer sensor.
`OrientationSensor`
    
The base class for the `AbsoluteOrientationSensor`. This interface cannot be used directly, instead it provides properties and methods accessed by interfaces that inherit from it.
`RelativeOrientationSensor`
    
Describes the device's physical orientation without regard to the Earth's reference coordinate system.
`Sensor`
    
The base class for all the other sensor interfaces. This interface cannot be used directly. Instead, it provides properties, event handlers, and methods accessed by interfaces that inherit from it.
`SensorErrorEvent`
    
Provides information about errors thrown by a `Sensor` or related interface.
>
### api.Sensor
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Sensor_APIs` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`activate_event` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`activated` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`error_event` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`hasReading` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`reading_event` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`start` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`stop` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`timestamp` 67 79 No 54 No 67 No 48 No 9.0 67 No  
### api.Accelerometer
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Accelerometer` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`Sensor_APIs` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`x` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`y` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`z` 67 79 No 54 No 67 No 48 No 9.0 67 No  
### api.OrientationSensor
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Sensor_APIs` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`populateMatrix` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`quaternion` 67 79 No 54 No 67 No 48 No 9.0 67 No  
### api.Gyroscope
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Gyroscope` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`Sensor_APIs` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`x` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`y` 67 79 No 54 No 67 No 48 No 9.0 67 No  
`z` 67 79 No 54 No 67 No 48 No 9.0 67 No  
### api.Magnetometer
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Magnetometer` 56 79 No 43 No 56 No No No No No No  
`Sensor_APIs` 56 79 No 43 No 56 No No No No No No  
`x` 56 79 No 43 No 56 No No No No No No  
`y` 56 79 No 43 No 56 No No No No No No  
`z` 56 79 No 43 No 56 No No No No No No  
### api.AmbientLightSensor
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`AmbientLightSensor` 6756 7979 No 5443 No 6756 No No No No No No  
`Sensor_APIs` 6756 7979 No 5443 No 6756 No No No No No No  
`illuminance` 67In Chrome 79, this method stopped returning floats and returned integers to avoid fingerprinting.56In Chrome 79, this method stopped returning floats and returned integers to avoid fingerprinting. 79In Edge 79, this method stopped returning floats and returned integers to avoid fingerprinting.79In Edge 79, this method stopped returning floats and returned integers to avoid fingerprinting. No 54In Opera 66, this method stopped returning floats and returned integers to avoid fingerprinting.43In Opera 66, this method stopped returning floats and returned integers to avoid fingerprinting. No 67In Chrome Android 79, this method stopped returning floats and returned integers to avoid fingerprinting.56In Chrome Android 79, this method stopped returning floats and returned integers to avoid fingerprinting. No No No No No No  
# NDEFRecord
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `NDEFRecord` interface of the Web NFC API provides data that can be read from, or written to, compatible NFC devices, e.g., NFC tags supporting NDEF.
## Constructor
`NDEFRecord()` Experimental
    
Returns a new `NDEFRecord`.
## Instance properties
`NDEFRecord.recordType` Experimental Read only
    
Returns the record type of the record. Records must have either a standardized well-known type name such as `"empty"`, `"text"`, `"url"`, `"smart-poster"`, `"absolute-url"`, `"mime"`, or `"unknown"` or else an external type name, which consists of a domain name and custom type name separated by a colon (":").
`NDEFRecord.mediaType` Experimental Read only
    
Returns the MIME type of the record. This value will be `null` if `recordType` is not equal to `"mime"`.
`NDEFRecord.id` Experimental Read only
    
Returns the record identifier, which is an absolute or relative URL used to identify the record.
Note: The uniqueness of the identifier is enforced only by the generator of the record.
`NDEFRecord.data` Experimental Read only
    
Returns a `DataView` containing the raw bytes of the record's payload.
`NDEFRecord.encoding` Experimental Read only
    
Returns the encoding of a textual payload, or `null` otherwise.
`NDEFRecord.lang` Experimental Read only
    
Returns the language of a textual payload, or `null` if one was not supplied.
## Instance methods
`NDEFRecord.toRecords()` Experimental
    
Converts `NDEFRecord.data` to a sequence of records. This allows parsing the payloads of record types which may contain nested records, such as smart poster and external type records.
# USB
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `USB` interface of the WebUSB API provides attributes and methods for finding and connecting USB devices from a web page.
Use `navigator.usb` to get access to the `USB` object.
The USB interface inherits from `EventTarget`.
EventTarget  USB 
## Instance properties
None.
## Instance methods
`USB.getDevices()` Experimental
    
Returns a `Promise` that resolves with an array of `USBDevice` objects for paired attached devices.
`USB.requestDevice()` Experimental
    
Returns a `Promise` that resolves with an instance of `USBDevice` if the specified device is found. Calling this function triggers the user agent's pairing flow.
## Events
`connect` Experimental
    
Fired whenever a previously paired device is connected.
`disconnect` Experimental
    
Fired whenever a paired device is disconnected.
# PerformanceMeasure
Note: This feature is available in Web Workers.
`PerformanceMeasure` is an abstract interface for `PerformanceEntry` objects with an `entryType` of `"measure"`. Entries of this type are created by calling `performance.measure()` to add a named `DOMHighResTimeStamp` (the measure) between two marks to the browser's performance timeline.
PerformanceEntry  PerformanceMeasure 
## Instance properties
This interface defines:
`PerformanceMeasure.detail`
    
Contains arbitrary metadata about the measure.
In addition, it extends the following `PerformanceEntry` properties by qualifying/constraining the properties as follows:
`PerformanceEntry.entryType`
    
Returns `"measure"`.
`PerformanceEntry.name`
    
Returns the name given to the measure when it was created via a call to `performance.measure()`.
`PerformanceEntry.startTime`
    
Returns a `timestamp` given to the measure when `performance.measure()` was called.
`PerformanceEntry.duration`
    
Returns a `DOMHighResTimeStamp` that is the duration of the measure (typically, the measure's end mark timestamp minus its start mark timestamp).
## Instance methods
This interface has no methods.
## Example
See the example in Using the User Timing API.
  * User Timing (Overview)
  * Using the User Timing API


# ScreenDetailed
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `ScreenDetailed` interface of the Window Management API represents detailed information about one specific screen available to the user's device.
`ScreenDetailed` objects can be accessed via the `ScreenDetails.screens` and `ScreenDetails.currentScreen` properties.
Screen  ScreenDetailed 
## Instance properties
Inherits properties from its parent, `Screen`.
`availLeft` Read only Experimental
    
A number representing the x-coordinate (left-hand edge) of the available screen area.
`availTop` Read only Experimental
    
A number representing the y-coordinate (top edge) of the available screen area.
`devicePixelRatio` Read only Experimental
    
A number representing the screen's device pixel ratio.
`isInternal` Read only Experimental
    
A boolean indicating whether the screen is internal to the device or external.
`isPrimary` Read only Experimental
    
A boolean indicating whether the screen is set as the operating system (OS) primary screen or not.
`label` Read only Experimental
    
A string providing a descriptive label for the screen, for example "Built-in Retina Display".
`left` Read only Experimental
    
A number representing the x-coordinate (left-hand edge) of the total screen area.
`top` Read only Experimental
    
A number representing the y-coordinate (top edge) of the total screen area.
## Events
Inherits events from its parent, `Screen`.
`change` Experimental
    
Fired on a specific screen when any property of the screen changes — width or height, available width or available height, color depth, or orientation, screen position and available screen position, device pixel ratio, label or screen's designation.
## Examples
When `Window.getScreenDetails()` is invoked, the user will be asked for permission to manage windows on all their displays (the status of this permission can be checked using `Permissions.query()` to query `window-management`). Provided they grant permission, the resulting `ScreenDetails` object contains `ScreenDetailed` objects representing all the screens available to the user's system.
The following example opens a window in the top-left corner of the OS primary screen:
    
    // Return ScreenDetails
    const allScreens = await window.getScreenDetails();
    
    // Return the primary screen ScreenDetailed object
    const primaryScreenDetailed = allScreens.screens.find(
      (screenDetailed) => screenDetailed.isPrimary,
    );
    
    // Open a window in the top-left corner of the OS primary screen
    window.open(
      "https://example.com",
      "_blank",
      `left=${primaryScreenDetailed.availLeft},
       top=${primaryScreenDetailed.availTop},
       width=200,
       height=200`,
    );
    
Note: See Multi-window learning environment for a full example (see the source code also).
  * Window Management API


# Background Synchronization API
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The Background Synchronization API enables a web app to defer tasks so that they can be run in a service worker once the user has a stable network connection.
## Concepts and usage
The Background Synchronization API allows web applications to defer server synchronization work to their service worker to handle at a later time, if the device is offline. Uses may include sending requests in the background if they couldn't be sent while the application was being used.
For example, an email client application could let its users compose and send messages at any time, even when the device has no network connection. The application frontend just registers a sync request and the service worker gets alerted when the network is present again and handles the sync.
The `SyncManager` interface is available through `ServiceWorkerRegistration.sync`. A unique tag identifier is set to 'name' the sync event, which can then be listened for within the `ServiceWorker` script. Once the event is received you can then run any functionality available, such as sending requests to the server.
As this API relies on service workers, functionality provided by this API is only available in a secure context.
## Interfaces
`SyncManager` Experimental
    
Registers tasks to be run in a service worker at a later time with network connectivity. These tasks are referred to as background sync requests.
`SyncEvent` Experimental
    
Represents a synchronization event, sent to the global scope of a `ServiceWorker`. It provides a way to run tasks in the service worker once the device has network connectivity.
### Extensions to other interfaces
The following additions to the Service Worker API provide an entry point for setting up background synchronization.
`ServiceWorkerRegistration.sync` Read only
    
Returns a reference to the `SyncManager` interface for registering tasks to run once the device has network connectivity.
`sync` event
    
An event handler fired whenever a `sync` event occurs. This happens as soon as the network becomes available.
## Examples
The following examples show how to use the interface.
### Requesting a background sync
The following asynchronous function registers a background sync from a browsing context:
    
    async function syncMessagesLater() {
      const registration = await navigator.serviceWorker.ready;
      try {
        await registration.sync.register("sync-messages");
      } catch {
        console.log("Background Sync could not be registered!");
      }
    }
    
### Verifying a background sync by Tag
This code checks to see if a background sync task with a given tag is registered.
    
    navigator.serviceWorker.ready.then((registration) => {
      registration.sync.getTags().then((tags) => {
        if (tags.includes("sync-messages")) {
          console.log("Messages sync already requested");
        }
      });
    });
    
### Listening for a background sync within a Service Worker
The following example shows how to respond to a background sync event in the service worker.
    
    self.addEventListener("sync", (event) => {
      if (event.tag === "sync-messages") {
        event.waitUntil(sendOutboxMessages());
      }
    });
    
>
### api.SyncManager
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Background_Synchronization_API` 49 79 No 36 No 49 No 36 No 5.0 No No  
`getTags` 49 79 No 36 No 49 No 36 No 5.0 No No  
`register` 49 79 No 36 No 49 No 36 No 5.0 No No  
`worker_support` 6149–61Only available in the `Window` and `ServiceWorker` global scopes. 79 No No No 6149–61Only available in the `Window` and `ServiceWorker` global scopes. No No No 8.05.0–8.0Only available in the `Window` and `ServiceWorker` global scopes. No No  
### api.ServiceWorkerGlobalScope.sync_event
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Background_Synchronization_API` 49 79 No 24 No 49 No 24 No 5.0 No No  
  * Introducing Background Sync


# CSS Custom Highlight API
The CSS Custom Highlight API provides a mechanism for styling arbitrary text ranges on a document by using JavaScript to create the ranges, and CSS to style them.
## Concepts and usage
Styling text ranges on a webpage can be very useful. For example, text editing web apps highlight spelling or grammar errors, and code editors highlight syntax errors.
The CSS Custom Highlight API extends the concept of other highlight pseudo-elements such as `::selection`, `::spelling-error`, `::grammar-error`, and `::target-text` by providing a way to create and style arbitrary `Range` objects, rather than being limited to browser-defined ranges.
Using the CSS Custom Highlight API, you can programmatically create text ranges and highlight them without affecting the DOM structure in the page.
There are four steps to style text ranges on a webpage using the CSS Custom Highlight API:
  1. Creating `Range` objects.
  2. Creating `Highlight` objects for these ranges.
  3. Registering the highlights using the `HighlightRegistry`.
  4. Styling the highlights using the `::highlight()` pseudo-element.


### Create ranges
The first step is to define the text ranges that you want to style by creating `Range` objects in JavaScript. For example:
    
    const parentNode = document.getElementById("foo");
    
    const range1 = new Range();
    range1.setStart(parentNode, 10);
    range1.setEnd(parentNode, 20);
    
    const range2 = new Range();
    range2.setStart(parentNode, 40);
    range2.setEnd(parentNode, 60);
    
### Create highlights
The second step is to instantiate `Highlight` objects for your text ranges.
Multiple ranges can be associated to one highlight. If you want to highlight multiple pieces of text the same way, you need to create a single highlight and initialize it with the corresponding ranges.
    
    const highlight = new Highlight(range1, range2);
    
But you can also create as many highlights as you need. For example, if you are building a collaborative text editor where each user gets a different text color, then you can create one highlight per user, as seen in the code snippet below:
    
    const user1Highlight = new Highlight(user1Range1, user1Range2);
    const user2Highlight = new Highlight(user2Range1, user2Range2, user2Range3);
    
Each highlight can be styled differently.
### Register highlights
Once highlights have been created, register them by using the `HighlightRegistry` available as `CSS.highlights`.
The registry is a `Map`-like object used to register highlights by names, as seen below:
    
    CSS.highlights.set("user-1-highlight", user1Highlight);
    CSS.highlights.set("user-2-highlight", user2Highlight);
    
In the above code snippet, the `user-1-highlight` and `user-2-highlight` strings are custom identifiers that can be used in CSS to apply styles to the registered highlights.
You can register as many highlights as you need in the registry, as well as remove highlights and clear the entire registry.
    
    // Remove a single highlight from the registry.
    CSS.highlights.delete("user-1-highlight");
    
    // Clear the registry.
    CSS.highlights.clear();
    
### Style highlights
The final step is to style the registered highlights. This is done by using the `::highlight()` pseudo-element. For example, to style the `user-1-highlight` highlight registered in the previous step:
    
    ::highlight(user-1-highlight) {
      background-color: yellow;
      color: black;
    }
    
## Interfaces
`Highlight`
    
This interface is used to represent a collection of ranges to be styled on a document.
`HighlightRegistry`
    
Accessible via `CSS.highlights`, this `Map`-like object is used to register highlights with custom identifiers.
## Examples
>
### Highlighting search results
This example shows how to use the CSS Custom Highlight API to highlight search results.
#### HTML
The HTML code snippet below defines a search field and an article with a few paragraphs of text:
    
    <label>Search within text <input id="query" type="text" /></label>
    <article>
      <p>
        Maxime debitis hic, delectus perspiciatis laborum molestiae labore,
        deleniti, quam consequatur iure veniam alias voluptas nisi quo. Dolorem
        eaque alias, quo vel quas repudiandae architecto deserunt quidem, sapiente
        laudantium nulla.
      </p>
      <p>
        Maiores odit molestias, necessitatibus doloremque dolor illum reprehenderit
        provident nostrum laboriosam iste, tempore perferendis! Ab porro neque esse
        voluptas libero necessitatibus fugiat, ex, minus atque deserunt veniam
        molestiae tempora? Vitae.
      </p>
      <p>
        Dolorum facilis voluptate eaque eius similique ducimus dignissimos assumenda
        quos architecto. Doloremque deleniti non exercitationem rerum quam alias
        harum, nisi obcaecati corporis temporibus vero sapiente voluptatum est
        quibusdam id ipsa.
      </p>
    </article>
    
#### JavaScript
JavaScript is used to listen to the `input` event on the search field. When the event is fired, the code locates matches for the input text in the article text. It then creates ranges for the matches, and uses the CSS Custom Highlight API to create and register a `search-results` highlight object:
    
    const query = document.getElementById("query");
    const article = document.querySelector("article");
    
    // Find all text nodes in the article. We'll search within
    // these text nodes.
    const treeWalker = document.createTreeWalker(article, NodeFilter.SHOW_TEXT);
    const allTextNodes = [];
    let currentNode = treeWalker.nextNode();
    while (currentNode) {
      allTextNodes.push(currentNode);
      currentNode = treeWalker.nextNode();
    }
    
    // Listen to the input event to run the search.
    query.addEventListener("input", () => {
      // If the CSS Custom Highlight API is not supported,
      // display a message and bail-out.
      if (!CSS.highlights) {
        article.textContent = "CSS Custom Highlight API not supported.";
        return;
      }
    
      // Clear the HighlightRegistry to remove the
      // previous search results.
      CSS.highlights.clear();
    
      // Clean-up the search query and bail-out if
      // if it's empty.
      const str = query.value.trim().toLowerCase();
      if (!str) {
        return;
      }
    
      // Iterate over all text nodes and find matches.
      const ranges = allTextNodes
        .map((el) => ({ el, text: el.textContent.toLowerCase() }))
        .map(({ text, el }) => {
          const indices = [];
          let startPos = 0;
          while (startPos < text.length) {
            const index = text.indexOf(str, startPos);
            if (index === -1) break;
            indices.push(index);
            startPos = index + str.length;
          }
    
          // Create a range object for each instance of
          // str we found in the text node.
          return indices.map((index) => {
            const range = new Range();
            range.setStart(el, index);
            range.setEnd(el, index + str.length);
            return range;
          });
        });
    
      // Create a Highlight object for the ranges.
      const searchResultsHighlight = new Highlight(...ranges.flat());
    
      // Register the Highlight object in the registry.
      CSS.highlights.set("search-results", searchResultsHighlight);
    });
    
#### CSS
Finally, the `::highlight()` pseudo-element is used in CSS to style the highlights:
    
    ::highlight(search-results) {
      background-color: #ff0066;
      color: white;
    }
    
#### Result
The result is shown below. Type text within the search field to highlight matches in the article:
>
### api.Highlight
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`@@iterator` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`Highlight` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`CSS_Custom_Highlight_API` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`add` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`clear` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`delete` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`entries` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`forEach` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`has` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`keys` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`priority` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`size` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`type` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`values` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
### api.HighlightRegistry
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`@@iterator` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`CSS_Custom_Highlight_API` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`clear` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`delete` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`entries` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`forEach` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`get` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`has` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`highlightsFromPoint` 140 140 No 124 No 140 No No No No 140 No  
`keys` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`set` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`size` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
`values` 105 105 140 91 17.2 105 140 72 17.2 20.0 105 17.2  
### css.selectors.highlight
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`CSS_Custom_Highlight_API` 105 105 140Cannot yet be used with `text-decoration` and `text-shadow`. 91 17.2The style is ignored when combined with `user-select: none`. See bug 278455. 105 140Cannot yet be used with `text-decoration` and `text-shadow`. 72 17.2The style is ignored when combined with `user-select: none`. See bug 278455. 20.0 105 17.2The style is ignored when combined with `user-select: none`. See bug 278455.  
  * CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
  * HTML `contentEditable` attribute
  * CSS `pseudo-elements`
  * CSS custom highlight API module


# GPUSampler
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUSampler` interface of the WebGPU API represents an object that can control how shaders transform and filter texture resource data.
A `GPUSampler` object instance is created using the `GPUDevice.createSampler()` method.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Examples
The following snippet creates a `GPUSampler` that does trilinear filtering and repeats texture coordinates:
    
    // …
    const sampler = device.createSampler({
      addressModeU: "repeat",
      addressModeV: "repeat",
      magFilter: "linear",
      minFilter: "linear",
      mipmapFilter: "linear",
    });
    
The WebGPU samples Shadow Mapping sample uses comparison samplers to sample from a depth texture to render shadows.
  * The WebGPU API


# WebGL2RenderingContext
Note: This feature is available in Web Workers.
The WebGL2RenderingContext interface provides the OpenGL ES 3.0 rendering context for the drawing surface of an HTML `<canvas>` element.
To get an object of this interface, call `getContext()` on a `<canvas>` element, supplying "webgl2" as the argument:
    
    const canvas = document.getElementById("myCanvas");
    const gl = canvas.getContext("webgl2");
    
Note: WebGL 2 is an extension to WebGL 1. The `WebGL2RenderingContext` interface implements all members of the `WebGLRenderingContext` interface. Some methods of the WebGL 1 context can accept additional values when used in a WebGL 2 context. You will find this info noted on the WebGL 1 reference pages.
The WebGL tutorial has more information, examples, and resources on how to get started with WebGL.
## Constants
See the WebGL constants page.
## State information
`WebGL2RenderingContext.getIndexedParameter()`
    
Returns the indexed value for the given `target`.
## Buffers
`WebGL2RenderingContext.bufferData()`
    
Initializes and creates the buffer object's data store.
`WebGL2RenderingContext.bufferSubData()`
    
Updates a subset of a buffer object's data store.
`WebGL2RenderingContext.copyBufferSubData()`
    
Copies part of the data of a buffer to another buffer.
`WebGL2RenderingContext.getBufferSubData()`
    
Reads data from a buffer and writes them to an `ArrayBuffer` or `SharedArrayBuffer`.
## Framebuffers
`WebGL2RenderingContext.blitFramebuffer()`
    
Transfers a block of pixels from the read framebuffer to the draw framebuffer.
`WebGL2RenderingContext.framebufferTextureLayer()`
    
Attaches a single layer of a texture to a framebuffer.
`WebGL2RenderingContext.invalidateFramebuffer()`
    
Invalidates the contents of attachments in a framebuffer.
`WebGL2RenderingContext.invalidateSubFramebuffer()`
    
Invalidates portions of the contents of attachments in a framebuffer
`WebGL2RenderingContext.readBuffer()`
    
Selects a color buffer as the source for pixels.
## Renderbuffers
`WebGL2RenderingContext.getInternalformatParameter()`
    
Returns information about implementation-dependent support for internal formats.
`WebGL2RenderingContext.renderbufferStorageMultisample()`
    
Creates and initializes a renderbuffer object's data store and allows specifying the number of samples to be used.
## Textures
`WebGL2RenderingContext.texStorage2D()`
    
Specifies all levels of two-dimensional texture storage.
`WebGL2RenderingContext.texStorage3D()`
    
Specifies all levels of a three-dimensional texture or two-dimensional array texture.
`WebGL2RenderingContext.texImage3D()`
    
Specifies a three-dimensional texture image.
`WebGL2RenderingContext.texSubImage3D()`
    
Specifies a sub-rectangle of the current 3D texture.
`WebGL2RenderingContext.copyTexSubImage3D()`
    
Copies pixels from the current `WebGLFramebuffer` into an existing 3D texture sub-image.
`WebGL2RenderingContext.compressedTexImage3D`
    
Specifies a three-dimensional texture image in a compressed format.
`WebGL2RenderingContext.compressedTexSubImage3D()`
    
Specifies a three-dimensional sub-rectangle for a texture image in a compressed format.
## Programs and shaders
`WebGL2RenderingContext.getFragDataLocation()`
    
Returns the binding of color numbers to user-defined varying out variables.
## Uniforms and attributes
`WebGL2RenderingContext.uniform[1234][uif][v]()`
    
Methods specifying values of uniform variables.
`WebGL2RenderingContext.uniformMatrix[234]x[234]fv()`
    
Methods specifying matrix values for uniform variables.
`WebGL2RenderingContext.vertexAttribI4[u]i[v]()`
    
Methods specifying integer values for generic vertex attributes.
`WebGL2RenderingContext.vertexAttribIPointer()`
    
Specifies integer data formats and locations of vertex attributes in a vertex attributes array.
## Color spaces
`WebGL2RenderingContext.drawingBufferColorSpace`
    
Specifies the color space of the WebGL drawing buffer.
`WebGL2RenderingContext.unpackColorSpace`
    
Specifies the color space to convert to when importing textures.
## Drawing buffers
`WebGL2RenderingContext.vertexAttribDivisor()`
    
Modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with `gl.drawArraysInstanced()` and `gl.drawElementsInstanced()`.
`WebGL2RenderingContext.drawArraysInstanced()`
    
Renders primitives from array data. In addition, it can execute multiple instances of the range of elements.
`WebGL2RenderingContext.drawElementsInstanced()`
    
Renders primitives from array data. In addition, it can execute multiple instances of a set of elements.
`WebGL2RenderingContext.drawRangeElements()`
    
Renders primitives from array data in a given range.
`WebGL2RenderingContext.drawBuffers()`
    
Specifies a list of color buffers to be drawn into.
`WebGL2RenderingContext.clearBuffer[fiuv]()`
    
Clears buffers from the currently bound framebuffer.
## Query objects
Methods for working with `WebGLQuery` objects.
`WebGL2RenderingContext.createQuery()`
    
Creates a new `WebGLQuery` object.
`WebGL2RenderingContext.deleteQuery()`
    
Deletes a given `WebGLQuery` object.
`WebGL2RenderingContext.isQuery()`
    
Returns `true` if a given object is a valid `WebGLQuery` object.
`WebGL2RenderingContext.beginQuery()`
    
Begins an asynchronous query.
`WebGL2RenderingContext.endQuery()`
    
Marks the end of an asynchronous query.
`WebGL2RenderingContext.getQuery()`
    
Returns a `WebGLQuery` object for a given target.
`WebGL2RenderingContext.getQueryParameter()`
    
Returns information about a query.
## Sampler objects
`WebGL2RenderingContext.createSampler()`
    
Creates a new `WebGLSampler` object.
`WebGL2RenderingContext.deleteSampler()`
    
Deletes a given `WebGLSampler` object.
`WebGL2RenderingContext.bindSampler()`
    
Binds a given `WebGLSampler` to a texture unit.
`WebGL2RenderingContext.isSampler()`
    
Returns `true` if a given object is a valid `WebGLSampler` object.
`WebGL2RenderingContext.samplerParameter[if]()`
    
Sets sampler parameters.
`WebGL2RenderingContext.getSamplerParameter()`
    
Returns sampler parameter information.
## Sync objects
`WebGL2RenderingContext.fenceSync()`
    
Creates a new `WebGLSync` object and inserts it into the GL command stream.
`WebGL2RenderingContext.isSync()`
    
Returns `true` if the passed object is a valid `WebGLSync` object.
`WebGL2RenderingContext.deleteSync()`
    
Deletes a given `WebGLSync` object.
`WebGL2RenderingContext.clientWaitSync()`
    
Blocks and waits for a `WebGLSync` object to become signaled or a given timeout to be passed.
`WebGL2RenderingContext.waitSync()`
    
Returns immediately, but waits on the GL server until the given `WebGLSync` object is signaled.
`WebGL2RenderingContext.getSyncParameter()`
    
Returns parameter information of a `WebGLSync` object.
## Transform feedback
`WebGL2RenderingContext.createTransformFeedback()`
    
Creates and initializes `WebGLTransformFeedback` objects.
`WebGL2RenderingContext.deleteTransformFeedback()`
    
Deletes a given `WebGLTransformFeedback` object.
`WebGL2RenderingContext.isTransformFeedback()`
    
Returns `true` if the passed object is a valid `WebGLTransformFeedback` object.
`WebGL2RenderingContext.bindTransformFeedback()`
    
Binds a passed `WebGLTransformFeedback` object to the current GL state.
`WebGL2RenderingContext.beginTransformFeedback()`
    
Starts a transform feedback operation.
`WebGL2RenderingContext.endTransformFeedback()`
    
Ends a transform feedback operation.
`WebGL2RenderingContext.transformFeedbackVaryings()`
    
Specifies values to record in `WebGLTransformFeedback` buffers.
`WebGL2RenderingContext.getTransformFeedbackVarying()`
    
Returns information about varying variables from `WebGLTransformFeedback` buffers.
`WebGL2RenderingContext.pauseTransformFeedback()`
    
Pauses a transform feedback operation.
`WebGL2RenderingContext.resumeTransformFeedback()`
    
Resumes a transform feedback operation.
## Uniform buffer objects
`WebGL2RenderingContext.bindBufferBase()`
    
Binds a given `WebGLBuffer` to a given binding point (`target`) at a given `index`.
`WebGL2RenderingContext.bindBufferRange()`
    
Binds a range of a given `WebGLBuffer` to a given binding point (`target`) at a given `index`.
`WebGL2RenderingContext.getUniformIndices()`
    
Retrieves the indices of a number of uniforms within a `WebGLProgram`.
`WebGL2RenderingContext.getActiveUniforms()`
    
Retrieves information about active uniforms within a `WebGLProgram`.
`WebGL2RenderingContext.getUniformBlockIndex()`
    
Retrieves the index of a uniform block within a `WebGLProgram`.
`WebGL2RenderingContext.getActiveUniformBlockParameter()`
    
Retrieves information about an active uniform block within a `WebGLProgram`.
`WebGL2RenderingContext.getActiveUniformBlockName()`
    
Retrieves the name of the active uniform block at a given index within a `WebGLProgram`.
`WebGL2RenderingContext.uniformBlockBinding()`
    
Assigns binding points for active uniform blocks.
## Vertex array objects
Methods for working with `WebGLVertexArrayObject` (VAO) objects.
`WebGL2RenderingContext.createVertexArray()`
    
Creates a new `WebGLVertexArrayObject`.
`WebGL2RenderingContext.deleteVertexArray()`
    
Deletes a given `WebGLVertexArrayObject`.
`WebGL2RenderingContext.isVertexArray()`
    
Returns `true` if a given object is a valid `WebGLVertexArrayObject`.
`WebGL2RenderingContext.bindVertexArray()`
    
Binds a given `WebGLVertexArrayObject` to the buffer.
  * `HTMLCanvasElement`
  * `WebGLRenderingContext`


# ImageTrack
Note: This feature is available in Dedicated Web Workers.
The `ImageTrack` interface of the WebCodecs API represents an individual image track.
## Instance properties
`ImageTrack.animated` Read only
    
Returns a `boolean` indicating whether the track is animated and therefore has multiple frames.
`ImageTrack.frameCount` Read only
    
Returns an integer indicating the number of frames in the track.
`ImageTrack.repetitionCount` Read only
    
Returns an integer indicating the number of times that the animation repeats.
`ImageTrack.selected` Read only
    
Returns a `boolean` indicating whether the track is selected for decoding.
# AudioTrack
The `AudioTrack` interface represents a single audio track from one of the HTML media elements, `<audio>` or `<video>`.
The most common use for accessing an `AudioTrack` object is to toggle its `enabled` property in order to mute and unmute the track.
## Instance properties
`enabled`
    
A Boolean value which controls whether or not the audio track's sound is enabled. Setting this value to `false` mutes the track's audio.
`id` Read only
    
A string which uniquely identifies the track within the media. This ID can be used to locate a specific track within an audio track list by calling `AudioTrackList.getTrackById()`. The ID can also be used as the fragment part of the URL if the media supports seeking by media fragment per the Media Fragments URI specification.
`kind` Read only
    
A string specifying the category into which the track falls. For example, the main audio track would have a `kind` of `"main"`.
`label` Read only
    
A string providing a human-readable label for the track. For example, an audio commentary track for a movie might have a `label` of `"Commentary with director Christopher Nolan and actors Leonardo DiCaprio and Elliot Page."` This string is empty if no label is provided.
`language` Read only
    
A string specifying the audio track's primary language, or an empty string if unknown. The language is specified as a BCP 47 (RFC 5646) language code, such as `"en-US"` or `"pt-BR"`.
`sourceBuffer` Read only
    
The `SourceBuffer` that created the track. Returns null if the track was not created by a `SourceBuffer` or the `SourceBuffer` has been removed from the `MediaSource.sourceBuffers` attribute of its parent media source.
## Usage notes
To get an `AudioTrack` for a given media element, use the element's `audioTracks` property, which returns an `AudioTrackList` object from which you can get the individual tracks contained in the media:
    
    const el = document.querySelector("video");
    const tracks = el.audioTracks;
    
You can then access the media's individual tracks using either array syntax or functions such as `forEach()`.
This first example gets the first audio track on the media:
    
    const firstTrack = tracks[0];
    
The next example scans through all of the media's audio tracks, enabling any that are in the user's preferred language (taken from a variable `userLanguage`) and disabling any others.
    
    tracks.forEach((track) => {
      track.enabled = track.language === userLanguage;
    });
    
The `language` is in standard (RFC 5646) format. For US English, this would be `"en-US"`, for example.
## Example
See `AudioTrack.label` for an example that shows how to get an array of track kinds and labels for a specified media element, filtered by kind.
# CSS Painting API
The CSS Painting API — part of the CSS Houdini umbrella of APIs — allows developers to write JavaScript functions that can draw directly into an element's background, border, or content.
## Concepts and usage
Essentially, the CSS Painting API contains functionality allowing developers to create custom values for `paint()`, a CSS `<image>` function. You can then apply these values to properties like `background-image` to set complex custom backgrounds on an element.
For example:
    
    aside {
      background-image: paint(my-painted-image);
    }
    
The API defines a `worklet` that can be used to programmatically generate an image that responds to computed style changes. To find out more about how this is used, consult Using the CSS Painting API.
## Interfaces
`PaintWorkletGlobalScope`
    
The global execution context of the paint worklet.
`PaintRenderingContext2D`
    
The rendering context for the CSS Painting API's rendering context for drawing to the bitmap.
`PaintSize`
    
Represents the size of the output bitmap that the author should draw.
## Examples
The following example creates a list of items with a background image that rotates between three different colors and three widths. In a supporting browser you will see something like the image below.
To achieve this we'll define two custom CSS properties, `--box-color` and `--width-subtractor`.
### The paint worklet
The worklet is an external JavaScript file (in this case we've called it `boxbg.js`) which defines a paint `worklet`. Using the worklet, we can access CSS properties (and custom properties) of elements:
    
    registerPaint(
      "boxbg",
      class {
        static get contextOptions() {
          return { alpha: true };
        }
        /*
          Retrieve any custom properties (or regular properties,
          such as 'height') defined for the element, and return
          them as an array.
        */
        static get inputProperties() {
          return ["--box-color", "--width-subtractor"];
        }
    
        paint(ctx, size, props) {
          /*
            ctx -> drawing context
            size -> paintSize: width and height
            props -> properties: get() method
          */
          ctx.fillStyle = props.get("--box-color");
          ctx.fillRect(
            0,
            size.height / 3,
            size.width * 0.4 - props.get("--width-subtractor"),
            size.height * 0.6,
          );
        }
      },
    );
    
We used the `inputProperties()` method in the `registerPaint()` class to get the values of two custom properties set on an element that has `boxbg` applied to it and then used those within our `paint()` function. The `inputProperties()` method can return all properties affecting the element, not just custom properties.
### Using the paint worklet
#### HTML
    
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
      <li>item N</li>
    </ul>
    
#### CSS
In our CSS, we define the `--box-color` and `--width-subtractor` custom properties.
    
    body {
      font: 1.2em / 1.2 sans-serif;
    }
    li {
      background-image: paint(boxbg);
      --box-color: hsl(55 90% 60%);
    }
    
    li:nth-of-type(3n) {
      --box-color: hsl(155 90% 60%);
      --width-subtractor: 20;
    }
    
    li:nth-of-type(3n + 1) {
      --box-color: hsl(255 90% 60%);
      --width-subtractor: 40;
    }
    
#### JavaScript
The setup and logic of the paint worklet is in the external script. To register the worklet, we need to call `addModule()` from our main script:
    
    CSS.paintWorklet.addModule(
      "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/boxbg.js",
    );
    
In this example, the worklet is hosted at `https://mdn.github.io/`, but your worklet may be a relative resource like so:
    
    CSS.paintWorklet.addModule("boxbg.js");
    
#### Result
While you can't play with the worklet's script, you can alter the custom property values in DevTools to change the colors and width of the background image.
  * Using the CSS Painting API
  * CSS Typed Object Model API
  * Houdini APIs


# SVGScriptElement
The `SVGScriptElement` interface corresponds to the SVG `<script>` element.
EventTarget  Node  Element  SVGElement  SVGScriptElement 
## Instance properties
`SVGScriptElement.href` Read only
    
An `SVGAnimatedString` corresponding to the `href` or `xlink:href` Deprecated attribute of the given `<script>` element.
`SVGScriptElement.type` Read only
    
A string corresponding to the `type` attribute of the given `<script>` element. A `DOMException` is raised with the code `NO_MODIFICATION_ALLOWED_ERR` on an attempt to change the value of a read only attribute.
`SVGScriptElement.crossOrigin` Read only
    
A string corresponding to the `crossorigin` attribute of the given `<script>` element.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.
# Broadcast Channel API
Note: This feature is available in Web Workers.
The Broadcast Channel API allows basic communication between browsing contexts (that is, windows, tabs, frames, or iframes) and workers on the same origin.
Note: To be exact, communication is allowed between browsing contexts using the same storage partition. Storage is first partitioned according to top-level sites—so for example, if you have one opened page at `a.com` that embeds an iframe from `b.com`, and another page opened to `b.com`, then the iframe cannot communicate with the second page despite them being technically same-origin. However, if the first page is also on `b.com`, then the iframe can communicate with the second page.
By creating a `BroadcastChannel` object, you can receive any messages that are posted to it. You don't have to maintain a reference to the frames or workers you wish to communicate with: they can "subscribe" to a particular channel by constructing their own `BroadcastChannel` with the same name, and have bi-directional communication between all of them.
## Broadcast Channel interface
>
### Creating or joining a channel
A client joins a broadcast channel by creating a `BroadcastChannel` object. Its constructor takes one single parameter: the name of the channel. If it is the first to connect to that broadcast channel name, the underlying channel is created.
    
    // Connection to a broadcast channel
    const bc = new BroadcastChannel("test_channel");
    
### Sending a message
It is enough to call the `postMessage()` method on the created `BroadcastChannel` object, which takes any object as an argument. An example string message:
    
    // Example of sending of a very simple message
    bc.postMessage("This is a test message.");
    
Data sent to the channel is serialized using the structured clone algorithm. That means you can send a broad variety of data objects safely without having to serialize them yourself.
The API doesn't associate any semantics to messages, so it is up to the code to know what kind of messages to expect and what to do with them.
### Receiving a message
When a message is posted, a `message` event is dispatched to each `BroadcastChannel` object connected to this channel. A function can be run for this event using the `onmessage` event handler:
    
    // A handler that only logs the event to the console:
    bc.onmessage = (event) => {
      console.log(event);
    };
    
### Disconnecting a channel
To leave a channel, call the `close()` method on the object. This disconnects the object from the underlying channel, allowing garbage collection.
    
    // Disconnect the channel
    bc.close();
    
## Conclusion
The Broadcast Channel API's self-contained interface allows cross-context communication. It can be used to detect user actions in other tabs within a same origin, like when the user logs in or out.
The messaging protocol is not defined and the different browsing contexts need to implement it themselves; there is no negotiation nor requirement from the specification.
## Interfaces
`BroadcastChannel`
    
Represents a named channel that any browsing context of a given origin can subscribe to.
  * `BroadcastChannel`, the interface implementing it.


# Permissions
Note: This feature is available in Web Workers.
The `Permissions` interface of the Permissions API provides the core Permission API functionality, such as methods for querying and revoking permissions
## Instance methods
`Permissions.query()`
    
Returns the user permission status for a given API.
`Permissions.revoke()` Deprecated
    
Revokes the permission currently set on a given API.
## Example
    
    navigator.permissions.query({ name: "geolocation" }).then((result) => {
      if (result.state === "granted") {
        showLocalNewsWithGeolocation();
      } else if (result.state === "prompt") {
        showButtonToEnableLocalNews();
      }
      // Don't do anything if the permission was denied.
    });
    
# HIDInputReportEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers, except for Shared Web Workers.
The `HIDInputReportEvent` interface of the WebHID API is passed to `inputreport` event of `HIDDevice` when an input report is received from any associated HID device.
Event  HIDInputReportEvent 
## Instance properties
This interface also inherits properties from `Event`.
`HIDInputReportEvent.data` Read only Experimental
    
A `DataView` containing the data from the input report, excluding the `reportId` if the HID interface uses report IDs.
`HIDInputReportEvent.device` Read only Experimental
    
The `HIDDevice` instance that represents the HID interface that sent the input report.
`HIDInputReportEvent.reportId` Read only Experimental
    
The one-byte identification prefix for this report, or 0 if the HID interface does not use report IDs.
## Instance methods
This interface inherits methods from its parent, `Event`.
## Examples
The following example demonstrates listening for an `inputReport` that will allow the application to detect which button is pressed on a Joy-Con Right device. You can see more examples, and live demos in the article Connecting to uncommon HID devices.
    
    device.addEventListener("inputreport", (event) => {
      const { data, device, reportId } = event;
    
      // Handle only the Joy-Con Right device and a specific report ID.
      if (device.productId !== 0x2007 && reportId !== 0x3f) return;
    
      const value = data.getUint8(0);
      if (value === 0) return;
    
      const someButtons = { 1: "A", 2: "X", 4: "B", 8: "Y" };
      console.log(`User pressed button ${someButtons[value]}.`);
    });
    
# HIDConnectionEvent
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers, except for Shared Web Workers.
The `HIDConnectionEvent` interface of the WebHID API represents HID connection events, and is the event type passed to `connect` and `disconnect` event handlers when a device's connection state changes.
Event  HIDConnectionEvent 
## Constructor
`HIDConnectionEvent()` Experimental
    
Returns a new `HIDConnectionEvent` object. Typically this constructor is not used as events are created when a device's connection state changes.
## Instance properties
This interface also inherits properties from `Event`.
`HIDConnectionEvent.device` Read only Experimental
    
Returns the `HIDDevice` instance representing the device associated with the connection event.
## Examples
The following example registers event listeners for `connect` and `disconnect` events, then prints the `HIDDevice.productName` to the console.
    
    navigator.hid.addEventListener("connect", ({ device }) => {
      console.log(`HID connected: ${device.productName}`);
    });
    
    navigator.hid.addEventListener("disconnect", ({ device }) => {
      console.log(`HID disconnected: ${device.productName}`);
    });
    
# Sensor
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Sensor` interface of the Sensor APIs is the base class for all the other sensor interfaces. This interface cannot be used directly. Instead it provides properties, event handlers, and methods accessed by interfaces that inherit from it.
This feature may be blocked by a Permissions Policy set on your server.
EventTarget  Sensor 
When initially created, the `Sensor` object is idle, meaning it does not take measures. Once the `start()` method is called, it prepares itself to read data and, once ready, the `activate` event is sent and the sensor becomes activated. It then sends a `reading` event each time new data is available.
In case of an error, the `error` event is sent, reading stops, and the `Sensor` object becomes idle again. The `start()` method needs to be called again before it can read further data.
## Interfaces based on `Sensor`
Below is a list of interfaces based on the `Sensor` interface.
  * `Accelerometer`
  * `AmbientLightSensor`
  * `GravitySensor`
  * `Gyroscope`
  * `LinearAccelerationSensor`
  * `Magnetometer`
  * `OrientationSensor`


## Instance properties
`Sensor.activated` Read only
    
Returns a boolean value indicating whether the sensor is active.
`Sensor.hasReading` Read only
    
Returns a boolean value indicating whether the sensor has a reading.
`Sensor.timestamp` Read only
    
Returns the timestamp of the latest sensor reading.
## Instance methods
`Sensor.start()`
    
Activates one of the sensors based on `Sensor`.
`Sensor.stop()`
    
Deactivates one of the sensors based on `Sensor`.
## Events
`activate`
    
Fired when a sensor becomes activated.
`error`
    
Fired when an exception occurs on a sensor.
`reading`
    
Fired when a new reading is available on a sensor.
# CSSMatrixComponent
The `CSSMatrixComponent` interface of the CSS Typed Object Model API represents the matrix() and matrix3d() values of the individual `transform` property in CSS. It inherits properties and methods from its parent `CSSTransformValue`.
CSSTransformComponent  CSSMatrixComponent 
## Constructor
`CSSMatrixComponent()`
    
Creates a new `CSSMatrixComponent` object.
## Instance properties
`matrix`
    
A `DOMMatrix` object.
## Examples
To do.
# AudioTrackList
The `AudioTrackList` interface is used to represent a list of the audio tracks contained within a given HTML media element, with each track represented by a separate `AudioTrack` object in the list.
Retrieve an instance of this object with `HTMLMediaElement.audioTracks`. The individual tracks can be accessed using array syntax.
EventTarget  AudioTrackList 
## Instance properties
This interface also inherits properties from its parent interface, `EventTarget`.
`length` Read only
    
The number of tracks in the list.
## Instance methods
This interface also inherits methods from its parent interface, `EventTarget`.
`getTrackById()`
    
Returns the `AudioTrack` found within the `AudioTrackList` whose `id` matches the specified string. If no match is found, `null` is returned.
## Events
`addtrack`
    
Fired when a new audio track has been added to the media element.
`change`
    
Fired when a track has been enabled or disabled.
`removetrack`
    
Fired when a new audio track has been removed from the media element.
## Usage notes
In addition to being able to obtain direct access to the audio tracks present on a media element, `AudioTrackList` lets you set event handlers on the `addtrack` and `removetrack` events, so that you can detect when tracks are added to or removed from the media element's stream. See the `addtrack` and `removetrack` events for details and examples.
## Examples
>
### Getting a media element's audio track list
To get a media element's `AudioTrackList`, use its `audioTracks` property.
    
    const audioTracks = document.querySelector("video").audioTracks;
    
### Monitoring track count changes
In this example, we have an app that displays information about the number of channels available. To keep it up to date, handlers for the `addtrack` and `removetrack` events are set up.
    
    audioTracks.onaddtrack = updateTrackCount;
    audioTracks.onremovetrack = updateTrackCount;
    
    function updateTrackCount(event) {
      trackCount = audioTracks.length;
      drawTrackCountIndicator(trackCount);
    }
    
# OES_fbo_render_mipmap extension
The `OES_fbo_render_mipmap` extension is part of the WebGL API and makes it possible to attach any level of a texture to a framebuffer object.
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL 1. In WebGL2, the functionality of this extension is available in the WebGL 2 context by default.
## Examples
See the sample code in the Khronos specification.
  * `WebGLRenderingContext.getExtension()`


# File API
Note: This feature is available in Web Workers.
## Concepts and Usage
The File API enables web applications to access files and their contents.
Web applications can access files when the user makes them available, either using a file `<input>` element or via drag and drop.
Sets of files made available in this way are represented as `FileList` objects, which enable a web application to retrieve individual `File` objects. In turn `File` objects provide access to metadata such as the file's name, size, type, and last modified date.
`File` objects can be passed to `FileReader` objects to access the contents of the file. The `FileReader` interface is asynchronous, but a synchronous version, available only in web workers, is provided by the `FileReaderSync` interface.
## Relationship to other file-related APIs
There are two other major APIs that also deal with files: File and Directory Entries API and File System API.
The File API is the most basic one. It supports reading and processing file data explicitly provided by the user in the form of a form element input or drag-and-drop operation. It also enables binary data handling via blobs.
The File and Directory Entries API, like the File API, also deals with files provided by the user via form inputs or drag-and-drop operations. However, instead of a single file, the input element now allows the selection of a directory or multiple files. The API then provides a way to process the directory or files. It is mostly Chrome's own invention—you will find that its extensions to other interfaces are all prefixed with `webkit`. The File and Directory Entries API has a more complete story about its implementation and standardization. It was originally intended to support a full virtual file system, but now only supports read operations on user-provided data.
The File System API provides a virtual file system for web applications, so that they can persistently store data in a virtual system which is private to the document's origin (known as an Origin private file system (OPFS)). The File System Access API further extends the File System API to allow websites to read and write user files, subject to user consent. Unlike the File API and the File and Directory Entries API, the File System API is purely JavaScript and does not deal with form inputs.
## Interfaces
`Blob`
    
Represents a "Binary Large Object", meaning a file-like object of immutable, raw data; a `Blob` can be read as text or binary data, or converted into a `ReadableStream` so its methods can be used for processing the data.
`File`
    
Provides information about a file and allows JavaScript in a web page to access its content.
`FileList`
    
Returned by the `files` property of the HTML `<input>` element; this lets you access the list of files selected with the `<input type="file">` element. It's also used for a list of files dropped into web content when using the drag and drop API; see the `DataTransfer` object for details on this usage.
`FileReader`
    
Enables web applications to asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using `File` or `Blob` objects to specify the file or data to read.
`FileReaderSync`
    
Enables web applications to synchronously read the contents of files (or raw data buffers) stored on the user's computer, using `File` or `Blob` objects to specify the file or data to read.
### Extensions to other interfaces
`URL.createObjectURL()`
    
Creates a URL that can be used to fetch a `File` or `Blob` object.
`URL.revokeObjectURL()`
    
Releases an existing object URL which was previously created by calling `URL.createObjectURL()`.
## Examples
>
### Reading a file
In this example, we provide a file `<input>` element, and when the user selects a file, we read the contents of the first file selected as text, and display the result in a `<div>`.
#### HTML
    
    <input type="file" />
    <div class="output"></div>
    
#### CSS
    
    .output {
      overflow: scroll;
      margin: 1rem 0;
      height: 200px;
    }
    
#### JavaScript
    
    const fileInput = document.querySelector("input[type=file]");
    const output = document.querySelector(".output");
    
    fileInput.addEventListener("change", async () => {
      const [file] = fileInput.files;
    
      if (file) {
        output.innerText = await file.text();
      }
    });
    
### Result
  * `<input type="file">`: the file input element
  * `Blob.text()`
  * The `DataTransfer` interface


# CSSSkewX
Note: This feature is available in Web Workers.
The `CSSSkewX` interface of the CSS Typed Object Model API represents the `skewX()` value of the individual `transform` property in CSS. It inherits properties and methods from its parent `CSSTransformValue`.
CSSTransformComponent  CSSSkewX 
## Constructor
`CSSSkewX()`
    
Creates a new `CSSSkewX` object.
## Instance properties
`ax`
    
Returns or sets the x-axis value.
## Examples
To Do
# PeriodicWave
The `PeriodicWave` interface defines a periodic waveform that can be used to shape the output of an `OscillatorNode`.
`PeriodicWave` has no inputs or outputs; it is used to define custom oscillators when calling `OscillatorNode.setPeriodicWave()`. The `PeriodicWave` itself is created/returned by `BaseAudioContext.createPeriodicWave`.
## Constructor
`PeriodicWave()`
    
Creates a new `PeriodicWave` object instance using the default values for all properties. If you wish to establish custom property values at the outset, use the `BaseAudioContext.createPeriodicWave` factory method instead.
## Instance properties
None; also, `PeriodicWave` doesn't inherit any properties.
## Instance methods
None; also, `PeriodicWave` doesn't inherit any methods.
## Example
See `BaseAudioContext.createPeriodicWave` for simple example code that shows how to create a `PeriodicWave` object containing a simple sine wave.
  * Using the Web Audio API


# TrustedHTML
Note: This feature is available in Web Workers.
The `TrustedHTML` interface of the Trusted Types API represents a string that a developer can insert into an injection sink that will render it as HTML. These objects are created via `TrustedTypePolicy.createHTML()` and therefore have no constructor.
The value of a `TrustedHTML` object is set when the object is created and cannot be changed by JavaScript as there is no setter exposed.
## Instance methods
`TrustedHTML.toJSON()`
    
Returns a JSON representation of the stored data.
`TrustedHTML.toString()`
    
A string containing the sanitized HTML.
## Examples
In the below example we create a policy that will create `TrustedHTML` objects using `TrustedTypePolicyFactory.createPolicy()`. We can then use `TrustedTypePolicy.createHTML()` to create a sanitized HTML string to be inserted into the document.
The sanitized value can then be used with `Element.innerHTML` to ensure that no new HTML elements can be injected.
    
    <div id="myDiv"></div>
    
    
    const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
      createHTML: (string) => string.replace(/</g, "&lt;"),
    });
    
    let el = document.getElementById("myDiv");
    const escaped = escapeHTMLPolicy.createHTML("<img src=x onerror=alert(1)>");
    console.log(escaped instanceof TrustedHTML); // true
    el.innerHTML = escaped;
    
  * Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types


# MediaList
The `MediaList` interface represents the media queries of a stylesheet, e.g., those set using a `<link>` element's `media` attribute.
Note: `MediaList` is a live list; updating the list using properties or methods listed below will immediately update the behavior of the document.
## Instance properties
`MediaList.mediaText`
    
A stringifier that returns a string representing the `MediaList` as text, and also allows you to set a new `MediaList`.
`MediaList.length` Read only
    
Returns the number of media queries in the `MediaList`.
## Instance methods
`MediaList.appendMedium()`
    
Adds a media query to the `MediaList`.
`MediaList.deleteMedium()`
    
Removes a media query from the `MediaList`.
`MediaList.item()`
    
A getter that returns a string representing a media query as text, given the media query's index value inside the `MediaList`. This method can also be called using the bracket (`[]`) syntax.
`MediaList.toString()`
    
Returns a string representation of this media list in the same format as the object's `MediaList.mediaText` property.
## Examples
The following would log to the console a textual representation of the `MediaList` of the first stylesheet applied to the current document.
    
    const stylesheets = document.styleSheets;
    let stylesheet = stylesheets[0];
    console.log(stylesheet.media.mediaText);
    
# CSSPositionTryRule
The `CSSPositionTryRule` interface describes an object representing a `@position-try` at-rule.
CSSRule  CSSPositionTryRule 
## Instance properties
Inherits properties from its ancestor `CSSRule`.
`CSSPositionTryRule.name` Read only
    
Represents the name of the position try option specified by the `@position-try` at-rule's `<dashed-ident>`.
`CSSPositionTryRule.style` Read only
    
A `CSSPositionTryDescriptors` object that represents the declarations set in the body of the `@position-try` at-rule.
## Instance methods
No specific methods; inherits methods from its ancestor `CSSRule`.
## Examples
The CSS includes a `@position-try` at-rule with a name of `--custom-left` and three descriptors.
    
    @position-try --custom-left {
      position-area: left;
      width: 20%;
      max-width: 200px;
      margin-right: 10px;
    }
    
    
    const myRules = document.styleSheets[0].cssRules;
    const tryOption = myRules[0]; // a CSSPositionTryRule
    console.log(tryOption); // "[object CSSPositionTryRule]"
    console.log(tryOption.name); // "--custom-left"
    console.log(tryOption.style); // "[object CSSPositionTryDescriptors]"
    console.log(tryOption.style.maxWidth); // "200px"
    
  * `CSSPositionTryDescriptors`
  * `@position-try`
  * `position-try-fallbacks`
  * CSS anchor positioning module
  * Using CSS anchor positioning
  * Handling overflow: try options and conditional hiding


# MediaSession
The `MediaSession` interface of the Media Session API allows a web page to provide custom behaviors for standard media playback interactions, and to report metadata that can be sent by the user agent to the device or operating system for presentation in standardized user interface elements.
For example, a smartphone might have a standard panel in its lock screen that provides controls for media playback and information display. A browser on the device can use `MediaSession` to make browser playback controllable from that standard/global user interface.
## Instance properties
`metadata`
    
Returns an instance of `MediaMetadata`, which contains rich media metadata for display in a platform UI.
`playbackState`
    
Indicates whether the current media session is playing. Valid values are `none`, `paused`, or `playing`.
## Instance methods
`setActionHandler()`
    
Sets an action handler for a media session action, such as play or pause.
`setCameraActive()`
    
Indicates to the user agent whether the user's camera is considered to be active.
`setMicrophoneActive()`
    
Indicates to the user agent whether the user's microphone is considered to be currently muted.
`setPositionState()`
    
Sets the current playback position and speed of the media currently being presented.
`setScreenshareActive()` Experimental
    
Indicates to the user agent the screenshare capture state desired by the page.
## Examples
>
### Setting up action handlers for a music player
The following example creates a new media session and assigns action handlers to it:
    
    if ("mediaSession" in navigator) {
      navigator.mediaSession.metadata = new MediaMetadata({
        title: "Unforgettable",
        artist: "Nat King Cole",
        album: "The Ultimate Collection (Remastered)",
        artwork: [
          {
            src: "https://dummyimage.com/96x96",
            sizes: "96x96",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/128x128",
            sizes: "128x128",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/192x192",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/256x256",
            sizes: "256x256",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/384x384",
            sizes: "384x384",
            type: "image/png",
          },
          {
            src: "https://dummyimage.com/512x512",
            sizes: "512x512",
            type: "image/png",
          },
        ],
      });
    
      navigator.mediaSession.setActionHandler("play", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("pause", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("stop", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("seekbackward", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("seekforward", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("seekto", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("previoustrack", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("nexttrack", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("skipad", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("togglecamera", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("togglemicrophone", () => {
        /* Code excerpted. */
      });
      navigator.mediaSession.setActionHandler("hangup", () => {
        /* Code excerpted. */
      });
    }
    
The following example sets up two functions for playing and pausing, then uses them as callbacks with the relevant action handlers.
    
    const actionHandlers = [
      // play
      [
        "play",
        async () => {
          // play our audio
          await audioEl.play();
          // set playback state
          navigator.mediaSession.playbackState = "playing";
          // update our status element
          updateStatus(allMeta[index], "Action: play  |  Track is playing…");
        },
      ],
      [
        "pause",
        () => {
          // pause out audio
          audioEl.pause();
          // set playback state
          navigator.mediaSession.playbackState = "paused";
          // update our status element
          updateStatus(allMeta[index], "Action: pause  |  Track has been paused…");
        },
      ],
    ];
    
    for (const [action, handler] of actionHandlers) {
      try {
        navigator.mediaSession.setActionHandler(action, handler);
      } catch (error) {
        console.log(`The media session action "${action}" is not supported yet.`);
      }
    }
    
### Using action handlers to control a slide presentation
The `"previousslide"` and `"nextslide"` action handlers can be used to handle moving forward and backward through a slide presentation, for example when the user puts their presentation into a Picture-in-Picture window, and presses the browser-supplied controls for navigating through slides.
    
    try {
      navigator.mediaSession.setActionHandler("previousslide", () => {
        log('> User clicked "Previous Slide" icon.');
        if (slideNumber > 1) slideNumber--;
        updateSlide();
      });
    } catch (error) {
      log('Warning! The "previousslide" media session action is not supported.');
    }
    
    try {
      navigator.mediaSession.setActionHandler("nextslide", () => {
        log('> User clicked "Next Slide" icon.');
        slideNumber++;
        updateSlide();
      });
    } catch (error) {
      log('Warning! The "nextslide" media session action is not supported.');
    }
    
See Presenting Slides / Media Session Sample for a working example.
# OrientationSensor
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `OrientationSensor` interface of the Sensor APIs is the base class for orientation sensors. This interface cannot be used directly. Instead it provides properties and methods accessed by interfaces that inherit from it.
This feature may be blocked by a Permissions Policy set on your server.
EventTarget  Sensor  OrientationSensor 
## Interfaces based on OrientationSensor
Below is a list of interfaces based on the OrientationSensor interface.
  * `AbsoluteOrientationSensor`
  * `RelativeOrientationSensor`


## Instance properties
`OrientationSensor.quaternion` Read only
    
Returns a four element `Array` whose elements contain the components of the unit quaternion representing the device's orientation.
## Instance methods
`OrientationSensor.populateMatrix()`
    
Populates the given object with the rotation matrix based on the latest sensor reading.
## Examples
>
### Basic Example
The following example, which is loosely based on Intel's Orientation Phone demo, instantiates an `AbsoluteOrientationSensor` with a frequency of 60 times a second. On each reading it uses `OrientationSensor.quaternion` to rotate a visual model of a phone.
    
    const options = { frequency: 60, referenceFrame: "device" };
    const sensor = new AbsoluteOrientationSensor(options);
    
    sensor.addEventListener("reading", () => {
      // model is a Three.js object instantiated elsewhere.
      model.quaternion.fromArray(sensor.quaternion).inverse();
    });
    sensor.addEventListener("error", (error) => {
      if (event.error.name === "NotReadableError") {
        console.log("Sensor is not available.");
      }
    });
    sensor.start();
    
### Permissions Example
Using orientation sensors requires requesting permissions for multiple device sensors. Because the `Permissions` interface uses promises, a good way to request permissions is to use `Promise.all`.
    
    const sensor = new AbsoluteOrientationSensor();
    Promise.all([
      navigator.permissions.query({ name: "accelerometer" }),
      navigator.permissions.query({ name: "magnetometer" }),
      navigator.permissions.query({ name: "gyroscope" }),
    ]).then((results) => {
      if (results.every((result) => result.state === "granted")) {
        sensor.start();
        // …
      } else {
        console.log("No permissions to use AbsoluteOrientationSensor.");
      }
    });
    
# DOMMatrixReadOnly
Note: This feature is available in Web Workers.
The `DOMMatrixReadOnly` interface represents a read-only 4×4 matrix, suitable for 2D and 3D operations. The `DOMMatrix` interface — which is based upon `DOMMatrixReadOnly`—adds mutability, allowing you to alter the matrix after creating it.
This interface should be available inside web workers, though some implementations doesn't allow it yet.
## Constructor
`DOMMatrixReadOnly()`
    
Creates a new `DOMMatrixReadOnly` object.
## Instance properties
This interface doesn't inherit any properties.
`DOMMatrixReadOnly.is2D` Read only
    
A Boolean flag whose value is `true` if the matrix was initialized as a 2D matrix. If `false`, the matrix is 3D.
`DOMMatrixReadOnly.isIdentity` Read only
    
A Boolean whose value is `true` if the matrix is an identity matrix.
`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`
    
Double-precision floating-point values representing each component of a 4×4 matrix, where `m11` through `m14` are the first column, `m21` through `m24` are the second column, and so forth.
`a`, `b`, `c`, `d`, `e`, `f`
    
Double-precision floating-point values representing the components of a 4×4 matrix which are required in order to perform 2D rotations and translations. These are aliases for specific components of a 4×4 matrix, as shown below.
2D 3D equivalent  
`a` `m11`  
`b` `m12`  
`c` `m21`  
`d` `m22`  
`e` `m41`  
`f` `m42`  
## Instance methods
This interface doesn't inherit any methods. None of the following methods alter the original matrix.
`DOMMatrixReadOnly.flipX()`
    
Returns a new `DOMMatrix` created by flipping the source matrix around its X-axis. This is equivalent to multiplying the matrix by `DOMMatrix(-1, 0, 0, 1, 0, 0)`. The original matrix is not modified.
`DOMMatrixReadOnly.flipY()`
    
Returns a new `DOMMatrix` created by flipping the source matrix around its Y-axis. This is equivalent to multiplying the matrix by `DOMMatrix(1, 0, 0, -1, 0, 0)`. The original matrix is not modified.
`DOMMatrixReadOnly.inverse()`
    
Returns a new `DOMMatrix` created by inverting the source matrix. The original matrix is not altered.
`DOMMatrixReadOnly.multiply()`
    
Returns a new `DOMMatrix` created by computing the dot product of the source matrix and the specified matrix. The original matrix is not
`DOMMatrixReadOnly.rotateAxisAngle()`
    
Returns a new `DOMMatrix` created by rotating the source matrix by the given angle around the specified vector. The original matrix is not modified.
`DOMMatrixReadOnly.rotate()`
    
Returns a new `DOMMatrix` created by rotating the source matrix around each of its axes by the specified number of degrees. The original matrix is not altered.
`DOMMatrixReadOnly.rotateFromVector()`
    
Returns a new `DOMMatrix` created by rotating the source matrix by the angle between the specified vector and `(1, 0)`. The original matrix is not modified.
`DOMMatrixReadOnly.scale()`
    
Returns a new `DOMMatrix` created by scaling the source matrix by the amount specified for each axis, centered on the given origin. By default, the X and Z axes are scaled by `1` and the Y axis has no default scaling value. The default origin is `(0, 0, 0)`. The original matrix is not modified.
`DOMMatrixReadOnly.scale3d()`
    
Returns a new `DOMMatrix` created by scaling the source 3D matrix by the given factor along all its axes, centered on the specified origin point. The default origin is `(0, 0, 0)`. The original matrix is not modified.
`DOMMatrixReadOnly.scaleNonUniform()` Deprecated
    
Returns a new `DOMMatrix` created by applying the specified scaling on the X, Y, and Z axes, centered at the given origin. By default, the Y and Z axes' scaling factors are both `1`, but the scaling factor for X must be specified. The default origin is `(0, 0, 0)`. The original matrix is not changed.
`DOMMatrixReadOnly.skewX()`
    
Returns a new `DOMMatrix` created by applying the specified skew transformation to the source matrix along its X-axis. The original matrix is not modified.
`DOMMatrixReadOnly.skewY()`
    
Returns a new `DOMMatrix` created by applying the specified skew transformation to the source matrix along its Y-axis. The original matrix is not modified.
`DOMMatrixReadOnly.toFloat32Array()`
    
Returns a new `Float32Array` of single-precision floating-point numbers, containing all 16 elements which comprise the matrix.
`DOMMatrixReadOnly.toFloat64Array()`
    
Returns a new `Float64Array` of double-precision floating-point numbers, containing all 16 elements which comprise the matrix.
`DOMMatrixReadOnly.toJSON()`
    
Returns a JSON representation of the `DOMMatrixReadOnly` object.
`DOMMatrixReadOnly.toString()`
    
Creates and returns a string representation of the matrix in CSS matrix syntax, using the appropriate CSS matrix notation.
`DOMMatrixReadOnly.transformPoint()`
    
Transforms the specified point using the matrix, returning a new `DOMPoint` object containing the transformed point. Neither the matrix nor the original point are altered.
`DOMMatrixReadOnly.translate()`
    
Returns a new `DOMMatrix` containing a matrix calculated by translating the source matrix using the specified vector. By default, the vector is `(0, 0, 0)`. The original matrix is not changed.
## Static methods
`fromFloat32Array()`
    
Creates a new mutable `DOMMatrix` object given an array of single-precision (32-bit) floating-point values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a `TypeError` exception is thrown.
`fromFloat64Array()`
    
Creates a new mutable `DOMMatrix` object given an array of double-precision (64-bit) floating-point values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a `TypeError` exception is thrown.
`fromMatrix()`
    
Creates a new mutable `DOMMatrix` object given an existing matrix or an object which provides the values for its properties. If no matrix is specified, the matrix is initialized with every element set to `0` except the bottom-right corner and the element immediately above and to its left: `m33` and `m34`. These have the default value of `1`.
  * The mutable matrix type, `DOMMatrix`, which is based on this one.
  * The CSS `matrix()` and `matrix3d()` functional notation that can be generated from this interface to be used in a CSS `transform`.


# PointerEvent
The `PointerEvent` interface represents the state of a DOM event produced by a pointer such as the geometry of the contact point, the device type that generated the event, the amount of pressure that was applied on the contact surface, etc.
A pointer is a hardware agnostic representation of input devices (such as a mouse, pen or contact point on a touch-enable surface). The pointer can target a specific coordinate (or set of coordinates) on the contact surface such as a screen.
A pointer's hit test is the process a browser uses to determine the target element for a pointer event. Typically, this is determined by considering the pointer's location and also the visual layout of elements in a document on screen media.
Event  UIEvent  MouseEvent  PointerEvent 
## Constructors
`PointerEvent()`
    
Creates a synthetic—and untrusted—`PointerEvent`.
## Instance properties
This interface inherits properties from `MouseEvent` and `Event`.
`PointerEvent.altitudeAngle` Read only
    
Represents the angle between a transducer (a pointer or stylus) axis and the X-Y plane of a device screen.
`PointerEvent.azimuthAngle` Read only
    
Represents the angle between the Y-Z plane and the plane containing both the transducer (a pointer or stylus) axis and the Y axis.
`PointerEvent.persistentDeviceId` Read only
    
A unique identifier for the pointing device generating the `PointerEvent`.
`PointerEvent.pointerId` Read only
    
A unique identifier for the pointer causing the event.
`PointerEvent.width` Read only
    
The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer.
`PointerEvent.height` Read only
    
The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
`PointerEvent.pressure` Read only
    
The normalized pressure of the pointer input in the range `0` to `1`, where `0` and `1` represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
`PointerEvent.tangentialPressure` Read only
    
The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range `-1` to `1`, where `0` is the neutral position of the control.
`PointerEvent.tiltX` Read only
    
The plane angle (in degrees, in the range of `-90` to `90`) between the Y–Z plane and the plane containing both the pointer (e.g., pen stylus) axis and the Y axis.
`PointerEvent.tiltY` Read only
    
The plane angle (in degrees, in the range of `-90` to `90`) between the X–Z plane and the plane containing both the pointer (e.g., pen stylus) axis and the X axis.
`PointerEvent.twist` Read only
    
The clockwise rotation of the pointer (e.g., pen stylus) around its major axis in degrees, with a value in the range `0` to `359`.
`PointerEvent.pointerType` Read only
    
Indicates the device type that caused the event (mouse, pen, touch, etc.).
`PointerEvent.isPrimary` Read only
    
Indicates if the pointer represents the primary pointer of this pointer type.
## Instance methods
`PointerEvent.getCoalescedEvents()` Secure context
    
Returns a sequence of all `PointerEvent` instances that were coalesced into the dispatched `pointermove` event.
`PointerEvent.getPredictedEvents()`
    
Returns a sequence of `PointerEvent` instances that the browser predicts will follow the dispatched `pointermove` event's coalesced events.
## Pointer event types
The `PointerEvent` interface has several event types. To determine which event fired, look at the event's `type` property.
Note: It's important to note that in many cases, both pointer and mouse events get sent (in order to let non-pointer-specific code still interact with the user). If you use pointer events, you should call `preventDefault()` to keep the mouse event from being sent as well.
`pointerover`
    
This event is fired when a pointing device is moved into an element's hit test boundaries.
`pointerenter`
    
This event is fired when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a result of a `pointerdown` event from a device that does not support hover (see `pointerdown`). This event type is similar to `pointerover`, but differs in that it does not bubble.
`pointerdown`
    
The event is fired when a pointer becomes active. For mouse, it is fired when the device transitions from no buttons pressed to at least one button pressed. For touch, it is fired when physical contact is made with the digitizer. For pen, it is fired when the stylus makes physical contact with the digitizer.
Note: For touchscreen browsers that allow direct manipulation, a `pointerdown` event triggers implicit pointer capture, which causes the target to capture all subsequent pointer events as if they were occurring over the capturing target. Accordingly, `pointerover`, `pointerenter`, `pointerleave`, and `pointerout` will not fire as long as this capture is set. The capture can be released manually by calling `element.releasePointerCapture` on the target element, or it will be implicitly released after a `pointerup` or `pointercancel` event.
`pointermove`
    
This event is fired when a pointer changes coordinates.
`pointerrawupdate` Experimental
    
This event is fired when any of a pointer's properties change.
`pointerup`
    
This event is fired when a pointer is no longer active.
`pointercancel`
    
A browser fires this event if it concludes the pointer will no longer be able to generate events (for example the related device is deactivated).
`pointerout`
    
This event is fired for several reasons including: pointing device is moved out of the hit test boundaries of an element; firing the `pointerup` event for a device that does not support hover (see `pointerup`); after firing the `pointercancel` event (see `pointercancel`); when a pen stylus leaves the hover range detectable by the digitizer.
`pointerleave`
    
This event is fired when a pointing device is moved out of the hit test boundaries of an element. For pen devices, this event is fired when the stylus leaves the hover range detectable by the digitizer.
`gotpointercapture`
    
This event is fired when an element receives pointer capture.
`lostpointercapture`
    
This event is fired after pointer capture is released for a pointer.
## Example
Examples of each property, event type, and global event handler are included in their respective reference pages.
  * Touch events
  * `GestureEvent`
  * `touch-action`


# Pbkdf2Params
The `Pbkdf2Params` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.deriveKey()`, when using the PBKDF2 algorithm.
## Instance properties
`name`
    
A string. This should be set to `PBKDF2`.
`hash`
    
A string or an object containing a single property called `name` with a string value. It is an identifier for the digest algorithm to use. This should be one of the following:
  * `SHA-256`: selects the SHA-256 algorithm.
  * `SHA-384`: selects the SHA-384 algorithm.
  * `SHA-512`: selects the SHA-512 algorithm.


Warning: `SHA-1` is considered vulnerable in most cryptographic applications, but is still considered safe in PBKDF2. However, it's advisable to transition away from it everywhere, so unless you need to use `SHA-1`, don't. Use a different digest algorithm instead.
`salt`
    
An `ArrayBuffer`, a `TypedArray`, or a `DataView`. This should be a random or pseudo-random value of at least 16 bytes. Unlike the input key material passed into `deriveKey()`, `salt` does not need to be kept secret.
`iterations`
    
A `Number` representing the number of times the hash function will be executed in `deriveKey()`. This determines how computationally expensive (that is, slow) the `deriveKey()` operation will be. In this context, slow is good, since it makes it more expensive for an attacker to run a dictionary attack against the keys. The general guidance here is to use as many iterations as possible, subject to keeping an acceptable level of performance for your application.
## Examples
See the examples for `SubtleCrypto.deriveKey()`.
Browsers that support the "PBKDF2" algorithm for the `SubtleCrypto.deriveKey()` method will support this type.
  * `SubtleCrypto.deriveKey()`.


# Web Components
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
## Concepts and usage
As developers, we all know that reusing code as much as possible is a good idea. This has traditionally not been so easy for custom markup structures — think of the complex HTML (and associated style and script) you've sometimes had to write to render custom UI controls, and how using them multiple times can turn your page into a mess if you are not careful.
Web Components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
Custom elements
    
A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.
Shadow DOM
    
A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
HTML templates
    
The `<template>` and `<slot>` elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
The basic approach for implementing a web component generally looks something like this:
  1. Create a class in which you specify your web component functionality, using the class syntax.
  2. Register your new custom element using the `CustomElementRegistry.define()` method, passing it the element name to be defined, the class or function in which its functionality is specified, and optionally, what element it inherits from.
  3. If required, attach a shadow DOM to the custom element using `Element.attachShadow()` method. Add child elements, event listeners, etc., to the shadow DOM using regular DOM methods.
  4. If required, define an HTML template using `<template>` and `<slot>`. Again use regular DOM methods to clone the template and attach it to your shadow DOM.
  5. Use your custom element wherever you like on your page, just like you would any regular HTML element.


## Guides
Using custom elements
    
A guide showing how to use the features of custom elements to create simple web components, as well as looking into lifecycle callbacks and some other more advanced features.
Using shadow DOM
    
A guide that looks at shadow DOM fundamentals, showing how to attach a shadow DOM to an element, add to the shadow DOM tree, style it, and more.
Using templates and slots
    
A guide showing how to define a reusable HTML structure using `<template>` and `<slot>` elements, and then use that structure inside your web components.
## Reference
>
### Custom elements
`CustomElementRegistry`
    
Contains functionality related to custom elements, most notably the `CustomElementRegistry.define()` method used to register new custom elements so they can then be used in your document.
`Window.customElements`
    
Returns a reference to the `CustomElementRegistry` object.
Life cycle callbacks
    
Special callback functions defined inside the custom element's class definition, which affect its behavior:
`connectedCallback()`
    
Invoked when the custom element is first connected to the document's DOM.
`disconnectedCallback()`
    
Invoked when the custom element is disconnected from the document's DOM.
`adoptedCallback()`
    
Invoked when the custom element is moved to a new document.
`attributeChangedCallback()`
    
Invoked when one of the custom element's attributes is added, removed, or changed.
Extensions for creating customized built-in elements
    
The following extensions are defined:
The `is` global HTML attribute
    
Allows you to specify that a standard HTML element should behave like a registered customized built-in element.
The "is" option of the `Document.createElement()` method
    
Allows you to create an instance of a standard HTML element that behaves like a given registered customized built-in element.
CSS pseudo-classes
    
Pseudo-classes relating specifically to custom elements:
`:defined`
    
Matches any element that is defined, including built in elements and custom elements defined with `CustomElementRegistry.define()`.
`:host`
    
Selects the shadow host of the shadow DOM containing the CSS it is used inside.
`:host()`
    
Selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.
`:host-context()`
    
Selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.
`:state()`
    
Matches custom elements that are in a specified custom state. More precisely, it matches anonymous custom elements where the specified state is present in the element's `CustomStateSet`.
CSS pseudo-elements
    
Pseudo-elements relating specifically to custom elements:
`::part`
    
Represents any element within a shadow tree that has a matching `part` attribute.
### Shadow DOM
`ShadowRoot`
    
Represents the root node of a shadow DOM subtree.
`Element` extensions
    
Extensions to the `Element` interface related to shadow DOM:
  * The `Element.attachShadow()` method attaches a shadow DOM tree to the specified element.
  * The `Element.shadowRoot` property returns the shadow root attached to the specified element, or `null` if there is no shadow root attached.


Relevant `Node` additions
    
Additions to the `Node` interface relevant to shadow DOM:
  * The `Node.getRootNode()` method returns the context object's root, which optionally includes the shadow root if it is available.
  * The `Node.isConnected` property returns a boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g., the `Document` object in the case of the normal DOM, or the `ShadowRoot` in the case of a shadow DOM.


`Event` extensions
    
Extensions to the `Event` interface related to shadow DOM:
`Event.composed`
    
Returns `true` if the event will propagate across the shadow DOM boundary into the standard DOM, otherwise `false`.
`Event.composedPath`
    
Returns the event's path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with `ShadowRoot.mode` closed.
### HTML templates
`<template>`
    
Contains an HTML fragment that is not rendered when a containing document is initially loaded, but can be displayed at runtime using JavaScript, mainly used as the basis of custom element structures. The associated DOM interface is `HTMLTemplateElement`.
`<slot>`
    
A placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together. The associated DOM interface is `HTMLSlotElement`.
The `slot` global HTML attribute
    
Assigns a slot in a shadow DOM shadow tree to an element.
`Element.assignedSlot`
    
A read-only attribute which returns a reference to the `<slot>` in which this element is inserted.
`Text.assignedSlot`
    
A read-only attribute which returns a reference to the `<slot>` in which this text node is inserted.
`Element` extensions
    
Extensions to the `Element` interface related to slots:
`Element.slot`
    
Returns the name of the shadow DOM slot attached to the element.
CSS pseudo-elements
    
Pseudo-elements relating specifically to slots:
`::slotted`
    
Matches any content that is inserted into a slot.
The `slotchange` event
    
Fired on an `HTMLSlotElement` instance (`<slot>` element) when the node(s) contained in that slot change.
## Examples
We are building up a number of examples in our web-components-examples GitHub repo. More will be added as time goes on.
>
### html.elements.template
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_components` 26 13 22 15 8 26 22 14 8 1.5 4.4 8  
`shadowrootclonable` 124 124 125 110 17.5 124 125 82 17.5 27.0 124 17.5  
`shadowrootdelegatesfocus` 123 123 123 109 16.4 123 123 82 16.4 27.0 123 16.4  
`shadowrootmode` 11190–111 11190–111 123 9776–97 16.4 11190–111 123 7564–75 16.4 22.015.0–22.0 11190–111 16.4  
`shadowrootserializable` 125 125 No 111 18 125 No 83 18 27.0 125 18  
### api.ShadowRoot
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Web_components` 53 79 63 40 10 53 63 41 10 6.0 53 10  
`activeElement` 53 79 63 40 10 53 63 41 10 6.0 53 10  
`adoptedStyleSheets` 73 79 101 60 16.4 73 101 50 16.4 11.0 73 16.4  
`clonable` 124 124 123 110 17.4 124 123 82 17.4 27.0 124 17.4  
`customElementRegistry` No No No No 26 No No No 26 No No 26  
`delegatesFocus` 53 79 94 40 15 53 94 41 15 6.0 53 15  
`elementFromPoint` 53Before Chrome 66, this method returned `null` when the element was a child of a host node. See bug 40537452. 79 63 40Before Opera 53, this method returned `null` when the element was a child of a host node. See bug 40537452. 10.1 53Before Chrome Android 66, this method returned `null` when the element was a child of a host node. See bug 40537452. 63 41Before Opera Android 47, this method returned `null` when the element was a child of a host node. See bug 40537452. 10.3 6.0Before Samsung Internet 9.0, this method returned `null` when the element was a child of a host node. See bug 40537452. 53Before WebView Android 66, this method returned `null` when the element was a child of a host node. See bug 40537452. 10.3  
`elementsFromPoint` 53Before Chrome 66, this method returned `null` when the element was a child of a host node. See bug 40537452. 79 63 40 11.1 53Before Chrome Android 66, this method returned `null` when the element was a child of a host node. See bug 40537452. 63 41 11.3 6.0Before Samsung Internet 9.0, this method returned `null` when the element was a child of a host node. See bug 40537452. 53Before WebView Android 66, this method returned `null` when the element was a child of a host node. See bug 40537452. 11.3  
`fullscreenElement` 71 79 6463 58 16.4 71 6463 50 16.4["Only available on iPad, not on iPhone.", "Shows an overlay button which can not be disabled. Swiping down exits fullscreen mode, making it unsuitable for some use cases like games."] 10.0 71 16.4["Only available on iPad, not on iPhone.", "Shows an overlay button which can not be disabled. Swiping down exits fullscreen mode, making it unsuitable for some use cases like games."]  
`getAnimations` 84 84 75 70 14 84 79 60 14 14.0 84 14  
`getHTML` 125 125 128 111 18 125 128 83 18 27.0 125 18  
`getSelection` 53 79 No 40 No 53 No 41 No 6.0 53 No  
`host` 53 79 63 40 10 53 63 41 10 6.0 53 10  
`innerHTML` 53 79 63 40 10 53 63 41 10 6.0 53 10  
`mode` 53 79 63 40 10.1 53 63 41 10.3 6.0 53 10.3  
`pictureInPictureElement` 69 79 No 56 13.1 105 No 72 13.4 20.0 105 13.4  
`pointerLockElement` 53 79 63 40 10.1 No 63 No No No No No  
`serializable` 125 125 128 111 18 125 128 83 18 27.0 125 18  
`setHTML` No No preview No No No No No No No No No  
`setHTMLUnsafe` 124 124 123 110 2617.4–26If there are custom elements in a declarative shadow root in the parsed HTML, then the elements' constructors and `connectedCallback()` methods are not called (bug 296420). 124 123 82 2617.4–26If there are custom elements in a declarative shadow root in the parsed HTML, then the elements' constructors and `connectedCallback()` methods are not called (bug 296420). 27.0 124 2617.4–26If there are custom elements in a declarative shadow root in the parsed HTML, then the elements' constructors and `connectedCallback()` methods are not called (bug 296420).  
`slotAssignment` 86 86 92 72 16.4 86 92 61 16.4 14.0 86 16.4  
`styleSheets` 53 79 63 40 12.1 53 63 41 12.2 6.0 53 12.2  
# WebCodecs API
Note: This feature is available in Dedicated Web Workers.
The WebCodecs API gives web developers low-level access to the individual frames of a video stream and chunks of audio. It is useful for web applications that require full control over the way media is processed. For example, video or audio editors, and video conferencing.
## Concepts and Usage
Many Web APIs use media codecs internally. For example, the Web Audio API, and the WebRTC API. However these APIs do not allow developers to work with individual frames of a video stream and unmixed chunks of encoded audio or video.
Web developers have typically used WebAssembly in order to get around this limitation, and to work with media codecs in the browser. However, this requires additional bandwidth to download codecs that already exist in the browser, reducing performance and power efficiency, and adding additional development overhead.
The WebCodecs API provides access to codecs that are already in the browser. It gives access to raw video frames, chunks of audio data, image decoders, audio and video encoders and decoders.
### Processing Model
The WebCodecs API uses an asynchronous processing model. Each instance of an encoder or decoder maintains an internal, independent processing queue. When queueing a substantial amount of work, it's important to keep this model in mind.
Methods named `configure()`, `encode()`, `decode()`, and `flush()` operate asynchronously by appending control messages to the end the queue, while methods named `reset()` and `close()` synchronously abort all pending work and purge the processing queue. After `reset()`, more work may be queued following a call to `configure()`, but `close()` is a permanent operation.
Methods named `flush()` can be used to wait for the completion of all work that was pending at the time `flush()` was called. However, it should generally only be called once all desired work is queued. It is not intended to force progress at regular intervals. Calling it unnecessarily will affect encoder quality and cause decoders to require the next input to be a key frame.
### Demuxing
There is currently no API for demuxing media containers. Developers working with containerized media will need to implement their own or use third party libraries. E.g., MP4Box.js or jswebm can be used to demux audio and video data into `EncodedAudioChunk` and `EncodedVideoChunk` objects respectively.
## Interfaces
`AudioDecoder`
    
Decodes `EncodedAudioChunk` objects.
`VideoDecoder`
    
Decodes `EncodedVideoChunk` objects.
`AudioEncoder`
    
Encodes `AudioData` objects.
`VideoEncoder`
    
Encodes `VideoFrame` objects.
`EncodedAudioChunk`
    
Represents codec-specific encoded audio bytes.
`EncodedVideoChunk`
    
Represents codec-specific encoded video bytes.
`AudioData`
    
Represents unencoded audio data.
`VideoFrame`
    
Represents a frame of unencoded video data.
`VideoColorSpace`
    
Represents the color space of a video frame.
`ImageDecoder`
    
Unpacks and decodes image data, giving access to the sequence of frames in an animated image.
`ImageTrackList`
    
Represents the list of tracks available in the image.
`ImageTrack`
    
Represents an individual image track.
## Examples
In the following example, frames are returned from a `MediaStreamTrackProcessor`, then encoded. See the full example and read more about it in the article Video processing with WebCodecs.
    
    let frame_counter = 0;
    const track = stream.getVideoTracks()[0];
    const media_processor = new MediaStreamTrackProcessor(track);
    const reader = media_processor.readable.getReader();
    while (true) {
      const result = await reader.read();
      if (result.done) break;
      let frame = result.value;
      if (encoder.encodeQueueSize > 2) {
        // Too many frames in flight, encoder is overwhelmed
        // let's drop this frame.
        frame.close();
      } else {
        frame_counter++;
        const insert_keyframe = frame_counter % 150 === 0;
        encoder.encode(frame, { keyFrame: insert_keyframe });
        frame.close();
      }
    }
    
  * Video processing with WebCodecs
  * WebCodecs API Samples
  * Real-Time Video Processing with WebCodecs and Streams: Processing Pipelines
  * Video Frame Processing on the Web – WebAssembly, WebGPU, WebGL, WebCodecs, WebNN, and WebTransport


# AesCbcParams
The `AesCbcParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.encrypt()`, `SubtleCrypto.decrypt()`, `SubtleCrypto.wrapKey()`, or `SubtleCrypto.unwrapKey()`, when using the AES-CBC algorithm.
## Instance properties
`name`
    
A string. This should be set to `AES-CBC`.
`iv`
    
An `ArrayBuffer`, a `TypedArray`, or a `DataView`. The initialization vector. Must be 16 bytes, unpredictable, and preferably cryptographically random. However, it need not be secret (for example, it may be transmitted unencrypted along with the ciphertext).
## Examples
See the examples for `SubtleCrypto.encrypt()` and `SubtleCrypto.decrypt()`.
Browsers that support the "AES-CBC" algorithm for the `SubtleCrypto.encrypt()`, `SubtleCrypto.decrypt()`, `SubtleCrypto.wrapKey()`, or `SubtleCrypto.unwrapKey()` methods will support this type.
  * CBC mode is defined in section 6.2 of the NIST SP800-38A standard.
  * `SubtleCrypto.encrypt()`.
  * `SubtleCrypto.decrypt()`.
  * `SubtleCrypto.wrapKey()`.
  * `SubtleCrypto.unwrapKey()`.


# SVGRect
The `SVGRect`, an alias for `DOMRect`, represents a rectangle. Rectangles consist of an `x` and `y` coordinate pair identifying a minimum `x` value, a minimum `y` value, and a `width` and `height`, which are constrained to be non-negative.
An `SVGRect` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
## Instance properties
`SVGRect.x`
    
The exact effect of this coordinate depends on each element. If the attribute is not specified, the effect is as if a value of `0` were specified.
`SVGRect.y`
    
The exact effect of this coordinate depends on each element. If the attribute is not specified, the effect is as if a value of `0` were specified.
`SVGRect.width`
    
This represents the width of the rectangle. A value that is negative results to an error. A value of `0` disables rendering of the element
`SVGRect.height`
    
This represents the height of the rectangle. A value that is negative results to an error. A value of `0` disables rendering of the element.
## Instance methods
None.
  * `DOMRect`
  * `DOMPoint` alias `SVGPoint`
  * `DOMMatrix` alias `SVGMatrix`


# ImageCapture
The `ImageCapture` interface of the MediaStream Image Capture API provides methods to enable the capture of images or photos from a camera or other photographic device. It provides an interface for capturing images from a photographic device referenced through a valid `MediaStreamTrack`.
## Constructor
`ImageCapture()`
    
Creates a new `ImageCapture` object which can be used to capture still frames (photos) from a given `MediaStreamTrack` which represents a video stream.
## Instance properties
`ImageCapture.track` Read only
    
Returns a reference to the `MediaStreamTrack` passed to the constructor.
## Instance methods
`ImageCapture.takePhoto()`
    
Takes a single exposure using the video capture device sourcing a `MediaStreamTrack` and returns a `Promise` that resolves with a `Blob` containing the data.
`ImageCapture.getPhotoCapabilities()`
    
Returns a `Promise` that resolves with an object containing the ranges of available configuration options.
`ImageCapture.getPhotoSettings()`
    
Returns a `Promise` that resolves with an object containing the current photo configuration settings.
`ImageCapture.grabFrame()`
    
Takes a snapshot of the live video in a `MediaStreamTrack`, returning an `ImageBitmap`, if successful.
## Example
The following code is taken from Chrome's Grab Frame - Take Photo Sample. Since `ImageCapture` requires some place to capture an image from, the example below starts with a device's media device (in other words a camera).
This example shows, roughly, a `MediaStreamTrack` extracted from a device's `MediaStream`. The track is then used to create an `ImageCapture` object so that `takePhoto()` and `grabFrame()` can be called. Finally, it shows how to apply the results of these calls to a canvas object.
    
    let imageCapture;
    
    function onGetUserMediaButtonClick() {
      navigator.mediaDevices
        .getUserMedia({ video: true })
        .then((mediaStream) => {
          document.querySelector("video").srcObject = mediaStream;
    
          const track = mediaStream.getVideoTracks()[0];
          imageCapture = new ImageCapture(track);
        })
        .catch((error) => console.error(error));
    }
    
    function onGrabFrameButtonClick() {
      imageCapture
        .grabFrame()
        .then((imageBitmap) => {
          const canvas = document.querySelector("#grabFrameCanvas");
          drawCanvas(canvas, imageBitmap);
        })
        .catch((error) => console.error(error));
    }
    
    function onTakePhotoButtonClick() {
      imageCapture
        .takePhoto()
        .then((blob) => createImageBitmap(blob))
        .then((imageBitmap) => {
          const canvas = document.querySelector("#takePhotoCanvas");
          drawCanvas(canvas, imageBitmap);
        })
        .catch((error) => console.error(error));
    }
    
    /* Utils */
    
    function drawCanvas(canvas, img) {
      canvas.width = getComputedStyle(canvas).width.split("px")[0];
      canvas.height = getComputedStyle(canvas).height.split("px")[0];
      let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
      let x = (canvas.width - img.width * ratio) / 2;
      let y = (canvas.height - img.height * ratio) / 2;
      canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
      canvas
        .getContext("2d")
        .drawImage(
          img,
          0,
          0,
          img.width,
          img.height,
          x,
          y,
          img.width * ratio,
          img.height * ratio,
        );
    }
    
    document.querySelector("video").addEventListener("play", () => {
      document.querySelector("#grabFrameButton").disabled = false;
      document.querySelector("#takePhotoButton").disabled = false;
    });
    
# HTMLSlotElement
The `HTMLSlotElement` interface of the Shadow DOM API enables access to the name and assigned nodes of an HTML `<slot>` element.
EventTarget  Node  Element  HTMLElement  HTMLSlotElement 
## Instance properties
Also inherits properties from its parent interface, `HTMLElement`.
`HTMLSlotElement.name`
    
A string used to get and set the slot's name.
## Instance methods
Also inherits methods from its parent interface, `HTMLElement`.
`HTMLSlotElement.assign()`
    
Sets the manually assigned nodes for this slot to the given nodes.
`HTMLSlotElement.assignedNodes()`
    
Returns a sequence of the nodes assigned to this slot. If the `flatten` option is set to `true`, it returns a sequence of both the nodes assigned to this slot, and the nodes assigned to any other slots that are descendants of this slot. If no assigned nodes are found, it returns the slot's fallback content.
`HTMLSlotElement.assignedElements()`
    
Returns a sequence of the elements assigned to this slot (and no other nodes). If the `flatten` option is set to `true`, it returns a sequence of both the elements assigned to this slot, and the elements assigned to any other slots that are descendants of this slot. If no assigned elements are found, it returns the slot's fallback content.
## Events
Also inherits events from its parent interface, `HTMLElement`.
Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
`slotchange`
    
Fired on an `HTMLSlotElement` instance (`<slot>` element) when the node(s) contained in that slot change.
## Examples
The following snippet is taken from our slotchange example (see it live also).
    
    let slots = this.shadowRoot.querySelectorAll("slot");
    slots[1].addEventListener("slotchange", (e) => {
      let nodes = slots[1].assignedNodes();
      console.log(
        `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
      );
    });
    
Here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
Every time the element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.
# SharedStorageRunOperation
The `SharedStorageRunOperation` interface of the Shared Storage API represents a Run output gate operation.
## Instance methods
`run()` Experimental
    
Defines the structure to which the `run()` method defined inside a Run output gate operation should conform.
## Examples
In this example, a class called `ReachMeasurementOperation` is defined in a worklet and is registered using `SharedStorageWorkletGlobalScope.register()` with the name `reach-measurement`. `SharedStorageRunOperation` defines the structure to which this class must conform, essentially defining the parameters required for the `run()` method. Other than this requirement, the functionality of the class can be defined flexibly.
    
    // reach-measurement-worklet.js
    const SCALE_FACTOR = 65536;
    
    function convertContentIdToBucket(contentId) {
      return BigInt(contentId);
    }
    
    class ReachMeasurementOperation {
      async run(data) {
        const { contentId } = data;
    
        // Read from Shared Storage
        const key = "has-reported-content";
        const hasReportedContent = (await this.sharedStorage.get(key)) === "true";
    
        // Do not report if a report has been sent already
        if (hasReportedContent) {
          return;
        }
    
        // Generate the aggregation key and the aggregatable value
        const bucket = convertContentIdToBucket(contentId);
        const value = 1 * SCALE_FACTOR;
    
        // Send an aggregatable report via the Private Aggregation API
        privateAggregation.sendHistogramReport({ bucket, value });
    
        // Set the report submission status flag
        await this.sharedStorage.set(key, true);
      }
    }
    
    // Register the operation
    register("reach-measurement", ReachMeasurementOperation);
    
Note: It is possible to define and register multiple operations in the same shared storage worklet module script with different names. See `SharedStorageOperation` for an example.
In the main browsing context, the `reach-measurement` operation is invoked using the `WindowSharedStorage.run()` method:
    
    async function measureUniqueReach() {
      // Load the Shared Storage worklet
      await window.sharedStorage.worklet.addModule("reach-measurement-worklet.js");
    
      // Run the reach measurement operation
      await window.sharedStorage.run("reach-measurement", {
        data: { contentId: "1234" },
      });
    }
    
    measureUniqueReach();
    
For more details about this example, see Unique reach measurement. See Shared Storage API for more examples.
This feature does not appear to be defined in any specification.>
  * Shared Storage API


# RTCTransformEvent
The `RTCTransformEvent` of the WebRTC API represent an event that is fired in a dedicated worker when an encoded frame has been queued for processing by a WebRTC Encoded Transform.
The interface has a `transformer` property that exposes a readable stream and a writable stream. A worker should read encoded frames from `transformer.readable`, modify them as needed, and write them to `transformer.writable` in the same order and without any duplication.
At time of writing there is just one event based on `RTCTransformEvent`: `rtctransform`.
Event  RTCTransformEvent 
## Instance properties
Since `RTCTransformEvent` is based on `Event`, its properties are also available.
`RTCTransformEvent.transformer` Read only
    
Returns the `RTCRtpScriptTransformer` associated with the event.
## Transform event types
There is only one type of transform event.
### `rtctransform`
The `rtctransform` event is fired at the worker global scope on construction of an associated `RTCRtpScriptTransform`, and whenever a new encoded video or audio frame is enqueued for processing.
You can add a `rtctransform` event listener to be notified when the new frame is available using either `DedicatedWorkerGlobalScope.addEventListener()` or the `onrtctransform` event handler property.
## Example
This example creates an event listener for the `rtctransform` event.
The example assumes we have a `TransformStream` with an `options` object passed from a `RTCRtpScriptTransform` constructor in the main-thread. The code at the end shows how the stream is piped through the transform stream from the `readable` to the `writable`.
    
    addEventListener("rtctransform", (event) => {
      let transform;
      // Select a transform based on passed options
      if (event.transformer.options.name === "senderTransform") {
        transform = createSenderTransform(); // A TransformStream (not shown)
      } else if (event.transformer.options.name === "receiverTransform") {
        transform = createReceiverTransform(); // A TransformStream (not shown)
      }
      // Pipe frames from the readable to writeable through TransformStream
      event.transformer.readable
        .pipeThrough(transform)
        .pipeTo(event.transformer.writable);
    });
    
Note that this code is part of a more complete example provided in Using WebRTC Encoded Transforms.
  * Using WebRTC Encoded Transforms
  * `TransformStream`


# FileSystemFileEntry
The `FileSystemFileEntry` interface of the File and Directory Entries API represents a file in a file system. It offers properties describing the file's attributes, as well as the `file()` method, which creates a `File` object that can be used to read the file.
FileSystemEntry  FileSystemFileEntry 
## Instance properties
Inherits the properties of its parent interface, `FileSystemEntry`, but has no properties unique to this interface.
## Instance methods
`createWriter()` Deprecated Non-standard
    
Returns a `FileWriter` object which can be used to write data into the file represented by the directory entry.
`file()`
    
Creates a new `File` object which can be used to read the file.
  * File and Directory Entries API


# SVGAnimateTransformElement
The `SVGAnimateTransformElement` interface corresponds to the `<animateTransform>` element.
EventTarget  Node  Element  SVGElement  SVGAnimationElement  SVGAnimateTransformElement 
## Instance properties
This interface has no properties but inherits properties from its parent, `SVGAnimationElement`.
## Instance methods
This interface has no methods but inherits methods from its parent, `SVGAnimationElement`.
# SVGFETileElement
The `SVGFETileElement` interface corresponds to the `<feTile>` element.
EventTarget  Node  Element  SVGElement  SVGFETileElement 
## Instance properties
This interface also inherits properties from its parent interface, `SVGElement`.
`SVGFETileElement.height` Read only
    
An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.
`SVGFETileElement.in1` Read only
    
An `SVGAnimatedString` corresponding to the `in` attribute of the given element.
`SVGFETileElement.result` Read only
    
An `SVGAnimatedString` corresponding to the `result` attribute of the given element.
`SVGFETileElement.width` Read only
    
An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.
`SVGFETileElement.x` Read only
    
An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.
`SVGFETileElement.y` Read only
    
An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.
## Instance methods
This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.
  * `<feTile>`


# NotRestoredReasonDetails
The `NotRestoredReasonDetails` interface of the Performance API represents a single reason why a navigated page was blocked from using the back/forward cache (bfcache).
An array of `NotRestoredReasonDetails` objects can be accessed via the `NotRestoredReasons.reasons` property.
## Instance properties
`reason` Read only Experimental
    
A string describing a reason that the page was blocked from using the back/forward cache.
## Instance methods
`toJSON()` Experimental
    
A serializer; returns a JSON representation of the `NotRestoredReasonDetails` object.
## Examples
See Monitoring bfcache blocking reasons for examples.
  * Monitoring bfcache blocking reasons
  * `PerformanceNavigationTiming.notRestoredReasons`


# PaintWorkletGlobalScope
The `PaintWorkletGlobalScope` interface of the CSS Painting API represents the global object available inside a paint `Worklet`.
## Privacy concerns
To avoid leaking visited links, this feature is currently disabled in Chrome-based browsers for `<a>` elements with an `href` attribute, and for children of such elements. For details, see the following:
  * The CSS Painting API Privacy Considerations section
  * The CSS Painting API spec issue "CSS Paint API leaks browsing history"


## Instance properties
This interface inherits properties from `WorkletGlobalScope`.
`PaintWorkletGlobalScope.devicePixelRatio` Read only Experimental
    
Returns the current device's ratio of physical pixels to logical pixels.
## Instance methods
This interface inherits methods from `WorkletGlobalScope`.
`PaintWorkletGlobalScope.registerPaint()` Experimental
    
Registers a class to programmatically generate an image where a CSS property expects a file.
## Examples
The following three examples go together to show creating, loading, and using a paint `Worklet`.
### Create a paint worklet
The following shows an example worklet module. This should be in a separate js file. Note that `registerPaint()` is called without a reference to a paint `Worklet`.
    
    class CheckerboardPainter {
      paint(ctx, geom, properties) {
        // The global object here is a PaintWorkletGlobalScope
        // Methods and properties can be accessed directly
        // as global features or prefixed using self
        const dpr = self.devicePixelRatio;
    
        // Use `ctx` as if it was a normal canvas
        const colors = ["red", "green", "blue"];
        const size = 32;
        for (let y = 0; y < geom.height / size; y++) {
          for (let x = 0; x < geom.width / size; x++) {
            const color = colors[(x + y) % colors.length];
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.rect(x * size, y * size, size, size);
            ctx.fill();
          }
        }
      }
    }
    
    // Register our class under a specific name
    registerPaint("checkerboard", CheckerboardPainter);
    
### Load a paint worklet
The following example demonstrates loading the above worklet from its js file and does so by feature detection.
    
    if ("paintWorklet" in CSS) {
      CSS.paintWorklet.addModule("checkerboard.js");
    }
    
### Use a paint worklet
This example shows how to use a paint `Worklet` in a stylesheet, including the simplest way to provide a fallback if `CSS.paintWorklet` isn't supported.
    
    textarea {
      background-image: url("checkerboard.png"); /* Fallback */
      background-image: paint(checkerboard);
    }
    
You can also use the `@supports` at-rule.
    
    @supports (background: paint(id)) {
      textarea {
        background-image: paint(checkerboard);
      }
    }
    
  * Using the CSS Painting API
  * CSS Painting API
  * Houdini APIs


# SVGNumberList
The `SVGNumberList` interface defines a list of numbers.
An `SVGNumberList` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
An `SVGNumberList` object is indexable and can be accessed like an array.
## Instance properties
`length`
    
The number of items in the list.
`numberOfItems`
    
The number of items in the list.
## Instance methods
`appendItem()`
    
Inserts a new item at the end of the list.
`clear()`
    
Clears all existing items from the list, with the result being an empty list.
`initialize()`
    
Clears all existing items from the list and re-initializes the list to hold the single item specified by the parameter.
`getItem()`
    
Returns the specified item from the list.
`insertItemBefore()`
    
Inserts a new item into the list at the specified position.
`removeItem()`
    
Removes an existing item from the list.
`replaceItem()`
    
Replaces an existing item in the list with a new item.
# ContactAddress
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `ContactAddress` interface of the Contact Picker API represents a physical address. Instances of this interface are retrieved from the `address` property of the objects returned by `ContactsManager.getProperties()`.
It may be useful to refer to the Universal Postal Union website's Addressing S42 standard materials, which provide information about international standards for postal addresses.
## Instance properties
`ContactAddress.addressLine` Read only Experimental
    
An array of strings providing each line of the address not included among the other properties. The exact size and content varies by country or location and can include, for example, a street name, house number, apartment number, rural delivery route, descriptive instructions, or post office box number.
`ContactAddress.country` Read only Experimental
    
A string specifying the country in which the address is located, using the ISO-3166-1 alpha-2 standard. The string is always given in its canonical upper-case form. Some examples of valid `country` values: `"US"`, `"GB"`, `"CN"`, or `"JP"`.
`ContactAddress.city` Read only Experimental
    
A string which contains the city or town portion of the address.
`ContactAddress.dependentLocality` Read only Experimental
    
A string giving the dependent locality or sublocality within a city, for example, a neighborhood, borough, district, or UK dependent locality.
`ContactAddress.organization` Read only Experimental
    
A string specifying the name of the organization, firm, company, or institution at the address.
`ContactAddress.phone` Read only Experimental
    
A string specifying the telephone number of the recipient or contact person.
`ContactAddress.postalCode` Read only Experimental
    
A string specifying a code used by a jurisdiction for mail routing, for example, the ZIP code in the United States or the PIN code in India.
`ContactAddress.recipient` Read only Experimental
    
A string giving the name of the recipient, purchaser, or contact person at the address.
`ContactAddress.region` Read only Experimental
    
A string containing the top level administrative subdivision of the country, for example a state, province, oblast, or prefecture.
`ContactAddress.sortingCode` Read only Experimental
    
A string providing a postal sorting code such as is used in France.
## Instance methods
`ContactAddress.toJSON()` Experimental
    
A standard serializer that returns a JSON representation of the `ContactAddress` object's properties.
## Examples
The following example prompts the user to select contacts, then prints the first returned address to the console.
    
    const props = ["address"];
    const opts = { multiple: true };
    
    async function getContacts() {
      try {
        const contacts = await navigator.contacts.select(props, opts);
        const contactAddress = contacts[0].address[0];
        console.log(contactAddress);
      } catch (ex) {
        // Handle any errors here.
      }
    }
    
# SVGSwitchElement
The `SVGSwitchElement` interface corresponds to the `<switch>` element.
EventTarget  Node  Element  SVGElement  SVGGraphicsElement  SVGSwitchElement 
## Instance properties
This interface doesn't implement any specific properties, but inherits properties from its parent interface, `SVGGraphicsElement`.
## Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGGraphicsElement`.
# WritableStreamDefaultWriter
Note: This feature is available in Web Workers.
The `WritableStreamDefaultWriter` interface of the Streams API is the object returned by `WritableStream.getWriter()` and once created locks the writer to the `WritableStream` ensuring that no other streams can write to the underlying sink.
## Constructor
`WritableStreamDefaultWriter()`
    
Creates a new `WritableStreamDefaultWriter` object instance.
## Instance properties
`WritableStreamDefaultWriter.closed` Read only
    
Allows you to write code that responds to an end to the streaming process. Returns a promise that fulfills if the stream becomes closed, or rejects if the stream errors or the writer's lock is released.
`WritableStreamDefaultWriter.desiredSize` Read only
    
Returns the desired size required to fill the stream's internal queue.
`WritableStreamDefaultWriter.ready` Read only
    
Returns a `Promise` that resolves when the desired size of the stream's internal queue transitions from non-positive to positive, signaling that it is no longer applying backpressure.
## Instance methods
`WritableStreamDefaultWriter.abort()`
    
Aborts the stream, signaling that the producer can no longer successfully write to the stream and it is to be immediately moved to an error state, with any queued writes discarded.
`WritableStreamDefaultWriter.close()`
    
Closes the associated writable stream.
`WritableStreamDefaultWriter.releaseLock()`
    
Releases the writer's lock on the corresponding stream. After the lock is released, the writer is no longer active. If the associated stream is errored when the lock is released, the writer will appear errored in the same way from now on; otherwise, the writer will appear closed.
`WritableStreamDefaultWriter.write()`
    
Writes a passed chunk of data to a `WritableStream` and its underlying sink, then returns a `Promise` that resolves to indicate the success or failure of the write operation.
## Examples
The following example shows the creation of a `WritableStream` with a custom sink and an API-supplied queuing strategy. It then calls a function called `sendMessage()`, passing the newly created stream and a string. Inside this function it calls the stream's `getWriter()` method, which returns an instance of `WritableStreamDefaultWriter`. A `forEach()` call is used to write each chunk of the string to the stream. Finally, `write()` and `close()` return promises that are processed to deal with success or failure of chunks and streams.
    
    const list = document.querySelector("ul");
    
    async function sendMessage(message, writableStream) {
      // defaultWriter is of type WritableStreamDefaultWriter
      const defaultWriter = writableStream.getWriter();
      const encoder = new TextEncoder();
      const encoded = encoder.encode(message);
    
      try {
        for (const chunk of encoded) {
          await defaultWriter.ready;
          await defaultWriter.write(chunk);
          console.log("Chunk written to sink.");
        }
        // Call ready again to ensure that all chunks are written
        // before closing the writer.
        await defaultWriter.ready;
        await defaultWriter.close();
        console.log("All chunks written");
      } catch (err) {
        console.log("Error:", err);
      }
    }
    
    const decoder = new TextDecoder("utf-8");
    const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
    let result = "";
    const writableStream = new WritableStream(
      {
        // Implement the sink
        write(chunk) {
          return new Promise((resolve, reject) => {
            const buffer = new ArrayBuffer(1);
            const view = new Uint8Array(buffer);
            view[0] = chunk;
            const decoded = decoder.decode(view, { stream: true });
            const listItem = document.createElement("li");
            listItem.textContent = `Chunk decoded: ${decoded}`;
            list.appendChild(listItem);
            result += decoded;
            resolve();
          });
        },
        close() {
          const listItem = document.createElement("li");
          listItem.textContent = `[MESSAGE RECEIVED] ${result}`;
          list.appendChild(listItem);
        },
        abort(err) {
          console.log("Sink error:", err);
        },
      },
      queuingStrategy,
    );
    
    sendMessage("Hello, world.", writableStream);
    
You can find the full code in our Simple writer example.
# VideoDecoder
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Dedicated Web Workers.
The `VideoDecoder` interface of the WebCodecs API decodes chunks of video.
EventTarget  VideoDecoder 
## Constructor
`VideoDecoder()`
    
Creates a new `VideoDecoder` object.
## Instance properties
Inherits properties from its parent, `EventTarget`.
`VideoDecoder.decodeQueueSize` Read only
    
An integer representing the number of queued decode requests.
`VideoDecoder.state` Read only
    
Indicates the current state of decoder. Possible values are:
  * `"unconfigured"`
  * `"configured"`
  * `"closed"`


### Events
`dequeue`
    
Fires to signal a decrease in `VideoDecoder.decodeQueueSize`.
## Static methods
`VideoDecoder.isConfigSupported()`
    
Returns a promise indicating whether the provided `VideoDecoderConfig` is supported.
## Instance methods
Inherits methods from its parent, `EventTarget`.
`VideoDecoder.configure()`
    
Enqueues a control message to configure the video decoder for decoding chunks.
`VideoDecoder.decode()`
    
Enqueues a control message to decode a given chunk of video.
`VideoDecoder.flush()`
    
Returns a promise that resolves once all pending messages in the queue have been completed.
`VideoDecoder.reset()`
    
Resets all states including configuration, control messages in the control message queue, and all pending callbacks.
`VideoDecoder.close()`
    
Ends all pending work and releases system resources.
  * Video processing with WebCodecs
  * WebCodecs API Samples


# Summarizer
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `Summarizer` interface of the Summarizer API contains all the functionality for this API, including checking AI model availability, creating a new `Summarizer` instance, using it to generate a new summary, and more.
## Instance properties
`expectedContextLanguages` Read only Experimental
    
The languages the context strings should be written in.
`expectedInputLanguages` Read only Experimental
    
The languages the `Summarizer` should support.
`format` Read only Experimental
    
The text format summaries will be returned in.
`inputQuota` Read only Experimental
    
The input quota available to the browser for generating summaries.
`length` Read only Experimental
    
The relative length of the generated summaries.
`outputLanguage` Read only Experimental
    
The language the summary should be generated in.
`sharedContext` Read only Experimental
    
A text string describing the context the pieces of text to summarize are being used in, which helps the `Summarizer` generate more suitable summaries.
`type` Read only Experimental
    
The type of summary that will generated by the `Summarizer`.
## Static methods
`availability()` Experimental
    
Returns an enumerated value that indicates whether the browser AI model supports a given `Summarizer` configuration.
`create()` Experimental
    
Creates a new `Summarizer` instance from which to generate summaries.
## Instance methods
`destroy()` Experimental
    
Destroys the `Summarizer` instance it is called on.
`measureInputUsage()` Experimental
    
Reports how much input quota would be used by a summarize operation for a given text input.
`summarize()` Experimental
    
Generates a new summary string.
`summarizeStreaming()` Experimental
    
Generates a new summary as a `ReadableStream`.
## Examples
See Using the Summarizer API for a complete example.
### Creating a `Summarizer` instance
    
    const summarizer = await Summarizer.create({
      sharedContext:
        "A general summary to help a user decide if the text is worth reading",
      type: "tldr",
      length: "short",
      format: "markdown",
      expectedInputLanguages: ["en-US"],
      outputLanguage: "en-US",
    });
    
### Generating a summary
    
    const summary = await summarizer.summarize(myTextString);
    console.log(summary);
    
### Generating a summary stream
    
    const stream = summarizer.summarizeStreaming(myTextString);
    let summary = "";
    
    for await (const chunk of stream) {
      summary += chunk;
    }
    
    console.log("Stream complete");
    summaryOutput.textContent = summary;
    
  * Using the Summarizer API
  * Web AI demos on chrome.dev


# AudioWorklet
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `AudioWorklet` interface of the Web Audio API is used to supply custom audio processing scripts that execute in a separate thread to provide very low latency audio processing.
The worklet's code is run in the `AudioWorkletGlobalScope` global execution context, using a separate Web Audio thread which is shared by the worklet and other audio nodes.
Access the audio context's instance of `AudioWorklet` through the `BaseAudioContext.audioWorklet` property.
Worklet  AudioWorklet 
## Instance properties
This interface also inherits properties defined on its parent interface, `Worklet`.
`port` Read only Experimental
    
Returns a `MessagePort` for custom, asynchronous communication between code in the main thread and the global scope of an audio worklet. This allows for custom messages, such as sending and receiving control data or global settings.
## Instance methods
This interface inherits methods from `Worklet`. The `AudioWorklet` interface does not define any methods of its own.
## Events
`AudioWorklet` has no events to which it responds.
## Examples
See `AudioWorkletNode` for complete examples of custom audio node creation.
  * `AudioWorkletGlobalScope` — the global execution context of an `AudioWorklet`
  * Web Audio API
  * Using the Web Audio API
  * Using AudioWorklet


# TextFormat
The `TextFormat` interface represents specific formatting that should be applied to a range of text in an editable text region that's attached to an `EditContext` instance. The text formatting is requested by the Input Method Editor (IME) window that the user is composing text with.
When using one of the default editable regions of the web, such as a `<textarea>` element, IME composition is handled by the browser and operating system for you. For example, when using Japanese IME in a textarea, on Windows, the following text formats can be applied:
  * When text is being composed with the keyboard, the typed characters have a thin wavy underline:
  * When the user selects a suggestion from the list of candidates in the IME window, the text is replaced and is underlined with a thick solid line:


When creating your own custom editable region by using the EditContext API, you need to handle IME composition yourself. You should listen for the `textformatupdate` event, which gives you the list of text formats that the IME window wants to apply to the text being composed. You should then update the formatting of the text displayed in your editable region accordingly.
## Constructor
`TextFormat()` Experimental
    
Returns a new `TextFormat` instance.
## Instance properties
`TextFormat.rangeStart` Read only Experimental
    
The start position of the text range that needs to be formatted with the given text format.
`TextFormat.rangeEnd` Read only Experimental
    
The end position of the text range that needs to be formatted with the given text format.
`TextFormat.underlineStyle` Read only Experimental
    
The style of the underline that needs to be applied to the text range that is being formatted.
`TextFormat.underlineThickness` Read only Experimental
    
The thickness of the underline that needs to be applied to the text range that is being formatted.
## Examples
>
### Using the `textformatupdate` event
In the following example, the `textformatupdate` event is used to log the various formats that the IME composition window wants to apply to text ranges in the editable element. Note that the event listener callback in this example is only called when using an IME window to compose text.
    
    <div id="editor"></div>
    
    
    const editorEl = document.getElementById("editor");
    const editContext = new EditContext(editorEl);
    editorEl.editContext = editContext;
    
    editContext.addEventListener("textformatupdate", (e) => {
      // Get the TextFormat instances.
      const formats = e.getTextFormats();
    
      // Iterate over the TextFormat instances.
      for (const format of formats) {
        console.log(
          `Applying a ${format.underlineThickness} ${format.underlineStyle} underline between ${format.rangeStart} and ${format.rangeEnd}.`,
        );
      }
    });
    
# ViewTimeline
The `ViewTimeline` interface of the Web Animations API represents a view progress timeline (see CSS scroll-driven animations for more details).
Pass a `ViewTimeline` instance to the `Animation()` constructor or the `animate()` method to specify it as the timeline that will control the progress of the animation.
AnimationTimeline  ScrollTimeline  ViewTimeline 
## Constructor
`ViewTimeline()`
    
Creates a new `ViewTimeline` object instance.
## Instance properties
This interface also inherits the properties of its parent, `ScrollTimeline`.
`subject` Read only
    
Returns a reference to the subject element whose visibility within its nearest ancestor scrollable element (scroller) is driving the progress of the timeline and therefore the animation.
`startOffset` Read only
    
Returns a `CSSNumericValue` representing the starting (0% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.
`endOffset` Read only
    
Returns a `CSSNumericValue` representing the ending (100% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.
## Instance methods
This interface inherits the methods of its parent, `ScrollTimeline`.
## Examples
>
### Displaying the subject and offsets of a view progress timeline
In this example, we animate an element with a `class` of `subject` along a view progress timeline — it animates when moved upwards through the document as it scrolls. We also output the `subject`, `startOffset`, and `endOffset` values to an output element in the top-right corner.
#### HTML
The HTML for the example is shown below.
    
    <div class="content">
      <h1>Content</h1>
    
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
        quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
        interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
        vivamus at augue.
      </p>
    
      <p>
        Dolor sed viverra ipsum nunc aliquet. Sed risus pretium quam vulputate
        dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
        duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
        Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
        arcu vitae elementum curabitur vitae nunc sed velit.
      </p>
    
      <div class="subject animation"></div>
    
      <p>
        Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
        cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
        dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
        tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
        vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
        quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
        imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
        scelerisque. Netus et malesuada fames ac.
      </p>
    
      <div class="output"></div>
    </div>
    
#### CSS
The CSS for the example looks like this:
    
    .subject {
      width: 300px;
      height: 200px;
      margin: 0 auto;
      background-color: deeppink;
    }
    
    .content {
      width: 75%;
      max-width: 800px;
      margin: 0 auto;
    }
    
    .output {
      position: fixed;
      top: 5px;
      right: 5px;
    }
    
    p,
    h1,
    div {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    h1 {
      font-size: 3rem;
    }
    
    p {
      font-size: 1.5rem;
      line-height: 1.5;
    }
    
#### JavaScript
In the JavaScript, we grab references to the `subject` and `output` `<div>`s, then create a new `ViewTimeline`, associating it with the `subject` element to specify that the timeline progress is based on this element's visibility through its scrolling ancestor, setting a `block` axis, and setting `inset` values to adjust the position of the box in which the subject is deemed to be visible.
We then animate the `subject` element with the Web Animations API. Last of all, we display the `subject`, `startOffset`, and `endOffset` values in the `output` element.
    
    const subject = document.querySelector(".subject");
    const output = document.querySelector(".output");
    
    const timeline = new ViewTimeline({
      subject,
      axis: "block",
      inset: [CSS.px("200"), CSS.px("300")],
    });
    
    subject.animate(
      {
        opacity: [0, 1],
        transform: ["scaleX(0)", "scaleX(1)"],
      },
      {
        fill: "both",
        timeline,
      },
    );
    
    output.textContent += `Subject element: ${timeline.subject.nodeName}, `;
    output.textContent += `start offset: ${timeline.startOffset}, `;
    output.textContent += `end offset: ${timeline.endOffset}.`;
    
#### Result
Scroll to see the subject element being animated.
  * Web Animations API
  * CSS scroll-driven animations
  * `AnimationTimeline`, `ScrollTimeline`


# SVG API
SVG provides elements for circles, rectangles, and simple and complex curves. The elements' attribute values specify how these must be drawn. The SVG API is the subset of the DOM connecting these SVG elements and their attribute values to scripts or programming languages by representing them in memory. The SVG API thus provides methods that allow programmatic access to the SVG elements and their attribute values.
The SVG API is a set of interfaces that have been categorized into the following broad categories:
  1. The element interfaces provide access to the properties of SVG elements and methods to manipulate them.
  2. The static data type interfaces provide access to element attribute values and methods to manipulate them.
  3. For attributes that can be animated, the animated data type interfaces provide read only access to the current animated value of an attribute.
  4. The Synchronized Multimedia Integration Language (SMIL) interfaces
  5. Others


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


### SVG data type interfaces
Here are the DOM APIs for data types used in the definitions of SVG properties and attributes.
#### Static type
  * `SVGAngle`
  * `SVGLength`
  * `SVGLengthList`
  * `SVGNumber`
  * `SVGNumberList`
  * `SVGPreserveAspectRatio`
  * `SVGStringList`
  * `SVGTransform`
  * `SVGTransformList`


#### Animated type
  * `SVGAnimatedAngle`
  * `SVGAnimatedBoolean`
  * `SVGAnimatedEnumeration`
  * `SVGAnimatedInteger`
  * `SVGAnimatedLength`
  * `SVGAnimatedLengthList`
  * `SVGAnimatedNumber`
  * `SVGAnimatedNumberList`
  * `SVGAnimatedPreserveAspectRatio`
  * `SVGAnimatedRect`
  * `SVGAnimatedString`
  * `SVGAnimatedTransformList`


### SMIL-related interfaces
  * `TimeEvent`


### Other SVG interfaces
  * `ShadowAnimation`
  * `SVGUnitTypes`
  * `SVGUseElementShadowRoot`


  * Getting Started with SVG


# ElementInternals
The `ElementInternals` interface of the Document Object Model gives web developers a way to allow custom elements to fully participate in HTML forms. It provides utilities for working with these elements in the same way you would work with any standard HTML form element, and also exposes the Accessibility Object Model to the element.
## Constructor
This interface has no constructor. An `ElementInternals` object is returned when calling `HTMLElement.attachInternals()`.
## Instance properties
`ElementInternals.shadowRoot` Read only
    
Returns the `ShadowRoot` object associated with this element.
`ElementInternals.form` Read only
    
Returns the `HTMLFormElement` associated with this element.
`ElementInternals.states` Read only
    
Returns the `CustomStateSet` associated with this element.
`ElementInternals.willValidate` Read only
    
A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.
`ElementInternals.validity` Read only
    
Returns a `ValidityState` object which represents the different validity states the element can be in, with respect to constraint validation.
`ElementInternals.validationMessage` Read only
    
A string containing the validation message of this element.
`ElementInternals.labels` Read only
    
Returns a `NodeList` of all of the label elements associated with this element.
### Instance properties included from ARIA
The `ElementInternals` interface also includes the following properties.
Note: These are included in order that default accessibility semantics can be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.
`ElementInternals.ariaAtomic`
    
A string reflecting the `aria-atomic` attribute, which indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the `aria-relevant` attribute.
`ElementInternals.ariaAutoComplete`
    
A string reflecting the `aria-autocomplete` attribute, which indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox, searchbox, or textbox and specifies how predictions would be presented if they were made.
`ElementInternals.ariaBrailleLabel`
    
A string reflecting the `aria-braillelabel` attribute, which defines the braille label of the element.
`ElementInternals.ariaBrailleRoleDescription`
    
A string reflecting the `aria-brailleroledescription` attribute, which defines the ARIA braille role description of the element.
`ElementInternals.ariaBusy`
    
A string reflecting the `aria-busy` attribute, which indicates whether an element is being modified, as assistive technologies may want to wait until the modifications are complete before exposing them to the user.
`ElementInternals.ariaChecked`
    
A string reflecting the `aria-checked` attribute, which indicates the current "checked" state of checkboxes, radio buttons, and other widgets that have a checked state.
`ElementInternals.ariaColCount`
    
A string reflecting the `aria-colcount` attribute, which defines the number of columns in a table, grid, or treegrid.
`ElementInternals.ariaColIndex`
    
A string reflecting the `aria-colindex` attribute, which defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
`ElementInternals.ariaColIndexText`
    
A string reflecting the `aria-colindextext` attribute, which defines a human readable text alternative of aria-colindex.
`ElementInternals.ariaColSpan`
    
A string reflecting the `aria-colspan` attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
`ElementInternals.ariaCurrent`
    
A string reflecting the `aria-current` attribute, which indicates the element that represents the current item within a container or set of related elements.
`ElementInternals.ariaDescription`
    
A string reflecting the `aria-description` attribute, which defines a string value that describes or annotates the current ElementInternals.
`ElementInternals.ariaDisabled`
    
A string reflecting the `aria-disabled` attribute, which indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
`ElementInternals.ariaExpanded`
    
A string reflecting the `aria-expanded` attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed.
`ElementInternals.ariaHasPopup`
    
A string reflecting the `aria-haspopup` attribute, which indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an ElementInternals.
`ElementInternals.ariaHidden`
    
A string reflecting the `aria-hidden` attribute, which indicates whether the element is exposed to an accessibility API.
`ElementInternals.ariaInvalid`
    
A string reflecting the `aria-invalid` attribute, which indicates the entered value does not conform to the format expected by the application.
`ElementInternals.ariaKeyShortcuts`
    
A string reflecting the `aria-keyshortcuts` attribute, which indicates keyboard shortcuts that an author has implemented to activate or give focus to an object.
`ElementInternals.ariaLabel`
    
A string reflecting the `aria-label` attribute, which defines a string value that labels the current object.
`ElementInternals.ariaLevel`
    
A string reflecting the `aria-level` attribute, which defines the hierarchical level of an element within a structure.
`ElementInternals.ariaLive`
    
A string reflecting the `aria-live` attribute, which indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
`ElementInternals.ariaModal`
    
A string reflecting the `aria-modal` attribute, which indicates whether an element is modal when displayed.
`ElementInternals.ariaMultiline`
    
A string reflecting the `aria-multiline` attribute, which indicates whether a text box accepts multiple lines of input or only a single line.
`ElementInternals.ariaMultiSelectable`
    
A string reflecting the `aria-multiselectable` attribute, which indicates that the user may select more than one item from the current selectable descendants.
`ElementInternals.ariaOrientation`
    
A string reflecting the `aria-orientation` attribute, which indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
`ElementInternals.ariaPlaceholder`
    
A string reflecting the `aria-placeholder` attribute, which defines a short hint intended to aid the user with data entry when the control has no value.
`ElementInternals.ariaPosInSet`
    
A string reflecting the `aria-posinset` attribute, which defines an element's number or position in the current set of listitems or treeitems.
`ElementInternals.ariaPressed`
    
A string reflecting the `aria-pressed` attribute, which indicates the current "pressed" state of toggle buttons.
`ElementInternals.ariaReadOnly`
    
A string reflecting the `aria-readonly` attribute, which indicates that the element is not editable, but is otherwise operable.
`ElementInternals.ariaRelevant` Non-standard
    
A string reflecting the `aria-relevant` attribute, which indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. This is used to describe what changes in an `aria-live` region are relevant and should be announced.
`ElementInternals.ariaRequired`
    
A string reflecting the `aria-required` attribute, which indicates that user input is required on the element before a form may be submitted.
`ElementInternals.role`
    
A string which contains an ARIA role. A full list of ARIA roles can be found on the ARIA techniques page.
`ElementInternals.ariaRoleDescription`
    
A string reflecting the `aria-roledescription` attribute, which defines a human-readable, author-localized description for the role of an Element.
`ElementInternals.ariaRowCount`
    
A string reflecting the `aria-rowcount` attribute, which defines the total number of rows in a table, grid, or treegrid.
`ElementInternals.ariaRowIndex`
    
A string reflecting the `aria-rowindex` attribute, which defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
`ElementInternals.ariaRowIndexText`
    
A string reflecting the `aria-rowindextext` attribute, which defines a human readable text alternative of aria-rowindex.
`ElementInternals.ariaRowSpan`
    
A string reflecting the `aria-rowspan` attribute, which defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
`ElementInternals.ariaSelected`
    
A string reflecting the `aria-selected` attribute, which indicates the current "selected" state of elements that have a selected state.
`ElementInternals.ariaSetSize`
    
A string reflecting the `aria-setsize` attribute, which defines the number of items in the current set of listitems or treeitems.
`ElementInternals.ariaSort`
    
A string reflecting the `aria-sort` attribute, which indicates if items in a table or grid are sorted in ascending or descending order.
`ElementInternals.ariaValueMax`
    
A string reflecting the `aria-valueMax` attribute, which defines the maximum allowed value for a range widget.
`ElementInternals.ariaValueMin`
    
A string reflecting the `aria-valueMin` attribute, which defines the minimum allowed value for a range widget.
`ElementInternals.ariaValueNow`
    
A string reflecting the `aria-valueNow` attribute, which defines the current value for a range widget.
`ElementInternals.ariaValueText`
    
A string reflecting the `aria-valuetext` attribute, which defines the human-readable text alternative of aria-valuenow for a range widget.
#### Instance properties reflected from ARIA element references
The properties reflect the elements specified by `id` reference in the corresponding attributes, but with some caveats. See Reflected element references in the Reflected attributes guide for more information.
`ElementInternals.ariaActiveDescendantElement`
    
An element that represents the current active element when focus is on a `composite` widget, `combobox`, `textbox`, `group`, or `application`. Reflects the `aria-activedescendant` attribute.
`ElementInternals.ariaControlsElements`
    
An array of elements whose contents or presence are controlled by the element it is applied to. Reflects the `aria-controls` attribute.
`ElementInternals.ariaDescribedByElements`
    
An array of elements that contain the accessible description for the element it is applied to. Reflects the `aria-describedby` attribute.
`ElementInternals.ariaDetailsElements`
    
An array of elements that provide accessible details for the element it is applied to. Reflects the `aria-details` attribute.
`ElementInternals.ariaErrorMessageElements`
    
An array of elements that provide an error message for the element it is applied to. Reflects the `aria-errormessage` attribute.
`ElementInternals.ariaFlowToElements`
    
An array of elements that identify the next element (or elements) in an alternate reading order of content, overriding the general default reading order at the user's discretion. Reflects the `aria-flowto` attribute.
`ElementInternals.ariaLabelledByElements`
    
An array of elements that provide the accessible name for the element it is applied to. Reflects the `aria-labelledby` attribute.
`ElementInternals.ariaOwnsElements`
    
An array of elements owned by the element this is applied to. This is used to define a visual, functional, or contextual relationship between a parent and its child elements when the DOM hierarchy cannot be used to represent the relationship. Reflects the `aria-owns` attribute.
## Instance methods
`ElementInternals.setFormValue()`
    
Sets the element's submission value and state, communicating these to the user agent.
`ElementInternals.setValidity()`
    
Sets the validity of the element.
`ElementInternals.checkValidity()`
    
Checks if an element meets any constraint validation rules applied to it.
`ElementInternals.reportValidity()`
    
Checks if an element meets any constraint validation rules applied to it, and also sends a validation message to the user agent.
## Examples
The following example demonstrates how to create a custom form-associated element with `HTMLElement.attachInternals`.
    
    class CustomCheckbox extends HTMLElement {
      static formAssociated = true;
    
      constructor() {
        super();
        this.internals_ = this.attachInternals();
      }
    
      // …
    }
    
    window.customElements.define("custom-checkbox", CustomCheckbox);
    
    let element = document.createElement("custom-checkbox");
    let form = document.createElement("form");
    
    // Append element to form to associate it
    form.appendChild(element);
    
    console.log(element.internals_.form);
    // expected output: <form><custom-checkbox></custom-checkbox></form>
    
  * More capable form controls via web.dev (2019)
  * Creating custom form controls with ElementInternals via CSS-tricks (2021)


# RsaHashedKeyGenParams
The `RsaHashedKeyGenParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.generateKey()`, when generating any RSA-based key pair: that is, when the algorithm is identified as any of RSASSA-PKCS1-v1_5, RSA-PSS, or RSA-OAEP.
## Instance properties
`name`
    
A string. This should be set to `RSASSA-PKCS1-v1_5`, `RSA-PSS`, or `RSA-OAEP`, depending on the algorithm you want to use.
`modulusLength`
    
A `Number`. The length in bits of the RSA modulus. This should be at least 2048: see for example see SP 800-131A Rev. 2. Some organizations are now recommending that it should be 4096.
`publicExponent`
    
A `Uint8Array`. The public exponent. Unless you have a good reason to use something else, specify 65537 here (`[0x01, 0x00, 0x01]`).
`hash`
    
A string or an object containing a single property called `name` with a string value. It is an identifier for the digest algorithm to use. This should be one of the following:
  * `SHA-256`: selects the SHA-256 algorithm.
  * `SHA-384`: selects the SHA-384 algorithm.
  * `SHA-512`: selects the SHA-512 algorithm.


Warning: `SHA-1` is also supported here but the SHA-1 algorithm is considered vulnerable and should no longer be used.
## Examples
See the examples for `SubtleCrypto.generateKey()`.
Browsers that support any RSA-based algorithm for the `SubtleCrypto.generateKey()` method will support this type.
  * `SubtleCrypto.generateKey()`.


# WebGLContextEvent
Note: This feature is available in Web Workers.
The WebGLContextEvent interface is part of the WebGL API and is an interface for an event that is generated in response to a status change to the WebGL rendering context.
Event  WebGLContextEvent 
## Constructor
`WebGLContextEvent()`
    
Creates a new `WebGLContextEvent` object.
## Instance properties
This interface inherits properties from its parent interface, `Event`.
`WebGLContextEvent.statusMessage`
    
A read-only property containing additional information about the event.
## Instance methods
This interface doesn't define any own methods, but inherits methods from its parent interface, `Event`.
## Examples
With the help of the `WEBGL_lose_context` extension, you can simulate the `webglcontextlost` and `webglcontextrestored` events:
    
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext("webgl");
    
    canvas.addEventListener(
      "webglcontextlost",
      (e) => {
        console.log(e);
      },
      false,
    );
    
    gl.getExtension("WEBGL_lose_context").loseContext();
    
    // WebGLContextEvent event with type "webglcontextlost" is logged.
    
  * `WebGLRenderingContext.isContextLost()`
  * `WEBGL_lose_context`, `WEBGL_lose_context.loseContext()`, `WEBGL_lose_context.restoreContext()`
  * Events: webglcontextlost, webglcontextrestored, webglcontextcreationerror


# Service Worker API
Note: This feature is available in Web Workers.
Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests, and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.
Note: Service workers are a type of web worker. See Web workers for general information about worker types and use cases.
## Service worker concepts and usage
A service worker is an event-driven worker registered against an origin and a path. It takes the form of a JavaScript file that can control the web page/site that it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations (the most obvious one being when the network is not available).
Service workers run in a worker context: they therefore have no DOM access and run on a different thread to the main JavaScript that powers your app. They are non-blocking and designed to be fully asynchronous. As a consequence, APIs such as synchronous XHR and Web Storage can't be used inside a service worker.
Service workers can't import JavaScript modules dynamically, and `import()` will throw an error if it is called in a service worker global scope. Static imports using the `import` statement are allowed.
Service workers are only available in secure contexts: this means that their document is served over HTTPS, although browsers also treat `http://localhost` as a secure context, to facilitate local development. HTTP connections are susceptible to malicious code injection by man in the middle attacks, and such attacks could be worse if allowed access to these powerful APIs.
Note: On Firefox, for testing you can run service workers over HTTP (insecurely); simply check the Enable Service Workers over HTTP (when toolbox is open) option in the Firefox DevTools options/gear menu.
Note: Unlike previous attempts in this area such as AppCache, service workers don't make assumptions about what you are trying to do, but then break when those assumptions are not exactly right. Instead, service workers give you much more granular control.
Note: Service workers make heavy use of promises, as generally they will wait for responses to come through, after which they will respond with a success or failure action. The promises architecture is ideal for this.
### Registration
A service worker is first registered using the `ServiceWorkerContainer.register()` method. If successful, your service worker will be downloaded to the client and attempt installation/activation (see below) for URLs accessed by the user inside the whole origin, or a subset specified by you.
### Download, install and activate
At this point, your service worker will observe the following lifecycle:
  1. Download
  2. Install
  3. Activate


The service worker is immediately downloaded when a user first accesses a service worker–controlled site/page.
After that, it is updated when:
  * A navigation to an in-scope page occurs.
  * An event is fired on the service worker and it hasn't been downloaded in the last 24 hours.


Installation is attempted when the downloaded file is found to be new — either different to an existing service worker (byte-wise compared), or the first service worker encountered for this page/site.
If this is the first time a service worker has been made available, installation is attempted, then after a successful installation, it is activated.
If there is an existing service worker available, the new version is installed in the background, but not yet activated — at this point it is called the worker in waiting. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more pages to be loaded, the new service worker activates (becoming the active worker). Activation can happen sooner using `ServiceWorkerGlobalScope.skipWaiting()` and existing pages can be claimed by the active worker using `Clients.claim()`.
You can listen for the `install` event; a standard action is to prepare your service worker for usage when this fires, for example by creating a cache using the built-in storage API, and placing assets inside it that you'll want for running your app offline.
There is also an `activate` event. The point where this event fires is generally a good time to clean up old caches and other things associated with the previous version of your service worker.
Your service worker can respond to requests using the `FetchEvent` event. You can modify the response to these requests in any way you want, using the `FetchEvent.respondWith()` method.
Note: Because `install`/`activate` events could take a while to complete, the service worker spec provides a `waitUntil()` method. Once it is called on `install` or `activate` events with a promise, functional events such as `fetch` and `push` will wait until the promise is successfully resolved.
For a complete tutorial to show how to build up your first basic example, read Using Service Workers.
### Using static routing to control how resources are fetched
Service workers can incur an unnecessary performance cost — when a page is loaded for the first time in a while, the browser has to wait for the service worker to start up and run to know what content to load and whether it should come from a cache or the network.
If you already know ahead of time where certain content should be fetched from, you can bypass the service worker altogether and fetch resources immediately. The `InstallEvent.addRoutes()` method can be used to implement this use case and more.
## Other use case ideas
Service workers are also intended to be used for such things as:
  * Background data synchronization.
  * Responding to resource requests from other origins.
  * Receiving centralized updates to expensive-to-calculate data such as geolocation or gyroscope, so multiple pages can make use of one set of data.
  * Client-side compiling and dependency management of CoffeeScript, less, CJS/AMD modules, etc. for development purposes.
  * Hooks for background services.
  * Custom templating based on certain URL patterns.
  * Performance enhancements, for example, pre-fetching resources that the user is likely to need soon, such as the next few pictures in a photo album.
  * API mocking.


In the future, service workers will be able to do several other useful things for the web platform that will bring it closer to native app viability. Interestingly, other specifications can and will start to make use of the service worker context, for example:
  * Background synchronization: Start up a service worker even when no users are at the site, so caches can be updated, etc.
  * Reacting to push messages: Start up a service worker to send users a message to tell them new content is available.
  * Reacting to a particular time & date.
  * Entering a geo-fence.


## Interfaces
`Cache`
    
Represents the storage for `Request` / `Response` object pairs that are cached as part of the `ServiceWorker` life cycle.
`CacheStorage`
    
Represents the storage for `Cache` objects. It provides a master directory of all the named caches that a `ServiceWorker` can access, and maintains a mapping of string names to corresponding `Cache` objects.
`Client`
    
Represents the scope of a service worker client. A service worker client is either a document in a browser context or a `SharedWorker`, which is controlled by an active worker.
`Clients`
    
Represents a container for a list of `Client` objects; the main way to access the active service worker clients at the current origin.
`ExtendableEvent`
    
Extends the lifetime of the `install` and `activate` events dispatched on the `ServiceWorkerGlobalScope`, as part of the service worker lifecycle. This ensures that any functional events (like `FetchEvent`) are not dispatched to the `ServiceWorker`, until it upgrades database schemas, and deletes outdated cache entries, etc.
`ExtendableMessageEvent`
    
The event object of a `message` event fired on a service worker (when a channel message is received on the `ServiceWorkerGlobalScope` from another context) — extends the lifetime of such events.
`FetchEvent`
    
The parameter passed into the `onfetch` handler, `FetchEvent` represents a fetch action that is dispatched on the `ServiceWorkerGlobalScope` of a `ServiceWorker`. It contains information about the request and resulting response, and provides the `FetchEvent.respondWith()` method, which allows us to provide an arbitrary response back to the controlled page.
`InstallEvent`
    
The parameter passed into an `install` event handler function, the `InstallEvent` interface represents an install action that is dispatched on the `ServiceWorkerGlobalScope` of a `ServiceWorker`. As a child of `ExtendableEvent`, it ensures that functional events such as `FetchEvent` are not dispatched during installation.
`NavigationPreloadManager`
    
Provides methods for managing the preloading of resources with a service worker.
`ServiceWorker`
    
Represents a service worker. Multiple browsing contexts (e.g., pages, workers, etc.) can be associated with the same `ServiceWorker` object.
`ServiceWorkerContainer`
    
Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister, and update service workers, and access the state of service workers and their registrations.
`ServiceWorkerGlobalScope`
    
Represents the global execution context of a service worker.
`ServiceWorkerRegistration`
    
Represents a service worker registration.
`WindowClient`
    
Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of `Client` object, with some additional methods and properties available.
### Extensions to other interfaces
`Window.caches` and `WorkerGlobalScope.caches`
    
Returns the `CacheStorage` object associated with the current context.
`Navigator.serviceWorker` and `WorkerNavigator.serviceWorker`
    
Returns a `ServiceWorkerContainer` object, which provides access to registration, removal, upgrade, and communication with the `ServiceWorker` objects for the associated document.
  * Using Service Workers
  * Service Worker Lifecycle
  * Service workers basic code example
  * Web APIs that are related to the Service Worker API: 
    * Background Fetch API
    * Background Synchronization API
    * Content Index API
    * Cookie Store API
    * Notifications API
    * Payment Handler API
    * Push API
    * Web Periodic Background Synchronization API


# AesKeyGenParams
The `AesKeyGenParams` dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.generateKey()`, when generating an AES key: that is, when the algorithm is identified as any of AES-CBC, AES-CTR, AES-GCM, or AES-KW.
## Instance properties
`name`
    
A string. This should be set to `AES-CBC`, `AES-CTR`, `AES-GCM`, or `AES-KW`, depending on the algorithm you want to use.
`length`
    
A `Number` — the length in bits of the key to generate. This must be one of: 128, 192, or 256.
## Examples
See the examples for `SubtleCrypto.generateKey()`.
Browsers that support any of the AES-based algorithms for the `SubtleCrypto.generateKey()` method will support this type.
  * `SubtleCrypto.generateKey()`.


# SVGUnitTypes
The `SVGUnitTypes` interface defines a commonly used set of constants used for reflecting `gradientUnits`, `patternContentUnits` and other similar attributes.
## Instance properties
This interface doesn't implement any specific properties.
## Instance methods
This interface doesn't implement any specific methods.
## Static properties
`SVG_UNIT_TYPE_UNKNOWN` (0)
    
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
`SVG_UNIT_TYPE_USERSPACEONUSE` (1)
    
Corresponds to the value `userSpaceOnUse`.
`SVG_UNIT_TYPE_OBJECTBOUNDINGBOX` (2)
    
Corresponds to the value `objectBoundingBox`.
# Pointer Lock API
The Pointer Lock API (formerly called Mouse Lock API) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor in the viewport. It gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view. It is ideal for first-person 3D games, for example.
More than that, the API is useful for any applications that require significant mouse input to control movements, rotate objects, and change entries, for example allowing users to control the viewing angle by moving the mouse around without any button clicking. The buttons are then freed up for other actions. Other examples include apps for viewing maps or satellite imagery.
Pointer lock lets you access mouse events even when the cursor goes past the boundary of the browser or screen. For example, your users can continue to rotate or manipulate a 3D model by moving the mouse without end. Without Pointer lock, the rotation or manipulation stops the moment the pointer reaches the edge of the browser or screen. Game players can now click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game.
## Basic concepts
Pointer lock is related to pointer capture. Pointer capture provides continued delivery of events to a target element while a mouse is being dragged, but it stops when the mouse button is released. Pointer lock is different from pointer capture in the following ways:
  * It is persistent: Pointer lock does not release the mouse until an explicit API call is made or the user uses a specific release gesture.
  * It is not limited by browser or screen boundaries.
  * It continues to send events regardless of mouse button state.
  * It hides the cursor.


## Method/properties overview
This section provides a brief description of each property and method related to the pointer lock specification.
### requestPointerLock()
The Pointer lock API, similar to the Fullscreen API, extends DOM elements by adding a new method, `requestPointerLock()`. The following example requests pointer lock on a `<canvas>` element:
    
    canvas.addEventListener("click", async () => {
      await canvas.requestPointerLock();
    });
    
Note: If a user has exited pointer lock via the default unlock gesture, or pointer lock has not previously been entered for this document, an event generated as a result of an engagement gesture must be received by the document before `requestPointerLock` will succeed. (from https://w3c.github.io/pointerlock/#extensions-to-the-element-interface)
Operating systems enable mouse acceleration by default, which is useful when you sometimes want slow precise movement (think about you might use a graphics package), but also want to move great distances with a faster mouse movement (think about scrolling, and selecting several files). For some first-person perspective games however, raw mouse input data is preferred for controlling camera rotation — where the same distance movement, fast or slow, results in the same rotation. This results in a better gaming experience and higher accuracy, according to professional gamers.
To disable OS-level mouse acceleration and access raw mouse input, you can set the `unadjustedMovement` to `true`:
    
    canvas.addEventListener("click", async () => {
      await canvas.requestPointerLock({
        unadjustedMovement: true,
      });
    });
    
## Handling promise and non-promise versions of requestPointerLock()
The above code snippet will still work in browsers that do not support the promise-based version of `requestPointerLock()` or the `unadjustedMovement` option — the `await` operator is permitted in front of a function that does not return a promise, and the options object will just be ignored in non-supporting browsers.
However, this could be confusing, and has other potential side-effects (for example, trying to use `requestPointerLock().then()` would throw an error in non-supporting browsers), so you may want to handle this explicitly using code along the following lines:
    
    function requestPointerLockWithUnadjustedMovement() {
      const promise = myTargetElement.requestPointerLock({
        unadjustedMovement: true,
      });
    
      if (!promise) {
        console.log("disabling mouse acceleration is not supported");
        return;
      }
    
      return promise
        .then(() => console.log("pointer is locked"))
        .catch((error) => {
          if (error.name === "NotSupportedError") {
            // Some platforms may not support unadjusted movement.
            // You can request again a regular pointer lock.
            return myTargetElement.requestPointerLock();
          }
        });
    }
    
### pointerLockElement and exitPointerLock()
The Pointer lock API also extends the `Document` interface, adding a new property and a new method:
  * `pointerLockElement` is used for accessing the currently locked element (if any).
  * `exitPointerLock()` is used to exit the pointer lock.


The `pointerLockElement` property is useful for determining if any element is currently pointer locked (e.g., for doing a boolean check) and also for obtaining a reference to the locked element, if any.
Here is an example of using `pointerLockElement`:
    
    if (document.pointerLockElement === canvas) {
      console.log("The pointer lock status is now locked");
    } else {
      console.log("The pointer lock status is now unlocked");
    }
    
The `Document.exitPointerLock()` method is used to exit pointer lock, and like `requestPointerLock`, works asynchronously using the `pointerlockchange` and `pointerlockerror` events, which you'll see more about below.
    
    document.exitPointerLock();
    
## pointerlockchange event
When the Pointer lock state changes—for example, when calling `requestPointerLock()` or `exitPointerLock()`, the user pressing the ESC key, etc.—the `pointerlockchange` event is dispatched to the `document`. This is a simple event containing no extra data.
    
    document.addEventListener("pointerlockchange", lockChangeAlert, false);
    
    function lockChangeAlert() {
      if (document.pointerLockElement === canvas) {
        console.log("The pointer lock status is now locked");
        // Do something useful in response
      } else {
        console.log("The pointer lock status is now unlocked");
        // Do something useful in response
      }
    }
    
## pointerlockerror event
When there is an error caused by calling `requestPointerLock()` or `exitPointerLock()`, the `pointerlockerror` event is dispatched to the `document`. This is a simple event containing no extra data.
    
    document.addEventListener("pointerlockerror", lockError, false);
    
    function lockError(e) {
      alert("Pointer lock failed");
    }
    
## Extensions to mouse events
The Pointer lock API extends the normal `MouseEvent` interface with movement attributes. Two new attributes to mouse events—`movementX` and `movementY`—provide the change in mouse positions. The values of the parameters are the same as the difference between the values of `MouseEvent` properties, `screenX` and `screenY`, which are stored in two subsequent `mousemove` events, `eNow` and `ePrevious`. In other words, the Pointer lock parameter `movementX = eNow.screenX - ePrevious.screenX`.
### Locked state
When Pointer lock is enabled, the standard `MouseEvent` properties `clientX`, `clientY`, `screenX`, and `screenY` are held constant, as if the mouse is not moving. The `movementX` and `movementY` properties continue to provide the mouse's change in position. There is no limit to `movementX` and `movementY` values if the mouse is continuously moving in a single direction. The concept of the mouse cursor does not exist and the cursor cannot move off the window or be clamped by a screen edge.
### Unlocked state
The parameters `movementX` and `movementY` are valid regardless of the mouse lock state, and are available even when unlocked for convenience.
When the mouse is unlocked, the system cursor can exit and re-enter the browser window. If that happens, `movementX` and `movementY` could be set to zero.
## Simple example walkthrough
We've written a pointer lock demo (see source code) to show you how to use it to set up a simple control system. This demo uses JavaScript to draw a ball on top of a `<canvas>` element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse. Let's see how this works.
We set initial x and y positions on the canvas:
    
    let x = 50;
    let y = 50;
    
Next we set up an event listener to run the `requestPointerLock()` method on the canvas when it is clicked, which initiates pointer lock. The `document.pointerLockElement` check is to see if there is already an active pointer lock — we don't want to keep calling `requestPointerLock()` on the canvas every time we click inside it if we already have pointer lock.
    
    canvas.addEventListener("click", async () => {
      if (!document.pointerLockElement) {
        await canvas.requestPointerLock({
          unadjustedMovement: true,
        });
      }
    });
    
Note: The above snippet works in browsers that don't support the promise version of `requestPointerLock()`. See Handling promise and non-promise versions of requestPointerLock() for an explanation.
Now for the dedicated pointer lock event listener: `pointerlockchange`. When this occurs, we run a function called `lockChangeAlert()` to handle the change.
    
    document.addEventListener("pointerlockchange", lockChangeAlert, false);
    
This function checks the `pointerLockElement` property to see if it is our canvas. If so, it attached an event listener to handle the mouse movements with the `updatePosition()` function. If not, it removes the event listener again.
    
    function lockChangeAlert() {
      if (document.pointerLockElement === canvas) {
        console.log("The pointer lock status is now locked");
        document.addEventListener("mousemove", updatePosition, false);
      } else {
        console.log("The pointer lock status is now unlocked");
        document.removeEventListener("mousemove", updatePosition, false);
      }
    }
    
The `updatePosition()` function updates the position of the ball on the canvas (`x` and `y`), and also includes `if ()` statements to check whether the ball has gone off the edges of the canvas. If so, it makes the ball wrap around to the opposite edge. It also includes a check whether a `requestAnimationFrame()` call has previously been made, and if so, calls it again as required, and calls the `canvasDraw()` function that updates the canvas scene. A tracker is also set up to write out the X and Y values to the screen, for reference.
    
    const tracker = document.getElementById("tracker");
    
    let animation;
    function updatePosition(e) {
      x += e.movementX;
      y += e.movementY;
      if (x > canvas.width + RADIUS) {
        x = -RADIUS;
      }
      if (y > canvas.height + RADIUS) {
        y = -RADIUS;
      }
      if (x < -RADIUS) {
        x = canvas.width + RADIUS;
      }
      if (y < -RADIUS) {
        y = canvas.height + RADIUS;
      }
      tracker.textContent = `X position: ${x}, Y position: ${y}`;
    
      animation ??= requestAnimationFrame(() => {
        animation = null;
        canvasDraw();
      });
    }
    
The `canvasDraw()` function draws the ball in the current `x` and `y` positions:
    
    function canvasDraw() {
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "red";
      ctx.beginPath();
      ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
      ctx.fill();
    }
    
## IFrame limitations
Pointer lock can only lock one `<iframe>` at a time. If you lock one `<iframe>`, you can't lock another one and transfer the target to it; pointer lock will error out. To avoid this limitation, first unlock the locked `<iframe>`, and then lock the other.
While `<iframe>` work by default, "sandboxed" `<iframe>`s block Pointer lock. To avoid this limitation, use `<iframe sandbox="allow-pointer-lock">`.
>
### api.Document.exitPointerLock
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Pointer_Lock_API` 3722 13 5014–50 2415 10.1 No 5014–50 No No No No No  
### api.Element.requestPointerLock
Desktop Mobile  
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS  
`Pointer_Lock_API` 37From version 92, returns a promise instead of `undefined`. The behavior reflects a specification change.22–38 13From version 92, returns a promise instead of `undefined`. The behavior reflects a specification change. 5014–50 24From version 78, returns a promise instead of `undefined`. The behavior reflects a specification change.15–25 10.1From version 18.4, returns a promise instead of `undefined`. The behavior reflects a specification change. No 5014–50 No No 3.0From version 16, returns a promise instead of `undefined`. The behavior reflects a specification change.1.5–3.0 No No  
`options_unadjustedMovement_parameter` 88Supported on macOS Catalina 10.15.1+, Windows, and ChromeOS. Not yet supported on Linux. 88Supported on macOS Catalina 10.15.1+, Windows, and ChromeOS. Not yet supported on Linux. No 74Supported on macOS Catalina 10.15.1+, Windows, and ChromeOS. Not yet supported on Linux. 18.4 No No No No No No No  
  * `MouseEvent`
  * `Element.requestPointerLock()`


# ResizeObserverEntry
The `ResizeObserverEntry` interface represents the object passed to the `ResizeObserver()` constructor's callback function, which allows you to access the new dimensions of the `Element` or `SVGElement` being observed.
## Instance properties
`ResizeObserverEntry.borderBoxSize` Read only
    
An array of objects containing the new border box size of the observed element when the callback is run.
`ResizeObserverEntry.contentBoxSize` Read only
    
An array of objects containing the new content box size of the observed element when the callback is run.
`ResizeObserverEntry.devicePixelContentBoxSize` Read only
    
An array of objects containing the new content box size in device pixels of the observed element when the callback is run.
`ResizeObserverEntry.contentRect` Read only
    
A `DOMRectReadOnly` object containing the new size of the observed element when the callback is run. Note that this is now a legacy property that is retained in the spec for backward-compatibility reasons only.
`ResizeObserverEntry.target` Read only
    
A reference to the `Element` or `SVGElement` being observed.
Note: The content box is the box in which content can be placed, meaning the border box minus the padding and border width. The border box encompasses the content, padding, and border. See The box model for further explanation.
## Instance methods
None.
## Examples
The following snippet is taken from the resize-observer-text.html (see source) example.
Note that the code covers three different compatibility cases:
  * Some old browsers may support `contentRect` but not `contentBoxSize`.
  * Old versions of Firefox support `contentBoxSize`, but incorrectly implemented it as a single object rather than an array.
  * Modern browsers support `contentBoxSize` as an array of objects, to enable them to report box sizes for fragmented elements (for example, in a multi-column scenario).


    
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        if (entry.contentBoxSize) {
          // The standard makes contentBoxSize an array...
          if (entry.contentBoxSize[0]) {
            h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize[0].inlineSize / 200)}rem`;
            pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize[0].inlineSize / 600)}rem`;
          } else {
            // … but old versions of Firefox treat it as a single item
            h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize.inlineSize / 200)}rem`;
            pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize.inlineSize / 600)}rem`;
          }
        } else {
          h1Elem.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 200)}rem`;
          pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
        }
      }
      console.log("Size changed");
    });
    
    resizeObserver.observe(divElem);
    
# PresentationReceiver
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `PresentationReceiver` interface of the Presentation API provides a means for a receiving browsing context to access controlling browsing contexts and communicate with them.
## Instance properties
`PresentationReceiver.connectionList` Read only Experimental
    
Returns a `Promise` that resolves with a `PresentationConnectionList` object containing a list of incoming presentation connections.
# RTCTrackEvent
The WebRTC API interface `RTCTrackEvent` represents the `track` event, which is sent when a new `MediaStreamTrack` is added to an `RTCRtpReceiver` which is part of the `RTCPeerConnection`.
The target is the `RTCPeerConnection` object to which the track is being added.
This event is sent by the WebRTC layer to the website or application, so you will not typically need to instantiate an `RTCTrackEvent` yourself.
Event  RTCTrackEvent 
## Constructor
`RTCTrackEvent()`
    
Creates and returns a new `RTCTrackEvent` object. You will probably not need to create new track events yourself, since they're typically created by the WebRTC infrastructure and sent to the connection's `ontrack` event handler.
## Instance properties
Since `RTCTrackEvent` is based on `Event`, its properties are also available.
`receiver` Read only
    
The `RTCRtpReceiver` used by the track that's been added to the `RTCPeerConnection`.
`streams` Read only Optional
    
An array of `MediaStream` objects, each representing one of the media streams to which the added `track` belongs. By default, the array is empty, indicating a streamless track.
`track` Read only
    
The `MediaStreamTrack` which has been added to the connection.
`transceiver` Read only
    
The `RTCRtpTransceiver` being used by the new track.
## Track event types
There is only one type of track event.
### `track`
The `track` event is sent to the `RTCPeerConnection` when a new track has been added to the connection. By the time the `track` event is delivered to the `RTCPeerConnection`'s `ontrack` handler, the new media has completed its negotiation for a specific `RTCRtpReceiver` (which is specified by the event's `receiver` property).
In addition, the `MediaStreamTrack` specified by the receiver's `track` is the same one specified by the event's `track`, and the track has been added to any associated remote `MediaStream` objects.
You can add a `track` event listener to be notified when the new track is available so that you can, for example, attach its media to a `<video>` element, using either `RTCPeerConnection.addEventListener()` or the `ontrack` event handler property.
Note: It may be helpful to keep in mind that you receive the `track` event when a new inbound track has been added to your connection, and you call `addTrack()` to add a track to the far end of the connection, thereby triggering a `track` event on the remote peer.
## Example
This simple example creates an event listener for the `track` event which sets the `srcObject` of the `<video>` element with the ID `video-box` to the first stream in the list passed in the event's `streams` array.
    
    peerConnection.addEventListener(
      "track",
      (e) => {
        let videoElement = document.getElementById("video-box");
        videoElement.srcObject = e.streams[0];
      },
      false,
    );
    
# HTMLStyleElement
The `HTMLStyleElement` interface represents a `<style>` element. It inherits properties and methods from its parent, `HTMLElement`.
This interface doesn't allow to manipulate the CSS it contains (in most case). To manipulate CSS, see Using dynamic styling information for an overview of the objects used to manipulate specified CSS properties using the DOM.
EventTarget  Node  Element  HTMLElement  HTMLStyleElement 
## Instance properties
Inherits properties from its parent, `HTMLElement`.
`HTMLStyleElement.blocking`
    
A string indicating that certain operations should be blocked on the fetching of critical subresources. It reflects the `blocking` attribute of the `<style>` element.
`HTMLStyleElement.media`
    
A string reflecting the HTML attribute representing the intended destination medium for style information.
`HTMLStyleElement.type` Deprecated
    
A string reflecting the HTML attribute representing the type of style being applied by this statement.
`HTMLStyleElement.disabled`
    
A boolean value indicating whether or not the associated stylesheet is disabled.
`HTMLStyleElement.sheet` Read only
    
Returns the `CSSStyleSheet` object associated with the given element, or `null` if there is none.
## Instance methods
No specific method; inherits methods from its parent, `HTMLElement`.
  * The HTML element implementing this interface: `<style>`.
  * Using dynamic styling information to see how to manipulate CSS.


# FormDataEvent
The `FormDataEvent` interface represents a `formdata` event — such an event is fired on an `HTMLFormElement` object after the entry list representing the form's data is constructed. This happens when the form is submitted, but can also be triggered by the invocation of a `FormData()` constructor.
This allows a `FormData` object to be quickly obtained in response to a `formdata` event firing, rather than needing to put it together yourself when you wish to submit form data via a method like `fetch()` (see Using FormData objects).
Event  FormDataEvent 
## Constructor
`FormDataEvent()`
    
Creates a new `FormDataEvent` object instance.
## Instance properties
Inherits properties from its parent interface, `Event`.
`FormDataEvent.formData`
    
Contains the `FormData` object representing the data contained in the form when the event was fired.
## Instance methods
Inherits methods from its parent interface, `Event`.
## Examples
    
    // grab reference to form
    
    const formElem = document.querySelector("form");
    
    // submit handler
    
    formElem.addEventListener("submit", (e) => {
      // on form submission, prevent default
      e.preventDefault();
    
      console.log(form.querySelector('input[name="field1"]')); // FOO
      console.log(form.querySelector('input[name="field2"]')); // BAR
    
      // construct a FormData object, which fires the formdata event
      const formData = new FormData(formElem);
      // formdata gets modified by the formdata event
      console.log(formData.get("field1")); // foo
      console.log(formData.get("field2")); // bar
    });
    
    // formdata handler to retrieve data
    
    formElem.addEventListener("formdata", (e) => {
      console.log("formdata fired");
    
      // modifies the form data
      const formData = e.formData;
      formData.set("field1", formData.get("field1").toLowerCase());
      formData.set("field2", formData.get("field2").toLowerCase());
    });
    
  * `fetch()`
  * `FormData`
  * Using FormData objects
  * `<Form>`


# DataTransferItemList
The `DataTransferItemList` object is a list of `DataTransferItem` objects representing items being dragged. During a drag operation, each `DragEvent` has a `dataTransfer` property and that property is a `DataTransferItemList`.
The individual items can be accessed using the bracket notation `[]`.
`DataTransferItemList` was primarily designed for the HTML Drag and Drop API, and is still specified in the HTML drag-and-drop section, but it is now also used by other APIs, such as `ClipboardEvent.clipboardData` and `InputEvent.dataTransfer`. Documentation of `DataTransferItemList` will primarily discuss its usage in drag-and-drop operations, and you should refer to the other APIs' documentation for usage of `DataTransferItemList` in those contexts.
This interface has no constructor.
## Instance properties
`DataTransferItemList.length` Read only
    
An `unsigned long` that is the number of drag items in the list.
## Instance methods
`DataTransferItemList.add()`
    
Adds an item (either a `File` object or a string) to the drag item list and returns a `DataTransferItem` object for the new item.
`DataTransferItemList.remove()`
    
Removes the drag item from the list at the given index.
`DataTransferItemList.clear()`
    
Removes all of the drag items from the list.
## Example
This example shows how to use drag and drop.
### HTML
    
    <div>
      <p id="source" draggable="true">
        Select this element, drag it to the Drop Zone and then release the selection
        to move the element.
      </p>
    </div>
    <div id="target">Drop Zone</div>
    
### CSS
    
    div {
      margin: 0em;
      padding: 2em;
    }
    
    #source {
      color: blue;
      border: 1px solid black;
    }
    
    #target {
      border: 1px solid black;
    }
    
### JavaScript
    
    const source = document.getElementById("source");
    const target = document.getElementById("target");
    
    source.addEventListener("dragstart", (ev) => {
      console.log("dragStart");
    
      // Add this element's id to the drag payload so the drop handler will
      // know which element to add to its tree
      const dataList = ev.dataTransfer.items;
      dataList.add(ev.target.id, "text/plain");
    
      // Add some other items to the drag payload
      dataList.add("<p>Paragraph…</p>", "text/html");
      dataList.add("http://www.example.org", "text/uri-list");
    });
    
    source.addEventListener("dragend", (ev) => {
      console.log("dragEnd");
      const dataList = ev.dataTransfer.items;
    
      // Clear any remaining drag data
      dataList.clear();
    });
    
    target.addEventListener("drop", (ev) => {
      console.log("Drop");
      ev.preventDefault();
    
      // Loop through the dropped items and log their data
      for (const item of ev.dataTransfer.items) {
        if (item.kind === "string" && item.type.match(/^text\/plain/)) {
          // This item is the target node
          item.getAsString((s) => {
            ev.target.appendChild(document.getElementById(s));
          });
        } else if (item.kind === "string" && item.type.match(/^text\/html/)) {
          // Drag data item is HTML
          item.getAsString((s) => {
            console.log(`… Drop: HTML = ${s}`);
          });
        } else if (item.kind === "string" && item.type.match(/^text\/uri-list/)) {
          // Drag data item is URI
          item.getAsString((s) => {
            console.log(`… Drop: URI = ${s}`);
          });
        }
      }
    });
    
    target.addEventListener("dragover", (ev) => {
      console.log("dragOver");
      ev.preventDefault();
    
      // Set the dropEffect to move
      ev.dataTransfer.dropEffect = "move";
    });
    
### Result
# GPUBindGroup
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The `GPUBindGroup` interface of the WebGPU API is based on a `GPUBindGroupLayout` and defines a set of resources to be bound together in a group and how those resources are used in shader stages.
A `GPUBindGroup` object instance is created using the `GPUDevice.createBindGroup()` method.
## Instance properties
`label`
    
A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.
## Examples
Note: The WebGPU samples feature many more examples.
### Basic example
Our basic compute demo shows an example of creating a bind group layout and then using that as a template when creating a bind group.
    
    // …
    
    const bindGroupLayout = device.createBindGroupLayout({
      entries: [
        {
          binding: 0,
          visibility: GPUShaderStage.COMPUTE,
          buffer: {
            type: "storage",
          },
        },
      ],
    });
    
    const bindGroup = device.createBindGroup({
      layout: bindGroupLayout,
      entries: [
        {
          binding: 0,
          resource: {
            buffer: output,
          },
        },
      ],
    });
    
    // …
    
  * The WebGPU API


# NavigationDestination
The `NavigationDestination` interface of the Navigation API represents the destination being navigated to in the current navigation.
It is accessed via the `NavigateEvent.destination` property.
## Instance properties
`id` Read only Experimental
    
Returns the `id` value of the destination `NavigationHistoryEntry` if the `NavigateEvent.navigationType` is `traverse`, or an empty string otherwise.
`index` Read only Experimental
    
Returns the `index` value of the destination `NavigationHistoryEntry` if the `NavigateEvent.navigationType` is `traverse`, or `-1` otherwise.
`key` Read only Experimental
    
Returns the `key` value of the destination `NavigationHistoryEntry` if the `NavigateEvent.navigationType` is `traverse`, or an empty string otherwise.
`sameDocument` Read only Experimental
    
Returns `true` if the navigation is to the same `document` as the current `Document` value, or `false` otherwise.
`url` Read only Experimental
    
Returns the URL being navigated to.
## Instance methods
`getState()` Experimental
    
Returns a clone of the available state associated with the destination `NavigationHistoryEntry`, or navigation operation (e.g., `navigate()`) as appropriate.
## Examples
    
    navigation.addEventListener("navigate", (event) => {
      // Exit early if this navigation shouldn't be intercepted,
      // e.g. if the navigation is cross-origin, or a download request
      if (shouldNotIntercept(event)) {
        return;
      }
    
      // Returns a URL() object constructed from the
      // NavigationDestination.url value
      const url = new URL(event.destination.url);
    
      if (url.pathname.startsWith("/articles/")) {
        event.intercept({
          async handler() {
            // The URL has already changed, so show a placeholder while
            // fetching the new content, such as a spinner or loading page
            renderArticlePagePlaceholder();
    
            // Fetch the new content and display when ready
            const articleContent = await getArticleContent(url.pathname);
            renderArticlePage(articleContent);
          },
        });
      }
    });
    
  * Modern client-side routing: the Navigation API
  * Navigation API explainer
  * Navigation API live demo (view demo source)


# EXT_shader_texture_lod extension
The `EXT_shader_texture_lod` extension is part of the WebGL API and adds additional texture functions to the OpenGL ES Shading Language which provide the shader writer with explicit control of LOD (Level of detail).
WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.
Note: This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default. It requires GLSL `#version 300 es`.
## GLSL built-in functions
The following new functions can be used in GLSL shader code, if this extension is enabled:
    
    vec4 texture2DLodEXT(sampler2D sampler, vec2 coord, float lod)
    vec4 texture2DProjLodEXT(sampler2D sampler, vec3 coord, float lod)
    vec4 texture2DProjLodEXT(sampler2D sampler, vec4 coord, float lod)
    vec4 textureCubeLodEXT(samplerCube sampler, vec3 coord, float lod)
    vec4 texture2DGradEXT(sampler2D sampler, vec2 P, vec2 dPdx, vec2 dPdy)
    vec4 texture2DProjGradEXT(sampler2D sampler, vec3 P, vec2 dPdx, vec2 dPdy)
    vec4 texture2DProjGradEXT(sampler2D sampler, vec4 P, vec2 dPdx, vec2 dPdy)
    vec4 textureCubeGradEXT(samplerCube sampler, vec3 P, vec3 dPdx, vec3 dPdy)
    
## Examples
Enabling the extensions:
    
    gl.getExtension("EXT_shader_texture_lod");
    
Shader code that avoids artifacts when wrapping texture coordinates:
    
    <script type="x-shader/x-fragment">
      #extension GL_EXT_shader_texture_lod : enable
      #extension GL_OES_standard_derivatives : enable
    
      uniform sampler2D myTexture;
      varying vec2 texCoord;
    
      void main(){
        gl_FragColor = texture2DGradEXT(myTexture, mod(texCoord, vec2(0.1, 0.5)),
                                        dFdx(texCoord), dFdy(texCoord));
      }
    </script>
    
  * `WebGLRenderingContext.getExtension()`
  * `OES_standard_derivatives`


# CSSMathValue
The `CSSMathValue` interface of the CSS Typed Object Model API a base class for classes representing complex numeric values.
CSSStyleValue  CSSNumericValue  CSSMathValue 
## Interfaces based on CSSMathValue
Below is a list of interfaces based on the CSSMathValue interface.
  * `CSSMathInvert`
  * `CSSMathMax`
  * `CSSMathMin`
  * `CSSMathNegate`
  * `CSSMathProduct`
  * `CSSMathSum`


## Instance properties
`CSSMathValue.operator`
    
Indicates the operator that the current subtype represents.
## Static methods
The interface may also inherit methods from its parent interface, `CSSNumericValue`.
## Instance methods
The interface may also inherit methods from its parent interface, `CSSNumericValue`.
## Examples
We create an element with a `width` determined using a `calc()` function, then `console.log()` the `operator`.
    
    <div>has width</div>
    
We assign a `width` with a calculation
    
    div {
      width: calc(30% - 20px);
    }
    
We add the JavaScript
    
    const styleMap = document.querySelector("div").computedStyleMap();
    
    console.log(styleMap.get("width")); // CSSMathSum {values: CSSNumericArray, operator: "sum"}
    console.log(styleMap.get("width").operator); // 'sum'
    console.log(styleMap.get("width").values[1].value); // -20
    
The `CSSMathValue.operator` returns `"sum"` because `styleMap.get("width").values[1].value );` is `-20`: adding a negative number.
# TextEncoder
Note: This feature is available in Web Workers.
The `TextEncoder` interface enables you to encode a JavaScript string using UTF-8.
## Constructor
`TextEncoder()`
    
Creates and returns a new `TextEncoder`.
## Instance properties
The `TextEncoder` interface doesn't inherit any properties.
`TextEncoder.encoding` Read only
    
Always returns `utf-8`.
## Instance methods
The `TextEncoder` interface doesn't inherit any methods.
`TextEncoder.encode()`
    
Takes a string as input, and returns a `Uint8Array` containing the string encoded using UTF-8.
`TextEncoder.encodeInto()`
    
Takes a string to encode and a destination `Uint8Array` to put the resulting UTF-8 encoded text into, and returns an object indicating the progress of the encoding. This is potentially more performant than the older `encode()` method.
## Examples
>
### Encoding to UTF-8
This example shows how to encode the "€" character to UTF-8.
    
    <button id="encode">Encode</button>
    <button id="reset">Reset</button>
    <div id="output"></div>
    
    
    const utf8encoder = new TextEncoder();
    const text = "€";
    
    const output = document.querySelector("#output");
    const encodeButton = document.querySelector("#encode");
    encodeButton.addEventListener("click", () => {
      output.textContent = utf8encoder.encode(text);
    });
    
    const resetButton = document.querySelector("#reset");
    resetButton.addEventListener("click", () => {
      window.location.reload();
    });
    
  * The `TextDecoder` interface describing the inverse operation.


# CSSLayerBlockRule
The `CSSLayerBlockRule` represents a `@layer` block rule.
CSSRule  CSSGroupingRule  CSSLayerBlockRule 
## Instance properties
Inherits properties from its ancestors `CSSGroupingRule` and `CSSRule`.
`CSSLayerBlockRule.name` Read only
    
A string containing the name of the associated cascade layer.
## Instance methods
Inherits methods from its ancestors `CSSGroupingRule` and `CSSRule`.
## Examples
>
### HTML
    
    <p>I am displayed in <code>color: rebeccapurple</code>.</p>
    
### CSS
    
    @layer special {
      p {
        color: rebeccapurple;
      }
    }
    
### JavaScript
    
    const item = document.getElementsByTagName("p")[0];
    const rules = document.styleSheets[1].cssRules;
    // Note that stylesheet #1 is the stylesheet associated with this embedded example,
    // while stylesheet #0 is the stylesheet associated with the whole MDN page
    
    const layer = rules[0]; // A CSSLayerBlockRule
    
    item.textContent = `The CSSLayerBlockRule is for the "${layer.name}" layer`;
    
### Result
  * `@layer`
  * `CSSLayerStatementRule`
  * Learn CSS cascade layers


# PaymentRequest
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The Payment Request API's `PaymentRequest` interface is the primary access point into the API, and lets web content and apps accept payments from the end user on behalf of the operator of the site or the publisher of the app.
EventTarget  PaymentRequest 
## Constructor
`PaymentRequest()`
    
Creates a new `PaymentRequest` object.
## Instance properties
`PaymentRequest.id` Read only
    
A unique identifier for a particular `PaymentRequest`, which can be set via `details.id`. When none is set, it defaults to a UUID.
`PaymentRequest.shippingAddress` Read only Deprecated Non-standard
    
If requested via payment options, returns the shipping address chosen by the user for the purposes of calculating shipping. This property is only populated if the constructor is called with the `requestShipping` flag set to true. Additionally, in some browsers, the parts of the address will be redacted for privacy until the user indicates they are ready to complete the transaction (i.e., they hit "Pay").
`PaymentRequest.shippingOption` Read only Deprecated Non-standard
    
Returns the identifier of the selected shipping option. This property is only populated if the constructor is called with the `requestShipping` flag set to true.
`PaymentRequest.shippingType` Read only Deprecated Non-standard
    
Returns the type of shipping used to fulfill the transaction. This will be one of `shipping`, `delivery`, `pickup`, or `null` if a value was not provided in the constructor.
## Static methods
`PaymentRequest.securePaymentConfirmationAvailability()` Experimental
    
Indicates whether the Secure payment confirmation feature is available.
## Instance methods
`PaymentRequest.canMakePayment()`
    
Indicates whether the `PaymentRequest` object can make a payment before calling `show()`.
`PaymentRequest.show()`
    
Causes the user agent to begin the user interaction for the payment request.
`PaymentRequest.abort()`
    
Causes the user agent to end the payment request and to remove any user interface that might be shown.
## Events
`merchantvalidation` Deprecated
    
With some payment handlers (e.g., Apple Pay), this event handler is called to handle the `merchantvalidation` event, which is dispatched when the user agent requires that the merchant validate that the merchant or vendor requesting payment is legitimate.
`paymentmethodchange`
    
With some payment handlers (e.g., Apple Pay), dispatched whenever the user changes payment instrument, like switching from a credit card to a debit card.
`shippingaddresschange` Deprecated Non-standard
    
Dispatched whenever the user changes their shipping address.
`shippingoptionchange` Deprecated Non-standard
    
Dispatched whenever the user changes a shipping option.
# Navigation
The `Navigation` interface of the Navigation API allows control over all navigation actions for the current `window` in one central place, including initiating navigations programmatically, examining navigation history entries, and managing navigations as they happen.
It is accessed via the `Window.navigation` property.
The Navigation API only exposes history entries created in the current browsing context that have the same origin as the current page (e.g., not navigations inside embedded `<iframe>`s, or cross-origin navigations), providing an accurate list of all previous history entries just for your app. This makes traversing the history a much less fragile proposition than with the older History API.
EventTarget  Navigation 
## Instance properties
Inherits properties from its parent, `EventTarget`.
`activation` Read only Experimental
    
Returns a `NavigationActivation` object containing information about the most recent cross-document navigation, which "activated" this Document.
`canGoBack` Read only Experimental
    
Returns `true` if it is possible to navigate backwards in the navigation history (i.e., the `currentEntry` is not the first one in the history entry list), and `false` if it is not.
`canGoForward` Read only Experimental
    
Returns `true` if it is possible to navigate forwards in the navigation history (i.e., the `currentEntry` is not the last one in the history entry list), and `false` if it is not.
`currentEntry` Read only Experimental
    
Returns a `NavigationHistoryEntry` object representing the location the user is currently navigated to right now.
`transition` Read only Experimental
    
Returns a `NavigationTransition` object representing the status of an in-progress navigation, which can be used to track it. Returns `null` if no navigation is currently in progress.
## Instance methods
Inherits methods from its parent, `EventTarget`.
`back()` Experimental
    
Navigates backwards by one entry in the navigation history.
`entries()` Experimental
    
Returns an array of `NavigationHistoryEntry` objects representing all existing history entries.
`forward()` Experimental
    
Navigates forwards by one entry in the navigation history.
`navigate()` Experimental
    
Navigates to a specific URL, updating any provided state in the history entries list.
`reload()` Experimental
    
Reloads the current URL, updating any provided state in the history entries list.
`traverseTo()` Experimental
    
Navigates to a specific `NavigationHistoryEntry` identified by `key`.
`updateCurrentEntry()` Experimental
    
Updates the state of the `currentEntry`; used in cases where the state change will be independent from a navigation or reload.
## Events
Inherits events from its parent, `EventTarget`.
`currententrychange` Experimental
    
Fired when the `Navigation.currentEntry` has changed.
`navigate` Experimental
    
Fired when any type of navigation is initiated, allowing you to intercept as required.
`navigateerror` Experimental
    
Fired when a navigation fails.
`navigatesuccess` Experimental
    
Fired when a successful navigation has finished.
## Examples
>
### Moving forwards and backwards in the history
    
    async function backHandler() {
      if (navigation.canGoBack) {
        await navigation.back().finished;
        // Handle any required clean-up after
        // navigation has finished
      } else {
        displayBanner("You are on the first page");
      }
    }
    
    async function forwardHandler() {
      if (navigation.canGoForward) {
        await navigation.forward().finished;
        // Handle any required clean-up after
        // navigation has finished
      } else {
        displayBanner("You are on the last page");
      }
    }
    
### Traversing to a specific history entry
    
    // On JS startup, get the key of the first loaded page
    // so the user can always go back there.
    const { key } = navigation.currentEntry;
    backToHomeButton.onclick = () => navigation.traverseTo(key);
    
    // Navigate away, but the button will always work.
    await navigation.navigate("/another_url").finished;
    
### Navigating and updating state
    
    navigation.navigate(url, { state: newState });
    
Or
    
    navigation.reload({ state: newState });
    
Or if the state is independent from a navigation or reload:
    
    navigation.updateCurrentEntry({ state: newState });
    
  * Modern client-side routing: the Navigation API
  * Navigation API explainer
  * Navigation API live demo (view demo source)


# LargestContentfulPaint
The `LargestContentfulPaint` interface provides timing information about the largest image or text paint before user input on a web page.
## Description
The key moment this API provides is the Largest Contentful Paint (LCP) metric. It provides the render time of the largest image or text block visible within the viewport, recorded from when the page first begins to load. The following elements are considered when determining the LCP:
  * `<img>` elements.
  * `<image>` elements inside an SVG.
  * The poster images of `<video>` elements.
  * Elements with a `background-image`.
  * Groups of text nodes, such as `<p>`.


To measure render times of other elements, use the `PerformanceElementTiming` API.
Additional key paint moments are provided by the `PerformancePaintTiming` API:
  * First Paint (FP): Time when anything is rendered. Note that the marking of the first paint is optional, not all user agents report it.
  * First Contentful Paint (FCP): Time when the first bit of DOM text or image content is rendered.


`LargestContentfulPaint` inherits from `PerformanceEntry`.
PerformanceEntry  LargestContentfulPaint 
## Instance properties
This interface extends the following `PerformanceEntry` properties by qualifying and constraining the properties as follows:
`PerformanceEntry.entryType` Read only Experimental
    
Returns `"largest-contentful-paint"`.
`PerformanceEntry.name` Read only Experimental
    
Always returns an empty string.
`PerformanceEntry.startTime` Read only Experimental
    
Returns the value of this entry's `renderTime` if it is not `0`, otherwise the value of this entry's `loadTime`.
`PerformanceEntry.duration` Read only Experimental
    
Returns `0`, as `duration` is not applicable to this interface.
It also supports the following properties:
`LargestContentfulPaint.element` Read only
    
The element that is the current largest contentful paint.
`LargestContentfulPaint.renderTime` Read only
    
The time the element was rendered to the screen. May not be available if the element is a cross-origin image loaded without the `Timing-Allow-Origin` header.
`LargestContentfulPaint.loadTime` Read only
    
The time the element was loaded.
`LargestContentfulPaint.size` Read only
    
The intrinsic size of the element returned as the area (width * height).
`LargestContentfulPaint.id` Read only
    
The id of the element. This property returns an empty string when there is no id.
`LargestContentfulPaint.url` Read only
    
If the element is an image, the request url of the image.
## Instance methods
This interface also inherits methods from `PerformanceEntry`.
`LargestContentfulPaint.toJSON()`
    
Returns a JSON representation of the `LargestContentfulPaint` object.
## Examples
>
### Observing the largest contentful paint
In the following example, an observer is registered to get the largest contentful paint while the page is loading. The `buffered` flag is used to access data from before observer creation.
The LCP API analyzes all content it finds (including content that is removed from the DOM). When new largest content is found, it creates a new entry. It stops searching for larger content when scroll or input events occur, since these events likely introduce new content on the website. Thus the LCP is the last performance entry reported by the observer.
    
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
      console.log("LCP:", lastEntry.startTime);
      console.log(lastEntry);
    });
    observer.observe({ type: "largest-contentful-paint", buffered: true });
    
### Cross-origin image render time
For security reasons, the value of the `renderTime` property was originally `0` if the resource is a cross-origin request. Instead the `loadTime` property should be used as a fallback.
Browsers may now expose a slightly coarsened render time in these situations. Check for browser support.
To expose more accurate cross-origin render-time information, the `Timing-Allow-Origin` HTTP response header needs to be set.
For example, to allow `https://developer.mozilla.org` to see an accurate `renderTime`, the cross-origin resource should send:
    
    Timing-Allow-Origin: https://developer.mozilla.org
    
Like in the code example, you can use `startTime`, which returns the value of the entry's `renderTime` if it is not `0`, and otherwise the value of this entry's `loadTime`. However, it is recommended to set the `Timing-Allow-Origin` header so that the metrics will be more accurate.
If you use `startTime`, you can flag any inaccuracies by checking if `renderTime` was used:
    
    const isAccurateLCP = Boolean(entry.renderTime);
    
  * Largest Contentful Paint
  * First Contentful Paint
  * First Paint


# TextDecoderStream
Note: This feature is available in Web Workers.
The `TextDecoderStream` interface of the Encoding API converts a stream of text in a binary encoding, such as UTF-8 etc., to a stream of strings. It is the streaming equivalent of `TextDecoder`.
## Constructor
`TextDecoderStream()`
    
Creates a new `TextDecoderStream` object.
## Instance properties
`TextDecoderStream.encoding` Read only
    
An encoding.
`TextDecoderStream.fatal` Read only
    
A `boolean` indicating if the error mode is fatal.
`TextDecoderStream.ignoreBOM` Read only
    
A `boolean` indicating whether the byte order mark is ignored.
`TextDecoderStream.readable` Read only
    
Returns the `ReadableStream` instance controlled by this object.
`TextDecoderStream.writable` Read only
    
Returns the `WritableStream` instance controlled by this object.
## Examples
Examples of streaming structured data and HTML
  * `TextEncoderStream`
  * Streams API Concepts
  * Experimenting with the Streams API
  * Streaming requests with the fetch API, developer.chrome.com (2020)


# Request
Note: This feature is available in Web Workers.
The `Request` interface of the Fetch API represents a resource request.
You can create a new `Request` object using the `Request()` constructor, but you are more likely to encounter a `Request` object being returned as the result of another API operation, such as a service worker `FetchEvent.request`.
## Constructor
`Request()`
    
Creates a new `Request` object.
## Instance properties
`Request.body` Read only
    
A `ReadableStream` of the body contents.
`Request.bodyUsed` Read only
    
Stores `true` or `false` to indicate whether or not the body has been used in a request yet.
`Request.cache` Read only
    
Contains the cache mode of the request (e.g., `default`, `reload`, `no-cache`).
`Request.credentials` Read only
    
Contains a value controlling whether credentials should be included with the request (e.g., `omit`, `same-origin`, `include`). The default is `same-origin`.
`Request.destination` Read only
    
A string describing the type of content being requested.
`Request.headers` Read only
    
Contains the associated `Headers` object of the request.
`Request.integrity` Read only
    
Contains the subresource integrity value of the request (e.g., `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`).
`Request.isHistoryNavigation` Read only
    
A boolean indicating whether the request is a history navigation.
`Request.keepalive` Read only
    
Contains the request's `keepalive` setting (`true` or `false`), which indicates whether the browser will keep the associated request alive if the page that initiated it is unloaded before the request is complete.
`Request.method` Read only
    
Contains the request's method (`GET`, `POST`, etc.)
`Request.mode` Read only
    
Contains the mode of the request (e.g., `cors`, `no-cors`, `same-origin`, `navigate`.)
`Request.redirect` Read only
    
Contains the mode for how redirects are handled. It may be one of `follow`, `error`, or `manual`.
`Request.referrer` Read only
    
Contains the referrer of the request (e.g., `client`).
`Request.referrerPolicy` Read only
    
Contains the referrer policy of the request (e.g., `no-referrer`).
`Request.signal` Read only
    
Returns the `AbortSignal` associated with the request
`Request.url` Read only
    
Contains the URL of the request.
## Instance methods
`Request.arrayBuffer()`
    
Returns a promise that resolves with an `ArrayBuffer` representation of the request body.
`Request.blob()`
    
Returns a promise that resolves with a `Blob` representation of the request body.
`Request.bytes()`
    
Returns a promise that resolves with a `Uint8Array` representation of the request body.
`Request.clone()`
    
Creates a copy of the current `Request` object.
`Request.formData()`
    
Returns a promise that resolves with a `FormData` representation of the request body.
`Request.json()`
    
Returns a promise that resolves with the result of parsing the request body as `JSON`.
`Request.text()`
    
Returns a promise that resolves with a text representation of the request body.
Note: The request body functions can be run only once; subsequent calls will reject with TypeError showing that the body stream has already used.
## Examples
In the following snippet, we create a new request using the `Request()` constructor (for an image file in the same directory as the script), then return some property values of the request:
    
    const request = new Request("https://www.mozilla.org/favicon.ico");
    
    const url = request.url;
    const method = request.method;
    const credentials = request.credentials;
    
You could then fetch this request by passing the `Request` object in as a parameter to a `fetch()` call, for example:
    
    fetch(request)
      .then((response) => response.blob())
      .then((blob) => {
        image.src = URL.createObjectURL(blob);
      });
    
In the following snippet, we create a new request using the `Request()` constructor with some initial data and body content for an API request which needs a body payload:
    
    const request = new Request("https://example.com", {
      method: "POST",
      body: '{"foo": "bar"}',
    });
    
    const url = request.url;
    const method = request.method;
    const credentials = request.credentials;
    const bodyUsed = request.bodyUsed;
    
Note: The body can only be a `Blob`, an `ArrayBuffer`, a `TypedArray`, a `DataView`, a `FormData`, a `URLSearchParams`, a `ReadableStream`, or a `String` object, as well as a string literal, so for adding a JSON object to the payload you need to stringify that object.
You could then fetch this API request by passing the `Request` object in as a parameter to a `fetch()` call, for example and get the response:
    
    fetch(request)
      .then((response) => {
        if (response.status !== 200) {
          throw new Error("Something went wrong on API server!");
        }
        return response.json();
      })
      .then((response) => {
        console.debug(response);
        // …
      })
      .catch((error) => {
        console.error(error);
      });
    
  * ServiceWorker API
  * HTTP access control (CORS)
  * HTTP


# CSSMathSum
The `CSSMathSum` interface of the CSS Typed Object Model API represents the result obtained by calling `add()`, `sub()`, or `toSum()` on `CSSNumericValue`.
A CSSMathSum is the object type returned when the `StylePropertyMapReadOnly.get()` method is used on a CSS property whose value is created with a `calc()` function.
CSSStyleValue  CSSNumericValue  CSSMathValue  CSSMathSum 
## Constructor
`CSSMathSum()` Experimental
    
Creates a new `CSSMathSum` object.
## Instance properties
`CSSMathSum.values`
    
Returns a `CSSNumericArray` object which contains one or more `CSSNumericValue` objects.
## Static methods
The interface may also inherit methods from its parent interface, `CSSMathValue`.
## Instance methods
The interface may also inherit methods from its parent interface, `CSSMathValue`.
## Examples
We create an element with a `width` determined using a `calc()` function, then `console.log()` the `operator` and `values`, and dig into the values a bit.
    
    <div>has width</div>
    
We assign a `width`
    
    div {
      width: calc(30% - 20px);
    }
    
We add the JavaScript
    
    const styleMap = document.querySelector("div").computedStyleMap();
    
    console.log(styleMap.get("width")); // CSSMathSum {values: CSSNumericArray, operator: "sum"}
    console.log(styleMap.get("width").operator); // 'sum'
    console.log(styleMap.get("width").values); // CSSNumericArray {0: CSSUnitValue, 1: CSSUnitValue, length: 2}
    console.log(styleMap.get("width").values[0]); // CSSUnitValue {value: 30, unit: "percent"}
    console.log(styleMap.get("width").values[0].value); // 30
    console.log(styleMap.get("width").values[0].unit); // 'percent'
    console.log(styleMap.get("width").values[1]); // CSSUnitValue {value: -20, unit: "px"}
    console.log(styleMap.get("width").values[1].value); //  -20
    console.log(styleMap.get("width").values[1].unit); // 'px'
    
The specification is still evolving. In the future we may write the last three lines as:
    
    console.log(styleMap.get("width").values[1]); // CSSMathNegate {value: CSSUnitValue, operator: "negate"}
    console.log(styleMap.get("width").values[1].value); // CSSUnitValue {value: 20, unit: "px"}
    console.log(styleMap.get("width").values[1].value.unit); // 'px'
    
# WakeLockSentinel
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The `WakeLockSentinel` interface of the Screen Wake Lock API can be used to monitor the status of the platform screen wake lock, and manually release the lock when needed.
The screen wake lock prevents device screens from dimming or locking when an application needs to keep running.
A screen wake lock is requested using the `navigator.wakeLock.request()` method, which returns a `Promise` that fulfills with a `WakeLockSentinel` object if the lock is granted.
An acquired screen wake lock can be released manually via the `release()` method, or automatically via the platform screen wake lock. The latter may occur if the document becomes inactive or loses visibility, if the device is low on power, or if the user turns on a power save mode. A released `WakeLockSentinel` cannot be re-used: a new sentinel must be requested using `navigator.wakeLock.request()` if a new lock is needed. Releasing all `WakeLockSentinel` instances of a given wake lock type will cause the underlying platform wake lock to be released.
An event is fired at the `WakeLockSentinel` if the platform lock is released, allowing applications to configure their UI, and re-request the lock if needed.
EventTarget  WakeLockSentinel 
## Instance properties
Also inherits properties from its parent interface, `EventTarget`.
`released` Read only
    
Returns a boolean indicating whether the `WakeLockSentinel` has been released.
`type` Read only
    
Returns a string representation of the currently acquired `WakeLockSentinel` type. Return values are:
  * `screen`: A screen wake lock. Prevents devices from dimming or locking the screen.


## Instance methods
Also inherits methods from its parent interface, `EventTarget`.
`release()`
    
Releases the `WakeLockSentinel`, returning a `Promise` that is resolved once the sentinel has been successfully released.
## Events
`release`
    
Fired when the `release()` method is called or the wake lock is released by the user agent.
## Examples
In this example, we create an asynchronous function that requests a `WakeLockSentinel`. Once the screen wake lock is acquired we listen for the `release` event, which can be used to give appropriate UI feedback. The sentinel can be acquired or released via appropriate interactions.
    
    // create a reference for the wake lock
    let wakeLock = null;
    
    // create an async function to request a wake lock
    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request("screen");
    
        // listen for our release event
        wakeLock.addEventListener("release", () => {
          // if wake lock is released alter the UI accordingly
        });
      } catch (err) {
        // if wake lock request fails - usually system related, such as battery
      }
    };
    
    wakeLockOnButton.addEventListener("click", () => {
      requestWakeLock();
    });
    
    wakeLockOffButton.addEventListener("click", () => {
      if (wakeLock !== null) {
        wakeLock.release().then(() => {
          wakeLock = null;
        });
      }
    });
    
  * Stay awake with the Screen Wake Lock API


  *[ Experimental ]: Experimental. Expect behavior to change in the future.
  *[ Non-standard ]: Non-standard. Check cross-browser support before using.
  *[ Deprecated ]: Deprecated. Not for use in new websites.