recursal/MDN huggingface dataset:
GPUCompilationInfo
==================

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

The **`GPUCompilationInfo`** interface of the WebGPU API represents an array of `GPUCompilationMessage` objects generated by the GPU shader module compiler to help diagnose problems with shader code.

`GPUCompilationInfo` is accessed via `GPUShaderModule.getCompilationInfo()`.

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

`messages` 
Experimental
 Read only 

An array of `GPUCompilationMessage` objects, each one containing the details of an individual shader compilation message. Messages can be informational, warnings, or errors.

Examples
--------

In the example below, we have deliberately left a parenthesis out of a function declaration in our shader code:


```js
const shaders = `
struct VertexOut {
 @builtin(position) position : vec4f,
 @location(0) color : vec4f
}

@vertex
fn vertex\_main(@location(0) position: vec4f,
 @location(1) color: vec4f -> VertexOut
{
 var output : VertexOut;
 output.position = position;
 output.color = color;
 return output;
}

@fragment
fn fragment\_main(fragData: VertexOut) -> @location(0) vec4f
{
 return fragData.color;
}
`;
```


When we compile the shader module, we use `getCompilationInfo()` to grab some information about the resulting error:


```js
async function init() {
  // ...

  const shaderModule = device.createShaderModule({
    code: shaders,
  });

  const shaderInfo = await shaderModule.getCompilationInfo();
  const firstMessage = shaderInfo.messages[0];

  console.log(firstMessage.lineNum); // 9
  console.log(firstMessage.message); // "expected ')' for function declaration"
  console.log(firstMessage.type); // "error"
  // ...
}
```

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

| Specification |
| --- |
| WebGPU # gpucompilationinfo |

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

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

See also
--------

* The WebGPU API
UserActivation
==============

The **`UserActivation`** interface provides information about whether a user is currently interacting with the page, or has completed an interaction since page load.

This API is only available in the window context and not exposed to workers.

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

`UserActivation.hasBeenActive` Read only 

Indicates whether the current window has sticky user activation.

`UserActivation.isActive` Read only 

Indicates whether the current window has transient user activation.

Description
-----------

An object of this type is accessed via the `navigator.userActivation` property, and can be used to query information about a window's user activation state.

 A user activation either implies that the user is currently interacting with the page, or has completed an interaction since page load.
 User activation can be triggered by a button click, pointer touch, or some other user interaction with the page.

There are two kinds of window user activation states:

* Transient activation (user is currently interacting with the page) and
* Sticky activation (user has interacted at least once since page load).

See Features gated by user activation for more information and a list of APIs that require either sticky or transient user activation.

Examples
--------

### Checking if a user gesture was recently performed

Use `navigator.userActivation` to access the `UserActivation` object, and then `UserActivation.isActive` to check whether the user is currently interacting with the page (Transient activation).


```js
if (navigator.userActivation.isActive) {
  // proceed to request playing media, for example
}
```

### Checking if a user gesture was ever performed

Use `UserActivation.hasBeenActive` to check whether the user has ever interacted with the page (Sticky activation).


```js
if (navigator.userActivation.hasBeenActive) {
  // proceed with auto-playing an animation, for example
}
```

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

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

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

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

See also
--------

* `navigator.userActivation`
* Features gated by user activation
BackgroundFetchManager
======================

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 **`BackgroundFetchManager`** interface of the Background Fetch API is a map where the keys are background fetch IDs and the values are `BackgroundFetchRegistration` objects.

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

None.

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

`fetch()` 
Experimental

Returns a `Promise` that resolves with a `BackgroundFetchRegistration` object for a supplied array of URLs and `Request` objects.

`get()` 
Experimental

Returns a `Promise` that resolves with the `BackgroundFetchRegistration` associated with the provided `id` or `undefined` if the `id` is not found.

`getIds()` 
Experimental

Returns the IDs of all registered background fetches.

Examples
--------

The example below shows how to get an instance of `BackgroundFetchManager` from a `ServiceWorkerRegistration` object and calls `fetch()` to download an audio file in the background.


```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 \* 1024 \* 1024,
    },
  );
});
```

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

| Specification |
| --- |
| Background Fetch # background-fetch-manager |

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

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

The **`CSSMathInvert`** interface of the CSS\_Object\_Model#css\_typed\_object\_model represents a CSS `calc()` used as `calc(1 / <value>).` It inherits properties and methods from its parent `CSSNumericValue`.

CSSStyleValue

CSSNumericValue

CSSMathValue

CSSMathInvertConstructor
-----------

`CSSMathInvert()`

Creates a new `CSSMathInvert` object.

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

`CSSMathInvert.value` Read only 

Returns a `CSSNumericValue` object.

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 # cssmathinvert |

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

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

The `PushSubscription` interface of the Push API provides a subscription's URL endpoint and allows unsubscribing from a push service.

An instance of this interface can be serialized.

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

`PushSubscription.endpoint` Read only 

A string containing the endpoint associated with the push subscription.

`PushSubscription.expirationTime` Read only 

A `DOMHighResTimeStamp` of the subscription expiration time associated with the push subscription, if there is one, or null otherwise.

`PushSubscription.options` Read only 

An object containing the options used to create the subscription.

`PushSubscription.subscriptionId` 
Deprecated
 Read only 

A string containing the subscription ID associated with the push subscription.

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

`PushSubscription.getKey()`

Returns an `ArrayBuffer` which contains the client's public key, which can then be sent to a server and used in encrypting push message data.

`PushSubscription.toJSON()`

Standard serializer — returns a JSON representation of the subscription properties.

`PushSubscription.unsubscribe()`

Starts the asynchronous process of unsubscribing from the push service, returning a `Promise` that resolves to a boolean value when the current subscription is successfully unregistered.

Example
-------


```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    subscription
      .unsubscribe()
      .then((successful) => {
        // You've successfully unsubscribed
      })
      .catch((e) => {
        // Unsubscribing failed
      });
  });
});
```

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

| Specification |
| --- |
| Push API # pushsubscription-interface |

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

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

See also
--------

* Push API
* Service Worker API
ExtendableMessageEvent
======================

The **`ExtendableMessageEvent`** interface of the Service Worker API represents the event object of a `message` event fired on a service worker (when a message is received on the `ServiceWorkerGlobalScope` from another context) — extends the lifetime of such events.

This interface inherits from the `ExtendableEvent` interface.

Event

ExtendableEvent

ExtendableMessageEventConstructor
-----------

`ExtendableMessageEvent()`

Creates a new `ExtendableMessageEvent` object instance.

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

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

`ExtendableMessageEvent.data` Read only 

Returns the event's data. It can be any data type. If dispatched in `messageerror` event, the property will be `null`.

`ExtendableMessageEvent.origin` Read only 

Returns the origin of the `Client` that sent the message.

`ExtendableMessageEvent.lastEventId` Read only 

Represents, in server-sent events, the last event ID of the event source.

`ExtendableMessageEvent.source` Read only 

Returns a reference to the `Client` object that sent the message.

`ExtendableMessageEvent.ports` Read only 

Returns the array containing the `MessagePort` objects representing the ports of the associated message channel.

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

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

Examples
--------

In the below example a page gets a handle to the `ServiceWorker` object via `ServiceWorkerRegistration.active`, and then calls its `postMessage()` function.


```js
// in the page being controlled
if (navigator.serviceWorker) {
  navigator.serviceWorker.register("service-worker.js");

  navigator.serviceWorker.addEventListener("message", (event) => {
    // event is a MessageEvent object
    console.log(`The service worker sent me a message: ${event.data}`);
  });

  navigator.serviceWorker.ready.then((registration) => {
    registration.active.postMessage("Hi service worker");
  });
}
```


The service worker can receive the message by listening to the `message` event:


```js
// in the service worker
addEventListener("message", (event) => {
  // event is an ExtendableMessageEvent object
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
});
```

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

| Specification |
| --- |
| Service Workers # extendablemessageevent-interface |

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

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

See also
--------

* Using Service Workers
* Service workers basic code example
* Channel Messaging
HTMLHeadingElement
==================

The **`HTMLHeadingElement`** interface represents the different heading elements, `<h1>` through `<h6>`. It inherits methods and properties from the `HTMLElement` interface.

EventTarget

Node

Element

HTMLElement

HTMLHeadingElementInstance properties
-------------------

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

`HTMLHeadingElement.align` 
Deprecated

A string representing an enumerated attribute indicating alignment of the heading with respect to the surrounding context. The possible values are `"left"`, `"right"`, `"justify"`, and `"center"`.

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

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

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

| Specification |
| --- |
| HTML Standard # htmlheadingelement |

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: h1, h2, h3, h4, h5, and h6.
SVGFEComponentTransferElement
=============================

The **`SVGFEComponentTransferElement`** interface corresponds to the `<feComponentTransfer>` element.

EventTarget

Node

Element

SVGElement

SVGFEComponentTransferElementInstance properties
-------------------

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

`SVGFEComponentTransferElement.height` Read only 

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

`SVGFEComponentTransferElement.in1` Read only 

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

`SVGFEComponentTransferElement.result` Read only 

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

`SVGFEComponentTransferElement.width` Read only 

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

`SVGFEComponentTransferElement.x` Read only 

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

`SVGFEComponentTransferElement.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 # InterfaceSVGFEComponentTransferElement |

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

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

See also
--------

* `<feComponentTransfer>`
FontFaceSetLoadEvent
====================

The **`FontFaceSetLoadEvent`** interface of the CSS Font Loading API represents events fired at a `FontFaceSet` after it starts loading font faces.

Events are fired when font loading starts (`loading`), loading completes (`loadingdone`) or there is an error loading one of the fonts (`loadingerror`).

Event

FontFaceSetLoadEventConstructor
-----------

`FontFaceSetLoadEvent()`

Creates a new `FontFaceSetLoadEvent` object.

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

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

`FontFaceSetLoadEvent.fontfaces` Read only 

 Returns an array of `FontFace` instances.
 Depending on the event, the array will contain font faces that are loading (`loading`), have successfully loaded (`loadingdone`), or have failed to load (`loadingerror`).


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

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

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # fontfacesetloadevent |

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

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

See also
--------

* `Document.fonts`
* `WorkerGlobalScope.fonts`
GPUError
========

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

The **`GPUError`** interface of the WebGPU API is the base interface for errors surfaced by `GPUDevice.popErrorScope` and the `uncapturederror` event.

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

`message` 
Experimental
 Read only 

A string providing a human-readable message that explains why the error occurred.

Examples
--------

For usage examples of error objects based on `GPUError`, see:

* `GPUDevice.popErrorScope`
* The `GPUDevice uncapturederror` event
* `GPUInternalError`, `GPUOutOfMemoryError`, and `GPUValidationError`
Specifications
--------------

| Specification |
| --- |
| WebGPU # gpuerror |

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

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

See also
--------

* The WebGPU API
* WebGPU Error Handling best practices
Serial
======

**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 `Serial` interface of the `Web Serial API` provides attributes and methods for finding and connecting to serial ports from a web page.

EventTarget

SerialInstance methods
----------------

`Serial.requestPort()` 
Experimental

Returns a `Promise` that resolves with an instance of `SerialPort` representing the device chosen by the user or rejects if no device was selected.

This method must be called with user activation.

`Serial.getPorts()` 
Experimental

 Returns a `Promise` that resolves with an array of `SerialPort` objects representing serial ports connected to
 the host which the origin has permission to access.


Events
------

The following events are available to `Serial` via event bubbling from `SerialPort`:

`SerialPort` `connect` event

An event fired when a port has been connected to the device.

`SerialPort` `disconnect` event

An event fired when a port has been disconnected from the device.

Examples
--------

The following example shows how a site can check for available ports and allow the user to grant it permission to access additional ports.

On load event listeners are added for the `connect` and `disconnect` events so that the site can react when a device is connected or disconnected from the system. The `getPorts()` method is then called to see which ports are connected that the site already has access to.

If the site doesn't have access to any connected ports it has to wait until it has user activation to proceed. In this example we use a `click` event handler on a button for this task. A filter is passed to `requestPort()` with a USB vendor ID in order to limit the set of devices shown to the user to only USB devices built by a particular manufacturer.


```js
navigator.serial.addEventListener("connect", (e) => {
  // Connect to `e.target` or add it to a list of available ports.
});

navigator.serial.addEventListener("disconnect", (e) => {
  // Remove `e.target` from the list of available ports.
});

navigator.serial.getPorts().then((ports) => {
  // Initialize the list of available ports with `ports` on page load.
});

button.addEventListener("click", () => {
  const usbVendorId = 0xabcd;
  navigator.serial
    .requestPort({ filters: [{ usbVendorId }] })
    .then((port) => {
      // Connect to `port` or add it to the list of available ports.
    })
    .catch((e) => {
      // The user didn't select a port.
    });
});
```

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

| Specification |
| --- |
| Web Serial API # serial-interface |

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

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

The **`Highlight`** interface of the CSS Custom Highlight API is used to represent a collection of `Range` instances to be styled using the API.

To style arbitrary ranges in a page, instantiate a new `Highlight` object, add one or more `Range` objects to it, and register it using the `HighlightRegistry`.

A `Highlight` instance is a `Set`-like object that can hold one or more `Range` objects.

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

`Highlight()`

Returns a newly created `Highlight` object.

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

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

`Highlight.priority`

A number that indicates the priority of this `Highlight` object. When multiple highlights overlap, the browser uses this priority to decide how to style the overlapping parts.

`Highlight.size` Read only 

Returns the number of ranges in the `Highlight` object.

`Highlight.type`

An enumerated `String` used to specify the semantic meaning of the highlight. This allows assistive technologies to include this meaning when exposing the highlight to users.

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

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

`Highlight.add()`

Add a new range to this highlight.

`Highlight.clear()`

Remove all ranges from this highlight.

`Highlight.delete()`

Remove a range from this highlight.

`Highlight.entries()`

Returns a new iterator object that contains each range in the highlight object, in insertion order.

`Highlight.forEach()`

Calls the given callback once for each range in the highlight object, in insertion order.

`Highlight.has()`

Returns a boolean asserting whether a range is present the highlight object or not.

`Highlight.keys()`

An alias for `Highlight.values()`.

`Highlight.values()`

Returns a new iterator object that yields the ranges in the highlight object in insertion order.

Examples
--------

The following example demonstrates how to create ranges, instantiate a new `Highlight` object for them, and register it to be styled on the page:


```js
const parentNode = document.getElementById("foo");

// Create a couple of ranges.
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

// Create a custom highlight for these ranges.
const highlight = new Highlight(range1, range2);

// Register the ranges in the HighlightRegistry.
CSS.highlights.set("my-custom-highlight", highlight);
```


The following CSS code snippet demonstrates how to style the registered custom highlight by using the `::highlight` pseudo-element:


```css
::highlight(my-custom-highlight) {
  background-color: peachpuff;
}
```

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

| Specification |
| --- |
| CSS Custom Highlight API Module Level 1 # highlight |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web