recursal/MDN huggingface dataset:
GPUBindGroupLayout
==================

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

The **`GPUBindGroupLayout`** interface of the WebGPU API defines the structure and purpose of related GPU resources such as buffers that will be used in a pipeline, and is used as a template when creating `GPUBindGroup`s.

A `GPUBindGroupLayout` object instance is created using the `GPUDevice.createBindGroupLayout()` method.

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

`label` 
Experimental

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

Examples
--------

**Note:** The WebGPU samples feature many more examples.

### Basic example

Our basic compute demo shows an example of creating a bind group layout and then using that as a template when creating a bind group.


```js
// ...

const bindGroupLayout = device.createBindGroupLayout({
  entries: [
    {
      binding: 0,
      visibility: GPUShaderStage.COMPUTE,
      buffer: {
        type: "storage",
      },
    },
  ],
});

const bindGroup = device.createBindGroup({
  layout: bindGroupLayout,
  entries: [
    {
      binding: 0,
      resource: {
        buffer: output,
      },
    },
  ],
});

// ...
```

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

| Specification |
| --- |
| WebGPU # gpubindgrouplayout |

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

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

See also
--------

* The WebGPU API
Pbkdf2Params
============

The **`Pbkdf2Params`** dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.deriveKey()`, when using the PBKDF2 algorithm.

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

`name`

A string. This should be set to `PBKDF2`.

`hash`

A string representing the digest algorithm to use. This may be one of:

* `SHA-1`
* `SHA-256`
* `SHA-384`
* `SHA-512`

**Warning:** `SHA-1` is considered vulnerable in most cryptographic applications, but is still considered safe in PBKDF2. However, it's advisable to transition away from it everywhere, so unless you need to use `SHA-1`, don't. Use a different digest algorithm instead.

`salt`

An `ArrayBuffer`, a `TypedArray`, or a `DataView`. This should be a random or pseudo-random value of at least 16 bytes. Unlike the input key material passed into `deriveKey()`, `salt` does not need to be kept secret.

`iterations`

A `Number` representing the number of times the hash function will be executed in `deriveKey()`. This determines how computationally expensive (that is, slow) the `deriveKey()` operation will be. In this context, slow is good, since it makes it more expensive for an attacker to run a dictionary attack against the keys. The general guidance here is to use as many iterations as possible, subject to keeping an acceptable level of performance for your application.

Examples
--------

See the examples for `SubtleCrypto.deriveKey()`.

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

| Specification |
| --- |
| Web Cryptography API # dfn-Pbkdf2Params |

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

Browsers that support the "PBKDF2" algorithm for the `SubtleCrypto.deriveKey()` method will support this type.

See also
--------

* `SubtleCrypto.deriveKey()`.
TrustedScriptURL
================

The **`TrustedScriptURL`** interface of the `Trusted Types API` represents a string that a developer can insert into an injection sink that will parse it as a URL of an external script. These objects are created via `TrustedTypePolicy.createScriptURL()` and therefore have no constructor.

The value of a **TrustedScriptURL** object is set when the object is created and cannot be changed by JavaScript as there is no setter exposed.

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

`TrustedScriptURL.toJSON()`

Returns a JSON representation of the stored data.

`TrustedScriptURL.toString()`

A string containing the sanitized URL.

Examples
--------

The constant `sanitized` is an object created via a Trusted Types policy.


```js
const sanitized = scriptPolicy.createScriptURL(
  "https://example.com/my-script.js",
);
console.log(sanitized); /\* a TrustedScriptURL object \*/
```

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

| Specification |
| --- |
| Trusted Types # trused-script-url |

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

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

See also
--------

* Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types
OES\_standard\_derivatives extension
====================================

The **`OES_standard_derivatives`** extension is part of the WebGL API and adds the GLSL derivative functions `dFdx`, `dFdy`, and `fwidth`.

WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.

**Note:** This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default. In WebGL 2, the constant is available as `gl.FRAGMENT_SHADER_DERIVATIVE_HINT` and it requires GLSL `#version 300 es`.

Constants
---------

This extension exposes one new constant, which can be used in the `hint()` and `getParameter()` methods.

`ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES`

A `WebGL_API.Types` indicating the accuracy of the derivative calculation for the GLSL built-in functions: `dFdx`, `dFdy`, and `fwidth`.

GLSL built-in functions
-----------------------

The following new functions can be used in GLSL shader code, if this extension is enabled:


```cpp
genType dFdx(genType)
genType dFdy(genType)
genType fwidth(genType)
```

Examples
--------

Enabling the extensions:


```js
gl.getExtension("OES\_standard\_derivatives");
gl.getExtension("EXT\_shader\_texture\_lod");
```


Shader code that avoids artifacts when wrapping texture coordinates:


```html
<script type="x-shader/x-fragment">
 #extension GL\_EXT\_shader\_texture\_lod : enable
 #extension GL\_OES\_standard\_derivatives : enable

 uniform sampler2D myTexture;
 varying vec2 texcoord;

 void main(){
 gl\_FragColor = texture2DGradEXT(myTexture, mod(texcoord, vec2(0.1, 0.5)),
 dFdx(texcoord), dFdy(texcoord));
 }
</script>
```

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

| Specification |
| --- |
| WebGL OES\_standard\_derivatives Khronos Ratified Extension Specification  |

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

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

See also
--------

* `WebGLRenderingContext.getExtension()`
* `EXT_shader_texture_lod`
CSSScale
========

The **`CSSScale`** interface of the CSS\_Object\_Model#css\_typed\_object\_model represents the scale() and scale3d() values of the individual `transform` property in CSS. It inherits properties and methods from its parent `CSSTransformValue`.

CSSTransformComponent

CSSScaleConstructor
-----------

`CSSScale()`

Creates a new `CSSScale` object.

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

`x`

Returns or sets the x-axis value.

`y`

Returns or sets the y-axis value.

`z`

Returns or sets the z-axis value.

Examples
--------

To do.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # cssscale |

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

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

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

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

The **`XRLightProbe`** interface of the WebXR Device API contains lighting information at a given point in the user's environment. You can get an `XRLighting` object using the `XRSession.requestLightProbe()` method.

This object doesn't itself contain lighting values, but it is used to collect lighting states for each `XRFrame`. See `XRLightEstimate` for the estimated lighting values for an `XRLightProbe`.

EventTarget

XRLightProbeInstance properties
-------------------

`XRLightProbe.onreflectionchange`

Event handler property for the `reflectionchange` event.

`XRLightProbe.probeSpace` Read only  
Experimental

An `XRSpace` tracking the position and orientation the lighting estimations are relative to.

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

None.

Events
------

`reflectionchange` 
Experimental

Fired each time the estimated reflection cube map changes. (This happens when the user moves around and the environment's lighting changes.)

Examples
--------

### Getting an `XRLightProbe` object for a session

Use the `XRSession.requestLightProbe()` method to get a light probe.


```js
const lightProbe = await xrSession.requestLightProbe();
```

### Getting a probe pose within an `XRFrame`

Pass the light probe's `probeSpace` to `XRFrame.getPose()` to get a light probe for a pose.


```js
const probePose = xrFrame.getPose(lightProbe.probeSpace, xrReferenceSpace);
```

### Using the `reflectionchange` event

Pass `XRLightProbe` to get a reflection cube map whenever the `reflectionchange` event fires. See also `XRWebGLBinding.getReflectionCubeMap()`.


```js
const glBinding = new XRWebGLBinding(xrSession, gl);
const lightProbe = await xrSession.requestLightProbe();
let glCubeMap = glBinding.getReflectionCubeMap(lightProbe);

lightProbe.addEventListener("reflectionchange", () => {
  glCubeMap = glBinding.getReflectionCubeMap(lightProbe);
});
```

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

| Specification |
| --- |
| WebXR Lighting Estimation API Level 1 # xrlightprobe-interface |

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

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

See also
--------

* `XRSession.requestLightProbe()`
ImageBitmapRenderingContext
===========================

The **`ImageBitmapRenderingContext`** interface is a canvas rendering context that provides the functionality to replace the canvas's contents with the given `ImageBitmap`. Its context id (the first argument to `HTMLCanvasElement.getContext()` or `OffscreenCanvas.getContext()`) is `"bitmaprenderer"`.

This interface is available in both the window and the worker context.

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

`ImageBitmapRenderingContext.transferFromImageBitmap()`

Displays the given `ImageBitmap` in the canvas associated with this rendering context. Ownership of the `ImageBitmap` is transferred to the canvas. This was previously named `transferImageBitmap()`, but was renamed in a spec change. The old name is being kept as an alias to avoid code breakage.

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

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

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

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

See also
--------

* `OffscreenCanvas`
HTMLProgressElement
===================

The **`HTMLProgressElement`** interface provides special properties and methods (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating the layout and presentation of `<progress>` elements.

EventTarget

Node

Element

HTMLElement

HTMLProgressElementInstance properties
-------------------

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

`HTMLProgressElement.max`

A `double` value reflecting the content attribute of the same name, limited to numbers greater than zero. Its default value is `1.0`.

`HTMLProgressElement.position` Read only 

Returns a `double` value returning the result of dividing the current value (`value`) by the maximum value (`max`); if the progress bar is an indeterminate progress bar, it returns `-1`.

`HTMLProgressElement.value`

A `double` value that reflects the current value; if the progress bar is an indeterminate progress bar, it returns `0`.

`HTMLProgressElement.labels` Read only 

Returns `NodeList` containing the list of `<label>` elements that are labels for this element.

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

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

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

| Specification |
| --- |
| HTML Standard # htmlprogresselement |

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

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

See also
--------

* The HTML element implementing this interface: `<progress>`
TrustedScript
=============

The **`TrustedScript`** interface of the `Trusted Types API` represents a string with an uncompiled script body that a developer can insert into an injection sink that might execute the script. These objects are created via `TrustedTypePolicy.createScript()` and therefore have no constructor.

The value of a **TrustedScript** object is set when the object is created and cannot be changed by JavaScript as there is no setter exposed.

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

`TrustedScript.toJSON()`

Returns a JSON representation of the stored data.

`TrustedScript.toString()`

A string containing the sanitized script.

Examples
--------

The constant `sanitized` is an object created via a Trusted Types policy.


```js
const sanitized = scriptPolicy.createScript("eval('2 + 2')");
console.log(sanitized); /\* a TrustedScript object \*/
```

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

| Specification |
| --- |
| Trusted Types # trusted-script |

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

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

See also
--------

* Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types
SVGFEFuncRElement
=================

The **`SVGFEFuncRElement`** interface corresponds to the `<feFuncR>` element.

EventTarget

Node

Element

SVGElement

SVGComponentTransferFunctionElement

SVGFEFuncRElementInstance properties
-------------------

*This interface not provide any specific properties, but inherits properties from its parent interface, `SVGComponentTransferFunctionElement`.*

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

*This interface does not provide any specific methods, but implements those of its parent, `SVGComponentTransferFunctionElement`.*

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

| Specification |
| --- |
| Filter Effects Module Level 1 # InterfaceSVGFEFuncRElement |

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

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

See also
--------

* `<feFuncR>`
HTMLDetailsElement
==================

The **`HTMLDetailsElement`** interface provides special properties (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating `<details>` elements.

EventTarget

Node

Element

HTMLElement

HTMLDetailsElementInstance properties
-------------------

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

`HTMLDetailsElement.open`

A boolean value reflecting the `open` HTML attribute, indicating whether or not the element's contents (not counting the `<summary>`) is to be shown to the user.

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

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

Events
------

Listen to this event using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.

`toggle`

Fired when the `open`/`closed` state of a `<details>` element is toggled.

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

| Specification |
| --- |
| HTML Standard # htmldetailselement |

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

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

See also
--------

* The HTML element implementing this interface: `<details>`
btoa() global function
======================

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

 The **`btoa()`** method creates a
 Base64-encoded ASCII string from a *binary string* (i.e., a
 string in which each character in the string is treated as a byte
 of binary data).

 You can use this method to encode data which may otherwise cause communication
 problems, transmit it, then use the `atob()` method to decode the data again. For example, you can encode control
 characters such as ASCII values 0 through 31.

Syntax
------


```js
btoa(stringToEncode)
```

### Parameters

`stringToEncode`

The *binary string* to encode.

### Return value

 An ASCII string containing the Base64 representation of
 `stringToEncode`.

### Exceptions

`InvalidCharacterError` `DOMException`

 The string contained a character that did not fit in a single byte. See "Unicode
 strings" below for more detail.


Examples
--------


```js
const encodedData = btoa("Hello, world"); // encode a string
const decodedData = atob(encodedData); // decode the string
```

Unicode strings
---------------

 Base64, by design, expects binary data as its input. In terms of JavaScript strings,
 this means strings in which the code point of each character occupies only one byte. So if you pass a
 string into `btoa()` containing characters that occupy more than one byte,
 you will get an error, because this is not considered binary data:


```js
const ok = "a";
console.log(ok.codePointAt(0).toString(16)); // 61: occupies < 1 byte

const notOK = "✓";
console.log(notOK.codePointAt(0).toString(16)); // 2713: occupies > 1 byte

console.log(btoa(ok)); // YQ==
console.log(btoa(notOK)); // error
```


For how to work around this limitation when dealing with arbitrary Unicode text, see The "Unicode Problem" section of the Base64 glossary entry.

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

| Specification |
| --- |
| HTML Standard # dom-btoa-dev |

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

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

See also
--------

* A polyfill of `btoa` is available in `core-js`
* `data` URLs
* `atob()`
* Base64
DedicatedWorkerGlobalScope
==========================

The **`DedicatedWorkerGlobalScope`** object (the `Worker` global scope) is accessible through the `self` keyword. Some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the JavaScript Reference. See also: Functions available to workers.

EventTarget

WorkerGlobalScope

DedicatedWorkerGlobalScopeInstance properties
-------------------

*This interface inherits properties from the `WorkerGlobalScope` interface, and its parent `EventTarget`.*

`DedicatedWorkerGlobalScope.name` Read only 

The name that the `Worker` was (optionally) given when it was created using the `Worker()` constructor. This is mainly useful for debugging purposes.

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

*This interface inherits methods from the `WorkerGlobalScope` interface, and its parent `EventTarget`.*

`DedicatedWorkerGlobalScope.close()`

Discards any tasks queued in the `WorkerGlobalScope`'s event loop, effectively closing this particular scope.

`DedicatedWorkerGlobalScope.postMessage()`

Sends a message — which can consist of `any` JavaScript object — to the parent document that first spawned the worker.

`DedicatedWorkerGlobalScope.cancelAnimationFrame()`

Cancels an animation frame request previously scheduled through a call to `requestAnimationFrame()`.

`DedicatedWorkerGlobalScope.requestAnimationFrame()`

Perform an animation frame request and call a user-supplied callback function before the next repaint.

Events
------

Listen to this event using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.

`message`

Fired when the worker receives a message from its parent.

`messageerror`

Fired when a worker receives a message that can't be deserialized.

`rtctransform`

Fired when an encoded video or audio frame has been queued for processing by a WebRTC Encoded Transform.

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

| Specification |
| --- |
| HTML Standard # dedicated-workers-and-the-dedicatedworkerglobalscope-interface |

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

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

See also
--------

* `Worker`
* `WorkerGlobalScope`
* Using web workers
* Functions available to workers
SVGFEDiffuseLightingElement
===========================

The **`SVGFEDiffuseLightingElement`** interface corresponds to the `<feDiffuseLighting>` element.

EventTarget

Node

Element

SVGElement

SVGFEDiffuseLightingElementInstance properties
-------------------

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

`SVGFEDiffuseLightingElement.diffuseConstant` Read only 

An `SVGAnimatedNumber` corresponding to the `diffuseConstant` attribute of the given element.

`SVGFEDiffuseLightingElement.height` Read only 

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

`SVGFEDiffuseLightingElement.in1` Read only 

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

`SVGFEDiffuseLightingElement.kernelUnitLengthX` Read only 

An `SVGAnimatedNumber` corresponding to the X component of the `kernelUnitLength` attribute of the given element.

`SVGFEDiffuseLightingElement.kernelUnitLengthY` Read only 

An `SVGAnimatedNumber` corresponding to the Y component of the `kernelUnitLength` attribute of the given element.

`SVGFEDiffuseLightingElement.result` Read only 

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

`SVGFEDiffuseLightingElement.surfaceScale` Read only 

An `SVGAnimatedNumber` corresponding to the `surfaceScale` attribute of the given element.

`SVGFEDiffuseLightingElement.width` Read only 

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

`SVGFEDiffuseLightingElement.x` Read only 

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

`SVGFEDiffuseLightingElement.y` Read only 

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

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

*This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.*

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

| Specification |
| --- |
| Filter Effects Module Level 1 # InterfaceSVGFEDiffuseLightingElement |

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

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

See also
--------

* `<feDiffuseLighting>`