recursal/MDN huggingface dataset:
Idle Detection API
==================

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
**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 Idle Detection API provides a means to detect the user's idle status, active, idle, and locked, specifically, and to be notified of changes to idle status without polling from a script.

Concepts and Usage
------------------

Native applications and browser extensions use idle detection base user experiences on when a user is interacting with a device. For example, chat applications can show other users of an application whether someone is available. Other applications might choose to show notifications only when a user is interacting with the app. A web application could use this API for similar use cases. Additionally, a progressive web app could use idle detection to trigger a service worker update when the app isn't being used.

Interfaces
----------

`IdleDetector` 
Experimental

Provides methods and events for detecting user activity on a device or screen.

Examples
--------

 The following example shows creating a detector and logging changes to the
 user's idle state. A button is used to get the necessary user activation before
 requesting permission.


```js
const controller = new AbortController();
const signal = controller.signal;

startButton.addEventListener("click", async () => {
  if ((await IdleDetector.requestPermission()) !== "granted") {
    console.error("Idle detection permission denied.");
    return;
  }

  try {
    const idleDetector = new IdleDetector();
    idleDetector.addEventListener("change", () => {
      const userState = idleDetector.userState;
      const screenState = idleDetector.screenState;
      console.log(`Idle change: ${userState}, ${screenState}.`);
    });

    await idleDetector.start({
      threshold: 60\_000,
      signal,
    });
    console.log("IdleDetector is active.");
  } catch (err) {
    // Deal with initialization errors like permission denied,
    // running outside of top-level frame, etc.
    console.error(err.name, err.message);
  }
});

stopButton.addEventListener("click", () => {
  controller.abort();
  console.log("IdleDetector is stopped.");
});
```

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

| Specification |
| --- |
| Idle Detection API # api-idledetector |

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

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

The **`CryptoKeyPair`** dictionary of the Web Crypto API represents a key pair for an asymmetric cryptography algorithm, also known as a public-key algorithm.

A `CryptoKeyPair` object can be obtained using `SubtleCrypto.generateKey()`, when the selected algorithm is one of the asymmetric algorithms: RSASSA-PKCS1-v1\_5, RSA-PSS, RSA-OAEP, ECDSA, or ECDH.

It contains two properties, which are both `CryptoKey` objects: a `privateKey` property containing the private key and a `publicKey` property containing the public key.

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

`CryptoKeyPair.privateKey`

A `CryptoKey` object representing the private key. For encryption and decryption algorithms, this key is used to decrypt. For signing and verification algorithms it is used to sign.

`CryptoKeyPair.publicKey`

A `CryptoKey` object representing the public key. For encryption and decryption algorithms, this key is used to encrypt. For signing and verification algorithms it is used to verify signatures.

Examples
--------

The examples for `SubtleCrypto` methods often use `CryptoKeyPair` objects. For example:

* `SubtleCrypto.generateKey()`
* `SubtleCrypto.deriveKey()`
* `SubtleCrypto.importKey()`
* `SubtleCrypto.exportKey()`
* `SubtleCrypto.wrapKey()`
* `SubtleCrypto.unwrapKey()`
* `SubtleCrypto.encrypt()`
* `SubtleCrypto.decrypt()`
* `SubtleCrypto.sign()`
* `SubtleCrypto.verify()`
Specifications
--------------

| Specification |
| --- |
| Web Cryptography API # keypair |

See also
--------

* `SubtleCrypto.generateKey`.
* `SubtleCrypto.sign` and `SubtleCrypto.verify`.
* `SubtleCrypto.encrypt` and `SubtleCrypto.decrypt`.
TouchList
=========

The **`TouchList`** interface represents a list of contact points on a touch surface. For example, if the user has three fingers on the touch surface (such as a screen or trackpad), the corresponding `TouchList` object would have one `Touch` object for each finger, for a total of three entries.

**Note:** This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs use types that wrap around ECMAScript array types instead, so you can treat them like ECMAScript arrays, and at the same time impose additional semantics on their usage (such as making their items read-only).

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

`TouchList.length` Read only 

The number of `Touch` objects in the `TouchList`.

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

`TouchList.item()`

Returns the `Touch` object at the specified index in the list.

Example
-------

See the example on the main Touch events article.

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

| Specification |
| --- |
| Touch Events # touchlist-interface |

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

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

See also
--------

* Touch events
* `Document.createTouchList()`
HTMLTableCaptionElement
=======================

The **`HTMLTableCaptionElement`** interface provides special properties (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating table `<caption>` elements.

EventTarget

Node

Element

HTMLElement

HTMLTableCaptionElementInstance properties
-------------------

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

`HTMLTableCaptionElement.align` 
Deprecated

A string which represents an enumerated attribute indicating alignment of the caption with respect to the table.

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

*No specific method; inherits methods from its parent, `HTMLElement`*.

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

| Specification |
| --- |
| HTML Standard # htmltablecaptionelement |

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

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

See also
--------

* The HTML element implementing this interface: `<caption>`.
Screen Orientation API
======================

The **Screen Orientation API** provides information about the orientation of the screen.

Interfaces
----------

* `ScreenOrientation`
Specifications
--------------

| Specification |
| --- |
| Screen Orientation # screenorientation-interface |

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

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

The **`SVGFESpotLightElement`** interface corresponds to the `<feSpotLight>` element.

EventTarget

Node

Element

SVGElement

SVGFESpotLightElementInstance properties
-------------------

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

`SVGFESpotLightElement.x` Read only 

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

`SVGFESpotLightElement.y` Read only 

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

`SVGFESpotLightElement.z` Read only 

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

`SVGFESpotLightElement.pointAtX` Read only 

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

`SVGFESpotLightElement.pointAtY` Read only 

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

`SVGFESpotLightElement.pointAtZ` Read only 

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

`SVGFESpotLightElement.specularExponent` Read only 

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

`SVGFESpotLightElement.limitingConeAngle` Read only 

An `SVGAnimatedNumber` corresponding to the `limitingConeAngle` 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 # InterfaceSVGFESpotLightElement |

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

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

See also
--------

* `<feSpotLight>`
FontData
========

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

The **`FontData`** interface of the Local Font Access API represents a single local font face.

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

`FontData.family` Read only  
Experimental

Returns the family of the font face.

`FontData.fullName` Read only  
Experimental

Returns the full name of the font face.

`FontData.postscriptName` Read only  
Experimental

Returns the PostScript name of the font face.

`FontData.style` Read only  
Experimental

Returns the style of the font face.

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

`FontData.blob()` 
Experimental

Returns a `Promise` that fulfills with a `Blob` containing the raw bytes of the underlying font file.

Examples
--------

For a working live demo, see Font Select Demo.

### Font enumeration

The following snippet will query for all available fonts, and log metadata. This could be used, for example, to populate a font-picker control.


```js
async function logFontData() {
  try {
    const availableFonts = await window.queryLocalFonts();
    for (const fontData of availableFonts) {
      console.log(fontData.postscriptName);
      console.log(fontData.fullName);
      console.log(fontData.family);
      console.log(fontData.style);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

### Accessing low-level data

The `blob()` method provides access to low-level SFNT data — this is a font file format that can contain other font formats, such as PostScript, TrueType, OpenType, or Web Open Font Format (WOFF).


```js
async function computeOutlineFormat() {
  try {
    const availableFonts = await window.queryLocalFonts({
      postscriptNames: ["ComicSansMS"],
    });
    for (const fontData of availableFonts) {
      // `blob()` returns a Blob containing valid and complete
      // SFNT-wrapped font data.
      const sfnt = await fontData.blob();
      // Slice out only the bytes we need: the first 4 bytes are the SFNT
      // version info.
      // Spec: https://docs.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
      const sfntVersion = await sfnt.slice(0, 4).text();

      let outlineFormat = "UNKNOWN";
      switch (sfntVersion) {
        case "\x00\x01\x00\x00":
        case "true":
        case "typ1":
          outlineFormat = "truetype";
          break;
        case "OTTO":
          outlineFormat = "cff";
          break;
      }
      console.log("Outline format:", outlineFormat);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

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

| Specification |
| --- |
| Local Font Access # fontdata-interface |

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

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

See also
--------

* Use advanced typography with local fonts
* `@font-face`
File API
========

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

Concepts and Usage
------------------

The File API enables web applications to access files and their contents.

Web applications can access files when the user makes them available, either using a file `<input>` element or via drag and drop.

Sets of files made available in this way are represented as `FileList` objects, which enable a web application to retrieve individual `File` objects. In turn `File` objects provide access to metadata such as the file's name, size, type, and last modified date.

`File` objects can be passed to `FileReader` objects to access the contents of the file. The `FileReader` interface is asynchronous, but a synchronous version, available only in web workers, is provided by the `FileReaderSync` interface.

Interfaces
----------

`Blob`

Represents a "Binary Large Object", meaning a file-like object of immutable, raw data; a `Blob` can be read as text or binary data, or converted into a `ReadableStream` so its methods can be used for processing the data.

`File`

Provides information about a file and allows JavaScript in a web page to access its content.

`FileList`

Returned by the `files` property of the HTML `<input>` element; this lets you access the list of files selected with the `<input type="file">` element. It's also used for a list of files dropped into web content when using the drag and drop API; see the `DataTransfer` object for details on this usage.

`FileReader`

Enables web applications to asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using `File` or `Blob` objects to specify the file or data to read.

`FileReaderSync`

Enables web applications to synchronously read the contents of files (or raw data buffers) stored on the user's computer, using `File` or `Blob` objects to specify the file or data to read.

### Extensions to other interfaces

`URL.createObjectURL()`

Creates a URL that can be used to fetch a `File` or `Blob` object.

`URL.revokeObjectURL()`

Releases an existing object URL which was previously created by calling `URL.createObjectURL()`.

Examples
--------

### Reading a file

In this example, we provide a file `<input>` element, and when the user selects a file, we read the contents of the first file selected as text, and display the result in a `<div>`.

#### HTML


```html
<input type="file" />
<div class="output"></div>
```


#### CSS


```css
.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}
```


#### JavaScript


```js
const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", async () => {
  const [file] = fileInput.files;

  if (file) {
    output.innerText = await file.text();
  }
});
```

### Result

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

| Specification |
| --- |
| File API  |

See also
--------

* `<input type="file">`: the file input element
* `text() method`: .text()
* The `DataTransfer` interface
EXT\_disjoint\_timer\_query extension
=====================================

The **EXT\_disjoint\_timer\_query** extension is part of the WebGL API and provides a way to measure the duration of a set of GL commands, without stalling the rendering pipeline.

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

**Note:** This extension should be available in WebGL1 contexts only. `EXT_disjoint_timer_query_webgl2` is available in WebGL 2 contexts .

 In WebGL 2, the `getQueryObject` was renamed to `getQueryParameter`.
 In WebGL 2, other queries (such as occlusion queries and primitive queries) are possible using `WebGLQuery` objects.


Types
-----

This extension exposes a new type:

`GLuint64EXT`

Unsigned 64-bit integer number.

Constants
---------

This extension exposes seven new constants.

`ext.QUERY_COUNTER_BITS_EXT`

A `GLint` indicating the number of bits used to hold the query result for the given target.

`ext.CURRENT_QUERY_EXT`

A `WebGLQuery` object, which is the currently active query for the given target.

`ext.QUERY_RESULT_EXT`

A `GLuint64EXT` containing the query result.

`ext.QUERY_RESULT_AVAILABLE_EXT`

A `GLboolean` indicating whether or not a query result is available.

`ext.TIME_ELAPSED_EXT`

Elapsed time (in nanoseconds).

`ext.TIMESTAMP_EXT`

The current time.

`ext.GPU_DISJOINT_EXT`

A `GLboolean` indicating whether or not the GPU performed any disjoint operation.

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

This extension exposes eight new methods.

`ext.createQueryEXT()`

Creates a new `WebGLQuery`.

`ext.deleteQueryEXT()`

Deletes a given `WebGLQuery`.

`ext.isQueryEXT()`

Returns `true` if a given object is a valid `WebGLQuery`.

`ext.beginQueryEXT()`

The timer starts when all commands prior to `beginQueryEXT` have been fully executed.

`ext.endQueryEXT()`

The timer stops when all commands prior to `endQueryEXT` have been fully executed.

`ext.queryCounterEXT()`

Records the current time into the corresponding query object.

`ext.getQueryEXT()`

Returns information about a query target.

`ext.getQueryObjectEXT()`

Return the state of a query object.

Examples
--------


```js
const ext = gl.getExtension("EXT\_disjoint\_timer\_query");
```

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

| Specification |
| --- |
| WebGL EXT\_disjoint\_timer\_query Extension Specification  |

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

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

See also
--------

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

**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 **`CSSPositionValue`** interface of the CSS Typed Object Model API represents values for properties that take a position, for example `object-position`.

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

`CSSPositionValue()` 
Non-standard

Deprecated

Creates a new `CSSPositionValue` object.

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

`CSSPositionValue.x` 
Non-standard

Deprecated

Returns the item's position along the web page's horizontal axis.

`CSSPositionValue.y` 
Non-standard

Deprecated

Returns the item's position along the vertical axis.

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

None.

Examples
--------

The following example positions a container `<div>` 5 pixels from the top and 10 pixels from the left of the page.


```js
const replacedEl = document.getElementById("image");
const position = new CSSPositionValue(CSS.px(35), CSS.px(40));

replacedEl.attributeStyleMap.set("object-position", position);
console.log(position.x.value, position.y.value);
console.log(replacedEl.computedStyleMap().get("object-position"));
```


We set the `object-position` property, then check the values returned.
```

#image {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #dededf;
  object-fit: none;
}
```


```
<p>
  Check the developer tools to see the log in the console and to inspect the
  style attribute on the image.
</p>
<img id="image" src="mdn.svg" alt="MDN Logo" />
```

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

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

See also
--------

* `CSSImageValue`
* `CSSKeywordValue`
* `CSSNumericValue`
* `CSSTransformValue`
* `CSSUnparsedValue`
* Using the CSS Typed OM
* CSS Typed Object Model API
PerformanceEntry
================

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

The **`PerformanceEntry`** object encapsulates a single performance metric that is part of the browser's performance timeline.

The Performance API offers built-in metrics which are specialized subclasses of `PerformanceEntry`. This includes entries for resource loading, event timing, first input delay (FID), and more.

A performance entry can also be created by calling the `Performance.mark()` or `Performance.measure()` methods at an explicit point in an application. This allows you to add your own metrics to the performance timeline.

The `PerformanceEntry` instances will always be one of the following subclasses:

* `LargestContentfulPaint`
* `LayoutShift`
* `PerformanceEventTiming`
* `PerformanceLongTaskTiming`
* `PerformanceMark`
* `PerformanceMeasure`
* `PerformanceNavigationTiming`
* `PerformancePaintTiming`
* `PerformanceResourceTiming`
* `PerformanceServerTiming`
* `TaskAttributionTiming`
* `VisibilityStateEntry`
Instance properties
-------------------

`PerformanceEntry.name` Read only 

A string representing the name for a performance entry. The value depends on the subtype.

`PerformanceEntry.entryType` Read only 

A string representing the type of performance metric. For example, "`mark`" when `PerformanceMark` is used.

`PerformanceEntry.startTime` Read only 

A `DOMHighResTimeStamp` representing the starting time for the performance metric.

`PerformanceEntry.duration` Read only 

A `DOMHighResTimeStamp` representing the duration of the performance entry.

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

`PerformanceEntry.toJSON()`

Returns a JSON representation of the `PerformanceEntry` object.

Example
-------

### Working with performance entries

 The following example creates `PerformanceEntry` objects that are of the types `PerformanceMark` and `PerformanceMeasure`.
 The `PerformanceMark` and `PerformanceMeasure` subclasses inherit the `duration`, `entryType`, `name`, and `startTime` properties from `PerformanceEntry` and set them to their appropriate values.


```js
// Place at a location in the code that starts login
performance.mark("login-started");

// Place at a location in the code that finishes login
performance.mark("login-finished");

// Measure login duration
performance.measure("login-duration", "login-started", "login-finished");

function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
```

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

| Specification |
| --- |
| Performance Timeline # dom-performanceentry |

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

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