recursal/MDN huggingface dataset:
GPUCommandEncoder: clearBuffer() method
=======================================

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

 The **`clearBuffer()`** method of the
 `GPUCommandEncoder` interface encodes a command that fills a region of a `GPUBuffer` with zeroes.

Syntax
------


```js
clearBuffer(buffer)
clearBuffer(buffer, offset)
clearBuffer(buffer, offset, size)
```

### Parameters

`buffer`

A `GPUBuffer` object representing the buffer to clear.

`offset` Optional

A number representing the offset, in bytes, from the start of the `buffer` to the sub-region to clear. If omitted, `offset` defaults to 0.

`size` Optional

A number representing the size, in bytes, of the sub-region to clear. If omitted, `size` defaults to the `buffer` size - `offset`.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`clearBuffer()`**, otherwise a `GPUValidationError` is generated and the `GPUCommandEncoder` becomes invalid:

* The `buffer`'s `GPUBuffer.usage` includes the `GPUBufferUsage.COPY_DST` flag.
* `offset` and `size` are both multiples of 4.
* The `buffer`'s `GPUBuffer.size` is greater than or equal to `offset` + `size`.
Examples
--------


```js
// ...

const buffer = device.createBuffer({
  size: 1000,
  usage: GPUBufferUsage.MAP\_READ | GPUBufferUsage.COPY\_DST,
});

// Later on

const commandBuffer = device.createCommandEncoder();
commandEncoder.clearBuffer(buffer);

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpucommandencoder-clearbuffer |

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

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

See also
--------

* The WebGPU API
GPUCommandEncoder: resolveQuerySet() method
===========================================

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

 The **`resolveQuerySet()`** method of the
 `GPUCommandEncoder` interface encodes a command that resolves a `GPUQuerySet`, copying the results into a specified `GPUBuffer`.

Syntax
------


```js
resolveQuerySet(querySet, firstQuery, queryCount, destination, destinationOffset)
```

### Parameters

`querySet`

A `GPUQuerySet` object representing the query set to be resolved.

`firstQuery`

The index number of the first query value to be copied over to the buffer.

`queryCount`

The number of queries to be copied over to the buffer, starting from `firstQuery`.

`destination`

A `GPUBuffer` representing the buffer to copy the query values to.

`destinationOffset`

A number representing the offset, in bytes, from the start of the buffer to start writing the query values at.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`resolveQuerySet()`**, otherwise a `GPUValidationError` is generated and the `GPUCommandEncoder` becomes invalid:

* The `destination.buffer`'s `GPUBuffer.usage` includes the `GPUBufferUsage.QUERY_RESOLVE` flag.
* `firstQuery` is smaller than the number of queries in `querySet`.
* `firstQuery` + `queryCount` is smaller than or equal to the number of queries in `querySet`.
* `destinationOffset` is a multiple of 256.
* `destinationOffset` + 8 × `queryCount` is less than or equal to `destination.size`.
Examples
--------


```js
// ...

const queryBuffer = device.createBuffer({
  size: 1024,
  usage: GPUBufferUsage.QUERY\_RESOLVE,
});

const querySet = device.createQuerySet({
  type: "timestamp",
  count: 32,
});

// ...

const commandEncoder = device.createCommandEncoder();

// Write timestamps to querySet
commandEncoder.writeTimestamp(querySet, 0);
// ...
commandEncoder.writeTimestamp(querySet, 1);
// etc.

// ...

commandEncoder.resolveQuerySet(
  querySet,
  0, // First query to write
  16, // Number of queries to count
  queryBuffer,
  0, // Buffer offset
);

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpucommandencoder-resolvequeryset |

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

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

See also
--------

* The WebGPU API
CacheStorage: delete() method
=============================

 The **`delete()`** method of the `CacheStorage` interface finds the `Cache` object matching the `cacheName`, and if found, deletes the `Cache` object and returns a `Promise` that resolves to `true`.
 If no `Cache` object is found, it resolves to `false`.

You can access `CacheStorage` through the global `caches` property.

Syntax
------


```js
delete(cacheName)
```

### Parameters

`cacheName`

The name of the cache you want to delete.

### Return value

 a `Promise` that resolves to `true` if the `Cache`
 object is found and deleted, and `false` otherwise.

Examples
--------

 In this code snippet we wait for an activate event, and then run a
 `waitUntil()` block that clears up any old,
 unused caches before a new service worker is activated. Here we have an array of cache
 names we want to keep (`cachesToKeep`). We return the keys of the caches in
 the `CacheStorage` object using `CacheStorage.keys`, then
 check each key to see if it is in the array. If not, we delete it using
 `delete()`.


```js
this.addEventListener("activate", (event) => {
  const cachesToKeep = ["v2"];

  event.waitUntil(
    caches.keys().then((keyList) =>
      Promise.all(
        keyList.map((key) => {
          if (!cachesToKeep.includes(key)) {
            return caches.delete(key);
          }
        }),
      ),
    ),
  );
});
```

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

| Specification |
| --- |
| Service Workers # cache-storage-delete |

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

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

See also
--------

* Using Service Workers
* `Cache`
* `caches`
CacheStorage: open() method
===========================

 The **`open()`** method of the
 `CacheStorage` interface returns a `Promise` that resolves to
 the `Cache` object matching the `cacheName`.

 You can access `CacheStorage` through the global
 `caches` property.


**Note:** If the specified `Cache` does not exist, a new
 cache is created with that `cacheName` and a `Promise` that
 resolves to this new `Cache` object is returned.


Syntax
------


```js
open(cacheName)
```

### Parameters

`cacheName`

The name of the cache you want to open.

### Return value

A `Promise` that resolves to the requested `Cache` object.

Examples
--------

 This example is from the MDN simple service worker example (see simple service worker running live).
 Here we wait for an `InstallEvent` to fire, then runs
 `waitUntil()` to handle the install process for
 the app. This consists of calling `CacheStorage.open()` to create a new
 cache, then using `Cache.addAll()` to add a series of assets to it.


```js
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll([
          "/",
          "/index.html",
          "/style.css",
          "/app.js",
          "/image-list.js",
          "/star-wars-logo.jpg",
          "/gallery/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ]),
      ),
  );
});
```

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

| Specification |
| --- |
| Service Workers # cache-storage-open |

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

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

See also
--------

* Using Service Workers
* `Cache`
* `caches`
CacheStorage: has() method
==========================

 The **`has()`** method of the `CacheStorage`
 interface returns a `Promise` that resolves to `true` if a
 `Cache` object matches the `cacheName`.

You can access `CacheStorage` through the global `caches` property.

Syntax
------


```js
has(cacheName)
```

### Parameters

`cacheName`

A string representing the name of the `Cache` object you are looking for in the `CacheStorage`.

### Return value

 a `Promise` that resolves to `true` if the cache exists or
 `false` if not.

Examples
--------

 The following example first checks whether a cache called 'v1' exists. If so, we add a
 list of assets to it. If not then we run some kind of cache set-up function.


```js
caches
  .has("v1")
  .then((hasCache) => {
    if (!hasCache) {
      someCacheSetupFunction();
    } else {
      caches.open("v1").then((cache) => cache.addAll(myAssets));
    }
  })
  .catch(() => {
    // Handle exception here.
  });
```

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

| Specification |
| --- |
| Service Workers # cache-storage-has |

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

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

See also
--------

* Using Service Workers
* `Cache`
* `caches`
CacheStorage: keys() method
===========================

 The **`keys()`** method of the `CacheStorage` interface returns a `Promise` that will resolve with an array containing strings corresponding to all of the named `Cache` objects tracked by the `CacheStorage` object in the order they were created.
 Use this method to iterate over a list of all `Cache` objects.

You can access `CacheStorage` through the global `caches` property.

Syntax
------


```js
keys()
```

### Parameters

None.

### Return value

a `Promise` that resolves with an array of the `Cache` names inside the `CacheStorage` object.

Examples
--------

 In this code snippet we wait for an `activate` event, and then run a `waitUntil()` block that clears up any old, unused caches before a new service worker is activated.
 Here we have an allowlist containing the names of the caches we want to keep (`cacheAllowlist`).
 We return the keys of the caches in the `CacheStorage` object using `keys()`, then check each key to see if it is in the allowlist.
 If not, we delete it using `CacheStorage.delete()`.


```js
this.addEventListener("activate", (event) => {
  const cacheAllowlist = ["v2"];

  event.waitUntil(
    caches.keys().then((keyList) =>
      Promise.all(
        keyList.map((key) => {
          if (!cacheAllowlist.includes(key)) {
            return caches.delete(key);
          }
        }),
      ),
    ),
  );
});
```

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

| Specification |
| --- |
| Service Workers # cache-storage-keys |

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

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

See also
--------

* Using Service Workers
* `Cache`
* `caches`
BackgroundFetchManager: getIds() method
=======================================

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 **`getIds()`** method of the `BackgroundFetchManager` interface returns the IDs of all registered background fetches.

Syntax
------


```js
getIds()
```

### Parameters

None.

### Return value

A `Promise` that resolves with an `Array` of `strings`.

### Exceptions

None.

Examples
--------

The following examples shows how to retrieve the IDs of all registered background fetches. With an active service worker, use the `ServiceWorkerRegistration.backgroundFetch` property to access the `BackgroundFetchManager` object and call its `getIds()` method.


```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BackgroundFetchManager: get() method
====================================

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 **`get()`** method of the `BackgroundFetchManager` interface returns a `Promise` that resolves with the `BackgroundFetchRegistration` associated with the provided `id` or `undefined` if the `id` is not found.

Syntax
------


```js
get(id)
```

### Parameters

`id`

The ID of a `backgroundFetchRegistration` defined by calling `fetch()`.

### Return value

A `Promise` that resolves with a `BackgroundFetchRegistration` or `undefined`.

Examples
--------

The following examples shows how to use `get()` to retrieve a `BackgroundFetchRegistration`. With an active `service worker`, use the `ServiceWorkerRegistration.backgroundFetch` to access the `BackgroundFetchManager` object and call its `get()` method.


```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get("my-fetch");
});
// my code block
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaError: message property
============================

 The read-only property **`MediaError.message`** returns a
 human-readable string offering specific
 diagnostic details related to the error described by the `MediaError` object,
 or an empty string (`""`) if no diagnostic information can be determined or
 provided.

Value
-----

 A string providing a detailed, specific explanation of what went
 wrong and possibly how it might be fixed. This is *not* a generic description of
 the `MediaError.code` property's value, but instead goes deeper into the
 specifics of this particular error and its circumstances. If no specific details are
 available, this string is empty.

Examples
--------

 This example creates a `<audio>` element, establishes an error handler
 for it, then lets the user click buttons to choose whether to assign a valid audio file
 or a missing file to the element's `src` attribute. The error
 handler outputs a message to a box onscreen describing the error, including both the
 `code` and the `message`.

Only the relevant parts of the code are displayed; you can see the complete source code here.

 The example creates an `<audio>` element and lets the user assign either
 a valid music file to it, or a link to a file which doesn't exist. This lets us see the
 behavior of the `error` event handler, which is received by an event handler
 we add to the `<audio>` element itself.

The error handler looks like this:


```js
audioElement.onerror = () => {
  let s = "";
  const err = audioElement.error;

  switch (err.code) {
    case MediaError.MEDIA\_ERR\_ABORTED:
      s += "The user canceled the audio.";
      break;
    case MediaError.MEDIA\_ERR\_NETWORK:
      s += "A network error occurred while fetching the audio.";
      break;
    case MediaError.MEDIA\_ERR\_DECODE:
      s += "An error occurred while decoding the audio.";
      break;
    case MediaError.MEDIA\_ERR\_SRC\_NOT\_SUPPORTED:
      s +=
        "The audio is missing or is in a format not supported by your browser.";
      break;
    default:
      s += "An unknown error occurred.";
      break;
  }

  const message = err.message;

  if (message?.length > 0) {
    s += ` ${message}`;
  }

  displayErrorMessage(`<strong>Error ${err.code}:</strong> ${s}<br>`);
};
```


 This gets the `MediaError` object describing the error from the
 `error` property on the
 `HTMLAudioElement` representing the audio player. The error's
 `code` attribute is checked to determine a generic error
 message to display, and, if `message` is not empty, it's appended to provide
 additional details. Then the resulting text is output to the log.

### Result

You can try out this example below, and can see the example in action outside this page here.

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

| Specification |
| --- |
| HTML Standard # dom-mediaerror-message-dev |

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

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

See also
--------

* `MediaError`: Interface used to define the `MediaError.message` property
* `<audio>`, `<video>`
MediaError: msExtendedCode property
===================================

**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.

In the event of an error, the media element's error event will be fired. The element's error property will then contain an **`msExtendedCode`** read-only property with platform-specific error code information.

**`msExtendedCode`** is a read-only proprietary property specific to Internet Explorer and Microsoft Edge.

Value
-----

Type: **long**; The platform specific error code.

Example
-------


```js
const video1 = object.getElementById("video1");

video1.addEventListener(
  "error",
  () => {
    const error = video1.error.msExtendedCode;
    //…
  },
  false,
);

video.addEventListener(
  "canplay",
  () => {
    video1.play();
  },
  false,
);
```
MediaError: code property
=========================

 The read-only property **`MediaError.code`** returns a numeric
 value which represents the kind of error that occurred on a media element. To get a text
 string with specific diagnostic information, see `MediaError.message`.

Value
-----

 A numeric value indicating the general type of error which occurred. The possible
 values are described below, in Media error code constants.

### Media error code constants

| Name | Value | Description |
| --- | --- | --- |
| `MEDIA_ERR_ABORTED` | `1` | 
 The fetching of the associated resource was aborted by the user's
 request.
  |
| `MEDIA_ERR_NETWORK` | `2` | 
 Some kind of network error occurred which prevented the media from being
 successfully fetched, despite having previously been available.
  |
| `MEDIA_ERR_DECODE` | `3` | 
 Despite having previously been determined to be usable, an error
 occurred while trying to decode the media resource, resulting in an
 error.
  |
| `MEDIA_ERR_SRC_NOT_SUPPORTED` | `4` | 
 The associated resource or media provider object (such as a
 `MediaStream`) has been found to be unsuitable.
  |

Examples
--------

 This example creates a `<video>` element, establishes an error handler
 for it, and then sets the element's `src` attribute to the
 video resource to present in the element. The error handler outputs a message


```js
const obj = document.createElement("video");
obj.onerror = () => {
  console.error(`Error with media: ${obj.error.code}`);
};
obj.src = "https://example.com/blahblah.mp4";
```

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

| Specification |
| --- |
| HTML Standard # dom-mediaerror-code-dev |

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

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

See also
--------

* `MediaError`: Interface used to define the `MediaError.code` property
LayoutShiftAttribution: toJSON() method
=======================================

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

The **`toJSON()`** method of the `LayoutShiftAttribution` interface is a *serializer* that returns a JSON representation of the `LayoutShiftAttribution` object.

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

A JSON object that is the serialization of the `LayoutShiftAttribution` object.

Examples
--------

The following example prints a JSON representation of the first item in `LayoutShift.sources` to the console.


```js
new PerformanceObserver((list) => {
  for (const { sources } of list.getEntries()) {
    if (sources) {
      console.log(sources[0].toJSON());
    }
  }
}).observe({ type: "layout-shift", buffered: true });
```

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

| Specification |
| --- |
| Layout Instability # sec-layout-shift-attribution |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
LayoutShiftAttribution: currentRect property
============================================

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

The **`currentRect`** read-only property of the `LayoutShiftAttribution` interface returns a `DOMRectReadOnly` object representing the position of the element after the shift.

Value
-----

A `DOMRectReadOnly` object.

Examples
--------

The following example prints the `currentRect` of the first item in `LayoutShift.sources` to the console.


```js
new PerformanceObserver((list) => {
  for (const { sources } of list.getEntries()) {
    if (sources) {
      console.log(sources[0].currentRect);
    }
  }
}).observe({ type: "layout-shift", buffered: true });
```

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

| Specification |
| --- |
| Layout Instability # dom-layoutshiftattribution-currentrect |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
LayoutShiftAttribution: node property
=====================================

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

The **`node`** read-only property of the `LayoutShiftAttribution` interface returns a `Node` representing the object that has shifted.

Value
-----

A `Node`.

Examples
--------

The following example prints the `node` of the first item in `LayoutShift.sources` to the console.


```js
new PerformanceObserver((list) => {
  for (const { sources } of list.getEntries()) {
    if (sources) {
      console.log(sources[0].node);
    }
  }
}).observe({ type: "layout-shift", buffered: true });
```

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

| Specification |
| --- |
| Layout Instability # dom-layoutshiftattribution-node |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
LayoutShiftAttribution: previousRect property
=============================================

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

The **`previousRect`** read-only property of the `LayoutShiftAttribution` interface returns a `DOMRectReadOnly` object representing the position of the element before the shift.

Value
-----

A `DOMRectReadOnly` object.

Examples
--------

The following example prints the `previousRect` of the first item in `LayoutShift.sources` to the console.


```js
new PerformanceObserver((list) => {
  for (const { sources } of list.getEntries()) {
    if (sources) {
      console.log(sources[0].previousRect);
    }
  }
}).observe({ type: "layout-shift", buffered: true });
```

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

| Specification |
| --- |
| Layout Instability # dom-layoutshiftattribution-previousrect |

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

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