recursal/MDN huggingface dataset:
Credential Management API
=========================

The Credential Management API lets a website store and retrieve password, public key, and federated credentials. These capabilities allow users to sign in without typing passwords, see the federated account they used to sign in to a site, and resume a session without the explicit sign-in flow of an expired session.

Credential management concepts and usage
----------------------------------------

This API lets websites interact with a user agent's password system directly so that websites can deal in a uniform way with site credentials and user agents can provide better assistance with the management of their credentials. For example, user agents have a particularly hard time dealing with federated identity providers or esoteric sign-in mechanisms.

To address these problems, the Credential Management API provides ways for a website to store and retrieve different types of credentials. This gives users capabilities such as seeing the federated account they used to sign on to a site, or resuming a session without the explicit sign-in flow of an expired session.

**Note:** This API is restricted to top-level contexts. Calls to `get()` and `store()` within an `<iframe>` element will resolve without effect.

### Subdomain-shared credentials

Later versions of the spec allow credentials to be retrieved from a different subdomain. For example, a password stored in `login.example.com` may be used to log in to `www.example.com`. To take advantage of this, a password must be explicitly stored by calling `CredentialsContainer.store()`. This is sometimes referred to as public suffix list (PSL) matching; however the spec only *recommends* using PSL to determine the effective scope of a credential. It does not require it. Hence browsers may vary in their implementation.

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.

`PublicKeyCredential`

Provides a credential for logging in using a more secure system based on asymmetric cryptography instead of a password.

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

| Specification |
| --- |
| Credential Management Level 1 # the-credential-interface |

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

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

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

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

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

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

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

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

| Specification |
| --- |
| WebUSB API # usbouttransferresult |

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

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

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

`XRPose` is a WebXR API interface representing a position and orientation in the 3D space, relative to the `XRSpace` within which it resides. The `XRSpace`—which is either an `XRReferenceSpace` or an `XRBoundedReferenceSpace`—defines the coordinate system used for the pose and, in the case of an `XRViewerPose`, its underlying views.

To obtain the `XRPose` for the `XRSpace` used as the local coordinate system of an object, call `XRFrame.getPose()`, specifying that local `XRSpace` and the space to which you wish to convert:


```js
thePose = xrFrame.getPose(localSpace, baseSpace);
```


The pose for a viewer (or camera) is represented by the `XRViewerPose` subclass of `XRPose`. This is obtained using `XRFrame.getViewerPose()` instead of `getPose()`, specifying a reference space which has been adjusted to position and orient the node to provide the desired viewing position and angle:


```js
viewerPose = xrFrame.getViewerPose(adjReferenceSpace);
```


Here, `adjReferenceSpace` is a reference space which has been updated using the base frame of reference for the frame and any adjustments needed to position the viewer based on movement or rotation which is being supplied from a source other than the XR device, such as keyboard or mouse inputs.

See the article Movement, orientation, and motion for further details and an example with thorough explanations of what's going on.

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

`XRPose.angularVelocity` Read only 

A `DOMPointReadOnly` describing the angular velocity in radians per second relative to the base `XRSpace`.

`XRPose.emulatedPosition` Read only 

A Boolean value which is `false` if the position and orientation given by `transform` is obtained directly from a full six degree of freedom (6DoF) XR device (that is, a device which tracks not only the pitch, yaw, and roll of the head but also the forward, backward, and side-to-side motion of the viewer). If any component of the `transform` is computed or created artificially (such as by using mouse or keyboard controls to move through space), this value is instead `true`, indicating that the `transform` is in part emulated in software.

`XRPose.linearVelocity` Read only 

A `DOMPointReadOnly` describing the linear velocity in meters per second relative to the base `XRSpace`.

`XRPose.transform` Read only 

A `XRRigidTransform` which provides the position and orientation of the pose relative to the base `XRSpace`.

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

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

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

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

See also
--------

* WebXR Device API
* `XRFrame.getPose()`
* `XRViewerPose`
WGSLLanguageFeatures
====================

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

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 available WGSL language extensions can vary across implementations and physical devices and may also change over time; we have therefore not listed them here. For a complete list, refer to WGSL language extensions in the WGSL specification.

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

The following property is available to all read-only setlike objects:

`size` 
Experimental

Returns the number of values in the set.

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

The following methods are available to all read-only setlike objects:

`has()` 
Experimental

Returns a boolean asserting whether or not an element with the given value is present in the set.

`values()` 
Experimental

Returns a new iterator object that yields **values** for each element in the set in insertion order.

`keys()` 
Experimental

An alias for `values()`.

`entries()` 
Experimental

Returns a new iterator object that contains **an array of `[value, value]`** for each element in the set in insertion order.

`forEach()` 
Experimental

Calls the provided callback function once for each value present in the set in insertion order.

Examples
--------


```js
if (!navigator.gpu) {
  throw Error("WebGPU not supported.");
}

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);
}

// ...
```

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

| Specification |
| --- |
| WebGPU # gpuwgsllanguagefeatures |

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

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

See also
--------

* WebGPU API
InputDeviceCapabilities API
===========================

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

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


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

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

| Specification |
| --- |
| Input Device Capabilities # dom-inputdevicecapabilities |

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

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

The **`TextTrackCueList`** array-like object represents a dynamically updating list of `TextTrackCue` objects.

This interface has no constructor. Retrieve an instance of this object with `TextTrack.cues` which returns all of the cues in a `TextTrack` object.

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.


```js
const video = document.getElementById("video");
video.onplay = () => {
  console.log(video.textTracks[0].cues);
};
```

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

| Specification |
| --- |
| HTML Standard # texttrackcuelist |

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

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

The **`SVGFEPointLightElement`** interface corresponds to the `<fePointLight>` element.

EventTarget

Node

Element

SVGElement

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

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

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

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

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

See also
--------

* `<fePointLight>`
WebGLShader
===========

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

WebGLShaderDescription
-----------

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


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


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


```js
const fragmentShaderSource =
  "void main() {\n" + " gl\_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + "}\n";

//Use the createShader function from the example above
const fragmentShader = createShader(
  gl,
  fragmentShaderSource,
  gl.FRAGMENT\_SHADER,
);
```

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

| Specification |
| --- |
| WebGL Specification # 5.8 |

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

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

See also
--------

* `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()`
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

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

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

| Specification |
| --- |
| HTML Standard # htmloptgroupelement |

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: `<optgroup>`.
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

DeviceMotionEventConstructor
-----------

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


```js
window.addEventListener("devicemotion", (event) => {
  console.log(`${event.acceleration.x} m/s2`);
});
```

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

| Specification |
| --- |
| DeviceOrientation Event Specification # devicemotion |

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

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

See also
--------

* Detecting device orientation
* Orientation and motion data explained
* `DeviceOrientationEvent`
* `deviceorientation` event
* `deviceorientationabsolute` event
* `devicemotion` event
* `Accelerometer`
* `LinearAccelerationSensor`
ReportingObserver
=================

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:


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


```js
observer.observe();
```


Later on in the example we deliberately use the deprecated version of `MediaDevices.getUserMedia()`:


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

![image of a jolly bearded man with various stats displayed below it about a deprecated feature](/en-US/docs/Web/API/ReportingObserver/reporting_api_example.png)

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

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

| Specification |
| --- |
| Reporting API # interface-reporting-observer |

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

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

See also
--------

* Reporting API
SVGDefsElement
==============

The **`SVGDefsElement`** interface corresponds to the `<defs>` element.

EventTarget

Node

Element

SVGElement

SVGGraphicsElement

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

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

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

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

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