recursal/MDN huggingface dataset:
MediaRecorderErrorEvent
=======================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`MediaRecorderErrorEvent`** interface represents errors returned by the MediaStream Recording API. It is an `Event` object that encapsulates a reference to a `DOMException` describing the error that occurred.

Constructor
-----------

`MediaStreamRecorderEvent()` 
Deprecated

Non-standard

Creates and returns a new `MediaRecorderErrorEvent` event object with the given parameters.

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

*Inherits properties from its parent interface, `Event`*.

`error` Read only  
Deprecated

Non-standard

A `DOMException` containing information about the error that occurred.

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

*Inherits methods from its parent interface, `Event`*.

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

This feature is no longer part of any specification.

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

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

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

The **`CanMakePaymentEvent`** interface of the Payment Handler API is the event object for the `canmakepayment` event, fired on a payment app's service worker to check whether it is ready to handle a payment. Specifically, it is fired when the merchant website calls `new PaymentRequest()`.

Event

ExtendableEvent

CanMakePaymentEventConstructor
-----------

`CanMakePaymentEvent()` 
Experimental

Creates a new `CanMakePaymentEvent` object instance.

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

`respondWith()` 
Experimental

Enables the service worker to respond appropriately to signal whether it is ready to handle payments.

Examples
--------


```js
self.addEventListener("canmakepayment", (e) => {
  e.respondWith(
    new Promise((resolve, reject) => {
      someAppSpecificLogic()
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    }),
  );
});
```

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

| Specification |
| --- |
| Payment Handler API # the-canmakepaymentevent |

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

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

See also
--------

* Payment Handler API
* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
SVGGeometryElement
==================

The `SVGGeometryElement` interface represents SVG elements whose rendering is defined by geometry with an equivalent path, and which can be filled and stroked. This includes paths and the basic shapes.

EventTarget

Node

Element

SVGElement

SVGGraphicsElement

SVGGeometryElementInstance properties
-------------------

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

`SVGGeometryElement.pathLength` Read only 

This property reflects the `pathLength` attribute.

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

*This interface also inherits methods from its parent, `SVGGraphicsElement`.*

`SVGGeometryElement.isPointInFill()`

Determines whether a given point is within the fill shape of an element. Normal hit testing rules apply; the value of the `pointer-events` property on the element determines whether a point is considered to be within the fill.

`SVGGeometryElement.isPointInStroke()`

Determines whether a given point is within the stroke shape of an element. Normal hit testing rules apply; the value of the `pointer-events` property on the element determines whether a point is considered to be within the stroke.

`SVGGeometryElement.getTotalLength()`

Returns the user agent's computed value for the total length of the path in user units.

`SVGGeometryElement.getPointAtLength()`

Returns the point at a given distance along the path.

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

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

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

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

The **Web Animations API** allows for synchronizing and timing changes to the presentation of a Web page, i.e. animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model.

Concepts and usage
------------------

The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements. To get more information on the concepts behind the API and how to use it, read Using the Web Animations API.

Web Animations interfaces
-------------------------

`Animation`

Provides playback controls and a timeline for an animation node or source. Can take an object created with the `KeyframeEffect()` constructor.

`KeyframeEffect`

Describes sets of animatable properties and values, called **keyframes** and their timing options. These can then be played using the `Animation()` constructor.

`AnimationTimeline`

Represents the timeline of animation. This interface exists to define timeline features (inherited by `DocumentTimeline` and future timeline objects) and is not itself accessed by developers.

`AnimationEvent`

Actually part of CSS Animations.

`DocumentTimeline`

Represents animation timelines, including the default document timeline (accessed using the `Document.timeline` property).

Extensions to other interfaces
------------------------------

The Web Animations API adds some new features to `document` and `element`.

### Extensions to the `Document` interface

`document.timeline`

The `DocumentTimeline` object representing the default document timeline.

`document.getAnimations()`

Returns an Array of `Animation` objects currently in effect on elements in the `document`.

### Extensions to the `Element` interface

`Element.animate()`

A shortcut method for creating and playing an animation on an element. It returns the created `Animation` object instance.

`Element.getAnimations()`

Returns an Array of `Animation` objects currently affecting an element or which are scheduled to do so in future.

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

| Specification |
| --- |
| Web Animations  |

See also
--------

* Using the Web Animations API
* Web Animations demos
* Polyfill
* Firefox's current implementation: AreWeAnimatedYet
* Browser support test
CSSNumericValue
===============

The **`CSSNumericValue`** interface of the CSS Typed Object Model API represents operations that all numeric values can perform.

CSSStyleValue

CSSNumericValueInterfaces based on CSSNumericValue
-----------------------------------

Below is a list of interfaces based on the CSSNumericValue interface.

* `CSSMathClamp`
* `CSSMathInvert`
* `CSSMathMax`
* `CSSMathMin`
* `CSSMathNegate`
* `CSSMathProduct`
* `CSSMathSum`
* `CSSMathValue`
* `CSSNumericArray`
* `CSSUnitValue`
Instance properties
-------------------

None.

Static methods
--------------

`CSSNumericValue.parse`

Allows a `CSSNumericValue` to be constructed directly from a string containing CSS.

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

`CSSNumericValue.add`

Adds a supplied number to the `CSSNumericValue`.

`CSSNumericValue.sub`

Subtracts a supplied number from the `CSSNumericValue`.

`CSSNumericValue.mul`

Multiplies the `CSSNumericValue` by the supplied value.

`CSSNumericValue.div`

Divides the `CSSNumericValue` by the supplied value.

`CSSNumericValue.min`

Returns the minimum value passed

`CSSNumericValue.max`

Returns the maximum value passed

`CSSNumericValue.equals`

*True* if all the values are the exact same type and value, in the same order. Otherwise, *false.*

`CSSNumericValue.to`

Converts `value` into another one with the specified *unit.*

`CSSNumericValue.toSum`

Converts an existing `CSSNumericValue` into a `CSSMathSum` object with values of a specified unit.

`CSSNumericValue.type`

Returns the type of `CSSNumericValue`, one of `angle`, `flex`, `frequency`, `length`, `resolution`, `percent`, `percentHint`, or `time`.

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

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

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

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

See also
--------

* `CSSImageValue`
* `CSSKeywordValue`
* `CSSPositionValue`
* `CSSTransformValue`
* `CSSUnparsedValue`
StylePropertyMap
================

The **`StylePropertyMap`** interface of the CSS Typed Object Model API provides a representation of a CSS declaration block that is an alternative to `CSSStyleDeclaration`.

StylePropertyMapReadOnly

StylePropertyMapInstance properties
-------------------

*Inherits properties from its parent, `StylePropertyMapReadOnly`.*

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

*Inherits methods from its parent, `StylePropertyMapReadOnly`.*

`StylePropertyMap.append()`

Adds a new CSS declaration to the `StylePropertyMap` with the given property and value.

`StylePropertyMap.clear()`

Removes all declarations in the `StylePropertyMap`.

`StylePropertyMap.delete()`

Removes the CSS declaration with the given property.

`StylePropertyMap.set()`

Changes the CSS declaration with the given property.

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.
SVGFEDistantLightElement
========================

The **`SVGFEDistantLightElement`** interface corresponds to the `<feDistantLight>` element.

EventTarget

Node

Element

SVGElement

SVGFEDistantLightElementInstance properties
-------------------

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

`SVGFEDistantLightElement.azimuth` Read only 

An `SVGAnimatedNumber` corresponding to the `azimuth` attribute of the given element.

`SVGFEDistantLightElement.elevation` Read only 

An `SVGAnimatedNumber` corresponding to the `elevation` attribute of the given element.

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

*This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.*

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

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

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

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

See also
--------

* `<feDistantLight>`
RTCIdentityAssertion
====================

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

The **`RTCIdentityAssertion`** interface of the WebRTC API represents the identity of a remote peer of the current connection. If no peer has yet been set and verified, then this interface returns `null`. Once set it can't be changed.

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

`RTCIdentityAssertion.idp` 
Experimental

Indicates the provider of the identity assertion.

`RTCIdentityAssertion.name` 
Experimental

Indicates the name of the identity assertion provider.

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

| Specification |
| --- |
| Identity for WebRTC 1.0 # rtcidentityassertion-interface |

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

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

The **`BeforeUnloadEvent`** interface represents the event object for the `beforeunload` event, which is fired when the current window, contained document, and associated resources are about to be unloaded.

See the `beforeunload` event reference for detailed guidance on using this event.

Event

BeforeUnloadEventInstance properties
-------------------

*Inherits properties from its parent, `Event`.*

`returnValue` 
Deprecated

When set to a truthy value, triggers a browser-controlled confirmation dialog asking users to confirm if they want to leave the page when they try to close or reload it. This is a legacy feature, and best practice is to trigger the dialog by invoking `event.preventDefault()`, while also setting `returnValue` to support legacy cases.

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

*Inherits methods from its parent, `Event`.*

Examples
--------

In the following example we have an HTML text `<input>` to represent some data that could be changed and require saving:


```html
<form>
  <input type="text" name="name" id="name" />
</form>
```


Our JavaScript attaches an `input` event listener to the `<input>` element that listens for changes in the inputted value. When the value is updated to a non-empty value, a `beforeunload` event listener is attached to the `Window` object.

If the value becomes an empty string again (i.e. the value is deleted), the `beforeunload` event listener is removed again — as mentioned above in the Usage notes, the listener should be removed when there is no unsaved data to warn about.

The `beforeunload` event handler function invokes `event.preventDefault()` to trigger the warning dialog when the user closes or navigates the tab. We have also included `event.returnValue = true` in the handler function so that any browsers that don't support the `event.preventDefault()` mechanism will still run the demo correctly.


```js
const beforeUnloadHandler = (event) => {
  // Recommended
  event.preventDefault();

  // Included for legacy support, e.g. Chrome/Edge < 119
  event.returnValue = true;
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    window.addEventListener("beforeunload", beforeUnloadHandler);
  } else {
    window.removeEventListener("beforeunload", beforeUnloadHandler);
  }
});
```


When the `<input>` value is non-empty, if you try to close, navigate, or reload the page the browser displays the warning dialog. Try it out:

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

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

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

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

See also
--------

* `beforeunload` event
CSSValue
========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`CSSValue`** interface represents the current computed value of a CSS property.

**Note:** This interface was part of an attempt to create a typed CSS Object Model. This attempt has been abandoned, and most browsers do
 not implement it.


To achieve your purpose, you can use:

* the untyped CSS Object Model, widely supported, or
* the modern CSS Typed Object Model API, less supported and considered experimental.

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

`CSSValue.cssText` 
Deprecated

A string representing the current value.

`CSSValue.cssValueType` Read only  
Deprecated

An `unsigned short` representing a code defining the type of the value. Possible values are:

| Constant | Description |
| --- | --- |
| `CSS_CUSTOM` | The value is a custom value. |
| `CSS_INHERIT` | The value is inherited and the `cssText` contains `"inherit"`. |
| `CSS_PRIMITIVE_VALUE` | The value is a primitive value and an instance of the `CSSPrimitiveValue` interface can be obtained by using binding-specific casting methods on this instance of the `CSSValue` interface. |
| `CSS_VALUE_LIST` | The value is a `CSSValue` list and an instance of the `CSSValueList` interface can be obtained by using binding-specific casting methods on this instance of the `CSSValue` interface. |

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

 This feature was originally defined in the DOM Style Level 2 specification, but has been dropped from any
 standardization effort since then.

It has been superseded by a modern, but incompatible, CSS Typed Object Model API that is now on the standard track.

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

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

See also
--------

* `CSSPrimitiveValue`
* `CSSValueList`
SVGViewElement
==============

The **`SVGViewElement`** interface provides access to the properties of `<view>` elements, as well as methods to manipulate them.

EventTarget

Node

Element

SVGElement

SVGViewElementInstance properties
-------------------

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

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

*This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.*

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

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

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

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

See also
--------

* `<view>`
SVGTextPositioningElement
=========================

The **`SVGTextPositioningElement`** interface is implemented by elements that support attributes that position individual text glyphs. It is inherited by `SVGTextElement`, `SVGTSpanElement`, and `SVGTRefElement`.

EventTarget

Node

Element

SVGElement

SVGGraphicsElement

SVGTextContentElement

SVGTextPositioningElementInstance properties
-------------------

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

`SVGTextPositioningElement.x` Read only 

Returns an `SVGAnimatedLengthList` reflecting the `x` attribute of the given element.

`SVGTextPositioningElement.y` Read only 

Returns an `SVGAnimatedLengthList` reflecting the `y` attribute of the given element.

`SVGTextPositioningElement.dx` Read only 

Returns an `SVGAnimatedLengthList` reflecting the `dx` attribute of the given element.

`SVGTextPositioningElement.dy` Read only 

Returns an `SVGAnimatedLengthList` reflecting the `dy` attribute of the given element.

`SVGTextPositioningElement.rotate` Read only 

Returns an `SVGAnimatedNumberList` reflecting the `rotate` attribute of the given element.

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

*This interface doesn't provide any specific methods, but inherits methods from its parent, `SVGTextContentElement`.*

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

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

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

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

The `VTTRegion` interface—part of the API for handling WebVTT (text tracks on media presentations)—describes a portion of the video to render a `VTTCue` onto.

Constructor
-----------

`VTTRegion()`

Returns a newly created `VTTRegion` object.

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

`VTTRegion.id`

A string that identifies the region.

`VTTRegion.width`

A `double` representing the width of the region, as a percentage of the video.

`VTTRegion.lines`

A `double` representing the height of the region, in number of lines.

`VTTRegion.regionAnchorX`

A `double` representing the region anchor X offset, as a percentage of the region.

`VTTRegion.regionAnchorY`

A `double` representing the region anchor Y offset, as a percentage of the region.

`VTTRegion.viewportAnchorX`

A `double` representing the viewport anchor X offset, as a percentage of the video.

`VTTRegion.viewportAnchorY`

A `double` representing the viewport anchor Y offset, as a percentage of the video.

`VTTRegion.scroll`

An enum representing how adding new cues will move existing cues.

Examples
--------


```js
const region = new VTTRegion();
region.width = 50; // Use 50% of the video width
region.lines = 4; // Use 4 lines of height.
region.viewportAnchorX = 25; // Have the region start at 25% from the left.
const cue = new VTTCue(2, 3, "Cool text to be displayed");
cue.region = region; // This cue will be drawn only within this region.
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-vttregion-interface |

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

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

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 **`ContentVisibilityAutoStateChangeEvent`** interface is the event object for the `contentvisibilityautostatechange` event, which fires on any element with `content-visibility: auto` set on it when it starts or stops being relevant to the user and skipping its contents.

 While the element is not relevant (between the start and end events), the user agent skips an element's rendering, including layout and painting.
 This can significantly improve page rendering speed.
 The `contentvisibilityautostatechange` event provides a way for an app's code to also start or stop rendering processes (e.g. drawing on a `<canvas>`) when they are not needed, thereby conserving processing power.

Note that even when hidden from view, element contents will remain semantically relevant (e.g. to assistive technology users), so this signal should not be used to skip significant semantic DOM updates.

Event

ContentVisibilityAutoStateChangeEventConstructor
-----------

`ContentVisibilityAutoStateChangeEvent()`

Creates a new `ContentVisibilityAutoStateChangeEvent` object instance.

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

*Inherits properties from its parent, `Event`.*

`skipped` Read only 

Returns `true` if the user agent is skipping the element's rendering, 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 # content-visibility-auto-state-change |

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