PerformanceResourceTiming: encodedBodySize property - Web APIs

PerformanceResourceTiming: encodedBodySize property
===================================================

 The **`encodedBodySize`** read-only property represents the size (in octets) received from the fetch (HTTP or cache) of the payload body before removing any applied content encodings (like gzip or Brotli). If the resource is retrieved from an application cache or a local resource, it must
 return the size of the payload body before removing any applied content encoding.

Value
-----

The `encodedBodySize` property can have the following values:

* A number representing the size (in octets) received from the fetch (HTTP or cache), of the payload body, before removing any applied content encoding.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Checking if content was compressed

If the `encodedBodySize` and `decodedBodySize` properties are non-null and differ, the content was compressed (for example, gzip or Brotli).

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const uncompressed =
      entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
    if (uncompressed) {
      console.log(`${entry.name} was not compressed!`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const uncompressed =
    entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
  if (uncompressed) {
    console.log(`${entry.name} was not compressed!`);
  }
});
```

### Cross-origin content size information

If the value of the `encodedBodySize` property is `0`, the resource might be a cross-origin request. To expose cross-origin content size information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see content sizes, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-encodedbodysize |

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

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

See also
--------

* `Timing-Allow-Origin`


PerformanceResourceTiming: deliveryType property - Web APIs

PerformanceResourceTiming: deliveryType property
================================================

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

The **`deliveryType`** read-only property is a string indicating how the resource was delivered — for example from the cache or from a navigational prefetch.

Value
-----

A string, which can be one of the following values:

`"cache"`

The resource was retrieved from the cache.

`"navigational-prefetch"`
Experimental

The resource was retrieved from a prefetched response stored in an in-memory cache via the Speculation Rules API.

`""` (empty string)

Returned if none of the above delivery types apply.

Examples
--------

### Filtering resources

The `deliveryType` property can be used to get specific resource timing entries only; for example, only those that were cached.

The following example uses a `PerformanceObserver` to notify of new `resource` performance entries as they are recorded in the browser's performance timeline. The `buffered` option is used for accessing entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  const cachedResources = list.getEntries().filter((entry) => {
    return entry.deliveryType === "cache";
  });
  console.log(cachedResources);
});

observer.observe({ type: "resource", buffered: true });
```

The following example uses `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call the method.

```js
const scripts = performance.getEntriesByType("resource").filter((entry) => {
  return entry.deliveryType === "cache";
});
console.log(scripts);
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-deliverytype |

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

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


PerformanceResourceTiming: firstInterimResponseStart property - Web APIs

PerformanceResourceTiming: firstInterimResponseStart property
=============================================================

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

The **`firstInterimResponseStart`** read-only property returns a `timestamp` immediately after the browser receives the first byte of the interim 1xx response (for example, 100 Continue or 103 Early Hints) from the server.

There is no *end* property for `firstInterimResponseStart`.

Value
-----

The `firstInterimResponseStart` property can have the following values:

* A `DOMHighResTimeStamp` immediately after the browser receives the first interim bytes of the response from the server.
* `0` if the resource was instantaneously retrieved from a cache.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Measuring request time

The `firstInterimResponseStart` and `requestStart` properties can be used to measure how long it takes to the browser to receive an interim response after the sending the request.

```js
const request = entry.firstInterimResponseStart - entry.requestStart;
```

The following example uses a `PerformanceObserver` to notify of new `resource` performance entries as they are recorded in the browser's performance timeline. The `buffered` option is used for accessing entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.firstInterimResponseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Interim response time: ${request}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

The following example uses `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call the method.

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const request = entry.firstInterimResponseStart - entry.requestStart;
  if (request > 0) {
    console.log(`${entry.name}: Interim response time: ${request}ms`);
  }
});
```

### Cross-origin timing information

If the value of the `firstInterimResponseStart` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see timing resources, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-firstinterimresponsestart |

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

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

See also
--------

* `Timing-Allow-Origin`


PerformanceResourceTiming: initiatorType property - Web APIs

PerformanceResourceTiming: initiatorType property
=================================================

The **`initiatorType`** read-only property is a string representing web platform feature that initiated the resource load.

**Note:** This property does not represent the type of content fetched. A `.css` file can be fetched using a `<link>` element leading to an `initiatorType` of `link`. When loading images using `background: url()` in a CSS file, the `initiatorType` will be `css` and not `img`.

Value
-----

The `initiatorType` property can have the following values, or `other` if none of the conditions match.

`audio`

If the request was initiated by an `<audio>` element's `src` attribute.

`beacon`

If the request was initiated by a `navigator.sendBeacon()` method.

`body`

If the request was initiated by a `<body>` element's `background` attribute.

`css`

If the request was initiated by a CSS `url()` function.

`early-hint`

If the request was initiated by an `103` `Early Hint` response.

`embed`

If the request was initiated by an `<embed>` element's `src` attribute.

`fetch`

If the request was initiated by a `fetch()` method.

`frame`

If the request was initiated by loading a `<frame>` element.

`iframe`

If the request was initiated by an `<iframe>` element's `src` attribute.

`icon`
Non-standard

If the request was initiated by a favicon. Non-standard and only reported by Safari.

`image`

If the request was initiated by an `<image>` element.

`img`

If the request was initiated by an `<img>` element's `src` or `srcset` attribute.

`input`

If the request was initiated by an `<input>` element of type `image`.

`link`

If the request was initiated by a `<link>` element.

`navigation`

If the request was initiated by a navigation request.

`object`

If the request was initiated by an `<object>` element.

`ping`

If the request was initiated by an `<a>` element's `ping`.

`script`

If the request was initiated by a `<script>` element.

`track`

If the request was initiated by a `<track>` element's `src`.

`video`

If the request was initiated by a `<video>` element's `poster` or `src`.

`xmlhttprequest`

If the request was initiated by an `XMLHttpRequest`.

Examples
--------

### Filtering resources

The `initiatorType` property can be used to get specific resource timing entries only. For example, only those that were initiated by `<script>` elements.

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  const scripts = list.getEntries().filter((entry) => {
    return entry.initiatorType === "script";
  });
  console.log(scripts);
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const scripts = performance.getEntriesByType("resource").filter((entry) => {
  return entry.initiatorType === "script";
});
console.log(scripts);
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-initiatortype |

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

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


PerformanceResourceTiming: redirectEnd property - Web APIs

PerformanceResourceTiming: redirectEnd property
===============================================

The **`redirectEnd`** read-only property returns a `timestamp` immediately after receiving the last byte of the response of the last redirect.

When fetching a resource, if there are multiple HTTP redirects, and any of the redirects have an origin that is different from the current document, and the timing allow check algorithm passes for each redirected resource, this property returns the time immediately after receiving the last byte of the response of the last redirect; otherwise, zero is returned.

To get the amount of redirects, see also `PerformanceNavigationTiming.redirectCount`.

Value
-----

The `redirectEnd` property can have the following values:

* A `timestamp` immediately after receiving the last byte of the response of the last redirect.
* `0` if there is no redirect.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Measuring redirection time

The `redirectEnd` and `redirectStart` properties can be used to measure how long the redirection takes.

```js
const redirect = entry.redirectEnd - entry.redirectStart;
```

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const redirect = entry.redirectEnd - entry.redirectStart;
    if (redirect > 0) {
      console.log(`${entry.name}: Redirect time: ${redirect}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const redirect = entry.redirectEnd - entry.redirectStart;
  if (redirect > 0) {
    console.log(`${entry.name}: Redirect time: ${redirect}ms`);
  }
});
```

### Cross-origin timing information

If the value of the `redirectEnd` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see timing resources, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-redirectend |

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

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

See also
--------

* `PerformanceNavigationTiming.redirectCount`
* `Timing-Allow-Origin`


PerformanceResourceTiming: responseEnd property - Web APIs

PerformanceResourceTiming: responseEnd property
===============================================

The **`responseEnd`** read-only property returns a `timestamp` immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.

Unlike many other `PerformanceResourceTiming` properties, the `responseEnd` property is available for cross-origin requests without the need of the `Timing-Allow-Origin` HTTP response header.

Value
-----

 A `DOMHighResTimeStamp` immediately after the browser receives the last
 byte of the resource or immediately before the transport connection is closed, whichever
 comes first.

Examples
--------

### Measuring time to fetch (without redirects)

The `responseEnd` and `fetchStart` properties can be used to measure the overall time it took to fetch the final resource (without redirects). If you want to include redirects, the overall time to fetch is provided in the `duration` property.

```js
const timeToFetch = entry.responseEnd - entry.fetchStart;
```

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const timeToFetch = entry.responseEnd - entry.fetchStart;
    if (timeToFetch > 0) {
      console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const timeToFetch = entry.responseEnd - entry.fetchStart;
  if (timeToFetch > 0) {
    console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
  }
});
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-responseend |

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

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


PerformanceResourceTiming: serverTiming property - Web APIs

PerformanceResourceTiming: serverTiming property
================================================

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

The **`serverTiming`** read-only property returns an array of `PerformanceServerTiming` entries containing server timing metrics.

Server timing metrics require the server to send the `Server-Timing` header. For example:

```http
Server-Timing: cache;desc="Cache Read";dur=23.2
```

The `serverTiming` entries can live on `navigation` and `resource` entries.

Value
-----

An array of `PerformanceServerTiming` entries.

Examples
--------

### Logging server timing entries

You can use a `PerformanceObserver` to watch for `PerformanceServerTiming` entries. Each server entry's duration is logged to the console.

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    entry.serverTiming.forEach((serverEntry) => {
      console.log(`${serverEntry.name} duration: ${serverEntry.duration}`);
    });
  });
});

["navigation", "resource"].forEach((type) =>
  observer.observe({ type, buffered: true }),
);
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
for (const entryType of ["navigation", "resource"]) {
  for (const { name: url, serverTiming } of performance.getEntriesByType(
    entryType,
  )) {
    if (serverTiming) {
      for (const { name, duration } of serverTiming) {
        console.log(`${url}: ${name} duration: ${duration}`);
      }
    }
  }
}
```

### Cross-origin server timing information

Access to server timing information is restricted to the same origin. To expose cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see server timing information, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Server Timing # servertiming-attribute |

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

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

See also
--------

* `PerformanceServerTiming`
* `Server-Timing`


PerformanceResourceTiming: transferSize property - Web APIs

PerformanceResourceTiming: transferSize property
================================================

The **`transferSize`** read-only property represents the size (in octets) of the fetched resource. The size includes the response header fields plus the response payload body (as defined by RFC7230).

If the resource is fetched from a local cache, or if it is a cross-origin resource, this property returns zero.

Value
-----

The `transferSize` property can have the following values:

* A number representing the size (in octets) of the fetched resource. The size includes the response header fields plus the response payload body (RFC7230).
* `0` if the resource was instantaneously retrieved from a cache.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Checking if a cache was hit

For environments not supporting the `responseStatus` property, the `transferSize` property can be used to determine cache hits. If `transferSize` is zero and the resource has a non-zero decoded body size (meaning the resource is same-origin or has `Timing-Allow-Origin`), the resource was fetched from a local cache.

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.transferSize === 0 && entry.decodedBodySize > 0) {
      console.log(`${entry.name} was loaded from cache`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.transferSize === 0 && entry.decodedBodySize > 0) {
    console.log(`${entry.name} was loaded from cache`);
  }
});
```

### Cross-origin content size information

If the value of the `transferSize` property is `0` and wasn't loaded from a local cache, the resource might be a cross-origin request. To expose cross-origin content size information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see content sizes, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-transfersize |

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

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

See also
--------

* `Timing-Allow-Origin`


PerformanceResourceTiming: connectStart property - Web APIs

PerformanceResourceTiming: connectStart property
================================================

The **`connectStart`** read-only property returns the `timestamp` immediately before the user agent starts establishing the connection to the server to retrieve the resource.

Value
-----

The `connectStart` property can have the following values:

* A `DOMHighResTimeStamp` immediately before the browser starts to establish the connection to the server to retrieve the resource.
* `0` if the resource was instantaneously retrieved from a cache.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Measuring TCP handshake time

The `connectStart` and `connectEnd` properties can be used to measure how long it takes for the TCP handshake to happen.

```js
const tcp = entry.connectEnd - entry.connectStart;
```

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const tcp = entry.connectEnd - entry.connectStart;
    if (tcp > 0) {
      console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const tcp = entry.connectEnd - entry.connectStart;
  if (tcp > 0) {
    console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
  }
});
```

### Cross-origin timing information

If the value of the `connectStart` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see timing resources, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-connectstart |

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

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

See also
--------

* `Timing-Allow-Origin`


PerformanceResourceTiming: requestStart property - Web APIs

PerformanceResourceTiming: requestStart property
================================================

The **`requestStart`** read-only property returns a `timestamp` of the time immediately before the browser starts requesting the resource from the server, cache, or local resource. If the transport connection fails and the browser retires the request, the value returned will be the start of the retry request.

There is no *end* property for `requestStart`. To measure the request time, calculate `responseStart` - `requestStart` (see the example below).

Value
-----

The `requestStart` property can have the following values:

* A `DOMHighResTimeStamp` representing the time immediately before the browser starts requesting the resource from the server.
* `0` if the resource was instantaneously retrieved from a cache.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Measuring request time

The `requestStart` and `responseStart` properties can be used to measure how long the request takes.

```js
const request = entry.responseStart - entry.requestStart;
```

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.responseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Request time: ${request}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const request = entry.responseStart - entry.requestStart;
  if (request > 0) {
    console.log(`${entry.name}: Request time: ${request}ms`);
  }
});
```

### Cross-origin timing information

If the value of the `requestStart` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see timing resources, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-requeststart |

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

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

See also
--------

* `Timing-Allow-Origin`


PerformanceResourceTiming: connectEnd property - Web APIs

PerformanceResourceTiming: connectEnd property
==============================================

The **`connectEnd`** read-only property returns the `timestamp` immediately after the browser finishes establishing the connection to the server to retrieve the resource. The timestamp value includes the time interval to establish the transport connection, as well as other time intervals such as TLS handshake and SOCKS authentication.

Value
-----

The `connectEnd` property can have the following values:

* A `DOMHighResTimeStamp` representing the time after a connection is established.
* `0` if the resource was instantaneously retrieved from a cache.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Measuring TCP handshake time

The `connectEnd` and `connectStart` properties can be used to measure how long it takes for the TCP handshake to happen.

```js
const tcp = entry.connectEnd - entry.connectStart;
```

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const tcp = entry.connectEnd - entry.connectStart;
    if (tcp > 0) {
      console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const tcp = entry.connectEnd - entry.connectStart;
  if (tcp > 0) {
    console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
  }
});
```

### Cross-origin timing information

If the value of the `connectEnd` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see timing resources, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-connectend |

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

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

See also
--------

* `Timing-Allow-Origin`


PerformanceResourceTiming: nextHopProtocol property - Web APIs

PerformanceResourceTiming: nextHopProtocol property
===================================================

The **`nextHopProtocol`** read-only property is a string representing the network protocol used to fetch the resource, as identified by the ALPN Protocol ID (RFC7301).

When a proxy is used, if a tunnel connection is established, this property returns the ALPN Protocol ID of the tunneled protocol. Otherwise, this property returns the ALPN Protocol ID of the first hop to the proxy.

Value
-----

The `nextHopProtocol` property can have the following values:

* A string representing the network protocol used to fetch the resource, as identified by the ALPN Protocol ID (RFC7301). Typical values are:
    + `"http/0.9"`
    + `"http/1.0"`
    + `"http/1.1"`
    + `"h2"`
    + `"h2c"`
    + `"h3"`
* An empty string if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Logging resources that use neither HTTP/2 nor HTTP/3

The `nextHopProtocol` property can be used to see resources that don't use the HTTP/2 or HTTP/3 protocols.

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const protocol = entry.nextHopProtocol;
    if (protocol && !(protocol === "h2" || protocol === "h3")) {
      console.log(`${entry.name} uses ${protocol}.`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const protocol = entry.nextHopProtocol;
  if (protocol && !(protocol === "h2" || protocol === "h3")) {
    console.log(`${entry.name} uses ${protocol}.`);
  }
});
```

### Cross-origin network protocol information

If the value of the `nextHopProtocol` property is an empty string, the resource might be a cross-origin request. To expose cross-origin network protocol information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see network protocol information, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-nexthopprotocol |

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

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

See also
--------

* `Timing-Allow-Origin`
* HTTP/2
* HTTP/3


PerformanceResourceTiming: redirectStart property - Web APIs

PerformanceResourceTiming: redirectStart property
=================================================

The **`redirectStart`** read-only property returns a `timestamp` representing the start time of the fetch which that initiates the redirect.

If there are HTTP redirects when fetching the resource and if any of the redirects are not from the same origin as the current document, but the timing allow check algorithm passes for each redirected resource, this property returns the starting time of the fetch that initiates the redirect; otherwise, zero is returned.

To get the amount of redirects, see also `PerformanceNavigationTiming.redirectCount`.

Value
-----

The `redirectStart` property can have the following values:

* A `timestamp` representing the start time of the fetch which initiates the redirect.
* `0` if there is no redirect.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Measuring redirection time

The `redirectStart` and `redirectEnd` properties can be used to measure how long the redirection takes.

```js
const redirect = entry.redirectEnd - entry.redirectStart;
```

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const redirect = entry.redirectEnd - entry.redirectStart;
    if (redirect > 0) {
      console.log(`${entry.name}: Redirect time: ${redirect}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const redirect = entry.redirectEnd - entry.redirectStart;
  if (redirect > 0) {
    console.log(`${entry.name}: Redirect time: ${redirect}ms`);
  }
});
```

### Cross-origin timing information

If the value of the `redirectStart` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see timing resources, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-redirectstart |

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

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

See also
--------

* `PerformanceNavigationTiming.redirectCount`
* `Timing-Allow-Origin`


PerformanceResourceTiming: fetchStart property - Web APIs

PerformanceResourceTiming: fetchStart property
==============================================

The **`fetchStart`** read-only property represents a `timestamp` immediately before the browser starts to fetch the resource.

If there are HTTP redirects, the property returns the time immediately before the user agent starts to fetch the final resource in the redirection.

Unlike many other `PerformanceResourceTiming` properties, the `fetchStart` property is available for cross-origin requests without the need of the `Timing-Allow-Origin` HTTP response header.

Value
-----

 A `DOMHighResTimeStamp` immediately before the browser starts to fetch the
 resource.

Examples
--------

### Measuring time to fetch (without redirects)

The `fetchStart` and `responseEnd` properties can be used to measure the overall time it took to fetch the final resource (without redirects). If you want to include redirects, the overall time to fetch is provided in the `duration` property.

```js
const timeToFetch = entry.responseEnd - entry.fetchStart;
```

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const timeToFetch = entry.responseEnd - entry.fetchStart;
    if (timeToFetch > 0) {
      console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const timeToFetch = entry.responseEnd - entry.fetchStart;
  if (timeToFetch > 0) {
    console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
  }
});
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-fetchstart |

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

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


PerformanceResourceTiming: decodedBodySize property - Web APIs

PerformanceResourceTiming: decodedBodySize property
===================================================

The **`decodedBodySize`** read-only property returns the size (in octets) received from the fetch (HTTP or cache) of the message body after removing any applied content encoding (like gzip or Brotli). If the resource is retrieved from an application cache or local resources, it returns the size of the payload after removing any applied content encoding.

Value
-----

The `decodedBodySize` property can have the following values:

* A number representing the size (in octets) received from the fetch (HTTP or cache) of the message body, after removing any applied content encoding.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Checking if content was compressed

If the `decodedBodySize` and `encodedBodySize` properties are non-null and differ, the content was compressed (for example, gzip or Brotli).

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const uncompressed =
      entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
    if (uncompressed) {
      console.log(`${entry.name} was not compressed!`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const uncompressed =
    entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
  if (uncompressed) {
    console.log(`${entry.name} was not compressed!`);
  }
});
```

### Cross-origin content size information

If the value of the `decodedBodySize` property is `0`, the resource might be a cross-origin request. To expose cross-origin content size information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see content sizes, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-decodedbodysize |

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

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

See also
--------

* `Timing-Allow-Origin`


PerformanceResourceTiming: secureConnectionStart property - Web APIs

PerformanceResourceTiming: secureConnectionStart property
=========================================================

The **`secureConnectionStart`** read-only property returns a `timestamp` immediately before the browser starts the handshake process to secure the current connection. If a secure connection is not used, the property returns zero.

Value
-----

The `secureConnectionStart` property can have the following values:

* A `DOMHighResTimeStamp` indicating the time immediately before the browser starts the handshake process to secure the current connection if the resource is fetched over a secure connection.
* `0` if no secure connection is used.
* `0` if the resource was instantaneously retrieved from a cache.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Measuring TLS negotiation time

The `secureConnectionStart` and `requestStart` properties can be used to measure how long it takes for the TLS negotiation to happen.

```js
const tls = entry.requestStart - entry.secureConnectionStart;
```

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const tls = entry.requestStart - entry.secureConnectionStart;
    if (tls > 0) {
      console.log(`${entry.name}: TLS negotiation duration: ${tls}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const tls = entry.requestStart - entry.secureConnectionStart;
  if (tls > 0) {
    console.log(`${entry.name}: TLS negotiation duration: ${tls}ms`);
  }
});
```

### Cross-origin timing information

If the value of the `secureConnectionStart` property is `0`, the resource is either not using a secure connection or it is a cross-origin request. To allow seeing cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see timing resources, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-secureconnectionstart |

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

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

See also
--------

* `Timing-Allow-Origin`


PerformanceResourceTiming: toJSON() method - Web APIs

PerformanceResourceTiming: toJSON() method
==========================================

The **`toJSON()`** method of the `PerformanceResourceTiming` interface is a serializer; it returns a JSON representation of the `PerformanceResourceTiming` object.

Syntax
------

```js
toJSON()
```

### Parameters

None.

### Return value

A `JSON` object that is the serialization of the `PerformanceResourceTiming` object.

Examples
--------

### Using the toJSON method

In this example, calling `entry.toJSON()` returns a JSON representation of the `PerformanceResourceTiming` object.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.toJSON());
  });
});

observer.observe({ type: "resource", buffered: true });
```

This would log a JSON object like so:

```json
{
  "name": "https://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/31px-Commons-logo.svg.png",
  "entryType": "resource",
  "startTime": 110.80000001192093,
  "duration": 11.599999994039536,
  "initiatorType": "img",
  "nextHopProtocol": "h2",
  "renderBlockingStatus": "non-blocking",
  "workerStart": 0,
  "redirectStart": 0,
  "redirectEnd": 0,
  "fetchStart": 110.80000001192093,
  "domainLookupStart": 110.80000001192093,
  "domainLookupEnd": 110.80000001192093,
  "connectStart": 110.80000001192093,
  "connectEnd": 110.80000001192093,
  "secureConnectionStart": 110.80000001192093,
  "requestStart": 117.30000001192093,
  "responseStart": 120.40000000596046,
  "responseStatus": 200,
  "responseEnd": 122.40000000596046,
  "transferSize": 0,
  "encodedBodySize": 880,
  "decodedBodySize": 880,
  "serverTiming": [
    {
      "name": "cache",
      "duration": 0,
      "description": "hit-front"
    },
    {
      "name": "host",
      "duration": 0,
      "description": "cp3061"
    }
  ]
}
```

To get a JSON string, you can use `JSON.stringify(entry)` directly; it will call `toJSON()` automatically.

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-tojson |

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

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

See also
--------

* `JSON`


PerformanceResourceTiming: renderBlockingStatus property - Web APIs

PerformanceResourceTiming: renderBlockingStatus property
========================================================

The **`renderBlockingStatus`** read-only property returns the render-blocking status of the resource.

It is useful to determine resources that:

* weren't render-blocking and therefore could be delayed, or
* were render-blocking and therefore could be preloaded.
Description
-----------

Render-blocking resources are static files, such as fonts, CSS, and JavaScript that block or delay the browser from rendering page content to the screen. The browser determines these blocking resources automatically and doesn't render any pixel to the screen before all stylesheets and synchronous scripts are loaded and evaluated. This prevents Flash of Unstyled Contents ("FOUC").

In addition to the automatic render-blocking mechanism, `blocking="render"` can be provided as an attribute and value to `<script>`, `<style>` or `<link>` elements to specify explicit render-blocking. For example:

```html
<link
 blocking="render"
 rel="preload"
 href="critical-font.woff2"
 as="font"
 crossorigin />
```

Value
-----

The `renderBlockingStatus` property can have the following values:

`"blocking"`

The resource might potentially block rendering.

`"non-blocking"`

The resource does not block rendering.

Examples
--------

### Logging resources that block rendering

The `renderBlockingStatus` property can be used to see resources that block rendering.

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.renderBlockingStatus === "blocking") {
      console.log(`${entry.name} is render-blocking.`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```

Example using `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.renderBlockingStatus === "blocking") {
    console.log(`${entry.name} is render-blocking.`);
  }
});
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-renderblockingstatus |

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

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


SVGMarkerElement: refY property - Web APIs

SVGMarkerElement: refY property
===============================

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

Value
-----

An `SVGAnimatedLength` object. The `baseVal` property of this object returns an `SVGLength`, the value of which returns the `refY`.

Examples
--------

The `markerWidth` property returns an `SVGAnimatedLength` which contains an `SVGLength` with the value of the `refY` attribute.

```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"
 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.refY.baseVal.value); // 5
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_refY |

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

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


SVGMarkerElement: setOrientToAuto() method - Web APIs

SVGMarkerElement: setOrientToAuto() method
==========================================

The **`setOrientToAuto()`** method of the `SVGMarkerElement` interface sets the value of the `orient` attribute to `auto`.

Syntax
------

```js
setOrientToAuto()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

In the following example the value of the `orient` attribute is updated using `setOrientToAuto()`.

```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"
 markerWidth="6"
 markerHeight="6"
 orient="90">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```

```js
let marker = document.getElementById("arrow");
console.log(marker.orientAngle.baseVal.value);
marker.setOrientToAuto();
console.log(marker.orientAngle.baseVal.value);
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_setOrientToAuto |

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

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


SVGMarkerElement: markerHeight property - Web APIs

SVGMarkerElement: markerHeight property
=======================================

The **`markerHeight`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedLength` object containing the height of the `<marker>` viewport as defined by the `markerHeight` attribute.

Value
-----

An `SVGAnimatedLength` object. The `baseVal` property of this object returns an `SVGLength`, the value of which returns the `height`.

Examples
--------

The `markerHeight` property returns an `SVGAnimatedLength` which contains an `SVGLength` with the value of the `markerHeight` attribute.

```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"
 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.markerHeight.baseVal.value); // 6
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_markerHeight |

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

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


SVGMarkerElement: refX property - Web APIs

SVGMarkerElement: refX property
===============================

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

Value
-----

An `SVGAnimatedLength` object. The `baseVal` property of this object returns an `SVGLength`, the value of which returns the `refX`.

Examples
--------

The `markerWidth` property returns an `SVGAnimatedLength` which contains an `SVGLength` with the value of the `refX` attribute.

```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"
 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.refX.baseVal.value); // 5
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_refX |

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

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


SVGMarkerElement: markerUnits property - Web APIs

SVGMarkerElement: markerUnits property
======================================

The **`markerUnits`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedEnumeration` object. This object returns an integer which represents the keyword values that the `markerUnits` attribute accepts.

Value
-----

An `SVGAnimatedEnumeration` object. The `baseVal` property of this object contains one of the following values:

`0`

`SVG_MARKERUNITS_UNKNOWN` which means that the `markerUnits` attribute has a value other than the two predefined keywords.

`1`

`SVG_MARKERUNITS_USERSPACEONUSE` which means that the `markerUnits` attribute has the keyword value `userSpaceOnUse`.

`2`

`SVG_MARKERUNITS_STROKEWIDTH` which means that the `markerUnits` attribute has the keyword value `strokeWidth`.

Examples
--------

The `markerUnits` property returns an `SVGAnimatedEnumeration` object that contains the value of the `markerUnits` attribute.

```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"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse"
 markerUnits="strokeWidth">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```

```js
let marker = document.getElementById("arrow");
console.log(marker.markerUnits.baseVal); // 2
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_markerUnits |

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

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


SVGMarkerElement: setOrientToAngle() method - Web APIs

SVGMarkerElement: setOrientToAngle() method
===========================================

The **`setOrientToAngle()`** method of the `SVGMarkerElement` interface sets the value of the `orient` attribute to the value in the `SVGAngle` passed in.

Syntax
------

```js
setOrientToAngle(angle)
```

### Parameters

`angle`

An `SVGAngle`.

### Return value

None (`undefined`).

Examples
--------

In the following example the value of the `orient` attribute is updated using `setOrientToAngle()` using an `SVGAngle` created using `SVGSVGElement.createSVGAngle()`.

```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"
 markerWidth="6"
 markerHeight="6"
 orient="90">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```

```js
let svg = document.getElementById("svg");
let marker = document.getElementById("arrow");
console.log(marker.orientAngle.baseVal.value); // value in SVG above - 90
let angle = svg.createSVGAngle();
angle.value = "110";
marker.setOrientToAngle(angle);
console.log(marker.orientAngle.baseVal.value); // new value - 110
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_setOrientToAngle |

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

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


SVGMarkerElement: markerWidth property - Web APIs

SVGMarkerElement: markerWidth property
======================================

The **`markerWidth`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedLength` object containing the width of the `<marker>` viewport as defined by the `markerWidth` attribute.

Value
-----

An `SVGAnimatedLength` object. The `baseVal` property of this object returns an `SVGLength`, the value of which returns the `width`.

Examples
--------

The `markerWidth` property returns an `SVGAnimatedLength` which contains an `SVGLength` with the value of the `markerWidth` attribute.

```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"
 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.markerWidth.baseVal.value); // 6
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_markerWidth |

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

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


SVGMarkerElement: orientAngle property - Web APIs

SVGMarkerElement: orientAngle property
======================================

The **`orientAngle`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedAngle` object containing the angle of the `orient` attribute.

Value
-----

An `SVGAnimatedAngle` object. The `baseVal` property of this object returns an `SVGAngle`, the value of which returns the `angle`.

Examples
--------

The `orientAngle` property returns an `SVGAnimatedAngle` which contains an `SVGAngle` with the angle set by the `orient` attribute as a number representing the number of degrees the marker is turned.

```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"
 markerWidth="6"
 markerHeight="6"
 orient=".5turn">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```

```js
let marker = document.getElementById("arrow");
console.log(marker.orientAngle.baseVal.value); // 180 as .5turn is 180deg.
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_orientAngle |

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

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


SVGMarkerElement: viewBox property - Web APIs

SVGMarkerElement: viewBox property
==================================

The **`viewBox`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedRect` object which contains the values set by the `viewBox` attribute on the `<marker>`.

Value
-----

An `SVGAnimatedRect` object. The `baseVal` property of this object returns an `SVGRect` object, from which can be returned the `x` and `y` co-ordinates, plus the `width` and `height` of the `<marker>` `viewBox` attribute.

Examples
--------

This example demonstrates how to return the value of the `width` set for the `viewBox` 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"
 viewBox="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.viewBox.baseVal.width); //10
```

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

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

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

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


SVGMarkerElement: orientType property - Web APIs

SVGMarkerElement: orientType property
=====================================

The **`orientType`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedEnumeration` object indicating whether the `orient` attribute is `auto`, an angle value, or something else.

This *something else* is most likely to be the keyword `auto-start-reverse` however the spec leaves it open for this to be other values. Unsupported values will generally be thrown away by the parser, leaving the value the default of `auto`.

Value
-----

An `SVGAnimatedEnumeration` object. This contains one of the following values:

`0`

`SVG_MARKER_ORIENT_UNKNOWN` which means that the `orient` attribute has a value other than `auto` or an angle.

`1`

`SVG_MARKERUNITS_ORIENT_AUTO` which means that the `orient` attribute has the keyword value `auto`.

`2`

`SVG_MARKERUNITS_ORIENT_ANGLE` which means that the `orient` attribute has an `<angle>` or `<number>` value indicating the angle.

Examples
--------

The `orientType` property returns an `SVGAnimatedEnumeration` object. As the value of the `orient` attribute is an angle, returning the `SVGAnimatedEnumeration.baseVal` returns `2`.

```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"
 markerWidth="6"
 markerHeight="6"
 orient=".63deg">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```

```js
let marker = document.getElementById("arrow");
console.log(marker.orientType.baseVal); // 2
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_orientType |

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

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


SVGMarkerElement: preserveAspectRatio property - Web APIs

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 - Web APIs

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 - Web APIs

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: audioprocess event - Web APIs

ScriptProcessorNode: audioprocess event
=======================================

**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 `audioprocess` event of the `ScriptProcessorNode` interface is fired when an input buffer of a script processor is ready to be processed.

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

This event is not cancelable and does not bubble.

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

An `AudioProcessingEvent`. Inherits from `Event`.

Event

AudioProcessingEventEvent properties
----------------

*Also implements the properties inherited from its parent, `Event`.*

`playbackTime` Read only

 A double representing the time when the audio will be played,
 as defined by the time of `AudioContext.currentTime`.

`inputBuffer` Read only

 An `AudioBuffer` that is the buffer containing the input audio data to be processed.
 The number of channels is defined as a parameter `numberOfInputChannels`,
 of the factory method `AudioContext.createScriptProcessor()`.
 Note that the returned `AudioBuffer` is only valid in the scope of the event handler.

`outputBuffer` Read only

 An `AudioBuffer` that is the buffer where the output audio data should be written.
 The number of channels is defined as a parameter, `numberOfOutputChannels`,
 of the factory method `AudioContext.createScriptProcessor()`.
 Note that the returned `AudioBuffer` is only valid in the scope of the event handler.

Examples
--------

```js
scriptNode.addEventListener("audioprocess", (audioProcessingEvent) => {
  // The input buffer is a song we loaded earlier
  const inputBuffer = audioProcessingEvent.inputBuffer;

  // The output buffer contains the samples that will be modified and played
  const outputBuffer = audioProcessingEvent.outputBuffer;

  // Loop through the output channels (in this case there is only one)
  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    const inputData = inputBuffer.getChannelData(channel);
    const outputData = outputBuffer.getChannelData(channel);

    // Loop through the 4096 samples
    for (let sample = 0; sample < inputBuffer.length; sample++) {
      // make output equal to the same as the input
      outputData[sample] = inputData[sample];

      // add noise to each output sample
      outputData[sample] += (Math.random() \* 2 - 1) \* 0.2;
    }
  }
});
```

You could also set up the event handler using the `onaudioprocess` property:

```js
scriptNode.onaudioprocess = (audioProcessingEvent) => {
  // ...
};
```

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
--------

* Web Audio API


ScriptProcessorNode: bufferSize property - Web APIs

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 - Web APIs

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 - Web APIs

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 - Web APIs

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 - Web APIs

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 - Web APIs

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 - Web APIs

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 - Web APIs

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 - Web APIs

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 - Web APIs

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 - Web APIs

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 - Web APIs

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 - Web APIs

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: TransformStream() constructor - Web APIs

TransformStream: TransformStream() constructor
==============================================

The **`TransformStream()`** constructor creates a new `TransformStream` object which represents a pair of streams: a `WritableStream` representing the writable side, and a `ReadableStream` representing the readable side.

Syntax
------

```js
new TransformStream()
new TransformStream(transformer)
new TransformStream(transformer, writableStrategy)
new TransformStream(transformer, writableStrategy, readableStrategy)
```

### Parameters

`transformer` Optional

An object representing the `transformer`. If not supplied the resulting stream will be an **identity transform stream** which forwards all chunks written to its writable side to its readable side, without any changes.

The transformer object can contain any of the following methods. In each method `controller` is an instance of `TransformStreamDefaultController`.

`start(controller)`

Called when the `TransformStream` is constructed. It is typically used to enqueue chunks using `TransformStreamDefaultController.enqueue()`.

`transform(chunk, controller)`

Called when a chunk written to the writable side is ready to be transformed, and performs the work of the transformation stream. It can return a promise to signal success or failure of the write operation. If no `transform()` method is supplied, the identity transform is used, and the chunk will be enqueued with no changes.

`flush(controller)`

Called after all chunks written to the writable side have been successfully transformed, and the writable side is about to be closed.

`writableStrategy` Optional

 An object that optionally defines a queuing strategy for the stream. This takes two
 parameters:

`highWaterMark`

 A non-negative integer. This defines the total number of chunks that can be
 contained in the internal queue before backpressure is applied.

`size(chunk)`

 A method containing a parameter `chunk`. This indicates the size to
 use for each chunk, in bytes.

`readableStrategy` Optional

 An object that optionally defines a queuing strategy for the stream. This takes two
 parameters:

`highWaterMark`

 A non-negative integer. This defines the total number of chunks that can be
 contained in the internal queue before backpressure is applied.

`size(chunk)`

 A method containing a parameter `chunk`. This indicates the size to
 use for each chunk, in bytes.

**Note:** You could define your own custom
 `readableStrategy` or `writableStrategy`, or use an instance of
 `ByteLengthQueuingStrategy` or `CountQueuingStrategy`
 for the object values.

Examples
--------

### Transforming text to uppercase

The following example transforms text to uppercase chunk by chunk. This example is from Streams—The Definitive Guide, which has a number of examples of different types of streams.

```js
function upperCaseStream() {
  return new TransformStream({
    transform(chunk, controller) {
      controller.enqueue(chunk.toUpperCase());
    },
  });
}

function appendToDOMStream(el) {
  return new WritableStream({
    write(chunk) {
      el.append(chunk);
    },
  });
}

fetch("./lorem-ipsum.txt").then((response) =>
  response.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(upperCaseStream())
    .pipeTo(appendToDOMStream(document.body)),
);
```

### Creating an identity transform stream

If no `transformer` argument is supplied then the result will be an identity transform stream which forwards all chunks written to the writable side to the readable side with no changes. In the following example an identity transform stream is used to add buffering to a pipe.

```js
const writableStrategy = new ByteLengthQueuingStrategy({
  highWaterMark: 1024 \* 1024,
});
readableStream
  .pipeThrough(new TransformStream(undefined, writableStrategy))
  .pipeTo(writableStream);
```

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

| Specification |
| --- |
| Streams Standard # ref-for-ts-constructor④ |

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

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


TransformStream: readable property - Web APIs

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 - Web APIs

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 - Web APIs

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 - Web APIs

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 - Web APIs

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.


CSSPropertyRule: syntax property - Web APIs

CSSPropertyRule: syntax 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 **`syntax`** property of the `CSSPropertyRule` interface returns the literal syntax of the custom property registration represented by the `@property` rule, controlling how the property's value is parsed at computed-value time.

Value
-----

A string.

Examples
--------

This stylesheet contains a single `@property` rule. The first `CSSRule` returned will be a `CSSPropertyRule` representing this rule. The `syntax` property returns the literal string `"<color>"`.

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

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].syntax); //the string "<color>"
```

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

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

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

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


CSSPropertyRule: initialValue property - Web APIs

CSSPropertyRule: initialValue 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 **`initialValue`** nullable property of the `CSSPropertyRule` interface returns the initial value of the custom property registration represented by the `@property` rule, controlling the property's initial value.

Value
-----

 A string which is a `<declaration-value>` as
 defined in CSS Syntax 3.

Examples
--------

This stylesheet contains a single `@property` rule. The first `CSSRule` returned will be a `CSSPropertyRule` representing this rule. The `initialValue` property returns the string `"#c0ffee"` this being the value of the `initial-value` 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].initialValue); //the string "#c0ffee"
```

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

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

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

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