recursal/MDN huggingface dataset:
LaunchParams
============

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

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


```js
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.substr(1);
        audio.play();
      }
    }
  });
}
```

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

| Specification |
| --- |
| Web App Launch Handler API # launchparams-interface |

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

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

See also
--------

* Launch Handler API: Control how your app is launched
* `Window.launchQueue`
* Musicr 2.0 demo app
SVGFontFaceFormatElement
========================

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

The **`SVGFontFaceFormatElement`** interface corresponds to the `<font-face-format>` elements.

Object-oriented access to the attributes of the `<font-face-format>` element via the SVG DOM is not possible.

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

*This interface has no properties but inherits properties from its parent, `SVGElement`.*

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

*This interface has no methods but inherits methods from its parent, `SVGElement`.*

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # InterfaceSVGFontFaceFormatElement |

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

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

See also
--------

* `<font-face-format>`
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.

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  
Non-standard

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


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

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

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

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

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

See also
--------

* Using the Gamepad API
* Gamepad API
XRJointPose
===========

The **`XRJointPose`** interface is an `XRPose` with additional information about the size of the skeleton joint it represents.

XRPose

XRJointPoseInstance properties
-------------------

`XRJointPose.radius` Read only 

The radius (distance from skin) for a joint.

Examples
--------

### Using `XRJointPose` objects

Call `XRFrame.getJointPose()` with an `XRJointSpace` and an `XRReferenceSpace` to get an `XRJointPose` object.


```js
navigator.xr
  .requestSession({ optionalFeatures: ["hand-tracking"] })
  .then(/\* … \*/);

function renderFrame(session, frame) {
  // …

  for (const inputSource of session.inputSources) {
    if (inputSource.hand) {
      const indexFingerTipJoint = inputSource.hand.get("index-finger-tip");
      frame.getJointPose(indexFingerTipJoint, referenceSpace); // XRJointPose
    }
  }
}
```

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

| Specification |
| --- |
| WebXR Hand Input Module - Level 1 # xrjointpose-interface |

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

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

See also
--------

* `XRHand`
* `XRReferenceSpace`
* `XRJointSpace`
* `XRFrame.getJointPose()`
XRViewport
==========

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

The WebXR Device API's **`XRViewport`** interface provides properties used to describe the size and position of the current viewport within the `XRWebGLLayer` being used to render the 3D scene.

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

`height` Read only 

The height, in pixels, of the viewport.

`width` Read only 

The width, in pixels, of the viewport.

`x` Read only 

The offset from the origin of the destination graphics surface (typically a `XRWebGLLayer`) to the left edge of the viewport, in pixels.

`y` Read only 

The offset from the origin of the viewport to the bottom edge of the viewport; WebGL's coordinate system places (0, 0) at the bottom left corner of the surface.

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

Currently, the only type of surface available is the `XRWebGLLayer`. The precise orientation of the coordinate system may vary with other surface types, but in WebGL, the origin (0, 0) is located at the bottom-left corner of the surface. Thus the values specified in an `XRViewport` define a rectangle whose bottom-left corner is at (`x`, `y`) and which extends `width` pixels toward the left and `height` pixels upward.

These values may be passed directly into the `WebGLRenderingContext.viewport()` method:


```js
const xrViewport = xrWebGLLayer.getViewport(xrView);
gl.viewport(xrViewport.x, xrViewport.y, xrViewport.width, xrViewport.height);
```

Example
-------

This example sets up an animation frame callback using `requestAnimationFrame()`. After initial setup, it iterates over each of the views within the viewer's pose, configuring the viewport as dictated by the `XRWebGLLayer`.


```js
xrSession.requestAnimationFrame((time, xrFrame) => {
  const viewerPose = xrFrame.getViewerPose(xrReferenceSpace);

  gl.bindFramebuffer(xrWebGLLayer.framebuffer);

  for (const xrView of viewerPose.views) {
    const xrViewport = xrWebGLLayer.getViewport(xrView);
    gl.viewport(
      xrViewport.x,
      xrViewport.y,
      xrViewport.width,
      xrViewport.height,
    );

    // Now we can use WebGL to draw into a viewport matching
    // the viewer's needs
  }
});
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
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

RTCTrackEventConstructor
-----------

`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 `videobox` to the first stream in the list passed in the event's `streams` array.


```js
peerConnection.addEventListener(
  "track",
  (e) => {
    let videoElement = document.getElementById("videobox");
    videoElement.srcObject = e.streams[0];
  },
  false,
);
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtctrackevent |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
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.*

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

| Specification |
| --- |
| Intersection Observer # intersection-observer-entry |

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

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

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

The **`SharedStorageRunOperation`** interface of the Shared Storage API represents a Run output gate operation.

SharedStorageOperation

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


```js
// 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:


```js
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.

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

| Specification |
| --- |
| Shared Storage API # sharedstoragerunoperation |

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

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

See also
--------

* Shared Storage API
Sensor
======

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.

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

| Specification |
| --- |
| Generic Sensor API # the-sensor-interface |

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

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

The **`SVGPointList`** interface represents a list of `SVGPoint` 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`.


```html
<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>
```



```js
let example = document.getElementById("example");
console.log(example.points); //an SVGPointList
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
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

HTMLLIElementInstance 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`

A `long` 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`.*

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

| Specification |
| --- |
| HTML Standard # htmllielement |

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

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

See also
--------

* The HTML element implementing this interface: `<li>`
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.

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

| Specification |
| --- |
| WebGL WEBGL\_debug\_shaders Khronos Ratified Extension Specification  |

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

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

See also
--------

* `WebGLRenderingContext.getExtension()`