recursal/MDN huggingface dataset:
PaymentManager
==============

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

The **`PaymentManager`** interface of the Payment Handler API is used to manage various aspects of payment app functionality.

It is accessed via the `ServiceWorkerRegistration.paymentManager` property.

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

`userHint` 
Experimental

Provides a hint for the browser to display along with the payment app's name and icon in the Payment Handler UI.

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

`enableDelegations()` 
Experimental

Delegates responsibility for providing various parts of the required payment information to the payment app rather than collecting it from the browser (for example, via autofill).

Examples
--------


```js
navigator.serviceWorker.register("serviceworker.js").then((registration) => {
  registration.paymentManager.userHint = "Card number should be 16 digits";

  registration.paymentManager
    .enableDelegations(["shippingAddress", "payerName"])
    .then(() => {
      // ...
    });

  // ...
});
```

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

| Specification |
| --- |
| Payment Handler API # paymentmanager-interface |

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

SVG animated preserveAspectRatio interface
------------------------------------------

The `SVGAnimatedPreserveAspectRatio` interface is used for attributes of type `SVGPreserveAspectRatio` which can be animated.

### Interface overview

|  |  |
| --- | --- |
| Also implement | *None* |
| Methods | *None* |
| Properties | * readonly float `baseVal`
* readonly float `animVal`
 |
| Normative document | SVG 1.1 (2nd Edition) |

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

`SVGAnimatedPreserveAspectRatio.baseVal` Read only 

A `SVGPreserveAspectRatio` that represents the base value of the given attribute before applying any animations.

`SVGAnimatedPreserveAspectRatio.animVal` Read only 

A `SVGPreserveAspectRatio` that represents the current animated value of the given attribute. If the given attribute is not currently being animated, then the `SVGPreserveAspectRatio` will have the same contents as `baseVal`. The object referenced by `animVal` is always distinct from the one referenced by `baseVal`, even when the attribute is not animated.

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

The `SVGAnimatedPreserveAspectRatio` interface do not provide any specific methods.

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

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

The **`CSSVariableReferenceValue`** interface of the CSS\_Object\_Model#css\_typed\_object\_model allows you to create a custom name for a built-in CSS value. This object functionality is sometimes called a "CSS variable" and serves the same purpose as the `var()` function. The custom name must begin with two dashes.

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

`CSSVariableReferenceValue()`

Creates a new `CSSVariableReferenceValue` object.

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

`CSSVariableReferenceValue.variable`

Returns the custom name passed to the constructor.

`CSSVariableReferenceValue.fallback` Read only 

Returns the built-in CSS value for the custom name.

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

None.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # cssvariablereferencevalue |

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

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

The **`CSSSupportsRule`** interface represents a single CSS `@supports` at-rule.

CSSRule

CSSGroupingRule

CSSConditionRule

CSSSupportsRuleInstance properties
-------------------

*Inherits properties from its ancestors `CSSConditionRule`, `CSSGroupingRule`, and `CSSRule`.*

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

*Inherits methods from its ancestors `CSSConditionRule`, `CSSGroupingRule`, and `CSSRule`.*

Examples
--------

 The CSS includes a CSS feature query using the `@supports` at-rule, containing one style rule. This will be the first CSSRule returned by `document.styleSheets[0].cssRules`.
 `myRules[0]` therefore returns a `CSSSupportsRule` object.


```css
@supports (display: grid) {
  body {
    color: blue;
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // a CSSSupportsRule representing the feature query.
```

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

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # the-csssupportsrule-interface |

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

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

See also
--------

* `@supports`
MessageChannel
==============

The **`MessageChannel`** interface of the Channel Messaging API allows us to create a new message channel and send data through it via its two `MessagePort` properties.

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

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

`MessageChannel()`

Returns a new `MessageChannel` object with two new `MessagePort` objects.

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

`MessageChannel.port1` Read only 

Returns port1 of the channel.

`MessageChannel.port2` Read only 

Returns port2 of the channel.

Example
-------

In the following example, you can see a new channel being created using the `MessageChannel()` constructor.

When the IFrame has loaded, we register an `onmessage` handler for `MessageChannel.port1` and transfer `MessageChannel.port2` to the IFrame using the `window.postMessage` method along with a message.

When a message is received back from the IFrame, the `onMessage` function outputs the message to a paragraph.


```js
const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;

  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "\*", [
    channel.port2,
  ]);
}

// Handle messages received on port1
function onMessage(e) {
  output.innerHTML = e.data;
}
```


For a full working example, see our channel messaging basic demo on GitHub (run it live too).

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

| Specification |
| --- |
| HTML Standard # message-channels |

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

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

See also
--------

* Using channel messaging
PopStateEvent
=============

**`PopStateEvent`** is an interface for the `popstate` event.

 A `popstate` event is dispatched to the window every time the active history
 entry changes between two history entries for the same document. If the history entry
 being activated was created by a call to `history.pushState()` or was
 affected by a call to `history.replaceState()`, the `popstate`
 event's `state` property contains a copy of the history entry's state object.

Event

PopStateEventConstructor
-----------

`PopStateEvent()`

Creates a new `PopStateEvent` object.

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

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

`PopStateEvent.state` Read only 

Returns a copy of the information that was provided to `pushState()` or `replaceState()`.

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

*This interface has no methods of its own, but inherits the methods of its parent, `Event`.*

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

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

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

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

See also
--------

* `popstate` event
* `hashchange` event
CSSNumericArray
===============

The **`CSSNumericArray`** interface of the CSS\_Object\_Model#css\_typed\_object\_model contains a list of `CSSNumericValue` objects.

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

`CSSNumericArray.length` Read only 

Returns how many `CSSNumericValue` objects are contained within the `CSSNumericArray`.

Examples
--------

To do.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # cssnumericarray |

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

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

**`PerformanceMeasure`** is an *abstract* interface for `PerformanceEntry` objects with an `entryType` of "`measure`". Entries of this type are created by calling `performance.measure()` to add a *named* `DOMHighResTimeStamp` (the *measure*) between two *marks* to the browser's *performance timeline*.

PerformanceEntry

PerformanceMeasure

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

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

This interface defines:

`PerformanceMeasure.detail`

Contains arbitrary metadata about the measure.

In addition, it extends the following `PerformanceEntry` properties by qualifying/constraining the properties as follows:

`PerformanceEntry.entryType`

Returns "`measure`".

`PerformanceEntry.name`

Returns the name given to the measure when it was created via a call to `performance.measure()`.

`PerformanceEntry.startTime`

Returns a `timestamp` given to the measure when `performance.measure()` was called.

`PerformanceEntry.duration`

Returns a `DOMHighResTimeStamp` that is the duration of the measure (typically, the measure's end mark timestamp minus its start mark timestamp).

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

This interface has no methods.

Example
-------

See the example in Using the User Timing API.

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

| Specification |
| --- |
| User Timing # performancemeasure |

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

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

See also
--------

* User Timing (Overview)
* Using the User Timing API
trustedTypes global property
============================

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

The global **`trustedTypes`** read-only property returns the `TrustedTypePolicyFactory` object associated with the global object, providing the entry point for using the Trusted Types API.

Value
-----

An `TrustedTypePolicyFactory` object.

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

| Specification |
| --- |
| Trusted Types # extensions-to-the-windoworworkerglobalscope-interface |

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

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

The **`CSSMathMin`** interface of the CSS\_Object\_Model#css\_typed\_object\_model represents the CSS `min()` function. It inherits properties and methods from its parent `CSSNumericValue`.

CSSStyleValue

CSSNumericValue

CSSMathValue

CSSMathMinConstructor
-----------

`CSSMathMin()` 
Experimental

Creates a new `CSSMathMin` object.

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

`CSSMathMin.values` Read only 

Returns a `CSSNumericArray` object which contains one or more `CSSNumericValue` objects.

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

*The interface may also inherit methods from its parent interface, `CSSMathValue`.*

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

*The interface may also inherit methods from its parent interface, `CSSMathValue`.*

Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # cssmathmin |

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

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

The DOM **`StaticRange`** interface extends `AbstractRange` to provide a method to specify a range of content in the DOM whose contents don't update to reflect changes which occur within the DOM tree.

This interface offers the same set of properties and methods as `AbstractRange`.

`AbstractRange` and `StaticRange` are not available from web workers.

AbstractRange

StaticRangeConstructor
-----------

`StaticRange()`

Creates a new `StaticRange` object given options specifying the default values for its properties.

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

*The properties below are inherited from its parent interface, `AbstractRange`.*

`StaticRange.collapsed` Read only 

Returns a Boolean value that is `true` if the range's start and end positions are the same, resulting in a range of length 0.

`StaticRange.endContainer` Read only 

Returns the DOM `Node` which contains the ending point of the range. The offset into the node at which the end position is located is indicated by `endOffset`.

`StaticRange.endOffset` Read only 

Returns an integer value indicating the offset into the node given by `endContainer` at which the last character of the range is found.

`StaticRange.startContainer` Read only 

Returns the DOM `Node` which contains the starting point of the range (which is in turn identified by `startOffset`.

`StaticRange.startOffset` Read only 

Returns an integer value indicating the offset into the node specified by `startContainer` at which the first character of the range is located.

Usage notes
-----------

A DOM range specifies a span of content in a document, potentially beginning inside one node (or element) and ending inside another one. Unlike a `Range`, a `StaticRange` represents a range which is fixed in time; it does not change to try to keep the same content within it as the document changes. If any changes are made to the DOM, the actual data contained within the range specified by a `StaticRange` may change. This lets the user agent avoid a lot of work that is unnecessary if the web app or site doesn't need a live-updating range.

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

| Specification |
| --- |
| DOM Standard # interface-staticrange |

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

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

See also
--------

* Live updating range of content within the DOM: `Range`
* `AbstractRange`, the abstract interface from which all ranges are derived
SVGFEColorMatrixElement
=======================

The **`SVGFEColorMatrixElement`** interface corresponds to the `<feColorMatrix>` element.

EventTarget

Node

Element

SVGElement

SVGFEColorMatrixElementConstants
---------

| Name | Value | Description |
| --- | --- | --- |
| `SVG_FECOLORMATRIX_TYPE_UNKNOWN` | 0 | 
 The type is not one of predefined types. It is invalid to attempt to
 define a new value of this type or to attempt to switch an existing
 value to this type.
  |
| `SVG_FECOLORMATRIX_TYPE_MATRIX` | 1 | Corresponds to the `matrix` value. |
| `SVG_FECOLORMATRIX_TYPE_SATURATE` | 2 | Corresponds to the `saturate` value. |
| `SVG_FECOLORMATRIX_TYPE_HUEROTATE` | 3 | Corresponds to `hueRotate` value. |
| `SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA` | 4 | Corresponds to `luminanceToAlpha` value. |

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

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

`SVGFEColorMatrixElement.height` Read only 

An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.

`SVGFEColorMatrixElement.in1` Read only 

An `SVGAnimatedString` corresponding to the `in` attribute of the given element.

`SVGFEColorMatrixElement.result` Read only 

An `SVGAnimatedString` corresponding to the `result` attribute of the given element.

`SVGFEColorMatrixElement.type` Read only 

An `SVGAnimatedEnumeration` corresponding to the `type` attribute of the given element. It takes one of the `SVG_FECOLORMATRIX_TYPE_*` constants defined on this interface.

`SVGFEColorMatrixElement.values` Read only 

An `SVGAnimatedNumberList` corresponding to the `values` attribute of the given element.

`SVGFEColorMatrixElement.width` Read only 

An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.

`SVGFEColorMatrixElement.x` Read only 

An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.

`SVGFEColorMatrixElement.y` Read only 

An `SVGAnimatedLength` corresponding to the `y` 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 # InterfaceSVGFEColorMatrixElement |

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

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

See also
--------

* `<feColorMatrix>`
SpeechRecognitionResult
=======================

The **`SpeechRecognitionResult`** interface of the Web Speech API represents a single recognition match, which may contain multiple `SpeechRecognitionAlternative` objects.

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

`SpeechRecognitionResult.isFinal` Read only 

A boolean value that states whether this result is final (true) or not (false) — if so, then this is the final time this result will be returned; if not, then this result is an interim result, and may be updated later on.

`SpeechRecognitionResult.length` Read only 

Returns the length of the "array" — the number of `SpeechRecognitionAlternative` objects contained in the result (also referred to as "n-best alternatives".)

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

`SpeechRecognitionResult.item`

A standard getter that allows `SpeechRecognitionAlternative` objects within the result to be accessed via array syntax.

Examples
--------

This code is excerpted from our Speech color changer example.


```js
recognition.onresult = (event) => {
  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
  // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
  // It has a getter so it can be accessed like an array
  // The first [0] returns the SpeechRecognitionResult at position 0.
  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects
  // that contain individual results.
  // These also have getters so they can be accessed like arrays.
  // The second [0] returns the SpeechRecognitionAlternative at position 0.
  // We then return the transcript property of the SpeechRecognitionAlternative object
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
};
```

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

| Specification |
| --- |
| Web Speech API # speechreco-result |

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

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

See also
--------

* Web Speech API
XRRenderState
=============

**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 **`XRRenderState`** interface of the WebXR Device API contains configurable values which affect how the imagery generated by an `XRSession` gets composited. These properties include the range of distances from the viewer within which content should be rendered, the vertical field of view (for inline presentations), and a reference to the `XRWebGLLayer` being used as the target for rendering the scene prior to it being presented on the XR device's display or displays.

When you apply changes using the `XRSession` method `updateRenderState()`, the specified changes take effect after the current animation frame has completed, but before the next one begins.

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

`XRRenderState.baseLayer` Read only  
Experimental

The `XRWebGLLayer` from which the browser's compositing system obtains the image for the XR session.

`XRRenderState.depthFar` Read only  
Experimental

The distance, in meters, of the **far clip plane** from the viewer. The far clip plane is the plane which is parallel to the display beyond which rendering of the scene no longer takes place. This, essentially, specifies the maximum distance the user can see.

`XRRenderState.depthNear` Read only  
Experimental

The distance, in meters, of the **near clip plane** from the viewer. The near clip plane is the plane, parallel to the display, at which rendering of the scene begins. Any closer to the viewer than this, and no portions of the scene are drawn.

`XRRenderState.inlineVerticalFieldOfView` Read only  
Experimental

The default vertical field of view, defined in radians, to use when the session is in `inline` mode. `null` for all immersive sessions.

`XRRenderState.layers` Read only  
Experimental

An ordered array containing `XRLayer` objects that are displayed by the XR compositor.

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

| Specification |
| --- |
| WebXR Device API # xrrenderstate-interface |

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

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

See also
--------

* `XRSession.renderState`
* `XRSession.updateRenderState()`
* `navigator.xr.requestSession()`
CSSMathMax
==========

The **`CSSMathMax`** interface of the CSS\_Object\_Model#css\_typed\_object\_model represents the CSS `max()` function. It inherits properties and methods from its parent `CSSNumericValue`.

CSSStyleValue

CSSNumericValue

CSSMathValue

CSSMathMaxConstructor
-----------

`CSSMathMax()` 
Experimental

Creates a new `CSSMathMax` object.

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

`CSSMathMax.values` Read only 

Returns a `CSSNumericArray` object which contains one or more `CSSNumericValue` objects.

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

*The interface may also inherit methods from its parent interface, `CSSMathValue`.*

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

*The interface may also inherit methods from its parent interface, `CSSMathValue`.*

Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # cssmathmax |

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

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

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

The **`CSSScopeRule`** interface of the CSS Object Model represents a CSS `@scope` at-rule.

CSSRule

CSSGroupingRule

CSSScopeRuleInstance properties
-------------------

*This interface inherits properties from its parent, `CSSGroupingRule`.*

`end` 
Experimental

Returns a string containing the value of the `@scope` at-rule's scope limit.

`start` 
Experimental

Returns a string containing the value of the `@scope` at-rule's scope root.

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

*This interface inherits methods from its parent, `CSSGroupingRule`.*

Examples
--------

### Accessing @scope information in JavaScript

Assuming the following is the only stylesheet attached to a document:


```css
@scope (.outer) to (.inner) {
  :scope {
    background: yellow;
  }
}
```


The following JavaScript could be used to access information about the contained `@scope` block:


```js
const scopeBlock = document.styleSheets[0].cssRules[0];

console.log(scopeBlock.start); // Returns ".outer"
console.log(scopeBlock.end); // Returns ".inner"
```

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 6 # cssscoperule |

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

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

See also
--------

* `@scope`
* `:scope`