recursal/MDN huggingface dataset:
XRHitTestResult: getPose() method
=================================

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

The **`getPose()`** method of the `XRHitTestResult` interface returns the `XRPose` of the hit test result relative to the given base space.

Syntax
------


```js
getPose(baseSpace)
```

### Parameters

`baseSpace`

An `XRSpace` to use as the base or origin for computing the relative position and orientation of hit test results.

### Return value

Returns an `XRPose` object.

Examples
--------

### Getting the hit test result's pose

The following example uses `getPose()` to query a single hit test result's pose.


```js
let hitTestResults = xrFrame.getHitTestResults(hitTestSource);

if (hitTestResults.length > 0) {
  let pose = hitTestResults[0].getPose(referenceSpace);
}
```

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

| Specification |
| --- |
| WebXR Hit Test Module # dom-xrhittestresult-getpose |

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

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

See also
--------

* `XRFrame.getPose()`
DOMStringList: item() method
============================

The **`item()`** method returns a string from a `DOMStringList` by index.

Syntax
------


```js
item(index)
```


 JavaScript also offers an array-like bracketed syntax for obtaining an item from a
 `DOMStringList` by index:


```js
list[index];
```

### Parameters

`index`

the index of the string to get. The index is zero-based.

### Return value

The string at the index position in the `DOMStringList`; otherwise `null` if the provided index is out of range.

### Exceptions

`TypeError`

Thrown if no argument is provided.

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

| Specification |
| --- |
| HTML Standard # dom-domstringlist-item |

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

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

The **`contains()`** method returns a boolean indicating whether the given string is in the list.

Syntax
------


```js
contains(string)
```

### Parameters

`string`

A string you want to check for the existence of in the list.

### Return value

A boolean indicating whether the given string is in the list.

### Exceptions

`TypeError`

Thrown if no argument is provided.

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

| Specification |
| --- |
| HTML Standard # dom-domstringlist-contains |

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

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

The read-only **`length`** property indicates the number of strings in the `DOMStringList`.

Value
-----

A `Number`.

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

| Specification |
| --- |
| HTML Standard # dom-domstringlist-length |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CookieStoreManager: getSubscriptions() 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 **`getSubscriptions()`** method of the `CookieStoreManager` interface returns a list of all the cookie change subscriptions for this `ServiceWorkerRegistration`.

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

Syntax
------


```js
getSubscriptions()
```

### Parameters

None.

### Return value

A `Promise` that resolves with a list of objects, each containing:

`name`

A string with the name of a cookie.

`url`

A string with the url of the scope used to subscribe to the cookie(s).

Examples
--------

If the `ServiceWorkerRegistration` represented by `registration` has subscribed to any cookie change events, `subscriptions` will resolve to a list of objects containing the name and URL of those cookies.


```js
const subscriptions = await self.registration.cookies.getSubscriptions();
```

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

| Specification |
| --- |
| Cookie Store API # dom-cookiestoremanager-getsubscriptions |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CookieStoreManager: subscribe() 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 **`subscribe()`** method of the `CookieStoreManager` interface subscribes a `ServiceWorkerRegistration` to cookie change events.

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

Syntax
------


```js
subscribe(subscriptions)
```

### Parameters

`subscriptions`

An object containing:

`name`

A string with the name of a cookie.

`url`

A string with the url of a cookie scope. This may be narrower than the scope of the service worker registration.


### Return value

A `Promise` that resolves with `undefined` when the subscription completes.

### Exceptions

`TypeError`

Thrown if the URL passed in `subscriptions` does not match the service worker registration's `scope`.

Examples
--------

In this example, the `ServiceWorkerRegistration` represented by `registration` is subscribing to change events on the cookie named `"cookie1"` with a scope of `"/path1"`.


```js
const subscriptions = [{ name: "cookie1", url: `/path1` }];
await registration.cookies.subscribe(subscriptions);
```


The URL passed to the `subscribe()` method, may be narrower than the service worker registration scope. In the following example the subscription is for `/path/one/`, so it will receive change events for changes on the first cookie, but not the second.


```js
registration.cookies.subscribe([{ name: "cookie1", url: "/path/one/" }]); // subscription
cookieStore.set({ name: "cookie1", value: "cookie-value", path: "/path/one/" }); // receives a change event
cookieStore.set({ name: "cookie1", value: "cookie-value", path: "/path/two/" }); // does not receive a change event
```

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

| Specification |
| --- |
| Cookie Store API # dom-cookiestoremanager-subscribe |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CookieStoreManager: unsubscribe() 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 **`unsubscribe()`** method of the `CookieStoreManager` interface stops the `ServiceWorkerRegistration` from receiving previously subscribed events.

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

Syntax
------


```js
unsubscribe(subscriptions)
```

### Parameters

`subscriptions`

An object containing:

`name`

A string with the name of a cookie.

`url`

A string with the url of the scope used to subscribe to this cookie.


### Return value

A `Promise` that resolves with `undefined` when the service worker has been unsubscribed.

### Exceptions

`TypeError`

Thrown if the URL passed in `subscriptions` does not match the service worker registration's `scope`.

Examples
--------

In this example, the `ServiceWorkerRegistration` represented by `registration` is unsubscribing from change events on the cookie named `"cookie1"` with a scope of `"/path1"`.


```js
const subscriptions = [{ name: "cookie1", url: `/path1` }];
await registration.cookies.unsubscribe(subscriptions);
```

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

| Specification |
| --- |
| Cookie Store API # dom-cookiestoremanager-unsubscribe |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`newState`** read-only property of the `ToggleEvent` interface is a string representing the state the element is transitioning to.

Value
-----

A string. Possible values are `"open"` (the popover is being shown) or `"closed"` (the popover is being hidden).

Examples
--------


```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});
```

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

| Specification |
| --- |
| HTML Standard # dom-toggleevent-newstate |

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

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

See also
--------

* Popover API
ToggleEvent: oldState property
==============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`oldState`** read-only property of the `ToggleEvent` interface is a string representing the state the element is transitioning from.

Value
-----

A string. Possible values are `"open"` (the popover is going from showing to hidden) or `"closed"` (the popover going from hidden to shown).

Examples
--------


```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.oldState === "open") {
    console.log("Popover is being hidden");
  } else {
    console.log("Popover is being shown");
  }
});
```

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

| Specification |
| --- |
| HTML Standard # dom-toggleevent-oldstate |

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

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

See also
--------

* Popover API
ToggleEvent: ToggleEvent() constructor
======================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`ToggleEvent()`** constructor creates a new `ToggleEvent` object.

Syntax
------


```js
new ToggleEvent(type, init)
```

### Parameters

`type`

A string representing the type of event. In the case of `ToggleEvent` this is always `toggleevent`.

`init`

An object containing the following properties:

`newState`

A string representing the state the element is transitioning to. Possible values are `"open"` and `"closed"`.

`oldState`

A string representing the state the element is transitioning from. Possible values are `"open"` and `"closed"`.


Examples
--------

A developer would not use this constructor manually. A new `ToggleEvent` object is constructed when a handler is invoked as a result of a relevant event firing.

For example:


```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});
```

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

| Specification |
| --- |
| HTML Standard # toggleevent |

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

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

See also
--------

* Popover API
XRWebGLSubImage: depthStencilTexture property
=============================================

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

The read-only **`depthStencilTexture`** property of the `XRWebGLSubImage` interface represents the depth/stencil `WebGLTexture` object for the `XRCompositionLayer` to render.

Value
-----

An opaque `WebGLTexture`. See WebXR opaque textures for details.

### Using `depthStencilTexture`

The `depthStencilTexture` property can be passed to `WebGL2RenderingContext.framebufferTextureLayer()` to attach the depth texture to a framebuffer.


```js
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const layer = xrGlBinding.createProjectionLayer({
  textureType: "texture-array",
});
const framebuffer = gl.createFramebuffer();

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

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

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  const viewport = xrGlBinding.getSubImage(layer, xrFrame).viewport;
  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  for (const view in xrViewerPose.views) {
    const subImage = xrGlBinding.getViewSubImage(layer, view);
    gl.framebufferTextureLayer(
      gl.FRAMEBUFFER,
      gl.COLOR\_ATTACHMENT0,
      subImage.colorTexture,
      0,
      subImage.imageIndex,
    );
    gl.framebufferTextureLayer(
      gl.FRAMEBUFFER,
      gl.DEPTH\_ATTACHMENT,
      subImage.depthStencilTexture,
      0,
      subImage.imageIndex,
    );

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

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglsubimage-depthstenciltexture |

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

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

See also
--------

* `WebGL2RenderingContext.framebufferTextureLayer()`
XRWebGLSubImage: colorTextureHeight property
============================================

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

The read-only **`colorTextureHeight`** property of the `XRWebGLSubImage` interface is a number representing the height in pixels of the GL attachment.

Value
-----

A number indicating the height in pixels.

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglsubimage-colortextureheight |

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

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

See also
--------

* `WebGLTexture`
XRWebGLSubImage: colorTextureWidth property
===========================================

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

The read-only **`colorTextureWidth`** property of the `XRWebGLSubImage` interface is a number representing the width in pixels of the GL attachment.

Value
-----

A number indicating the width in pixels.

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglsubimage-colortexturewidth |

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

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

See also
--------

* `WebGLTexture`
XRWebGLSubImage: colorTexture property
======================================

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

The read-only **`colorTexture`** property of the `XRWebGLSubImage` interface represents the color `WebGLTexture` object for the `XRCompositionLayer` to render.

Value
-----

An opaque `WebGLTexture`. See WebXR opaque textures for details.

Examples
--------

### Using `colorTexture`

The `colorTexture` property can be passed to `WebGL2RenderingContext.framebufferTextureLayer()` to attach the color texture to a framebuffer.


```js
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const layer = xrGlBinding.createProjectionLayer({
  textureType: "texture-array",
});
const framebuffer = gl.createFramebuffer();

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

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

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  const viewport = xrGlBinding.getSubImage(layer, xrFrame).viewport;
  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  for (const view in xrViewerPose.views) {
    const subImage = xrGlBinding.getViewSubImage(layer, view);
    gl.framebufferTextureLayer(
      gl.FRAMEBUFFER,
      gl.COLOR\_ATTACHMENT0,
      subImage.colorTexture,
      0,
      subImage.imageIndex,
    );
    gl.framebufferTextureLayer(
      gl.FRAMEBUFFER,
      gl.DEPTH\_ATTACHMENT,
      subImage.depthStencilTexture,
      0,
      subImage.imageIndex,
    );

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

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglsubimage-colortexture |

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

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

See also
--------

* `WebGL2RenderingContext.framebufferTextureLayer()`
XRWebGLSubImage: imageIndex property
====================================

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

The read-only **`imageIndex`** property of the `XRWebGLSubImage` interface is a number representing the offset into the texture array if the layer was requested with `texture-array`; `null` otherwise.

Value
-----

A number or `null` if the layer wasn't requested with `texture-array`.

### Using `imageIndex`

The `imageIndex` property can be passed `WebGL2RenderingContext.framebufferTextureLayer()` to attach the depth and color textures to a framebuffer with the correct layer index.


```js
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const layer = xrGlBinding.createProjectionLayer({
  textureType: "texture-array",
});
const framebuffer = gl.createFramebuffer();

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

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

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  const viewport = xrGlBinding.getSubImage(layer, xrFrame).viewport;
  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  for (const view in xrViewerPose.views) {
    const subImage = xrGlBinding.getViewSubImage(layer, view);
    gl.framebufferTextureLayer(
      gl.FRAMEBUFFER,
      gl.COLOR\_ATTACHMENT0,
      subImage.colorTexture,
      0,
      subImage.imageIndex,
    );
    gl.framebufferTextureLayer(
      gl.FRAMEBUFFER,
      gl.DEPTH\_ATTACHMENT,
      subImage.depthStencilTexture,
      0,
      subImage.imageIndex,
    );

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

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglsubimage-imageindex |

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

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

See also
--------

* `WebGL2RenderingContext.framebufferTextureLayer()`
InkPresenter: expectedImprovement property
==========================================

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

The **`expectedImprovement`** read-only property of the `InkPresenter` interface returns a value, in milliseconds, indicating the latency improvement that can be expected using this presenter.

### Value

A number.

Example
-------


```js
async function inkInit() {
  const ink = navigator.ink;
  let presenter = await ink.requestPresenter({ presentationArea: canvas });
  console.log(presenter.expectedImprovement);

  //...
}
```

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

| Specification |
| --- |
| Ink API # dom-inkpresenter-expectedimprovement |

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

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

See also
--------

* Enhancing Inking on the Web
InkPresenter: presentationArea property
=======================================

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

The **`presentationArea`** read-only property of the `InkPresenter` interface returns the `Element` inside which rendering of ink strokes is confined.

If the preceding `Ink.requestPresenter()` method call included a specific `presentationArea` element definition, then that will be the element returned. Otherwise, the default is returned, which is the containing viewport.

This area is always the client coordinates for the element's border box, so moving the element or scrolling the element requires no recalculation on the developer's part.

### Value

An `Element`.

Example
-------


```js
async function inkInit() {
  const ink = navigator.ink;
  let presenter = await ink.requestPresenter({ presentationArea: canvas });
  console.log(presenter.presentationArea);

  //...
}
```

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

| Specification |
| --- |
| Ink API # dom-inkpresenter-presentationarea |

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

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

See also
--------

* Enhancing Inking on the Web
HTMLLinkElement: as property
============================

The **`as`** property of the `HTMLLinkElement` interface returns a string representing the type of content to be preloaded by a link element.

 The `as` property must have a value for link elements when `rel="preload"`, or the resource will not be fetched.
 It may also be applied to link elements where `rel="modulepreload"`, but if omitted, will default to `script`.
 The property should not be set for other types of link elements, such as `rel="prefetch"`.

This property reflects the value of the `as` attribute of the `<link>` HTML element.

Value
-----

A string with the following allowed values: `"audio"`, `"document"`, `"embed"`, `"fetch"`, `"font"`, `"image"`, `"object"`, `"script"`, `"style"`, `"track"`, `"video"`, `"worker"`.

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

| Specification |
| --- |
| HTML Standard # dom-link-as |

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

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

The **`HTMLLinkElement.rel`** property reflects the `rel` attribute. It is a string containing a space-separated list of link types indicating the relationship between the resource represented by the `<link>` element and the current document.

 The most common use of this attribute is to specify a link to an external style sheet:
 the property is set to `stylesheet`, and the `href`
 attribute is set to the URL of an external style sheet to format the page.

Value
-----

A string.

Examples
--------


```js
const links = document.getElementsByTagName("link");
for (const link of links) {
  console.log(link);
}
```

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

| Specification |
| --- |
| HTML Standard # dom-link-rel |

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

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

See also
--------

* The equivalent property on `<a>` and `<area>`,
 `HTMLAnchorElement.rel` and `HTMLAreaElement.rel`.
* The very same list but as tokens: `HTMLLinkElement.relList`