recursal/MDN huggingface dataset:
OrientationSensor
=================

The **`OrientationSensor`** interface of the Sensor APIs is the base class for orientation sensors. This interface cannot be used directly. Instead it provides properties and methods accessed by interfaces that inherit from it.

This feature may be blocked by a Permissions Policy set on your server.

EventTarget

Sensor

OrientationSensorInterfaces based on OrientationSensor
-------------------------------------

Below is a list of interfaces based on the OrientationSensor interface.

* `AbsoluteOrientationSensor`
* `RelativeOrientationSensor`
Instance properties
-------------------

`OrientationSensor.quaternion`

Returns a four element `Array` whose elements contain the components of the unit quaternion representing the device's orientation.

Instance methods
----------------

`OrientationSensor.populateMatrix()`

Populates the given object with the rotation matrix based on the latest sensor reading.

Examples
--------

### Basic Example

The following example, which is loosely based on Intel's Orientation Phone demo, instantiates an `AbsoluteOrientationSensor` with a frequency of 60 times a second. On each reading it uses `OrientationSensor.quaternion` to rotate a visual model of a phone.


```js
const options = { frequency: 60, referenceFrame: "device" };
const sensor = new AbsoluteOrientationSensor(options);

sensor.addEventListener("reading", () => {
  // model is a Three.js object instantiated elsewhere.
  model.quaternion.fromArray(sensor.quaternion).inverse();
});
sensor.addEventListener("error", (error) => {
  if (event.error.name === "NotReadableError") {
    console.log("Sensor is not available.");
  }
});
sensor.start();
```

### Permissions Example

Using orientation sensors requires requesting permissions for multiple device sensors. Because the `Permissions` interface uses promises, a good way to request permissions is to use `Promise.all`.


```js
const sensor = new AbsoluteOrientationSensor();
Promise.all([
  navigator.permissions.query({ name: "accelerometer" }),
  navigator.permissions.query({ name: "magnetometer" }),
  navigator.permissions.query({ name: "gyroscope" }),
]).then((results) => {
  if (results.every((result) => result.state === "granted")) {
    sensor.start();
    // …
  } else {
    console.log("No permissions to use AbsoluteOrientationSensor.");
  }
});
```

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

| Specification |
| --- |
| Orientation Sensor # orientationsensor-interface |

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

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

**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 **`EyeDropper`** interface represents an instance of an eyedropper tool that can be opened and used by the user to select colors from the screen.

Constructor
-----------

`EyeDropper()` 
Experimental

Returns a new `EyeDropper` instance.

Instance methods
----------------

*The `EyeDropper` interface doesn't inherit any methods*.

`EyeDropper.open()` 
Experimental

Returns a promise that resolves to an object that gives access to the selected color.

Examples
--------

### Opening the eyedropper tool and sampling a color

This example shows how to open an eyedropper tool and wait for the user to either select a pixel from the screen, or press `Escape` to cancel the eyedropper mode.

#### HTML


```html
<button id="start-button">Open the eyedropper</button> <span id="result"></span>
```


#### JavaScript


```js
document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent =
      "Your browser does not support the EyeDropper API";
    return;
  }

  const eyeDropper = new EyeDropper();

  eyeDropper
    .open()
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });
});
```


#### Result

### Aborting the eyedropper mode

This example shows that the eyedropper mode can also be aborted before the user has selected a color or pressed `Escape`.

#### HTML


```html
<button id="start-button">Open the eyedropper</button> <span id="result"></span>
```


#### JavaScript


```js
document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent =
      "Your browser does not support the EyeDropper API";
    return;
  }

  const eyeDropper = new EyeDropper();
  const abortController = new AbortController();

  eyeDropper
    .open({ signal: abortController.signal })
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });

  setTimeout(() => {
    abortController.abort();
  }, 2000);
});
```


#### Result

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

| Specification |
| --- |
| EyeDropper API # eyedropper-interface |

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

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

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
**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 **`HIDConnectionEvent`** interface of the `WebHID API` represents HID connection events, and is the event type passed to `connect` and `disconnect` event handlers when an input report is received.

Event

HIDConnectionEventConstructor
-----------

`HIDConnectionEvent()` 
Experimental

Returns a new `HIDConnectionEvent` object. Typically this constructor is not used as events are created when an input report is received.

Instance properties
-------------------

*This interface also inherits properties from `Event`.*

`HIDConnectionEvent.device` Read only  
Experimental

Returns the `HIDDevice` instance representing the device associated with the connection event.

Examples
--------

The following example registers event listeners for `connect` and `disconnect` events, then prints the `HIDDevice.productName` to the console.


```js
navigator.hid.addEventListener("connect", ({ device }) => {
  console.log(`HID connected: ${device.productName}`);
});

navigator.hid.addEventListener("disconnect", ({ device }) => {
  console.log(`HID disconnected: ${device.productName}`);
});
```

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

| Specification |
| --- |
| WebHID API # dom-hidconnectionevent |

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

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

The **`SVGCircleElement`** interface is an interface for the `<circle>` element.

EventTarget

Node

Element

SVGElement

SVGGraphicsElement

SVGGeometryElement

SVGCircleElementInstance properties
-------------------

*This interface also inherits properties from its parent, `SVGGeometryElement`.*

`SVGCircleElement.cx` Read only 

This property defines the x-coordinate of the center of the `<circle>` element. It is denoted by the `cx` attribute of the element.

`SVGCircleElement.cy` Read only 

This property defines the y-coordinate of the center of the `<circle>` element. It is denoted by the `cy` attribute of the element.

`SVGCircleElement.r` Read only 

This property defines the radius of the `<circle>` element. It is denoted by the `r` of the element.

Instance methods
----------------

*This interface has no methods but inherits methods from its parent, `SVGGeometryElement`.*

Examples
--------

### Resizing a circle

In this example we draw a circle and randomly increase or decrease its radius when you click it.

#### HTML


```html
<svg
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 250 250"
 width="250"
 height="250">
  <circle
 cx="100"
 cy="100"
 r="50"
 fill="gold"
 id="circle"
 onclick="clickCircle();" />
</svg>
```


#### JavaScript


```js
function clickCircle() {
  const circle = document.getElementById("circle");
  // Randomly determine if the circle radius will increase or decrease
  const change = Math.random() > 0.5 ? 10 : -10;
  // Clamp the circle radius to a minimum of 10 and a maximum of 250,
  // so it won't disappear or get bigger than the viewport
  const newValue = Math.min(Math.max(circle.r.baseVal.value + change, 10), 250);
  circle.setAttribute("r", newValue);
}
```

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

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

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

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

See also
--------

* `<circle>` SVG element
DelayNode
=========

The **`DelayNode`** interface represents a delay-line; an `AudioNode` audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.

A `DelayNode` always has exactly one input and one output, both with the same amount of channels.

![The DelayNode acts as a delay-line, here with a value of 1s.](/en-US/docs/Web/API/DelayNode/webaudiodelaynode.png)

When creating a graph that has a cycle, it is mandatory to have at least one `DelayNode` in the cycle, or the nodes taking part in the cycle will be muted.

EventTarget

AudioNode

DelayNode

|  |  |
| --- | --- |
| Number of inputs | `1` |
| Number of outputs | `1` |
| Channel count mode | `"max"` |
| Channel count | `2` (not used in the default count mode) |
| Channel interpretation | `"speakers"` |

Constructor
-----------

`DelayNode()`

Creates a new instance of an DelayNode object instance. As an alternative, you can use the `BaseAudioContext.createDelay()` factory method; see Creating an AudioNode.

Instance properties
-------------------

*Inherits properties from its parent, `AudioNode`.*

`DelayNode.delayTime` Read only 

An a-rate `AudioParam` representing the amount of delay to apply, specified in seconds.

Instance methods
----------------

*No specific methods; inherits methods from its parent, `AudioNode`.*

Example
-------

See `BaseAudioContext.createDelay()` for example code.

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

| Specification |
| --- |
| Web Audio API # DelayNode |

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

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

See also
--------

* Using the Web Audio API
CSSMatrixComponent
==================

The **`CSSMatrixComponent`** interface of the CSS\_Object\_Model#css\_typed\_object\_model represents the matrix() and matrix3d() values of the individual `transform` property in CSS. It inherits properties and methods from its parent `CSSTransformValue`.

CSSTransformComponent

CSSMatrixComponentConstructor
-----------

`CSSMatrixComponent()`

Creates a new `CSSMatrixComponent` object.

Instance properties
-------------------

`matrix`

A matrix.

Examples
--------

To do.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # cssmatrixcomponent |

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

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

The **`MediaEncryptedEvent`** interface of the Encrypted Media Extensions API contains the information associated with an `encrypted` event sent to a `HTMLMediaElement` when some initialization data is encountered in the media.

Event

MediaEncryptedEventConstructor
-----------

`MediaEncryptedEvent()`

Creates a new instance of a `MediaEncryptedEvent` object.

Instance properties
-------------------

*This interface also inherits properties from its parent, `Event`.*

`MediaEncryptedEvent.initDataType` Read only 

Returns a case-sensitive string with the *type* of the format of the initialization data found.

`MediaEncryptedEvent.initData` Read only 

Returns an `ArrayBuffer` containing the initialization data found. If there is no initialization data associated with the format, it returns `null`.

Instance methods
----------------

*This interface doesn't provide any specific methods, but inherits methods from its parent, `Event`.*

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

| Specification |
| --- |
| Encrypted Media Extensions # mediaencryptedevent |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
EXT\_sRGB extension
===================

The **`EXT_sRGB`** extension is part of the WebGL API and adds sRGB support to textures and framebuffer objects.

WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.

**Note:** This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default. The constants in WebGL2 are: `gl.SRGB`, `gl.SRGB8`, `gl.SRGB8_ALPHA8` and `gl.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING`.

Constants
---------

This extension exposes the following constants, which can be used in the `texImage2D()`, `texSubImage2D()`, `renderbufferStorage()` and `getFramebufferAttachmentParameter()` methods.

`ext.SRGB_EXT`

Unsized sRGB format that leaves the precision up to the driver.

`ext.SRGB_ALPHA_EXT`

Unsized sRGB format with unsized alpha component.

`ext.SRGB8_ALPHA8_EXT`

Sized (8-bit) sRGB and alpha formats.

`ext.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING_EXT`

Returns the framebuffer color encoding (`gl.LINEAR` or `ext.SRGB_EXT`).

Examples
--------


```js
const ext = gl.getExtension("EXT\_sRGB");

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE\_2D, texture);

gl.texImage2D(
  gl.TEXTURE\_2D,
  0,
  ext.SRGB\_EXT,
  512,
  512,
  0,
  ext.SRGB\_EXT,
  gl.UNSIGNED\_BYTE,
  image,
);
```

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

| Specification |
| --- |
| WebGL EXT\_sRGB Extension Specification  |

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

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

See also
--------

* `WebGLRenderingContext.getExtension()`
* `WebGLRenderingContext.texImage2D()`
* `WebGLRenderingContext.texSubImage2D()`
* `WebGLRenderingContext.renderbufferStorage()`
* `WebGLRenderingContext.getFramebufferAttachmentParameter()`
OES\_texture\_half\_float\_linear extension
===========================================

The **`OES_texture_half_float_linear`** extension is part of the WebGL API and allows linear filtering with half floating-point pixel types for textures.

WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.

**Note:** This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default and the extension is not needed.

Linear filtering
----------------

The `OES_texture_half_float` extension alone does not allow linear filtering with half floating-point textures. This extension enables this ability.

With the help of this extension, you can now set the magnification or minification filter in the `WebGLRenderingContext.texParameter()` method to one of `gl.LINEAR`, `gl.LINEAR_MIPMAP_NEAREST`, `gl.NEAREST_MIPMAP_LINEAR`, or `gl.LINEAR_MIPMAP_LINEAR`, and use half floating-point textures.

Examples
--------


```js
const halfFloat = gl.getExtension("OES\_texture\_half\_float");
gl.getExtension("OES\_texture\_half\_float\_linear");

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE\_2D, texture);

gl.texParameterf(gl.TEXTURE\_2D, gl.TEXTURE\_MAG\_FILTER, gl.LINEAR);
gl.texImage2D(
  gl.TEXTURE\_2D,
  0,
  gl.RGBA,
  gl.RGBA,
  halfFloat.HALF\_FLOAT\_OES,
  image,
);
```

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

| Specification |
| --- |
| WebGL OES\_texture\_half\_float\_linear Khronos Ratified Extension Specification  |

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

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

See also
--------

* `WebGLRenderingContext.getExtension()`
* `WebGLRenderingContext.texImage2D()`
* `WebGLRenderingContext.texSubImage2D()`
* `OES_texture_float`
* `OES_texture_float_linear`
* `OES_texture_half_float`
CSSKeywordValue
===============

The **`CSSKeywordValue`** interface of the CSS Typed Object Model API creates an object to represent CSS keywords and other identifiers.

The interface instance name is a stringifier meaning that when used anywhere a string is expected it will return the value of `CSSKeyword.value`.

CSSStyleValue

CSSKeywordValueConstructor
-----------

`CSSKeywordValue()`

Creates a new `CSSKeywordValue` object.

Instance properties
-------------------

`CSSKeywordValue.value`

Returns or sets the value of the `CSSKeywordValue`.

Instance methods
----------------

*Inherits methods from `CSSStyleValue`.*

Examples
--------

The following example resets the CSS `display` property to its defaults, setting the inline `style` attribute to `style="display: initial"` if viewed in the developer tools inspector.
```

#myElement {
  display: flex;
}
```


```
<div id="myElement">
  Check the developer tools to see the log in the console and to inspect the
  style attribute on this div.
</div>
```



```js
let myElement = document.getElementById("myElement").attributeStyleMap;
myElement.set("display", new CSSKeywordValue("initial"));

console.log(myElement.get("display").value); // 'initial'
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # keywordvalue-objects |

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

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

See also
--------

* `CSSImageValue`
* `CSSNumericValue`
* `CSSPositionValue`
* `CSSTransformValue`
* `CSSUnparsedValue`
SVGFEDropShadowElement
======================

The **`SVGFEDropShadowElement`** interface corresponds to the `<feDropShadow>` element.

EventTarget

Node

Element

SVGElement

SVGFEDropShadowElementInstance properties
-------------------

*This interface also inherits properties from its parent interface, `SVGElement`.*

`SVGFEDropShadowElement.dx` Read only 

An `SVGAnimatedNumber` corresponding to the `dx` attribute of the given element.

`SVGFEDropShadowElement.dy` Read only 

An `SVGAnimatedNumber` corresponding to the `dy` attribute of the given element.

`SVGFEDropShadowElement.height` Read only 

An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.

`SVGFEDropShadowElement.in1` Read only 

An `SVGAnimatedString` corresponding to the `in` attribute of the given element.

`SVGFEDropShadowElement.result` Read only 

An `SVGAnimatedString` corresponding to the `result` attribute of the given element.

`SVGFEDropShadowElement.stdDeviationX` Read only 

An `SVGAnimatedNumber` corresponding to the (possibly automatically computed) X component of the `stdDeviationX` attribute of the given element.

`SVGFEDropShadowElement.stdDeviationY` Read only 

An `SVGAnimatedNumber` corresponding to the (possibly automatically computed) Y component of the `stdDeviationY` attribute of the given element.

`SVGFEDropShadowElement.width` Read only 

An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.

`SVGFEDropShadowElement.x` Read only 

An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.

`SVGFEDropShadowElement.y` Read only 

An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.

Instance methods
----------------

*This interface also inherits methods of its parent, `SVGElement`.*

`SVGFEDropShadowElement.setStdDeviation()`

Sets the values for the `stdDeviation` attribute.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # InterfaceSVGFEDropShadowElement |

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

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

See also
--------

* `<feDropShadow>`
CSSImportRule
=============

The **`CSSImportRule`** interface represents an `@import` at-rule.

CSSRule

CSSImportRuleInstance properties
-------------------

*Inherits properties from its ancestor `CSSRule`.*

`CSSImportRule.href` Read only 

Returns the URL specified by the `@import` rule.

`CSSImportRule.layerName` Read only 

Returns the name of the cascade layer declared in the `@import` rule, the empty string if the layer is anonymous, the or `null` if the rule doesn't declare any.

`CSSImportRule.media`

Returns the value of the `media` attribute of the associated stylesheet.

`CSSImportRule.styleSheet` Read only 

Returns the associated stylesheet.

`CSSImportRule.supportsText` Read only 

Returns the supports condition specified by the `@import` rule.

Instance methods
----------------

*Inherits methods from its ancestor `CSSRule`.*

Examples
--------

The document includes a single stylesheet which contains a single `@import` rule. Therefore the first item in the list of CSS rules will be a `CSSImportRule`.


```css
@import url("style.css") screen;
```



```js
const myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // A CSSImportRule instance object
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssimportrule-interface |

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

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

The **`WebGLQuery`** interface is part of the WebGL 2 API and provides ways to asynchronously query for information. By default, occlusion queries and primitive queries are available.

Another kind of queries are disjoint timer queries, which allow you to measure performance and profiling of your GPU. Disjoint timer queries are available with the `EXT_disjoint_timer_query` extension only.

WebGLObject

WebGLQuery
When working with `WebGLQuery` objects, the following methods of the `WebGL2RenderingContext` are useful:

* `WebGL2RenderingContext.createQuery()`
* `WebGL2RenderingContext.deleteQuery()`
* `WebGL2RenderingContext.isQuery()`
* `WebGL2RenderingContext.beginQuery()`
* `WebGL2RenderingContext.endQuery()`
* `WebGL2RenderingContext.getQuery()`
* `WebGL2RenderingContext.getQueryParameter()`
Examples
--------

### Creating a `WebGLQuery` object

in this example, `gl` must be a `WebGL2RenderingContext`. `WebGLQuery` objects are not available in WebGL 1.


```js
const query = gl.createQuery();
```

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

| Specification |
| --- |
| WebGL 2.0 Specification # 3.2 |

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

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

See also
--------

* `EXT_disjoint_timer_query`
origin global property
======================

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

 The global **`origin`** read-only property returns the origin of the global
 scope, serialized as a string.

Value
-----

A string.

Examples
--------

 Executed from inside a worker script, the following snippet will log the worker's
 global scope's origin to the console each time it receives a message


```js
onmessage = () => {
  console.log(self.origin);
};
```


 If the origin is not a scheme/host/port tuple (say you are trying to run it locally,
 i.e. via `file://` URL), `origin` will return the string
 `"null"`.

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

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

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

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