recursal/MDN huggingface dataset:
CSSLayerStatementRule: nameList property
========================================

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

Newly availableSince March 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 read-only **`nameList`** property of the `CSSLayerStatementRule` interface return the list of associated cascade layer names. The names can't be modified.

Value
-----

A `Array` of strings, each representing a cascade layer represented by the `@layer` statement rule.

Examples
--------

### HTML


```html
<div></div>
```

### CSS


```css
@layer layerName, layerName2;

@layer layerName3 {
  div {
    font-family: serif;
  }
}
```

### JavaScript


```js
const item = document.getElementsByTagName("div")[0];
const rules = document.styleSheets[1].cssRules;
// Note that stylesheet #1 is the stylesheet associated with this embedded example,
// while stylesheet #0 is the stylesheet associated with the whole MDN page

const layerStatementRule = rules[0]; // A CSSLayerStatementRule
const layerBlockRule = rules[1]; // A CSSLayerBlockRule; no nameList property.

item.textContent = `@layer declares the following layers: ${layer.nameList.join(
 ", ",
)}.`;
```

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # dom-csslayerstatementrule-namelist |

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

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

See also
--------

* `CSSLayerBlockRule.name`
* `@layer`
* The `@layer` statement at-rule for named layers
MediaStreamTrackEvent: track property
=====================================

The **`track`** read-only property of the `MediaStreamTrackEvent` interface returns the `MediaStreamTrack` associated with this event.

Value
-----

A `MediaStreamTrack` object.

Examples
--------


```js
const stream = new MediaStream();

stream.addEventListener("removetrack", (event) => {
  console.log(`${event.track.kind} track removed`);
});
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrackevent-track |

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

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

See also
--------

* `addtrack` and `removetrack` events
* `MediaStreamTrack`
MediaStreamTrackEvent: MediaStreamTrackEvent() constructor
==========================================================

 The **`MediaStreamTrackEvent()`** constructor returns a new `MediaStreamTrackEvent` object,
 which represents an event signaling that a `MediaStreamTrack` has been added to or removed from a `MediaStream`.

Syntax
------


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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `addtrack` or `removetrack`.


`options`

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

`track`

A `MediaStreamTrack` object representing the track which was added to or removed from the stream.


### Return value

A new `MediaStreamTrackEvent` object, initialized based on the provided options.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrackevent-constructor |

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

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

See also
--------

* `addtrack` and `removetrack` events
* `MediaStreamTrack`
* `MediaStream`
* Media Capture and Streams API
XRWebGLBinding: getReflectionCubeMap() method
=============================================

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

The **`getReflectionCubeMap()`** method of the `XRWebGLBinding` interface returns a `WebGLTexture` object containing a reflection cube map texture.

The texture format is specified by the session's `reflectionFormat`. See the `options` parameter on `XRSession.requestLightProbe()` and `XRSession.preferredReflectionFormat` for more details. By default, the `srgba8` format is used. When using a `rgba16f` format, you need to be within a WebGL 2.0 context or enable the `OES_texture_half_float` extension within WebGL 1.0 contexts.

Syntax
------


```js
getReflectionCubeMap(lightProbe)
```

### Parameters

`lightProbe`

An `XRLightProbe` object returned by calling `XRSession.requestLightProbe()`.

### Return value

A `WebGLTexture` object.

Examples
--------

You typically call `getReflectionCubeMap()` whenever the `reflectionchange` event fires on a light probe to retrieve an updated cube map. This is less expensive than retrieving lighting information with every `XRFrame`.

If the `rgba16f` format is used, enable the `OES_texture_half_float` extension within WebGL 1.0 contexts.


```js
const glBinding = new XRWebGLBinding(xrSession, gl);
gl.getExtension("OES\_texture\_half\_float"); // if rgba16f is the preferredReflectionFormat

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

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

| Specification |
| --- |
| WebXR Lighting Estimation API Level 1 # dom-xrwebglbinding-getreflectioncubemap |

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

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

See also
--------

* `XRLightProbe`
* `OES_texture_half_float`
XRWebGLBinding: XRWebGLBinding() constructor
============================================

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

 The **`XRWebGLBinding()`** constructor creates and
 returns a new `XRWebGLBinding` object.

Syntax
------


```js
new XRWebGLBinding(session, context)
```

### Parameters

`session`

 An `XRSession` object specifying the WebXR session which will be
 rendered using the WebGL context.


`context`

 A `WebGLRenderingContext` or `WebGL2RenderingContext`
 identifying the WebGL drawing context to use for rendering the scene for the specified
 WebXR session.


### Return value

A new `XRWebGLBinding`.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the new `XRWebGLBinding` could not be created due to one of the following situations:

* The `XRSession` specified by `session` has already been
 stopped.
* The specified WebGL context, `context`, has been lost for any reason, such as a GPU switch or reset.
* The specified `session` is immersive but the `context` is
 not WebXR compatible.

Examples
--------


```js
const canvasElement = document.querySelector(".output-canvas");
const gl = canvasElement.getContext("webgl");
const xrSession = await navigator.xr.requestSession("immersive-vr");
await gl.makeXRCompatible();

const glBinding = new XRWebGLBinding(xrSession, gl);
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-xrwebglbinding |

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

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

See also
--------

* `WebGLRenderingContext.makeXRCompatible()`
XRWebGLBinding: getViewSubImage() method
========================================

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

The **`getViewSubImage()`** method of the `XRWebGLBinding` interface returns a `XRWebGLSubImage` object representing the WebGL texture to render for a view.

Syntax
------


```js
getViewSubImage(layer, view)
```

### Parameters

`layer`

The `XRProjectionLayer` to use for rendering (to render other layer types, see `XRWebGLBinding.getSubImage()`).

`view`

The `XRView` to use for rendering.

### Return value

A `XRWebGLSubImage` object.

### Exceptions

A `TypeError` is thrown,

* if `layer` is not in the session's `layer` array.
Examples
--------

### Rendering an `XRProjectionLayer`

The following example renders an `XRProjectionLayer` to a view.


```js
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const layer = xrGlBinding.createProjectionLayer({});
const framebuffer = gl.createFramebuffer();

xrSession.updateRenderState({ layers: [layer] });
xrSession.requestAnimationFrame(onXRFrame);

function onXRFrame(time, xrFrame) {
  xrSession.requestAnimationFrame(onXRFrame);

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);

  for (const view in xrViewerPose.views) {
    const subImage = xrGlBinding.getViewSubImage(layer, view);
    gl.framebufferTexture2D(
      gl.FRAMEBUFFER,
      gl.COLOR\_ATTACHMENT0,
      gl.TEXTURE\_2D,
      subImage.colorTexture,
      0,
    );
    gl.framebufferTexture2D(
      gl.FRAMEBUFFER,
      gl.DEPTH\_ATTACHMENT,
      gl.TEXTURE\_2D,
      subImage.depthStencilTexture,
      0,
    );
    const viewport = subImage.viewport;
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

    // Render from the viewpoint of xrView
  }
}
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-getviewsubimage |

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

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

See also
--------

* `XRWebGLSubImage`
XRWebGLBinding: nativeProjectionScaleFactor property
====================================================

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

The read-only **`nativeProjectionScaleFactor`** property of the `XRWebGLBinding` interface represents the scaling factor by which the projection layer's resolution is multiplied by to get the native resolution of the WebXR device's frame buffer.

For more details, see `XRWebGLLayer.getNativeFramebufferScaleFactor()`.

Value
-----

A floating-point number representing by how much the device's native frame buffer size is scaled by.

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-nativeprojectionscalefactor |

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

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

See also
--------

* `XRWebGLLayer.getNativeFramebufferScaleFactor()`
XRWebGLBinding: getDepthInformation() method
============================================

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

The **`getDepthInformation()`** method of the `XRWebGLBinding` interface returns an `XRWebGLDepthInformation` object containing WebGL depth information.

Syntax
------


```js
getDepthInformation(view)
```

### Parameters

`view`

An `XRView` object obtained from a viewer pose.

### Return value

An `XRWebGLDepthInformation` object.

### Exceptions

`NotSupportedError` `DOMException`

Thrown if `"depth-sensing"` is not in the list of enabled features for this `XRSession`.

`InvalidStateError` `DOMException`

Thrown if the `XRFrame` is not active nor animated. Obtaining depth information is only valid within the `requestAnimationFrame()` callback.

`InvalidStateError` `DOMException`

Thrown if the session's `depthUsage` is not `"gpu-optimized"`.

Examples
--------

### Obtaining WebGL depth information


```js
const canvasElement = document.querySelector(".output-canvas");
const gl = canvasElement.getContext("webgl");
await gl.makeXRCompatible();

// Make sure to request a session with depth-sensing enabled
const session = navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["depth-sensing"],
  depthSensing: {
    usagePreference: ["gpu-optimized"],
    formatPreference: ["luminance-alpha"],
  },
});

const glBinding = new XRWebGLBinding(session, gl);

// …

// Obtain depth information in an active and animated frame
function rafCallback(time, frame) {
  session.requestAnimationFrame(rafCallback);
  const pose = frame.getViewerPose(referenceSpace);
  if (pose) {
    for (const view of pose.views) {
      const depthInformation = glBinding.getDepthInformation(view);
      if (depthInformation) {
        // Do something with the depth information
        // gl.bindTexture(gl.TEXTURE\_2D, depthInformation.texture);
        // …
      }
    }
  }
}
```

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

| Specification |
| --- |
| WebXR Depth Sensing Module # dom-xrwebglbinding-getdepthinformation |

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

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

See also
--------

* `XRWebGLDepthInformation.texture`
XRWebGLBinding: getSubImage() method
====================================

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

The **`getSubImage()`** method of the `XRWebGLBinding` interface returns a `XRWebGLSubImage` object representing the WebGL texture to render.

Syntax
------


```js
getSubImage(layer, frame)
getSubImage(layer, frame, eye)
```

### Parameters

`layer`

The `XRCompositionLayer` to use for rendering (can be all types of `XRCompositionLayer` objects except `XRProjectionLayer`, see `XRWebGLBinding.getViewSubImage()` for rendering projection layers).

`frame`

The `XRFrame` frame to use for rendering.

`eye` Optional

An optional `XRView.eye` indicating which view's eye to use for rendering. Possible values:

`left`

The `XRView` represents the point-of-view of the viewer's left eye.

`right`

The view represents the viewer's right eye.

`none`

 The view describes a monoscopic view, or the view otherwise doesn't represent a particular eye's point-of-view.
 Defaults to `none`.



### Return value

A `XRWebGLSubImage` object.

### Exceptions

A `TypeError` is thrown,

* if `layer` is not in the session's `layer` array.
* if `layer` is a `XRProjectionLayer`.
* if the layer's `layout` property is `default`.
* if the layer's `layout` property is `stereo` and `eye` is `none`.
Examples
--------

### Rendering an `XRQuadLayer`

The following example renders an `XRQuadLayer`.


```js
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const quadLayer = xrGlBinding.createQuadLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 512,
  viewPixelHeight: 512,
});

// Position 2 meters away from the origin with a width and height of 1.5 meters
quadLayer.transform = new XRRigidTransform({ z: -2 });
quadLayer.width = 1.5;
quadLayer.height = 1.5;

const framebuffer = gl.createFramebuffer();
xrSession.updateRenderState({ layers: [quadLayer] });
xrSession.requestAnimationFrame(onXRFrame);

function onXRFrame(time, xrFrame) {
  xrSession.requestAnimationFrame(onXRFrame);

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  let subImage = xrGlBinding.getSubImage(quadLayer, xrFrame);
  gl.framebufferTexture2D(
    gl.FRAMEBUFFER,
    gl.COLOR\_ATTACHMENT0,
    subImage.colorTexture,
    0,
  );
  let viewport = subImage.viewport;
  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  // Render content for the quad layer
}
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-getsubimage |

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

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

See also
--------

* `XRWebGLSubImage`
GeolocationPosition: timestamp property
=======================================

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

The **`timestamp`** read-only property of the `GeolocationPosition` interface represents the date and time that the position was acquired by the device.

Value
-----

A number containing a timestamp, given as Unix time in milliseconds.

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

| Specification |
| --- |
| Geolocation API # timestamp-attribute |

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

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

See also
--------

* Using the Geolocation API
* `GeolocationPosition`
GeolocationPosition: coords property
====================================

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

The **`coords`** read-only property of the `GeolocationPosition` interface returns a `GeolocationCoordinates` object representing a geographic position. It contains the location, that is longitude and latitude on the Earth, the altitude, and the speed of the object concerned, regrouped inside the returned value. It also contains accuracy information about these values.

Value
-----

A `GeolocationCoordinates` object instance.

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

| Specification |
| --- |
| Geolocation API # coords-attribute |

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

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

See also
--------

* Using the Geolocation API
* `GeolocationPosition`
HTMLAudioElement: Audio() constructor
=====================================

 The **`Audio()`** constructor creates
 and returns a new `HTMLAudioElement` which can be either attached to
 a document for the user to interact with and/or listen to, or can be used
 offscreen to manage and play audio.

Syntax
------


```js
new Audio()
new Audio(url)
```

### Parameters

`url` Optional

 An optional string containing the URL of an audio file to be
 associated with the new audio element.


### Return value

 A new `HTMLAudioElement` object, configured to be used for playing back
 the audio from the file specified by `url`. The new object's
 `preload` property is set
 to `auto` and its `src` property is set to the specified URL
 or `null` if no URL is given. If a URL is specified, the browser begins
 to *asynchronously* load the media resource before returning the new object.

Usage notes
-----------

 You can also use other element-creation methods, such as the `document`
 object's `createElement()` method, to construct
 a new `HTMLAudioElement`.

### Determining when playback can begin

 There are three ways you can tell when enough of the audio file has loaded to allow
 playback to begin:

* Check the value of the `readyState`
 property. If it's `HTMLMediaElement.HAVE_FUTURE_DATA`, there's enough
 data available to begin playback and play for at least a short time. If
 it's `HTMLMediaElement.HAVE_ENOUGH_DATA`, then there's enough data
 available that, given the current download rate, you should be able to play the
 audio through to the end without interruption.
* Listen for the `canplay` event. It
 is sent to the `<audio>` element when there's enough audio
 available to begin playback, although interruptions may occur.
* Listen for the `canplaythrough` event. It is sent when it's estimated that the audio should be
 able to play to the end without interruption.

The event-based approach is best:


```js
myAudioElement.addEventListener("canplaythrough", (event) => {
  /\* the audio is now playable; play it if permissions allow \*/
  myAudioElement.play();
});
```

### Memory usage and management

 If all references to an audio element created using
 the `Audio()` constructor are deleted, the element itself won't be removed
 from memory by the JavaScript runtime's garbage collection mechanism if playback is
 currently underway. Instead, the audio will keep playing and the object will remain in
 memory until playback ends. At that time, the object becomes
 subject to garbage collection.

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

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

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

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

See also
--------

* Web media technologies
* HTML element implementing this interface: `<audio>`.
SVGAnimationElement: repeatEvent event
======================================

The **`repeatEvent`** event of the `SVGAnimationElement` interface is fired when the element's local timeline repeats. It will be fired each time the element repeats, after the first iteration.

**Note:** Associated with the `repeatEvent` event is an integer that indicates which repeat iteration is beginning; this can be found in the `detail` property of the event object. The value is a 0-based integer, but the repeat event is not raised for the first iteration and so the observed values will be >= 1. This is supported in Firefox, but not in Chrome.

This event is not cancelable and does not bubble.

Syntax
------

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


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

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

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

A `TimeEvent`. Inherits from `Event`.

Event

TimeEventEvent properties
----------------

`TimeEvent.detail` Read only 

A `long` that specifies some detail information about the Event, depending on the type of the event. For this event type, indicates the repeat number for the animation.

`TimeEvent.view` Read only 

A WindowProxy that identifies the Window from which the event was generated.

Examples
--------

### Animated circle


```html
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
  <title>SVG SMIL Animate with Path</title>
  <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

<hr />

<ul></ul>
```



```css
ul {
  height: 100px;
  border: 1px solid #ddd;
  overflow-y: scroll;
  padding: 10px 30px;
}
```



```js
let svgElem = document.querySelector("svg");
let animateElem = document.querySelector("animateMotion");
let list = document.querySelector("ul");

animateElem.addEventListener("beginEvent", () => {
  let listItem = document.createElement("li");
  listItem.textContent = "beginEvent fired";
  list.appendChild(listItem);
});

animateElem.addEventListener("repeatEvent", (e) => {
  let listItem = document.createElement("li");
  let msg = "repeatEvent fired";
  if (e.detail) {
    msg += `; repeat number: ${e.detail}`;
  }
  listItem.textContent = msg;
  list.appendChild(listItem);
});
```

### Event handler property equivalent

Note that you can also create an event listener for the `repeat` event using the `onrepeat` event handler property:


```js
animateElem.onrepeat = () => {
  console.log("repeatEvent fired");
};
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RepeatEvent |

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

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

See also
--------

* SVG animation with SMIL
* `beginEvent` event
* `endEvent` event
SVGAnimationElement: targetElement property
===========================================

 The **`SVGAnimationElement.targetElement`** property refers to
 the element which is being animated. If no target element is being animated (for
 example, because the `href` attribute specifies an unknown element), the
 value returned is `null`.

Value
-----

A SVGElement object.

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

| Specification |
| --- |
| SVG Animations Level 2 # \_\_svg\_\_SVGAnimationElement\_\_targetElement |

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

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