recursal/MDN huggingface dataset:
SVGMarkerElement: preserveAspectRatio property
==============================================

The **`preserveAspectRatio`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedPreserveAspectRatio` object containing the value of the `preserveAspectRatio` attribute of the `<marker>`.

Value
-----

An `SVGAnimatedPreserveAspectRatio` object. The `baseVal` property of this object returns an `SVGPreserveAspectRatio` object, with the following properties:

`align`

One of the following numeric constants:

`0`

`SVG_PRESERVEASPECTRATIO_UNKNOWN`

`1`

`SVG_PRESERVEASPECTRATIO_NONE`

`2`

`SVG_PRESERVEASPECTRATIO_XMINYMIN`

`3`

`SVG_PRESERVEASPECTRATIO_XMIDYMIN`

`4`

`SVG_PRESERVEASPECTRATIO_XMAXYMIN`

`5`

`SVG_PRESERVEASPECTRATIO_XMINYMID`

`6`

`SVG_PRESERVEASPECTRATIO_XMIDYMID`

`7`

`SVG_PRESERVEASPECTRATIO_XMAXYMID`

`8`

`SVG_PRESERVEASPECTRATIO_XMINYMAX`

`9`

`SVG_PRESERVEASPECTRATIO_XMIDYMAX`

`10`

`SVG_PRESERVEASPECTRATIO_XMAXYMAX`


`meetOrSlice`

One of the following numeric constants:

`0`

`SVG_MEETORSLICE_UNKNOWN`

`1`

`SVG_MEETORSLICE_MEET`

`2`

`SVG_MEETORSLICE_SLICE`


Examples
--------

This example demonstrates how to return the numeric constants for `align` and `meetOrSlice` which relate to the values set for the `preserveAspectRatio` attribute of `<marker>`.


```html
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 preserveAspectRatio="xMidYMid meet"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```



```js
let marker = document.getElementById("arrow");
console.log(marker.preserveAspectRatio.baseVal.align); // 6
console.log(marker.preserveAspectRatio.baseVal.meetOrSlice); // 1
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGFitToViewBox\_\_preserveAspectRatio |

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

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

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

 The **`CSSMathMin()`** constructor creates a
 new `CSSMathMin` object which represents the CSS
 `min()` function.

Syntax
------


```js
new CSSMathMin(args)
```

### Parameters

`args`

 A list of values for the `CSSMathProduct` object to be either a double
 integer or a `CSSNumericValue`.


### Exceptions

`TypeError`

Thrown if there is a *failure* when adding all of the values in args.

Examples
--------

To do

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

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

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

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

 The CSSMathMin.values read-only property of the
 `CSSMathMin` interface returns a `CSSNumericArray` object
 which contains one or more `CSSNumericValue` objects.

Value
-----

A `CSSNumericArray`.

Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssmathmin-values |

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

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

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `bufferSize` property of the `ScriptProcessorNode` interface returns an integer representing both the input and output buffer size, in sample-frames. Its value can be a power of 2 value in the range `256` – `16384`.

**Note:** This feature was replaced by AudioWorklets and the `AudioWorkletNode` interface.

Value
-----

An integer.

Examples
--------

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

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

Since the August 29, 2014 Web Audio API specification publication, this feature has been deprecated. It is no longer on track to become a standard.

It was replaced by AudioWorklets and the `AudioWorkletNode` interface.

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

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

See also
--------

* Using the Web Audio API
NetworkInformation: downlink property
=====================================

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

 The **`downlink`** read-only property of the
 `NetworkInformation` interface returns the effective bandwidth estimate in
 megabits per second, rounded to the nearest multiple of 25 kilobits per seconds. This
 value is based on recently observed application layer throughput across recently active
 connections, excluding connections made to a private address space. In the absence of
 recent bandwidth measurement data, the attribute value is determined by the properties
 of the underlying connection technology.

Value
-----

A number.

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

| Specification |
| --- |
| Network Information API # dom-networkinformation-downlink |

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

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

See also
--------

* `Downlink`
NetworkInformation: rtt property
================================

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

 The **`NetworkInformation.rtt`** read-only property returns the
 estimated effective round-trip time of the current connection, rounded to the nearest
 multiple of 25 milliseconds. This value is based on recently observed application-layer
 RTT measurements across recently active connections. It excludes connections made to a
 private address space. If no recent measurement data is available, the value is based on
 the properties of the underlying connection technology.

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

Value
-----

A number.

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

| Specification |
| --- |
| Network Information API # dom-networkinformation-rtt |

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

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

See also
--------

* `RTT`
NetworkInformation: change event
================================

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

 The **`change`** event fires when connection information changes, and the event
 is received by the `NetworkInformation` object.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------


```js
// Get the connection type.
const type = navigator.connection.type;

function changeHandler(e) {
  // Handle change of connection type here.
}

// Register for event changes:
navigator.connection.onchange = changeHandler;

// Another way: navigator.connection.addEventListener('change', changeHandler);
```

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

| Specification |
| --- |
| Network Information API # dom-networkinformation-onchange |

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

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

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

 The **`NetworkInformation.type`** read-only property returns
 the type of connection a device is using to communicate with the network.

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

Value
-----

An enumerated value that is one of the following values:

* `"bluetooth"`
* `"cellular"`
* `"ethernet"`
* `"none"`
* `"wifi"`
* `"wimax"`
* `"other"`
* `"unknown"`
Specifications
--------------

| Specification |
| --- |
| Network Information API # dom-networkinformation-type |

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

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

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

 The **`NetworkInformation.downlinkMax`** read-only property
 returns the maximum downlink speed, in megabits per second (Mbps), for the underlying
 connection technology.

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

Value
-----

An `unrestricted double` representing the maximum downlink speed, in megabits per second (Mb/s), for the underlying connection technology.

Examples
--------

 The following example monitors the connection using the `change` event and
 logs changes as they occur.


```js
function logConnectionType() {
  let connectionType = "not supported";
  let downlinkMax = "not supported";

  if ("connection" in navigator) {
    connectionType = navigator.connection.effectiveType;

    if ("downlinkMax" in navigator.connection) {
      downlinkMax = navigator.connection.downlinkMax;
    }
  }

  console.log(
    `Current connection type: ${connectionType} (downlink max: ${downlinkMax})`,
  );
}

logConnectionType();
navigator.connection.addEventListener("change", logConnectionType);
```

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

| Specification |
| --- |
| Network Information API # dom-networkinformation-downlinkmax |

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

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

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

 The **`NetworkInformation.saveData`** read-only
 property of the `NetworkInformation` interface returns `true` if
 the user has set a reduced data usage option on the user agent.

Value
-----

A boolean value.

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

| Specification |
| --- |
| Save Data API # dfn-savedata |

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

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

See also
--------

* `Save-Data`
NetworkInformation: effectiveType property
==========================================

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

 The **`effectiveType`** read-only property of the
 `NetworkInformation` interface returns the effective type of the connection
 meaning one of `slow-2g`, `2g`, `3g`, or `4g`. This value is determined using a
 combination of recently observed, round-trip time and downlink values.

Value
-----

A string that is either `slow-2g`, `2g`, `3g`, or `4g`.

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

| Specification |
| --- |
| Network Information API # dom-networkinformation-effectivetype |

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

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

See also
--------

* Effective Connection Type
* `ECT`
BluetoothDevice: id property
============================

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

 The **`BluetoothDevice.id`** read-only property returns a
 string that uniquely identifies a device.

Value
-----

A string.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothdevice-id |

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

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

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

 The
 **`BluetoothDevice.gatt`** read-only property returns
 a reference to the device's `BluetoothRemoteGATTServer`.

Value
-----

A reference to the device's `BluetoothRemoteGATTServer`.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothdevice-gatt |

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

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

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

 The **`BluetoothDevice.name`** read-only property returns a
 string that provides a human-readable name for the device.

Value
-----

A string.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothdevice-name |

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

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

The read-only **`CSSKeyframeRule.style`** property is the `CSSStyleDeclaration` interface for the declaration block of the `CSSKeyframeRule`.

Value
-----

A `CSSStyleDeclaration` object, with the following properties:

computed flag

Unset.

declarations

The declared declarations in the rule, in the order they were specified, shorthand properties expanded to longhands.

parent CSS rule

The context object, which is an alias for this.

owner node

Null.

Examples
--------

 The CSS includes a `@keyframes` at-rule. This will be the first `CSSRule` returned by `document.styleSheets[0].cssRules`.
 `myRules[0]` returns a `CSSKeyframesRule` object, which will contain individual `CSSKeyFrameRule` objects for each keyframe.


```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0].style); // a CSSStyleDeclaration
```

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

| Specification |
| --- |
| CSS Animations Level 1 # dom-csskeyframerule-style |

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

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

The **`writable`** read-only property of the `TransformStream` interface returns the `WritableStream` instance controlled by this `TransformStream`.

Value
-----

A `WritableStream`.

Examples
--------

The following example creates a new `TransformStream` as a `textEncoderStream`, and prints the value of `writable` to the console.


```js
const textEncoderStream = new TransformStream();
console.log(textEncoderStream.writable); // a WritableStream
```

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

| Specification |
| --- |
| Streams Standard # ref-for-ts-writable② |

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

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

The **`readable`** read-only property of the `TransformStream` interface returns the `ReadableStream` instance controlled by this `TransformStream`.

Value
-----

A `ReadableStream`.

Examples
--------

The following example creates a new `TransformStream` as `textEncoderStream`, and prints the value of `readable` to the console.


```js
const textEncoderStream = new TransformStream();
console.log(textEncoderStream.readable); // a ReadableStream
```

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

| Specification |
| --- |
| Streams Standard # ref-for-ts-readable② |

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

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

The read-only **`clipPathUnits`** property of the `SVGClipPathElement` interface reflects the `clipPathUnits` attribute of a `<clipPath>` element which defines the coordinate system to use for the content of the element.

**Note:** Although this property is read-only, it is merely a container for two values you can modify, `baseVal` and `animVal`.

Value
-----

An `SVGAnimatedEnumeration` representing the coordinate system. The possible values are defined in the `SVGUnitTypes` interface:

`0` (`SVG_UNIT_TYPE_UNKNOWN`)

The type is not one of the predefined type.

`1` (`SVG_UNIT_TYPE_USERSPACEONUSE`)

Corresponds to a value of `userSpaceOnUse` for the `clipPathUnits` attribute and means that all coordinates inside the element refer to the user coordinate system as defined when the clipping path was created. It is the default value.

`2` (`SVG_UNIT_TYPE_OBJECTBOUNDINGBOX`)

Corresponds to a value of `objectBoundingBox` for the attribute and means that all coordinates inside the element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.

Examples
--------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<div>
  <svg viewBox="0 0 100 100" width="200" height="200">
    <clipPath id="clip1" clipPathUnits="userSpaceOnUse">
      <circle cx="50" cy="50" r="35" />
    </clipPath>

    <clipPath id="clip2" clipPathUnits="objectBoundingBox">
      <circle cx=".5" cy=".5" r=".35" />
    </clipPath>

    <!-- Some reference rect to materialized to clip path -->
    <rect id="r1" x="0" y="0" width="45" height="45" />
    <rect id="r2" x="0" y="55" width="45" height="45" />
    <rect id="r3" x="55" y="55" width="45" height="45" />
    <rect id="r4" x="55" y="0" width="45" height="45" />

    <!-- The first 3 rect are clipped with userSpaceOnUse units -->
    <use clip-path="url(#clip1)" href="#r1" fill="red" />
    <use clip-path="url(#clip1)" href="#r2" fill="blue" />
    <use clip-path="url(#clip1)" href="#r3" fill="yellow" />

    <!-- The last rect is clipped with objectBoundingBox units -->
    <use clip-path="url(#clip2)" href="#r4" fill="green" />
  </svg>
</div>
<pre id="log"></pre>
```



```js
const clipPath1 = document.getElementById("clip1");
const clipPath2 = document.getElementById("clip2");

const log = document.getElementById("log");

log.textContent = `The clipPath used three times has a 'clipPathUnits' value of ${clipPath1.clipPathUnits.baseVal}
The clipPath used three times has a 'clipPathUnits' value of ${clipPath2.clipPathUnits.baseVal}`;
```

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

| Specification |
| --- |
| CSS Masking Module Level 1 # dom-svgclippathelement-clippathunits |

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

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

See also
--------

* `clipPathUnits`
* `<clipPath>`
SVGClipPathElement: transform property
======================================

The read-only **`transform`** property of the `SVGClipPathElement` interface reflects the `transform` attribute of a `<clipPath>` element, that is a list of transformations applied to the element.

Value
-----

A `SVGTransformList`.

Examples
--------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<div>
  <svg viewBox="0 0 100 100" width="200" height="200">
    <clipPath
 id="clip1"
 clipPathUnits="objectBoundingBox"
 transform="skewX(40) scale(1 0.5)">
      <circle cx=".5" cy=".5" r=".35" />
    </clipPath>

    <rect id="r1" x="0" y="0" width="100" height="100" />

    <use clip-path="url(#clip1)" href="#r1" fill="lightblue" />
  </svg>
</div>
<pre id="log"></pre>
```



```js
const translateType = [
  "unknown",
  "matrix()",
  "translate()",
  "scale()",
  "rotate()",
  "skewx()",
  "skewy()",
];

const clipPath1 = document.getElementById("clip1");

const log = document.getElementById("log");

let result = "The following transformation have been applied:\n";
for (const transform of clipPath1.transform.baseVal) {
  result += `- A transform of type '${translateType[transform.type]}' found.\n`;
}

log.textContent = result;
```

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

| Specification |
| --- |
| CSS Masking Module Level 1 # dom-svgclippathelement-transform |

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

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

See also
--------

* `clipPathUnits`
* `<clipPath>`
CSSPropertyRule: inherits 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 read-only **`inherits`** property of the `CSSPropertyRule` interface returns the inherit flag of the custom property registration represented by the `@property` rule, a boolean describing whether or not the property inherits by default.

Value
-----

A boolean.

Examples
--------

This stylesheet contains a single `@property` rule. The first `CSSRule` returned will be a `CSSPropertyRule` representing this rule. The `inherits` property returns the boolean `false`, this being the value of the `inherits` property in the CSS.


```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].inherits); //returns false
```

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

| Specification |
| --- |
| CSS Properties and Values API Level 1 # dom-csspropertyrule-inherits |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSPropertyRule: name 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 read-only **`name`** property of the `CSSPropertyRule` interface represents the property name, this being the serialization of the name given to the custom property in the `@property` rule's prelude.

Value
-----

A string.

Examples
--------

This stylesheet contains a single `@property` rule. The first `CSSRule` returned will be a `CSSPropertyRule` representing this rule. The `name` property returns the string `"--property-name"`, which is the name given to the custom property in CSS.


```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].name); //the string "--property-name"
```

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

| Specification |
| --- |
| CSS Properties and Values API Level 1 # dom-csspropertyrule-name |

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

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