recursal/MDN huggingface dataset:
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
===========================================

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
==========================================

 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
======================================

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

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

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

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

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

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

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
============================================

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

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

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

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