recursal/MDN huggingface dataset:
AnimationPlaybackEvent: timelineTime 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 **`timelineTime`** read-only property of the `AnimationPlaybackEvent` interface represents the time value of the animation's `timeline` at the moment the event is queued. This will be unresolved if the animation was not associated with a timeline at the time the event was generated or if the associated timeline was inactive.

Value
-----

A number representing the current time in milliseconds, or `null`.

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

| Specification |
| --- |
| Web Animations # dom-animationplaybackevent-timelinetime |

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

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

See also
--------

* Web Animations API
* `AnimationPlayBackEvent`
* `AnimationTimeline`
PerformanceLongTaskTiming: toJSON() method
==========================================

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

The **`toJSON()`** method of the `PerformanceLongTaskTiming` interface is a serializer; it returns a JSON representation of the `PerformanceLongTaskTiming` object.

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

A `JSON` object that is the serialization of the `PerformanceLongTaskTiming` object.

Examples
--------

### Using the toJSON method

In this example, calling `entry.toJSON()` returns a JSON representation of the `PerformanceLongTaskTiming` object.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.toJSON());
  });
});

observer.observe({ type: "longtask", buffered: true });
```


This would log a JSON object like so:


```json
{
  "name": "self",
  "entryType": "longtask",
  "startTime": 183,
  "duration": 60,
  "attribution": [
    {
      "name": "unknown",
      "entryType": "taskattribution",
      "startTime": 0,
      "duration": 0,
      "containerType": "window",
      "containerSrc": "",
      "containerId": "",
      "containerName": ""
    }
  ]
}
```


To get a JSON string, you can use `JSON.stringify(entry)` directly; it will call `toJSON()` automatically.

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

| Specification |
| --- |
| Long Tasks API # dom-performancelongtasktiming-tojson |

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

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

See also
--------

* `JSON`
PerformanceLongTaskTiming: attribution property
===============================================

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

The **`attribution`** readonly property of the `PerformanceLongTaskTiming` interface returns an array of `TaskAttributionTiming` objects.

Value
-----

An `Array` of `TaskAttributionTiming` objects.

Examples
--------

### Logging attributions for long tasks


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    entry.attribution.forEach((attributionEntry) => {
      console.log(attributionEntry);
    });
  });
});

observer.observe({ type: "longtask", buffered: true });
```

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

| Specification |
| --- |
| Long Tasks API # dom-performancelongtasktiming-attribution |

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

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

See also
--------

* `TaskAttributionTiming`
ConvolverNode: ConvolverNode() constructor
==========================================

 The **`ConvolverNode()`** constructor of the Web Audio API creates a new
 `ConvolverNode` object instance.

Syntax
------


```js
new ConvolverNode(context, options)
```

### Parameters

`context`

A reference to an `AudioContext`.

`options` Optional

Options are as follows:

`buffer`

 A mono, stereo, or
 4-channel `AudioBuffer` containing the
 (possibly multichannel) impulse response used by the `ConvolverNode`
 to create the reverb effect.


`disableNormalization`

 A boolean value controlling
 whether the impulse response from the buffer will be scaled by an equal-power
 normalization, or not. The default is '`false`'.


`channelCount`

 Represents an integer used to determine how many channels are used
 when up-mixing and down-mixing connections to any inputs to the node.
 (See `AudioNode.channelCount` for more information.)
 Its usage and precise definition depend on the value of `channelCountMode`.


`channelCountMode`

 Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.
 (See `AudioNode.channelCountMode` for more information including default values.)


`channelInterpretation`

 Represents an enumerated value describing the meaning of the channels.
 This interpretation will define how audio up-mixing and down-mixing will happen.
 The possible values are `"speakers"` or `"discrete"`.
 (See `AudioNode.channelCountMode` for more information including default values.)



### Return value

A new `ConvolverNode` object instance.

### Exceptions

`NotSupportedError` `DOMException`

 Thrown if the referenced `AudioBuffer` does not have the
 correct number of channels, or it has a different sample rate to the
 associated `AudioContext`.


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

| Specification |
| --- |
| Web Audio API # dom-convolvernode-constructor-convolvernode |

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

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

 The `normalize` property of the `ConvolverNode` interface
 is a boolean that controls whether the impulse response from the buffer will be
 scaled by an equal-power normalization when the `buffer` attribute is set,
 or not.

 Its default value is `true` in order to achieve a more uniform output
 level from the convolver, when loaded with diverse impulse responses. If normalize is
 set to `false`, then the convolution will be rendered with no
 pre-processing/scaling of the impulse response. Changes to this value do not take
 effect until the next time the `buffer` attribute is set.

Value
-----

A boolean.

Examples
--------

### Switching normalization off

The following example creates a convolver node and assigns it an `AudioBuffer`. Before assigning the audio buffer, it sets `normalize` to `false`.


```js
const audioCtx = new AudioContext();
// ...

const convolver = audioCtx.createConvolver();
// ...

// Grab audio track via fetch() for convolver node
try {
  const response = await fetch(
    "https://mdn.github.io/voice-change-o-matic/audio/concert-crowd.ogg",
  );
  const arrayBuffer = await response.arrayBuffer();
  const decodedAudio = await audioCtx.decodeAudioData(arrayBuffer);
  convolver.normalize = false; // must be set before the buffer, to take effect
  convolver.buffer = decodedAudio;
} catch (error) {
  console.error(
    `Unable to fetch the audio file: ${name} Error: ${err.message}`,
  );
}
```

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

| Specification |
| --- |
| Web Audio API # dom-convolvernode-normalize |

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

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

See also
--------

* Using the Web Audio API
ConvolverNode: buffer property
==============================

The **`buffer`** property of the `ConvolverNode` interface represents a mono, stereo, or 4-channel `AudioBuffer` containing the (possibly multichannel) impulse response used by the `ConvolverNode` to create the reverb effect.

This is normally a simple recording of as-close-to-an-impulse as can be found in the space you want to model. For example, if you want to model the reverb in your bathroom, you might set up a microphone near the door to record the sound of a balloon pop or synthesized impulse from the sink. That audio recording could then be used as the buffer.

This audio buffer must have the same sample-rate as the `AudioContext` or an exception will be thrown. At the time when this attribute is set, the buffer and the state of the attribute will be used to configure the `ConvolverNode` with this impulse response having the given normalization. The initial value of this attribute is `null`.

Value
-----

An `AudioBuffer`.

Examples
--------

### Assigning an audio buffer

The following example creates a convolver node and assigns it an `AudioBuffer`.

For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js for the code that is excerpted below).


```js
const audioCtx = new AudioContext();
// ...

const convolver = audioCtx.createConvolver();
// ...

// Grab audio track via fetch() for convolver node
try {
  const response = await fetch(
    "https://mdn.github.io/voice-change-o-matic/audio/concert-crowd.ogg",
  );
  const arrayBuffer = await response.arrayBuffer();
  const decodedAudio = await audioCtx.decodeAudioData(arrayBuffer);
  convolver.buffer = decodedAudio;
} catch (error) {
  console.error(
    `Unable to fetch the audio file: ${name} Error: ${err.message}`,
  );
}
```

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

| Specification |
| --- |
| Web Audio API # dom-convolvernode-buffer |

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

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

See also
--------

* Using the Web Audio API
XRPose: emulatedPosition property
=================================

 The `emulatedPosition` read-only attribute of the
 `XRPose` interface is a Boolean value indicating whether or not both the
 `position` component of the pose's
 `transform` is directly taken from the XR device, or
 it's simulated or computed based on other sources.

Value
-----

 A Boolean which is `true` if the pose's position is computed based on
 estimates or is derived from sources other than direct sensor data. If the position is
 precisely based on direct sensor inputs, the value is `false`.

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

 There are two basic categories of XR tracking systems. A basic XR headset provides
 three degrees of freedom (3DoF), tracking the pitch, yaw, and roll of the user's head.
 No information is available about movement forward, backward, or to the sides. Any such
 data is taken from other sources, such as keyboard or mouse inputs or game controllers.
 As such, the position is considered to be emulated, so the `emulatedPosition`
 property is `true`.

 Contrariwise, XR devices which can also track movement forward and backward as well as
 laterally—six degree of freedom (6DoF) devices—don't require any information from other
 sources to determine the user's position, so the value of `emulatedPosition`
 is `false`.

 The same notion applies not just to the user's head, but to any object. A hand
 controller that can directly report its position would have a value of
 `false` for this property as well. If its position is computed as an offset
 from another object (such as by basing it off the model representing the user's body),
 then this value is `true`.

 This information is important because devices whose position is emulated are prone to
 their offset drifting relative to the real world space over time. This is because
 emulating a position based on accelerometer inputs and models tends to introduce minor
 errors which accumulate over time.

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

| Specification |
| --- |
| WebXR Device API # dom-xrpose-emulatedposition |

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

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

 The `linearVelocity` read-only property of the
 `XRPose` interface is a `DOMPointReadOnly` describing
 the linear velocity in meters per second relative to the base
 `XRSpace`.

Value
-----

 A `DOMPointReadOnly` describing the linear velocity in meters
 per second relative to the base `XRSpace`. Returns `null`
 if the user agent can't populate this value.

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

| Specification |
| --- |
| WebXR Device API # dom-xrpose-linearvelocity |

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

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

See also
--------

* `XRPose.linearVelocity`
XRPose: angularVelocity property
================================

 The `angularVelocity` read-only property of the
 `XRPose` interface is a `DOMPointReadOnly` describing
 the angular velocity in radians per second relative to the base
 `XRSpace`.

Value
-----

 A `DOMPointReadOnly` describing the angular velocity in radians
 per second relative to the base `XRSpace`. Returns `null`
 if the user agent can't populate this value.

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

| Specification |
| --- |
| WebXR Device API # dom-xrpose-angularvelocity |

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

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

See also
--------

* `XRPose.linearVelocity`
XRPose: transform property
==========================

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

 The `transform` read-only attribute of the
 `XRPose` interface is a `XRRigidTransform` object providing
 the position and orientation of the pose relative to the base `XRSpace`
 as specified when the pose was obtained by calling
 `XRFrame.getPose()`.

Value
-----

 An `XRRigidTransform` which provides the position and orientation of the
 `XRPose` relative to the `XRFrame` to which this
 `XRPose` is aligned. This is the same pose that's returned by the frame's
 `getPose()` method.

Examples
--------

 This handler for the `XRSession` event `select` handles events for tracked pointers. It determines the targeted object by
 passing the event frame's pose into a function called `findTargetUsingRay()`,
 then dispatches the event differently depending on the user's handedness; this is done
 by comparing the value of the `XRInputSource` property
 `handedness` to a value in the variable
 `user.handedness`. If the source is a controller in the user's primary hand,
 a function is called on the targeted object called `primaryAction()`;
 otherwise, it calls the targeted object's `offHandAction()` function.


```js
xrSession.addEventListener("select", (event) => {
  let source = event.inputSource;
  let frame = event.frame;
  let targetRayPose = frame.getPose(source.targetRaySpace, myRefSpace);
  let targetObject = findTargetUsingRay(targetRay.transform.matrix);

  if (source.targetRayMode === "tracked-pointer") {
    if (source.handedness === user.handedness) {
      targetObject.primaryAction();
    } else {
      targetObject.offHandAction();
    }
  }
});
```

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

| Specification |
| --- |
| WebXR Device API # dom-xrpose-transform |

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

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

The **`selectorText`** property of the `CSSStyleRule` interface gets and sets the selectors associated with the `CSSStyleRule`.

Value
-----

A string.

Examples
--------

The CSS includes one style rule. This will be the first `CSSRule` returned by `document.styleSheets[0].cssRules`. `myRules[0].selectorText` therefore returns a literal string of the selector, in this case `"h1"`.


```css
h1 {
  color: pink;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].selectorText); // a string containing "h1".
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylerule-selectortext |

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

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

The read-only **`style`** property is the `CSSStyleDeclaration` interface for the declaration block of the `CSSStyleRule`.

Value
-----

A `CSSStyleDeclaration` object, with the following properties:

computed flag

Unset.

declarations

The declared declarations in the rule, in the order they were specified, shorthand properties expanded to longhands.

parent CSS rule

The context object, which is an alias for this.

owner node

Null.

Examples
--------

 The CSS includes one style rule. This will be the first `CSSRule` returned by `document.styleSheets[0].cssRules`.
 `myRules[0].style` therefore returns a `CSSStyleDeclaration` object representing the declarations defined for `h1`.


```css
h1 {
  color: pink;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].style); // a CSSStyleDeclaration representing the declarations on the h1.
```


**Note:** The declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylerule-style |

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

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

 The **`styleMap`** read-only property of the
 `CSSStyleRule` interface returns a `StylePropertyMap` object
 which provides access to the rule's property-value pairs.

Value
-----

A `StylePropertyMap` object.

Example
-------

 The following example shows `styleMap` being used to modify a style using
 the `StylePropertyMap.set()` method.


```js
const stylesheet = document.styleSheets[0];

Object.values(stylesheet.cssRules).forEach((block) => {
  if (block.selectorText === "button") {
    block.styleMap.set("--mainColor", "black");
  }
});
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssstylerule-stylemap |

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

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

The read-only **`style`** property of the `MathMLElement` returns the *inline* style of an element in the form of a live `CSSStyleDeclaration` object that contains a list of all styles properties for that element with values assigned only for the attributes that are defined in the element's inline `style` attribute.

Shorthand properties are expanded. If you set `style="border-top: 1px solid black"`, the longhand properties (`border-top-color`, `border-top-style`, and `border-top-width`) are set instead.

This property is read-only, meaning it is not possible to assign a `CSSStyleDeclaration` object to it. Nevertheless, it is possible to set an inline style by assigning a *string* directly to the `style` property. In this case the string is forwarded to `CSSStyleDeclaration.cssText`. Using `style` in this manner will completely overwrite all inline styles on the element.

Therefore, to add specific styles to an element without altering other style values, it is generally preferable to set individual properties on the `CSSStyleDeclaration` object. For example, you can write `element.style.backgroundColor = "red"`.

A style declaration is reset by setting it to `null` or an empty string, e.g., `elt.style.color = null`.

**Note:** CSS property names are converted to JavaScript identifier with these rules:

* If the property is made of one word, it remains as it is: `height` stays as is (in lowercase).
* If the property is made of several words, separated by dashes, the dashes are removed and it is converted to camel case: `background-attachment` becomes `backgroundAttachment`.
* The property `float`, being a reserved JavaScript keyword, is converted to `cssFloat`.

The `style` property has the same priority in the CSS cascade as an inline style declaration set via the `style` attribute.

Value
-----

A live `CSSStyleDeclaration` object.

Examples
--------

### Getting style information

The following code snippet demonstrates how the `style` attribute is translated into a list of entries in `CSSStyleDeclaration` :


```html
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow>
    <mi>f</mi>
    <mo stretchy="false">(</mo>
    <mi class="parameter" style="color: red; border-bottom: 1px solid">x</mi>
    <mo stretchy="false">)</mo>
    <mo>=</mo>
    <mi>x</mi>
  </mrow>
</math>
<pre id="out"></pre>
```



```js
const element = document.querySelector(".parameter");
const out = document.getElementById("out");
const elementStyle = element.style;

// We loop through all styles (for…of doesn't work with CSStyleDeclaration)
for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out.textContent += `${
 elementStyle[prop]
 } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-elementcssinlinestyle-style |

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

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

See also
--------

* Using dynamic styling information
* `HTMLElement.style`
* `SVGElement.style`
XRHitTestSource: cancel() method
================================

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

The **`cancel()`** method of the `XRHitTestSource` interface unsubscribes a hit test.

Syntax
------


```js
cancel()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

### Unsubscribe from hit test

The `cancel()` method unsubscribes from a hit test source. Since the `XRHitTestSource` object will no longer be usable, you can clean up and set it to `null`.


```js
hitTestSource.cancel();
hitTestSource = null;
```

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

| Specification |
| --- |
| WebXR Hit Test Module # dom-xrhittestsource-cancel |

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

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

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

 The **`Magnetometer()`** constructor
 creates a new `Magnetometer` object which returns information about the
 magnetic field as detected by a device's primary magnetometer sensor.

Syntax
------


```js
new Magnetometer()
new Magnetometer(options)
```

### Parameters

`options` Optional

Options are as follows:

`frequency`

 The desired number of times per second a sample should
 be taken, meaning the number of times per second that the
 `reading` event will be called. A whole number or decimal may be
 used, the latter for frequencies less than a second. The actual reading frequency
 depends on device hardware and consequently may be less than requested.


`referenceFrame`

 Either `'device'` or
 `'screen'`. The default is `'device'`.



### Exceptions

`SecurityError` `DOMException`

Use of this feature was blocked by a Permissions Policy.

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

| Specification |
| --- |
| Magnetometer # dom-magnetometer-magnetometer |

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

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

See also
--------

* `reading` event