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


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

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

| Specification |
| --- |
| WebGL WEBGL\_compressed\_texture\_etc1 Extension Specification  |

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

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

See also
--------

* Ericsson Texture Compression – Wikipedia
* `WEBGL_compressed_texture_etc` (ETC2 and EAC)
* `WebGLRenderingContext.getExtension()`
* `WebGLRenderingContext.compressedTexImage2D()`
* `WebGLRenderingContext.getParameter()`
crypto global property
======================

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

The global read-only **`crypto`** property returns the `Crypto` object associated to the global object. This object allows web pages access to certain cryptographic related services.

 Although the property itself is read-only, all of its methods (and the methods of its
 child object, `SubtleCrypto`) are not read-only, and therefore vulnerable
 to attack by polyfill.

Although `crypto` is available on all windows, the returned `Crypto` object only has one usable feature in insecure contexts: the `getRandomValues()` method. In general, you should use this API only in secure contexts.

Value
-----

An instance of the `Crypto` interface, providing access to general-purpose cryptography and a strong random-number generator.

Examples
--------

This example uses the `crypto` property to access the `getRandomValues()` method.

### JavaScript


```js
globalThis.genRandomNumbers = () => {
  const array = new Uint32Array(10);
  crypto.getRandomValues(array);

  const randText = document.getElementById("myRandText");
  randText.textContent = `The random numbers are: ${array.join(" ")}`;
};
```

### HTML


```html
<p id="myRandText">The random numbers are:</p>
<button type="button" onClick="genRandomNumbers()">
  Generate 10 random numbers
</button>
```

### Result

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

| Specification |
| --- |
| Web Cryptography API # dom-windoworworkerglobalscope-crypto |

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

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

See also
--------

* The `Window` global object
* The `Crypto` interface
CSSUnitValue
============

The **`CSSUnitValue`** interface of the CSS\_Object\_Model#css\_typed\_object\_model represents values that contain a single unit type. For example, "42px" would be represented by a `CSSNumericValue`.

CSSStyleValue

CSSNumericValue

CSSUnitValueConstructor
-----------

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

Event handlers
--------------

None.

Examples
--------

The following shows a method of creating a `CSSPositionValue` from individual `CSSUnitValue` constructors.


```js
let pos = new CSSPositionValue(
  new CSSUnitValue(5, "px"),
  new CSSUnitValue(10, "px"),
);
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # simple-numeric |

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

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

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

| Specification |
| --- |
| WebGL OES\_fbo\_render\_mipmap Extension Specification  |

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

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

See also
--------

* `WebGLRenderingContext.getExtension()`
WebTransportSendStream
======================

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

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

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

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

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.

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

| Specification |
| --- |
| WebTransport # webtransportsendstream |

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

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

See also
--------

* Using WebTransport
* Streams API
* WebTransport over HTTP/3
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:


```html
<input id="fileItem" type="file" />
```


The following line of code fetches the first file in the node's file list as a `File` object:


```js
const file = document.getElementById("fileItem").files[0];
```


**Note:** 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 use types that wrap around ECMAScript array types instead, so you can treat them like ECMAScript arrays, and at the same time impose additional semantics on their usage (such as making their items read-only).

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


```html
<input id="myfiles" multiple type="file" />
<pre class="output">Selected files:</pre>
```


#### CSS


```css
.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}
```


#### JavaScript


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

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

| Specification |
| --- |
| File API # filelist-section |
| HTML Standard # dom-input-files-dev |

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

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

See also
--------

* Using files from web applications
* `File`
* `FileReader`
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

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

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

 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.


```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
```

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

| Specification |
| --- |
| CSS Animations Level 1 # interface-csskeyframesrule |

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

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

See also
--------

* `@keyframes`
* `CSSKeyFrameRule`
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

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


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


```js
audioTracks.onaddtrack = updateTrackCount;
audioTracks.onremovetrack = updateTrackCount;

function updateTrackCount(event) {
  trackCount = audioTracks.length;
  drawTrackCountIndicator(trackCount);
}
```

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

| Specification |
| --- |
| HTML Standard # audiotracklist-and-videotracklist-objects |

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

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

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

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

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

| Specification |
| --- |
| Battery Status API # the-batterymanager-interface |

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

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

See also
--------

* The Battery Status API
* `Navigator.getBattery()`
CookieChangeEvent
=================

**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 **`CookieChangeEvent`** interface of the Cookie Store API is the event type of the `change` event fired at a `CookieStore` when any cookie changes occur. A cookie change consists of a cookie and a type (either "changed" or "deleted").

Cookie changes that will cause the `CookieChangeEvent` to be dispatched are:

* A cookie is newly created and not immediately removed. 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".

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

CookieChangeEventConstructor
-----------

`CookieChangeEvent()` 
Experimental

Creates a new `CookieChangeEvent`.

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

*This interface also inherits properties from `Event`.*

`CookieChangeEvent.changed` Read only  
Experimental

Returns an array containing one or more changed cookies.

`CookieChangeEvent.deleted` Read only  
Experimental

Returns an array containing one or more deleted cookies.

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.


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

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

| Specification |
| --- |
| Cookie Store API # CookieChangeEvent |

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

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

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.

 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.

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

| Specification |
| --- |
| Clipboard API and events # clipboard-interface |

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

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

See also
--------

* `Document.execCommand()`
EcdhKeyDeriveParams
===================

The **`EcdhKeyDeriveParams`** dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.deriveKey()`, when using the ECDH algorithm.

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

`public`

A `CryptoKey` object representing the public key of the other entity.

Examples
--------

See the examples for `SubtleCrypto.deriveKey()`.

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

| Specification |
| --- |
| Web Cryptography API # dfn-EcdhKeyDeriveParams |

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

Browsers that support the "ECDH" algorithm for the `SubtleCrypto.deriveKey()` method will support this type.

See also
--------

* `SubtleCrypto.deriveKey()`.
CustomEvent
===========

The **`CustomEvent`** interface represents events initialized by an application for any purpose.

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

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

Event

CustomEventConstructor
-----------

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

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

| Specification |
| --- |
| DOM Standard # interface-customevent |

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

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

See also
--------

* `Window.postMessage()`
* Creating and triggering events