recursal/MDN huggingface dataset:
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:


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


```js
gl.getExtension("EXT\_shader\_texture\_lod");
```


Shader code that avoids artifacts when wrapping texture coordinates:


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

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

| Specification |
| --- |
| WebGL EXT\_shader\_texture\_lod 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()`
* `OES_standard_derivatives`
BroadcastChannel
================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
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.

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

EventTarget

BroadcastChannelConstructor
-----------

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

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


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

| Specification |
| --- |
| HTML Standard # broadcasting-to-other-browsing-contexts |

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

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

See also
--------

* Another, more heavyweight, way of communicating between browser contexts: `ServiceWorker`.
* Broadcast Channel API overview
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

BlobEventConstructor
-----------

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

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

| Specification |
| --- |
| MediaStream Recording # blobevent-section |

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

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

See also
--------

* The `Event` base interface.
* MediaStream Recording API: Sends `BlobEvent` objects each time a chunk of media is ready.
* Using the MediaStream Recording API
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

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

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

| Specification |
| --- |
| HTML Standard # htmldlistelement |

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: `<dl>`
RelativeOrientationSensor
=========================

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

RelativeOrientationSensorConstructor
-----------

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


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


```js
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.");
  }
});
```

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

| Specification |
| --- |
| Orientation Sensor # relativeorientationsensor-interface |

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

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

RTCSctpTransportInstance 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

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcsctptransport-interface |

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

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

See also
--------

* WebRTC
* `RTCPeerConnection`
* `RTCPeerConnection.sctp`
SVGDescElement
==============

The **`SVGDescElement`** interface corresponds to the `<desc>` element.

EventTarget

Node

Element

SVGElement

SVGDescElementInstance properties
-------------------

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

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

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

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

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

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

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

See also
--------

* `<desc>`
USBIsochronousOutTransferResult
===============================

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

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

| Specification |
| --- |
| WebUSB API # usbisochronousouttransferresult |

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

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

The **`UIEvent`** interface represents simple user interface events.

`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

UIEventConstructors
------------

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

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

| Specification |
| --- |
| UI Events # idl-uievent |

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

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

See also
--------

* Introduction to events
* `Event`
GPUQuerySet
===========

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

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. Alternatively, you can run a single timestamp query at any time by invoking `GPUCommandEncoder.writeTimeStamp()` with an appropriate `GPUQuerySet` as a parameter.

**Note:** To use timestamp queries, the `timestamp-query` feature must be enabled in the `GPUDevice`.

A `GPUQuerySet` object instance is created using the `GPUDevice.createQuerySet()` method.

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

`count` 
Experimental
 Read only 

A number specifying the number of queries managed by the `GPUQuerySet`.

`label` 
Experimental

A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

`type` 
Experimental
 Read only 

An enumerated value specifying the type of queries managed by the `GPUQuerySet`.

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

`destroy()` 
Experimental

Destroys the `GPUQuerySet`.

Examples
--------

The following snippet creates a `GPUQuerySet` that holds 32 occlusion query results, and then returns the `type` and `count`:


```js
const querySet = device.createQuerySet({
  type: "occlusion",
  count: 32,
});

console.log(querySet.count); // 32
console.log(querySet.type); // "occlusion"
```

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

| Specification |
| --- |
| WebGPU # gpuqueryset |

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

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

See also
--------

* The WebGPU API
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.title`

Returns or sets the title of 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.album`

Returns or sets the name of the album or collection containing the media to be played.

`MediaMetadata.artwork`

Returns or sets an array of images associated with playing media.

Examples
--------

The following example checks for browser compatibility and sets the current metadata for the media session.


```js
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",
      },
    ],
  });
}
```

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

| Specification |
| --- |
| Media Session # the-mediametadata-interface |

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

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


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


```css
p {
  --someVariable: 1.6em;
  --someOtherVariable: translateX(33vw);
  --anotherVariable: 42;
  line-height: var(--someVariable);
}
```


We add JavaScript to grab our paragraph and return back a definition list of all the default CSS property values using `Element.computedStyleMap()`.


```js
// 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);
}
```

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

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

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

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

The **`HTMLFormControlsCollection`** interface represents a *collection* of HTML *form control elements*, returned by the `HTMLFormElement` interface's `elements` property.

This interface replaces one method from `HTMLCollection`, on which it is based.

HTMLCollection

HTMLFormControlsCollectionInstance 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")`.

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

| Specification |
| --- |
| HTML Standard # htmlformcontrolscollection |

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

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

See also
--------

* `HTMLCollection`, `RadioNodeList`, `HTMLOptionsCollection`