WorkerNavigator: appName property - Web APIs

WorkerNavigator: appName property
=================================

**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 value of the **`WorkerNavigator.appName`** property is always
 "`Netscape`", in any browser. This property is kept only for compatibility
 purposes.

**Note:** Do not rely on this property to return a real browser name. All browsers return "`Netscape`" as the value of this property.

Value
-----

The string "`Netscape`".

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

| Specification |
| --- |
| HTML Standard # dom-navigator-appname-dev |

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

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

See also
--------

* `WorkerNavigator.appCodeName`
* `WorkerNavigator.product`


WorkerNavigator: product property - Web APIs

WorkerNavigator: product property
=================================

**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 value of the **`WorkerNavigator.product`** property is always
 "`Gecko`", in any browser. This property is kept only for compatibility
 purposes.

**Note:** Do not rely on this property to return a real product name. All browsers return "`Gecko`" as the value of this property.

Value
-----

The string "`Gecko`".

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

| Specification |
| --- |
| HTML Standard # dom-navigator-product-dev |

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

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

See also
--------

* `WorkerNavigator.appCodeName`
* `WorkerNavigator.appName`


WorkerNavigator: clearAppBadge() method - Web APIs

WorkerNavigator: clearAppBadge() method
=======================================

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

The **`clearAppBadge()`** method of the `WorkerNavigator` interface clears a badge on the current app's icon by setting it to `nothing`. The value `nothing` indicates that no badge is currently set, and the status of the badge is *cleared*.

Syntax
------

```js
clearAppBadge()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `undefined`.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the document is not fully active.

`SecurityError` `DOMException`

Thrown if the call was blocked by the same-origin policy.

`NotAllowedError` `DOMException`

Thrown if `PermissionStatus.state` is not `granted`.

Examples
--------

Once all messages in an application have been read, call `clearAppBadge()` to clear the badge and remove the notification.

```js
navigator.clearAppBadge();
```

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

#### No specification found

No specification data found for `api.WorkerNavigator.clearAppBadge`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* Badging for app icons


WorkerNavigator: connection property - Web APIs

WorkerNavigator: connection property
====================================

 The **`WorkerNavigator.connection`** read-only property returns
 a `NetworkInformation` object containing information about the system's
 connection, such as the current bandwidth of the user's device or whether the connection
 is metered. This could be used to select high definition content or low definition
 content based on the user's connection.

Value
-----

A `NetworkInformation` object.

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

| Specification |
| --- |
| Network Information API # connection-attribute |

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

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

See also
--------

* Online and offline events
* Network Information API


NavigationPreloadManager: enable() method - Web APIs

NavigationPreloadManager: enable() method
=========================================

 The **`enable()`** method of the `NavigationPreloadManager` interface is used to enable preloading of resources managed by the service worker.
 It returns a promise that resolves with `undefined`.

The method should be called in the service worker's `activate` event handler, which ensures it is called before any `fetch` event handler can fire.

Syntax
------

```js
enable()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `undefined`.

### Exceptions

`InvalidStateError` `DOMException`

There is no active worker associated with the registration to which this `NavigationPreloadManager` belongs.

Examples
--------

The code below shows how to enable preloading, after first using `ServiceWorkerRegistration.navigationPreload` to test that it is supported.

```js
addEventListener("activate", (event) => {
  event.waitUntil(
    (async () => {
      if (self.registration.navigationPreload) {
        // Enable navigation preloads!
        await self.registration.navigationPreload.enable();
      }
    })(),
  );
});
```

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

| Specification |
| --- |
| Service Workers # dom-navigationpreloadmanager-enable |

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

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

See also
--------

`NavigationPreloadManager.disable()`


NavigationPreloadManager: setHeaderValue() method - Web APIs

NavigationPreloadManager: setHeaderValue() method
=================================================

 The **`setHeaderValue()`** method of the `NavigationPreloadManager` interface sets the value of the `Service-Worker-Navigation-Preload` header that will be sent with requests resulting from a `fetch()` operation made during service worker navigation preloading.
 It returns an empty `Promise` that resolves with `undefined`.

 The presence of the `Service-Worker-Navigation-Preload` header in preloading requests allows servers to configure the returned resource differently for preloading fetch requests than from normal fetch requests.
 The default directive is set to `true`: this method allows the possibility of configuring multiple different responses to preload requests.

**Note:** If a different response may result from setting this header, the server must set `Vary: Service-Worker-Navigation-Preload` to ensure that the different responses are cached.

Syntax
------

```js
setHeaderValue(value)
```

### Parameters

`value`

An arbitrary string value, which the target server uses to determine what should returned for the requested resource.

### Return value

A `Promise` that resolves with `undefined`.

### Exceptions

`InvalidStateError` `DOMException`

There is no active worker associated with the registration to which this `NavigationPreloadManager` belongs.

Examples
--------

The code below demonstrates how the value might be set.

```js
navigator.serviceWorker.ready
  .then((registration) =>
    registration.navigationPreload.setHeaderValue(newValue),
  )
  .then(() => console.log("Done!"))
  .catch((e) =>
    console.error(`NavigationPreloadManager not supported: ${e.message}`),
  );
```

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

| Specification |
| --- |
| Service Workers # dom-navigationpreloadmanager-setheadervalue |

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

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


NavigationPreloadManager: disable() method - Web APIs

NavigationPreloadManager: disable() method
==========================================

 The **`disable()`** method of the `NavigationPreloadManager` interface halts the automatic preloading of service-worker-managed resources previously started using `enable()`
 It returns a promise that resolves with `undefined`.

The method may be called in the service worker's `activate` event handler (before the `fetch` event handler can be called).

Syntax
------

```js
disable()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `undefined`.

### Exceptions

`InvalidStateError` `DOMException`

There is no active worker associated with the registration to which this `NavigationPreloadManager` belongs.

Examples
--------

The code below shows how to disable preloading, after first using `ServiceWorkerRegistration.navigationPreload` to test that it is supported.

```js
addEventListener("activate", (event) => {
  event.waitUntil(
    (async () => {
      if (self.registration.navigationPreload) {
        // Disable navigation preloads!
        await self.registration.navigationPreload.disable();
      }
    })(),
  );
});
```

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

| Specification |
| --- |
| Service Workers # dom-navigationpreloadmanager-disable |

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

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

See also
--------

`NavigationPreloadManager.enable()`


NavigationPreloadManager: getState() method - Web APIs

NavigationPreloadManager: getState() method
===========================================

The **`getState()`** method of the `NavigationPreloadManager` interface returns a `Promise` that resolves to an object with properties that indicate whether preload is enabled and what value will be sent in the `Service-Worker-Navigation-Preload` HTTP header.

Syntax
------

```js
getState()
```

### Parameters

None.

### Return value

A `Promise` that resolves with an object that has the following properties:

`enabled`

`true` if preloading is enabled, and `false` otherwise.

`headerValue`

 A string containing the value that will be sent in the `Service-Worker-Navigation-Preload` HTTP header following a preloading `fetch()`.
 This defaults to `true` unless the value was changed using `NavigationPreloadManager.setHeaderValue()`.

### Exceptions

`InvalidStateError` `DOMException`

There is no active worker associated with the registration to which this `NavigationPreloadManager` belongs.

Examples
--------

The code below shows a request for the current state, made once the service worker is ready.

```js
navigator.serviceWorker.ready
  .then((registration) => registration.navigationPreload.getState())
  .then((state) => {
    console.log(state.enabled); // boolean
    console.log(state.headerValue); // string
  })
  .catch((e) =>
    console.error(`NavigationPreloadManager not supported: ${e.message}`),
  );
```

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

| Specification |
| --- |
| Service Workers # dom-navigationpreloadmanager-getstate |

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

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


CSSTransition: transitionProperty property - Web APIs

CSSTransition: transitionProperty property
==========================================

 The **`transitionProperty`** property of the
 `CSSTransition` interface returns the **expanded transition property
name** of the transition. This is the longhand CSS property for which the
 transition was generated.

Value
-----

A string.

Examples
--------

### Returning the transitionProperty

 The transition in the following example changes the width of the box on hover. Calling
 `Element.getAnimations()` returns an array of all `Animation`
 objects. In our case this returns a `CSSTransition` object, representing the
 animation created. The `transitionProperty` property returns the property
 that the transition is created for, which is `width`.

```css
.box {
  background-color: #165baa;
  color: #fff;
  width: 100px;
  height: 100px;
  transition: width 4s;
}

.box:hover {
  width: 200px;
}
```

```js
const item = document.querySelector(".box");
item.addEventListener("transitionrun", () => {
  let animations = document.querySelector(".box").getAnimations();
  console.log(animations[0].propertyName);
});
```

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

| Specification |
| --- |
| CSS Transitions Level 2 # dom-csstransition-transitionproperty |

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

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


GPUCompilationMessage: offset property - Web APIs

GPUCompilationMessage: offset property
======================================

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

 The **`offset`** read-only property of the
 `GPUCompilationMessage` interface is a number representing the offset from the start of the shader code to the exact point, or the start of the relevant substring, that the message corresponds to.

Value
-----

A number.

To be precise, `offset` is the number of UTF-16 code units from the beginning of the shader code to the exact point or start of the relevant substring that the message corresponds to.

If the message does not correspond to a specific code position (perhaps it refers to the whole of the shader code), `offset` will be 0.

Examples
--------

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

  const shaderInfo = await shaderModule.getCompilationInfo();
  const firstMessage = shaderInfo.messages[0];
  console.log(firstMessage.offset);
  // ...
}
```

See the main `GPUCompilationInfo` page for a more detailed example.

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

| Specification |
| --- |
| WebGPU # dom-gpucompilationmessage-offset |

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

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

See also
--------

* The WebGPU API


GPUCompilationMessage: lineNum property - Web APIs

GPUCompilationMessage: lineNum property
=======================================

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

 The **`lineNum`** read-only property of the
 `GPUCompilationMessage` interface is a number representing the line number in the shader code that the message corresponds to.

Value
-----

A number.

Note that:

* If the message corresponds to a substring, `lineNum` refers to the line number that the substring begins on.
* If the message does not correspond to a specific line of code (perhaps it refers to the whole of the shader code), `lineNum` will be 0.
* Values are one-based — a value of 1 refers to the first line of code.
* Lines are delimited by line breaks. In WGSL, a specific list of characters is defined as line breaks.
Examples
--------

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

  const shaderInfo = await shaderModule.getCompilationInfo();
  const firstMessage = shaderInfo.messages[0];
  console.log(firstMessage.lineNum);
  // ...
}
```

See the main `GPUCompilationInfo` page for a more detailed example.

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

| Specification |
| --- |
| WebGPU # dom-gpucompilationmessage-linenum |

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

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

See also
--------

* The WebGPU API


GPUCompilationMessage: type property - Web APIs

GPUCompilationMessage: type property
====================================

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

 The **`type`** read-only property of the
 `GPUCompilationMessage` interface is an enumerated value representing the type of the message. Each type represents a different severity level.

Value
-----

A enumerated value. Possible values are:

`"error"`

A shader-creation error, which stops successful compilation.

`"info"`

A purely informative message, which is low severity.

`"warning"`

A warning about an issue that will not stop successful compilation, but merits attention by the developer. An example is usage of deprecated functions or syntax.

Examples
--------

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

  const shaderInfo = await shaderModule.getCompilationInfo();
  const firstMessage = shaderInfo.messages[0];
  console.log(firstMessage.type);
  // ...
}
```

See the main `GPUCompilationInfo` page for a more detailed example.

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

| Specification |
| --- |
| WebGPU # dom-gpucompilationmessage-type |

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

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

See also
--------

* The WebGPU API


GPUCompilationMessage: message property - Web APIs

GPUCompilationMessage: message property
=======================================

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

 The **`message`** read-only property of the
 `GPUCompilationMessage` interface is a string representing human-readable message text.

Value
-----

A string.

Examples
--------

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

  const shaderInfo = await shaderModule.getCompilationInfo();
  const firstMessage = shaderInfo.messages[0];
  console.log(firstMessage.message);
  // ...
}
```

See the main `GPUCompilationInfo` page for a more detailed example.

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

| Specification |
| --- |
| WebGPU # dom-gpucompilationmessage-message |

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

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

See also
--------

* The WebGPU API


GPUCompilationMessage: linePos property - Web APIs

GPUCompilationMessage: linePos property
=======================================

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

 The **`linePos`** read-only property of the
 `GPUCompilationMessage` interface is a number representing the position in the code line that the message corresponds to. This could be an exact point, or the start of the relevant substring.

Value
-----

A number.

To be precise, `linePos` is the number of UTF-16 code units from the beginning of the line to the exact point or start of the relevant substring that the message corresponds to.

Note that:

* If the message corresponds to a substring, `linePos` refers to the first UTF-16 code unit of the substring.
* If the message does not correspond to a specific code position (perhaps it refers to the whole of the shader code), `linePos` will be 0.
* Values are one-based — a value of 1 refers to the first code unit of the line.
Examples
--------

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

  const shaderInfo = await shaderModule.getCompilationInfo();
  const firstMessage = shaderInfo.messages[0];
  console.log(firstMessage.linePos);
  // ...
}
```

See the main `GPUCompilationInfo` page for a more detailed example.

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

| Specification |
| --- |
| WebGPU # dom-gpucompilationmessage-linepos |

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

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

See also
--------

* The WebGPU API


GPUCompilationMessage: length property - Web APIs

GPUCompilationMessage: length property
======================================

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

 The **`length`** read-only property of the
 `GPUCompilationMessage` interface is a number representing the length of the substring that the message corresponds to.

Value
-----

A number.

To be precise, `length` is the number of UTF-16 code units in the shader code substring that the message corresponds to. If the message corresponds to a single point rather than a substring, `length` will be 0.

Examples
--------

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

  const shaderInfo = await shaderModule.getCompilationInfo();
  const firstMessage = shaderInfo.messages[0];
  console.log(firstMessage.length);
  // ...
}
```

See the main `GPUCompilationInfo` page for a more detailed example.

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

| Specification |
| --- |
| WebGPU # dom-gpucompilationmessage-length |

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

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

See also
--------

* The WebGPU API


XRJointSpace: jointName property - Web APIs

XRJointSpace: jointName property
================================

The read-only **`jointName`** property of the `XRJointSpace` interface contains the name of the joint it tracks.

Value
-----

A string indicating the name of the joint. See the list of hand joints on the `XRHand` page.

Examples
--------

### Getting the `jointName`

Given a `XRJointSpace`, the `jointName` property will contain the hand joint name.

```js
navigator.xr
  .requestSession({ optionalFeatures: ["hand-tracking"] })
  .then(/\*\* … \*/);

function renderFrame(session, frame) {
  // …

  for (const inputSource of session.inputSources) {
    if (inputSource.hand) {
      const indexFingerTipJoint = inputSource.hand.get("index-finger-tip"); // XRJointSpace
      indexFingerTipJoint.jointName; // "index-finger-tip"
    }
  }
}
```

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

| Specification |
| --- |
| WebXR Hand Input Module - Level 1 # dom-xrjointspace-jointname |

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

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

See also
--------

* `XRHand`


GPURenderBundleEncoder: drawIndexed() method - Web APIs

GPURenderBundleEncoder: drawIndexed() method
============================================

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

 The **`drawIndexed()`** method of the
 `GPURenderBundleEncoder` interface draws indexed primitives based on the vertex and index buffers provided by `setVertexBuffer()` and `setIndexBuffer()`.

**Note:** This method is functionally identical to its equivalent on `GPURenderPassEncoder` — `drawIndexed()`.

Syntax
------

```js
drawIndexed(indexCount)
drawIndexed(indexCount, instanceCount)
drawIndexed(indexCount, instanceCount, firstIndex)
drawIndexed(indexCount, instanceCount, firstIndex, baseVertex)
drawIndexed(indexCount, instanceCount, firstIndex, baseVertex, firstInstance)
```

### Parameters

`indexCount`

A number defining the number of indices to draw.

`instanceCount` Optional

A number defining the number of instances to draw. If omitted, `instanceCount` defaults to 1.

`firstIndex` Optional

A number defining the offset into the index buffer, in indices, to begin drawing from. If omitted, `firstIndex` defaults to 0.

`baseVertex` Optional

A number added to each index value before indexing into the vertex buffers. If omitted, `baseVertex` defaults to 0.

`firstInstance` Optional

A number defining the first instance to draw. If omitted, `firstInstance` defaults to 0.

### Return value

None (`Undefined`).

Examples
--------

```js
// ...

const bundleEncoder = device.createRenderBundleEncoder(descriptor);

bundleEncoder.setPipeline(pipeline);
bundleEncoder.setBindGroup(0, sceneBindGroupForRender);
bundleEncoder.setBindGroup(1, modelBindGroup);
bundleEncoder.setVertexBuffer(0, vertexBuffer);
bundleEncoder.setIndexBuffer(indexBuffer, "uint16");
bundleEncoder.drawIndexed(indexCount);

const renderBundle = bundleEncoder.finish();

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpurendercommandsmixin-drawindexed |

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

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

See also
--------

* The WebGPU API


GPURenderBundleEncoder: draw() method - Web APIs

GPURenderBundleEncoder: draw() method
=====================================

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

 The **`draw()`** method of the
 `GPURenderBundleEncoder` interface draws primitives based on the vertex buffers provided by `setVertexBuffer()`.

**Note:** This method is functionally identical to its equivalent on `GPURenderPassEncoder` — `draw()`.

Syntax
------

```js
draw(vertexCount)
draw(vertexCount, instanceCount)
draw(vertexCount, instanceCount, firstVertex)
draw(vertexCount, instanceCount, firstVertex, firstInstance)
```

### Parameters

`vertexCount`

A number defining the number of vertices to draw.

`instanceCount` Optional

A number defining the number of instances to draw. If omitted, `instanceCount` defaults to 1.

`firstVertex` Optional

A number defining the offset into the vertex buffers, in vertices, to begin drawing from. If omitted, `firstVertex` defaults to 0.

`firstInstance` Optional

A number defining the first instance to draw. If omitted, `firstInstance` defaults to 0.

### Return value

None (`Undefined`).

Examples
--------

```js
function recordRenderPass(
  passEncoder: GPURenderBundleEncoder | GPURenderPassEncoder // TypeScript
) {
  if (settings.dynamicOffsets) {
    passEncoder.setPipeline(dynamicPipeline);
  } else {
    passEncoder.setPipeline(pipeline);
  }
  passEncoder.setVertexBuffer(0, vertexBuffer);
  passEncoder.setBindGroup(0, timeBindGroup);
  const dynamicOffsets = [0];
  for (let i = 0; i < numTriangles; ++i) {
    if (settings.dynamicOffsets) {
      dynamicOffsets[0] = i \* alignedUniformBytes;
      passEncoder.setBindGroup(1, dynamicBindGroup, dynamicOffsets);
    } else {
      passEncoder.setBindGroup(1, bindGroups[i]);
    }
    passEncoder.draw(3, 1, 0, 0);
  }
}
```

The above snippet is taken from the WebGPU Samples Animometer example.

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

| Specification |
| --- |
| WebGPU # dom-gpurendercommandsmixin-draw |

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

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

See also
--------

* The WebGPU API


GPURenderBundleEncoder: setVertexBuffer() method - Web APIs

GPURenderBundleEncoder: setVertexBuffer() method
================================================

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

 The **`setVertexBuffer()`** method of the
 `GPURenderBundleEncoder` interface sets or unsets the current `GPUBuffer` for the given slot that will provide vertex data for subsequent drawing commands.

**Note:** This method is functionally identical to its equivalent on `GPURenderPassEncoder` — `setVertexBuffer()`.

Syntax
------

```js
setVertexBuffer(slot, buffer, offset, size)
```

### Parameters

`slot`

A number referencing the vertex buffer slot to set the vertex buffer for.

`buffer`

A `GPUBuffer` representing the buffer containing the vertex data to use for subsequent drawing commands, or `null`, in which case any previously-set buffer in the given slot is unset.

`offset` Optional

A number representing the offset, in bytes, into `buffer` where the vertex data begins. If omitted, `offset` defaults to 0.

`size` Optional

A number representing the size, in bytes, of the vertex data contained in `buffer`. If omitted, `size` defaults to the `buffer`'s `GPUBuffer.size` - `offset`.

### Return value

None (`Undefined`).

### Validation

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

* `buffer`'s `GPUBuffer.usage` contains the `GPUBufferUsage.VERTEX` flag.
* `slot` is less than the `GPUDevice`'s `maxVertexBuffers` limit.
* `offset` + `size` is less than or equal to the `buffer`'s `GPUBuffer.size`.
* `offset` is a multiple of 4.
Examples
--------

### Set vertex buffer

```js
function recordRenderPass(
  passEncoder: GPURenderBundleEncoder | GPURenderPassEncoder // TypeScript
) {
  if (settings.dynamicOffsets) {
    passEncoder.setPipeline(dynamicPipeline);
  } else {
    passEncoder.setPipeline(pipeline);
  }
  passEncoder.setVertexBuffer(0, vertexBuffer);
  passEncoder.setBindGroup(0, timeBindGroup);
  const dynamicOffsets = [0];
  for (let i = 0; i < numTriangles; ++i) {
    if (settings.dynamicOffsets) {
      dynamicOffsets[0] = i \* alignedUniformBytes;
      passEncoder.setBindGroup(1, dynamicBindGroup, dynamicOffsets);
    } else {
      passEncoder.setBindGroup(1, bindGroups[i]);
    }
    passEncoder.draw(3, 1, 0, 0);
  }
}
```

The above snippet is taken from the WebGPU Samples Animometer example.

### Unset vertex buffer

```js
// Set vertex buffer in slot 0
passEncoder.setVertexBuffer(0, vertexBuffer);

// Later, unset vertex buffer in slot 0
passEncoder.setVertexBuffer(0, null);
```

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

| Specification |
| --- |
| WebGPU # dom-gpurendercommandsmixin-setvertexbuffer |

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

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

See also
--------

* The WebGPU API


GPURenderBundleEncoder: finish() method - Web APIs

GPURenderBundleEncoder: finish() method
=======================================

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

 The **`finish()`** method of the
 `GPURenderBundleEncoder` interface completes recording of the current render bundle command sequence, returning a `GPURenderBundle` object that can be passed into a `GPURenderPassEncoder.executeBundles()` call to execute those commands in a specific render pass.

Syntax
------

```js
finish(descriptor)
```

### Parameters

`descriptor` Optional

An object containing the following properties:

`label` Optional

A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

### Return value

A `GPURenderBundle` object instance.

### Validation

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

* The `GPURenderBundleEncoder` is open (i.e. not already ended via a `finish()` call).
* The debug stack for the current render pass is empty (i.e. no render pass debug group is currently open, as opened by `pushDebugGroup()`).
Examples
--------

```js
const renderBundleEncoder = device.createRenderBundleEncoder({
  colorFormats: [presentationFormat],
});
recordRenderPass(renderBundleEncoder);
const renderBundle = renderBundleEncoder.finish();
```

The above snippet is taken from the WebGPU Samples Animometer example.

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

| Specification |
| --- |
| WebGPU # dom-gpurenderbundleencoder-finish |

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

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

See also
--------

* The WebGPU API


GPURenderBundleEncoder: popDebugGroup() method - Web APIs

GPURenderBundleEncoder: popDebugGroup() method
==============================================

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

 The **`popDebugGroup()`** method of the
 `GPURenderBundleEncoder` interface ends a render bundle debug group, which is begun with a `pushDebugGroup()` call.

This could be used for telemetry, or may be utilized in `GPUError` messages, browser dev tools, or other services in the future to help with debugging.

**Note:** This method is functionally identical to its equivalent on `GPURenderPassEncoder` — `popDebugGroup()`.

Syntax
------

```js
popDebugGroup()
```

### Parameters

None.

### Return value

None (`Undefined`).

### Validation

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

* The render bundle encoder's debug stack is not empty (i.e. at least one render bundle debug group was previously started with `pushDebugGroup()`).
Examples
--------

```js
// ...

const bundleEncoder = device.createRenderBundleEncoder(renderBundleDescriptor);

bundleEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group

bundleEncoder.setPipeline(renderPipeline);
bundleEncoder.setVertexBuffer(0, vertexBuffer);
bundleEncoder.draw(3);

bundleEncoder.popDebugGroup();

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpudebugcommandsmixin-popdebuggroup |

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

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

See also
--------

* The WebGPU API


GPURenderBundleEncoder: drawIndirect() method - Web APIs

GPURenderBundleEncoder: drawIndirect() method
=============================================

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

 The **`drawIndirect()`** method of the
 `GPURenderBundleEncoder` interface draws primitives using parameters read from a `GPUBuffer`.

**Note:** This method is functionally identical to its equivalent on `GPURenderPassEncoder` — `drawIndirect()`.

Syntax
------

```js
drawIndirect(indirectBuffer, indirectOffset)
```

### Parameters

`indirectBuffer`

A `GPUBuffer` containing the `vertexCount`, `instanceCount`, `firstVertex`, and `firstInstance` values needed to carry out the drawing operation. The buffer must contain a tightly packed block of four 32-bit unsigned integer values representing the values (16 bytes total), given in the same order as the arguments for `GPURenderBundleEncoder.draw()`. So for example:

```js
const uint32 = new Uint32Array(4);
uint32[0] = 3; // The vertexCount value
uint32[1] = 1; // The instanceCount value
uint32[2] = 0; // The firstVertex value
uint32[3] = 0; // The firstInstance value

// Write values into a GPUBuffer
device.queue.writeBuffer(buffer, 0, uint32, 0, uint32.length);
```

`indirectOffset`

The offset, in bytes, into `indirectBuffer` where the value data begins.

### Return value

None (`Undefined`).

### Validation

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

* `indirectBuffer`'s `GPUBuffer.usage` contains the `GPUBufferUsage.INDIRECT` flag.
* `indirectOffset` + the total size specified by the value parameters in the `indirectBuffer` is less than or equal to the `indirectBuffer`'s `GPUBuffer.size`.
* `indirectOffset` is a multiple of 4.
Examples
--------

```js
// ...

// Create GPURenderBundleEncoder
const bundleEncoder = device.createRenderBundleEncoder(descriptor);

// Set pipeline and vertex buffer
bundleEncoder.setPipeline(renderPipeline);
bundleEncoder.setVertexBuffer(0, vertexBuffer);

// Create drawIndirect values
const uint32 = new Uint32Array(4);
uint32[0] = 3;
uint32[1] = 1;
uint32[2] = 0;
uint32[3] = 0;

// Create a GPUBuffer and write the draw values into it
const drawValues = device.createBuffer({
  size: 16,
  usage: GPUBufferUsage.COPY\_DST | GPUBufferUsage.INDIRECT,
});
device.queue.writeBuffer(drawValues, 0, uint32, 0, uint32.length);

// Draw the vertices
bundleEncoder.drawIndirect(drawValues, 0);

// End the bundle recording
const renderBundle = bundleEncoder.finish();

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpurendercommandsmixin-drawindirect |

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

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

See also
--------

* The WebGPU API


GPURenderBundleEncoder: drawIndexedIndirect() method - Web APIs

GPURenderBundleEncoder: drawIndexedIndirect() method
====================================================

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

 The **`drawIndexedIndirect()`** method of the
 `GPURenderBundleEncoder` interface draws indexed primitives using parameters read from a `GPUBuffer`.

**Note:** This method is functionally identical to its equivalent on `GPURenderPassEncoder` — `drawIndexedIndirect()`.

Syntax
------

```js
drawIndexedIndirect(indirectBuffer, indirectOffset)
```

### Parameters

`indirectBuffer`

A `GPUBuffer` containing the `indexCount`, `instanceCount`, `firstIndex`, `baseVertex`, and `firstInstance` values needed to carry out the drawing operation. The buffer must contain a tightly packed block of five 32-bit unsigned integer values representing the values (20 bytes total), given in the same order as the arguments for `GPURenderBundleEncoder.drawIndexed()`. So for example:

```js
const uint32 = new Uint32Array(5);
uint32[0] = 3; // The indexCount value
uint32[1] = 1; // The instanceCount value
uint32[2] = 0; // The firstIndex value
uint32[3] = 0; // The baseVertex value
uint32[4] = 0; // The firstInstance value

// Write values into a GPUBuffer
device.queue.writeBuffer(buffer, 0, uint32, 0, uint32.length);
```

`indirectOffset`

The offset, in bytes, into `indirectBuffer` where the value data begins.

### Return value

None (`Undefined`).

### Validation

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

* `indirectBuffer`'s `GPUBuffer.usage` contains the `GPUBufferUsage.INDIRECT` flag.
* `indirectOffset` + the total size specified by the value parameters in the `indirectBuffer` is less than or equal to the `indirectBuffer`'s `GPUBuffer.size`.
* `indirectOffset` is a multiple of 4.
Examples
--------

```js
// ...

// Create GPURenderBundleEncoder
const bundleEncoder = device.createRenderBundleEncoder(descriptor);

// Set pipeline and vertex buffer
bundleEncoder.setPipeline(renderPipeline);
bundleEncoder.setVertexBuffer(0, vertexBuffer);
bundleEncoder.setIndexBuffer(indexBuffer, "uint16");

// Create drawIndexedIndirect values
const uint32 = new Uint32Array(5);
uint32[0] = 3;
uint32[1] = 1;
uint32[2] = 0;
uint32[3] = 0;
uint32[4] = 0;

// Create a GPUBuffer and write the draw values into it
const drawValues = device.createBuffer({
  size: 20,
  usage: GPUBufferUsage.COPY\_DST | GPUBufferUsage.INDIRECT,
});
device.queue.writeBuffer(drawValues, 0, uint32, 0, uint32.length);

// Draw the vertices
bundleEncoder.drawIndexedIndirect(drawValues, 0);

// End the bundle recording
const renderBundle = bundleEncoder.finish();

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpurendercommandsmixin-drawindexedindirect |

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

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

See also
--------

* The WebGPU API


GPURenderBundleEncoder: setIndexBuffer() method - Web APIs

GPURenderBundleEncoder: setIndexBuffer() method
===============================================

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

 The **`setIndexBuffer()`** method of the
 `GPURenderBundleEncoder` interface sets the current `GPUBuffer` that will provide index data for subsequent drawing commands.

**Note:** This method is functionally identical to its equivalent on `GPURenderPassEncoder` — `setIndexBuffer()`.

Syntax
------

```js
setIndexBuffer(buffer, indexFormat, offset, size)
```

### Parameters

`buffer`

A `GPUBuffer` representing the buffer containing the index data to use for subsequent drawing commands.

`indexFormat`

An enumerated value that defines the format of the index data contained in `buffer`. Possible values are:

* `"uint16"`
* `"uint32"`

`offset` Optional

A number representing the offset, in bytes, into `buffer` where the index data begins. If omitted, `offset` defaults to 0.

`size` Optional

A number representing the size, in bytes, of the index data contained in `buffer`. If omitted, `size` defaults to the `buffer`'s `GPUBuffer.size` - `offset`.

#### Note on indexFormat

`indexFormat` determines both the data type of index values in a buffer and, when used with a pipeline that specifies a strip primitive topology (`"line-strip"` or `"triangle-strip"`), also determines the primitive restart value. The primitive restart value is an index value indicating that a new primitive should be started rather than continuing to construct the strip with the prior indexed vertices. The value is `0xFFFF` for `"uint16"`, or `0xFFFFFFFF` for `"uint32"`.

### Return value

None (`Undefined`).

### Validation

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

* `buffer`'s `GPUBuffer.usage` contains the `GPUBufferUsage.INDEX` flag.
* `offset` + `size` is less than or equal to the `buffer`'s `GPUBuffer.size`.
* `offset` is a multiple of `indexFormat`'s byte size (2 for `"uint16"`, 4 for `"uint32"`).
Examples
--------

```js
// ...

const bundleEncoder = device.createRenderBundleEncoder(descriptor);

bundleEncoder.setPipeline(pipeline);
bundleEncoder.setBindGroup(0, sceneBindGroupForRender);
bundleEncoder.setBindGroup(1, modelBindGroup);
bundleEncoder.setVertexBuffer(0, vertexBuffer);
bundleEncoder.setIndexBuffer(indexBuffer, "uint16");
bundleEncoder.drawIndexed(indexCount);

const renderBundle = bundleEncoder.finish();

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpurendercommandsmixin-setindexbuffer |

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

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

See also
--------

* The WebGPU API


GPURenderBundleEncoder: pushDebugGroup() method - Web APIs

GPURenderBundleEncoder: pushDebugGroup() method
===============================================

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

 The **`pushDebugGroup()`** method of the
 `GPURenderBundleEncoder` interface begins a render bundle debug group, which is marked with a specified label, and will contain all subsequent encoded commands up until a `popDebugGroup()` method is invoked.

This could be used for telemetry, or may be utilized in `GPUError` messages, browser dev tools, or other services in the future to help with debugging.

**Note:** This method is functionally identical to its equivalent on `GPURenderPassEncoder` — `pushDebugGroup()`.

Syntax
------

```js
pushDebugGroup(groupLabel)
```

### Parameters

`groupLabel`

A string representing the label for the debug group.

### Return value

None (`Undefined`).

Examples
--------

```js
// ...

const bundleEncoder = device.createRenderBundleEncoder(renderBundleDescriptor);

bundleEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group

bundleEncoder.setPipeline(renderPipeline);
bundleEncoder.setVertexBuffer(0, vertexBuffer);
bundleEncoder.draw(3);

bundleEncoder.popDebugGroup();

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpudebugcommandsmixin-pushdebuggroup |

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

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

See also
--------

* The WebGPU API


GPURenderBundleEncoder: setBindGroup() method - Web APIs

GPURenderBundleEncoder: setBindGroup() method
=============================================

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

 The **`setBindGroup()`** method of the
 `GPURenderBundleEncoder` interface sets the `GPUBindGroup` to use for subsequent render bundle commands, for a given index.

**Note:** This method is functionally identical to its equivalent on `GPURenderPassEncoder` — `setBindGroup()`.

Syntax
------

```js
setBindGroup(index, bindGroup)
setBindGroup(index, bindGroup, dynamicOffsets)
setBindGroup(index, bindGroup, dynamicOffsets, dynamicOffsetsStart,
             dynamicOffsetsLength)
```

### Parameters

`index`

The index to set the bind group at. This matches the `n` index value of the corresponding `@group(n)` attribute in the shader code (`GPUShaderModule`) used in the related pipeline.

`bindGroup`

The `GPUBindGroup` to use for subsequent render bundle commands.

`dynamicOffsets` Optional

A value specifying the offset, in bytes, for each entry in `bindGroup` with `hasDynamicOffset: true` set (i.e. in the descriptor of the `GPUDevice.createBindGroupLayout()` call that created the `GPUBindGroupLayout` object that the `bindGroup` is based on). This value can be:

* An array of numbers specifying the different offsets.
* A `Uint32Array` containing numbers specifying the offsets.

If a `Uint32Array` value is specified for `dynamicOffsets`, both of the following parameters are also required:

`dynamicOffsetsStart`

A number specifying the offset, in array elements, into `dynamicOffsetsData`, where the dynamic offset data begins.

`dynamicOffsetsLength`

A number specifying the number of dynamic offset values to be read from in `dynamicOffsetsData`.

### Return value

None (`Undefined`).

### Exceptions

For `setBindGroup()` calls that use a `Uint32Array` value for `dynamicOffsets`, the call will throw with a `RangeError` `DOMException` if:

* `dynamicOffsetsStart` is less than 0.
* `dynamicOffsetsStart` + `dynamicOffsetsLength` is greater than `dynamicOffsets.length`.
### Validation

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

* `index` is less than or equal to the `GPUDevice`'s `maxBindGroups` limit.
* `dynamicOffsets.length` is the same as the number of entries in `bindGroup` with `hasDynamicOffset: true` set.
* For `bindGroup` entries where the bound `buffer`'s `type` is `"uniform"` (see `GPUDevice.createBindGroupLayout()`), each number in `dynamicOffsets` is a multiple of the `GPUDevice`'s `minUniformBufferOffsetAlignment` limit.
* For `bindGroup` entries where the bound `buffer`'s `type` is `"storage"` or `"read-only-storage"` (see `GPUDevice.createBindGroupLayout()`), each number in `dynamicOffsets` is a multiple of the `GPUDevice`'s `minStorageBufferOffsetAlignment` limit.
* For each `bindGroup` entry, the bound `buffer`'s `offset`, plus the corresponding layout entry's `minBindingSize`, plus the corresponding dynamic offset specified in `dynamicOffsets`, is less than or equal to the bound `buffer`'s `size`.
Examples
--------

```js
function recordRenderPass(
  passEncoder: GPURenderBundleEncoder | GPURenderPassEncoder // TypeScript
) {
  if (settings.dynamicOffsets) {
    passEncoder.setPipeline(dynamicPipeline);
  } else {
    passEncoder.setPipeline(pipeline);
  }
  passEncoder.setVertexBuffer(0, vertexBuffer);
  passEncoder.setBindGroup(0, timeBindGroup);
  const dynamicOffsets = [0];
  for (let i = 0; i < numTriangles; ++i) {
    if (settings.dynamicOffsets) {
      dynamicOffsets[0] = i \* alignedUniformBytes;
      passEncoder.setBindGroup(1, dynamicBindGroup, dynamicOffsets);
    } else {
      passEncoder.setBindGroup(1, bindGroups[i]);
    }
    passEncoder.draw(3, 1, 0, 0);
  }
}
```

The above snippet is taken from the WebGPU Samples Animometer example.

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

| Specification |
| --- |
| WebGPU # programmable-passes-bind-groups |

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

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

See also
--------

* The WebGPU API


GPURenderBundleEncoder: insertDebugMarker() method - Web APIs

GPURenderBundleEncoder: insertDebugMarker() method
==================================================

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

 The **`insertDebugMarker()`** method of the
 `GPURenderBundleEncoder` interface marks a specific point in a series of encoded render bundle pass commands with a label.

This could be used for telemetry, or may be utilized in `GPUError` messages, browser dev tools, or other services in the future to help with debugging.

**Note:** This method is functionally identical to its equivalent on `GPURenderPassEncoder` — `InsertDebugMarker()`.

Syntax
------

```js
insertDebugMarker(markerLabel)
```

### Parameters

`markerLabel`

A string representing the label to insert.

### Return value

None (`Undefined`).

Examples
--------

```js
// ...

bundleEncoder.insertDebugMarker("mymarker");

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpudebugcommandsmixin-insertdebugmarker |

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

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

See also
--------

* The WebGPU API


GPURenderBundleEncoder: label property - Web APIs

GPURenderBundleEncoder: label property
======================================

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

 The **`label`** read-only property of the
 `GPURenderBundleEncoder` interface is a string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUDevice.createRenderBundleEncoder()` call, or you can get and set it directly on the `GPURenderBundleEncoder` object.

**Note:** This property is functionally identical to its equivalent on `GPURenderPassEncoder` — `label`.

Value
-----

A string. If no label value has previously been set, getting the label returns an empty string.

Examples
--------

Setting and getting a label via `GPURenderBundleEncoder.label`:

```js
const renderBundleEncoder = device.createRenderBundleEncoder({
  colorFormats: [presentationFormat],
});

renderBundleEncoder.label = "myrenderbundleencoder";
console.log(renderBundleEncoder.label); // "myrenderbundleencoder"
```

Setting a label via the originating `GPUDevice.createRenderBundleEncoder()` call, and then getting it via `GPURenderBundleEncoder.label`:

```js
const renderBundleEncoder = device.createRenderBundleEncoder({
  colorFormats: [presentationFormat],
  label: "myrenderbundleencoder",
});

console.log(renderBundleEncoder.label); // "myrenderbundleencoder"
```

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

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

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

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

See also
--------

* The WebGPU API


GPURenderBundleEncoder: setPipeline() method - Web APIs

GPURenderBundleEncoder: setPipeline() method
============================================

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

 The **`setPipeline()`** method of the
 `GPURenderBundleEncoder` interface sets the `GPURenderPipeline` to use for subsequent render bundle commands.

**Note:** This method is functionally identical to its equivalent on `GPURenderPassEncoder` — `setPipeline()`.

Syntax
------

```js
setPipeline(pipeline)
```

### Parameters

`pipeline`

The `GPURenderPipeline` to use for subsequent render bundle commands.

### Return value

None (`Undefined`).

### Validation

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

* If the `GPURenderPipeline` writes to the depth component of the depth/stencil attachment, `depthReadOnly` (as specified in the descriptor of the originating `GPUCommandEncoder.beginRenderPass()` call) is `true`.
* If the `GPURenderPipeline` writes to the stencil component of the depth/stencil attachment, `stencilReadOnly` (as specified in the descriptor of the originating `GPUCommandEncoder.beginRenderPass()` call) is `true`.
Examples
--------

```js
function recordRenderPass(
  passEncoder: GPURenderBundleEncoder | GPURenderPassEncoder // TypeScript
) {
  if (settings.dynamicOffsets) {
    passEncoder.setPipeline(dynamicPipeline);
  } else {
    passEncoder.setPipeline(pipeline);
  }
  passEncoder.setVertexBuffer(0, vertexBuffer);
  passEncoder.setBindGroup(0, timeBindGroup);
  const dynamicOffsets = [0];
  for (let i = 0; i < numTriangles; ++i) {
    if (settings.dynamicOffsets) {
      dynamicOffsets[0] = i \* alignedUniformBytes;
      passEncoder.setBindGroup(1, dynamicBindGroup, dynamicOffsets);
    } else {
      passEncoder.setBindGroup(1, bindGroups[i]);
    }
    passEncoder.draw(3, 1, 0, 0);
  }
}
```

The above snippet is taken from the WebGPU Samples Animometer example.

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

| Specification |
| --- |
| WebGPU # dom-gpurendercommandsmixin-setpipeline |

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

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

See also
--------

* The WebGPU API


DedicatedWorkerGlobalScope: message event - Web APIs

DedicatedWorkerGlobalScope: message event
=========================================

The `message` event is fired on a `DedicatedWorkerGlobalScope` object when the worker receives a message from its parent (i.e. when the parent sends a message using `Worker.postMessage()`).

This event is not cancellable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("message", (event) => {});

onmessage = (event) => {};
```

Event type
----------

A `MessageEvent`. Inherits from `Event`.

Event

MessageEventEvent properties
----------------

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

`MessageEvent.data` Read only

The data sent by the message emitter.

`MessageEvent.origin` Read only

A string representing the origin of the message emitter.

`MessageEvent.lastEventId` Read only

A string representing a unique ID for the event.

`MessageEvent.source` Read only

A `MessageEventSource` (which can be a `Window`, `MessagePort`, or `ServiceWorker` object) representing the message emitter.

`MessageEvent.ports` Read only

An array of `MessagePort` objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).

Example
-------

The following code snippet shows creation of a `Worker` object using the `Worker()` constructor. Messages are passed to the worker when the value inside the form input `first` changes. An `onmessage` handler is also present, to deal with messages are passed back from the worker.

```js
// main.js

const myWorker = new Worker("worker.js");

first.onchange = () => {
  myWorker.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

// worker.js

self.onmessage = (e) => {
  console.log("Message received from main script");
  const workerResult = `Result: ${e.data[0] \* e.data[1]}`;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};
```

In the `main.js` script, an `onmessage` handler is used to handle messages from the worker script:

```js
// main.js

myWorker.onmessage = (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
};
```

Alternatively, the script can listen for the message using `addEventListener()`:

```js
// worker.js

self.addEventListener("message", (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
});
```

Notice how in the main script, `onmessage` has to be called on `myWorker`, whereas inside the worker script you just need `onmessage` because the worker is effectively the global scope (`DedicatedWorkerGlobalScope`).

For a full example, see our Basic dedicated worker example (run dedicated worker).

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

| Specification |
| --- |
| HTML Standard # event-message |
| HTML Standard # handler-dedicatedworkerglobalscope-onmessage |

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

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

See also
--------

* `DedicatedWorkerGlobalScope`
* `WorkerGlobalScope`
* Related events: `messageerror`
* `Worker.postMessage()`
* Using channel messaging


DedicatedWorkerGlobalScope: messageerror event - Web APIs

DedicatedWorkerGlobalScope: messageerror event
==============================================

The `messageerror` event is fired on a `DedicatedWorkerGlobalScope` object when it receives a message that can't be deserialized.

This event is not cancellable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("messageerror", (event) => {});

onmessageerror = (event) => {};
```

Event type
----------

A `MessageEvent`. Inherits from `Event`.

Event

MessageEventEvent properties
----------------

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

`MessageEvent.data` Read only

The data sent by the message emitter.

`MessageEvent.origin` Read only

A string representing the origin of the message emitter.

`MessageEvent.lastEventId` Read only

A string representing a unique ID for the event.

`MessageEvent.source` Read only

A `MessageEventSource` (which can be a WindowProxy, `MessagePort`, or `ServiceWorker` object) representing the message emitter.

`MessageEvent.ports` Read only

An array of `MessagePort` objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).

Examples
--------

Listen for `messageerror` using `addEventListener()`:

```js
// worker.js

self.addEventListener("messageerror", (event) => {
  self.postMessage("Error receiving message");
  console.error(event);
});
```

The same, but using the `onmessageerror` event handler property:

```js
// worker.js

self.onmessageerror = (event) => {
  self.postMessage("Error receiving message");
  console.error(event);
};
```

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

| Specification |
| --- |
| HTML Standard # event-messageerror |
| HTML Standard # handler-dedicatedworkerglobalscope-onmessageerror |

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

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

See also
--------

* `DedicatedWorkerGlobalScope`
* `WorkerGlobalScope`
* Related events: `message`
* `Worker.postMessage()`
* Using channel messaging


DedicatedWorkerGlobalScope: close() method - Web APIs

DedicatedWorkerGlobalScope: close() method
==========================================

The **`close()`** method of the `DedicatedWorkerGlobalScope` interface discards any tasks queued in the `DedicatedWorkerGlobalScope`'s event loop, effectively closing this particular scope.

Syntax
------

```js
close()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

If you want to close your worker instance from inside the worker itself, you can call the following:

```js
close();
```

`close()` and `self.close()` are effectively equivalent — both represent `close()` being called from inside the worker's inner scope.

**Note:** There is also a way to stop the worker from the main thread: the `Worker.terminate` method.

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

| Specification |
| --- |
| HTML Standard # dom-dedicatedworkerglobalscope-close-dev |

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

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

See also
--------

`DedicatedWorkerGlobalScope`


DedicatedWorkerGlobalScope: requestAnimationFrame() method - Web APIs

DedicatedWorkerGlobalScope: requestAnimationFrame() method
==========================================================

The **`requestAnimationFrame()`** method of the `DedicatedWorkerGlobalScope` interface tells the browser you wish to perform an animation frame request and call a user-supplied callback function before the next repaint.

The frequency of calls to the callback function will generally match the display refresh rate. The most common refresh rate is 60 Hz, (60 cycles/frames per second), though 75 Hz, 120 Hz, and 144 Hz are also widely used. `requestAnimationFrame()` calls are paused in most browsers when running in background tabs or hidden `<iframe>`s, to improve performance and battery life.

A call to the `requestAnimationFrame()` method schedules only one single call to the callback function. If you want to animate another frame, your callback function must call `requestAnimationFrame()` again.

**Warning:** Be sure always to use the first argument (or some other method for getting the current time) to calculate how much the animation will progress in a frame — **otherwise, the animation will run faster on high refresh-rate screens**. For ways to do that, see the examples below.

Calling the `requestAnimationFrame()` method requires the current worker to have an associated owner `window`. That means that the current worker must be created by `window` or by a dedicated worker that also has an associated owner `window`.

Syntax
------

```js
requestAnimationFrame(callback)
```

### Parameters

* `callback`
    + The function to call when it's time to update your animation for the next repaint. This callback function is passed a single argument: a `DOMHighResTimeStamp` indicating the end time of the previous frame's rendering (based on the number of milliseconds since time origin).
    + The timestamp is a decimal number, in milliseconds, but with a minimal precision of 1 millisecond. The timestamp value is also similar to calling `performance.now()` at the start of the callback function, but it is never the same value.
    + When multiple callbacks queued by `requestAnimationFrame()` begin to fire in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload.
### Return value

 A `long` integer value that is the request ID uniquely identifying the entry
 in the callback list. This is a non-zero value, but you may not make any other
 assumptions about it. You can pass this value to
 `cancelAnimationFrame()` to cancel the refresh callback request, the cancel action must have been made in the same worker.

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the method is not supported by the current worker.

Examples
--------

On the main thread, we start by transferring the control of a `<canvas>` element to an `OffscreenCanvas`, using `HTMLCanvasElement.transferControlToOffscreen()`, then send a message to the worker to `"start"` its work with the offscreen canvas:

```js
const offscreenCanvas = document
  .querySelector("canvas")
  .transferControlToOffscreen();

worker.postMessage(
  {
    type: "start",
    canvas: offscreenCanvas,
  },
  [offscreenCanvas],
);
```

When receiving the `"start"` message, the worker starts the animation, moving the rectangle from left to right. Upon reception of a `"stop"` message, it will stop the animation.

```js
let ctx;
let pos = 0;

function draw(dt) {
  ctx.clearRect(0, 0, 100, 100);
  ctx.fillRect(pos, 0, 10, 10);
  pos += 10 \* dt;
  self.requestAnimationFrame(draw);
}

self.addEventListener("message", (e) => {
  if (e.data.type === "start") {
    const transferredCanvas = e.data.canvas;
    ctx = transferredCanvas.getContext("2d");
    self.requestAnimationFrame(draw);
  }
  if (e.data.type === "stop") {
    self.cancelAnimationFrame(handle);
  }
});
```

Finally, if needed, the main thread can send a `"stop"` message to the worker to stop the animation:

```js
worker.postMessage({
  type: "stop",
});
```

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

| Specification |
| --- |
| HTML Standard # animationframeprovider-requestanimationframe |

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

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

See also
--------

* `DedicatedWorkerGlobalScope.cancelAnimationFrame()`
* `Window.requestAnimationFrame()`


DedicatedWorkerGlobalScope: postMessage() method - Web APIs

DedicatedWorkerGlobalScope: postMessage() method
================================================

The **`postMessage()`** method of the `DedicatedWorkerGlobalScope` interface sends a message to the main thread that spawned it.

 This accepts a data parameter, which contains data to copy from the worker to the main thread.
 The data may be any value or JavaScript object handled by the structured clone algorithm, which includes cyclical references.

 The method also accepts an optional array of transferable objects to *transfer* to the main thread;
 Unlike the data parameter transferred objects are no longer usable in the worker thread.
 (Where possible, objects are transferred using a high performance zero-copy operation).

The main scope that spawned the worker can send back information to the thread that spawned it using the `Worker.postMessage` method.

Syntax
------

```js
postMessage(message)
postMessage(message, options)
postMessage(message, transfer)
```

### Parameters

`message`

 The object to deliver to the main thread; this will be in the data field in the event delivered to the `Worker.message_event`.
 This may be any value or JavaScript object handled by the structured clone algorithm, which includes cyclical references.

`options` Optional

An optional object containing a `transfer` field with an array of transferable objects to transfer ownership of. If the ownership of an object is transferred, it becomes unusable in the context it was sent from and it becomes available only to the main thread it was sent to.

`transfer` Optional

 An optional ordered array of transferable objects to transfer ownership of.
 If the ownership of an object is transferred, it becomes unusable in the context it was sent from and it becomes available only to the main thread it was sent to.

Only transferable objects can be transferred.

### Return value

None (`undefined`).

Examples
--------

 The following code snippet shows `worker.js`, in which an `onmessage` handler is used to handle messages from the main script.
 Inside the handler a calculation is done from which a result message is created; this is then sent back to the main thread using `postMessage(workerResult);`

```js
onmessage = (e) => {
  console.log("Message received from main script");
  const workerResult = `Result: ${e.data[0] \* e.data[1]}`;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};
```

In the main script, `onmessage` would have to be called on a `Worker object`, whereas inside the worker script you just need `onmessage` because the worker is effectively the global scope (`DedicatedWorkerGlobalScope`).

For a full example, see our Basic dedicated worker example (run dedicated worker).

**Note:** `postMessage()` can only send a single object at once. As seen above, if you want to pass multiple values you can send an array.

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

| Specification |
| --- |
| HTML Standard # dom-dedicatedworkerglobalscope-postmessage-dev |

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

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

See also
--------

The `DedicatedWorkerGlobalScope` interface it belongs to.


DedicatedWorkerGlobalScope: name property - Web APIs

DedicatedWorkerGlobalScope: name property
=========================================

 The **`name`** read-only property of the
 `DedicatedWorkerGlobalScope` interface returns the name that the
 `Worker` was (optionally) given when it was created. This is the name that
 the `Worker()` constructor can pass to get a reference to
 the `DedicatedWorkerGlobalScope`.

Value
-----

A string.

Examples
--------

If a worker is created using a constructor with a `name` option:

```js
const myWorker = new Worker("worker.js", { name: "myWorker" });
```

 the `DedicatedWorkerGlobalScope` will now have a name of "myWorker",
 returnable by running

```js
self.name;
```

from inside the worker.

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

| Specification |
| --- |
| HTML Standard # dom-dedicatedworkerglobalscope-name-dev |

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

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

See also
--------

* `DedicatedWorkerGlobalScope`


DedicatedWorkerGlobalScope: rtctransform event - Web APIs

DedicatedWorkerGlobalScope: rtctransform event
==============================================

The **`rtctransform`** event is fired at a worker's `DedicatedWorkerGlobalScope` object when an encoded video or audio frame has been queued for processing by a WebRTC Encoded Transform.

The event's `transformer` property returns a `RTCRtpScriptTransformer` that exposes the `ReadableStream` on which the frame is queued, and a `WritableStream` where the frame can be written to inject it back into the WebRTC pipeline.

This event is not cancellable and does not bubble.

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

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("rtctransform", (event) => {});

onrtctransform = (event) => {};
```

Event type
----------

A `RTCTransformEvent`. Inherits from `Event`.

Event

RTCTransformEventEvent properties
----------------

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

`RTCTransformEvent.transformer` Read only

Returns the `RTCRtpScriptTransformer` associated with the event.

Example
-------

 The following code snippet shows a handler for the `rtctransform` event in the worker, added to the global scope using `addEventListener()`.
 The `event.transformer` is a `RTCRtpScriptTransformer`, the worker side counterpart to `RTCRtpScriptTransform`.

```js
addEventListener("rtctransform", (event) => {
  let transform;
  // Select a transform based on passed options
  if (event.transformer.options.name == "senderTransform")
    transform = createSenderTransform(); // A TransformStream
  else if (event.transformer.options.name == "receiverTransform")
    transform = createReceiverTransform(); // A TransformStream
  else return;

  //Pipe frames from the readable to writeable through TransformStream
  event.transformer.readable
    .pipeThrough(transform)
    .pipeTo(event.transformer.writable);
});
```

 The `rtctransform` event is fired when an encoded frame is enqueued on the `RTCRtpScriptTransformer` and just once when the transformer's corresponding `RTCRtpScriptTransformer` is constructed.
 The code first determines what transform to apply using `name` value passed in the options (this allows `RTCRtpScriptTransform` instances added to the incoming and outgoing WebRTC pipelines to share a single worker).
 Encoded frames are then piped from the readable, through the selected transform `TransformStream`, to a writeable.
 The actual tranforming code is not shown.

Note that this code is part of a more complete example provided in Using WebRTC Encoded Transforms.

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

| Specification |
| --- |
| WebRTC Encoded Transform # dom-dedicatedworkerglobalscope-onrtctransform |

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

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

See also
--------

* Using WebRTC Encoded Transforms


DedicatedWorkerGlobalScope: cancelAnimationFrame() method - Web APIs

DedicatedWorkerGlobalScope: cancelAnimationFrame() method
=========================================================

The **`cancelAnimationFrame()`** method of the `DedicatedWorkerGlobalScope` interface cancels an animation frame request previously scheduled through a call to `requestAnimationFrame()`.

Calling the `cancelAnimationFrame()` method requires the current worker to have an associated owner `window`. That means that the current worker must be created by `window` or by a dedicated worker that also has an associated owner `window`.

Syntax
------

```js
cancelAnimationFrame(handle)
```

### Parameters

`handle`

The ID value returned by a call to `requestAnimationFrame()`; the call must have been made in the same worker.

### Return value

None (`undefined`).

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the method is not supported by the current worker.

Examples
--------

On the main thread, we start by transferring the control of a `<canvas>` element to an `OffscreenCanvas`, using `HTMLCanvasElement.transferControlToOffscreen()` and send to a message to `"start"` its work to the worker, with the offscreen canvas:

```js
const offscreenCanvas = document
  .querySelector("canvas")
  .transferControlToOffscreen();

worker.postMessage(
  {
    type: "start",
    canvas: offscreenCanvas,
  },
  [offscreenCanvas],
);
```

When receiving the `"start"` message, the worker starts the animation, moving the rectangle from left to right. Upon reception of a `"stop"` message, it will stop the animation.

```js
let ctx;
let pos = 0;

function draw(dt) {
  ctx.clearRect(0, 0, 100, 100);
  ctx.fillRect(pos, 0, 10, 10);
  pos += 10 \* dt;
  self.requestAnimationFrame(draw);
}

self.addEventListener("message", (e) => {
  if (e.data.type === "start") {
    const transferredCanvas = e.data.canvas;
    ctx = transferredCanvas.getContext("2d");
    self.requestAnimationFrame(draw);
  }
  if (e.data.type === "stop") {
    self.cancelAnimationFrame(handle);
  }
});
```

Finally, if needed, the main thread can send a `"stop"` message to the worker to stop the animation:

```js
worker.postMessage({
  type: "stop",
});
```

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

| Specification |
| --- |
| HTML Standard # animationframeprovider-cancelanimationframe |

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

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

See also
--------

* `DedicatedWorkerGlobalScope.requestAnimationFrame()`
* `Window.cancelAnimationFrame()`


MIDIConnectionEvent: port property - Web APIs

MIDIConnectionEvent: port property
==================================

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

The **`port`** read-only property of the `MIDIConnectionEvent` interface returns the port that has been disconnected or connected.

Value
-----

A `MIDIPort` object.

Examples
--------

The `Navigator.requestMIDIAccess()` method returns a promise that resolves with a `MIDIAccess` object. When a port changes state, a `MIDIConnectionEvent` is passed to the `statechange` event. Information about the port can then be printed to the console.

```js
navigator.requestMIDIAccess().then((access) => {
  access.onstatechange = (event) => {
    console.log(event.port.name, event.port.manufacturer, event.port.state);
  };
});
```

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

| Specification |
| --- |
| Web MIDI API # dom-midiconnectionevent-port |

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

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


MIDIConnectionEvent: MIDIConnectionEvent() constructor - Web APIs

MIDIConnectionEvent: MIDIConnectionEvent() constructor
======================================================

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

The **`MIDIConnectionEvent()`** constructor creates a new `MIDIConnectionEvent` object. Typically this constructor is not used as events are created when a new port becomes available, and the object is passed to the `statechange` event.

Syntax
------

```js
new MIDIConnectionEvent(type)
new MIDIConnectionEvent(type, midiConnectionEventInit)
```

### Parameters

`type`

A string with one of `"connect"` or `"disconnect"`.

`midiConnectionEventInit` Optional

A dictionary including the following fields:

`port`

The `MIDIPort` instance representing the port that has connected or disconnected.

`bubbles` Optional

 A boolean value indicating whether the event bubbles. The default is
 `false`.

`cancelable` Optional

 A boolean value indicating whether the event can be cancelled. The
 default is `false`.

`composed` Optional

 A boolean value indicating whether the event will trigger listeners
 outside of a shadow root (see `Event.composed` for more details). The
 default is `false`.

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

| Specification |
| --- |
| Web MIDI API # dom-midiconnectionevent-constructor |

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

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


IDBOpenDBRequest: blocked event - Web APIs

IDBOpenDBRequest: blocked event
===============================

The `blocked` handler is executed when an open connection to a database is blocking a `versionchange` transaction on the same database.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("blocked", (event) => {});

onblocked = (event) => {};
```

Event type
----------

An `IDBVersionChangeEvent`. Inherits from `Event`.

Event

IDBVersionChangeEventEvent properties
----------------

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

`IDBVersionChangeEvent.oldVersion` Read only

Returns the old version of the database.

`IDBVersionChangeEvent.newVersion` Read only

Returns the new version of the database.

Examples
--------

Using `addEventListener()`:

```js
// Open the database
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("Error creating database");
  };

  // Create an objectStore for this database
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // define what data items the objectStore will contain
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  // Let's try to open the same database with a higher revision version
  const req2 = indexedDB.open("toDoList", 5);

  // In this case the onblocked handler will be executed
  req2.addEventListener("blocked", () => {
    console.log("Request was blocked");
  });
};
```

Using the `onblocked` property:

```js
// Open the database
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("Error creating database");
  };

  // Create an objectStore for this database
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // define what data items the objectStore will contain
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  // Let's try to open the same database with a higher revision version
  const req2 = indexedDB.open("toDoList", 5);

  // In this case the onblocked handler will be executed
  req2.onblocked = () => {
    console.log("Request was blocked");
  };
};
```

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

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

See also
--------

* Using IndexedDB


IDBOpenDBRequest: upgradeneeded event - Web APIs

IDBOpenDBRequest: upgradeneeded event
=====================================

The `upgradeneeded` event is fired when an attempt was made to open a database with a version number higher than its current version.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("upgradeneeded", (event) => {});

onupgradeneeded = (event) => {};
```

Event type
----------

An `IDBVersionChangeEvent`. Inherits from `Event`.

Event

IDBVersionChangeEventEvent properties
----------------

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

`IDBVersionChangeEvent.oldVersion` Read only

Returns the old version of the database.

`IDBVersionChangeEvent.newVersion` Read only

Returns the new version of the database.

Examples
--------

This example opens a database and handles the `upgradeneeded` event by making any necessary updates to the object store.

```js
// Open the database
const dBOpenRequest = window.indexedDB.open("toDoList", 4);

dBOpenRequest.addEventListener("upgradeneeded", (event) => {
  const db = event.target.result;
  console.log(`Upgrading to version ${db.version}`);

  // Create an objectStore for this database
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // define what data items the objectStore will contain
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
});
```

This is the same example, but uses the onupgradeneeded event handler property.

```js
// Open the database
const dBOpenRequest = window.indexedDB.open("toDoList", 4);

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  console.log(`Upgrading to version ${db.version}`);

  // Create an objectStore for this database
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // define what data items the objectStore will contain
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};
```

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

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

See also
--------

* Using IndexedDB


StyleSheet: ownerNode property - Web APIs

StyleSheet: ownerNode property
==============================

 The **`ownerNode`** property of the
 `StyleSheet` interface returns the node that associates this style sheet
 with the document.

 This is usually an HTML
 `<link>` or
 `<style>` element, but
 can also return a processing instruction node in the case of `<?xml-stylesheet ?>`.

Value
-----

A `Node` object.

Examples
--------

```html
<html lang="en">
  <head>
    <link rel="stylesheet" href="example.css" />
  </head>
  <body>
    <button onclick="alert(document.styleSheets[0].ownerNode)">
      Show example.css's ownerNode
    </button>
  </body>
</html>
// Displays "object HTMLLinkElement"
```

Notes
-----

 For style sheets that are included by other style sheets, such as with
 `@import`, the value of this
 property is `null`.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-ownernode |

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

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


StyleSheet: disabled property - Web APIs

StyleSheet: disabled property
=============================

 The **`disabled`** property of the
 `StyleSheet` interface determines whether the style sheet is prevented from
 applying to the document.

 A style sheet may be disabled by manually setting this property to `true` or
 if it's an inactive alternative style sheet. Note that `disabled === false` does not guarantee the style
 sheet is applied (it could be removed from the document, for instance).

Value
-----

A boolean.

Examples
--------

```js
// If the stylesheet is disabled
if (stylesheet.disabled) {
  // Apply styles in-line
}
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-disabled |

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

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


StyleSheet: href property - Web APIs

StyleSheet: href property
=========================

 The **`href`** property of the `StyleSheet`
 interface returns the location of the style sheet.

This property is read-only.

Value
-----

A string containing the stylesheet's URI.

Examples
--------

On a local Windows machine:

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>href example</title>
    <link rel="styleSheet" href="example.css" />
    <script>
 function sref() {
 alert(document.styleSheets[0].href);
 }
 </script>
  </head>
  <body>
    <div class="thunder">Thunder</div>
    <button onclick="sref()">ss</button>
  </body>
</html>
```

Returns "file:////C:/Windows/Desktop/example.css"

Notes
-----

 If the style sheet is a linked style sheet, the value of its attribute is its location.
 For inline style sheets, the value of this attribute is `NULL`.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-href |

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

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


StyleSheet: type property - Web APIs

StyleSheet: type property
=========================

 The **`type`** property of the `StyleSheet`
 interface specifies the style sheet language for the given style sheet.

Value
-----

A string.

Examples
--------

```js
myStyleSheet.type = "text/css";
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-type |

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

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


StyleSheet: parentStyleSheet property - Web APIs

StyleSheet: parentStyleSheet property
=====================================

 The **`parentStyleSheet`** property of the
 `StyleSheet` interface returns the style sheet, if any, that is including
 the given style sheet.

Value
-----

A `StyleSheet` object.

Examples
--------

```js
// Find the top level stylesheet
const sheet = stylesheet.parentStyleSheet ?? stylesheet;
```

Notes
-----

 This property returns `null` if the current stylesheet is a top-level
 stylesheet or if stylesheet inclusion is not supported.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-parentstylesheet |

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

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


StyleSheet: media property - Web APIs

StyleSheet: media property
==========================

The **`media`** property of the `StyleSheet` interface specifies the intended destination media for style information. It is a read-only, array-like `MediaList` object and can be removed with `deleteMedium()` and added with `appendMedium()`.

Value
-----

A read-only array-like `MediaList` object.

Examples
--------

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Test page</title>
    <link rel="stylesheet" href="document.css" media="screen" />
    <style rel="stylesheet" media="screen, print">
 body {
 background-color: snow;
 }
 </style>
  </head>
  <body>
    <script>
 for (let i = 0; i < document.styleSheets.length; i++) {
 console.log(
 `document.styleSheets[${i}].media: ${JSON.stringify(
 document.styleSheets[i].media,
 )}`,
 );
 if (iSheetIndex === 0)
 document.styleSheets[i].media.appendMedium("handheld");
 if (iSheetIndex === 1)
 document.styleSheets[i].media.deleteMedium("print");
 console.log(
 `document.styleSheets[${i}].media: ${JSON.stringify(
 document.styleSheets[i].media,
 )}`,
 );
 }
 // This will log:
 // document.styleSheets[0].media: {"0":"screen"}
 // document.styleSheets[0].media: {"0":"screen","1":"handheld"}
 // document.styleSheets[1].media: {"0":"screen","1":"print"}
 // document.styleSheets[1].media: {"0":"screen"}
 </script>
  </body>
</html>
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-media |

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

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


StyleSheet: title property - Web APIs

StyleSheet: title property
==========================

The **`title`** property of the `StyleSheet` interface returns the advisory title of the current style sheet.

The title is often specified in the `ownerNode`.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-stylesheet-title |

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

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


ContentVisibilityAutoStateChangeEvent: ContentVisibilityAutoStateChangeEvent() constructor - Web APIs

ContentVisibilityAutoStateChangeEvent: ContentVisibilityAutoStateChangeEvent() constructor
==========================================================================================

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
The **`ContentVisibilityAutoStateChangeEvent()`** constructor creates a new `ContentVisibilityAutoStateChangeEvent` object instance.

Syntax
------

```js
new ContentVisibilityAutoStateChangeEvent(type, options)
```

### Parameters

`type`

A string representing the type of event. In the case of `ContentVisibilityAutoStateChangeEvent` this is always `event`.

`options` Optional

An object that contains the following properties:

`skipped`

A boolean, which is set to `true` if the user agent skips the element's contents, or `false` otherwise.

Examples
--------

A developer would not use this constructor manually. A new `ContentVisibilityAutoStateChangeEvent` object is constructed when a handler is invoked as a result of the `contentvisibilityautostatechange` event firing.

```js
canvasElem.addEventListener("contentvisibilityautostatechange", (event) => {
  // …
});
```

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

| Specification |
| --- |
| CSS Containment Module Level 2 # dom-contentvisibilityautostatechangeevent-contentvisibilityautostatechangeevent |

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

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

See also
--------

* The `contentvisibilityautostatechange` event
* CSS Containment
* The `content-visibility` property
* The `contain` property


ContentVisibilityAutoStateChangeEvent: skipped property - Web APIs

ContentVisibilityAutoStateChangeEvent: skipped property
=======================================================

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
The `skipped` read-only property of the `ContentVisibilityAutoStateChangeEvent` interface returns `true` if the user agent skips the element's contents, or `false` otherwise.

Value
-----

A boolean. Returns `true` if the user agent skips the element's contents, or `false` otherwise.

Examples
--------

```js
const canvasElem = document.querySelector("canvas");

canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
canvasElem.style.contentVisibility = "auto";

function stateChanged(event) {
  if (event.skipped) {
    stopCanvasUpdates(canvasElem);
  } else {
    startCanvasUpdates(canvasElem);
  }
}

// Call this when the canvas updates need to start.
function startCanvasUpdates(canvas) {
  // …
}

// Call this when the canvas updates need to stop.
function stopCanvasUpdates(canvas) {
  // …
}
```

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

| Specification |
| --- |
| CSS Containment Module Level 2 # dom-contentvisibilityautostatechangeevent-skipped |

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

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

See also
--------

* The `contentvisibilityautostatechange` event
* CSS Containment
* The `content-visibility` property
* The `contain` property


FormData: get() method - Web APIs

FormData: get() method
======================

 The **`get()`** method of the `FormData` interface
 returns the first value associated with a given key from within a `FormData`
 object. If you expect multiple values and want all of them, use the
 `getAll()` method instead.

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

Syntax
------

```js
get(name)
```

### Parameters

`name`

A string representing the name of the key you want to retrieve.

### Return value

A value whose key matches the specified `name`. Otherwise, `null`.

Examples
--------

If we add two `username` values to a `FormData` using `append()`:

```js
formData.append("username", "Chris");
formData.append("username", "Bob");
```

The following `get()` method will only return the first `username` value:

```js
formData.get("username"); // Returns "Chris"
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-get |

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

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

See also
--------

* Using FormData objects
* `<form>`


FormData: has() method - Web APIs

FormData: has() method
======================

The **`has()`** method of the `FormData` interface returns whether a `FormData` object contains a certain key.

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

Syntax
------

```js
has(name)
```

### Parameters

`name`

A string representing the name of the key you want to test for.

### Return value

`true` if a key of `FormData` matches the specified `name`. Otherwise, `false`.

Examples
--------

The following snippet shows the results of testing for the existence of `username` in a `FormData` object, before and after appending a `username` value to it with `append()`:

```js
formData.has("username"); // Returns false
formData.append("username", "Chris");
formData.has("username"); // Returns true
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-has |

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

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

See also
--------

* Using FormData objects
* `<form>`


FormData: keys() method - Web APIs

FormData: keys() method
=======================

The **`FormData.keys()`** method returns an iterator which iterates through all keys contained in the `FormData`. The keys are strings.

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

Syntax
------

```js
keys()
```

### Parameters

None.

### Return value

An `iterator` of `FormData`'s keys.

Examples
--------

```js
const formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// Display the keys
for (const key of formData.keys()) {
  console.log(key);
}
```

The result is:
```

key1
key2
```

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

#### No specification found

No specification data found for `api.FormData.keys`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* Using FormData objects
* `<form>`


FormData: delete() method - Web APIs

FormData: delete() method
=========================

The **`delete()`** method of the `FormData` interface deletes a key and its value(s) from a `FormData` object.

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

Syntax
------

```js
delete(name)
```

### Parameters

`name`

The name of the key you want to delete.

### Return value

None (`undefined`).

Examples
--------

You can delete a key and its values using `delete()`:

```js
formData.delete("username");
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-delete |

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

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

See also
--------

* Using FormData objects
* `<form>`