recursal/MDN huggingface dataset:
XRCylinderLayer: redraw event
=============================

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

The `redraw` event is sent to the `XRCylinderLayer` object when the underlying resources of the layer are lost or when the XR Compositor can no longer reproject the layer. If this event is sent, authors should redraw the content of the layer in the next XR animation frame.

See also the `XRCompositionLayer.needsRedraw` property which is also available to `XRCylinderLayer` objects through inheritance from `XRCompositionLayer`.

Syntax
------

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


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

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

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

An `XRLayerEvent`. Inherits from `Event`.

Event properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`layer` Read only 

The `XRLayer` which generated the event.

Examples
--------

### Using the `redraw` event

You can pass `redraw` to `addEventListener()`:


```js
cylinderLayer.addEventListener("redraw", (event) => {
  // redraw the layer
});
```


Alternatively, you can use the `onredraw` event handler property to establish a handler for the `redraw` event:


```js
cylinderLayer.onredraw = (event) => {
  // redraw the layer
};
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # eventdef-xrlayer-redraw |

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

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

See also
--------

* `XRCompositionLayer.needsRedraw`
XRCylinderLayer: space property
===============================

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

The **`space`** property of the `XRCylinderLayer` interface represents the layer's spatial relationship with the user's physical environment.

Value
-----

An `XRSpace`.

Examples
--------

### Updating the cylinder layer's space

The `XRWebGLBinding.createCylinderLayer()` method creates a cylinder layer and requires a `space` property to be provided. The `XRCylinderLayer.space` property can be used after layer creation to get the space used or to set it to a new one.


```js
const cylinderLayer = xrGlBinding.createCylinderLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 512,
  viewPixelHeight: 512,
});

cylinderLayer.space = someOtherSpace;
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcylinderlayer-space |

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

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

See also
--------

* `XRSpace`
* `XRWebGLBinding.createCylinderLayer()`
XRCylinderLayer: aspectRatio property
=====================================

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

The **`aspectRatio`** property of the `XRCylinderLayer` interface represents the ratio of the visible cylinder section. It is the ratio of the width of the visible section of the cylinder divided by its height. The width is calculated by multiplying the `radius` with the `centralAngle`.

Value
-----

A number representing the ratio of the visible cylinder section.

Examples
--------

### Getting a layer's aspect ratio

The `XRWebGLBinding.createCylinderLayer()` method creates a cylinder layer and allows to specify an `aspectRatio`. The `XRCylinder.aspectRatio` property can be used after layer creation to get the aspect ratio used or to set it to a new one.


```js
const cylinderLayer = xrGlBinding.createCylinderLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 1200,
  viewPixelHeight: 600,
  centralAngle: (60 \* Math.PI) / 180,
  aspectRatio: 2,
  radius: 2,
  transform: new XRRigidTransform(/\* … \*/),
});

cylinderLayer.aspectRatio; // 2
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcylinderlayer-aspectratio |

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

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

See also
--------

* `XRCylinderLayer.centralAngle`
* `XRCylinderLayer.radius`
DOMMatrix: DOMMatrix() constructor
==================================

 The **`DOMMatrix`** constructor creates a new
 `DOMMatrix` object which represents 4x4 matrices, suitable for 2D and 3D
 operations.

Syntax
------


```js
new DOMMatrix()
new DOMMatrix(init)
```

### Parameters

`init` Optional

An array of numbers specifying the matrix you want to create, or a CSS transform string.

In case an array of numbers is passed, the behavior depends on the length of the array:

* for a 6-element array of components in the form `[a, b, c, d, e, f]`, a 2D matrix is created, initialized with the provided components.
* for a 16-element array of components (in the column-major order) in the form `[m11, m12, m13, …, m42, m43, m44]`, a 3D matrix is created, initialized with the provided components.

Examples
--------

 This example creates a DOMMatrix to use as an argument for calling
 `Point.matrixTransform()`.


```js
const point = new DOMPoint(5, 4);
const scaleX = 2;
const scaleY = 3;
const translateX = 12;
const translateY = 8;
const angle = Math.PI / 2;
const matrix = new DOMMatrix([
  Math.cos(angle) \* scaleX,
  Math.sin(angle) \* scaleX,
  -Math.sin(angle) \* scaleY,
  Math.cos(angle) \* scaleY,
  translateX,
  translateY,
]);
const transformedPoint = point.matrixTransform(matrix);
```

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

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dommatrix-dommatrix |

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

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

 The `IntersectionObserver` method
 **`disconnect()`** stops watching all of its target elements
 for visibility changes.

Syntax
------


```js
disconnect()
```

### Parameters

None.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-disconnect |

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

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

See also
--------

* `observe()`
* `unobserve()`
IntersectionObserver: rootMargin property
=========================================

 The `IntersectionObserver` interface's read-only
 **`rootMargin`** property is a string with syntax similar to
 that of the CSS `margin` property. Each side of the rectangle represented
 by `rootMargin` is added to the corresponding side in the
 `root` element's bounding box
 before the intersection test is performed. This lets you, for example, adjust the bounds
 outward so that the target element is considered 100% visible even if a certain number
 of pixels worth of width or height is clipped away, or treat the target as partially
 hidden if an edge is too close to the edge of the root's bounding box.

 See how intersections are calculated
 for a more in-depth look at the root margin and how it works with
 the root's bounding box.

Value
-----

 A string, formatted similarly to the CSS `margin` property's value, which
 contains offsets for one or more sides of the root's bounding box. These offsets are
 added to the corresponding values in the root's bounding box before the intersection
 between the resulting rectangle and the target element's bounds.

 The string returned by this property may not match the one specified when the
 `IntersectionObserver` was instantiated. The browser is permitted to alter
 the values

 If `rootMargin` isn't specified when the object was instantiated, it
 defaults to the string `"0px 0px 0px 0px"`, meaning that the intersection
 will be computed between the root element's unmodified bounds rectangle and the target's
 bounds. How intersections are calculated
 describes how the `rootMargin` is used in more detail.

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-rootmargin |

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

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

 The `IntersectionObserver` interface's read-only
 **`thresholds`** property returns the list of intersection
 thresholds that was specified when the observer was instantiated with
 `IntersectionObserver()`. If
 only one threshold ratio was provided when instantiating the object, this will be an
 array containing that single value.

 See the Intersection Observer page to
 learn how thresholds work.

Value
-----

 An array of intersection thresholds, originally specified using the
 `threshold` property when instantiating the observer. If only one observer
 was specified, without being in an array, this value is a one-entry array containing
 that threshold. Regardless of the order your original `threshold` array was
 in, this one is always sorted in numerically increasing order.

 If no `threshold` option was included when
 `IntersectionObserver()` was used to instantiate the observer, the value of
 `thresholds` is `[0]`.


**Note:** Although the `options` object you can specify when creating an
 `IntersectionObserver` has a field named
 `threshold`, this property is called
 `thresholds`. Confusing? Yes. If you accidentally use
 `thresholds` as the name of the field in your `options`, the
 `thresholds` array will wind up being `[0.0]`, which is likely
 not what you expect. Debugging chaos may ensue.


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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-thresholds |

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

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

 The `IntersectionObserver` method
 **`takeRecords()`** returns an array of
 `IntersectionObserverEntry` objects, one for each targeted element which
 has experienced an intersection change since the last time the intersections were
 checked, either explicitly through a call to this method or implicitly by an automatic
 call to the observer's callback.


**Note:** If you use the callback to monitor these changes, you don't
 need to call this method. Calling this method clears the pending intersection list, so
 the callback will not be run.


Syntax
------


```js
takeRecords()
```

### Parameters

None.

### Return value

 An array of `IntersectionObserverEntry` objects, one for each target
 element whose intersection with the root has changed since the last time the
 intersections were checked.

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-takerecords |

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

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

See also
--------

* Intersection Observer API
IntersectionObserver: root property
===================================

 The `IntersectionObserver` interface's read-only
 **`root`** property identifies the `Element` or
 `Document` whose bounds are treated as the bounding box
 of the viewport for the element which is the observer's target.

 If the `root` is `null`, then the bounds of the actual document
 viewport are used.

Value
-----

 A `Element` or `Document` object whose bounding box is used
 as the bounds of the viewport for the purposes of determining how much of the target
 element is visible. The intersection of this bounding rectangle, offset by any margins
 specified in the options passed to the
 `IntersectionObserver()`
 constructor, the target element's bounds, minus the bounds of every element or other
 object which overlaps the target element, is considered to be the visible area of the
 target element.

 If `root` is `null`, then the owning document is used as the
 root, and the bounds its viewport (that is, the visible area of the document) are used
 as the root bounds.

Examples
--------

 This example sets the `border` of the intersection observer's root element
 to be a 2-pixel medium green line.


```js
observer.root.style.border = "2px solid #44aa44";
```

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-root |

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

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

See also
--------

* Timing element visibility with the Intersection Observer API
IntersectionObserver: observe() method
======================================

 The `IntersectionObserver` method
 **`observe()`** adds an element to the set of target elements
 being watched by the `IntersectionObserver`. One observer has one set of
 thresholds and one root, but can watch multiple target elements for visibility changes
 in keeping with those.

 To stop observing the element, call
 `IntersectionObserver.unobserve()`.

 When the visibility of the specified element crosses over one of the observer's
 visibility thresholds (as listed in `IntersectionObserver.thresholds`), the
 observer's callback is executed with an array of
 `IntersectionObserverEntry` objects representing the intersection changes
 which occurred. Note that this design allows multiple elements' intersection changes to
 be processed by a single call to the callback.


**Note:** the observer callback will always fire the first render cycle after `observe()` is called, even if the observed element has not yet moved with respect to the viewport.
 This means that, for example, an element that is outside the viewport when `observe()` is called on it will result in the callback being immediately called with at least one entry with `intersecting` set to `false`.
 An element inside the viewport will result in the callback being immediately called with at least one entry with `intersecting` set to `true`.


Syntax
------


```js
observe(targetElement)
```

### Parameters

`targetElement`

 An `element` whose visibility within the root is to be monitored. This
 element must be a descendant of the root element (or contained within the current
 document, if the root is the document's viewport).


### Return value

None (`undefined`).

Examples
--------


```js
// Register IntersectionObserver
const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      // Add 'active' class if observation target is inside viewport
      entry.target.classList.add("active");
    } else {
      // Remove 'active' class otherwise
      entry.target.classList.remove("active");
    }
  });
});

// Declares what to observe, and observes its properties.
const boxElList = document.querySelectorAll(".box");
boxElList.forEach((el) => {
  io.observe(el);
});
```

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-observe |

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

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

See also
--------

* `IntersectionObserver.unobserve()`
IntersectionObserver: unobserve() method
========================================

 The `IntersectionObserver` method
 **`unobserve()`** instructs the
 `IntersectionObserver` to stop observing the specified target
 element.

Syntax
------


```js
unobserve(target)
```

### Parameters

`target`

 The `Element` to cease observing. If the specified element isn't being
 observed, this method does nothing and no exception is thrown.


### Return value

None (`undefined`).

Examples
--------

 This snippet shows an observer being created, an element being observed, and then being
 unobserved.


```js
const observer = new IntersectionObserver(callback);
observer.observe(document.getElementById("elementToObserve"));

// …

observer.unobserve(document.getElementById("elementToObserve"));
```

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

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-unobserve |

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

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

See also
--------

* Intersection Observer API
* `IntersectionObserver.observe()`
EventTarget: EventTarget() constructor
======================================

The **`EventTarget()`** constructor creates a new `EventTarget` object instance.

**Note:** It is fairly rare to explicitly call this constructor. Most of the time, this constructor is used inside the constructor of an object extending the `EventTarget` interface, using the `super` keyword.

Syntax
------


```js
new EventTarget()
```

### Parameters

None.

### Return value

A new instance of the `EventTarget` object.

Examples
--------

### Implementing a counter

This example implements a `Counter` class, with `increment()` and `decrement()` methods. It fires a custom `"valuechange"` event when either of these methods is called.

#### HTML


```html
<button id="dec" aria-label="Decrement">-</button>
<span id="currentValue">0</span>
<button id="inc" aria-label="Increment">+</button>
```


#### JavaScript


```js
class Counter extends EventTarget {
  constructor(initialValue = 0) {
    super();
    this.value = initialValue;
  }

  #emitChangeEvent() {
    this.dispatchEvent(new CustomEvent("valuechange", { detail: this.value }));
  }

  increment() {
    this.value++;
    this.#emitChangeEvent();
  }

  decrement() {
    this.value--;
    this.#emitChangeEvent();
  }
}

const initialValue = 0;
const counter = new Counter(initialValue);
document.querySelector("#currentValue").innerText = initialValue;

counter.addEventListener("valuechange", (event) => {
  document.querySelector("#currentValue").innerText = event.detail;
});

document.querySelector("#inc").addEventListener("click", () => {
  counter.increment();
});

document.querySelector("#dec").addEventListener("click", () => {
  counter.decrement();
});
```


#### Result

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-eventtarget① |

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

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

See also
--------

* `EventTarget`
EventTarget: dispatchEvent() method
===================================

 The **`dispatchEvent()`** method of the `EventTarget` sends an `Event` to the object, (synchronously) invoking the affected
 event listeners in the appropriate order. The normal event processing
 rules (including the capturing and optional bubbling phase) also apply to events
 dispatched manually with `dispatchEvent()`.

 Calling `dispatchEvent()` is the last step to *firing an event*. The event
 should have already been created and initialized using an `Event()` constructor.

**Note:** When calling this method, the `Event.target` property is initialized to the current `EventTarget`.

 Unlike "native" events, which are fired by the browser and invoke event handlers
 asynchronously via the event loop,
 `dispatchEvent()` invokes event handlers *synchronously*. All applicable event
 handlers are called and return before `dispatchEvent()` returns.

Syntax
------


```js
dispatchEvent(event)
```

### Parameter

`event`

The `Event` object to dispatch. Its `Event.target` property will be set to the current `EventTarget`.

### Return value

`false` if `event` is cancelable, and at least one of the event handlers which received `event` called `Event.preventDefault()`. Otherwise `true`.

### Exceptions

`InvalidStateError` `DomException`

Thrown if the event's type was not specified during event initialization.



**Warning:** Exceptions thrown by event handlers are reported as uncaught exceptions. The event
 handlers run on a nested callstack; they block the caller until they complete, but
 exceptions do not propagate to the caller.


Example
-------

See Creating and triggering events.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-dispatchevent③ |

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

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

See also
--------

* The Event object reference
CSSMathInvert: CSSMathInvert() constructor
==========================================

 The **`CSSMathInvert()`** constructor creates a
 new `CSSMathInvert` object which represents a CSS
 `calc()` used as `calc(1 / value)`

Syntax
------


```js
new CSSMathInvert(arg)
```

### Parameters

`arg`

A `CSSNumericValue`.

### Exceptions

`RangeError`

Raised if the arg is 0 or -0.

Examples
--------

To do

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

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

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

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

 The CSSMathInvert.value read-only property of the
 `CSSMathInvert` interface returns a `CSSNumericValue` object.

Value
-----

A `CSSNumericValue`.

Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssmathinvert-value |

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

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

**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 **`NDEFReadingEvent()`** constructor creates a new `NDEFReadingEvent` object which represents events dispatched on new NFC readings obtained by `NDEFReader`.

Syntax
------


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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `reading`.


`options`

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

`serialNumber` Optional

The serial number of the device a message was read from. It default to `""`, and can be set to `null`.

`message`

An object with the following members:

`data` Optional

Contains the data to be transmitted. It can be a string object or literal, an `ArrayBuffer`, a `TypedArray`, a `DataView`, or an array of nested records.

`encoding` Optional

A string specifying the record's encoding.

`id` Optional

A developer-defined identifier for the record.

`lang` Optional

A valid language tag according to RFC 5646: Tags for Identifying Languages (also known as BCP 47).

`mediaType` Optional

A valid MIME type.

`recordType`

A string indicating the type of data stored in `data`. It must be one of the following values:

`"absolute-url"`

An absolute URL to the data.

`"empty"`

An empty `NDEFRecord`.

`"mime"`

A valid MIME type.

`"smart-poster"`

A smart poster as defined by the NDEF-SMARTPOSTER specification.

`"text"`

Text as defined by the NDEF-TEXT specification.

`"unknown"`

The record type is not known.

`"URL"`

A URL as defined by the NDEF-URI specification.



### Return value

A new `NDEFReadingEvent` object.

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

| Specification |
| --- |
| Web NFC API # dom-ndefreadingevent-constructor |

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

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