recursal/MDN huggingface dataset:
SVGGeometryElement: isPointInFill() method
==========================================

 The **`SVGGeometryElement.isPointInFill()`** method determines
 whether a given point is within the fill shape of an element. Normal hit testing rules
 apply; the value of the `pointer-events` property on the element determines
 whether a point is considered to be within the fill. The `point` argument is
 interpreted as a point in the local coordinate system of the element.

Syntax
------


```js
isPointInFill(point)
```

### Parameters

`point`

 A DOMPointInit object interpreted as a point in the local coordinate system
 of the element.


### Return value

A boolean indicating whether the given point is within the fill or not.

Examples
--------

### SVG


```html
<svg
 viewBox="0 0 100 100"
 width="150"
 height="150"
 xmlns="http://www.w3.org/2000/svg">
  <circle
 id="circle"
 cx="50"
 cy="50"
 r="45"
 fill="white"
 stroke="black"
 stroke-width="10" />
</svg>
```

### JavaScript


```js
const svg = document.getElementsByTagName("svg")[0];
const circle = document.getElementById("circle");
const points = [
  ["10", "10"],
  ["40", "30"],
  ["70", "40"],
  ["15", "75"],
  ["83", "83"],
];

for (const point of points) {
  let isPointInFill;

  try {
    const pointObj = new DOMPoint(point[0], point[1]);
    isPointInFill = circle.isPointInFill(pointObj);
  } catch (e) {
    // Fallback for browsers that don't support DOMPoint as an argument
    const pointObj = svg.createSVGPoint();
    pointObj.x = point[0];
    pointObj.y = point[1];
    isPointInFill = circle.isPointInFill(pointObj);
  }

  console.log(`Point at ${point[0]},${point[1]}: ${isPointInFill}`);

  const pointEl = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "circle",
  );
  pointEl.style.cx = point[0];
  pointEl.style.cy = point[1];
  pointEl.style.r = 5;
  pointEl.style.fill = isPointInFill ? "seagreen" : "rgb(255 0 0 / 50%)";
  svg.appendChild(pointEl);
}
```

### Result

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGGeometryElement\_\_isPointInFill |

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

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

 The
 **`SVGGeometryElement.getPointAtLength()`** method returns the
 point at a given distance along the path.

Syntax
------


```js
getPointAtLength(distance)
```

### Parameters

`distance`

A float referring to the distance along the path.

### Return value

A `DOMPoint` indicating the point at a given distance along the path.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGGeometryElement\_\_getPointAtLength |

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

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

 The **`SVGGeometryElement.isPointInStroke()`** method
 determines whether a given point is within the stroke shape of an element. Normal hit
 testing rules apply; the value of the `pointer-events` property on the
 element determines whether a point is considered to be within the stroke. The
 `point` argument is interpreted as a point in the local coordinate system of
 the element.

Syntax
------


```js
isPointInStroke(point)
```

### Parameters

`point`

 An object interpreted as a point in the local coordinate system
 of the element.


### Return value

A boolean indicating whether the given point is within the stroke or not.

Examples
--------

### SVG


```html
<svg
 viewBox="0 0 100 100"
 width="150"
 height="150"
 xmlns="http://www.w3.org/2000/svg">
  <circle
 id="circle"
 cx="50"
 cy="50"
 r="45"
 fill="white"
 stroke="black"
 stroke-width="10" />
</svg>
```

### JavaScript


```js
const svg = document.getElementsByTagName("svg")[0];
const circle = document.getElementById("circle");
const points = [
  ["10", "10"],
  ["40", "30"],
  ["70", "40"],
  ["15", "75"],
  ["83", "83"],
];

for (const point of points) {
  let isPointInStroke;

  try {
    const pointObj = new DOMPoint(point[0], point[1]);
    isPointInFill = circle.isPointInStroke(pointObj);
  } catch (e) {
    // Fallback for browsers that don't support DOMPoint as an argument
    const pointObj = svg.createSVGPoint();
    pointObj.x = point[0];
    pointObj.y = point[1];
    isPointInStroke = circle.isPointInStroke(pointObj);
  }

  console.log(`Point at ${point[0]},${point[1]}: ${isPointInStroke}`);

  const pointEl = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "circle",
  );
  pointEl.style.cx = point[0];
  pointEl.style.cy = point[1];
  pointEl.style.r = 5;
  pointEl.style.fill = isPointInStroke ? "seagreen" : "rgb(255 0 0 / 50%)";
  svg.appendChild(pointEl);
}
```

### Result

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGGeometryElement\_\_isPointInStroke |

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

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

 The **`SVGGeometryElement.getTotalLength()`** method returns
 the user agent's computed value for the total length of the path in user units.

Syntax
------


```js
getTotalLength()
```

### Parameters

None.

### Return value

A float indicating the total length of the path in user units.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGGeometryElement\_\_getTotalLength |

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

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

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

 The **`description`** read-only property of the
 `GPUAdapterInfo` interface returns a human-readable string describing the adapter, or an empty string if it is not available.

Value
-----

A string.

Examples
--------


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const adapterInfo = await adapter.requestAdapterInfo();
  console.log(adapterInfo.description);

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapterinfo-description |

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

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

See also
--------

* The WebGPU API
GPUAdapterInfo: vendor property
===============================

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

 The **`vendor`** read-only property of the
 `GPUAdapterInfo` interface returns the name of the adapter vendor, or an empty string if it is not available.

Value
-----

A string.

Examples
--------


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const adapterInfo = await adapter.requestAdapterInfo();
  console.log(adapterInfo.vendor);

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapterinfo-vendor |

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

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

See also
--------

* The WebGPU API
GPUAdapterInfo: device property
===============================

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

 The **`device`** read-only property of the
 `GPUAdapterInfo` interface returns a vendor-specific identifier for the adapter, or an empty string if it is not available.

Value
-----

A string.

Examples
--------


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const adapterInfo = await adapter.requestAdapterInfo();
  console.log(adapterInfo.device);

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapterinfo-device |

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

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

See also
--------

* The WebGPU API
GPUAdapterInfo: architecture property
=====================================

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

 The **`architecture`** read-only property of the
 `GPUAdapterInfo` interface returns the name of the family or class of GPUs the adapter belongs to, or an empty string if it is not available.

Value
-----

A string.

Examples
--------


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const adapterInfo = await adapter.requestAdapterInfo();
  console.log(adapterInfo.architecture);

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapterinfo-architecture |

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

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

See also
--------

* The WebGPU API
OverconstrainedError: constraint property
=========================================

 The **`constraint`** read-only property of the
 `OverconstrainedError` interface returns the constraint that was supplied
 in the constructor, meaning the constraint that was not satisfied.

Value
-----

A string.

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

| Specification |
| --- |
| Media Capture and Streams # dom-overconstrainederror-constraint |

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

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

 The **`OverconstrainedError()`** constructor
 creates a new `OverconstrainedError` object which indicates that the set of
 desired capabilities for the current `MediaStreamTrack` cannot currently be
 met. When this event is thrown on a `MediaStreamTrack`, it is muted until
 either the current constraints can be established or until satisfiable constraints are
 applied.

Syntax
------


```js
new OverconstrainedError()
```

### Parameters

`constraint`

The constraint that was not satisfied.

`message` Optional

Text for the error's `message` property. Defaults to an empty string.

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

| Specification |
| --- |
| Media Capture and Streams # dom-overconstrainederror |

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

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

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

The **`type`** read-only property of the `AudioSinkInfo` interface returns the type of the audio output device.

Value
-----

A string. Currently the only value is `none`.

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

| Specification |
| --- |
| Web Audio API # dom-audiosinkinfo-type |

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

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

See also
--------

* SetSinkId test example
* `AudioContext.setSinkId()`
* `AudioContext.sinkId`
* `sinkchange`
BatteryManager: dischargingTime property
========================================

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

 The **`BatteryManager.dischargingTime`** property indicates the amount of time, in seconds, that remains until the battery is fully discharged,
 or `Infinity` if the battery is currently charging rather than discharging or the user agent is unable to report the battery status information.
 When its value changes, the `dischargingtimechange` event is fired.


**Note:** Even if the time returned is precise to the second, browsers round them to a higher
 interval (typically to the closest 15 minutes) for privacy reasons.


Value
-----

A number.

Examples
--------

### HTML


```html
<div id="dischargingTime">(discharging time unknown)</div>
```

### JavaScript


```js
navigator.getBattery().then((battery) => {
  const time = battery.dischargingTime;

  document.querySelector("#dischargingTime").textContent =
    `Remaining time to fully discharge the battery: ${time}`;
});
```

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

| Specification |
| --- |
| Battery Status API # dom-batterymanager-dischargingtime |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`
BatteryManager: charging property
=================================

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

The **`BatteryManager.charging`** property is a Boolean value indicating whether or not the device's battery is currently being charged. When its value changes, the `chargingchange` event is fired.

If the battery is charging or the user agent is unable to report the battery status information, this value is `true`. Otherwise, it is `false`.

Value
-----

A boolean.

Examples
--------

### HTML


```html
<div id="charging">(charging state unknown)</div>
```

### JavaScript


```js
navigator.getBattery().then((battery) => {
  const charging = battery.charging;

  document.querySelector("#charging").textContent = charging;
});
```

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

| Specification |
| --- |
| Battery Status API # dom-batterymanager-charging |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`
BatteryManager: chargingchange event
====================================

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

The **`chargingchange`** event of the Battery Status API is fired when the battery `charging` property is updated.

Syntax
------

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


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

onchargingchange = (event) => { }
```

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

*A generic `Event`.*

Example
-------

### HTML


```html
<div id="level">(battery level unknown)</div>
<div id="chargingTime">(charging time unknown)</div>
```

### JavaScript


```js
navigator.getBattery().then((battery) => {
  battery.onchargingchange = () => {
    document.querySelector("#level").textContent = battery.level;
    document.querySelector("#chargingTime").textContent = battery.chargingTime;
  };
});
```

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

| Specification |
| --- |
| Battery Status API # ref-for-dfn-chargingchange-1 |
| Battery Status API # dom-batterymanager-onchargingchange |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`
BatteryManager: chargingtimechange event
========================================

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

The **`chargingtimechange`** event of the Battery Status API is fired when the battery `chargingTime` property is updated.

Syntax
------

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


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

onchargingtimechange = (event) => { }
```

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

*A generic `Event`.*

Example
-------

### HTML


```html
<div id="level">(battery level unknown)</div>
<div id="chargingTime">(charging time unknown)</div>
```

### JavaScript


```js
navigator.getBattery().then((battery) => {
  battery.onchargingtimechange = () => {
    document.querySelector("#level").textContent = battery.level;
    document.querySelector("#chargingTime").textContent = battery.chargingTime;
  };
});
```

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

| Specification |
| --- |
| Battery Status API # ref-for-dfn-chargingtimechange-1 |
| Battery Status API # dom-batterymanager-onchargingtimechange |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`
BatteryManager: level property
==============================

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

 The **`BatteryManager.level`** property indicates the current battery charge level as a value between `0.0` and `1.0`.
 A value of `0.0` means the battery is empty and the system is about to be suspended.
 A value of `1.0` means the battery is full or the user agent is unable to report the battery status information.
 When its value changes, the `levelchange` event is fired.

Value
-----

A number.

Examples
--------

### Getting the battery level

#### HTML


```html
<button id="get-level">Get battery level</button>
<div id="output"></div>
```


#### JavaScript


```js
const getLevel = document.querySelector("#get-level");
const output = document.querySelector("#output");

getLevel.addEventListener("click", async () => {
  if (!navigator.getBattery) {
    output.textContent = "Battery manager is unsupported";
  } else {
    const manager = await navigator.getBattery();
    const level = manager.level;
    output.textContent = `Battery level: ${level}`;
  }
});
```


#### Result

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

| Specification |
| --- |
| Battery Status API # dom-batterymanager-level |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`
BatteryManager: dischargingtimechange event
===========================================

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

The **`dischargingtimechange`** event of the Battery Status API is fired when the battery `dischargingTime` property is updated.

Syntax
------

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


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

ondischargingtimechange = (event) => { }
```

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

*A generic `Event`.*

Example
-------

### HTML


```html
<div id="level">(battery level unknown)</div>
<div id="chargingTime">(charging time unknown)</div>
```

### JavaScript


```js
navigator.getBattery().then((battery) => {
  battery.ondischargingtimechange = () => {
    document.querySelector("#level").textContent = battery.level;
    document.querySelector("#chargingTime").textContent = battery.chargingTime;
  };
});
```

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

| Specification |
| --- |
| Battery Status API # ref-for-dfn-dischargingtimechange-1 |
| Battery Status API # dom-batterymanager-ondischargingtimechange |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`
BatteryManager: levelchange event
=================================

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

The **`levelchange`** event of the Battery Status API is fired when the battery `level` property is updated.

Syntax
------

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


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

onlevelchange = (event) => { }
```

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

*A generic `Event`.*

Example
-------

### HTML


```html
<div id="level">(battery level unknown)</div>
<div id="stateBattery">(charging state unknown)</div>
```

### JavaScript


```js
navigator.getBattery().then((battery) => {
  battery.onlevelchange = () => {
    document.querySelector("#level").textContent = battery.level;

    if (battery.charging) {
      document.querySelector("#stateBattery").textContent = `Charging time: ${
 battery.chargingTime / 60
 }`;
    } else {
      document.querySelector("#stateBattery").textContent =
        `Discharging time: ${battery.dischargingTime / 60}`;
    }
  };
});
```

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

| Specification |
| --- |
| Battery Status API # ref-for-dfn-levelchange-1 |
| Battery Status API # dom-batterymanager-onlevelchange |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`
BatteryManager: chargingTime property
=====================================

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

 The **`BatteryManager.chargingTime`** property indicates the amount of time, in seconds, that remain until the battery is fully charged, or `0` if the battery is already fully charged or the user agent is unable to report the battery status information.
 If the battery is currently discharging, its value is `Infinity`.
 When its value changes, the `chargingtimechange` event is fired.


**Note:** Even if the time returned is precise to the second,
 browsers round them to a higher interval
 (typically to the closest 15 minutes) for privacy reasons.


Value
-----

A number.

Examples
--------

### HTML


```html
<div id="chargingTime">(charging time unknown)</div>
```

### JavaScript


```js
navigator.getBattery().then((battery) => {
  const time = battery.chargingTime;

  document.querySelector("#chargingTime").textContent =
    `Time to fully charge the battery: ${time}s`;
});
```

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

| Specification |
| --- |
| Battery Status API # dom-batterymanager-chargingtime |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`
RTCTransformEvent: transformer property
=======================================

The read-only **`transformer`** property of the `RTCTransformEvent` interface returns the `RTCRtpScriptTransformer` associated with the event.

The property exposes the WebRTC sender or receiver pipeline as a readable and writable stream of encoded media frames, which a WebRTC Encoded Transform can insert itself into in order to modify frames.

Value
-----

A `RTCRtpScriptTransformer`.

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

| Specification |
| --- |
| WebRTC Encoded Transform # dom-rtctransformevent-transformer |

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

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

See also
--------

* Using WebRTC Encoded Transforms