recursal/MDN huggingface dataset:
XRFrame: getHitTestResultsForTransientInput() method
====================================================

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

The **`getHitTestResultsForTransientInput()`** method of the `XRFrame` interface returns an array of `XRTransientInputHitTestResult` objects containing transient input hit test results for a given `XRTransientInputHitTestSource`.

Syntax
------


```js
getHitTestResultsForTransientInput(hitTestSource)
```

### Parameters

`hitTestSource`

An `XRTransientInputHitTestSource` object that contains transient input hit test subscriptions.

### Return value

An array of `XRTransientInputHitTestResult` objects.

Examples
--------

### Getting transient input hit test results

To request a transient input hit test source, start an `XRSession` with the `hit-test` session feature enabled. Next, request the hit test source with `XRSession.requestHitTestSourceForTransientInput()` and store it for later use in the frame loop. Finally, call `getHitTestResultsForTransientInput()` to obtain the result.


```js
const xrSession = navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["local", "hit-test"],
});

let transientHitTestSource = null;
xrSession
  .requestHitTestSourceForTransientInput({
    profile: "generic-touchscreen",
    offsetRay: new XRRay(),
  })
  .then((touchScreenHitTestSource) => {
    transientHitTestSource = touchScreenHitTestSource;
  });

// frame loop
function onXRFrame(time, xrFrame) {
  let hitTestResults = xrFrame.getHitTestResultsForTransientInput(
    transientHitTestSource,
  );
  // do things with the transient hit test results
}
```

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

| Specification |
| --- |
| WebXR Hit Test Module # dom-xrframe-gethittestresultsfortransientinput |

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

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

See also
--------

* `XRTransientInputHitTestResult`
* `XRTransientInputHitTestSource`
* `XRRay`
XRFrame: getJointPose() method
==============================

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

The **`getJointPose()`** method of the `XRFrame` interface returns an `XRJointPose` object providing the pose of a hand joint (see `XRHand`) relative to a given base space.

Syntax
------


```js
getJointPose(joint, baseSpace)
```

### Parameters

`joint`

An `XRJointSpace` specifying the hand joint space for which to obtain an `XRJointPose` describing the item's position and orientation.

`baseSpace`

An `XRSpace` to use as the base or origin for the relative position and orientation.

### Return value

 An `XRJointPose` object specifying the position and orientation of the hand joint, relative to
 the `XRSpace` indicated by `baseSpace`.

Examples
--------

### Using `getJointPose()`

Call `getJointPose()` with an `XRJointSpace` and an `XRReferenceSpace` to get an `XRJointPose` object.


```js
navigator.xr
  .requestSession({ optionalFeatures: ["hand-tracking"] })
  .then(/\* … \*/);

function renderFrame(session, frame) {
  // …

  for (const inputSource of session.inputSources) {
    if (inputSource.hand) {
      const indexFingerTipJoint = inputSource.hand.get("index-finger-tip");
      frame.getJointPose(indexFingerTipJoint, referenceSpace); // XRJointPose
    }
  }
}
```

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

| Specification |
| --- |
| WebXR Hand Input Module - Level 1 # dom-xrframe-getjointpose |

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

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

See also
--------

* `XRHand`
* `XRJointSpace`
* `XRSpace`
XRFrame: getPose() method
=========================

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

 The `XRFrame` method **`getPose()`** returns the relative position and
 orientation—the pose—of one `XRSpace` to that of another space. With this, you can observe the motion of objects relative to each other and to fixed locations throughout the scene.

For example, to get the position of a controller relative to the viewer's head, you would compare the controller's `gripSpace` to the `XRReferenceSpace` of type `viewer`.

Syntax
------


```js
getPose(space, baseSpace)
```

### Parameters

`space`

 An `XRSpace` specifying the space for which to obtain an
 `XRPose` describing the item's position and orientation.


`baseSpace`

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


### Return value

 An `XRPose` object specifying the position and orientation, relative to
 the `XRSpace` indicated by `baseSpace`.

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

| Specification |
| --- |
| WebXR Device API # dom-xrframe-getpose |

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

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

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

The **`fillPoses()`** method of the `XRFrame` interface populates a `Float32Array` with the matrices of the poses relative to a given base space and returns `true` if successful for all spaces.

Syntax
------


```js
fillPoses(spaces, baseSpace, transforms)
```

### Parameters

`spaces`

An array of `XRSpace` objects for which to get the poses.

`baseSpace`

An `XRSpace` object to use as the base or origin for the relative position and orientation.

`transforms`

A `Float32Array` that is populated with the matrices of the poses relative to the given `baseSpace`.

### Return value

A boolean indicating if all of the spaces have a valid pose.

### Exceptions

`TypeError`

Thrown if the length of `spaces` multiplied by 16 is larger than the number of elements in `transforms`.

Examples
--------

### Obtaining poses for all joints of a hand

To efficiently get all poses for all 25 joints of each `XRHand`, you can use the `fillPoses()` method.


```js
let poses1 = new Float32Array(16 \* 25);
let poses2 = new Float32Array(16 \* 25);

function onXRFrame(xrFrame, renderer) {
  let hand1 = xrFrame.session.inputSources[0].hand;
  xrFrame.fillPoses(hand1.values(), renderer.referenceSpace, poses1);
  let hand2 = xrFrame.session.inputSources[1].hand;
  xrFrame.fillPoses(hand2.values(), renderer.referenceSpace, poses2);
}
```

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

| Specification |
| --- |
| WebXR Hand Input Module - Level 1 # dom-xrframe-fillposes |

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

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

See also
--------

* `XRHand`
* `XRJointSpace`
* `Float32Array`
XRFrame: getDepthInformation() method
=====================================

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

The **`getDepthInformation()`** method of the `XRFrame` interface returns an `XRCPUDepthInformation` object containing CPU depth information for the active and animated frame.

Syntax
------


```js
getDepthInformation(view)
```

### Parameters

`view`

An `XRView` object obtained from a viewer pose.

### Return value

An `XRCPUDepthInformation` 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.
* the session's `depthUsage` is not `"cpu-optimized"`.

Examples
--------

### Obtaining CPU depth information


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

// …

// 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 = frame.getDepthInformation(view);
      if (depthInformation) {
        // Do something with the depth information
        renderDepth(depthInformation);
      }
    }
  }
}
```

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

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

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

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

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

The **`fillJointRadii()`** method of the `XRFrame` interface populates a `Float32Array` with radii for a list of hand joint spaces and returns `true` if successful for all spaces.

Syntax
------


```js
fillJointRadii(jointSpaces, radii)
```

### Parameters

`jointSpaces`

An array of `XRJointSpace` objects for which to obtain the radii.

`radii`

A `Float32Array` that is populated with the radii of the `jointSpaces`.

### Return value

A boolean indicating if all of the spaces have a valid pose.

### Exceptions

`TypeError`

Thrown if the length of `jointSpaces` is larger than the number of elements in `radii`.

Examples
--------

### Obtaining radii for all joints of a hand

To efficiently get all radii for all 25 joints of each `XRHand`, you can use the `fillJointRadii()` method.


```js
let radii1 = new Float32Array(25);
let radii2 = new Float32Array(25);

function onXRFrame(xrFrame, renderer) {
  let hand1 = xrFrame.session.inputSources[0].hand;
  xrFrame.fillJointRadii(hand1.values(), radii1);
  let hand2 = xrFrame.session.inputSources[1].hand;
  xrFrame.fillJointRadii(hand2.values(), radii2);
}
```

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

| Specification |
| --- |
| WebXR Hand Input Module - Level 1 # dom-xrframe-filljointradii |

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

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

See also
--------

* `XRHand`
* `XRJointSpace`
* `Float32Array`
XRFrame: getViewerPose() method
===============================

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

The **`getViewerPose()`** method, a member of the `XRFrame` interface, returns a `XRViewerPose` object which describes the viewer's pose (position and orientation) relative to the specified reference space.

See the `getPose()` method for a way to calculate a pose that represents the difference between two spaces.

Syntax
------


```js
getViewerPose(referenceSpace)
```

### Parameters

`referenceSpace`

 An `XRReferenceSpace` object specifying the space to use as the
 reference point or base for the computation of the viewer's current pose.


### Return value

 A `XRViewerPose` describing the viewer's position and orientation relative
 to the specified reference space.

### Exceptions

`InvalidStateError` `DOMException`

 Thrown if `getViewerPose()` was not
 called within the context of a callback to a
 session's `XRSession.requestAnimationFrame()`.


Examples
--------

 In this callback function for `requestAnimationFrame()`, the `XRViewerPose` describing the viewer's
 viewpoint on the world is obtained by calling `getViewerPose()` on the
 `XRFrame` passed into the callback.


```js
viewerPose = xrFrame.getViewerPose(xrReferenceSpace);

if (viewerPose) {
  /\* render the pose's views \*/
}
```


To see a complete example, take a look at Movement, orientation, and motion.

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

| Specification |
| --- |
| WebXR Device API # dom-xrframe-getviewerpose |

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

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

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

The **`createAnchor()`** method of the `XRFrame` interface creates a free-floating `XRAnchor` which will be fixed relative to the real world.

See `XRHitTestResult.createAnchor()` for creating an anchor from a hit test result that is attached to a real-world object.

Syntax
------


```js
createAnchor(pose, space)
```

### Parameters

`pose`

An `XRRigidTransform` object with the initial pose where the anchor should be created. The system will make sure that the relationship with the physical world made at this moment in time is maintained as the tracking system's understanding of the world evolves.

`space`

An `XRSpace` object the pose is relative to.

### Return value

A `Promise` resolving to an `XRAnchor` object.

Examples
--------

### Creating an anchor


```js
frame.createAnchor(anchorPose, referenceSpace).then(
  (anchor) => {
    // Do stuff with the anchor (assign objects that will be relative to this anchor)
  },
  (error) => {
    console.error(`Could not create anchor: ${error}`);
  },
);
```

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

| Specification |
| --- |
| WebXR Anchors Module # dom-xrframe-createanchor |

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

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

See also
--------

* `XRHitTestResult.createAnchor()`
XRFrame: trackedAnchors property
================================

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

The read-only **`trackedAnchor`** property of the `XRFrame` interface returns an `XRAnchorSet` object containing all anchors still tracked in the frame.

Value
-----

An `XRAnchorSet` object.

Examples
--------

### Updating anchors


```js
for (const anchor of frame.trackedAnchors) {
  const pose = frame.getPose(anchor.anchorSpace, referenceSpace);
}
```

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

| Specification |
| --- |
| WebXR Anchors Module # dom-xrframe-trackedanchors |

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

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

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

The **`getHitTestResults()`** method of the `XRFrame` interface returns an array of `XRHitTestResult` objects containing hit test results for a given `XRHitTestSource`.

Syntax
------


```js
getHitTestResults(hitTestSource)
```

### Parameters

`hitTestSource`

An `XRHitTestSource` object that contains hit test subscriptions.

### Return value

An array of `XRHitTestResult` objects.

Examples
--------

### Getting hit test results

To request a hit test source, start an `XRSession` with the `hit-test` session feature enabled. Next, request a the hit test source with `XRSession.requestHitTestSource()` and store it for later use in the frame loop. Finally, call `getHitTestResults()` to obtain the result.


```js
const xrSession = navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["local", "hit-test"],
});
let hitTestSource = null;
xrSession
  .requestHitTestSource({
    space: viewerSpace, // obtained from xrSession.requestReferenceSpace("viewer");
    offsetRay: new XRRay({ y: 0.5 }),
  })
  .then((viewerHitTestSource) => {
    hitTestSource = viewerHitTestSource;
  });
// frame loop
function onXRFrame(time, xrFrame) {
  let hitTestResults = xrFrame.getHitTestResults(hitTestSource);
  // do things with the hit test results
}
```

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

| Specification |
| --- |
| WebXR Hit Test Module # dom-xrframe-gethittestresults |

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

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

See also
--------

* `XRHitTestResult`
* `XRHitTestSource`
* `XRRay`
CSSStyleDeclaration: parentRule property
========================================

 The **CSSStyleDeclaration.parentRule** read-only
 property returns a `CSSRule` that is the parent of this style
 block, e.g. a `CSSStyleRule` representing the style for a CSS
 selector.

Value
-----

 The CSS rule that contains this declaration block or `null` if this
 `CSSStyleDeclaration` is not attached to a `CSSRule`.

Examples
--------

 The following JavaScript code gets the parent CSS style rule from a
 `CSSStyleDeclaration`:


```js
const declaration = document.styleSheets[0].rules[0].style;
const rule = declaration.parentRule;
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-parentrule |

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

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

The **`cssFloat`** property of the `CSSStyleDeclaration` interface returns the result of invoking `CSSStyleDeclaration.getPropertyValue()` with `float` as an argument.

When setting, it invokes `CSSStyleDeclaration.setProperty()` with `float` as the first argument, and the given value as the second argument. The given value must be a valid value for the `float` property.

Value
-----

A string.

Example
-------

In the below example, the stylesheet contains a single rule for `.box`, which has the `float` property with a value of `left`. This value will be returned by `cssFloat`. We then set the value to "right" using `cssFloat`, and return the new value.


```css
.box {
  float: left;
  inline-size: 300px;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
let rule = myRules[0];
console.log(rule.style.cssFloat); // "left"
rule.style.cssFloat = "right";
console.log(rule.style.cssFloat); //right
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-cssfloat |

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

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

The **`cssText`** property of the `CSSStyleDeclaration` interface returns or sets the text of the element's **inline** style declaration only.

To be able to set a **stylesheet** rule dynamically, see Using dynamic styling information.

Not to be confused with stylesheet style-rule `CSSRule.cssText`.

Value
-----

A string containing the text of the element's inline style declaration.

Example
-------


```html
<span id="s1" style="color: red;"> Some text </span>

<script>
 const elem = document.getElementById("s1");
 alert(elem.style.cssText); // "color: red;"
</script>
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-csstext |

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

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

 The **`CSSStyleDeclaration.removeProperty()`** method interface
 removes a property from a CSS style declaration object.

Syntax
------


```js
removeProperty(property)
```

### Parameters

* `property`
    + A string representing the property name to be removed. Multi-word property names are hyphenated (kebab-case) and not camel-cased.
### Return value

A string equal to the value of the CSS property before it was removed.

### Exceptions

`NoModificationAllowedError` `DOMException`

Thrown when the property or declaration block is read-only.

Examples
--------

 The following JavaScript code removes the `background-color` CSS property
 from a selector rule:


```js
const declaration = document.styleSheets[0].rules[0].style;
const oldValue = declaration.removeProperty("background-color");
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-removeproperty |

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

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

 The read-only property returns an integer that represents the
 number of style declarations in this CSS declaration block.

Value
-----

 An integer that provides the number of styles explicitly set on the parent of
 the instance.

Examples
--------

The following gets the number of explicitly set styles on the following HTML element:


```html
<div
 id="div1"
 style="margin: 0 10px; background-color: #CA1; font-family: monospace"></div>
```


JavaScript code:


```js
const myDiv = document.getElementById("div1");
const divStyle = myDiv.style;
const len = divStyle.length; // 6
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-length |

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

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

 The `CSSStyleDeclaration.item()`
 method interface returns a CSS property name from a `CSSStyleDeclaration`
 by index.

 This method doesn't throw exceptions as long as you provide
 arguments; the empty string is returned if the index is out of range and a
 `TypeError` is thrown if no argument is provided.

Syntax
------


```js
item(index)
```

### Parameters

`index`

The index of the node to be fetched. The index is zero-based.

### Return value

A string that is the name of the CSS property at the specified index.

JavaScript has a special simpler syntax for obtaining an item from a NodeList by index:


```js
const propertyName = style[index];
```

### Exceptions

`TypeError`

Thrown if no argument is provided.

Examples
--------


```js
const style = document.getElementById("div1").style;
const propertyName = style.item(1); // or style[1] - returns the second style listed
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-item |

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

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

 The **CSSStyleDeclaration.getPropertyValue()** method interface returns a
 string containing the value of a specified CSS property.

Syntax
------


```js
getPropertyValue(property)
```

### Parameters

`property`

A string representing the property name (in hyphen case) to be checked.

### Return value

A string containing the value of the property. If not set, returns the empty string.

Examples
--------

 The following JavaScript code queries the value of the `margin` property in
 a CSS selector rule:


```js
const declaration = document.styleSheets[0].cssRules[0].style;
const value = declaration.getPropertyValue("margin"); // "1px 2px"
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-getpropertyvalue |

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

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