recursal/MDN huggingface dataset:
GPURenderPipeline: getBindGroupLayout() method
==============================================

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

 The **`getBindGroupLayout()`** method of the
 `GPURenderPipeline` interface returns the pipeline's `GPUBindGroupLayout` object with the given index (i.e. included in the originating `GPUDevice.createRenderPipeline()` or `GPUDevice.createRenderPipelineAsync()` call's pipeline layout).

If the `GPURenderPipeline` was created with `layout: "auto"`, this method is the only way to retrieve the `GPUBindGroupLayout`s generated by the pipeline.

Syntax
------


```js
getBindGroupLayout(index)
```

### Parameters

`index`

A number representing the index of the `GPUBindGroupLayout` to return.

### Return value

A `GPUBindGroupLayout` object instance.

### Validation

The following criteria must be met when calling **`getBindGroupLayout()`**, otherwise a `GPUValidationError` is generated and an invalid `GPUBindGroupLayout` object is returned:

* `index` is less than the number of `GPUBindGroupLayout` objects used in the pipeline layout.
Examples
--------

**Note:** You can see complete working examples with `getBindGroupLayout()` in action in the WebGPU samples.


```js
// ...

// Create a render pipeline using layout: "auto" to automatically generate
// appropriate bind group layouts
const fullscreenQuadPipeline = device.createRenderPipeline({
  layout: "auto",
  vertex: {
    module: device.createShaderModule({
      code: fullscreenTexturedQuadWGSL,
    }),
    entryPoint: "vert\_main",
  },
  fragment: {
    module: device.createShaderModule({
      code: fullscreenTexturedQuadWGSL,
    }),
    entryPoint: "frag\_main",
    targets: [
      {
        format: presentationFormat,
      },
    ],
  },
  primitive: {
    topology: "triangle-list",
  },
});

// ...

// Create a bind group with the auto-generated layout from the render pipeline
const showResultBindGroup = device.createBindGroup({
  layout: fullscreenQuadPipeline.getBindGroupLayout(0),
  entries: [
    {
      binding: 0,
      resource: sampler,
    },
    {
      binding: 1,
      resource: textures[1].createView(),
    },
  ],
});

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpupipelinebase-getbindgrouplayout |

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

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

See also
--------

* The WebGPU API
MIDIAccess: inputs property
===========================

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

The **`inputs`** read-only property of the `MIDIAccess` interface provides access to any available MIDI input ports.

Value
-----

A `MIDIInputMap` instance.

Examples
--------

The `Navigator.requestMIDIAccess()` method returns a promise that resolves with a `MIDIAccess` object. Printing the value of `inputs` to the console returns a `MIDIInputMap`.


```js
navigator.requestMIDIAccess().then((access) => {
  console.log(access.inputs);
});
```

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

| Specification |
| --- |
| Web MIDI API # dom-midiaccess-inputs |

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

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

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

The **`sysexEnabled`** read-only property of the `MIDIAccess` interface indicates whether system exclusive support is enabled on the current MIDIAccess instance.

Value
-----

A boolean value.

Examples
--------

The `Navigator.requestMIDIAccess()` method returns a promise that resolves with a `MIDIAccess` object. Printing the value of `sysexEnabled` to the console returns a boolean value, which is `true` if system exclusive support is enabled.


```js
navigator.requestMIDIAccess().then((access) => {
  console.log(access.sysexEnabled);
});
```

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

| Specification |
| --- |
| Web MIDI API # dom-midiaccess-sysexenabled |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MIDIAccess: statechange event
=============================

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

The **`statechange`** event of the `MIDIAccess` interface is fired when a new MIDI port is added or when an existing port changes state.

Syntax
------

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


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

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

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

A `MIDIConnectionEvent`. Inherits from `Event`.

Event

MIDIConnectionEventEvent properties
----------------

`MIDIConnectionEvent.port` Read only 

Returns a reference to a `MIDIPort` instance for a port that has been connected or disconnected.

Example
-------

The `Navigator.requestMIDIAccess()` method returns a promise that resolves with a `MIDIAccess` object. When a port changes state, information about that port is 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-midiaccess-onstatechange |

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

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

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

The **`outputs`** read-only property of the `MIDIAccess` interface provides access to any available MIDI output ports.

Value
-----

A `MIDIOutputMap` instance.

Examples
--------

The `Navigator.requestMIDIAccess()` method returns a promise that resolves with a `MIDIAccess` object. Printing the value of `outputs` to the console returns a `MIDIOutputMap`.


```js
navigator.requestMIDIAccess().then((access) => {
  console.log(access.outputs);
});
```

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

| Specification |
| --- |
| Web MIDI API # dom-midiaccess-outputs |

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

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

 The **`z`** property of the
 `CSSTranslate` interface representing the z-component of the translating
 vector. A positive value moves the element towards the viewer, and a negative value
 farther away.

 If this value is present then the transform is a 3D transform and the `is2D`
 property will be set to false.

Value
-----

A `<length>`.

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csstranslate-z |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSTranslate: CSSTranslate() constructor
========================================

 The **`CSSTranslate()`** constructor creates a
 new `CSSTranslate` object representing the translate() value of the
 individual `transform` property in CSS.

Syntax
------


```js
new CSSTranslate(x, y)
new CSSTranslate(x, y, z)
```

### Parameters

`x`

 A value for the x-axis of the `CSSTranslate` object to be constructed.
 This must be a `<length-percentage>`.


`y`

 A value for the y-axis of the `CSSTranslate` object to be constructed.
 This must be a `<length-percentage>`.


`z` Optional

 A value for the z-axis of the `CSSTranslate` object to be constructed.
 This must be a `<length>`.


 If a value is passed for the `z-axis` this is a 3d transform. The value of
 `is2D` will be set to false.


### Exceptions

`TypeError`

 Raised if the value of `CSSTranslate.x` or `CSSTranslate.y` is
 not a `<length-percentage>`.


`TypeError`

 Raised if the value of `CSSTranslate.z` exists but is not a
 `<length>`.


Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csstranslate-csstranslate |

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

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

 The **`y`** property of the
 `CSSTranslate` interface gets and sets the ordinate or y-axis of the
 translating vector.

Value
-----

A `<length-percentage>`

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csstranslate-y |

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

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

 The **`x`** property of the
 `CSSTranslate` interface gets and sets the abscissa or x-axis of the
 translating vector.

Value
-----

A `<length-percentage>`

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csstranslate-x |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DecompressionStream: DecompressionStream() constructor
======================================================

The **`DecompressionStream()`** constructor creates a new `DecompressionStream` object which decompresses a stream of data.

Syntax
------


```js
new DecompressionStream(format)
```

### Parameters

`format`

One of the following compression formats:

`"gzip"`

Decompress the stream using the GZIP format.

`"deflate"`

 Decompress the stream using the DEFLATE algorithm in ZLIB Compressed Data Format.
 The ZLIB format includes a header with information about the compression method and the uncompressed size of the data, and a trailing checksum for verifying the integrity of the data


`"deflate-raw"`

Decompress the stream using the DEFLATE algorithm without a header and trailing checksum.


Exceptions
----------

`TypeError`

Thrown if the format passed to the constructor is not supported.

Examples
--------

In this example a gzip-compressed blob is decompressed.


```js
const ds = new DecompressionStream("gzip");
const decompressedStream = blob.stream().pipeThrough(ds);
```

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

| Specification |
| --- |
| Compression Streams # dom-decompressionstream-decompressionstream |

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

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

The **`readable`** read-only property of the `DecompressionStream` interface returns a `ReadableStream`.

Value
-----

A `ReadableStream`.

Examples
--------

The following example returns a `ReadableStream` from a `DecompressionStream`.


```js
let stream = new DecompressionStream("gzip");
console.log(stream.readable); //a ReadableStream
```

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

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-readable |

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

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

The **`writable`** read-only property of the `DecompressionStream` interface returns a `WritableStream`.

Value
-----

A `WritableStream`.

Examples
--------

The following example returns a `WritableStream` from a `DecompressionStream`.


```js
let stream = new DecompressionStream("gzip");
console.log(stream.writable); // A WritableStream
```

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

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-writable |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VRStageParameters: sizeX 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.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`sizeX`** read-only property of the `VRStageParameters` interface *returns the width* of the play-area bounds in meters.

**Note:** This property was part of the old WebVR API. It has been superseded by the WebXR Device API.

The bounds are defined as an axis-aligned rectangle on the floor, for safety purposes. Content should not require the user to move beyond these bounds; however, it is possible for the user to ignore the bounds resulting in position values outside of this rectangle. The center of the rectangle is at (0,0,0) in standing-space coordinates.

Value
-----

A float representing the width in meters.

Examples
--------

See `VRStageParameters` for example code.

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

This property was part of the old WebVR API that has been superseded by the WebXR Device API. It is no longer on track to becoming a standard.

Until all browsers have implemented the new WebXR APIs, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers [1].

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

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

See also
--------

* WebVR API
VRStageParameters: sittingToStandingTransform 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.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`sittingToStandingTransform`** read-only property of the `VRStageParameters` interface contains a matrix that transforms the sitting-space view matrices of `VRFrameData` to standing-space.

**Note:** This property was part of the old WebVR API. It has been superseded by the WebXR Device API.

Basically, this can be passed into your WebGL code to transform the rendered view from a sitting to standing view.

Value
-----

A 16-element `Float32Array` containing the components of a 4×4 transform matrix.

Examples
--------

See `VRStageParameters` for example code.

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

This property was part of the old WebVR API that has been superseded by the WebXR Device API. It is no longer on track to becoming a standard.

Until all browsers have implemented the new WebXR APIs, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers [1].

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

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

See also
--------

* WebVR API
VRStageParameters: sizeY 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.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`sizeY`** read-only property of the `VRStageParameters` interface *returns the depth* of the play-area bounds in meters.

**Note:** This property was part of the old WebVR API. It has been superseded by the WebXR Device API.

The bounds are defined as an axis-aligned rectangle on the floor, for safety purposes. Content should not require the user to move beyond these bounds; however, it is possible for the user to ignore the bounds resulting in position values outside of this rectangle. The center of the rectangle is at (0,0,0) in standing-space coordinates.

Value
-----

A float representing the depth in meters.

Examples
--------

See `VRStageParameters` for example code.

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

This property was part of the old WebVR API that has been superseded by the WebXR Device API. It is no longer on track to becoming a standard.

Until all browsers have implemented the new WebXR APIs, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers [1].

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

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

See also
--------

* WebVR API
AnimationTimeline: currentTime property
=======================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`currentTime`** read-only property of the Web Animations API's `AnimationTimeline` interface returns the timeline's current time in milliseconds, or `null` if the timeline is inactive.

Value
-----

A number representing the timeline's current time in milliseconds, or `null` if the timeline is inactive.

Reduced time precision
----------------------

 To offer protection against timing attacks and fingerprinting, the precision of `animationTimeline.currentTime` might get rounded depending on browser settings.
 In Firefox, the `privacy.reduceTimerPrecision` preference is enabled by default and defaults to 20us in Firefox 59; in 60 it will be 2ms.


```js
// reduced time precision (2ms) in Firefox 60
animationTimeline.currentTime;
// 23.404
// 24.192
// 25.514
// …

// reduced time precision with `privacy.resistFingerprinting` enabled
animationTimeline.currentTime;
// 49.8
// 50.6
// 51.7
// …
```


In Firefox, you can also enable `privacy.resistFingerprinting`; the precision will be 100ms or the value of `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, whichever is larger.

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

| Specification |
| --- |
| Web Animations # dom-animationtimeline-currenttime |

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

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

See also
--------

* Web Animations API
* `AnimationTimeline`
* `DocumentTimeline` inherits this property
* `Document.timeline` returns a timeline object which inherits this property
FetchEvent: replacesClientId property
=====================================

 The **`replacesClientId`** read-only property of the
 `FetchEvent` interface is the `id` of the
 `client` that is being replaced during a page navigation.

 For example, when navigating from page A to page B `replacesClientId` is the
 ID of the client associated with page A. It can be an empty string when navigating from
 `about:blank` to another page, as `about:blank`'s client will be
 reused, rather than be replaced.

 Additionally, if the fetch isn't a navigation, `replacesClientId` will be an
 empty string. This could be used to access/communicate with a client that will
 imminently be replaced, right before a navigation.

Value
-----

A string.

Examples
--------


```js
self.addEventListener("fetch", (event) => {
  console.log(event.replacesClientId);
});
```

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

| Specification |
| --- |
| Service Workers # fetch-event-replacesClientId |

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

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

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers
FetchEvent: resultingClientId property
======================================

 The **`resultingClientId`** read-only property of the
 `FetchEvent` interface is the `id` of the
 `client` that replaces the previous client during a page
 navigation.

 For example, when navigating from page A to page B `resultingClientId` is
 the ID of the client associated with page B.

 If the fetch request is a subresource request or the request's
 `destination` is
 `report`, `resultingClientId` will be an empty string.

Value
-----

A string.

Examples
--------


```js
self.addEventListener("fetch", (event) => {
  console.log(event.resultingClientId);
});
```

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

| Specification |
| --- |
| Service Workers # fetch-event-resultingclientid |

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

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

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers
FetchEvent: isReload 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.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The **`isReload`** read-only property of the
 `FetchEvent` interface returns `true` if the event was
 dispatched by the user attempting to reload the page, and `false` otherwise.
 Pressing the refresh button is a reload while clicking a link and pressing the back
 button is not.

Value
-----

A boolean value.

Examples
--------


```js
self.addEventListener("fetch", (event) => {
  event.respondWith(async () => {
    if (event.isReload) {
      //Return something
    } else {
      //Return something else
    }
  })();
});
```

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

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

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers