recursal/MDN huggingface dataset:
ImageTrack: selected 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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`selected`** property of the `ImageTrack` interface returns `true` if the track is selected for decoding.

Value
-----

A `boolean`, if `true` the track is selected for decoding.

Examples
--------

The following example prints the value of `selected` to the console.


```js
let track = imageDecoder.tracks.selectedTrack;
console.log(track.selected); // this is the selected track so should return true.
```

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

| Specification |
| --- |
| WebCodecs # dom-imagetrack-selected |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ImageTrack: repetitionCount 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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`repetitionCount`** property of the `ImageTrack` interface returns the number of repetitions of this track.

Value
-----

An integer.

Examples
--------

The following example prints the value of `repetitionCount` to the console.


```js
let track = imageDecoder.tracks.selectedTrack;
console.log(track.repetitionCount);
```

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

| Specification |
| --- |
| WebCodecs # dom-imagetrack-repetitioncount |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ImageTrack: animated 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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`animated`** property of the `ImageTrack` interface returns `true` if the track is animated and therefore has multiple frames.

Value
-----

A `boolean`, if `true` this is an animated track.

Examples
--------

The following example prints the value of `animated` to the console.


```js
let track = imageDecoder.tracks.selectedTrack;
console.log(track.animated);
```

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

| Specification |
| --- |
| WebCodecs # dom-imagetrack-animated |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ImageTrack: frameCount 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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`frameCount`** property of the `ImageTrack` interface returns the number of frames in the track.

Value
-----

An integer.

Examples
--------

The following example prints the value of `frameCount` to the console.


```js
let track = imageDecoder.tracks.selectedTrack;
console.log(track.frameCount);
```

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

| Specification |
| --- |
| WebCodecs # dom-imagetrack-framecount |

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

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

The **`cut`** event is fired on an `SVGGraphicsElement` when the user has initiated a "cut" action through the browser's user interface.

If the user attempts a cut action on uneditable content, the `cut` event still fires but the event object contains no data.

The event's default action is to copy the current selection (if any) to the system clipboard and remove it from the document.

A handler for this event can *modify* the clipboard contents by calling `setData(format, data)` on the event's `ClipboardEvent.clipboardData` property, and cancelling the default action using `event.preventDefault()`.

Note though that cancelling the default action will also prevent the document from being updated. So an event handler which wants to emulate the default action for "cut" while modifying the clipboard must also manually remove the selection from the document.

The handler cannot *read* the clipboard data.

It's possible to construct and dispatch a synthetic `cut` event, but this will not affect the system clipboard or the document's contents.

Syntax
------

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


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

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

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

A `ClipboardEvent`. Inherits from `Event`.

Event

ClipboardEventSpecifications
--------------

| Specification |
| --- |
| Clipboard API and events # clipboard-event-cut |
| HTML Standard # handler-oncut |

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

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

See also
--------

* Related events: `copy`, `paste`
* This event on HTML `Element` targets: `cut`
* This event on `Document` targets: `cut`
* This event on `Window` targets: `cut`
SVGGraphicsElement: paste event
===============================

The **`paste`** event is fired on an `SVGGraphicsElement` when the user has initiated a "paste" action through the browser's user interface.

If the cursor is in an editable context (for example, in a `<textarea>` or an element with `contenteditable` attribute set to `true`) then the default action is to insert the contents of the clipboard into the document at the cursor position.

A handler for this event can access the clipboard contents by calling `getData()` on the event's `clipboardData` property.

To override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using `event.preventDefault()`, and then insert its desired data manually.

It's possible to construct and dispatch a synthetic `paste` event, but this will not affect the document's contents.

Syntax
------

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


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

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

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

A `ClipboardEvent`. Inherits from `Event`.

Event

ClipboardEventExample
-------

### HTML


```html
<?xml version="1.0" encoding="UTF-8"?>
<svg
 viewBox="0 0 140 30"
 width="600"
 height="320"
 xmlns="http://www.w3.org/2000/svg">
  <foreignObject x="5" y="-10" width="90" height="20">
    <input xmlns="http://www.w3.org/1999/xhtml" value="Copy this text" />
  </foreignObject>
  <text x="5" y="30" id="element-to-paste-text" tabindex="1">
    Paste it here
  </text>
</svg>
```

### CSS


```css
input {
  font-size: 10px;
  width: 100%;
  height: 90%;
  box-sizing: border-box;
  border: 1px solid black;
}
```

### JavaScript


```js
document
  .getElementById("element-to-paste-text")
  .addEventListener("paste", (evt) => {
    evt.target.textContent = evt.clipboardData
      .getData("text/plain")
      .toUpperCase();
    evt.preventDefault();
  });
```

### Result

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

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

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

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

See also
--------

* Related events: `cut`, `copy`
* This event on HTML `Element` targets: `paste`
* This event on `Document` targets: `paste`
* This event on `Window` targets: `paste`
SVGGraphicsElement: copy event
==============================

The **`copy`** event fires on `SVGGraphicsElements` when the user initiates a copy action through the browser's user interface.

The event's default action is to copy the selection (if any) to the clipboard.

A handler for this event can *modify* the clipboard contents by calling `setData(format, data)` on the event's `ClipboardEvent.clipboardData` property, and cancelling the event's default action using `event.preventDefault()`.

However, the handler cannot *read* the clipboard data.

It's possible to construct and dispatch a synthetic `copy` event, but this will not affect the system clipboard.

Syntax
------

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


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

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

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

A `ClipboardEvent`. Inherits from `Event`.

Event

ClipboardEventExample
-------

### HTML


```html
<?xml version="1.0" encoding="UTF-8"?>
<svg
 viewBox="0 0 100 30"
 width="600"
 height="320"
 xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="10" id="text-to-copy">Copy this text</text>
  <foreignObject x="5" y="20" width="90" height="20">
    <input xmlns="http://www.w3.org/1999/xhtml" placeholder="Paste it here" />
  </foreignObject>
</svg>
```

### CSS


```css
input {
  font-size: 10px;
  width: 100%;
  height: 90%;
  box-sizing: border-box;
  border: 1px solid black;
}
```

### JavaScript


```js
document.querySelector("text").addEventListener("copy", (evt) => {
  evt.clipboardData.setData(
    "text/plain",
    document.getSelection().toString().toUpperCase(),
  );
  evt.preventDefault();
});
```

### Result

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

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

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

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

See also
--------

* Related events: `cut`, `paste`
* This event on HTML `Element` targets: `copy`
* This event on `Document` targets: `copy`
* This event on `Window` targets: `copy`
IntersectionObserverEntry: intersectionRatio property
=====================================================

 The `IntersectionObserverEntry` interface's
 read-only **`intersectionRatio`** property tells you how much
 of the target element is currently visible within the root's intersection ratio, as a
 value between 0.0 and 1.0.

Value
-----

 A number between 0.0 and 1.0 which indicates how much of the target element is actually
 visible within the root's intersection rectangle. More precisely, this value is the
 ratio of the area of the intersection rectangle
 (`intersectionRect`) to the
 area of the target's bounds rectangle
 (`boundingClientRect`).

 If the area of the target's bounds rectangle is zero, the returned value is 1 if
 `isIntersecting` is
 `true` or 0 if not.

Examples
--------

 In this simple example, an intersection callback sets each target element's
 `opacity` to the intersection ratio of that element with the root.


```js
function intersectionCallback(entries) {
  entries.forEach((entry) => {
    entry.target.style.opacity = entry.intersectionRatio;
  });
}
```


 To see a more concrete example, take a look at
 Handling intersection changes.

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-intersectionratio |

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

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

 The `IntersectionObserverEntry` interface's
 read-only **`intersectionRect`** property is a
 `DOMRectReadOnly` object which describes the smallest rectangle that
 contains the entire portion of the target element which is currently visible within
 the intersection root.

Value
-----

 A `DOMRectReadOnly` which describes the part of the target element that's
 currently visible within the root's intersection rectangle.

 This rectangle is computed by taking the intersection of
 `boundingClientRect` with each of the
 `target`'s ancestors' clip rectangles,
 with the exception of the intersection `root`
 itself.

Examples
--------

 In this simple example, an intersection callback stores the intersection rectangle for
 later use by the code that draws the target elements' contents, so that only the visible
 area is redrawn.


```js
function intersectionCallback(entries) {
  entries.forEach((entry) => {
    refreshZones.push({
      element: entry.target,
      rect: entry.intersectionRect,
    });
  });
}
```

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-intersectionrect |

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

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

 The `IntersectionObserverEntry` interface's
 read-only **`rootBounds`** property is a
 `DOMRectReadOnly` corresponding to the
 `target`'s root intersection
 rectangle, offset by the `IntersectionObserver.rootMargin` if one is
 specified.

Value
-----

 A `DOMRectReadOnly` which describes the root intersection rectangle. For
 roots which are the `Document`'s viewport, this rectangle is the bounds
 rectangle of the entire document. Otherwise, it's the bounds of the root element.

 This rectangle is offset by the values in
 `IntersectionObserver.rootMargin`.

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-rootbounds |

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

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

 The `IntersectionObserverEntry` interface's read-only
 **`boundingClientRect`** property returns a
 `DOMRectReadOnly` which in essence describes a rectangle describing the
 smallest rectangle that contains the entire target element.

Value
-----

 A `DOMRectReadOnly` which describes the smallest rectangle that contains
 every part of the target element whose intersection change is being described. This
 value is obtained using the same algorithm as
 `Element.getBoundingClientRect()`, so refer to that article for details on
 precisely what is done to obtain this rectangle and what is and is not included within
 its bounds.

 In the general case, however, it's safe to think of this as the bounds rectangle of the
 target element.

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-boundingclientrect |

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

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

 The `IntersectionObserverEntry` interface's
 read-only **`isIntersecting`** property is a Boolean value
 which is `true` if the target element intersects with the intersection
 observer's root. If this is `true`, then, the
 `IntersectionObserverEntry` describes a transition into a state of
 intersection; if it's `false`, then you know the transition is from
 intersecting to not-intersecting.

Value
-----

 A Boolean value which indicates whether the
 `target` element has transitioned into
 a state of intersection (`true`) or out of a state of intersection
 (`false`).

Examples
--------

 In this simple example, an intersection callback is used to update a counter of how
 many targeted elements are currently intersecting with the
 intersection root.


```js
function intersectionCallback(entries) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      intersectingCount += 1;
    } else {
      intersectingCount -= 1;
    }
  });
}
```


 To see a more concrete example, take a look at
 Handling intersection changes.

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-isintersecting |

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

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

 The `IntersectionObserverEntry` interface's
 read-only **`target`** property indicates which targeted
 `Element` has changed its amount of intersection with the intersection
 root.

Value
-----

 The `IntersectionObserverEntry`'s `target` property specifies
 which `Element` previously targeted by calling
 `IntersectionObserver.observe()` experienced a change in intersection with
 the root.

Examples
--------

 In this simple example, each targeted element's `opacity` is set to its
 `intersectionRatio`.


```js
function intersectionCallback(entries) {
  entries.forEach((entry) => {
    entry.target.style.opacity = entry.intersectionRatio;
  });
}
```


 To see a more concrete example, take a look at
 Handling intersection changes.

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-target |

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

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

 The `IntersectionObserverEntry` interface's
 read-only **`time`** property is a
 `DOMHighResTimeStamp` that indicates the time at which the intersection
 change occurred relative to the time at which the document was created.

Value
-----

 A `DOMHighResTimeStamp` which indicates the time at which the
 `target` element experienced the
 intersection change described by the `IntersectionObserverEntry`. The time is
 specified in milliseconds since the creation of the containing document.

Examples
--------

 See Timing element visibility with the Intersection Observer API for a complete example which
 uses the `time` property to track how long elements are visible to the user.

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-time |

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

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

The **`FormDataEvent()`** constructor creates a new `FormDataEvent` object.

Syntax
------


```js
new FormDataEvent(type, formEventInit)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `formdata`.


`options`

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`formData`

 A `FormData` object to pre-populate the `FormDataEvent` with.
 This would then be accessed through the `FormDataEvent.formData` property.



### Return value

A new `FormDataEvent` object.

Examples
--------


```js
const fd = new FormData();
fd.append("test", "test");

const fdEv = new FormDataEvent("formdata", { formData: fd });

for (const value of fdEv.formData.values()) {
  console.log(value);
}
```

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

| Specification |
| --- |
| HTML Standard # the-formdataevent-interface |

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

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

See also
--------

* `FormDataEvent`
FormDataEvent: formData property
================================

 The `formData` read-only property of the `FormDataEvent`
 interface contains the `FormData` object representing the data contained in
 the form when the event was fired.

Value
-----

A `FormData` object.

Examples
--------


```js
// grab reference to form

const formElem = document.querySelector("form");

// submit handler

formElem.addEventListener("submit", (e) => {
  // on form submission, prevent default
  e.preventDefault();

  // construct a FormData object, which fires the formdata event
  new FormData(formElem);
});

// formdata handler to retrieve data

formElem.addEventListener("formdata", (e) => {
  console.log("formdata fired");

  // Get the form data from the event object
  let data = e.formData;
  for (const value of data.values()) {
    console.log(value);
  }

  // submit the data via XHR
  const request = new XMLHttpRequest();
  request.open("POST", "/formHandler");
  request.send(data);
});
```

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

| Specification |
| --- |
| HTML Standard # the-formdataevent-interface:dom-formdataevent-formdata-2 |

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

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

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest
* Using FormData objects
* `<form>`
BiquadFilterNode: gain property
===============================

The `gain` property of the `BiquadFilterNode` interface is an a-rate `AudioParam` — a double representing the gain used in the current filtering algorithm.

When its value is positive, it represents a real gain; when negative, it represents an attenuation.

It is expressed in dB, has a default value of `0`, and can take a value in a nominal range of `-40` to `40`.

Value
-----

An `AudioParam`.

**Note:** Though the `AudioParam` returned is read-only, the value it represents is not.

Examples
--------

 The following example shows basic usage of an AudioContext to create a Biquad filter node.
 For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 108–193 for relevant code).


```js
const audioCtx = new AudioContext();

//set up the different audio nodes we will use for the app
const analyser = audioCtx.createAnalyser();
const distortion = audioCtx.createWaveShaper();
const gainNode = audioCtx.createGain();
const biquadFilter = audioCtx.createBiquadFilter();
const convolver = audioCtx.createConvolver();

// connect the nodes together

source = audioCtx.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(distortion);
distortion.connect(biquadFilter);
biquadFilter.connect(convolver);
convolver.connect(gainNode);
gainNode.connect(audioCtx.destination);

// Manipulate the Biquad filter

biquadFilter.type = "lowshelf";
biquadFilter.frequency.value = 1000;
biquadFilter.gain.value = 25;
```

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

| Specification |
| --- |
| Web Audio API # dom-biquadfilternode-gain |

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

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

See also
--------

* Using the Web Audio API