recursal/MDN huggingface dataset:
NDEFMessage
===========

**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 **`NDEFMessage`** interface of the Web NFC API represents the content of an NDEF message that has been read from or could be written to an NFC tag. An instance is acquired by calling the `NDEFMessage()` constructor or from the `NDEFReadingEvent.message` property, which is passed to the `reading` event.

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

`NDEFMessage()` 
Experimental

Creates a new `NDEFMessage` object, initialized with the given NDEF records.

Attributes
----------

`NDEFMessage.records` Read only  
Experimental

Returns the list of NDEF records contained in the message.

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

| Specification |
| --- |
| Web NFC API # dom-ndefmessage |

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

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

The `MediaQueryListEvent` object stores information on the changes that have happened to a `MediaQueryList` object — instances are available as the event object on a function referenced by a `change` event.

Event

MediaQueryListEventConstructor
-----------

`MediaQueryListEvent()`

Creates a new `MediaQueryListEvent` instance.

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

*The `MediaQueryListEvent` interface inherits properties from its parent interface, `Event`.*

`MediaQueryListEvent.matches` Read only 

A boolean value that is `true` if the `document` currently matches the media query list, or `false` if not.

`MediaQueryListEvent.media` Read only 

A string representing a serialized media query.

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

*The `MediaQueryListEvent` interface inherits methods from its parent interface, `Event`.*

Examples
--------


```js
const para = document.querySelector("p"); // This is the UI element where to display the text
const mql = window.matchMedia("(max-width: 600px)");

mql.addEventListener("change", (event) => {
  if (event.matches) {
    // The viewport is 600 pixels wide or less
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    // The viewport is more than 600 pixels wide
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
});
```

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

| Specification |
| --- |
| CSSOM View Module # the-mediaquerylist-interface |

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

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

See also
--------

* Media queries
* Using media queries from code
* `window.matchMedia()`
* `MediaQueryList`
SVGRadialGradientElement
========================

The **`SVGRadialGradientElement`** interface corresponds to the `<RadialGradient>` element.

EventTarget

Node

Element

SVGElement

SVGGradientElement

SVGRadialGradientElementInstance properties
-------------------

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

`SVGRadialGradientElement.cx` Read only 

An `SVGAnimatedLength` corresponding to the `cx` attribute of the given `<RadialGradient>` element.

`SVGRadialGradientElement.cy` Read only 

An `SVGAnimatedLength` corresponding to the `cy` attribute of the given `<RadialGradient>` element.

`SVGRadialGradientElement.r` Read only 

An `SVGAnimatedLength` corresponding to the `r` attribute of the given `<RadialGradient>` element.

`SVGRadialGradientElement.fx` Read only 

An `SVGAnimatedLength` corresponding to the `fx` attribute of the given `<RadialGradient>` element.

`SVGRadialGradientElement.fy` Read only 

An `SVGAnimatedLength` corresponding to the `fy` attribute of the given `<RadialGradient>` element.

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

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

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

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

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

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

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

The **`TextFormatUpdateEvent`** interface is a `DOM event` that represents a list of text formats that an Input Method Editor (IME) window wants to apply to the text being composed in an editable region that's attached to an `EditContext` instance.

This interface inherits properties from `Event`.

Event

TextFormatUpdateEventConstructor
-----------

`TextFormatUpdateEvent()` 
Experimental

Creates a new `TextFormatUpdateEvent` object.

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

`TextFormatUpdateEvent.getTextFormats` 
Experimental

Returns an `Array` of `TextFormat` objects that represent the formats that the IME window wants to apply to the text.

Examples
--------

### Styling IME-composed text

In the following example, the `textformatupdate` event is used to update the formatting of the text in the editable region.


```html
<canvas id="editor-canvas"></canvas>
```



```js
const TEXT\_X = 10;
const TEXT\_Y = 10;

const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");

const editContext = new EditContext();
canvas.editContext = editContext;

editContext.addEventListener("textformatupdate", (e) => {
  // Clear the canvas.
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Render the text.
  ctx.fillText(editContext.text, TEXT\_X, TEXT\_Y);
  console.log(`Rendering text: ${editContext.text}`);

  // Get the text formats that the IME window wants to apply.
  const formats = e.getTextFormats();

  // Iterate over the text formats
  for (const format of formats) {
    const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format;

    console.log(
      `Applying underline ${underlineThickness} ${underlineStyle} between ${rangeStart} and ${rangeEnd}.`,
    );

    const underlineXStart = ctx.measureText(
      editContext.text.substring(0, rangeStart),
    ).width;
    const underlineXEnd = ctx.measureText(
      editContext.text.substring(0, rangeEnd),
    ).width;
    const underlineY = TEXT\_Y + 3;

    // For brevity, this example only draws a simple underline.
    // Use underlineStyle and underlineThickness to draw the correct underline.

    ctx.beginPath();
    ctx.moveTo(TEXT\_X + underlineXStart, underlineY);
    ctx.lineTo(TEXT\_X + underlineXEnd, underlineY);
    ctx.stroke();
  }
});
```

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

| Specification |
| --- |
| EditContext API # dom-textformatupdateevent |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
clearInterval() global function
===============================

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

 The global **`clearInterval()`** method cancels a timed, repeating action which
 was previously established by a call to `setInterval()`.
 If the parameter provided does not identify a previously established action,
 this method does nothing.

Syntax
------


```js
clearInterval(intervalID)
```

### Parameters

`intervalID`

 The identifier of the repeated action you want to cancel. This ID was returned by
 the corresponding call to `setInterval()`.



 It's worth noting that the pool of IDs used by
 `setInterval()` and
 `setTimeout()` are shared, which
 means you can technically use `clearInterval()` and
 `clearTimeout()` interchangeably.
 However, for clarity, you should avoid doing so.

### Return value

None (`undefined`).

Examples
--------

See the `setInterval()` examples.

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

| Specification |
| --- |
| HTML Standard # dom-clearinterval-dev |

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

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

See also
--------

* `setTimeout()`
* `setInterval()`
* `clearTimeout()`
* `Window.requestAnimationFrame()`
SVGCursorElement
================

**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 **`SVGCursorElement`** interface provides access to the properties of `<cursor>` elements, as well as methods to manipulate them.

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

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

`SVGCursorElement.x` Read only 

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

`SVGCursorElement.y` Read only 

An `SVGAnimatedLength` corresponding to the `y` attribute of the given `<cursor>` element.

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

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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # InterfaceSVGCursorElement |

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

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

See also
--------

* `<cursor>`
PerformanceNavigation
=====================

**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 legacy **`PerformanceNavigation`** interface represents information about how the navigation to the current document was done.

**Warning:** This interface is deprecated in the Navigation Timing Level 2 specification.
 Please use the `PerformanceNavigationTiming` interface instead.


An object of this type can be obtained by calling the `Performance.navigation` read-only attribute.

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

*The `PerformanceNavigation` interface doesn't inherit any properties.*

`PerformanceNavigation.type` Read only  
Deprecated

An `unsigned short` which indicates how the navigation to this page was done. Possible values are:

`TYPE_NAVIGATE` (0)

The page was accessed by following a link, a bookmark, a form submission, or a script, or by typing the URL in the address bar.

`TYPE_RELOAD` (1)

The page was accessed by clicking the Reload button or via the `Location.reload()` method.

`TYPE_BACK_FORWARD` (2)

The page was accessed by navigating into the history.

`TYPE_RESERVED` (255)

Any other way.


`PerformanceNavigation.redirectCount` Read only  
Deprecated

An `unsigned short` representing the number of REDIRECTs done before reaching the page.

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

*The `Performance` interface doesn't inherit any methods.*

`PerformanceNavigation.toJSON()` 
Deprecated

A serializer returning a JSON object representing the `PerformanceNavigation` object.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `Performance` that allows access to an object of this type.
* `PerformanceNavigationTiming` (part of Navigation Timing Level 2) that has superseded this API.
MIDIMessageEvent
================

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

The **`MIDIMessageEvent`** interface of the Web MIDI API represents the event passed to the `midimessage` event of the `MIDIInput` interface. A `midimessage` event is fired every time a MIDI message is sent from a device represented by a `MIDIInput`, for example when a MIDI keyboard key is pressed, a knob is tweaked, or a slider is moved.

Event

MIDIMessageEventConstructor
-----------

`MIDIMessageEvent()`

Creates a new `MIDIMessageEvent` object instance.

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

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

`MIDIMessageEvent.data`

A `Uint8Array` containing the data bytes of a single MIDI message. See the MIDI specification for more information on its form.

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

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

Examples
--------

The following example prints all MIDI messages to the console.


```js
navigator.requestMIDIAccess().then((midiAccess) => {
  Array.from(midiAccess.inputs).forEach((input) => {
    input[1].onmidimessage = (msg) => {
      console.log(msg);
    };
  });
});
```

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

| Specification |
| --- |
| Web MIDI API # midimessageevent-interface |

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

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

**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 **EyeDropper API** provides a mechanism for creating an eyedropper tool. Using this tool, users can sample colors from their screens, including outside of the browser window.

Concept
-------

Creative applications often allow users to sample colors from drawings or shapes in the application to reuse. Web applications can use the **EyeDropper API** to provide a similar eyedropper mode, provided by the browser.

Using the API, a web application can start the eyedropper mode. Once started, the cursor changes to indicate to the user that the mode is active. The user can then either select a color from anywhere on the screen, or dismiss the eyedropper mode by pressing `Escape`.

Security and privacy measures
-----------------------------

To prevent malicious websites from getting pixel data from a user's screen without them realizing, the **EyeDropper API** implements the following measures:

* The API doesn't let the eyedropper mode start without user intent. The `EyeDropper.open()` method can only be called in response to a user action (such as a button click).
* No pixel information can be retrieved without user intent. The promise returned by `EyeDropper.open()` only resolves to a color value in response to a user action (clicking on a pixel). So the eyedropper cannot be used in the background without the user noticing it.
* To help users notice the eyedropper mode more easily, it is made obvious by browsers. The normal mouse cursor disappears after a short delay and a magnifying glass appears instead. There is also a delay between when the eyedropper mode starts and when the user can select a pixel to ensure the user has had time to see the magnifying glass.
* Users are also able to cancel the eyedropper mode at any time (by pressing the `Escape` key).
Interfaces
----------

`EyeDropper` 
Experimental

The **`EyeDropper`** interface represents an instance of an eyedropper tool that can be opened and used by the user to select colors from the screen.

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

| Specification |
| --- |
| EyeDropper API # eyedropper-interface |

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

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

See also
--------

* Picking colors of any pixel on the screen with the EyeDropper API
* The EyeDropper API W3C/SMPTE Joint Workshop
EXT\_frag\_depth extension
==========================

The **`EXT_frag_depth`** extension is part of the WebGL API and enables to set a depth value of a fragment from within the fragment shader.

WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.

**Note:** This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default. It requires GLSL `#version 300 es`.

Examples
--------

Enable the extension:


```js
gl.getExtension("EXT\_frag\_depth");
```


Now the output variable `gl_FragDepthEXT` is available to set a depth value of a fragment from within the fragment shader:


```html
<script type="x-shader/x-fragment">
 void main() {
 gl\_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
 gl\_FragDepthEXT = 0.5;
 }
</script>
```

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

| Specification |
| --- |
| WebGL EXT\_frag\_depth Khronos Ratified Extension Specification  |

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

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

See also
--------

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

The Web Audio API `OfflineAudioCompletionEvent` interface represents events that occur when the processing of an `OfflineAudioContext` is terminated. The `complete` event uses this interface.

**Note:** This interface is marked as deprecated; it is still supported for legacy reasons, but it will soon be superseded when the promise version of `OfflineAudioContext.startRendering` is supported in browsers, which will no longer need it.

Event

OfflineAudioCompletionEventConstructor
-----------

`OfflineAudioCompletionEvent()`

Creates a new `OfflineAudioCompletionEvent` object instance.

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

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

`OfflineAudioCompletionEvent.renderedBuffer` Read only 

An `AudioBuffer` containing the result of processing an `OfflineAudioContext`.

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

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

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

| Specification |
| --- |
| Web Audio API # OfflineAudioCompletionEvent |

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

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

See also
--------

* Using the Web Audio API
Encrypted Media Extensions API
==============================

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

The Encrypted Media Extensions API provides interfaces for controlling the playback of content which is subject to a digital restrictions management scheme.

Access to this API is provided through `Navigator.requestMediaKeySystemAccess()`.

Interfaces
----------

`MediaEncryptedEvent`

Represents a specific `encrypted` event thrown when a `HTMLMediaElement` encounters some initialization data.

`MediaKeyMessageEvent`

Contains the content and related data when the content decryption module (CDM) generates a message for the session.

`MediaKeys`

Represents a set of keys that an associated `HTMLMediaElement` can use for decryption of media data during playback.

`MediaKeySession`

Represents a context for message exchange with a content decryption module (CDM).

`MediaKeyStatusMap`

A read-only map of media key statuses by key IDs.

`MediaKeySystemAccess`

Provides access to a key system for decryption and/or a content protection provider.

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

| Specification |
| --- |
| Encrypted Media Extensions # navigator-extension-requestmediakeysystemaccess |

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

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

A **`DOMPoint`** object represents a 2D or 3D point in a coordinate system; it includes values for the coordinates in up to three dimensions, as well as an optional perspective value. `DOMPoint` is based on `DOMPointReadOnly` but allows its properties' values to be changed.

In general, a positive `x` component represents a position to the right of the origin, a positive `y` component is downward from the origin, and a positive `z` component extends outward from the screen (in other words, toward the user).

DOMPointReadOnly

DOMPointConstructor
-----------

`DOMPoint()`

Creates and returns a new `DOMPoint` object given the values of zero or more of its coordinate components and optionally the `w` perspective value. You can also use an existing `DOMPoint` or `DOMPointReadOnly` or an object to create a new point by calling the `DOMPoint.fromPoint()` static method.

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

*`DOMPoint` may also inherit properties from its parent, `DOMPointReadOnly`.*

`DOMPoint.x`

The `x` coordinate of the `DOMPoint`.

`DOMPoint.y`

The `y` coordinate of the `DOMPoint`.

`DOMPoint.z`

The `z` coordinate of the `DOMPoint`.

`DOMPoint.w`

The perspective value of the `DOMPoint`.

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

*`DOMPoint` inherits instance methods from its parent, `DOMPointReadOnly`.*

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

*`DOMPoint` may also inherit static methods from its parent, `DOMPointReadOnly`.*

`DOMPoint.fromPoint()`

Creates a new mutable `DOMPoint` object given an existing point (or an object containing matching properties), which provides the values for its properties.

Examples
--------

In the WebXR Device API, `DOMPointReadOnly` values represent positions and orientations. In the following snippet, the pose of the XR device (such as a VR headset or phone with AR capabilities) can be retrieved by calling using `XRFrame.getViewerPose()` during an `XRSession` animation frame, then accessing the resulting `XRPose`'s `transform` property, which contains two `DOMPointReadOnly` attributes: `position` as a vector and `orientation` as a quaternion.


```js
function onXRFrame(time, xrFrame) {
  let viewerPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (viewerPose) {
    let position = viewerPose.transform.position;
    let orientation = viewerPose.transform.orientation;

    console.log(
      `XR Viewer Position: {x: ${roundToTwo(position.x)}, y: ${roundToTwo(
 position.y,
 )}, z: ${roundToTwo(position.z)}`,
    );

    console.log(
      `XR Viewer Orientation: {x: ${roundToTwo(orientation.x)}, y: ${roundToTwo(
 orientation.y,
 )}, z: ${roundToTwo(orientation.z)}, w: ${roundToTwo(orientation.w)}`,
    );
  }
}
```

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

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMPoint |

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

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

See also
--------

* `DOMRect`
* `DOMMatrix`