recursal/MDN huggingface dataset:
DedicatedWorkerGlobalScope: rtctransform event
==============================================

The **`rtctransform`** event is fired at a worker's `DedicatedWorkerGlobalScope` object when an encoded video or audio frame has been queued for processing by a WebRTC Encoded Transform.

The event's `transformer` property returns a `RTCRtpScriptTransformer` that exposes the `ReadableStream` on which the frame is queued, and a `WritableStream` where the frame can be written to inject it back into the WebRTC pipeline.

This event is not cancellable and does not bubble.

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

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("rtctransform", (event) => {});

onrtctransform = (event) => {};
```

Event type
----------

A `RTCTransformEvent`. Inherits from `Event`.

Event

RTCTransformEventEvent properties
----------------

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

`RTCTransformEvent.transformer` Read only 

Returns the `RTCRtpScriptTransformer` associated with the event.

Example
-------

 The following code snippet shows a handler for the `rtctransform` event in the worker, added to the global scope using `addEventListener()`.
 The `event.transformer` is a `RTCRtpScriptTransformer`, the worker side counterpart to `RTCRtpScriptTransform`.


```js
addEventListener("rtctransform", (event) => {
  let transform;
  // Select a transform based on passed options
  if (event.transformer.options.name == "senderTransform")
    transform = createSenderTransform(); // A TransformStream
  else if (event.transformer.options.name == "receiverTransform")
    transform = createReceiverTransform(); // A TransformStream
  else return;

  //Pipe frames from the readable to writeable through TransformStream
  event.transformer.readable
    .pipeThrough(transform)
    .pipeTo(event.transformer.writable);
});
```


 The `rtctransform` event is fired when an encoded frame is enqueued on the `RTCRtpScriptTransformer` and just once when the transformer's corresponding `RTCRtpScriptTransformer` is constructed.
 The code first determines what transform to apply using `name` value passed in the options (this allows `RTCRtpScriptTransform` instances added to the incoming and outgoing WebRTC pipelines to share a single worker).
 Encoded frames are then piped from the readable, through the selected transform `TransformStream`, to a writeable.
 The actual tranforming code is not shown.

Note that this code is part of a more complete example provided in Using WebRTC Encoded Transforms.

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

| Specification |
| --- |
| WebRTC Encoded Transform # dom-dedicatedworkerglobalscope-onrtctransform |

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

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

See also
--------

* Using WebRTC Encoded Transforms
DedicatedWorkerGlobalScope: cancelAnimationFrame() method
=========================================================

The **`cancelAnimationFrame()`** method of the `DedicatedWorkerGlobalScope` interface cancels an animation frame request previously scheduled through a call to `requestAnimationFrame()`.

Calling the `cancelAnimationFrame()` method requires the current worker to have an associated owner `window`. That means that the current worker must be created by `window` or by a dedicated worker that also has an associated owner `window`.

Syntax
------


```js
cancelAnimationFrame(handle)
```

### Parameters

`handle`

The ID value returned by a call to `requestAnimationFrame()`; the call must have been made in the same worker.

### Return value

None (`undefined`).

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the method is not supported by the current worker.

Examples
--------

On the main thread, we start by transferring the control of a `<canvas>` element to an `OffscreenCanvas`, using `HTMLCanvasElement.transferControlToOffscreen()` and send to a message to `"start"` its work to the worker, with the offscreen canvas:


```js
const offscreenCanvas = document
  .querySelector("canvas")
  .transferControlToOffscreen();

worker.postMessage(
  {
    type: "start",
    canvas: offscreenCanvas,
  },
  [offscreenCanvas],
);
```


When receiving the `"start"` message, the worker starts the animation, moving the rectangle from left to right. Upon reception of a `"stop"` message, it will stop the animation.


```js
let ctx;
let pos = 0;

function draw(dt) {
  ctx.clearRect(0, 0, 100, 100);
  ctx.fillRect(pos, 0, 10, 10);
  pos += 10 \* dt;
  self.requestAnimationFrame(draw);
}

self.addEventListener("message", (e) => {
  if (e.data.type === "start") {
    const transferredCanvas = e.data.canvas;
    ctx = transferredCanvas.getContext("2d");
    self.requestAnimationFrame(draw);
  }
  if (e.data.type === "stop") {
    self.cancelAnimationFrame(handle);
  }
});
```


Finally, if needed, the main thread can send a `"stop"` message to the worker to stop the animation:


```js
worker.postMessage({
  type: "stop",
});
```

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

| Specification |
| --- |
| HTML Standard # animationframeprovider-cancelanimationframe |

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

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

See also
--------

* `DedicatedWorkerGlobalScope.requestAnimationFrame()`
* `Window.cancelAnimationFrame()`
MIDIConnectionEvent: port property
==================================

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

The **`port`** read-only property of the `MIDIConnectionEvent` interface returns the port that has been disconnected or connected.

Value
-----

A `MIDIPort` object.

Examples
--------

The `Navigator.requestMIDIAccess()` method returns a promise that resolves with a `MIDIAccess` object. When a port changes state, a `MIDIConnectionEvent` is passed to the `statechange` event. Information about the port can then be printed to the console.


```js
navigator.requestMIDIAccess().then((access) => {
  access.onstatechange = (event) => {
    console.log(event.port.name, event.port.manufacturer, event.port.state);
  };
});
```

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

| Specification |
| --- |
| Web MIDI API # dom-midiconnectionevent-port |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MIDIConnectionEvent: MIDIConnectionEvent() constructor
======================================================

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

The **`MIDIConnectionEvent()`** constructor creates a new `MIDIConnectionEvent` object. Typically this constructor is not used as events are created when a new port becomes available, and the object is passed to the `statechange` event.

Syntax
------


```js
new MIDIConnectionEvent(type)
new MIDIConnectionEvent(type, midiConnectionEventInit)
```

### Parameters

`type`

A string with one of `"connect"` or `"disconnect"`.

`midiConnectionEventInit` Optional

A dictionary including the following fields:

`port`

The `MIDIPort` instance representing the port that has connected or disconnected.

`bubbles` Optional

 A boolean value indicating whether the event bubbles. The default is
 `false`.


`cancelable` Optional

 A boolean value indicating whether the event can be cancelled. The
 default is `false`.


`composed` Optional

 A boolean value indicating whether the event will trigger listeners
 outside of a shadow root (see `Event.composed` for more details). The
 default is `false`.



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

| Specification |
| --- |
| Web MIDI API # dom-midiconnectionevent-constructor |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
IDBOpenDBRequest: upgradeneeded event
=====================================

The `upgradeneeded` event is fired when an attempt was made to open a database with a version number higher than its current version.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("upgradeneeded", (event) => {});

onupgradeneeded = (event) => {};
```

Event type
----------

An `IDBVersionChangeEvent`. Inherits from `Event`.

Event

IDBVersionChangeEventEvent properties
----------------

*Also inherits properties from its parent, `Event` interface.*

`IDBVersionChangeEvent.oldVersion` Read only 

Returns the old version of the database.

`IDBVersionChangeEvent.newVersion` Read only 

Returns the new version of the database.

Examples
--------

This example opens a database and handles the `upgradeneeded` event by making any necessary updates to the object store.


```js
// Open the database
const dBOpenRequest = window.indexedDB.open("toDoList", 4);

dBOpenRequest.addEventListener("upgradeneeded", (event) => {
  const db = event.target.result;
  console.log(`Upgrading to version ${db.version}`);

  // Create an objectStore for this database
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // define what data items the objectStore will contain
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
});
```


This is the same example, but uses the onupgradeneeded event handler property.


```js
// Open the database
const dBOpenRequest = window.indexedDB.open("toDoList", 4);

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  console.log(`Upgrading to version ${db.version}`);

  // Create an objectStore for this database
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // define what data items the objectStore will contain
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};
```

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

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

See also
--------

* Using IndexedDB
StyleSheet: ownerNode property
==============================

 The **`ownerNode`** property of the
 `StyleSheet` interface returns the node that associates this style sheet
 with the document.

 This is usually an HTML
 `<link>` or
 `<style>` element, but
 can also return a processing instruction node in the case of `<?xml-stylesheet ?>`.

Value
-----

A `Node` object.

Examples
--------


```html
<html lang="en">
  <head>
    <link rel="stylesheet" href="example.css" />
  </head>
  <body>
    <button onclick="alert(document.styleSheets[0].ownerNode)">
      Show example.css's ownerNode
    </button>
  </body>
</html>
// Displays "object HTMLLinkElement"
```

Notes
-----

 For style sheets that are included by other style sheets, such as with
 `@import`, the value of this
 property is `null`.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-ownernode |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StyleSheet: disabled property
=============================

 The **`disabled`** property of the
 `StyleSheet` interface determines whether the style sheet is prevented from
 applying to the document.

 A style sheet may be disabled by manually setting this property to `true` or
 if it's an inactive alternative style sheet. Note that `disabled === false` does not guarantee the style
 sheet is applied (it could be removed from the document, for instance).

Value
-----

A boolean.

Examples
--------


```js
// If the stylesheet is disabled
if (stylesheet.disabled) {
  // Apply styles in-line
}
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-disabled |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StyleSheet: href property
=========================

 The **`href`** property of the `StyleSheet`
 interface returns the location of the style sheet.

This property is read-only.

Value
-----

A string containing the stylesheet's URI.

Examples
--------

On a local Windows machine:


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>href example</title>
    <link rel="styleSheet" href="example.css" />
    <script>
 function sref() {
 alert(document.styleSheets[0].href);
 }
 </script>
  </head>
  <body>
    <div class="thunder">Thunder</div>
    <button onclick="sref()">ss</button>
  </body>
</html>
```


Returns "file:////C:/Windows/Desktop/example.css"

Notes
-----

 If the style sheet is a linked style sheet, the value of its attribute is its location.
 For inline style sheets, the value of this attribute is `NULL`.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-href |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StyleSheet: type property
=========================

 The **`type`** property of the `StyleSheet`
 interface specifies the style sheet language for the given style sheet.

Value
-----

A string.

Examples
--------


```js
myStyleSheet.type = "text/css";
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-type |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StyleSheet: parentStyleSheet property
=====================================

 The **`parentStyleSheet`** property of the
 `StyleSheet` interface returns the style sheet, if any, that is including
 the given style sheet.

Value
-----

A `StyleSheet` object.

Examples
--------


```js
// Find the top level stylesheet
const sheet = stylesheet.parentStyleSheet ?? stylesheet;
```

Notes
-----

 This property returns `null` if the current stylesheet is a top-level
 stylesheet or if stylesheet inclusion is not supported.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-parentstylesheet |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StyleSheet: media property
==========================

The **`media`** property of the `StyleSheet` interface specifies the intended destination media for style information. It is a read-only, array-like `MediaList` object and can be removed with `deleteMedium()` and added with `appendMedium()`.

Value
-----

A read-only array-like `MediaList` object.

Examples
--------


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Test page</title>
    <link rel="stylesheet" href="document.css" media="screen" />
    <style rel="stylesheet" media="screen, print">
 body {
 background-color: snow;
 }
 </style>
  </head>
  <body>
    <script>
 for (let i = 0; i < document.styleSheets.length; i++) {
 console.log(
 `document.styleSheets[${i}].media: ${JSON.stringify(
 document.styleSheets[i].media,
 )}`,
 );
 if (iSheetIndex === 0)
 document.styleSheets[i].media.appendMedium("handheld");
 if (iSheetIndex === 1)
 document.styleSheets[i].media.deleteMedium("print");
 console.log(
 `document.styleSheets[${i}].media: ${JSON.stringify(
 document.styleSheets[i].media,
 )}`,
 );
 }
 // This will log:
 // document.styleSheets[0].media: {"0":"screen"}
 // document.styleSheets[0].media: {"0":"screen","1":"handheld"}
 // document.styleSheets[1].media: {"0":"screen","1":"print"}
 // document.styleSheets[1].media: {"0":"screen"}
 </script>
  </body>
</html>
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-media |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StyleSheet: title property
==========================

The **`title`** property of the `StyleSheet` interface returns the advisory title of the current style sheet.

The title is often specified in the `ownerNode`.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-title |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ContentVisibilityAutoStateChangeEvent: ContentVisibilityAutoStateChangeEvent() constructor
==========================================================================================

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
The **`ContentVisibilityAutoStateChangeEvent()`** constructor creates a new `ContentVisibilityAutoStateChangeEvent` object instance.

Syntax
------


```js
new ContentVisibilityAutoStateChangeEvent(type, options)
```

### Parameters

`type`

A string representing the type of event. In the case of `ContentVisibilityAutoStateChangeEvent` this is always `event`.

`options` Optional

An object that contains the following properties:

`skipped`

A boolean, which is set to `true` if the user agent skips the element's contents, or `false` otherwise.


Examples
--------

A developer would not use this constructor manually. A new `ContentVisibilityAutoStateChangeEvent` object is constructed when a handler is invoked as a result of the `contentvisibilityautostatechange` event firing.


```js
canvasElem.addEventListener("contentvisibilityautostatechange", (event) => {
  // …
});
```

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

| Specification |
| --- |
| CSS Containment Module Level 2 # dom-contentvisibilityautostatechangeevent-contentvisibilityautostatechangeevent |

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

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

See also
--------

* The `contentvisibilityautostatechange` event
* CSS Containment
* The `content-visibility` property
* The `contain` property
ContentVisibilityAutoStateChangeEvent: skipped property
=======================================================

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
The `skipped` read-only property of the `ContentVisibilityAutoStateChangeEvent` interface returns `true` if the user agent skips the element's contents, or `false` otherwise.

Value
-----

A boolean. Returns `true` if the user agent skips the element's contents, or `false` otherwise.

Examples
--------


```js
const canvasElem = document.querySelector("canvas");

canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
canvasElem.style.contentVisibility = "auto";

function stateChanged(event) {
  if (event.skipped) {
    stopCanvasUpdates(canvasElem);
  } else {
    startCanvasUpdates(canvasElem);
  }
}

// Call this when the canvas updates need to start.
function startCanvasUpdates(canvas) {
  // …
}

// Call this when the canvas updates need to stop.
function stopCanvasUpdates(canvas) {
  // …
}
```

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

| Specification |
| --- |
| CSS Containment Module Level 2 # dom-contentvisibilityautostatechangeevent-skipped |

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

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

See also
--------

* The `contentvisibilityautostatechange` event
* CSS Containment
* The `content-visibility` property
* The `contain` property
FormData: get() method
======================

 The **`get()`** method of the `FormData` interface
 returns the first value associated with a given key from within a `FormData`
 object. If you expect multiple values and want all of them, use the
 `getAll()` method instead.

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

Syntax
------


```js
get(name)
```

### Parameters

`name`

A string representing the name of the key you want to retrieve.

### Return value

A value whose key matches the specified `name`. Otherwise, `null`.

Examples
--------

If we add two `username` values to a `FormData` using `append()`:


```js
formData.append("username", "Chris");
formData.append("username", "Bob");
```


The following `get()` method will only return the first `username` value:


```js
formData.get("username"); // Returns "Chris"
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-get |

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

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

See also
--------

* Using FormData objects
* `<form>`
FormData: has() method
======================

The **`has()`** method of the `FormData` interface returns whether a `FormData` object contains a certain key.

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

Syntax
------


```js
has(name)
```

### Parameters

`name`

A string representing the name of the key you want to test for.

### Return value

`true` if a key of `FormData` matches the specified `name`. Otherwise, `false`.

Examples
--------

The following snippet shows the results of testing for the existence of `username` in a `FormData` object, before and after appending a `username` value to it with `append()`:


```js
formData.has("username"); // Returns false
formData.append("username", "Chris");
formData.has("username"); // Returns true
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-has |

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

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

See also
--------

* Using FormData objects
* `<form>`
FormData: keys() method
=======================

The **`FormData.keys()`** method returns an iterator which iterates through all keys contained in the `FormData`. The keys are strings.

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

Syntax
------


```js
keys()
```

### Parameters

None.

### Return value

An `iterator` of `FormData`'s keys.

Examples
--------


```js
const formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// Display the keys
for (const key of formData.keys()) {
  console.log(key);
}
```


The result is:
```

key1
key2
```

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

#### No specification found

No specification data found for `api.FormData.keys`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* Using FormData objects
* `<form>`