recursal/MDN huggingface dataset:
WebTransportDatagramDuplexStream: incomingHighWaterMark 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 **`incomingHighWaterMark`** property of the `WebTransportDatagramDuplexStream` interface gets or sets the high water mark for incoming chunks of data — this is the maximum size, in chunks, that the incoming `ReadableStream`'s internal queue can reach before it is considered full. See Internal queues and queuing strategies for more information.

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

Value
-----

A number.

Examples
--------


```js
const url = "https://example.com:4999/wt";

async function initTransport(url) {
  // Initialize transport connection
  const transport = new WebTransport(url);

  // The connection can be used once ready fulfills
  await transport.ready;

  const datagrams = transport.datagrams;

  // set incomingHighWaterMark
  datagrams.incomingHighWaterMark = 20000;

  // get incomingHighWaterMark
  console.log(datagrams.incomingHighWaterMark);
}
```

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

| Specification |
| --- |
| WebTransport # dom-webtransportdatagramduplexstream-incominghighwatermark |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
WebTransportDatagramDuplexStream: maxDatagramSize 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 **`maxDatagramSize`** read-only property of the `WebTransportDatagramDuplexStream` interface returns the maximum allowable size of outgoing datagrams, in bytes, that can be written to `writable`.

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

Value
-----

A number.

Examples
--------


```js
const url = "https://example.com:4999/wt";

async function initTransport(url) {
  // Initialize transport connection
  const transport = new WebTransport(url);

  // The connection can be used once ready fulfills
  await transport.ready;

  const datagrams = transport.datagrams;

  // get maxDatagramSize
  console.log(datagrams.maxDatagramSize);
}
```

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

| Specification |
| --- |
| WebTransport # dom-webtransportdatagramduplexstream-maxdatagramsize |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
WebTransportDatagramDuplexStream: readable 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 **`readable`** read-only property of the `WebTransportDatagramDuplexStream` interface returns a `ReadableStream` instance that can be used to unreliably read incoming datagrams from the stream.

"Unreliably" means that transmission of data is not guaranteed, nor is arrival in a specific order. This is fine in some situations and provides very fast delivery. For example, you might want to transmit regular game state updates where each message supersedes the last one that arrives, and order is not important.

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

Value
-----

A `ReadableStream`.

Examples
--------

See the main `WebTransportDatagramDuplexStream` interface page.

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

| Specification |
| --- |
| WebTransport # dom-webtransportdatagramduplexstream-readable |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
WebTransportDatagramDuplexStream: writable 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 **`writable`** read-only property of the `WebTransportDatagramDuplexStream` interface returns a `WritableStream` instance that can be used to unreliably write outgoing datagrams to the stream.

"Unreliably" means that transmission of data is not guaranteed, nor is arrival in a specific order. This is fine in some situations and provides very fast delivery. For example, you might want to transmit regular game state updates where each message supersedes the last one that arrives, and order is not important.

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

Value
-----

A `WritableStream`.

Examples
--------

See the main `WebTransportDatagramDuplexStream` interface page.

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

| Specification |
| --- |
| WebTransport # dom-webtransportdatagramduplexstream-writable |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
ValidityState: badInput property
================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`badInput`** property of a ValidityState object indicates if the user has provided input that the browser is unable to convert. For example, if you have a number input element whose content is a string.

Value
-----

A boolean.

Examples
--------


```html
<input type="number" id="age" />
```



```js
const input = document.getElementById("age");
if (input.validity.badInput) {
  console.log("Bad input detected…");
} else {
  console.log("Content of input OK.");
}
```

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-badinput-dev |

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

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

See also
--------

* Guide: Constraint validation
* Tutorial: Form data validation
ValidityState: rangeOverflow property
=====================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`rangeOverflow`** property of a **`ValidityState`** object indicates if the value of an `<input>`, after having been edited by the user, does not conform to the constraints set by the element's `max` attribute.

If the field is numeric in nature, including the date, month, week, time, datetime-local, number and range types and a `max` value is set, if the value doesn't conform to the constraints set by the `max` value, the `rangeOverflow` property will be true.

Given the following:


```html
<input type="number" min="20" max="40" step="2" />
```


if `value > 40`, `rangeOverflow` will be true. When `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-rangeoverflow |

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

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

See also
--------

* `ValidityState.rangeUnderflow`
* Constraint validation
* Forms: Data form validation
* `step` attribute
* `min` attribute
ValidityState: tooLong property
===============================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`tooLong`** property of a **`ValidityState`** object indicates if the value of an `<input>` or `<textarea>`, after having been edited by the user, exceeds the maximum code-unit length established by the element's `maxlength` attribute.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-toolong-dev |

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

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

See also
--------

* Constraint validation
* Forms: Data form validation
ValidityState: patternMismatch property
=======================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`patternMismatch`** property of a **`ValidityState`** object indicates if the value of an `<input>`, after having been edited by the user, does not conform to the constraints set by the element's `pattern` attribute.

The `patternMismatch` property will be true if and only if the following conditions are all true:

* the field supports the `pattern` attribute — which means the `<input>` is of `type` text, tel, email, url, password, or search
* the `pattern` attribute contains a valid regular expression
* the `<input>` value doesn't conform to the constraints set by the `pattern` value.
Examples
--------

Given the following:


```html
<p>
  <label
 >Enter your phone number in the format (123)456-7890 (<input
 name="tel1"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3-digit area code"
 size="2" />)-
    <input
 name="tel2"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3-digit prefix"
 size="2" />
    -
    <input
 name="tel3"
 type="tel"
 pattern="[0-9]{4}"
 placeholder="####"
 aria-label="4-digit number"
 size="3" />
  </label>
</p>
```


Here we have 3 sections for a North American phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the `pattern` attribute set on each.

If the values are too long or too short, or contain characters that aren't digits, `patternMismatch` will be true. When `true`, the element matches the `:invalid` CSS pseudo-classes.


```css
input:invalid {
  border: red solid 3px;
}
```


Note, in this case, we get a `patternMismatch` not a `validityState.tooLong` or `validityState.tooShort` if the values are too long or too short because it is the pattern that is dictating the length of the value. Had we used `minlength` and `maxlength` attributes instead, we may have seen `validityState.tooLong` or `validityState.tooShort` being true.

**Note:** The `email` input type requires, at minimum, a match of `x@y` and the `url` type requires, at minimum, a match to x:, with no pattern attribute present. When invalid, the `validityState.typeMismatch` will be true, if there is no pattern attribute (or if the pattern attribute is not valid for that input type).

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-patternmismatch |

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

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

See also
--------

* Constraint validation
* Forms: Data form validation
* Regular Expressions
ValidityState: valueMissing property
====================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`valueMissing`** property of a **`ValidityState`** object indicates if a `required` control, such as an `<input>`, `<select>`, or `<textarea>`, has an empty value.

If the `required` attribute is set, and no `<option>` is selected or a `<textarea>` or user-editable `<input>` is empty, the `valueMissing` property will be `true`. The property is only `true` if the field is required and has no value; if the field is not required, or if the field is required and has a value, the value is `false`.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-valuemissing-dev |

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

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

See also
--------

* Constraint validation
* Forms: Data form validation
* Regular Expressions
ValidityState: rangeUnderflow property
======================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`rangeUnderflow`** property of a **`ValidityState`** object indicates if the value of an `<input>`, after having been edited by the user, does not conform to the constraints set by the element's `min` attribute.

If the field is numeric in nature, including the date, month, week, time, datetime-local, number and range types and a `min` value is set, if the value doesn't conform to the constraints set by the `min` value, the `rangeUnderflow` property will be true.

Given the following:


```html
<input type="number" min="20" max="40" step="2" />
```


if `value < 20`, `rangeUnderflow` will be true. When `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-rangeunderflow |

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

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

See also
--------

* `ValidityState.rangeOverflow`
* Constraint validation
* Forms: Data form validation
* `step` attribute
* `max` attribute
ValidityState: typeMismatch property
====================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`typeMismatch`** property of a **`ValidityState`** object indicates if the value of an `<input>`, after having been edited by the user, does not conform to the constraints set by the element's `type` attribute.

If the `type` attribute expects specific strings, such as the email and url types and the value doesn't conform to the constraints set by the type, the `typeMismatch` property will be true.

The email input type expects one or more valid email addresses, depending on whether the `multiple` attribute is present. A valid email address includes an email prefix and a domain, with or without a top level domain. If the value of the email input is not an empty string, a single valid email address, or one or more comma separated email address if the `multiple` attribute is present, there is a `typeMismatch`.

The url input type expects one or more valid URLs, depending on whether the `multiple` attribute is present. A valid URL includes a protocol, optionally with an IP address, or an optional subdomain, domain, and top level domain combination. If the value of the URL input is not an empty string, a single valid URL, or one or more comma separated URLS if the `multiple` attribute is present, there is a `typeMismatch`.

| Input type | Value | Expected value |
| --- | --- | --- |
| email | `x@y` or `x@y.z` | email address, with or without TLD |
| url | `x:` or `x://y.z` | protocol or full URL with protocol |

Examples
--------

Given the following:


```html
<p>
  <label>
    Enter an email address:
    <input type="email" value="example.com" />
  </label>
</p>
<p>
  <label>
    Enter a URL:
    <input type="url" value="example.com" />
  </label>
</p>
```



```css
input:invalid {
  border: red solid 3px;
}
```


The above each produce a `typeMismatch` because the email address is just a domain and the URL has no protocol

The `typeMismatch` occurs when there is a disconnect between the `value` expected via the `type` attribute and the data that is actually present. The `typeMismatch` is only one of the many possible errors and is only relevant for the email and url types. When the value provided doesn't match the expected value based on the type for other input types, you get different errors. For example, if the number input value is not a floating point number, the `badInput` is `true`. If the email is `required` but is empty, the `valueMissing` will be `true`.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-typemismatch |

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

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

See also
--------

* Constraint validation
* Forms: Data form validation
* Regular Expressions
ValidityState: tooShort property
================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`tooShort`** property of a **`ValidityState`** object indicates if the value of an `<input>`, `<button>`, `<select>`, `<output>`, `<fieldset>` or `<textarea>`, after having been edited by the user, is less than the minimum code-unit length established by the element's `minlength` attribute.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-tooshort-dev |

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

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

See also
--------

* Guide: Constraint validation
* Tutorial: Form data validation
ValidityState: stepMismatch property
====================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`stepMismatch`** property of a **`ValidityState`** object indicates if the value of an `<input>`, after having been edited by the user, does not conform to the constraints set by the element's `step` attribute.

If the field is numeric in nature, including the date, month, week, time, datetime-local, number and range types and the step value is not `any`, if the value don't doesn't conform to the constraints set by the `step` and `min` values, then `stepMismatch` will be true. If the remainder of the form control's value less the `min` value, divided by the `step` value (which defaults to 1 if omitted) is not zero, there is a mismatch.

Given the following:


```html
<input type="number" min="20" max="40" step="2" />
```


if `(value - min) % 2 !== 0`, `stepMismatch` will be true.

If true, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.

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

| Specification |
| --- |
| HTML Standard # dom-validitystate-stepmismatch |

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

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

See also
--------

* Constraint validation
* Forms: Data form validation
* `step` attribute
XRSession: depthDataFormat property
===================================

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

 The *read-only* **`depthDataFormat`** property of an `immersive-ar`
`XRSession` describes which depth sensing data format is used.

Value
-----

This property can return the following values:

`luminance-alpha`

 2-byte unsigned integer data buffers (`LUMINANCE_ALPHA` `GLEnum`).
 CPU usage: interpret `XRCPUDepthInformation.data` as `Uint8Array`.
 GPU usage: inspect Luminance and Alpha channels to reassemble single value.


`float32`

 4-byte floating point data buffers (`R32F` `GLEnum`).
 CPU usage: interpret `XRCPUDepthInformation.data` as `Float32Array`.
 GPU usage: inspect Red channel and use the value.


Examples
--------

To request the desired data format, you need to specify a `dataFormatPreference` when requesting a session using `XRSystem.requestSession()`. Here, the caller is able to handle both "luminance-alpha" and "float32" formats. The order indicates preference for "luminance-alpha":


```js
navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["depth-sensing"],
  depthSensing: {
    usagePreference: ["cpu-optimized", "gpu-optimized"],
    formatPreference: ["luminance-alpha", "float32"],
  },
});
```


To check which data format was selected by the user agent, you can call the `depthDataFormat` property:


```js
console.log(session.depthDataFormat); // either "luminance-alpha" or "float32"
```

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

| Specification |
| --- |
| WebXR Depth Sensing Module # dom-xrsession-depthdataformat |

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

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

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

 The **`cancelAnimationFrame()`** method of
 the `XRSession` interface cancels an animation frame which was previously
 requested by calling `requestAnimationFrame`.

Syntax
------


```js
cancelAnimationFrame(handle)
```

### Parameters

`handle`

 The unique value returned by the call
 to `requestAnimationFrame()` that
 previously scheduled the animation callback.


### Return value

None (`undefined`).

Usage notes
-----------

This function has no effect if the specified `handle` cannot be found.

Examples
--------

 In the example below we see code which starts up a WebXR session if immersive VR mode
 is supported. Once started, the session schedules its first frame to be rendered by
 calling `requestAnimationFrame()`.

 The `pauseXR()` function shown at the bottom can be called to suspend the
 WebVR session, in essence, by canceling any pending animation frame callback. Since each
 frame callback schedules the next one, removing the callback terminates updating of the
 WebXR scene.


```js
const XR = navigator.xr;

let requestHandle = null;
let xrSession = null;

if (XR) {
  XR.isSessionSupported("immersive-vr").then((isSupported) => {
    if (isSupported) {
      startXR();
    }
  });
}

function frameCallback(time, xrFrame) {
  xrSession.requestAnimationFrame(frameCallback);

  // Update and render the frame
}

async function startXR() {
  xrSession = XR.requestSession("immersive-vr");

  if (xrSession) {
    stopButton.onclick = stopXR;
    requestHandle = xrSession.requestAnimationFrame(frameCallback);
  }
}

function pauseXR() {
  if (xrSession && requestHandle) {
    xrSession.cancelAnimationFrame(requestHandle);
    requestHandle = null;
  }
}
```

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

| Specification |
| --- |
| WebXR Device API # dom-xrsession-cancelanimationframe |

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

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

See also
--------

* `Window.cancelAnimationFrame`
* `XRSession.requestAnimationFrame`