recursal/MDN huggingface dataset:
PaintWorkletGlobalScope: registerPaint() method
===============================================

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

 The **`registerPaint()`** method of the
 `PaintWorkletGlobalScope` interface registers a class to programmatically generate an
 image where a CSS property expects a file.

Syntax
------


```js
registerPaint(name, classRef)
```

### Parameters

`name`

The name of the worklet class to register.

`classRef`

A reference to the class that implements the worklet.

Return value
------------

None (`undefined`).

### Exceptions

`TypeError`

Thrown when one of the arguments is invalid or missing.

`InvalidModificationError` `DOMException`

Thrown when the a worklet already exists with the specified name.

Examples
--------

 The following shows registering an example worklet module. This should be in a separate
 js file. Note that `registerPaint()` is called without a reference to
 `PaintWorkletGlobalScope`. The file itself is loaded
 through `CSS.paintWorklet.addModule()` (documented here on the parent class
 of PaintWorklet, at `Worklet.addModule()`.


```js
/\* checkboardWorklet.js \*/

class CheckerboardPainter {
  paint(ctx, geom, properties) {
    // Use `ctx` as if it was a normal canvas
    const colors = ["red", "green", "blue"];
    const size = 32;
    for (let y = 0; y < geom.height / size; y++) {
      for (let x = 0; x < geom.width / size; x++) {
        const color = colors[(x + y) % colors.length];
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.rect(x \* size, y \* size, size, size);
        ctx.fill();
      }
    }
  }
}

// Register our class under a specific name
registerPaint("checkerboard", CheckerboardPainter);
```


 The first step in using a paintworklet is defining the paint worklet using the
 `registerPaint()` function, as done above. To use it, you register it with
 the `CSS.paintWorklet.addModule()` method:


```html
<script>
 CSS.paintWorklet.addModule("checkboardWorklet.js");
</script>
```


 You can then use the ``paint()`` CSS function in your
 CSS anywhere an ``<image>`` value is valid.


```css
li {
  background-image: paint(checkerboard);
}
```

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

| Specification |
| --- |
| CSS Painting API Level 1 # dom-paintworkletglobalscope-registerpaint |

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

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

See also
--------

* CSS Painting API
* Houdini APIs
PaintWorkletGlobalScope: devicePixelRatio property
==================================================

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

The **`devicePixelRatio`** read-only property of the `PaintWorkletGlobalScope` interface returns the current device's ratio of physical pixels to logical pixels.

Value
-----

A double-precision integer.

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

| Specification |
| --- |
| CSS Painting API Level 1 # ref-for-dom-paintworkletglobalscope-devicepixelratio |

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

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

See also
--------

* CSS.paintWorklet
* Worklet
* CSS Painting API
* Houdini APIs
* window.devicePixelRatio
XRLightProbe: probeSpace property
=================================

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

The *read-only* **`probeSpace`** property of the `XRLightProbe` interface returns an `XRSpace` tracking the position and orientation that the lighting estimations are relative to.

Value
-----

An `XRSpace` object.

Examples
--------

The `probeSpace` property returns the position and orientation in space that the lighting estimate is relative to. It may update over time as the user moves around. Use the `XRFrame.getPose()` method to get the current lighting state with each frame.


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

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

| Specification |
| --- |
| WebXR Lighting Estimation API Level 1 # dom-xrlightprobe-probespace |

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

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

See also
--------

* `XRSpace()`
* `XRFrame.getPose()`
XRLightProbe: reflectionchange event
====================================

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

The WebXR **`reflectionchange`** event fires each time the estimated reflection cube map changes. This happens in response to use movements through different lighting conditions or to direct changes to lighting itself. This event is not cancelable.

Syntax
------

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


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

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

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

`Event`.

Examples
--------

### Using the `reflectionchange` event

Whenever the `reflectionchange` event fires on a light probe, you can retrieve an updated cube map by calling `XRWebGLBinding.getReflectionCubeMap()`. This is less expensive than retrieving lighting information with every `XRFrame`.


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

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

### The `onreflectionchange` event handler property

The `reflectionchange` event is also available using the `onreflectionchange` event handler property.


```js
lightProbe.onreflectionchange = (event) => {
  glCubeMap = glBinding.getReflectionCubeMap(lightProbe);
};
```

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

| Specification |
| --- |
| WebXR Lighting Estimation API Level 1 # eventdef-xrlightprobe-reflectionchange |
| WebXR Lighting Estimation API Level 1 # dom-xrlightprobe-onreflectionchange |

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

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

See also
--------

* `addEventListener()`
Bluetooth: requestDevice() method
=================================

**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 **`Bluetooth.requestDevice()`** method of the
 `Bluetooth` interface returns a `Promise` to a
 `BluetoothDevice` object with the specified options. If there is no chooser
 UI, this method returns the first device matching the criteria.

Syntax
------


```js
requestDevice()
requestDevice(options)
```

### Parameters

`options` Optional

An object that sets options for the device request. The available options are:

`filters[]`

 An array of `BluetoothScanFilters`. This
 filter consists of an array of `BluetoothServiceUUID`s, a
 `name` parameter, and a `namePrefix` parameter.


`optionalServices[]`

An array of `BluetoothServiceUUID`s.

`acceptAllDevices`

 A boolean value indicating that the
 requesting script can accept all Bluetooth devices. The default is
 `false`.



### Return value

A `Promise` to a `BluetoothDevice` object.

### Exceptions

`TypeError`

 Thrown if the provided `options` do not make sense. For example,
 `options.filters` is present and `options.acceptAllDevices` is
 `true`, or if `options.filters` is not present and
 `options.acceptAllDevices` is `false`. Or
 `options.filters` is `[]`.


`NotFoundError` `DOMException`

Thrown if there is no Bluetooth device that matches the specified options.

`SecurityError` `DOMException`

 Thrown if this operation is not permitted in this context due to security concerns. For
 example, it is called from insecure origin.


Examples
--------


```js
// Discovery options match any devices advertising:
// . The standard heart rate service.
// . Both 16-bit service IDs 0x1802 and 0x1803.
// . A proprietary 128-bit UUID service c48e6067-5295-48d3-8d5c-0395f61792b1.
// . Devices with name "ExampleName".
// . Devices with name starting with "Prefix".
//
// And enables access to the battery service if devices
// include it, even if devices do not advertise that service.
let options = {
  filters: [
    { services: ["heart\_rate"] },
    { services: [0x1802, 0x1803] },
    { services: ["c48e6067-5295-48d3-8d5c-0395f61792b1"] },
    { name: "ExampleName" },
    { namePrefix: "Prefix" },
  ],
  optionalServices: ["battery\_service"],
};

navigator.bluetooth
  .requestDevice(options)
  .then((device) => {
    console.log(`Name: ${device.name}`);
    // Do something with the device.
  })
  .catch((error) => console.error(`Something went wrong. ${error}`));
```


Detailed examples are in the specification.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetooth-requestdevice |

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

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

**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 **`getAvailability()`** method of the `Bluetooth` interface returns `true` if the device has a Bluetooth adapter, and false otherwise (unless the user has configured the browser to not expose a real value).

**Note:** A user might not allow use of Web Bluetooth API, even if
 `getAvailability()` returns `true`
 (`navigator.bluetooth.requestDevice()` might
 not resolve with a `BluetoothDevice`). Also, a user can configure their browser to return a fixed value instead of a real one.


Syntax
------


```js
getAvailability()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `Boolean`.

Exceptions
----------

This method doesn't throw any exceptions.

Examples
--------

 The following snippet prints out a message in the console specifying whether or not
 Bluetooth is supported:


```js
navigator.bluetooth.getAvailability().then((available) => {
  if (available) {
    console.log("This device supports Bluetooth!");
  } else {
    console.log("Doh! Bluetooth is not supported");
  }
});
```

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetooth-getavailability |

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

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

**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 **`getDevices()`** method of
 `Bluetooth` interface of Web Bluetooth API exposes the
 Bluetooth devices this origin is allowed to access. This method does not display any
 permission prompts.


**Note:** This method returns a `BluetoothDevice` for each
 device the origin is currently allowed to access, even the ones that are out of range
 or powered off.


Syntax
------


```js
getDevices()
```

### Parameters

None.

### Return value

A `Promise` that resolves with an array of `BluetoothDevice`s.

Exceptions
----------

This method doesn't throw any exceptions.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetooth-getdevices |

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

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

The **`toString()`** method of the `TrustedScript` interface returns a string which may safely inserted into an injection sink.

Syntax
------


```js
toString()
```

### Parameters

None.

### Return value

A string containing the sanitized script.

Examples
--------

The constant `sanitized` is an object created via a Trusted Types policy. The `toString()` method returns a string to safely execute as a script.


```js
const sanitized = scriptPolicy.createScript("eval('2 + 2')");
console.log(sanitized.toString());
```

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

| Specification |
| --- |
| Trusted Types # trustedscripturl-stringification-behavior |

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

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

The **`toJSON()`** method of the `TrustedScript` interface returns a JSON representation of the stored data.

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

A string containing a JSON representation of the stored data.

Examples
--------

The constant `sanitized` is an object created via a Trusted Types policy. The `toString()` method returns a string to safely execute as a script.


```js
const sanitized = scriptPolicy.createScript("eval('2 + 2')");
console.log(sanitized.toJSON());
```

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

| Specification |
| --- |
| Trusted Types # dom-trustedscript-tojson |

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

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

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 **`DocumentTimeline()`** constructor of the Web Animations API creates a new instance of the `DocumentTimeline` object associated with the active document of the current browsing context.

Syntax
------


```js
new DocumentTimeline(options)
```

### Parameters

`options` Optional

An object specifying options for the new timeline. The following properties are available:

`originTime` Optional

 A `number` that specifies the zero time for the `DocumentTimeline`
 as a number of milliseconds relative to `Performance.timeOrigin`.
 Defaults to `0`.



Examples
--------

### Origin time

 A `DocumentTimeline` with an `originTime` of zero counts time
 starting from `Performance.timeOrigin`. This is the same behavior
 as `Document.timeline`.


```js
const timeline = new DocumentTimeline();
console.log(timeline.currentTime === document.timeline.currentTime); // true
```


 Setting a non-zero `originTime` will offset the `DocumentTimeline`
 from `Document.timeline` by that amount:


```js
const offsetTimeline = new DocumentTimeline({ originTime: 500 });
console.log(document.timeline.currentTime - offsetTimeline.currentTime); // 500
```


A `DocumentTimeline` relative to the current moment can be constructed with:


```js
const nowTimeline = new DocumentTimeline({
  originTime: document.timeline.currentTime,
});
console.log(nowTimeline.currentTime); // 0
```

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

| Specification |
| --- |
| Web Animations # dom-documenttimeline-documenttimeline |

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

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

See also
--------

* Web Animations API
* `AnimationTimeline`
* `DocumentTimeline`
FileSystemDirectoryEntry: createReader() method
===============================================

 The `FileSystemDirectoryEntry` interface's method
 **`createReader()`** returns a
 `FileSystemDirectoryReader` object which can be used to read the entries in
 the directory.

Syntax
------


```js
createReader()
```

### Parameters

None.

### Return value

 A `FileSystemDirectoryReader` object which can be used to read the
 directory's entries.

Examples
--------

 This example creates a method called `readDirectory()`, which fetches all of
 the entries in the specified `FileSystemDirectoryEntry` and returns them in
 an array.


```js
function readDirectory(directory) {
  let dirReader = directory.createReader();
  let entries = [];

  let getEntries = () => {
    dirReader.readEntries(
      (results) => {
        if (results.length) {
          entries = entries.concat(toArray(results));
          getEntries();
        }
      },
      (error) => {
        /\* handle error — error is a FileError object \*/
      },
    );
  };

  getEntries();
  return entries;
}
```


 This works by creating an internal function, `getEntries()`, which calls
 itself recursively to get all the entries in the directory, concatenating each batch to
 the array. Each iteration, `readEntries()` is called to get more entries. When it returns an empty array, the
 end of the directory has been reached, and the recursion ends. Once control is returned
 to `readDirectory()`, the array is returned to the caller.

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

| Specification |
| --- |
| File and Directory Entries API # dom-filesystemdirectoryentry-createreader |

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

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

See also
--------

* File and Directory Entries API
* Introduction to the File and Directory Entries API
* `FileSystemDirectoryReader`
* `FileSystemDirectoryEntry`
* `FileSystemFileEntry`
* `FileSystemEntry`
HTMLTimeElement: dateTime property
==================================

 The
 **`HTMLTimeElement.dateTime`**
 property is a string that reflects the `datetime` HTML attribute, containing a machine-readable form of the element's date and
 time value.

The format of the string must follow one of the following HTML microsyntaxes:

| Microsyntax | Description | Examples |
| --- | --- | --- |
| Valid month string | *YYYY*`-`*MM* | `2011-11`, `2013-05` |
| Valid date string | *YYYY*`-`*MM*`-`*DD* | `1887-12-01` |
| Valid yearless date string | *MM*`-`*DD* | `11-12` |
| Valid time string | *HH*`:`*MM**HH*`:`*MM*`:`*SS**HH*`:`*MM*`:`*SS*`.`*mmm* | `23:59``12:15:47``12:15:52.998` |
| Valid local date and time string | *YYYY*`-`*MM*`-`*DD*
*HH*`:`*MM**YYYY*`-`*MM*`-`*DD* *HH*`:`*MM*`:`*SS**YYYY*`-`*MM*`-`*DD* *HH*`:`*MM*`:`*SS*`.`*mmm**YYYY*`-`*MM*`-`*DD*`T`*HH*`:`*MM**YYYY*`-`*MM*`-`*DD*`T`*HH*`:`*MM*`:`*SS**YYYY*`-`*MM*`-`*DD*`T`*HH*`:`*MM*`:`*SS*`.`*mmm* | `2013-12-25 11:121972-07-25 13:43:071941-03-15
07:06:23.6782013-12-25T11:121972-07-25T13:43:071941-03-15T07:06:23.678` |
| Valid time-zone offset string | `Z``+`*HHMM*`+`*HH*`:`*MM*`-`*HHMM*`-`*HH*`:`*MM* | `Z+0200+04:30-0300-08:00` |
| Valid global date and time string | *Any combination of a valid local date and time string followed by a
valid time-zone offset string* | `2013-12-25 11:12+02001972-07-25 13:43:07+04:301941-03-15
07:06:23.678Z2013-12-25T11:12-08:00` |
| Valid week string | *YYYY*`-W`*WW* | `2013-W46` |
| Four or more ASCII digits | *YYYY* | `2013`, `0001` |
| Valid duration string | `P`*d*`D``T`*h*`H`*m*`M`*s*`S``P`*d*`D``T`*h*`H`*m*`M`*s*`.`X`S``P`*d*`D``T`*h*`H`*m*`M`*s*`.`XX`S``P`*d*`D``T`*h*`H`*m*`M`*s*`.`XXX`S``P``T`*h*`H`*m*`M`*s*`S``P``T`*h*`H`*m*`M`*s*`.`X`S``P``T`*h*`H`*m*`M`*s*`.`XX`S``P``T`*h*`H`*m*`M`*s*`.`XXX`S`*w*`w` *d*`d` *h*`h` *m*`m` *s*`s` | `P12DT7H12M13SP12DT7H12M13.3SP12DT7H12M13.45SP12DT7H12M13.455SPT7H12M13SPT7H12M13.2SPT7H12M13.56SPT7H12M13.999S7d
5h 24m 13s` |

Value
-----

A string.

Examples
--------


```js
// Assumes there is <time id="t"> element in the HTML

const t = document.getElementById("t");
t.dateTime = "6w 5h 34m 5s";
```

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

| Specification |
| --- |
| HTML Standard # dom-time-datetime |

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

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

See also
--------

* The `HTMLTimeElement` interface it belongs to.
FontFaceSetLoadEvent: fontfaces property
========================================

 The **`fontfaces`** read-only property of the
 `FontFaceSetLoadEvent` interface returns an array of
 `FontFace` instances, each of which represents a single usable font.

Value
-----

An array of `FontFace` instance.

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfacesetloadevent-fontfaces |

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

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

 The **`FontFaceSetLoadEvent()`** constructor creates a new
 `FontFaceSetLoadEvent` object which is fired whenever a
 `FontFaceSet` loads.

Syntax
------


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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `loading`, `loadingdone`, or `loadingerror`.


`options` Optional

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`fontfaces` Optional

An array of `FontFace` instances. It defaults to the empty array.


### Return value

A new `FontFaceSetLoadEvent` object.

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfacesetloadevent-fontfacesetloadevent |

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

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

 The **`TransitionEvent.pseudoElement`** read-only property is a
 string, starting with `'::'`, containing the name of the pseudo-element the animation runs on.
 If the transition doesn't run on a pseudo-element but on the element, an empty string:
 `''``.`

Value
-----

A string.

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

| Specification |
| --- |
| CSS Transitions # Events-TransitionEvent-pseudoElement |

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

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

See also
--------

* Using CSS transitions
* `transition`, `transition-delay`,
 `transition-duration`, `transition-property`,
 `transition-timing-function`.
TransitionEvent: elapsedTime property
=====================================

 The **`TransitionEvent.elapsedTime`** read-only property is a
 `float` giving the amount of time the animation has been running, in seconds,
 when this event fired. This value is not affected by the `transition-delay`
 property.

Value
-----

A number.

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

| Specification |
| --- |
| CSS Transitions # Events-TransitionEvent-elapsedTime |

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

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

See also
--------

* Using CSS transitions